/* ============================================================
   ZYMOLAB — Site layout
   Page-specific layout for the marketing site, built on the
   design-system tokens (styles.css). Shared by every language
   edition (/, /en/) so the layout never drifts between them.
   ============================================================ */

html { scroll-behavior: smooth; }

/* ---- Media images (fill their frame, crop to taste) ---- */
.zl-img { display: block; width: 100%; height: auto; object-fit: cover; }

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 8rem) clamp(5rem, 10vw, 9rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items: center; }
.hero__title { margin-top: var(--space-6); }
.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-10); }
.hero__panel { position: relative; aspect-ratio: 1/1; }
/* decorative bubble cluster, echoing the mark */
.bubble { position: absolute; border-radius: 50%; }
.b-disk { inset: 14% 14% 14% 14%; background: var(--green-700); }
.b-cream { width: 30%; height: 30%; left: 28%; top: 34%; background: var(--green-050); opacity: 0.92; }
.b-lime-sm { width: 11%; height: 11%; left: 52%; top: 52%; background: var(--lime-500); opacity: 0.9; }
.b-lime-top { width: 15%; height: 15%; left: 62%; top: 12%; background: var(--lime-500); }
.b-gold { width: 10%; height: 10%; left: 18%; top: 8%; background: var(--gold-500); }
.b-mini { width: 5%; height: 5%; left: 78%; top: 28%; background: var(--lime-500); }
@media (prefers-reduced-motion: no-preference) {
  .b-lime-top { animation: drift 7s var(--ease-in-out) infinite; }
  .b-gold { animation: drift 9s var(--ease-in-out) infinite; }
  .b-mini { animation: drift 6s var(--ease-in-out) infinite; }
}
@keyframes drift { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-9px);} }

/* ---- Stats strip ---- */
.stats { border-block: 1px solid var(--border-subtle); padding-block: var(--space-12); }
.stats__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-8); }

/* ---- Two-domain expertise ---- */
.domains { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-12); }
.domain { display: grid; grid-template-rows: auto 1fr; }
.domain__media { aspect-ratio: 16/10; }
.domain__body { padding-top: var(--space-6); }
.domain__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* ---- About split ---- */
.about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-16); align-items: center; }

/* ---- Services ---- */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-12); }
.svc__list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.svc__list li { display: flex; gap: var(--space-3); font: var(--type-body); color: var(--text-secondary); }
.svc__list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-gold); margin-top: 0.5rem; }

/* ---- Fermenty band ---- */
.product { background: var(--surface-inverse); color: var(--text-on-dark); }
.product__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }

/* ---- Approach ---- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); margin-top: var(--space-12); }
.step__n { font: var(--fw-medium) var(--text-h2)/1 var(--font-display); color: var(--accent-gold-ink); }
.step__bar { height: 2px; background: var(--border-subtle); margin-block: var(--space-4); position: relative; }
.step__bar::before { content:""; position:absolute; left:0; top:0; height:100%; width:34%; background: var(--accent-gold); }

/* ---- Contact ---- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }

/* ---- Language switch (nav) ---- */
.zl-nav__lang { font: var(--fw-semibold) var(--text-sm)/1 var(--font-mono); letter-spacing: 0.04em; color: var(--text-muted); }
.zl-nav__lang:hover { color: var(--text-primary); }

/* ---- Footer ---- */
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-10); padding-block: var(--space-16) var(--space-10); }
.foot__col h4 { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-on-dark-dim); }
.foot__col ul { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.foot__col a { font: var(--type-body); }
.foot__bar { border-top: 1px solid var(--border-on-dark); padding-block: var(--space-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.foot__bar span { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-on-dark-dim); }

@media (max-width: 860px) {
  .hero__grid, .about, .product__grid, .contact { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__panel { max-width: 360px; }
  .stats__grid, .steps { grid-template-columns: repeat(2,1fr); }
  .domains, .services, .foot__grid { grid-template-columns: 1fr; }
}