/* ==========================================================================
   Anima Biotech — mockup stylesheet
   One shared stylesheet for every page. In Astro this can move to
   src/styles/global.css and be imported once in the base layout.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --ink-900: #07111f;
  --ink-800: #0c1a2e;
  --ink-700: #13263f;
  --ink-600: #1e3757;
  --slate-500: #5b6b80;
  --slate-400: #8796a8;
  --slate-200: #d9e1ea;
  --slate-100: #edf2f7;
  --white: #ffffff;
  --bg: #f7f9fc;

  --teal-500: #12b5a6;
  --teal-400: #2fd3c3;
  --cyan-400: #38bdf8;
  --violet-500: #7c5cff;

  --grad-brand: linear-gradient(120deg, var(--teal-400) 0%, var(--cyan-400) 50%, var(--violet-500) 100%);

  /* animabiotech.com brand (used by the .ah-* home sections; roll out site-wide later) */
  --anima-black: #000000;
  --anima-orange: #ff9d34;
  --anima-orange-glow: rgba(255, 157, 52, .55);
  --font-geist: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(7, 17, 31, .06), 0 2px 8px rgba(7, 17, 31, .04);
  --shadow: 0 10px 30px rgba(7, 17, 31, .08);

  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 104px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-500); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  color: var(--ink-900);
}
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--cyan-400); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--white); color: var(--ink-900); padding: 8px 14px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .8em 1.4em; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; line-height: 1; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--teal-500); color: var(--white); box-shadow: 0 6px 20px rgba(18, 181, 166, .35); }
.btn-primary:hover { background: #0fa194; }
.btn-ghost { border-color: currentColor; color: var(--ink-800); background: transparent; }
.on-dark .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, .4); }
.btn-arrow::after { content: "→"; transition: transform .15s ease; }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- Header / navigation ---------- */
/* Fixed header: body is padded by its height so content starts below it */
body { padding-top: var(--header-h); }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--anima-black);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.logo:hover { text-decoration: none; }
.logo svg { width: 34px; height: 34px; }
.logo img { width: auto; height: 56px; }

/* Right side of the header: social icons above the main navigation */
.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.social-links { list-style: none; margin: 0 14px 0 0; padding: 0; display: flex; gap: 20px; }
.social-links a { display: block; padding: 4px; color: #8c8c8c; transition: color .15s ease; }
.social-links a:hover { color: var(--white); }
.social-links svg { width: 17px; height: 17px; fill: currentColor; }
.logo span small { font-weight: 400; color: var(--slate-400); margin-left: 4px; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--anima-orange);
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px;
  position: relative; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after { top: 7px; }
.nav-open .nav-toggle-bar { background: transparent; }
.nav-open .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: block; padding: 8px 14px; border-radius: 999px;
  color: var(--slate-200); font-size: .93rem; font-weight: 500;
}
.site-nav a:hover { color: var(--white); background: rgba(255, 255, 255, .07); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--anima-orange); background: rgba(255, 157, 52, .16); }
.site-nav .nav-cta a { background: var(--anima-orange); color: var(--anima-black); font-weight: 600; margin-left: 8px; }
.site-nav .nav-cta a:hover { background: #ffb15c; color: var(--anima-black); }
.site-nav .nav-cta a[aria-current="page"] { box-shadow: 0 0 0 2px var(--anima-black), 0 0 0 4px var(--anima-orange); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 112px); }
.section-tight { padding-block: clamp(48px, 6vw, 72px); }
.section-alt { background: var(--white); }
.section-dark { background: var(--ink-900); color: var(--slate-200); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-500); margin-bottom: 14px;
}
.section-dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--teal-400); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--slate-500); }
.section-dark .lead, .hero .lead, .page-hero .lead { color: var(--slate-200); }
.gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Home hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--white);
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(124, 92, 255, .28), transparent 60%),
    radial-gradient(800px 500px at 10% 90%, rgba(47, 211, 195, .22), transparent 60%),
    var(--ink-900);
  padding-block: clamp(80px, 12vw, 150px) clamp(72px, 10vw, 120px);
}
.hero h1 { color: var(--white); max-width: 14ch; }
.hero .lead { max-width: 560px; margin-bottom: 32px; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-visual { position: relative; aspect-ratio: 1; max-width: 460px; justify-self: end; width: 100%; }
.hero-visual svg { width: 100%; height: 100%; }
.cell-pulse { transform-origin: center; animation: pulse 6s ease-in-out infinite; }
.cell-pulse:nth-of-type(2n) { animation-delay: -2s; }
.cell-pulse:nth-of-type(3n) { animation-delay: -4s; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cell-pulse { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Interior page hero ---------- */
.page-hero {
  color: var(--white);
  background:
    radial-gradient(700px 360px at 90% 0%, rgba(124, 92, 255, .25), transparent 60%),
    radial-gradient(600px 360px at 0% 100%, rgba(47, 211, 195, .18), transparent 60%),
    var(--ink-900);
  padding-block: clamp(64px, 9vw, 110px) clamp(48px, 7vw, 80px);
}
.page-hero h1 { color: var(--white); max-width: 18ch; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.page-hero .lead { max-width: 640px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--slate-200); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.stat { background: var(--white); padding: 28px 24px; }
.stat-value { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600; color: var(--ink-900); line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: .92rem; color: var(--slate-500); }
.stats-overlap { margin-top: -56px; position: relative; z-index: 2; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--slate-500); }
.section-dark .card { background: var(--ink-800); border-color: var(--ink-600); }
.section-dark .card p { color: var(--slate-400); }
.card-icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(47, 211, 195, .16), rgba(124, 92, 255, .16)); color: var(--teal-500);
}
.card-icon svg { width: 24px; height: 24px; }
.card-link { font-weight: 600; font-size: .93rem; }

/* ---------- Split (text + visual) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split-visual {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--ink-900); box-shadow: var(--shadow);
}
.split-visual svg { width: 100%; height: 100%; }
.checklist { list-style: none; padding: 0; margin: 0 0 1.5em; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Steps (agent loop) ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; padding-top: 56px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-brand); color: var(--ink-900);
}
.step::after {
  content: ""; position: absolute; top: 20px; left: 52px; right: -12px; height: 1px;
  background: linear-gradient(90deg, var(--ink-600), transparent);
}
.step:last-child::after { display: none; }
.step p { color: var(--slate-400); }

/* ---------- Logos / partners ---------- */
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 56px; }
.logo-row span { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--slate-400); letter-spacing: -0.01em; }

/* ---------- Pipeline ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-btn {
  border: 1px solid var(--slate-200); background: var(--white); color: var(--ink-700);
  padding: 8px 16px; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
}
.filter-btn:hover { border-color: var(--teal-500); }
.filter-btn[aria-pressed="true"] { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }

.pipeline { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.pipeline-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 2.4fr; gap: 16px; align-items: center; padding: 20px 24px; border-top: 1px solid var(--slate-100); }
.pipeline-row:first-child { border-top: 0; }
.pipeline-head { background: var(--slate-100); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); }
.pipeline-row[hidden] { display: none; }
.program-name { font-weight: 600; color: var(--ink-900); }
.program-meta { font-size: .85rem; color: var(--slate-500); }
.tag { display: inline-block; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--slate-100); color: var(--ink-700); }
.tag-onc { background: #ffe8ec; color: #b4233f; }
.tag-neuro { background: #ece8ff; color: #5534d6; }
.tag-imm { background: #e0f7f4; color: #0b7d72; }
.tag-partner { background: #e5f3fd; color: #0a6aa8; }

.phase-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; position: relative; }
.phase-track span { height: 10px; border-radius: 5px; background: var(--slate-100); }
.phase-track span.on { background: var(--grad-brand); background-size: 400% 100%; }
.phase-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.phase-labels span { font-size: .78rem; }

/* ---------- Team ---------- */
.person { text-align: left; }
.avatar {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius); margin-bottom: 16px;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--white);
  background: linear-gradient(135deg, var(--ink-700), var(--ink-600));
  position: relative; overflow: hidden;
}
.avatar::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(47, 211, 195, .45), transparent 55%); }
.person h3 { margin-bottom: 2px; font-size: 1.08rem; }
.person p { color: var(--slate-500); font-size: .92rem; margin: 0; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--slate-200); }
.timeline li { position: relative; padding: 0 0 28px 28px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 4px var(--bg); }
.timeline strong { display: block; font-family: var(--font-display); color: var(--ink-900); }

/* ---------- News ---------- */
.news-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.news-card .news-thumb { aspect-ratio: 16 / 9; background: var(--ink-900); }
.news-card .news-thumb svg { width: 100%; height: 100%; }
.news-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.news-meta { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--slate-500); margin-bottom: 10px; }
.news-body h3 { font-size: 1.12rem; }
.news-body h3 a { color: var(--ink-900); }
.news-body .card-link { margin-top: auto; }
.news-card[hidden] { display: none; }

/* ---------- Contact ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-800); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink-900); background: var(--white);
  border: 1px solid var(--slate-200); border-radius: var(--radius-sm); padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(18, 181, 166, .18); }
.field-error { display: none; color: #c2283f; font-size: .82rem; margin-top: 4px; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #c2283f; }
.field.invalid .field-error { display: block; }
.form-status { padding: 14px 16px; border-radius: var(--radius-sm); background: #e0f7f4; color: #0b7d72; font-weight: 500; }
.form-status[hidden] { display: none; }
.contact-info dl { margin: 0; }
.contact-info dt { font-weight: 600; color: var(--ink-900); margin-top: 18px; }
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: 4px 0 0; color: var(--slate-500); }

/* ---------- CTA band ---------- */
.cta-band {
  border-radius: var(--radius-lg); padding: clamp(36px, 6vw, 64px);
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(124, 92, 255, .35), transparent 60%),
    radial-gradient(500px 260px at 0% 100%, rgba(47, 211, 195, .3), transparent 60%),
    var(--ink-900);
  color: var(--slate-200); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.cta-band h2 { color: var(--white); margin-bottom: .3em; }
.cta-band p { margin: 0; max-width: 560px; }

/* ---------- Footer (matches animabiotech.com) ---------- */
.site-footer {
  background: #141414; color: var(--white); font-family: var(--font-geist);
  padding-block: 48px 40px; text-align: center; font-size: 1rem; line-height: 1.6;
}
.footer-logo { display: inline-block; }
.footer-logo img { width: auto; height: 76px; opacity: .78; }
.footer-nav, .footer-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.footer-nav { gap: 6px 28px; margin-top: 32px; }
.footer-nav a, .footer-social a, .footer-contact a { color: #a9a9a9; transition: color .15s ease; }
.footer-nav a:hover, .footer-social a:hover, .footer-contact a:hover { color: var(--white); }
.footer-social { gap: 24px; margin-top: 26px; }
.footer-social a { display: block; padding: 4px; }
.footer-social svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.footer-contact { margin-top: 28px; font-style: normal; }
.footer-copy { margin: 80px 0 0; font-size: .95rem; }

/* Back-to-top arrow (shown by main.js at the bottom of the page) */
.to-top {
  position: fixed; right: 0; bottom: 0; z-index: 40;
  display: grid; place-items: center; width: 46px; height: 46px;
  background: #0a0a0a; color: var(--white);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--anima-orange); }
.to-top svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---------- Reveal on scroll (enhanced by main.js) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Mockup notice ---------- */
.mock-note { font-size: .82rem; color: var(--slate-500); font-style: italic; margin-top: 16px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .logo img { height: 44px; }
  .header-right { flex-direction: row; align-items: center; margin-left: auto; }
  .social-links { margin: 0 6px 0 0; gap: 10px; }
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--anima-black);
    padding: 12px var(--gutter) 24px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-open .site-nav { transform: none; opacity: 1; visibility: visible; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 1rem; }
  .site-nav .nav-cta a { margin: 8px 0 0; text-align: center; border-radius: 999px; }

  .hero-inner, .split { grid-template-columns: 1fr; }
  .hero-visual { justify-self: center; max-width: 340px; order: -1; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }

  .pipeline-head { display: none; }
  .pipeline-row { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .pipeline-row .phase-cell { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4, .steps, .form-row { grid-template-columns: 1fr; }
  .grid-4.team { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stats-overlap { margin-top: -40px; }
  .stat { padding: 20px 16px; }
  .card { padding: 22px; }
  .pipeline-row { padding: 18px 16px; }
  .logo-row { gap: 12px 32px; }
  .logo-row span { font-size: 1.2rem; }
}

/* ==========================================================================
   Anima home sections (.ah-*), styled to match animabiotech.com:
   black background, orange #FF9D34 accent, Geist. Currently used by the first
   three sections of index.html only.
   ========================================================================== */
.ah {
  background: var(--anima-black);
  color: var(--white);
  font-family: var(--font-geist);
}
.ah h1, .ah h2, .ah h3 { font-family: var(--font-geist); color: var(--white); letter-spacing: -0.01em; }
.ah-accent { color: var(--anima-orange); }
.ah-heading {
  max-width: 1120px; margin: 0 auto .5em; text-align: center;
  font-size: clamp(1.7rem, 3.2vw, 3.3rem); font-weight: 800; line-height: 1.15;
}

/* ---------- Section 1: hero ---------- */
.ah-hero {
  display: flex; align-items: center;
  min-height: clamp(460px, 38vw, 720px);
  padding-block: 64px;
  background:
    linear-gradient(90deg, #000 0%, #000 8%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 18%),
    url("../img/home/hero-biogpu.jpg") right top / 92% auto no-repeat,
    var(--anima-black);
}
.ah .ah-hero-title {
  font-size: clamp(2.3rem, 4.3vw, 4.6rem); font-weight: 700; line-height: 1.12;
  color: var(--anima-orange); max-width: 15ch; margin-bottom: .4em;
}
.ah-hero-title span { display: block; }
.ah-hero-sub {
  font-size: clamp(1.25rem, 2.5vw, 2.6rem); font-weight: 600; line-height: 1.25;
  max-width: 22ch; margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

/* ---------- Biology network intro + pharma partner logos ---------- */
.ah-partners { padding-block: clamp(40px, 5vw, 72px) 0; text-align: center; }
.ah .ah-partners-title {
  max-width: 22em; margin: 0 auto .45em;
  font-size: clamp(1.35rem, 2.2vw, 2.1rem); font-weight: 700; line-height: 1.2;
  color: var(--anima-orange);
}
.ah-partners-sub { max-width: 52em; margin: 0 auto; font-size: clamp(.95rem, 1.1vw, 1.1rem); }
.ah-logos {
  list-style: none; margin: clamp(40px, 5vw, 72px) auto 0; padding: 0;
  display: flex; justify-content: center; align-items: center;
  gap: 24px clamp(24px, 10vw, 150px); flex-wrap: wrap;
}
.ah-logos img { display: block; width: auto; }
.ah-logo-abbvie { height: clamp(18px, 2.2vw, 32px); }
.ah-logo-takeda { height: clamp(44px, 5.2vw, 76px); }  /* PNG has transparent padding */
.ah-logo-lilly { height: clamp(40px, 4.6vw, 66px); }

/* ---------- Section 2: design loop ----------
   The diagram is one image. Labels are HTML positioned in cqi units
   (percent of the stage width) so they stay locked to the artwork at any size. */
.ah-loop .ah-heading { max-width: 22.5em; }
.ah-loop {
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 120px) clamp(48px, 6vw, 96px);
  background:
    url("../img/home/loop-network.jpg") center bottom / max(100%, 900px) auto no-repeat,
    var(--anima-black);
}
.ah-loop-stage {
  position: relative; container-type: inline-size;
  max-width: 1700px; margin: max(-5vw, -80px) auto 0;
}
.ah-loop-diagram { width: 100%; height: auto; mix-blend-mode: screen; }
.ah-loop-stage p { margin: 0; position: absolute; text-align: center; line-height: 1.3; }
.ah-loop-label { font-size: max(11px, 1.45cqi); transform: translateX(-50%); }
.ah-loop-label strong { display: block; font-size: 1.45em; font-weight: 700; }
.ah-loop-ai { left: 15.6cqi; top: 21cqi; width: 18cqi; }
.ah-loop-biogpu { left: 82cqi; top: 15.6cqi; width: 17cqi; }
.ah-loop-response { left: 49.5cqi; top: 28.4cqi; transform: translate(-50%, -50%); font-size: max(11px, 1.45cqi); white-space: nowrap; }
.ah-loop-pill { left: 49.8cqi; top: 37.5cqi; transform: translate(-50%, -50%); font-size: max(11px, 1.6cqi); font-weight: 500; white-space: nowrap; }

/* ---------- Section 3: Giving AI Eyes ---------- */
.ah-eyes { padding-block: clamp(56px, 7vw, 100px) clamp(64px, 8vw, 120px); overflow: hidden; }
.ah-intro {
  max-width: 1080px; margin: 0 auto; text-align: center;
  font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 500; line-height: 1.5;
}
.ah-eyes-stage {
  position: relative;
  margin-top: clamp(24px, 4vw, 56px);
  padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 110px);
  background: url("../img/home/eyes-network.jpg") center 62% / max(100%, 1100px) auto no-repeat;
}
.ah-eyes-stage .container { position: relative; z-index: 1; max-width: 1540px; }
.ah-eyes-lab {
  position: absolute; top: 2%; width: 22%; max-width: 380px; height: auto;
  mix-blend-mode: screen; opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 72%);
}
.ah-eyes-lab-left { left: -2%; }
.ah-eyes-lab-right { right: -2%; }

.ah-model-box {
  width: fit-content; margin: 0 auto clamp(28px, 4vw, 52px);
  padding: .9em 1.6em; text-align: center;
  font-size: clamp(.9rem, 1.35vw, 1.3rem); font-weight: 700; line-height: 1.45;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(0, 0, 0, .88);
  border: 2px solid var(--anima-orange); border-radius: 14px;
  box-shadow: 0 0 22px var(--anima-orange-glow), inset 0 0 14px rgba(255, 157, 52, .25);
}
.ah-model-box span { display: block; color: var(--anima-orange); }

.ah-tiles {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1500px;
  display: grid; grid-template-columns: repeat(9, 1fr); gap: clamp(10px, 1.2vw, 18px);
}
.ah-tiles li { text-align: center; font-size: clamp(.78rem, 1.05vw, 1.1rem); line-height: 1.2; }
.ah-tiles img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 8px;
  border: 1.5px solid rgba(255, 157, 52, .75); border-radius: 10px;
  box-shadow: 0 0 12px rgba(255, 157, 52, .25);
}
.ah-tiles li span { text-shadow: 0 1px 8px #000; }
.ah-tiles .ah-tile-more {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  aspect-ratio: 1; align-self: start;
  border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 10px; background: rgba(0, 0, 0, .75);
  font-size: clamp(.85rem, 1.15vw, 1.2rem); font-weight: 600;
}
.ah-tile-more strong { display: block; font-size: 1.35em; }
.ah-dots, .ah-dots::before, .ah-dots::after {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--anima-orange);
}
.ah-dots { position: relative; margin-bottom: 6px; }
.ah-dots::before, .ah-dots::after { content: ""; position: absolute; top: 0; }
.ah-dots::before { left: -15px; }
.ah-dots::after { left: 15px; }

.ah-stats {
  position: relative; margin: 0 auto; max-width: 1220px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-block: clamp(24px, 3vw, 40px);
}
.ah-stats::before, .ah-stats::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--anima-orange) 30%, #ffd29e 50%, var(--anima-orange) 70%, transparent);
  box-shadow: 0 0 14px var(--anima-orange-glow);
}
.ah-stats::before { top: 0; }
.ah-stats::after { bottom: 0; }
.ah-stats div { text-align: center; padding-inline: 12px; }
.ah-stats div + div { border-left: 2px solid rgba(255, 255, 255, .7); }
.ah-stats dt { font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--anima-orange); }
.ah-stats dd { margin: 4px 0 0; font-size: clamp(.95rem, 1.3vw, 1.3rem); }

/* ---------- Sections 4 + 5: shared ----------
   The rules below are the stacked phone layout. From 901px up (see the min-width
   block further down) the diagram artwork is shown and every .ah-pin element is
   positioned over it in cqi units, measured from the artwork's pixel coordinates. */
.ah .ah-heading-orange { color: var(--anima-orange); }
.ah-cyan { --ah-line: #2ad4f2; --ah-hl: #4cc3ff; }
.ah-magenta { --ah-line: #cf3df0; --ah-hl: #b77bff; }
.ah-hl { color: var(--ah-hl); }
.ah .ah-col-title {
  margin: 0 0 16px; text-align: center;
  font-size: .95rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--anima-orange);
}
.ah-col-title span {
  display: block; margin-top: .45em;
  font-size: .85em; letter-spacing: 0; text-transform: none; color: var(--white);
}
.ah-m-only { display: block; }
.ah-model-stage, .ah-tokens-stage {
  position: relative; display: flex; flex-direction: column; gap: 44px;
  max-width: 640px; margin: 40px auto 0; padding-inline: var(--gutter);
}
.ah-model-diagram, .ah-tokens-diagram { display: none; width: 100%; height: auto; }
.ah-model-stage ul, .ah-tokens-stage ul { list-style: none; margin: 0; padding: 0; }
.ah-model-stage p, .ah-tokens-stage p { margin: 0; }
.ah-model-note, .ah-tokens-note {
  max-width: 1080px; margin: 44px auto 0; text-align: center;
  font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 600; line-height: 1.45;
}

/* ---------- Section 4: Visual Biology Foundation Model ---------- */
.ah-model { padding-block: clamp(56px, 7vw, 100px); overflow: hidden; }
.ah-model-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ah-model-tiles li {
  display: flex; flex-direction: column; padding: 4px;
  border: 1px solid rgba(255, 157, 52, .8); border-radius: 8px;
  text-align: center; font-size: .72rem; line-height: 1.2;
}
.ah-model-tiles img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; }
.ah-model-tiles span { padding: 6px 2px 2px; }
.ah-model-center { text-align: center; }
.ah-model-center img { width: min(220px, 55%); height: auto; margin: 0 auto 16px; mix-blend-mode: screen; }
.ah-model-name { font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.ah-model-name span { display: block; color: var(--anima-orange); }
.ah .ah-model-scale { margin-top: .6em; font-size: 1.1rem; font-weight: 500; }
.ah-model-scale strong { font-size: 1.6em; font-weight: 700; color: var(--anima-orange); vertical-align: -.08em; }
.ah-token-list { display: grid; gap: 8px; }
.ah-token-list li {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  border: 1px solid rgba(255, 157, 52, .8); border-radius: 10px;
  font-size: .95rem; line-height: 1.35;
}
.ah-token-list img { width: 40px; height: 40px; flex: none; mix-blend-mode: screen; }

/* ---------- Section 5: Cellular Network Biology ---------- */
.ah-tokens {
  padding-block: clamp(56px, 7vw, 100px);
  overflow: hidden;
  background:
    url("../img/home/tokens/tokens-network.jpg") center bottom / max(100%, 1100px) auto no-repeat,
    var(--anima-black);
}
.ah-tokens-front ul, .ah-tokens-back ul { display: grid; gap: 12px; }
.ah-token-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 26px 18px 18px 16px;
  background: rgba(0, 0, 0, .8); border: 2px solid var(--ah-line); border-radius: 14px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--ah-line) 45%, transparent);
  font-size: .95rem; line-height: 1.4;
}
.ah-token-card::before {
  content: "\201C"; font: 700 3.2em/0.8 Georgia, serif; color: var(--ah-line);
}
.ah-token-id { position: absolute; top: 8px; right: 14px; font-size: .7rem; color: rgba(255, 255, 255, .7); }
.ah-tokens-dir { display: none; }
.ah-tokens-card { display: grid; place-items: center; }
.ah-tokens-card > * { grid-area: 1 / 1; }
.ah-tokens-card img { width: min(240px, 62%); height: auto; mix-blend-mode: screen; }
.ah-tokens-card p {
  text-align: center; text-transform: uppercase;
  font-size: 1.15rem; font-weight: 800; line-height: 1.05;
}
.ah-tokens-card span { display: block; color: var(--anima-orange); }
.ah-evidence {
  display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, .8); border: 2px solid var(--ah-line); border-radius: 14px;
}
.ah-evidence-gene { color: var(--ah-hl); font-size: .9rem; font-weight: 500; line-height: 1.3; text-align: center; }
.ah-evidence-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: .75rem; }
.ah-evidence-imgs figure { margin: 0; text-align: center; }
.ah-evidence-imgs figcaption { margin-bottom: 4px; }
.ah-evidence-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--ah-line); }
.ah-ev-ddx6-grid {
  gap: 0; aspect-ratio: 266 / 197;
  background: url("../img/home/tokens/ddx6-grid.jpg") center / 100% 100% no-repeat;
}
.ah-ev-ddx6-grid span { padding: 4px; font-size: .68rem; text-shadow: 0 1px 4px #000; }
.ah-ev-ddx6-grid span:nth-child(-n+2) { align-self: start; }
.ah-ev-ddx6-grid span:nth-child(n+3) { align-self: end; }
.ah-tokens-count {
  display: flex; align-items: center; gap: 16px; padding: 12px 18px;
  background: rgba(0, 0, 0, .8); border: 2px solid var(--anima-orange); border-radius: 12px;
  font-size: .9rem; line-height: 1.35;
}
.ah-tokens-count img { width: 44px; height: auto; flex: none; mix-blend-mode: screen; }
.ah-tokens-count p + p { margin-top: .6em; }
.ah-tokens-count strong { display: block; color: var(--anima-orange); font-weight: 600; text-transform: uppercase; }
.ah-tokens-note { text-shadow: 0 2px 10px #000; }

@media (min-width: 901px) {
  .ah-m-only { display: none; }
  .ah-model-stage, .ah-tokens-stage {
    display: block; container-type: inline-size; padding-inline: 0;
  }
  .ah-model-stage { max-width: 1600px; margin-top: max(-9vw, -140px); }
  .ah-tokens-stage { max-width: 1500px; margin-top: max(-8vw, -120px); }
  .ah-model-diagram, .ah-tokens-diagram { display: block; position: relative; z-index: 1; mix-blend-mode: screen; }
  .ah-pin { position: absolute; z-index: 2; margin: 0; }
  /* Black fill under section 5's text boxes so the network background doesn't show through them */
  .ah-tokens-stage::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
      linear-gradient(#000, #000) 7.43cqi 17.2cqi / 24.75cqi 22.53cqi,
      linear-gradient(#000, #000) 63.24cqi 17.2cqi / 25.56cqi 25.37cqi,
      linear-gradient(#000, #000) 35.89cqi 41.46cqi / 22.9cqi 8.54cqi;
    background-repeat: no-repeat;
  }
  .ah .ah-col-title { transform: translate(-50%, -100%); white-space: nowrap; font-size: max(11px, .95cqi); }

  /* Section 4, artwork 1723px wide: 1cqi = 17.23px */
  .ah-model-images .ah-col-title { left: 17.76cqi; top: 18.6cqi; }
  .ah-model-tiles { left: 2.61cqi; top: 19.5cqi; width: 30.3cqi; height: 26.9cqi; gap: .58cqi; grid-template-rows: 1fr 1fr; }
  .ah-model-tiles li { border: 0; padding: .4cqi .4cqi .2cqi; font-size: max(9px, .78cqi); min-height: 0; }
  .ah-model-tiles img { flex: 1; min-height: 0; aspect-ratio: auto; border-radius: .45cqi; }
  .ah-model-tiles span { display: flex; align-items: center; justify-content: center; min-height: 2.6em; padding: .3cqi 0 0; }
  .ah-model-center { left: 51.8cqi; top: 42.2cqi; width: 26cqi; transform: translateX(-50%); }
  .ah-model-name { font-size: max(11px, 1.15cqi); }
  .ah .ah-model-scale { font-size: max(12px, 1.25cqi); }
  .ah-model-tokens .ah-col-title { left: 84.04cqi; top: 16.7cqi; }
  .ah-token-list { left: 71.97cqi; top: 17.59cqi; width: 24.14cqi; height: 32.9cqi; gap: .52cqi; grid-template-rows: repeat(6, 1fr); }
  .ah-token-list li { border: 0; padding: 0 1cqi 0 6.4cqi; font-size: max(10px, .92cqi); }
  .ah-model-note { margin-top: max(-2vw, -30px); }

  /* Section 5, artwork 1616px wide: 1cqi = 16.16px */
  .ah-tokens-front .ah-col-title { left: 19.8cqi; top: 16.3cqi; }
  .ah-tokens-front ul { left: 7.43cqi; top: 17.2cqi; width: 24.75cqi; height: 22.53cqi; grid-template-rows: 177fr 174fr; gap: .8cqi; }
  .ah-token-card {
    align-content: center; gap: .6cqi; padding: 1.3cqi 1.3cqi .9cqi 1.5cqi;
    background: none; border: 0; box-shadow: none; font-size: max(10px, .88cqi);
  }
  .ah-token-card::before { font-size: 3.4em; }
  .ah-token-id { top: .7cqi; right: 1cqi; font-size: max(8px, .6cqi); }
  .ah-tokens-dir {
    display: block; transform: translate(-50%, -100%); top: 26.6cqi;
    font-size: max(9px, .75cqi); letter-spacing: .06em; text-transform: uppercase;
  }
  .ah-tokens-dir-front { left: 35.46cqi; }
  .ah-tokens-dir-back { left: 59.3cqi; }
  .ah-tokens-card { left: 38.37cqi; top: 13.49cqi; width: 17.64cqi; height: 26.11cqi; }
  .ah-tokens-card p { font-size: max(16px, 2.15cqi); text-shadow: 0 2px 12px #000; }
  .ah-tokens-back .ah-col-title { left: 75.99cqi; top: 16.3cqi; }
  .ah-evidence { display: block; padding: 0; background: none; border: 0; }
  .ah-evidence-gene { width: 7cqi; transform: translate(-50%, -50%); font-size: max(10px, .9cqi); }
  .ah-ev-nup62-gene { left: 67.45cqi; top: 22.59cqi; }
  .ah-ev-ddx6-gene { left: 67.33cqi; top: 35.89cqi; }
  .ah-evidence-imgs { font-size: max(8px, .62cqi); }
  .ah-ev-nup62-imgs { left: 71.16cqi; top: 19.18cqi; width: 16.4cqi; height: 7.92cqi; gap: .74cqi; }
  .ah-ev-nup62-imgs figcaption { transform: translateY(-100%); margin: 0; padding-bottom: .15cqi; font-size: max(9px, .75cqi); }
  .ah-ev-ddx6-grid { left: 71.16cqi; top: 29.7cqi; width: 16.46cqi; height: 12.19cqi; aspect-ratio: auto; background: none; }
  .ah-ev-ddx6-grid span { padding: .3cqi; font-size: inherit; }
  .ah-tokens-count {
    display: flex; flex-direction: column; justify-content: center;
    left: 42.08cqi; top: 41.46cqi; width: 16.3cqi; height: 8.54cqi; padding: 0;
    background: none; border: 0; font-size: max(9px, .78cqi);
  }
  .ah-tokens-count strong { font-size: 1.15em; }
  .ah-tokens-note { margin-top: max(-4vw, -60px); }
}

@media (max-width: 1024px) {
  .ah-tiles { grid-template-columns: repeat(5, 1fr); }
  .ah-eyes-lab { display: none; }
}

@media (max-width: 700px) {
  .ah-hero {
    align-items: flex-end; min-height: 560px; padding-block: 48px 40px;
    background:
      linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .75) 45%, rgba(0, 0, 0, .1) 75%),
      url("../img/home/hero-biogpu.jpg") 70% top / cover no-repeat,
      var(--anima-black);
  }

  /* Loop: crop off the image's empty pill; move side labels and tagline below the diagram */
  /* Zoom to the active part of the artwork (x 13%–87%) and cut off the bottom pill */
  .ah-loop-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
  .ah-loop-diagram {
    grid-column: 1 / -1; width: 136%; max-width: none; margin-left: -13%;
    aspect-ratio: 1920 / 660; object-fit: cover; object-position: top;
  }
  .ah-loop-response { left: 54.3cqi; top: 38.6cqi; }
  .ah-loop-stage .ah-loop-label, .ah-loop-stage .ah-loop-pill { position: static; transform: none; width: auto; }
  .ah-loop-label { font-size: .9rem; }
  .ah-loop-ai { padding-left: var(--gutter); }
  .ah-loop-biogpu { padding-right: var(--gutter); }
  .ah-loop-pill {
    grid-column: 1 / -1; justify-self: center; white-space: normal; margin-inline: var(--gutter);
    font-size: .95rem; padding: .7em 1.4em;
    border: 2px solid var(--anima-orange); border-radius: 999px;
    box-shadow: 0 0 18px var(--anima-orange-glow);
  }

  .ah-tiles { grid-template-columns: repeat(3, 1fr); }
  .ah-eyes-stage { background-size: 1100px auto; background-position: center 40%; }
  .ah-stats { grid-template-columns: 1fr; }
  .ah-stats div { padding-block: 14px; }
  .ah-stats div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .35); }
}

/* ---------- Sections 6-9 + Get started ----------
   Same approach as sections 4 + 5: the base rules are the stacked phone layout,
   and the min-width block below pins .ah-pin text over the artwork in cqi units. */
.ah-agents-stage, .ah-chem-stage {
  position: relative; display: flex; flex-direction: column; gap: 32px;
  max-width: 640px; margin: 40px auto 0; padding-inline: var(--gutter);
}
.ah-agents-diagram, .ah-chem-diagram, .ah-iterate-diagram { display: none; width: 100%; height: auto; }
.ah-agents-stage ol, .ah-iterate-stage ol, .ah-chem-stage ol { list-style: none; margin: 0; padding: 0; }
.ah-agents-stage p, .ah-iterate-stage p, .ah-chem-stage p { margin: 0; }
.ah-pill-tag {
  justify-self: center; align-self: center; width: fit-content; padding: .55em 1.5em;
  border: 2px solid var(--anima-orange); border-radius: 999px; box-shadow: 0 0 16px var(--anima-orange-glow);
  color: var(--anima-orange); font-size: .95rem; font-weight: 500; text-align: center;
}

/* Section 6: AI Agents Experiment Inside Cellular Networks */
.ah-agents { padding-block: clamp(56px, 7vw, 100px) clamp(24px, 3vw, 48px); overflow: hidden; }
.ah-agents-flow { display: grid; gap: 10px; }
.ah-agents-box {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: #0b1418; border: 1px solid rgba(80, 200, 235, .55); border-radius: 10px;
  font-size: .9rem; line-height: 1.35;
}
.ah-agents-box img { width: 52px; height: auto; flex: none; }
.ah-agents-box strong, .ah-iterate-steps strong, .ah-chem-steps strong { display: block; font-weight: 700; }
.ah-agents-box strong { font-size: 1.05rem; }
.ah-agents-steps { display: grid; gap: 22px; }
.ah-agents-steps img { width: 100%; height: auto; border-radius: 8px; margin-top: 10px; }
.ah-step-title { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.ah-step-num {
  display: grid; place-items: center; flex: none; width: 40px; aspect-ratio: 1;
  border: 2px solid var(--anima-orange); border-radius: 50%; background: #3a210b;
  font-weight: 700;
}
.ah-agents-stage .ah-step-desc { margin-top: 8px; font-size: .9rem; line-height: 1.4; }
.ah-agents-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 14px 18px;
  border: 1.5px solid var(--anima-orange); border-radius: 12px; box-shadow: 0 0 16px var(--anima-orange-glow);
  font-size: .95rem; font-weight: 500;
}
.ah-agents-bar img { width: 40px; height: auto; }

/* Section 7: More Biology / More Intelligence */
.ah-iterate { padding-block: clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px); }
.ah-iterate-grid { display: grid; gap: 28px; }
.ah .ah-split-heading { margin: 0 0 18px; font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight: 700; line-height: 1.15; }
.ah-split-heading span { display: block; color: var(--anima-orange); }
.ah-split-heading::after {
  content: ""; display: block; width: 154px; height: 28px; margin: -2px 0 0 -12px;
  background: url("../img/home/iteration/heading-line.png") left center / contain no-repeat;
}
.ah-iterate-text p { margin: 0; max-width: 36ch; font-size: .98rem; line-height: 1.6; }
.ah-iterate-img { width: 100%; height: auto; }
.ah-iterate-stage { position: relative; display: grid; gap: 18px; }
.ah-iterate-steps { display: grid; gap: 18px; }
.ah-iterate-steps li { text-align: center; font-size: .9rem; line-height: 1.35; }
.ah-iterate-steps img { width: 100%; height: auto; margin-bottom: 8px; }

/* Section 8: Resolve the Biology. Guide the Chemistry. */
.ah-chem { padding-block: clamp(56px, 7vw, 100px) 0; overflow: hidden; }
.ah-chem-steps { display: grid; gap: 28px; }
.ah-chem-steps li { display: grid; gap: 12px; text-align: center; }
.ah-chem-steps p { color: var(--anima-orange); font-size: .9rem; line-height: 1.4; }
.ah-chem-steps strong { color: var(--white); font-weight: 500; font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.ah-chem-steps img { width: min(100%, 340px); height: auto; margin-inline: auto; }
.ah-chem-stage .ah-chem-pill { margin-bottom: 48px; }

/* Section 9: Compounding cellular network intelligence */
.ah-runtime {
  padding-block: clamp(56px, 7vw, 100px);
  background:
    linear-gradient(#000 0%, rgba(0, 0, 0, .35) 40%, rgba(0, 0, 0, .35) 70%, #000 100%),
    url("../img/home/tokens/tokens-network.jpg") center 60% / max(100%, 1100px) auto no-repeat,
    var(--anima-black);
}
.ah-runtime-figure { max-width: 980px; margin: clamp(24px, 3vw, 40px) auto 0; text-align: center; }
.ah-runtime-figure img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
.ah-runtime-figure figcaption { margin-top: 18px; font-size: clamp(.95rem, 1.1vw, 1.1rem); font-weight: 600; text-shadow: 0 2px 10px #000; }

/* Get started */
.ah-start { padding-block: clamp(48px, 6vw, 80px); text-align: center; }
.ah-start .ah-heading { margin-bottom: .45em; }
.ah-start p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.25rem); }
.ah-start a { color: var(--anima-orange); }
.ah-start a:hover { color: #ffb15c; }

@media (min-width: 901px) {
  .ah-agents-stage, .ah-chem-stage, .ah-iterate-stage {
    display: block; container-type: inline-size; padding-inline: 0;
  }
  .ah-agents-diagram, .ah-chem-diagram, .ah-iterate-diagram { display: block; position: relative; z-index: 1; mix-blend-mode: screen; }

  /* Section 6, artwork 1380px wide: 1cqi = 13.8px */
  .ah-agents-stage { max-width: 1440px; margin-top: max(-7vw, -110px); }
  /* The artwork's background is near-black navy: crush it to black and fade the edges */
  .ah-agents-diagram {
    filter: contrast(1.15);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 8%, #000 97%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 8%, #000 97%, transparent);
    mask-composite: intersect;
  }
  .ah-agents-box { display: block; padding: 0; background: none; border: 0; transform: translateY(-50%); font-size: max(10px, .95cqi); }
  .ah-agents-box strong { font-size: 1.2em; margin-bottom: .15em; }
  .ah-agents-box-1 { left: 42.39cqi; top: 18.12cqi; width: 21.4cqi; }
  .ah-agents-box-2 { left: 42.39cqi; top: 29.57cqi; width: 21.4cqi; }
  .ah-agents-box-3 { left: 45.29cqi; top: 40.94cqi; width: 18.5cqi; }
  .ah-agents-box-4 { left: 42.39cqi; top: 51.81cqi; width: 21.4cqi; }
  .ah-step-title { gap: 1.1cqi; transform: translateY(-50%); font-size: max(11px, 1.1cqi); }
  .ah-step-num { width: 3.33cqi; border: 0; background: none; font-size: max(11px, 1.2cqi); }
  .ah-step-1 { left: 3.55cqi; top: 15.22cqi; }
  .ah-step-2 { left: 3.55cqi; top: 29.57cqi; }
  .ah-step-3 { left: 3.55cqi; top: 45.51cqi; }
  .ah-step-4 { left: 73.19cqi; top: 20.94cqi; }
  .ah-agents-stage .ah-step-desc { left: 77.5cqi; top: 22.4cqi; width: 20.6cqi; margin: 0; font-size: max(9px, .82cqi); }
  .ah-agents-bar {
    left: 18.1cqi; top: 57.25cqi; width: 78.4cqi; height: 6.16cqi;
    justify-content: space-around; flex-wrap: nowrap; padding: 0;
    border: 0; box-shadow: none; font-size: max(11px, 1.15cqi);
  }

  /* Section 7: text column + artwork column; bottom artwork 1622px wide: 1cqi = 16.22px */
  .ah-iterate-grid { grid-template-columns: minmax(240px, 27%) 1fr; align-items: center; gap: 40px 48px; max-width: 1360px; }
  .ah-iterate-stage { width: 100%; }
  .ah-iterate-steps li { width: 30cqi; transform: translateX(-50%); font-size: max(11px, 1.3cqi); }
  .ah-iterate-step-1 { left: 16.77cqi; top: 18.9cqi; }
  .ah-iterate-step-2 { left: 50.37cqi; top: 18.9cqi; }
  .ah-iterate-step-3 { left: 84.28cqi; top: 18.9cqi; }
  .ah-pill-tag.ah-pin { padding: 0; border: 0; box-shadow: none; white-space: nowrap; transform: translate(-50%, -50%); }
  .ah-iterate-pill { left: 49.75cqi; top: 27.74cqi; font-size: max(11px, 1.35cqi); }

  /* Section 8, artwork 1908px wide: 1cqi = 19.08px */
  .ah-chem-stage { max-width: 1700px; margin-top: max(-5vw, -80px); }
  .ah-chem-steps li { display: block; width: 26cqi; transform: translate(-50%, -100%); }
  .ah-chem-steps p { font-size: max(11px, .9cqi); }
  .ah-chem-steps strong { font-size: max(13px, 1.2cqi); }
  .ah-chem-step-1 { left: 20.44cqi; top: 14.4cqi; }
  .ah-chem-step-2 { left: 49.8cqi; top: 14.4cqi; }
  .ah-chem-step-3 { left: 79.14cqi; top: 14.4cqi; }
  .ah-chem-stage .ah-chem-pill { left: 49.95cqi; top: 34.9cqi; margin: 0; font-size: max(11px, .95cqi); }
}