/* ---------- Homepage (appended after product.css, catalog.css, pages.css) ---------- */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px 0 16px; }
.home-hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; margin-bottom: 16px; }
.home-hero .lead { font-size: 18px; max-width: 60ch; margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cta-row .btn { height: 54px; padding: 0 26px; font-size: 16.5px; }
.cta-row .btn-primary { width: auto; }

.hero-visual { position: relative; aspect-ratio: 5 / 4; border-radius: 20px; overflow: hidden; border: 0;
  /* Two bottom glows instead of one centred blue: teal from the left, blue from the right. On a dark field
     teal is free of the contrast limits that keep it out of the light UI, so the hero is where the brand
     colour actually gets to be the brand colour. */
  background:
    radial-gradient(90% 60% at 50% 4%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
    radial-gradient(62% 42% at 16% 98%, rgba(63,208,191,.30), rgba(63,208,191,0) 70%),
    radial-gradient(68% 45% at 74% 103%, rgba(10,99,232,.40), rgba(10,99,232,0) 72%),
    linear-gradient(168deg, #16395e 0%, #0a2039 52%, #050e1b 100%);
  box-shadow: var(--shadow-lg); }
/* faint lab grid + bench line the vials stand on */
.hero-visual::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%); }
.hero-visual::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 21%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); }
.hero-visual .hv { position: absolute; bottom: 6%; height: 74%; width: auto; }
.hero-visual .hv-0 { left: 6%; transform: rotate(-8deg); height: 62%; }
.hero-visual .hv-1 { left: 50%; transform: translateX(-50%); z-index: 1; }
.hero-visual .hv-2 { right: 6%; transform: rotate(8deg); height: 62%; }
.hero-visual .hv { filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.hv-badge { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 6px; background: var(--ok); color: #fff; font-weight: 800; font-size: 13px; padding: 7px 12px; border-radius: 999px; z-index: 2; }

/* The hero is a section but not a band: the wash behind it would fight the hero card's own gradient. */
section.block.home-hero-sec:nth-of-type(even) { background: none; box-shadow: none; }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.section-head .lead { margin-bottom: 0; }
.see-all { font-weight: 700; text-decoration: none; }
.see-all:hover { text-decoration: underline; }
.featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.featured-grid .p-body h3 { font-size: 17px; }
.featured-grid .from strong { font-size: 20px; }
.featured-grid .p-actions { grid-template-columns: 1fr; gap: 8px; }
.featured-grid .p-actions .btn { height: 42px; }
@media (max-width: 1100px) { .featured-grid .p-actions { grid-template-columns: 1fr 1fr; } }

.cat-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cat-block { display: flex; flex-direction: column; gap: 8px; padding: 22px; text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.cat-block:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 28px rgba(11,31,51,.12); color: var(--ink); }
.cat-block h3 { font-size: 18px; margin: 0; }
.cat-block p { margin: 0; font-size: 14.5px; color: var(--muted); }
.cat-count { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.cat-items { font-size: 13.5px; font-weight: 600; }
.cat-go { margin-top: auto; padding-top: 6px; font-weight: 800; color: var(--accent); }

.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--navy); color: #e6eef7; border-radius: var(--radius); padding: 32px; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { margin: 0; max-width: 62ch; }
.cta-band .cta-row { margin-top: 0; }
.btn-ghost.on-dark { background: transparent; color: #fff; border-color: #5d7a99; }
.btn-ghost.on-dark:hover { border-color: #fff; color: #fff; }

@media (max-width: 1100px) {
  .featured-grid, .cat-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .home-hero { grid-template-columns: 1fr; padding-top: 24px; }
  .hero-visual { max-width: 520px; width: 100%; }
}
@media (max-width: 640px) {
  /* Products stay two-up on a phone, matching the catalog. catalog.css already
     sets that, but home.css loads after it, so collapsing .featured-grid to a
     single column here quietly overrode it on the one page most visitors land
     on. The research-area blocks are not products and are text-heavy, so they
     do drop to one column. */
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-blocks { grid-template-columns: 1fr; }
  .cta-row .btn { flex: 1 1 100%; }
  .cta-band { padding: 24px 20px; }
}

/* Chromatogram across the base of the hero case, sitting behind the vials */
.hero-visual .hv-trace { position: absolute; left: -2%; right: -2%; bottom: 17%; height: 18%; color: #63b0ff; opacity: .7; }
.hero-visual .hv-trace path { stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(99,176,255,.9)) drop-shadow(0 0 18px rgba(60,140,255,.55)); }

/* Dark CTA band picks up the same motif */
.cta-band { position: relative; overflow: hidden; }
.cta-band > * { position: relative; z-index: 1; }
/* Brand teal reads well on the navy band and is too low-contrast for text, so the motif is where it earns its place */
.cta-band .chroma { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 88%; color: var(--teal); opacity: .3; }
.cta-band .chroma path { stroke-width: 2; filter: drop-shadow(0 0 12px rgba(63,208,191,.45)); }

/* Research-area blocks: dark cards give the page contrast and rhythm against the white sections */
.cat-block { background: linear-gradient(165deg, var(--navy-2) 0%, var(--navy) 70%); color: #dbe6f2;
  box-shadow: var(--ring), 0 2px 6px rgba(8,26,44,.18), 0 16px 32px -12px rgba(8,26,44,.4); }
.cat-block::before { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%); }
.cat-block h3 { color: #fff; }
.cat-block p { color: #a9bed3; }
.cat-count { color: #6fb2ff; }
.cat-items { color: #c6d6e6; }
.cat-go { color: #6fb2ff; }
.cat-block:hover { color: #eaf2fa; border-color: transparent;
  box-shadow: var(--ring), 0 4px 10px rgba(8,26,44,.22), 0 24px 48px -14px rgba(10,99,232,.45); }

/* ============================================================================
   Hero and dark surfaces — depth pass
   ========================================================================= */

/* Grain joins the existing lab-grid layer rather than taking a second pseudo:
   .hero-visual::before and ::after are both already spoken for (grid, bench
   line), and an element only ever gets one of each. */
.hero-visual::before {
  background-image:
    var(--grain),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 140px 140px, 44px 44px, 44px 44px;
  opacity: .9;
}

/* Hero entrance. The <h1> is deliberately untouched: it is the LCP candidate
   on this page (a CSS gradient background is not contentful, and neither is an
   inline SVG), so fading it in would move the metric Google actually records.
   Only the vials, badge and pills animate, and each settles once -- no looping
   animation, which would hold a compositor layer awake for the whole visit. */
@media (prefers-reduced-motion: no-preference) {
  .hero-visual .hv { animation: hv-settle .9s var(--ease-out) both; }
  .hero-visual .hv-0 { animation-delay: .10s; }
  .hero-visual .hv-1 { animation-delay: 0s; }
  .hero-visual .hv-2 { animation-delay: .18s; }

  .hv-badge { animation: badge-pop .55s var(--ease-spring) .5s both; }

  .trust-row li { animation: pill-in .5s var(--ease-out) both; }
  .trust-row li:nth-child(1) { animation-delay: .30s; }
  .trust-row li:nth-child(2) { animation-delay: .38s; }
  .trust-row li:nth-child(3) { animation-delay: .46s; }
}

/* Opacity only, deliberately. Each vial already carries its own transform
   (hv-0 and hv-2 are rotated, hv-1 is centred with translateX), and an
   animation on `transform` replaces that transform outright rather than
   composing with it -- the outer vials would snap upright mid-flight. */
@keyframes hv-settle {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes badge-pop {
  from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.88); }
  to   { opacity: 1; transform: none; }
}
@keyframes pill-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* The chromatogram finishes drawing, then the glow swells once — the moment a
   detector locks on. Delay matches the 2.4s draw in product.css. */
@media (prefers-reduced-motion: no-preference) {
  .hero-visual .hv-trace { animation: trace-glow 1.6s var(--ease-out) 2.5s both; }
}
@keyframes trace-glow {
  0%   { opacity: .7; }
  40%  { opacity: 1; }
  100% { opacity: .7; }
}

/* Research-area cards: the gradient shifts under the cursor instead of the
   card merely lifting. background-position is cheap here because the painted
   area is small and it only runs on hover. */
.cat-block {
  background: linear-gradient(165deg, #1d5088 0%, var(--navy-2) 38%, var(--navy) 85%);
  background-size: 100% 220%;
  background-position: 0 0;
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              background-position var(--t-slow) var(--ease-out);
}
.cat-block:hover { background-position: 0 100%; }

/* Dark bands get the same grain as the hero so the page reads as one material. */
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: .5;
  pointer-events: none;
}