/* ═══════════════════════════════════════════════════════════════════════
   HERO v4 — no photograph.

   Three attempts at a photo hero (washed stock, a scrolling panel table, a
   tissue macro) all failed for the same reason: a borrowed image was doing
   work the type should do. This is type-led. One signature: a real ECG
   horizon drawn in arterial red with a live pulse travelling along it.
   Everything else stays quiet.
   ═══════════════════════════════════════════════════════════════════════ */

.cg-hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--cg-vein,#0B1F1D);color:var(--cg-bone,#EDE8DF);
  overflow:hidden;isolation:isolate;
}

/* Depth without an image: one soft arterial bloom, low and off-centre. */
.cg-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:120vw;height:120vh;left:50%;top:44%;transform:translate(-42%,-50%);
  background:radial-gradient(closest-side,rgba(232,68,47,.16),rgba(232,68,47,.05) 46%,transparent 72%);
  animation:cg-bloom 14s ease-in-out infinite alternate;
}
@keyframes cg-bloom{
  from{opacity:.65;transform:translate(-42%,-50%) scale(1)}
  to{opacity:1;transform:translate(-38%,-52%) scale(1.09)}
}

/* Faint graph substrate — the paper every result is printed on. */
.cg-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(rgba(237,232,223,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(237,232,223,.5) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(110% 80% at 26% 44%,#000 12%,transparent 74%);
  mask-image:radial-gradient(110% 80% at 26% 44%,#000 12%,transparent 74%);
}

.cg-hero-copy{
  position:relative;z-index:3;width:100%;max-width:1480px;margin:0 auto;
  padding:clamp(140px,16vh,190px) clamp(28px,5vw,72px) clamp(170px,20vh,220px);
}
.cg-hero-inner{max-width:min(72ch,74%)}

.cg-kicker{
  font-family:var(--cg-mono,monospace);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(237,232,223,.5);
  display:flex;align-items:center;gap:14px;margin:0 0 clamp(26px,3.8vh,38px);
}
.cg-kicker::before{content:"";width:32px;height:1px;background:var(--cg-arterial,#E8442F)}

.cg-hero h1{
  font-family:var(--cg-display,Georgia,serif);font-weight:400;
  font-size:clamp(50px,7.6vw,126px);line-height:.92;letter-spacing:-.034em;
  margin:0;color:var(--cg-bone,#EDE8DF);
}
.cg-hero h1 .l1{display:block;white-space:nowrap}
.cg-hero h1 em{display:block;font-style:italic;color:var(--cg-arterial,#E8442F)}

.cg-hero-lede{
  font-family:var(--cg-body,system-ui,sans-serif);
  font-size:clamp(16px,1.12vw,18.5px);line-height:1.66;
  color:rgba(237,232,223,.7);max-width:46ch;margin:clamp(26px,3.4vh,36px) 0 0;
}
.cg-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(30px,4vh,42px)}
.cg-btn{
  font-family:var(--cg-body,system-ui,sans-serif);font-size:14px;font-weight:500;
  padding:15px 30px;border-radius:2px;text-decoration:none;display:inline-flex;align-items:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s,border-color .3s;
}
.cg-btn-solid{background:var(--cg-arterial,#E8442F);color:#fff;border:1px solid var(--cg-arterial,#E8442F)}
.cg-btn-solid:hover{transform:translateY(-2px);background:#F2573F;border-color:#F2573F}
.cg-btn-line{background:transparent;color:var(--cg-bone,#EDE8DF);border:1px solid rgba(237,232,223,.2)}
.cg-btn-line:hover{transform:translateY(-2px);border-color:var(--cg-bone,#EDE8DF)}

/* ── The signature: an ECG horizon with a live pulse ──────────────────── */
.cg-ecg{
  position:absolute;left:0;right:0;bottom:clamp(84px,11vh,124px);
  z-index:1;height:clamp(110px,15vh,190px);width:100%;pointer-events:none;
}
.cg-ecg svg{width:100%;height:100%;display:block;overflow:visible}
.cg-ecg .base{fill:none;stroke:rgba(237,232,223,.13);stroke-width:1}
.cg-ecg .trace{
  fill:none;stroke:var(--cg-arterial,#E8442F);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(232,68,47,.5));
  stroke-dasharray:4200;stroke-dashoffset:4200;
  animation:cg-draw-trace 3.4s cubic-bezier(.22,.61,.36,1) .5s forwards;
}
@keyframes cg-draw-trace{to{stroke-dashoffset:0}}
.cg-ecg .pulse{fill:#fff;filter:drop-shadow(0 0 8px rgba(232,68,47,.95))}

/* ── Panel strip ──────────────────────────────────────────────────────── */
.cg-strip{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  border-top:1px solid rgba(237,232,223,.1);
  background:rgba(7,21,19,.72);backdrop-filter:blur(8px);
  padding:15px 0 16px;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.cg-strip-label{
  position:absolute;left:clamp(28px,5vw,72px);top:15px;z-index:2;
  font-family:var(--cg-mono,monospace);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cg-arterial,#E8442F);
  background:linear-gradient(90deg,rgba(7,21,19,.98) 74%,transparent);padding-right:28px;
}
.cg-strip-track{display:inline-flex;animation:cg-strip 54s linear infinite;padding-left:34vw}
.cg-strip-track span{
  font-family:var(--cg-mono,monospace);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(237,232,223,.42);
  display:inline-flex;align-items:center;gap:30px;padding-right:30px;
}
.cg-strip-track span::after{content:"/";color:var(--cg-arterial,#E8442F);opacity:.75}
@keyframes cg-strip{to{transform:translateX(-50%)}}

/* ── Entrance ─────────────────────────────────────────────────────────── */
.cg-hero .cg-kicker,.cg-hero h1,.cg-hero-lede,.cg-hero-actions{
  opacity:0;transform:translateY(20px);
  animation:cg-rise 1s cubic-bezier(.22,.61,.36,1) forwards;
}
.cg-hero h1{animation-delay:.10s}
.cg-hero-lede{animation-delay:.26s}
.cg-hero-actions{animation-delay:.38s}
.cg-strip{opacity:0;animation:cg-rise 1s ease .7s forwards}
@keyframes cg-rise{to{opacity:1;transform:none}}

@media (max-width:1024px){
  .cg-hero{min-height:auto}
  .cg-hero-copy{padding:126px 24px 150px}
  .cg-hero-inner{max-width:100%}
  .cg-hero h1 .l1{white-space:normal}
  .cg-ecg{bottom:70px;height:96px}
}
@media (prefers-reduced-motion:reduce){
  .cg-hero::before,.cg-strip-track,.cg-ecg .trace,.cg-ecg .pulse{animation:none}
  .cg-ecg .trace{stroke-dashoffset:0}
  .cg-hero .cg-kicker,.cg-hero h1,.cg-hero-lede,.cg-hero-actions,.cg-strip{opacity:1;transform:none;animation:none}
}

/* ── v4 corrections ───────────────────────────────────────────────────── */
/* The QRS spikes were tall enough to collide with the action buttons.
   Shorten the trace and drop it, then give the copy room above it. */
.cg-ecg{bottom:clamp(74px,9vh,96px);height:clamp(84px,10vh,120px)}
.cg-hero-copy{padding-bottom:clamp(210px,25vh,265px)}

/* The scrolling panel names were passing under the label rather than behind
   an opaque edge. Make the label a solid plate. */
.cg-strip-label{
  background:#071513;padding:0 26px 0 0;
  box-shadow:26px 0 18px -14px rgba(7,21,19,.98);
}
.cg-strip{background:#071513}