/* ═══════════════════════════════════════════════════════════════════
   SELFYDE — hero v2 (candidate)
   Reference: brtlst.warsaw — flat black, hard hairlines, zero motion.
   Loaded only by index.html; nothing below the hero is touched.
   (Was the /v2.html candidate until it was promoted to the homepage;
   the previous homepage is kept at backup/index-old.html.)

   Two jobs on the first screen:
     left  — the claim and the button
     right — the mechanism, drawn rather than explained, because the
             audience does not read long copy
   and under both, the three papers the claim actually rests on. Every
   number on this screen comes from the real engine (4 zones, 5 scores,
   23 sections, 6 references) — nothing here is decorative arithmetic.
   ═══════════════════════════════════════════════════════════════════ */

.hv {
  /* One face on the whole page. The grotesque that used to live here was
     the only sans on the site, and it was never loaded as a webfont — the
     headline rendered as Helvetica on macOS, Segoe UI on Windows and
     Roboto on Android. Space Mono is the voice everywhere else; the hero
     speaks it too now. Kept as a variable so the two sizing blocks below
     stay readable about what they are tuning. */
  --font-clinical: var(--font-mono);

  /* flat black sits above the page-wide blueprint grid and kills it here */
  position: relative;
  z-index: 1;
  background: #000;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.hv__inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: calc(72px + clamp(30px, 5vh, 62px)) var(--pad) clamp(34px, 5vh, 62px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* ── eyebrow ─────────────────────────────────────────────────────── */

.hv__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hv__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #fff;
  flex: none;
}

/* ── headline ────────────────────────────────────────────────────── */

/* Matches the h1 convention the rest of the site already uses: mono, caps,
   700, positive tracking. Space Mono sets roughly 40% wider than the
   grotesque did at the same size, so the ceiling comes down from 40px —
   at the old size the longest line ran past the column. */
.hv__title {
  margin-top: clamp(18px, 2.4vh, 26px);
  font-family: var(--font-clinical);
  font-weight: 700;
  font-size: clamp(19px, 2.25vw, 30px);
  line-height: 1.32;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.hv__title .dim { color: rgba(255, 255, 255, 0.55); }

.hv__sub {
  margin-top: clamp(16px, 2.2vh, 22px);
  max-width: 50ch;
  font-family: var(--font-clinical);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

/* ── call to action ──────────────────────────────────────────────── */

.hv__cta {
  margin-top: clamp(22px, 3vh, 32px);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.hv__btn {
  padding: 21px 40px;
  font-size: 14px;
  letter-spacing: 0.2em;
  background: #fff;
  color: #000;
  border-color: #fff;
}
.hv__btn:hover { background: #fff; color: #000; border-color: #fff; opacity: 0.82; }

.hv__note {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}
.hv__note a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}

.hv__trust {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.42);
}

/* ── the scan diagram ────────────────────────────────────────────── */

.hv__scan {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: clamp(20px, 2.4vw, 30px);
}
/* canvas and overlay share one box and one coordinate space, so the static
   cuts stay welded to the brow, under-eye and nose-base lines as it turns */
.hv__plate {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 252;
}
.hv__mesh,
.hv__cuts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hv__cuts .cut path {
  fill: none;
  stroke: url(#cutfade);
  stroke-width: 1;
}
.hv__cuts text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.hv__cuts .znum text { fill: rgba(207, 224, 255, 0.5); }
.hv__cuts .zname text { fill: #eaf1ff; }

.hv__scan-legend {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 18px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}
.hv__scan-legend b { color: rgba(255, 255, 255, 0.4); margin-right: 7px; font-weight: 400; }

.hv__scan-note {
  margin-top: 15px;
  font-family: var(--font-clinical);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
}
.hv__scan-note b { color: rgba(255, 255, 255, 0.8); font-weight: 700; }

/* ── the papers ──────────────────────────────────────────────────── */

.hv__science { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hv__science-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 132px repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.hv__science-lead {
  display: flex;
  align-items: center;
  padding: 20px 22px 22px 0;
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.hv__science a {
  padding: 20px 24px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-clinical);
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  transition: background 0.2s, color 0.2s;
}
.hv__science a:hover { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.85); }
.hv__science a b { color: #fff; font-weight: 700; }
.hv__science a i {
  display: block;
  margin-top: 9px;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.36);
}
.hv__science a i::after {
  content: "  ↗";
  color: rgba(255, 255, 255, 0.45);
}

/* ── tablet ──────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hv__inner { grid-template-columns: 1fr; gap: 30px; }
  .hv__scan { order: 2; }
  .hv__plate { max-width: 460px; }
  .hv__science-inner { grid-template-columns: 1fr 1fr; }
  .hv__science-lead {
    grid-column: 1 / -1;
    max-width: none;
    padding: 16px 0 0;
  }
  .hv__science a:nth-of-type(1) { border-left: 0; padding-left: 0; }
}

/* ── phone ───────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .hv__inner { padding-top: calc(72px + 30px); }
  /* 24 mono caps at 0.6em each is the widest line; anything over ~20px
     runs off a 390px screen. */
  .hv__title { font-size: clamp(15px, 4.4vw, 20px); }
  .hv__cta { gap: 16px; }
  .hv__btn { width: 100%; justify-content: center; padding: 23px 20px; }
  .hv__note { font-size: 11.5px; letter-spacing: 0.1em; }
  .hv__scan-legend { grid-template-columns: 1fr; }
  .hv__science-inner { grid-template-columns: 1fr; }
  .hv__science a {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 16px 0 18px;
  }
  .hv__science a:nth-of-type(1) { padding-left: 0; }
  .hv__science-lead { padding: 18px 0 4px; }
}