/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --bg: #FFFFFF;
  --surface: #F0FDFA;
  --secondary: #16A34A;
  --text: #000000;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --nav-height: 64px;
  --nav-transition: 250ms ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  padding-top: var(--nav-height);
  overflow-x: hidden;
}

/* ── Navbar ─────────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--nav-transition),
    border-color var(--nav-transition),
    backdrop-filter var(--nav-transition);
}

#navbar.scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: #C6F2E0;
  /* surface-derived border — no new color */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

/* ── Brand ──────────────────────────────────────────────────── */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
  text-decoration: none;
}

.brand-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--secondary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* annotation track vertical rule */
.brand-divider {
  display: block;
  width: 1px;
  height: 24px;
  background: var(--secondary);
  opacity: 0.35;
  flex-shrink: 0;
}

.brand-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text);
  opacity: 0.45;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ── Nav Links ──────────────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  padding: var(--space-xs) 0;
  transition: color 150ms ease;
  white-space: nowrap;
}

/* diamond — always reserves its space, only opacity changes to prevent layout shift */
.nav-link::before {
  content: '◆';
  font-size: 0.6rem;
  color: var(--secondary);
  opacity: 0;
  flex-shrink: 0;
  /* fixed width so siblings never shift */
  display: inline-block;
  width: 0.75em;
  transition: opacity 150ms ease;
}

.nav-link:hover {
  color: var(--secondary);
}

.nav-link:hover::before,
.nav-link.active::before {
  opacity: 1;
}

.nav-link.active {
  color: var(--secondary);
}

/* ── CTA Button ─────────────────────────────────────────────── */
.nav-cta {
  flex-shrink: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--secondary);
  border: 1.5px solid var(--secondary);
  border-radius: 999px;
  padding: 7px 20px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}

.nav-cta:hover {
  background: var(--secondary);
  color: var(--bg);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

/* ── Mobile Toggle ──────────────────────────────────────────── */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Open Sans', monospace;
  font-size: 1.1rem;
  color: var(--text);
  padding: var(--space-sm);
}

.toggle-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-lines span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle[aria-expanded="true"] .toggle-lines span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .toggle-lines span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .toggle-lines span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-inner {
    padding: 0 var(--space-md);
    gap: var(--space-sm);
  }

  .brand-sub {
    display: none;
  }

  .brand-divider {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-cta {
    display: none;
  }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--surface);
    padding: var(--space-md) var(--space-xl);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 99;
  }

  .nav-links.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .nav-link {
    display: inline-flex;
    padding: var(--space-md) 0;
    font-size: 1rem;
  }

  .nav-link::before {
    width: 0.75em;
  }
}

/* ── Section Placeholders ───────────────────────────────────── */
.section-placeholder {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl);
}

.section-surface {
  background: var(--surface);
}

.section-label {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--text);
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + var(--space-2xl)) var(--space-xl) var(--space-2xl);
  background: var(--bg);
  overflow: hidden;
}

/* ── Hero video background ──────────────────────────────────── */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* ── Hero inner ─────────────────────────────────────────────── */
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* ── Hero text frost panel ──────────────────────────────────── */
.hero-text {
  position: relative;
  padding: var(--space-2xl);
}

.hero-text::before {
  content: '';
  position: absolute;
  inset: -10%;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background: rgba(255, 255, 255, 0.55);
  mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, black 30%, transparent 75%);
  z-index: 0;
  pointer-events: none;
}

.hero-text>* {
  position: relative;
  z-index: 1;
}

/* ── Hero text ──────────────────────────────────────────────── */
.hero-tagline {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-lg);
}

.hero-sub {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text);
  opacity: 0.6;
  max-width: 54ch;
  margin-bottom: var(--space-xl);
}

.hero-ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cta-primary {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bg);
  background: var(--secondary);
  border-radius: 999px;
  padding: 12px 28px;
  text-decoration: none;
  transition: box-shadow 200ms ease, transform 150ms ease;
  display: inline-block;
}

.cta-primary:hover {
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.32);
  transform: translateY(-1px);
}

.cta-ghost {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--secondary);
  border: 1.5px solid var(--secondary);
  border-radius: 999px;
  padding: 11px 28px;
  text-decoration: none;
  display: inline-block;
  transition: background 200ms ease, color 200ms ease;
}

.cta-ghost:hover {
  background: var(--secondary);
  color: var(--bg);
}

/* ── Hero text frost wrapper ─────────────────────────────────── */
.hero-text-frost {
  position: relative;
}

/* ── Hero stagger animation ─────────────────────────────────── */
.hero-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 550ms ease, transform 550ms ease;
}

.hero-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero visual panel ──────────────────────────────────────── */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  justify-content: flex-start;
  padding-top: var(--space-xl);
}

/* ── Genome assembly ────────────────────────────────────────── */
.genome-assembly {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* read lines injected by JS */
.read-line {
  position: absolute;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--secondary);
  opacity: 0.55;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  transition:
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 700ms ease;
}

.genome-assembly.assembled .read-line {
  transform: translate(0, 0) rotate(0deg);
  opacity: 0;
}

.genome-circle {
  position: absolute;
  width: 400px;
  height: 400px;

  object-fit: contain;
  opacity: 0;
  transition: opacity 700ms ease;
  border-radius: 50%;
}

.genome-circle.visible {
  opacity: 0.88;
}

/* ── Result card ────────────────────────────────────────────── */
.result-card {
  width: 100%;
  max-width: 340px;
  background: rgba(240, 253, 250, 0.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(22, 163, 74, 0.18);
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  font-family: 'Open Sans', sans-serif;
}

.result-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(22, 163, 74, 0.14);
}

.result-isolate {
  font-family: monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--secondary);
  letter-spacing: 0.06em;
}

.result-dot {
  font-size: 0.7rem;
  color: var(--secondary);
  opacity: 0.65;
  letter-spacing: 0.03em;
}

.result-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-md);
  padding: 5px 0;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.result-row.visible {
  opacity: 1;
  transform: translateY(0);
}

.result-key {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text);
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 3px;
  white-space: nowrap;
}

.result-val {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
}

.result-mono {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--secondary);
  word-break: break-all;
}

.result-footer {
  font-size: 0.7rem;
  color: var(--text);
  opacity: 0;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(22, 163, 74, 0.1);
  letter-spacing: 0.03em;
  transition: opacity 280ms ease;
}

.result-footer.visible {
  opacity: 0.35;
}

/* ── Hero responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text {
    padding: var(--space-xl) var(--space-lg);
  }

  /* Contain the frost panel so it doesn't bleed horizontally */
  .hero-text::before {
    inset: 0;
    border-radius: 16px;
  }

  .hero-sub {
    max-width: 60ch;
    margin-inline: auto;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-visual {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
  }

  .genome-assembly {
    width: 280px;
    height: 280px;
  }

  .genome-circle {
    width: 260px;
    height: 260px;
  }

  .result-card {
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .hero-visual {
    flex-direction: column;
    align-items: center;
  }

  .genome-assembly {
    width: 200px;
    height: 200px;
  }

  .genome-circle {
    width: 180px;
    height: 180px;
  }

  .result-card {
    max-width: 100%;
  }
}

/* ── Services ───────────────────────────────────────────────── */
.services {
  background: var(--surface);
  padding: var(--space-2xl) var(--space-xl);
}

.services-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.services-header {
  margin-bottom: var(--space-xl);
}

.services-eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ── Divider line — draws left→right on scroll ──────────────── */
.services-divider {
  width: 100%;
  height: 1px;
  background: var(--secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  margin-bottom: var(--space-2xl);
}

.services-divider.drawn {
  transform: scaleX(1);
}

/* ── Three-column grid ──────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.service-item {
  position: relative;
  padding-top: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.service-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ghost number — sits above title, behind content visually */
.service-num {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 700;
  color: var(--secondary);
  opacity: 0.1;
  line-height: 1;
  margin-bottom: -1.6rem;
  letter-spacing: -0.03em;
  user-select: none;
  transition: opacity 500ms ease;
}

.service-item.visible .service-num {
  opacity: 0.14;
}

.service-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: var(--space-md);
}

.service-desc {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text);
  opacity: 0.62;
  max-width: 38ch;
}

/* ── Services responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-desc {
    max-width: 60ch;
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ── Pipeline ───────────────────────────────────────────────── */
.pipeline {
  background: var(--bg);
  padding: var(--space-2xl) var(--space-xl);
}

.pipeline-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pipeline-header {
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.pipeline-eyebrow {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}

.pipeline-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ── Pipeline steps (horizontal) ───────────────────────────── */
.pipeline-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pipeline-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 450ms ease, transform 450ms ease;
}

.pipeline-step.visible {
  opacity: 1;
  transform: translateY(0);
}

.step-badge {
  width: 52px;
  height: 52px;
  background: var(--secondary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-lg);
  flex-shrink: 0;
}

/* DNA strand connector — chain of small icons between badges */
.dna-connector {
  width: 110px;
  height: 22px;
  flex-shrink: 0;
  background-image: url('assets/dna-connector.svg');
  background-repeat: repeat-x;
  background-size: 22px 22px;
  background-position: left center;
  opacity: 0.45;
  align-self: flex-start;
  margin-top: 15px;
}

.track-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-lg);
}

/* ── Tool badges ────────────────────────────────────────────── */
.track-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.tool-badge {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--secondary);
  background: var(--bg);
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}

.tool-badge:hover {
  background: var(--secondary);
  color: var(--bg);
}

/* ── Pipeline responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .pipeline-steps {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
  }

  .dna-connector {
    width: 22px;
    height: 80px;
    margin-top: 0;
    background-repeat: repeat-y;
    background-size: 22px 22px;
    background-position: center top;
    align-self: center;
  }
}

/* ── Partnership ─────────────────────────────────────────────── */
.partnership {
  background: var(--surface);
  padding: var(--space-2xl) var(--space-xl);
}

.partnership-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────── */
.partnership-header {
  max-width: 820px;
  margin: 0 auto var(--space-2xl);
}

.partnership-eyebrow {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}

/* Two-line title — second line bolder to carry the weight */
.partnership-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.ptitle-you {
  display: block;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  opacity: 0.45;
  font-weight: 600;
}

.ptitle-us {
  display: block;
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.partnership-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text);
  opacity: 0.5;
  font-style: italic;
  max-width: 60ch;
}

/* ── Two-card layout ────────────────────────────────────────── */
.pm-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.pm-card {
  border-radius: 16px;
  padding: var(--space-2xl);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 450ms ease, transform 450ms ease;
}

.pm-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.pm-card--you {
  background: #fff;
  border: 1px solid rgba(22, 163, 74, 0.18);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}

.pm-card--us {
  background: #2d6a3f;
}

.pm-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.pm-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.pm-card--you .pm-card-icon {
  color: #2d6a3f;
}

.pm-card--us .pm-card-icon {
  color: #fff;
}

.pm-role {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.pm-card--you .pm-role {
  color: var(--text);
}

.pm-card--us .pm-role {
  color: #fff;
}

.pm-mandate {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8125rem;
  margin: 0;
}

.pm-card--you .pm-mandate {
  color: var(--text);
  opacity: 0.5;
}

.pm-card--us .pm-mandate {
  color: rgba(255, 255, 255, 0.7);
}

.pm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pm-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pm-list li::before {
  content: '•';
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.pm-card--you .pm-list li {
  color: rgba(0, 0, 0, 0.75);
}

.pm-card--you .pm-list li::before {
  color: #2d6a3f;
}

.pm-card--us .pm-list li {
  color: rgba(255, 255, 255, 0.9);
}

.pm-card--us .pm-list li::before {
  color: rgba(255, 255, 255, 0.7);
}

/* ── Closing callout ────────────────────────────────────────── */
.pm-closing {
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.pm-closing.visible {
  opacity: 1;
  transform: translateY(0);
}

.pm-closing-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
  text-align: center;
  background: var(--bg);
  border: 1px solid rgba(22, 163, 74, 0.18);
  border-radius: 10px;
  padding: var(--space-md) var(--space-xl);
  display: inline-block;
  white-space: nowrap;
}

.pm-closing-text strong {
  font-weight: 600;
}

/* ── Partnership responsive ─────────────────────────────────── */
@media (max-width: 768px) {
  .pm-cards {
    grid-template-columns: 1fr;
  }

  .pm-closing-text {
    white-space: normal;
    padding: var(--space-md) var(--space-lg);
  }

  .ptitle-you {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }

  .ptitle-us {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }
}

/* ── Case Study ─────────────────────────────────────────────── */
.case-study {
  background: var(--surface);
  padding: var(--space-2xl) var(--space-xl);
}

.case-study-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.case-study-header {
  margin-bottom: var(--space-2xl);
}

.case-study-eyebrow {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}

.case-study-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ── Stats bar ──────────────────────────────────────────────── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg);
  border: 1px solid rgba(22, 163, 74, 0.15);
  border-radius: 10px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.stat-num {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--secondary);
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8125rem;
  color: var(--text);
  opacity: 0.55;
  line-height: 1.4;
}

/* ── Isolate card grid ──────────────────────────────────────── */
.isolates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.isolate-card {
  background: var(--bg);
  border: 1px solid rgba(22, 163, 74, 0.15);
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 450ms ease, transform 450ms ease,
    box-shadow 200ms ease;
}

.isolate-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.isolate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(22, 163, 74, 0.1);
}

.isolate-card.visible:hover {
  transform: translateY(-4px);
}

/* Genome image fills top of card */
.card-image {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-md);
  transition: transform 400ms ease;
}

.isolate-card:hover .card-image img {
  transform: scale(1.03);
}

/* Card data rows */
.card-data {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.card-isolate {
  font-family: monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--secondary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
}

.card-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-sm);
  align-items: baseline;
}

.card-key {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text);
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.card-val {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.5;
}

.card-mono {
  font-family: monospace;
  font-size: 0.775rem;
  color: var(--secondary);
}

/* ── Key finding callout ────────────────────────────────────── */
.key-finding {
  background: var(--bg);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 10px;
  padding: var(--space-xl) var(--space-2xl);
}

.finding-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  max-width: 80ch;
}

.finding-text strong {
  color: var(--text);
  font-weight: 600;
}

.finding-text code {
  font-family: monospace;
  font-size: 0.9em;
  color: var(--secondary);
}

/* ── Case study responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .key-finding {
    padding: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--space-md);
  }
}

/* ── Case study cards ───────────────────────────────────────── */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.case-card {
  background: var(--bg);
  border: 1px solid rgba(22, 163, 74, 0.15);
  border-radius: 12px;
  padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(22, 163, 74, 0.1);
}

/* Teaser variant: whole card is a link to the detail page */
.case-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.case-card--link .case-card-head {
  margin-bottom: var(--space-lg);
}

.case-card-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(22, 163, 74, 0.12);
}

.case-meta-item {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  color: var(--text);
  opacity: 0.7;
}

.case-meta-item strong {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--secondary);
  margin-right: 4px;
}

.case-card-link {
  display: block;
  text-align: center;
  margin-top: var(--space-xl);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary);
  transition: gap 150ms ease, opacity 150ms ease;
}

.case-card--link:hover .case-card-link {
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.case-card-head {
  text-align: center;
  max-width: 70ch;
  margin: 0 auto var(--space-2xl);
}

.case-card-tag {
  display: inline-block;
  font-family: monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: var(--space-md);
}

.case-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

.case-card-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.62;
}

.case-card-foot {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.6;
  max-width: 62ch;
  margin: var(--space-2xl) auto 0;
}

@media (max-width: 600px) {
  .case-card {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
  }
}

/* ── Contact channels (email + WhatsApp) ────────────────────── */
.contact-channels {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.contact-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: monospace;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--secondary);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 8px;
  padding: var(--space-md) var(--space-xl);
  transition: opacity 150ms ease, border-color 150ms ease;
}

.contact-whatsapp:hover {
  opacity: 0.8;
  border-color: var(--secondary);
}

.whatsapp-ic {
  flex-shrink: 0;
}

/* ── Tools & Stack ──────────────────────────────────────────── */
.tools {
  background: var(--bg);
  padding: var(--space-2xl) var(--space-xl);
}

.tools-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.tools-header {
  margin-bottom: var(--space-xl);
}

.tools-eyebrow {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}

.tools-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.tools-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Tool pills — outlined */
.tool-pill {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--secondary);
  background: var(--bg);
  border: 1px solid rgba(22, 163, 74, 0.4);
  border-radius: 999px;
  padding: 6px 16px;
  white-space: nowrap;
  cursor: default;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.tool-pill:hover {
  background: var(--secondary);
  color: var(--bg);
  border-color: var(--secondary);
}

/* Infra pills — solid */
.tool-pill--infra {
  background: var(--secondary);
  color: var(--bg);
  border-color: var(--secondary);
}

.tool-pill--infra:hover {
  background: var(--bg);
  color: var(--secondary);
}

/* ── Contact ─────────────────────────────────────────────────── */
.contact {
  background: var(--surface);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
}

.contact-inner {
  max-width: 700px;
  margin: 0 auto;
}

.contact-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.contact-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.55;
  margin-bottom: var(--space-2xl);
}

/* Email contact pill */
.contact-terminal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 8px;
  padding: var(--space-md) var(--space-xl);
  text-decoration: none;
  transition: opacity 150ms ease, border-color 150ms ease;
}

.contact-terminal:hover {
  opacity: 0.8;
  border-color: var(--secondary);
}

.contact-ic {
  flex-shrink: 0;
  color: var(--secondary);
}

.terminal-email {
  font-family: monospace;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 400;
  color: var(--secondary);
  letter-spacing: 0.01em;
}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg);
  border-top: 1px solid rgba(22, 163, 74, 0.12);
  padding: var(--space-lg) var(--space-xl);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.footer-brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--secondary);
}

.footer-copy {
  font-size: 0.8125rem;
  color: var(--text);
  opacity: 0.35;
}

.footer-tagline {
  font-size: 0.8125rem;
  color: var(--text);
  opacity: 0.4;
  margin-left: auto;
  font-style: italic;
}

@media (max-width: 600px) {
  .footer-tagline {
    margin-left: 0;
    width: 100%;
  }

  .contact-terminal {
    padding: var(--space-md);
  }

  .terminal-email {
    font-size: 0.875rem;
  }
}

/* ── Why Us ─────────────────────────────────────────────────── */
.why-us {
  background: var(--bg);
  padding: var(--space-2xl) var(--space-xl);
}

.why-us-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.why-us-header {
  text-align: left;
}

.why-us-eyebrow {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}

.why-us-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.why-us-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--text);
  opacity: 0.6;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.why-us-card {
  background: var(--surface);
  border: 1px solid rgba(22, 163, 74, 0.12);
  border-radius: 14px;
  padding: var(--space-xl);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 450ms ease, transform 450ms ease;
}

.why-us-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.why-us-card:hover {
  border-color: rgba(22, 163, 74, 0.35);
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.08);
}

.why-us-icon {
  color: var(--secondary);
  margin-bottom: var(--space-md);
  width: 28px;
  height: 28px;
}

.why-us-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.why-us-card-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text);
  opacity: 0.6;
  margin: 0;
}

@media (max-width: 900px) {
  .why-us-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .why-us-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile (≤480px) — covers 320, 375, 425 targets ────────── */
@media (max-width: 480px) {

  /* Section padding: 48px → 32px, side padding 32px → 16px */
  .services,
  .pipeline,
  .partnership,
  .case-study,
  .tools,
  .contact,
  .why-us {
    padding: var(--space-2xl) var(--space-md);
  }

  /* Hero */
  .hero {
    padding: calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl);
    min-height: auto;
  }

  .hero-inner {
    display: flex;
    flex-direction: column;
  }

  .hero-text {
    padding: var(--space-lg) 0;
  }

  /* Disable desktop frost panel on mobile */
  .hero-text::before {
    display: none;
  }

  /* Full-width frost behind title + subtitle only */
  .hero-text-frost {
    position: relative;
    margin: 0 calc(-1 * var(--space-md));
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }

  /* Remove bottom margin from sub so panel hugs the text */
  .hero-text-frost .hero-sub {
    margin-bottom: 0;
  }

  .hero-text-frost::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px);           /* ← adjust blur here */
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.38); /* ← adjust opacity here */
    /* Soft fade at top and bottom edges */
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
    z-index: 0;
    pointer-events: none;
  }

  .hero-text-frost > * {
    position: relative;
    z-index: 1;
  }

  .hero-tagline {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .hero-sub {
    font-size: 0.9375rem;
    max-width: 100%;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-ctas a {
    text-align: center;
  }

  .hero-ctas .cta-ghost {
    background: #fff;
    color: var(--secondary);
  }

  .hero-ctas .cta-ghost:hover {
    background: #fff;
    color: var(--secondary);
  }

  /* Rotate landscape video to fill portrait viewport */
  .hero-video {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Hide visual panel — user will replace with different asset */
  .hero-visual {
    display: none;
  }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* Pipeline */
  .pipeline-steps {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
  }

  .dna-connector {
    width: 22px;
    height: 60px;
    background-repeat: repeat-y;
    background-size: 22px 22px;
    background-position: center top;
    align-self: center;
    margin-top: 0;
  }

  .pipeline-step {
    width: 100%;
  }

  .track-tools {
    justify-content: center;
  }

  /* Partnership */
  .pm-card {
    padding: var(--space-lg);
  }

  .partnership-header {
    text-align: left;
  }

  /* Case Study */
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--space-md);
    gap: var(--space-sm);
  }

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

  .key-finding {
    padding: var(--space-lg) var(--space-md);
  }

  .finding-text {
    font-size: 0.9375rem;
  }

  /* Why Us */
  .why-us-inner {
    grid-template-columns: 1fr;
  }

  .why-us-grid {
    grid-template-columns: 1fr;
  }

  .why-us-header {
    text-align: center;
  }

  /* Contact */
  .contact-terminal {
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .terminal-email {
    font-size: 0.875rem;
    word-break: break-all;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .footer-tagline {
    margin-left: 0;
  }
}

/* ── Extra small (≤375px) ───────────────────────────────────── */
@media (max-width: 375px) {
  .brand-name {
    font-size: 1rem;
  }

  .hero-tagline {
    font-size: clamp(1.75rem, 8vw, 2.2rem);
  }

  .stats-bar {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
    padding: var(--space-sm);
  }

  .stat-num {
    font-size: 1.5rem;
  }

  .pm-card {
    padding: var(--space-md);
  }

  .why-us-card {
    padding: var(--space-md);
  }

  .service-num {
    font-size: 3rem;
  }
}

/* ── 320px edge case ────────────────────────────────────────── */
@media (max-width: 320px) {
  .hero-tagline {
    font-size: 1.65rem;
  }

  .contact-terminal {
    padding: var(--space-sm);
  }

  .terminal-email {
    font-size: 0.8rem;
  }

  .pm-list li {
    font-size: 0.875rem;
  }

  .tool-badge,
  .tool-pill {
    font-size: 0.75rem;
    padding: 2px 8px;
  }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================== */
/* ===== Design-02 additions (content from website-merged) ====== */
/* Shared light-theme components in the team design language.     */
/* ============================================================== */

/* Shared section headings */
.section-title{font-family:'Poppins',sans-serif;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--text);letter-spacing:-0.02em;line-height:1.15;margin:var(--space-sm) 0 var(--space-md)}
.section-sub{font-family:'Open Sans',sans-serif;font-size:0.9375rem;line-height:1.75;color:var(--text);opacity:0.6;max-width:62ch}
.inline-link{color:var(--secondary);font-weight:600;text-decoration:none}
.inline-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Stacked logo: "Bioinformatics" over "by LilySys", with tagline beside it */
.brand-stack{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1.05}
.brand-by{font-family:'Open Sans',sans-serif;font-size:0.72rem;font-weight:400;color:var(--text);opacity:0.5;letter-spacing:0.04em;white-space:nowrap}

/* Hero text spans full width (result card removed) */
.hero-inner{grid-template-columns:1fr}
/* Widen only on desktop — keep the team's tuned mobile sizes below 901px */
@media (min-width:901px){
  .hero-text{max-width:980px}
  .hero-tagline{font-size:clamp(2.75rem,4vw + 1rem,5rem)}
  .hero-sub{max-width:70ch}
}

/* Hero points (under CTAs) */
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-lg);padding:0;margin:var(--space-lg) 0 0;position:relative;z-index:1}
.hero-points li{position:relative;padding-left:1.3rem;font-family:'Open Sans',sans-serif;font-size:0.875rem;color:var(--text);opacity:0.8}
.hero-points li::before{content:'✓';position:absolute;left:0;color:var(--secondary);font-weight:700}

/* Services — track sub-headings (grouping the merged 4 tracks) */
.services-track-title{font-family:'Poppins',sans-serif;font-size:1.25rem;font-weight:700;color:var(--text);letter-spacing:-0.01em;margin:var(--space-2xl) 0 var(--space-lg);padding-bottom:var(--space-sm);border-bottom:1px solid rgba(22,163,74,0.18)}
.services-divider + .services-track-title{margin-top:var(--space-md)}

/* How it works */
.how{background:var(--bg);padding:var(--space-2xl) var(--space-xl)}
.how-inner{max-width:1200px;margin:0 auto}
.how-header{margin-bottom:var(--space-2xl);max-width:820px}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}
.step-card{background:var(--surface);border:1px solid rgba(22,163,74,0.12);border-radius:14px;padding:var(--space-xl);opacity:0;transform:translateY(20px);transition:opacity 450ms ease,transform 450ms ease}
.step-card.visible{opacity:1;transform:translateY(0)}
.step-no{display:block;font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;color:var(--secondary);margin-bottom:var(--space-sm)}
.step-title{font-family:'Poppins',sans-serif;font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:var(--space-xs)}
.step-desc{font-family:'Open Sans',sans-serif;font-size:0.875rem;line-height:1.65;color:var(--text);opacity:0.6;margin:0}

/* Feature sections (Security, Engagement) */
.feature-section{background:var(--bg);padding:var(--space-2xl) var(--space-xl)}
.feature-section--surface{background:var(--surface)}
.feature-inner{max-width:1200px;margin:0 auto}
.feature-header{margin-bottom:var(--space-2xl);max-width:820px}
.feature-grid{display:grid;gap:var(--space-lg)}
.feature-grid--4{grid-template-columns:repeat(4,1fr)}
.feature-grid--3{grid-template-columns:repeat(3,1fr)}
.feature-card{background:var(--bg);border:1px solid rgba(22,163,74,0.14);border-radius:14px;padding:var(--space-xl);opacity:0;transform:translateY(20px);transition:opacity 450ms ease,transform 450ms ease,box-shadow 200ms ease}
.feature-section--surface .feature-card{background:#fff}
.feature-card.visible{opacity:1;transform:translateY(0)}
.feature-card:hover{border-color:rgba(22,163,74,0.35);box-shadow:0 4px 20px rgba(22,163,74,0.08)}
.feature-ic{font-size:1.6rem;margin-bottom:var(--space-sm)}
.feature-title{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:600;color:var(--text);margin-bottom:var(--space-xs)}
.feature-desc{font-family:'Open Sans',sans-serif;font-size:0.875rem;line-height:1.65;color:var(--text);opacity:0.6;margin:0}

/* Who we help */
.who{background:var(--surface);padding:var(--space-2xl) var(--space-xl)}
.who-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--space-2xl);align-items:center}
.who-list{list-style:none;padding:0;margin:var(--space-lg) 0 var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm)}
.who-list li{position:relative;padding-left:1.6rem;font-family:'Open Sans',sans-serif;font-size:0.9375rem;color:var(--text);opacity:0.8}
.who-list li::before{content:'✓';position:absolute;left:0;color:var(--secondary);font-weight:700}
.who-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.who-stat{background:var(--bg);border:1px solid rgba(22,163,74,0.15);border-radius:12px;padding:var(--space-lg)}
.who-stat strong{display:block;font-family:'Poppins',sans-serif;font-size:1.6rem;font-weight:700;color:var(--secondary);line-height:1;margin-bottom:6px}
.who-stat span{font-family:'Open Sans',sans-serif;font-size:0.8125rem;color:var(--text);opacity:0.6;line-height:1.4}

/* Contact form */
.contact-form{max-width:520px;margin:var(--space-2xl) auto 0;text-align:left;display:flex;flex-direction:column;gap:var(--space-md)}
.contact-form[hidden]{display:none}
.contact-form .field{display:flex;flex-direction:column;gap:6px}
.contact-form label{font-family:'Open Sans',sans-serif;font-size:0.8125rem;font-weight:600;color:var(--text);opacity:0.7}
.contact-form input,.contact-form textarea{font-family:'Open Sans',sans-serif;font-size:0.9375rem;color:var(--text);background:var(--bg);border:1px solid rgba(22,163,74,0.25);border-radius:8px;padding:10px 12px;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(22,163,74,0.15)}
.form-submit{border:none;cursor:pointer;align-self:flex-start;margin-top:var(--space-sm)}
.form-note{font-family:'Open Sans',sans-serif;font-size:0.8125rem;color:var(--secondary);text-align:center}

/* FAQ — answer-engine-friendly accordion */
.faq-list{max-width:840px;display:flex;flex-direction:column;gap:var(--space-sm)}
.faq-item{background:var(--surface);border:1px solid rgba(22,163,74,0.14);border-radius:12px;padding:0 var(--space-lg)}
.faq-q{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:600;color:var(--text);cursor:pointer;list-style:none;padding:var(--space-md) 0;display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:'+';color:var(--secondary);font-size:1.3rem;font-weight:700;line-height:1;transition:transform 200ms ease}
.faq-item[open] .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 0 var(--space-md)}
.faq-a p{font-family:'Open Sans',sans-serif;font-size:0.9375rem;line-height:1.7;color:var(--text);opacity:0.72;margin:0;max-width:75ch}

/* Pipeline footer note + case-study lead */
.pipeline-foot{text-align:center;font-family:'Open Sans',sans-serif;font-size:0.9375rem;line-height:1.7;color:var(--text);opacity:0.6;max-width:62ch;margin:var(--space-2xl) auto 0}
.case-study-lead{font-family:'Open Sans',sans-serif;font-size:0.9375rem;line-height:1.75;color:var(--text);opacity:0.62;max-width:78ch;margin-top:var(--space-md)}
.todo-note{font-family:monospace;color:var(--secondary);opacity:1;font-weight:700;display:inline-block;border:1px dashed rgba(22,163,74,0.55);border-radius:8px;padding:10px 16px;background:rgba(22,163,74,0.06);margin-top:var(--space-md)}

/* Sub-page hero (services.html / support-training.html) */
.page-hero{background:var(--surface);padding:calc(var(--nav-height) + var(--space-2xl)) var(--space-xl) var(--space-2xl)}
.page-hero-inner{max-width:1200px;margin:0 auto}
.back-link{display:inline-block;font-family:'Open Sans',sans-serif;font-size:0.875rem;color:var(--secondary);text-decoration:none;margin-bottom:var(--space-md)}
.back-link:hover{text-decoration:underline}
.page-hero-title{font-family:'Poppins',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--text);letter-spacing:-0.025em;line-height:1.15;margin-bottom:var(--space-md)}
.page-hero-sub{font-family:'Open Sans',sans-serif;font-size:1.0625rem;line-height:1.7;color:var(--text);opacity:0.6;max-width:64ch}

/* Responsive for design-02 additions */
@media (max-width:900px){
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid--4{grid-template-columns:repeat(2,1fr)}
  .feature-grid--3{grid-template-columns:1fr}
  .who-inner{grid-template-columns:1fr}
  /* Hero points sit over the video on mobile — give them readable frosted chips */
  .hero-points{gap:var(--space-sm)}
  .hero-points li{padding:6px 12px 6px 1.9rem;background:rgba(255,255,255,0.78);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;opacity:1;
    color:var(--text);font-weight:500}
  .hero-points li::before{left:0.65rem}
}
@media (max-width:600px){
  .steps-grid{grid-template-columns:1fr}
  .feature-grid--4{grid-template-columns:1fr}
  .who-stats{grid-template-columns:1fr 1fr}
  /* Tighten the (large) tools cloud on phones */
  .tool-pill,.tool-badge{font-size:0.78rem;padding:4px 10px}
  .tools-cloud{gap:6px}
}
@media (max-width:480px){
  .how,.feature-section,.who{padding:var(--space-2xl) var(--space-md)}
  /* Sub-page hero (services / support-training): tighter side padding */
  .page-hero{padding:calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl)}
}