/* =========================================================
   Liora Bioinformatics — marketing site
   Clean corporate blue theme with a bioinformatics green accent
   ========================================================= */

/* ---------------------------------------------------------
   Inter, self-hosted (SIL Open Font License 1.1 — see
   assets/fonts/OFL.txt). Served from our own origin so that
   no visitor data is sent to Google on page load. Variable
   font: covers the 400-800 weights used across the site.
   --------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue-900: #0b2545;
  --blue-800: #12386b;
  --blue-700: #1b4f8a;
  --blue-600: #2563a8;
  --blue-500: #2f7ac4;
  --blue-100: #e8f1fb;
  --blue-50: #f3f8fe;

  --accent: #2f9e5f;
  --accent-dark: #227048;
  --accent-soft: #eaf6ef;

  --ink: #16202e;
  --slate: #475467;
  --muted: #6b7686;
  --line: #e3e8ef;
  --bg: #ffffff;
  --bg-soft: #f7f9fc;

  --ok: #1f9d6b;
  --amber: #c98a15;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 32, 54, .06), 0 1px 3px rgba(16, 32, 54, .05);
  --shadow-md: 0 6px 20px rgba(16, 32, 54, .08);
  --shadow-lg: 0 18px 50px rgba(11, 37, 69, .14);

  --maxw: 1140px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  color: var(--blue-900);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 750;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
  color: var(--slate);
}

a {
  color: var(--blue-600);
  text-decoration: none;
}

a:hover {
  color: var(--blue-800);
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 84px 0;
}

.section-sm {
  padding: 56px 0;
}

.bg-soft {
  background: var(--bg-soft);
}

.bg-navy {
  background: var(--blue-900);
  color: #dbe6f4;
}

.bg-navy h1,
.bg-navy h2,
.bg-navy h3 {
  color: #fff;
}

.bg-navy p {
  color: #c2d2e6;
}

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 14px;
}

.bg-navy .eyebrow {
  color: #7fb2e8;
}

.lead {
  font-size: 1.15rem;
  color: var(--slate);
  max-width: 60ch;
}

.center {
  text-align: center;
}

.center .lead,
.center p {
  margin-left: auto;
  margin-right: auto;
}

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

.accent {
  color: var(--accent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 650;
  font-size: .98rem;
  padding: 13px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}

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

.btn-primary {
  background: var(--blue-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--blue-700);
  color: #fff;
}

.btn-ghost {
  background: #fff;
  color: var(--blue-800);
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--blue-500);
  color: var(--blue-800);
}

.btn-light {
  background: #fff;
  color: var(--blue-800);
}

.btn-light:hover {
  background: var(--blue-50);
  color: var(--blue-900);
}

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.btn-lg {
  padding: 15px 28px;
  font-size: 1.02rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.center .btn-row {
  justify-content: center;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--blue-900);
}

.brand:hover {
  color: var(--blue-900);
}

.brand .logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
}

.brand.brand-img {
  gap: 0;
}

.brand.brand-img img {
  height: 34px;
  width: auto;
  display: block;
}

.site-footer .brand.brand-img img {
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--slate);
  font-weight: 550;
  font-size: .96rem;
  padding: 8px 14px;
  border-radius: 8px;
}

.nav-links a:hover {
  color: var(--blue-800);
  background: var(--blue-50);
}

.nav-links a.active {
  color: var(--blue-800);
  background: var(--blue-100);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 7px 11px;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--muted);
  cursor: pointer;
}

.lang-btn+.lang-btn {
  border-left: 1px solid var(--line);
}

.lang-btn:hover:not(.active) {
  background: var(--blue-50);
  color: var(--blue-800);
}

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

.flag {
  flex-shrink: 0;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(11, 37, 69, .18) inset;
}

.flag-gb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%2300247d'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 25,12.5 M35,12.5 60,0 M0,30 25,17.5 M35,17.5 60,30' stroke='%23cf142b' stroke-width='4'/%3E%3Cpath d='M30,0 30,30 M0,15 60,15' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 30,30 M0,15 60,15' stroke='%23cf142b' stroke-width='6'/%3E%3C/svg%3E");
}

.flag-de {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Crect width='60' height='12' y='0' fill='%23000'/%3E%3Crect width='60' height='12' y='12' fill='%23dd0000'/%3E%3Crect width='60' height='12' y='24' fill='%23ffce00'/%3E%3C/svg%3E");
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--blue-900);
  margin: 4px 0;
  border-radius: 2px;
}

/* Hero (software portrait) */
.hero {
  padding: 88px 0 64px;
  background: radial-gradient(1200px 500px at 70% -10%, var(--blue-50), #fff 60%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.hero h1 {
  margin-bottom: .35em;
}

.hero .lead {
  margin-bottom: 26px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--slate);
  font-size: .9rem;
  font-weight: 550;
}

.hero-badge svg {
  color: var(--ok);
  flex: none;
}

/* Company hero */
.hero-company {
  position: relative;
  padding: 104px 0 92px;
  background-color: #ffffff;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20800%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%270%27%20y1%3D%27120%27%20x2%3D%271440%27%20y2%3D%27120%27%20stroke%3D%27%2394a3b8%27%20stroke-opacity%3D%270.12%27%20stroke-dasharray%3D%272%208%27%20stroke-width%3D%271%27%2F%3E%3Cline%20x1%3D%270%27%20y1%3D%27600%27%20x2%3D%271440%27%20y2%3D%27600%27%20stroke%3D%27%2394a3b8%27%20stroke-opacity%3D%270.12%27%20stroke-dasharray%3D%272%208%27%20stroke-width%3D%271%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(850px 450px at 85% -5%, var(--blue-50, #eff6ff), transparent 70%),
    radial-gradient(750px 450px at 5% 105%, #eef8f2, transparent 70%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto, auto;
  overflow: hidden;
  min-height: 100vh;
  border-bottom: 1px solid var(--line);
}

/* Hero decorations.
   These were previously one SVG drawn as a background with
   preserveAspectRatio='slice' and background-size:cover, which scaled the
   artwork to COVER the hero and cropped the overflow. The curves sit near the
   left and right edges of a 1440x800 viewBox, so whenever the viewport was
   narrower than that 1.8 ratio the crop removed them entirely — visible only
   in a wide fullscreen window, exactly as reported.

   As separate elements anchored to their own edge and scaled by HEIGHT, they
   cannot be cropped at any aspect ratio. They are hidden below 940px, where
   the text spans the full width and there is no room beside it. */
.hero-company::before,
.hero-company::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 90%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

/* The hero decorations need clear space either side of the 900px text column.
   Verified by screenshot: clean at 1200px, marginal at 1100px, and the heading
   runs into the helix at 1024px. German headings are longer than English, so
   the cut-off is set at the width that is comfortably clear in both. */
@media (max-width: 1199px) {

  .hero-company::before,
  .hero-company::after {
    display: none;
  }
}


.hero-company::before {
  left: 4%;
  aspect-ratio: 160 / 800;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2760%200%20160%20800%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%27140%27%20y1%3D%2740%27%20x2%3D%27140%27%20y2%3D%27760%27%20stroke%3D%27%2394a3b8%27%20stroke-opacity%3D%270.25%27%20stroke-dasharray%3D%274%206%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M%20140%2040%20C%20220%20100%2C%20220%20200%2C%20140%20260%20C%2060%20320%2C%2060%20420%2C%20140%20480%20C%20220%20540%2C%20220%20640%2C%20140%20700%27%20stroke%3D%27%232563eb%27%20stroke-opacity%3D%270.6%27%20stroke-width%3D%271.8%27%2F%3E%3Cpath%20d%3D%27M%20140%2040%20C%2060%20100%2C%2060%20200%2C%20140%20260%20C%20220%20320%2C%20220%20420%2C%20140%20480%20C%2060%20540%2C%2060%20640%2C%20140%20700%27%20stroke%3D%27%233b82f6%27%20stroke-opacity%3D%270.35%27%20stroke-width%3D%271.4%27%20stroke-dasharray%3D%274%204%27%2F%3E%3Cline%20x1%3D%2780%27%20y1%3D%27150%27%20x2%3D%27200%27%20y2%3D%27150%27%20stroke%3D%27%232563eb%27%20stroke-opacity%3D%270.25%27%20stroke-width%3D%271%27%2F%3E%3Cline%20x1%3D%2780%27%20y1%3D%27370%27%20x2%3D%27200%27%20y2%3D%27370%27%20stroke%3D%27%232563eb%27%20stroke-opacity%3D%270.25%27%20stroke-width%3D%271%27%2F%3E%3Cline%20x1%3D%2780%27%20y1%3D%27590%27%20x2%3D%27200%27%20y2%3D%27590%27%20stroke%3D%27%232563eb%27%20stroke-opacity%3D%270.25%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%27150%27%20r%3D%273.5%27%20fill%3D%27%232563eb%27%20fill-opacity%3D%270.8%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%27150%27%20r%3D%273%27%20fill%3D%27%233b82f6%27%20fill-opacity%3D%270.6%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%27260%27%20r%3D%273.5%27%20fill%3D%27%232563eb%27%20fill-opacity%3D%270.9%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%27370%27%20r%3D%273.5%27%20fill%3D%27%232563eb%27%20fill-opacity%3D%270.8%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%27370%27%20r%3D%273%27%20fill%3D%27%233b82f6%27%20fill-opacity%3D%270.6%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%27480%27%20r%3D%273.5%27%20fill%3D%27%232563eb%27%20fill-opacity%3D%270.9%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%27590%27%20r%3D%273.5%27%20fill%3D%27%232563eb%27%20fill-opacity%3D%270.8%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%27590%27%20r%3D%273%27%20fill%3D%27%233b82f6%27%20fill-opacity%3D%270.6%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%27700%27%20r%3D%273.5%27%20fill%3D%27%232563eb%27%20fill-opacity%3D%270.9%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.hero-company::after {
  right: 3%;
  aspect-ratio: 210 / 800;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271180%200%20210%20800%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%271360%27%20y1%3D%2740%27%20x2%3D%271360%27%20y2%3D%27760%27%20stroke%3D%27%2394a3b8%27%20stroke-opacity%3D%270.25%27%20stroke-dasharray%3D%274%206%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M%201360%2080%20C%201360%20220%2C%201190%20280%2C%201190%20400%20C%201190%20520%2C%201360%20580%2C%201360%20720%20Z%27%20fill%3D%27%2310b981%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpath%20d%3D%27M%201360%2080%20C%201360%20220%2C%201190%20280%2C%201190%20400%20C%201190%20520%2C%201360%20580%2C%201360%20720%27%20stroke%3D%27%2310b981%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%271.8%27%2F%3E%3Cline%20x1%3D%271242%27%20y1%3D%27260%27%20x2%3D%271380%27%20y2%3D%27260%27%20stroke%3D%27%2394a3b8%27%20stroke-opacity%3D%270.2%27%20stroke-dasharray%3D%273%203%27%20stroke-width%3D%271%27%2F%3E%3Cline%20x1%3D%271190%27%20y1%3D%27400%27%20x2%3D%271380%27%20y2%3D%27400%27%20stroke%3D%27%2310b981%27%20stroke-opacity%3D%270.3%27%20stroke-dasharray%3D%273%203%27%20stroke-width%3D%271%27%2F%3E%3Cline%20x1%3D%271242%27%20y1%3D%27540%27%20x2%3D%271380%27%20y2%3D%27540%27%20stroke%3D%27%2394a3b8%27%20stroke-opacity%3D%270.2%27%20stroke-dasharray%3D%273%203%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%271190%27%20cy%3D%27400%27%20r%3D%274%27%20fill%3D%27%2310b981%27%20fill-opacity%3D%270.9%27%2F%3E%3Ccircle%20cx%3D%271242%27%20cy%3D%27260%27%20r%3D%273%27%20fill%3D%27%2310b981%27%20fill-opacity%3D%270.7%27%2F%3E%3Ccircle%20cx%3D%271242%27%20cy%3D%27540%27%20r%3D%273%27%20fill%3D%27%2310b981%27%20fill-opacity%3D%270.7%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.hero-company .container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
}

.hero-company .made-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: .82rem;
  font-weight: 650;
  color: var(--slate);
  box-shadow: var(--shadow-sm);
  margin-bottom: 26px;
}

.hero-company .made-in .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.hero-company h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  margin-bottom: .3em;
}

.hero-company .tagline {
  font-size: 1.35rem;
  font-weight: 650;
  color: var(--blue-700);
  margin: 0 auto 18px;
  max-width: 30ch;
}

.hero-company .lead {
  margin: 0 auto 30px;
}

.hero-company .btn-row {
  justify-content: center;
}

.hero-company .hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
  margin-top: 40px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 550;
}

.hero-company .hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-company .hero-meta svg {
  color: var(--accent);
  flex: none;
}

.hero-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  width: 100%;
  height: 100%;
}

/* Screenshot placeholder */
.shot {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--blue-50);
  border-bottom: 1px solid var(--line);
}

.shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cdd7e5;
  display: block;
}

.shot-body {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(0deg, rgba(37, 99, 168, .04), rgba(37, 99, 168, .04)), repeating-linear-gradient(45deg, #fbfdff, #fbfdff 12px, #f4f8fd 12px, #f4f8fd 24px);
  color: var(--muted);
}

.shot-body .ph-label {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.shot-body .ph-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  color: var(--blue-500);
  opacity: .7;
}

.shot.small .shot-body {
  aspect-ratio: 16 / 11;
}

/* Logo strip */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.logo-chip {
  color: #9aa6b6;
  font-weight: 750;
  font-size: 1.05rem;
  letter-spacing: .02em;
  opacity: .9;
}

/* Feature grid */
.grid {
  display: grid;
  gap: 24px;
}

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

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

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

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #d5e1f0;
}

.card h3 {
  margin-bottom: .4em;
}

.card p {
  margin-bottom: 0;
  font-size: .97rem;
}

.icon-box {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  background: var(--blue-100);
  color: var(--blue-700);
}

.icon-box svg {
  width: 24px;
  height: 24px;
}

/* Pillars */
.pillar .icon-box {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.pillar .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

.pillar .tags span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--blue-800);
  background: var(--blue-50);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 9px;
}

/* Product showcase */
.product-hero {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  border-radius: 20px;
  padding: 44px;
  color: #dbe6f4;
  background: var(--bg-soft);
}

.product-hero img {
  width: 190px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .35));
}

.product-hero h3 {
  color: var(--blue-900);
  font-size: 1.7rem;
}

.phylotrace-logo {
  width: 100% !important;
  height: auto !important;
}

.product-hero .kicker {
  color: #7fd6a3;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-hero p {
  color: var(--slate);
}

.product-hero .btn-row {
  margin-top: 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.product-hero .btn-row a {
  color: var(--blue-900);
}

.tool {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}

.tool:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tool h4 {
  color: var(--blue-900);
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.tool .cat {
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tool p {
  font-size: .9rem;
  margin: 8px 0 0;
}

.dna-map {
  border-radius: var(--radius);
}

/* Team */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.member {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.member .avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .02em;
}

.member h3 {
  font-size: 1.15rem;
  margin-bottom: 2px;
}

.member .role {
  color: var(--accent-dark);
  font-weight: 650;
  font-size: .9rem;
  margin-bottom: 12px;
}

.member p {
  font-size: .9rem;
  margin: 0;
  text-align: left;
}

/* Split rows */
.split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 56px;
  align-items: center;
}

.split.reverse .split-media {
  order: 2;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

.feature-list li {
  position: relative;
  padding: 8px 0 8px 32px;
  color: var(--slate);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231b4f8a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Steps */
.steps {
  counter-reset: step;
  display: grid;
  gap: 22px;
}

.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.step .num {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--blue-900);
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  display: grid;
  place-items: center;
}

.step h3 {
  margin-bottom: .3em;
}

.step p {
  margin: 0;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat {
  text-align: center;
}

.stat .num {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.stat .lbl {
  color: #a9c0dc;
  font-size: .95rem;
  margin-top: 8px;
}

/* Pricing */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
}

.plan.featured {
  border: 2px solid var(--blue-500);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.plan .tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-600);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

.plan h3 {
  font-size: 1.25rem;
}

.plan .price {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--blue-900);
  line-height: 1;
  margin: 10px 0 4px;
}

.plan .price span {
  font-size: .95rem;
  font-weight: 600;
  color: var(--muted);
}

.plan .price-note {
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 22px;
}

.plan .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 24px;
}

.plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan ul li {
  position: relative;
  padding: 8px 0 8px 28px;
  color: var(--slate);
  font-size: .95rem;
  border-top: 1px solid var(--line);
}

.plan ul li:first-child {
  border-top: none;
}

.plan ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f9d6b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan ul li.muted {
  color: var(--muted);
}

.plan ul li.muted::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b6bfca' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Comparison table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

table.compare {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 640px;
}

table.compare th,
table.compare td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}

table.compare thead th {
  background: var(--blue-50);
  color: var(--blue-900);
  font-weight: 700;
}

table.compare td.center,
table.compare th.center {
  text-align: center;
}

table.compare tbody tr:last-child td {
  border-bottom: none;
}

.tick {
  color: var(--ok);
  font-weight: 800;
}

.dash {
  color: #c2cad4;
}

/* FAQ */
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 22px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.faq summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--blue-900);
  padding: 16px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--blue-500);
  font-weight: 500;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  padding-bottom: 18px;
  margin: 0;
}

/* CTA band */
.cta-band {
  border-radius: 20px;
  padding: 56px;
  text-align: center;
}

.cta-band h2 {
  color: #000;
}

.cta-band p {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--slate);
}

/* Contact form */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  color: var(--blue-900);
  margin-bottom: 7px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(47, 122, 196, .15);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field .hint {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 6px;
}

.form-note {
  font-size: .85rem;
  color: var(--muted);
}

.form-status {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 9px;
  font-size: .93rem;
  font-weight: 550;
  display: none;
}

.form-status.show {
  display: block;
}

.form-status.ok {
  background: #eaf7f0;
  color: #176844;
  border: 1px solid #bfe6d1;
}

.form-status.err {
  background: #fdecec;
  color: #a32626;
  border: 1px solid #f4c9c9;
}

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}

.contact-info .info-item {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.contact-info .info-item svg {
  color: var(--accent);
  flex: none;
  margin-top: 2px;
}

.contact-info .info-item h4 {
  margin: 0 0 3px;
  font-size: 1rem;
}

.contact-info .info-item p {
  margin: 0;
  font-size: .95rem;
}

/* Legal / prose pages */
.prose {
  max-width: 800px;
}

.prose h2 {
  font-size: 1.4rem;
  margin-top: 36px;
}

.prose h3 {
  font-size: 1.1rem;
  margin-top: 26px;
}

.prose p,
.prose li {
  color: var(--slate);
}

.prose ul {
  padding-left: 20px;
}

.prose li {
  margin-bottom: 6px;
}

.prose a {
  word-break: break-word;
}

.prose .updated {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Footer */
.site-footer {
  background: var(--blue-900);
  color: #a9c0dc;
  padding: 60px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}

.site-footer .brand {
  color: #fff;
  margin-bottom: 12px;
}

.site-footer p {
  color: #93aacb;
  font-size: 1.1rem;
}

.footer-col {
  justify-items: end;
}

.footer-col h4 {
  color: #fff;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  justify-items: end;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 9px;
}

.footer-col a {
  color: #a9c0dc;
  font-size: .93rem;
  text-align: end;
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 40px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .88rem;
  color: #8ea4c4;
}

.footer-bottom a {
  color: #8ea4c4;
}

.footer-bottom a:hover {
  color: #fff;
}

/* Page hero */
.page-hero {
  padding: 64px 0 40px;
  background: radial-gradient(900px 400px at 80% -20%, var(--blue-50), #fff 60%);
}

.page-hero h1 {
  margin-bottom: .3em;
}

/* helpers */
.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-8 {
  margin-top: 8px;
}

.note {
  font-size: .85rem;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 940px) {

  .nav {
    height: 56px;
    margin-top: 0 !important;
  }

  .brand.brand-img img {
    height: 26px;
  }

  .hero-grid,
  .split,
  .grid-3,
  .grid-4,
  .pricing,
  .footer-grid,
  .contact-split {
    grid-template-columns: 1fr;
  }

  .split.reverse .split-media {
    order: 0;
  }

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

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

  .split {
    gap: 34px;
  }

  .hero {
    padding: 56px 0 40px;
  }

  .hero-company {
    padding: 64px 0 56px;
    min-height: 0;
  }


  .section {
    padding: 60px 0;
  }

  .footer-grid {
    gap: 28px;
  }

  .product-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 34px 0px;
    gap: 0;
  }

  .container {
    margin-top: 40px;
  }

  .product-hero .btn-row {
    justify-content: center;
  }

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

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 1;
  }

  .nav-toggle span {
    transition: transform .2s ease, opacity .15s ease;
  }

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

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

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

  .nav-links {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 12px 20px 16px;
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 14px 16px;
  }

  .nav .nav-cta .btn-ghost {
    display: none;
  }

  /* The language switcher lives in .nav-cta by default; main.js moves it
     into .nav-links (as .nav-lang-item) below this breakpoint so it opens
     with the rest of the menu instead of crowding the top bar. Hide it in
     its default slot here so there's no flash in the old spot before JS
     runs. */
  .nav-cta .lang-switch {
    display: none;
  }

  .nav-lang-item {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .nav-lang-item .lang-switch {
    display: flex;
    width: 100%;
  }

  .nav-lang-item .lang-btn {
    flex: 1;
    justify-content: center;
    padding: 13px 14px;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 37, 69, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
    z-index: 45;
  }

  .nav-backdrop.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
  }

  body.nav-locked {
    overflow: hidden;
  }

  .cta-band {
    padding: 40px 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .btn-row {
    flex-direction: column;
  }

  .btn-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Product tool cards (clickable) ---------- */
a.tool {
  text-decoration: none;
  color: inherit;
  display: block;
}

a.tool:hover h4 {
  color: var(--blue-700);
}

.tool-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 12px;
  display: block;
}

/* ---------- Package detail page ---------- */
.pkg-hero {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 44px;
  align-items: center;
}

.pkg-hero .pkg-logo {
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 10px 26px rgba(11, 37, 69, .16));
}

.pkg-hero h1 {
  margin: 6px 0 .3em;
}

.pkg-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.pkg-cats span {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 5px 10px;
}

.pkg-tagline {
  font-size: 1.15rem;
  color: var(--slate);
  max-width: 56ch;
  margin-bottom: 22px;
}

.resource-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.resource-btns .btn {
  min-width: 215px;
  justify-content: center;
}

.btn-gh {
  background: var(--blue-900);
  color: #fff;
}

.btn-gh:hover {
  background: #08182f;
  color: #fff;
}

.btn-gh svg {
  width: 18px;
  height: 18px;
}

.code-block {
  background: var(--blue-900);
  color: #dbe6f4;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .92rem;
  overflow-x: auto;
  margin: 0;
}

.code-block .c-prompt {
  color: #7fd6a3;
  user-select: none;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .95rem;
}

@media (max-width: 720px) {
  .pkg-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }

  .pkg-hero .pkg-logo {
    width: 130px !important;
    height: 130px !important;
  }

  .pkg-cats,
  .resource-btns {
    justify-content: center;
  }

  .pkg-tagline {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Package "built with" tech row ---------- */
.pkg-tech {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -6px 0 20px;
}

.pkg-tech .lbl {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.pkg-tech img {
  height: 26px;
  width: auto;
  display: block;
}

@media (max-width: 720px) {
  .pkg-tech {
    justify-content: center;
  }
}

/* ---------- R logo inside CRAN button ---------- */
.btn .cran-r {
  height: 16px;
  width: auto;
  display: block;
}

/* ---------- CRAN download statistics ---------- */
.cran-stats {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  margin-top: 40px;
}

.cran-stats:not(.is-loaded) {
  opacity: .55;
}

.cran-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cran-head h2 {
  font-size: 1.3rem;
  margin: 0;
}

.cran-src {
  font-size: .8rem;
  color: var(--muted);
}

.cran-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cran-num {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--blue-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cran-lbl {
  font-size: .85rem;
  color: var(--muted);
  margin-top: 7px;
}

.cran-spark {
  margin-top: 22px;
}

.cran-spark svg {
  width: 100%;
  height: 50px;
  display: block;
}

.spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.spark-area {
  fill: var(--accent-soft);
  stroke: none;
}

.cran-spark-lbl {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 8px;
}

@media (max-width: 520px) {
  .cran-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cran-err {
  font-size: .85rem;
  color: var(--muted);
  margin-top: 14px;
}

.cran-stats.is-error .cran-grid,
.cran-stats.is-error .cran-spark,
.cran-stats.is-error .cran-spark-lbl {
  opacity: .4;
}

/* PhyloTrace page */
.screenshot-container {
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 2px 3px 0px 1px #666;

  img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
  }
}

.feature-detail-item {
  scroll-margin-top: 80px;
}

.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  touch-action: pan-y;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 2px 3px 0px 1px #666;
}

.product-hero {
  .carousel {
    border-radius: unset;
    background: unset;
    border: none;
    border-radius: unset;
    box-shadow: none;
    overflow: visible;
  }

  .container {
    padding: 0;
    width: unset;

    /* Only spans 2 columns on the desktop 2-column layout. Below 940px
       .product-hero collapses to a single explicit column (see the
       @media (max-width: 940px) rule above), so an unconditional span
       here would force an implicit second column into existence and
       starve the real column down to 0px — collapsing the logo image
       that lives in it. */
    @media (min-width: 941px) {
      grid-column: 1 / span 2;
    }
  }

  .carousel-slide img {
    max-height: 400px;
    filter: unset;
  }

  .screenshot {
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: 2px 3px 0px 1px #666;
  }
}

.carousel-slides {
  position: relative;
  width: 100%;
  display: flex;
}

.carousel-slide {
  min-width: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.carousel-slide.active {
  display: block;
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Controls */
.carousel-btn {
  line-height: inherit;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.3);
  color: #ffffff;
  border: none;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
  transition: background 0.2s, transform 0.2s;
}

.carousel-btn:hover {
  background: rgba(15, 23, 42, 0.85);
}

.carousel-btn.prev {
  left: 12px;
}

.carousel-btn.next {
  right: 12px;
}

/* Indicators */
/* Enhanced Indicators for High Visibility */
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(4px);
  border-radius: 20px;
}

.carousel-dot {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(15, 23, 42, 0.3);
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.carousel-dot.active {
  background: #3b82f6;
  border-color: #ffffff;
  transform: scale(1.2);
}

.phylotrace-call {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: black;
  background: var(--bg-soft);
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid lightgray;
  font-weight: bold;
  width: fit-content;
  font-size: 1.2em;
}

/* Regulatory intended-purpose notice (IVDR): keep visible wherever
   PhyloTrace is presented. See impressum.html for attributions. */
.ruo-note {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--line);
  background: #fbfbfb;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.5;
  max-width: 85ch;
  text-align: justify;
}

/* Keyboard focus. Custom controls (hamburger, language switch, carousel
   buttons and dots) had no focus styling of their own and fell back to the
   browser default, which is easy to lose against these backgrounds.
   :focus-visible keeps pointer clicks unaffected. */
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-toggle:focus-visible,
.lang-btn:focus-visible,
.carousel-btn:focus-visible,
.carousel-dot:focus-visible,
.prose a:focus-visible,
.info-item a:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
}

.carousel-dot:focus-visible {
  outline-offset: 4px;
}

/* On dark grounds the blue ring loses contrast — use white instead. */
.bg-navy .btn:focus-visible,
.bg-navy a:focus-visible,
.site-footer a:focus-visible,
.site-footer .btn:focus-visible {
  outline-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* CRAN panel: "as of" stamp. The figures are refreshed by
   tools/update-cran-stats.py rather than fetched live, so the date they
   were taken is stated instead of implying they are current. */
.cran-asof {
  margin-top: 6px;
  font-size: .78rem;
  color: var(--muted);
}