/*
 * Hero section:
 * - Column: 1252px wide, centered (130px margins on 1512px viewport)
 * - Hero starts 27px below nav (corner bracket at that point)
 * - Hero content padding-left: 38px (logo/text starts at col-left + 38px)
 * - Heading box 1: 488px wide, 105px tall
 * - Heading font: ~60px Inter 800
 */

.hero {
  position: relative;
  margin-top: 27px;
  padding: 32px 38px 23px;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255,255,255,0.2);
  pointer-events: none;
}

/* Orange corner brackets — L-shape from the shared .bracket primitive
   (css/brackets.css); these rules only position them on the tram lines. */
.hero__corner--bl {
  bottom: 0; left:  var(--rail-edge);
}
.hero__corner--br {
  bottom: 0; right: var(--rail-edge);
}

.hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 26px;
}

.hero__line {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 4.5rem;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--white);
  padding: 20px 18px 21px;
  width: fit-content;
  position: relative;
}

.hero__line--1 {
  z-index: 1;
}

.hero__line--2 {
  z-index: 0;
}

.hero__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 38px;
  opacity: 0.9;
}

.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Buttons */
.btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 22px 13px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s;
  position: relative;
  white-space: nowrap;
}
.btn:hover { opacity: 0.8; }

.btn--solid {
  background: var(--white);
  color: var(--black);
  border: 1px solid rgba(0,0,0,0.12);
}

.btn--solid::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket-w) var(--bracket)  no-repeat;
}

/* Outline button: corner brackets via pseudo-element, pushed 2px outward */
.btn--outline {
  background: rgba(255,255,255,0.10);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.20);
}

.btn--outline::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) top    left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--white), var(--white)) top    left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--white), var(--white)) top    right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--white), var(--white)) top    right / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--white), var(--white)) bottom left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--white), var(--white)) bottom left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--white), var(--white)) bottom right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--white), var(--white)) bottom right / var(--bracket-w) var(--bracket)  no-repeat;
}

/* ── Product page hero ───────────────────────────────────────────────────
 * Staggered heading: "Accelerate" left, "hardware testing" centred, "at
 * scale" right. The BOOK A DEMO button is left-aligned on the same row as
 * the "at scale" line.
 */
/* Taller hero to match the index page's spacious feel; the background image
   (sized to the hero's bottom in product.html) grows with it. */
.hero--product {
  padding-top: 110px;
  padding-bottom: 150px;
}

.hero__content--product {
  position: relative;
}

.hero__heading--product {
  align-items: stretch;   /* let each line position itself via align-self */
  text-align: left;
  width: 100%;
  margin-bottom: 0;
}

/* Product h1 is Geist Medium 120 per Figma (the shared .hero__line is 72,
   the home-page size). */
.hero__heading--product .hero__line { font-size: 120px; }

.hero__line--left   { align-self: flex-start; }
.hero__line--center { align-self: center; }
.hero__line--right  { align-self: flex-end; }

.hero__demo-btn {
  position: absolute;
  left: 18px;                          /* lines up with the "Accelerate" text */
  bottom: calc((120px + 41px) / 2);    /* centre on the last line's vertical band (line text + padding) */
  transform: translateY(50%);
}

/* ── Industry page hero ──────────────────────────────────────────────────
 * Left-aligned stack: H1 (Geist Medium 72), supporting subheading (Geist
 * Regular 18), then a BOOK A DEMO button — all flush left, in normal flow.
 */
.hero--industry {
  min-height: 782px;
  padding-top: 110px;
  padding-bottom: 150px;
}

/* The logos section (z-index:2) overlaps the hero's bottom edge by 60px and,
   being later in the DOM, its fade paints over the bottom corner brackets at
   an equal z-index. Lift them one layer above the fade. */
.hero--industry .hero__corner--bl,
.hero--industry .hero__corner--br {
  z-index: 3;
}

.hero__content--industry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero__heading--industry {
  font-family: var(--font-sans);
  font-weight: 500;            /* Geist Medium */
  font-size: 72px;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 24px;
}

.hero__subheading {
  font-family: var(--font-sans);
  font-weight: 400;            /* Geist Regular */
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  max-width: 640px;
  margin: 0 0 32px;
}

/* ── Industry hero stat strip ────────────────────────────────────────────
 * A 200px-tall band pinned to the hero bottom, spanning the tram lines and
 * split into three equal cells. The top edge is the shared full-bleed rule;
 * interior borders divide the thirds; 8px orange squares mark every point
 * where the rule crosses a vertical line (the two tram edges + two interior
 * dividers).
 */
.hero__stats {
  position: absolute;
  /* Left/right edges sit exactly on the vertical tram rules (same var the
     hero corner brackets use), so they track the viewport-dependent rail
     position and the three cells flex with it. */
  left: var(--rail-edge);
  right: var(--rail-edge);
  bottom: 0;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  z-index: 2;
}

/* Top divider — modelled on the site's rule lines (full-bleed, white@20%). */
.hero__stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0 36px;
}

/* Interior vertical dividers between the thirds (outer edges are the page
   tram lines). */
.hero__stat + .hero__stat {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.hero__stat-value {
  font-family: var(--font-sans);
  font-weight: 400;            /* Geist Regular */
  font-size: 95px;
  line-height: 1;
  color: var(--white);
}

.hero__stat-label {
  font-family: var(--font-pixel);   /* Geist Pixel (square) */
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

/* Orange squares at the four rule/line crossings. */
.hero__stats-node {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  background: var(--orange);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.hero__stats-node--1 { left: 0; }
.hero__stats-node--2 { left: 33.333%; }
.hero__stats-node--3 { left: 66.667%; }
.hero__stats-node--4 { left: 100%; }

/* ── Full-height heroes (desktop) ─────────────────────────────────────────
 * Product, blog and industry heroes fill the viewport: nav + hero = 100vh, so
 * the section below (or, on industry, the customer-logo strip) starts exactly
 * at the fold. The 27px is the hero's margin-top below the 64px nav (see the
 * .hero rule at the top of this file). Content is vertically centred.
 *
 * Scoped to >1300px so mobile.css (max-width:1300px) keeps its own compact
 * hero. Industry omits min-height here: its exact height is finished in JS
 * (industry.html) because it must leave room for the logo strip pinned at the
 * foot of the first screen — only its centring/padding live here.
 */
@media (min-width: 1301px) {
  .hero--product {
    min-height: calc(100vh - var(--nav-height) - 27px);
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero--industry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 64px;
    /* Clear the 200px stat strip pinned at the hero foot, so centred content
       sits in the space above it. */
    padding-bottom: 200px;
  }
}