/* ==========================================================================
   Home page — hero, about teaser, featured product, product rows, MVV.
   The hero visual uses the supplied Eye.png image without cropping.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Swis721 BT Roman — used for the hero caption ("We make / SIMPLE EFFICIENT
   RELIABLE / ophthalmic instruments.") to match the approved reference
   design. Only a Roman (regular) weight file was supplied, so the range
   below lets the browser use this single file across the weights the
   caption needs (400 for the lead-in/sub line, 700 for the bold caps
   line) rather than falling back to the site's default heading font. */
@font-face {
  font-family: 'Swis721 BT';
  src: url('../fonts/Swis721_BT_Roman.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Bottom padding increased back up — the previous compact value left
     an awkward gap of unused white space before the About section on
     real desktop viewports. Hero now uses that space intentionally
     instead of ending abruptly. */
  padding-top: calc(var(--header-h) + var(--space-4));
  padding-bottom: var(--space-6);
  background: var(--navy-900);
  overflow: hidden;
  color: var(--text-on-dark);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 55% at 82% 28%, rgba(0, 163, 255, 0.22) 0%, rgba(0, 163, 255, 0) 60%),
    radial-gradient(45% 40% at 8% 85%, rgba(38, 56, 128, 0.5) 0%, rgba(38, 56, 128, 0) 65%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-900) 100%);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(65% 65% at 70% 35%, black 0%, transparent 75%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* Raised from 480px: at the previous cap, "SIMPLE EFFICIENT RELIABLE"
     had no room to sit on one line at a legible size and was forced to
     wrap after "EFFICIENT". 620px gives the headline room to breathe
     on one line while still leaving the second column (1fr) more than
     enough space for .hero-visual, which self-caps at 450px, so the
     eye image's size/position is unaffected. */
  grid-template-columns: minmax(300px, 620px) 1fr;
  align-items: center;
  gap: var(--space-6);
}

.hero-headline {
  font-family: 'Swis721 BT', var(--font-heading, sans-serif);
  /* Bumped past 700 for a slightly heavier look. The Swis721 BT face
     only ships a Roman file covering 400–700, so 800 falls outside
     that range and the browser applies synthetic (faux) bold on top
     of it — the intended effect here, since no bolder file exists. */
  font-weight: 900;
  text-transform: uppercase;
  /* Overrides var(--fs-h1) specifically for the hero: that token still
     rendered too large to keep "SIMPLE EFFICIENT RELIABLE" on one line
     even in the widened 620px column above (~44px was pushing "RELIABLE"
     onto its own line). This clamp caps out at 36px on desktop — still a
     confidently large headline, but sized to actually fit the three
     words on one line with margin to spare, matching the reference. */
  font-size: clamp(1.95rem, 1.4rem + 1.15vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  /* No longer forced onto three lines (the <br> tags were removed from
     the markup) — this now wraps naturally like the reference, which
     keeps SIMPLE EFFICIENT RELIABLE on one line at desktop widths. */
  white-space: normal;
}

.hero-headline__lead {
  display: block;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem);
  font-weight: 400;
  text-transform: none;
  /* Was var(--mist), a muted blue-grey — the reference has this line in
     the same white as the headline and the sub-line below, so it's
     switched to var(--text-on-dark) (matches .hero's own color) to
     match. */
  color: var(--text-on-dark);
  margin-bottom: 4px;
  letter-spacing: var(--ls-normal);
  font-family: 'Swis721 BT', var(--font-body, sans-serif);
}

/* hero-copy is shrink-wrapped to its widest line (the headline). The
   headline, lead-in, and button all keep their natural left-flush
   position (align-items: flex-start) — only hero-sub below overrides
   this with a full-width, right-aligned line, so specifically its text
   lines up with the end of the headline above it. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
}

.hero-sub {
  font-family: 'Swis721 BT', var(--font-body, sans-serif);
  font-size: var(--fs-body);
  /* Nudged up from the default 400 for a bit more presence next to
     the now-heavier headline above it. */
  font-weight: 600;
  /* Was var(--mist) — same fix as .hero-headline__lead above, switched
     to white to match the reference. */
  color: var(--text-on-dark);
  /* Was var(--space-2), which left too large a gap under "RELIABLE" —
     pulled in tighter so the sub-line sits closer to the headline. */
  margin-top: -0.35rem;
  text-align: right;
  width: 100%;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

/* ---------- Hero visual ---------- */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: min(100%, 450px);
  margin-left: auto;
}

.hero-visual__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@media (max-width: 1080px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-copy {
    order: 2;
    /* Undo the desktop right-align/shrink-wrap trick — this layout is
       already centered as a whole, so the headline/sub/button should
       each be full-width and centered like normal stacked content. */
    align-items: center;
    width: 100%;
  }

  .hero-visual {
    order: 1;
    width: min(100%, 340px);
    /* Undo the desktop right-align — this layout is stacked and
       centered as a whole, so the graphic should be centered too. */
    margin-left: auto;
    margin-right: auto;
  }

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

  .hero-sub {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .hero-visual {
    width: min(100%, 230px);
  }

  /* Headline now wraps naturally (no forced <br> tags in the markup),
     so on small screens it can flow across 2–3 lines on its own —
     this just keeps that wrapped state tight. */
  .hero-headline {
    line-height: 1.15;
  }
}


.hero .info-cards {
  margin-top: var(--space-5);
  position: relative;
  z-index: 1;
}

/* Slightly lighter weight on the four hero stat-card labels ("Up to
   1,000 Instruments" -> "Reliable and Trusted"). Scoped to the hero so
   it doesn't affect .info-card if that component is reused elsewhere.
   `lighter` steps down one weight from whatever it inherits, so this
   stays correct regardless of the base weight set in components.css. */
.hero .info-card__text {
  font-weight: lighter;
}

/* ---------- About teaser ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-5);
  align-items: center;
}

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

/* Contained in a soft circular backdrop so the abstract mark reads as
   an intentional graphic element rather than a loose, oversized shape
   next to the text. */
.about-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 260px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-visual::before {
  content: '';
  position: absolute;
  inset: 6%;
  background: radial-gradient(circle, var(--ice-100) 0%, var(--ice) 70%, transparent 100%);
  border-radius: 50%;
  z-index: 0;
}

.about-visual svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.about-copy h2 {
  font-size: var(--fs-h3);
  color: var(--brand-navy);
  margin-bottom: var(--space-2);
  /* Lighter than the default heading weight, with a touch of
     letter-spacing so the words read as separated rather than
     merged/clamped together at this size. */
  font-weight: lighter;
  letter-spacing: 0.01em;
}

.about-copy > p {
  color: var(--text-on-light-muted);
  font-size: var(--fs-body);
  margin-bottom: var(--space-3);
}

.about-points {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.about-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--ink);
}

.about-points svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--electric);
  margin-top: 2px;
}

/* ---------- Featured product ---------- */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

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

/* Soft, light brand-blue gradient — deliberately not the heavy dark
   navy treatment used elsewhere, per client feedback ("beautiful,
   professional, not intimidating"). Works as a backdrop for a real
   product photo (see README for the exact file to drop in) with
   object-fit: contain, so a white-background catalog photo sits
   cleanly on top of it. */
.featured-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--ice-100) 0%, var(--brand-pale) 55%, var(--brand-mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.featured-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  position: relative;
  z-index: 1;
  transition: transform var(--dur-slow) var(--ease-out);
}

.featured-visual:hover img {
  transform: scale(1.03);
}

.featured-visual .thumb-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--brand-navy);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-4);
}

.featured-visual .thumb-placeholder svg {
  width: 36px;
  height: 36px;
}

.featured-visual.img-missing img {
  display: none;
}

.featured-visual.img-missing .thumb-placeholder {
  display: flex;
}

.featured-copy .product-category {
  position: static;
  display: inline-flex;
  background: var(--ice-100);
  color: var(--brand-navy);
  border-color: var(--line-light);
  margin-bottom: var(--space-2);
}

.featured-copy h2 {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.featured-copy > p {
  color: var(--text-on-light-muted);
  font-size: var(--fs-body);
  margin-bottom: var(--space-3);
}

.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  /* Pulled in tight so "Read More" sits close beneath the specs,
     instead of floating far below them. */
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--ice-100);
  border-radius: var(--radius-md);
}

.spec-list div dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.spec-list div dd {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Product rows (section-level, cards themselves in components.css) ---------- */
.products-row .section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.products-row .section-head > div {
  max-width: 640px;
}

/* Product cards: drop the backdrop color inside each thumbnail box,
   lighten the product name weight, and enlarge the product photo
   within its box (transform only, so the thumb box's height/width
   are untouched). */
.product-grid .product-thumb {
  background: none;
}

.product-grid .product-thumb img {
  transform: scale(1.15);
  transform-origin: center;
}

.product-grid .product-name {
  font-weight: lighter;
}

/* Tighten the gap between the two back-to-back product-grid sections
   (Diagnostic Range and Advanced Systems). */
.products-row:has(+ .products-row) {
  padding-bottom: var(--space-3);
}

.products-row + .products-row {
  padding-top: var(--space-3);
}

/* ---------- Mission / Vision / Values ----------
   Was a dark navy gradient — client feedback was that it felt heavy
   and intimidating. Replaced with a calm, soft light background. */
.mvv-section {
  background: linear-gradient(180deg, var(--ice) 0%, var(--ice-100) 100%);
}

/* ---------- About swirl visual keyframes ---------- */
.swirl-a,
.swirl-b {
  transform-box: fill-box;
  transform-origin: center;
}

.swirl-a {
  animation: spin 34s linear infinite;
}

.swirl-b {
  animation: spin-reverse 46s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .swirl-a,
  .swirl-b {
    animation: none;
  }
}