/* ============================================================
   Cognuum — HERO
   Two zones on desktop: the constellation animation (#glyph,
   anchored to the .glyph-wrap box) and the manifesto copy.
   ============================================================ */

.hero{
  position:absolute;
  top:50%; left:0; right:0;
  transform:translateY(-64%);
  display:flex; align-items:center; justify-content:center;
  gap:84px;
  padding:0 48px;
  z-index:10;
}

/* spacer that defines where the C settles on desktop */
.glyph-wrap{
  position:relative;
  width:480px; height:480px;
  flex:0 0 auto;
}

/* the animated canvas. Desktop: full-stage (absolute). Tablet/mobile:
   it becomes a contained, centered block (see responsive.css) — the
   constellation script keys its math off this computed position. */
#glyph{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  z-index:2;
  pointer-events:none;
}

/* ----- manifesto copy ----- */
.copy{ max-width:760px; position:relative; }

/* subtle frosted backing — same language as Section 2's copy; lifts the headline
   off the constellation for readability with no visible box/border */
.copy::before{
  content:"";
  position:absolute;
  inset:-46% -20%;
  z-index:-1;
  pointer-events:none;
  background:var(--copy-backing-hero);
  -webkit-backdrop-filter:blur(13px);
  backdrop-filter:blur(13px);
  -webkit-mask:radial-gradient(95% 74% at 42% 50%, #000 32%, rgba(0,0,0,0) 76%);
  mask:radial-gradient(95% 74% at 42% 50%, #000 32%, rgba(0,0,0,0) 76%);
}

.eyebrow{
  font-size:24px;
  font-weight:400;
  letter-spacing:0.46em;
  color:var(--text-primary);
  margin-bottom:22px;
}

h1{
  font-size:76px;
  line-height:0.98;
  font-weight:400;
  letter-spacing:-0.02em;
  text-wrap:balance;
  /* brushed-metal headline */
  background:var(--gradient-headline);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  margin-bottom:34px;
}
h1 .dot{
  color:var(--magenta);
  -webkit-text-fill-color:var(--dot-fill);
  text-shadow:var(--dot-shadow);
}

/* standout tagline above the supporting copy */
.hero-tagline{
  font-size:22px;
  font-weight:400;
  letter-spacing:-0.006em;
  color:var(--ink-wordmark);
  margin-bottom:30px;
}

.sub{
  font-size:30px;
  line-height:1.36;
  font-weight:400;
  color:var(--ink-hero-sub);
  letter-spacing:0.002em;
}

/* understated, institutional CTA */
.cta{
  display:inline-flex; align-items:center;
  margin-top:34px;
  padding:12px 26px;
  font-size:14px; font-weight:400; letter-spacing:0.04em;
  color:var(--cta-ink);
  background:transparent;
  border:1px solid var(--cta-border);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease;
}
.cta:hover{
  border-color:var(--cta-border-hover);
  color:var(--cta-ink-hover);
}
/* two equal hero CTAs side by side */
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-ctas .cta{ margin-top:34px; }
.cta-ghost{ border-color:transparent; }
.cta-ghost:hover{ border-color:var(--cta-border); }

/* primary hero CTA — solid, inverted: light pill + dark ink on the dark theme,
   flips to dark pill + light ink on the light theme. Higher presence than the
   outlined institutional CTA used elsewhere. */
.cta-begin{
  padding:14px 40px;
  font-size:15px; font-weight:500; letter-spacing:0.03em;
  background:#f4f2ee; color:#0a0a0d;
  border:1px solid #f4f2ee;
  box-shadow:0 1px 30px rgba(244,242,238,0.14);
  transition:background .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.cta-begin:hover{
  background:#ffffff; color:#0a0a0d; border-color:#ffffff;
  box-shadow:0 2px 40px rgba(255,255,255,0.22);
}
.cta-begin:active{ transform:translateY(1px); }
body.light .cta-begin{
  background:#16171b; color:#f4f2ee; border-color:#16171b;
  box-shadow:0 1px 30px rgba(20,21,24,0.12);
}
body.light .cta-begin:hover{
  background:#000; color:#f4f2ee; border-color:#000;
  box-shadow:0 2px 40px rgba(20,21,24,0.2);
}