/* ============================================================
   Cognuum — HOME HERO  ("Finance with Memory")
   The landing page's first fold, restructured as a single screen:
     · a split brushed-metal statement  — Finance · with · Memory.
     · a left manifesto column + two CTAs
     · the rotating dot-globe, centred, behind everything
     · the four-lens row (Atlas / Lattice / Council / Portfolio)
     · a quiet foot strip

   THREE-INTENSITY GRADIENT SYSTEM (Remi's governing rule)
     · hero visual (the globe) ....... 100% colour   → constellation.js neon palette
     · lens labels + underlines ...... 70–85%          → the --grad-* fills below
     · background washes / glows ..... 5–12%           → .hh-home background layers

   SCOPING. Every token and rule here is namespaced under .hh-home so
   NOTHING leaks into Section 2, the footer sheet or the light-mode value
   map. The palette Remi supplied as :root lives on .hh-home instead, for
   exactly that reason. index.html links home.css (BEFORE theme.css, so
   theme.css stays the last local stylesheet — the www page contract
   requires it); the parked coming-soon page links it too, to REFLECT this
   exact hero fold (its own parked-only bits live in coming-soon.css). No
   other page links it, so Section 2 and the shell are unaffected.
   ============================================================ */

/* ============================================================
   LENS PALETTE + GRADIENTS — promoted to :root so BOTH the hero
   fold (.hh-home) and the Section-2 narrative (.problem, styled in
   problem.css) draw the four lenses from ONE source. Only index.html
   links this file, so nothing else on the site is affected.
   ============================================================ */
:root{
  --hh-atlas-cyan:#08CCFD;      --hh-atlas-blue:#3B82F6;
  --hh-lattice-indigo:#5B5FF0;  --hh-lattice-violet:#7C3AED;  --hh-lattice-purple:#A855F7;
  --hh-council-violet:#C026D3;  --hh-council-magenta:#ED1280; --hh-council-pink:#FF4D8D;
  --hh-portfolio-amber:#F59E0B; --hh-portfolio-gold:#FBBF24;  --hh-portfolio-yellow:#FDE047;

  /* the four lens gradients — labels, underlines, Section-2 titles + nav */
  --grad-atlas:linear-gradient(90deg,var(--hh-atlas-cyan),var(--hh-atlas-blue));
  --grad-lattice:linear-gradient(90deg,var(--hh-lattice-indigo),var(--hh-lattice-violet),var(--hh-lattice-purple));
  --grad-council:linear-gradient(90deg,var(--hh-council-violet),var(--hh-council-magenta),var(--hh-council-pink));
  --grad-portfolio:linear-gradient(90deg,var(--hh-portfolio-amber),var(--hh-portfolio-gold),var(--hh-portfolio-yellow));
  --grad-decisions:linear-gradient(90deg,var(--hh-lattice-violet),var(--hh-council-violet));
  /* Cognuum stage — the cyan of the logo C */
  --grad-cognuum:linear-gradient(90deg,var(--hh-atlas-cyan),var(--hh-atlas-blue));
}

.hh-home{
  /* — Remi's palette (scoped inks + field) — */
  --hh-bg-black:#030407;
  --hh-bg-charcoal:#080A11;
  --hh-text:#F4F5F7;
  --hh-text-2:#A5ACB8;
  --hh-text-3:#707887;

  /* the cyan full-stop on "Memory." */
  --hh-dot:var(--hh-atlas-cyan);

  /* quiet structure inks */
  --hh-border:rgba(244,245,247,0.20);
  --hh-border-strong:rgba(244,245,247,0.42);
  --hh-divider:rgba(244,245,247,0.10);
  --hh-rule:rgba(244,245,247,0.32);

  /* — the deep-space field: near-black + faint lens washes (5–12%) — */
  background:
    radial-gradient(58% 52% at 18% 42%, rgba(8,204,253,0.06) 0%, rgba(8,204,253,0) 60%),
    radial-gradient(56% 58% at 50% 46%, rgba(124,58,237,0.11) 0%, rgba(124,58,237,0) 62%),
    radial-gradient(52% 52% at 82% 56%, rgba(237,18,128,0.08) 0%, rgba(237,18,128,0) 60%),
    radial-gradient(62% 40% at 62% 94%, rgba(245,158,11,0.05) 0%, rgba(245,158,11,0) 60%),
    radial-gradient(140% 120% at 50% 122%, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #080A11 0%, #050609 46%, #030407 100%),
    var(--hh-bg-black);
}

/* the base stage's conic sheen is tuned for the old obsidian surface; on this
   darker field it bands, so it is quietened here (grain stays). */
.hh-home::before{ opacity:0.32; }

/* the top bar is hidden on load (topbar.css), so the hero no longer needs the
   full fixed-bar clearance above the statement — halve it (was 96/12vh/128). */
.stage.hh-home{ padding-top:clamp(48px, 6vh, 64px); }

/* ---------- the content column ---------- */
/* NOT positioned and NOT transformed on purpose: as a flex item of .stage it
   still takes z-index (lifting the whole hero above the stage grain/sheen), but
   it does NOT become the containing block for the absolute #glyph inside it —
   so the canvas keeps anchoring to .stage and filling the full viewport, which
   is the geometry constellation.js measures. */
.hh{
  flex:1 0 auto;
  width:100%;
  z-index:10;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  grid-template-areas:"statement" "lead" "lenses" "foot";
  padding:clamp(6px,2vh,26px) var(--pad-x) clamp(18px,3vh,34px);
  gap:clamp(8px,1.6vh,22px);
}

/* ============ 1 · the split statement ============ */
.hh-statement{
  grid-area:statement;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(12px,2.4vw,44px);
  margin:0;
  font-weight:400;
  line-height:0.92;
  white-space:nowrap;
}
.hh-word{
  /* nowrap + space-between: keep the coefficient low enough that Finance + with
     + Memory. never overflow the gutters at the 1200px desktop floor.
     (sized down 25% from the original 8.4vw / 148px on Remi's note) */
  font-size:clamp(32px,6.3vw,111px);
  letter-spacing:-0.03em;
  /* brushed-metal fill — reuses the base headline gradient so it themes */
  background:var(--gradient-headline);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* the tight line-height (0.92) sits the descender of the "y" and the period
     below the painted box, so background-clip:text leaves them unfilled and they
     read as clipped. Extend the box downward and pull the layout back up by the
     same amount, so the tails are painted with zero layout shift. */
  padding-bottom:0.16em;
  margin-bottom:-0.16em;
}
.hh-with{
  flex:0 0 auto;
  font-size:clamp(12px,1vw,18px);
  font-weight:400;
  letter-spacing:0.5em;
  text-transform:uppercase;
  color:var(--hh-text-2);
}
.hh-dot{
  color:var(--hh-dot);
  -webkit-text-fill-color:var(--hh-dot);
  text-shadow:0 0 26px rgba(8,204,253,0.55);
}

/* ============ 2 · the manifesto + CTAs (left) ============ */
.hh-lead{
  grid-area:lead;
  align-self:start;
  justify-self:start;
  max-width:clamp(340px, 40vw, 540px);
  margin-top:clamp(8px,3vh,42px);
  position:relative;
  z-index:10;
}
.hh-headline{
  margin:0 0 clamp(14px,2vh,22px);
  font-size:clamp(26px, 2.5vw, 40px);
  line-height:1.08;
  font-weight:400;
  letter-spacing:-0.012em;
  color:var(--hh-text);
}
.hh-sub{
  margin:0 0 clamp(24px,4vh,40px);
  font-size:clamp(15px, 1.15vw, 19px);
  line-height:1.5;
  font-weight:400;
  color:var(--hh-text-2);
}
/* stacked, and sized as one tidy column: stretch to the widest button so both
   share the same width, and a shared min-height so the icon button and the text
   button are the same height (left AND right edges line up). */
.hh-ctas{ display:flex; flex-direction:column; align-items:stretch; gap:14px; width:max-content; max-width:100%; }
.hh-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-sizing:border-box; min-height:52px;
  text-decoration:none; white-space:nowrap;
  padding:13px 26px; border-radius:3px;
  font-size:15px; font-weight:500; letter-spacing:0.01em;
  transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.hh-cta:active{ transform:translateY(1px); }
.hh-cta-primary{
  background:var(--hh-text); color:#05060a;
  border:1px solid var(--hh-text);
  box-shadow:0 1px 30px rgba(244,245,247,0.14);
}
.hh-cta-primary:hover{ background:#fff; border-color:#fff; box-shadow:0 2px 44px rgba(255,255,255,0.24); }
.hh-cta-arrow{ font-size:16px; line-height:1; transition:transform .25s ease; }
.hh-cta-primary:hover .hh-cta-arrow{ transform:translateX(3px); }
.hh-cta-ghost{
  background:transparent; color:var(--hh-text);
  border:1px solid var(--hh-border);
}
.hh-cta-ghost:hover{ border-color:var(--hh-border-strong); }
.hh-play{ display:inline-flex; width:22px; height:22px; }
.hh-play svg{ width:22px; height:22px; }
.hh-play circle{ fill:none; stroke:currentColor; stroke-width:1.4; opacity:0.75; }
.hh-play path{ fill:currentColor; }

/* ============ 3 · the four-lens row ============ */
.hh-lenses{ grid-area:lenses; position:relative; z-index:10; }
.hh-lenses-head{
  margin:0 0 clamp(16px,2.4vh,26px);
  font-size:clamp(11px,0.85vw,13px);
  font-weight:400;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--hh-text-3);
}
.hh-decisions{
  background:var(--grad-decisions);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:500;
}
.hh-lens-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.hh-lens{
  padding:0 clamp(16px,2vw,36px);
  border-left:1px solid var(--hh-divider);
}
.hh-lens:first-child{ border-left:0; padding-left:0; }
.hh-lens-q{
  margin:0 0 clamp(12px,1.8vh,18px);
  font-size:clamp(17px,1.5vw,24px);
  line-height:1.12;
  font-weight:400;
  letter-spacing:-0.012em;
  color:var(--hh-text);
}

/* the lens label: gradient text + a short gradient underline (70–85% band).
   Keeps the .fw-a.<family> classes so problem.js still wires each label to
   its Section-2 stage (cursor:pointer + click-to-scroll). */
.hh-lens .fw-a{
  display:inline-block; position:relative;
  padding-bottom:11px;
  font-size:12px; font-weight:600; letter-spacing:0.34em; text-transform:uppercase;
  opacity:1;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hh-lens .fw-a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:36px; height:2px; border-radius:2px;
  opacity:0.85;                       /* underline sits in the 70–85% band */
}
.hh-lens .fw-a.info{ background-image:var(--grad-atlas); }
.hh-lens .fw-a.info::after{ background:var(--grad-atlas); }
.hh-lens .fw-a.reality{ background-image:var(--grad-lattice); }
.hh-lens .fw-a.reality::after{ background:var(--grad-lattice); }
.hh-lens .fw-a.narrative{ background-image:var(--grad-council); }
.hh-lens .fw-a.narrative::after{ background:var(--grad-council); }
.hh-lens .fw-a.exposure{ background-image:var(--grad-portfolio); }
.hh-lens .fw-a.exposure::after{ background:var(--grad-portfolio); }

/* ============ 4 · the foot strip ============ */
.hh-foot{
  grid-area:foot;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  margin-top:clamp(16px,3vh,30px);
}
.hh-foot-motto{
  display:flex; align-items:center; gap:14px;
  font-size:clamp(10px,0.8vw,12px);
  letter-spacing:0.26em; text-transform:uppercase;
  color:var(--hh-text-3);
}
.hh-foot-motto::before{
  content:""; display:inline-block;
  width:26px; height:1px; background:var(--hh-rule);
}
.hh-foot-words{ display:flex; gap:clamp(16px,2vw,36px); }
.hh-foot-words span{
  font-size:clamp(10px,0.8vw,12px);
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--hh-text-3);
}

/* ============ the globe ============
   #glyph is the full-stage canvas; .glyph-wrap is the invisible slot whose
   box constellation.js reads to place + size the sphere. Centre it, sized to
   the SMALLER of width and height so it never overflows a short window. */
.hh-home .glyph-wrap{
  position:absolute;
  left:50%; top:47%;
  transform:translate(-50%,-50%);
  width:clamp(320px, min(44vw, 60vh), 640px);
  aspect-ratio:1; height:auto;
  z-index:2;
  pointer-events:none;
}
/* the globe container — full-stage host on desktop; the canvas fills it and the
   core mark centres in it. On mobile it becomes the contained in-flow block. */
.hh-home .hh-globe{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
}
.hh-home #glyph{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:2;
  pointer-events:none;
}

/* the gravity-core double-C: crisp vector at the globe's exact centre, sitting
   just behind the dot field so the sphere reads as orbiting it. It fades out as
   the page scrolls and the top-bar mark fades in — one C at a time. On desktop
   it sits at the sphere centre (50%/47%, matching .glyph-wrap) and is sized to a
   third of the globe diameter; the mobile block re-centres + resizes it. */
.hh-home .hh-core{
  position:absolute;
  left:50%; top:47%;
  transform:translate(-50%,-50%);
  width:calc(clamp(320px, min(44vw, 60vh), 640px) * 0.33);
  height:auto;
  z-index:1;                       /* behind #glyph (z-index:2) → dots orbit in front */
  overflow:visible;
  pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(8,204,253,0.40)) drop-shadow(0 0 44px rgba(124,58,237,0.22));
  transition:opacity .5s ease;
}
.hh-core-o{ fill:#424851; opacity:0.55; }   /* outer C — faint graphite */
.hh-core-i{ fill:#08ccfd; }                  /* inner C — brand cyan */
/* scroll handoff: quiet the centre mark as the top bar (and its mark) arrive */
body.home-hero.page-scrolled .hh-home .hh-core{ opacity:0; }

/* ============================================================
   TABLET / MOBILE  (<=1199px)
   One centred column: statement → globe (contained) → manifesto →
   lenses (2×2 / 1-col) → foot. #glyph becomes a relative in-flow block,
   which is exactly the switch constellation.js reads to run its
   contained-field path.
   ============================================================ */
@media (max-width:1199px){
  .hh-home{ align-items:stretch; }        /* beat responsive.css's .stage{align-items:center} */
  .hh{
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
    gap:clamp(18px,3.4vh,34px);
    padding:clamp(6px,2vh,18px) 40px clamp(30px,5vh,52px);
  }
  .hh-statement{
    order:1;
    flex-direction:column; align-items:center;
    gap:2px; white-space:normal; line-height:0.96;
  }
  .hh-word{ font-size:clamp(39px,9.75vw,78px); }
  .hh-with{ font-size:clamp(11px,2.2vw,15px); }

  .hh-home .glyph-wrap{ display:none; }
  /* the globe container becomes the contained in-flow block (order:2, between
     statement and copy); the canvas fills it and the core centres on it, so the
     gravity-core mark rides the mobile globe too. */
  .hh-home .hh-globe{
    position:relative; inset:auto;
    order:2;
    width:min(74vw,420px); height:min(74vw,420px);
    margin:0 auto;
  }
  .hh-home #glyph{
    position:relative; inset:auto;
    width:100%; height:100%;
  }
  .hh-home .hh-core{
    left:50%; top:50%;
    width:calc(min(74vw,420px) * 0.4);
  }

  .hh-lead{
    order:3;
    align-self:center; justify-self:center;
    max-width:560px; margin:0;
  }
  /* mobile/tablet: the two CTAs share ONE row (equal halves) and shrink, to
     reclaim vertical space — never stacked or wrapped. */
  .hh-ctas{
    flex-direction:row; flex-wrap:nowrap; align-items:stretch; justify-content:center;
    width:auto; max-width:none; margin-inline:auto; gap:8px;
  }
  .hh-cta{ flex:1 1 0; min-width:0; min-height:44px; padding:9px 14px; font-size:13px; }

  .hh-lenses{ order:4; width:100%; max-width:700px; }
  .hh-lenses-head{ text-align:center; }
  .hh-lens-grid{ grid-template-columns:repeat(2,1fr); gap:34px 28px; }
  .hh-lens{ border-left:0; padding:0; }
  .hh-lens .fw-a::after{ left:50%; transform:translateX(-50%); }

  .hh-foot{
    order:5; width:100%;
    flex-direction:column; gap:14px;
    margin-top:clamp(10px,3vh,24px);
  }
}

@media (max-width:767px){
  .hh{ padding:clamp(6px,2vh,14px) 26px clamp(28px,6vh,46px); }
  .hh-word{ font-size:clamp(33px,11.25vw,66px); }
  .hh-lens-grid{ grid-template-columns:1fr; gap:30px; justify-items:center; }
  .hh-foot-words{ flex-wrap:wrap; justify-content:center; gap:14px 22px; }
}

/* ============================================================
   LIGHT THEME
   The neon hero is a dark composition; on light it becomes a soft cream
   field with the same faint lens washes, and the inks flip to dark so the
   copy stays legible. The lens gradients + globe keep their colour.
   ============================================================ */
body.light .hh-home{
  --hh-text:#1b1c20;
  --hh-text-2:#5a5c64;
  --hh-text-3:#8a8c94;
  --hh-border:rgba(20,21,25,0.20);
  --hh-border-strong:rgba(20,21,25,0.42);
  --hh-divider:rgba(20,21,25,0.12);
  --hh-rule:rgba(20,21,25,0.30);
  background:
    radial-gradient(58% 52% at 18% 42%, rgba(8,140,190,0.07) 0%, rgba(8,140,190,0) 60%),
    radial-gradient(56% 58% at 50% 46%, rgba(124,58,237,0.08) 0%, rgba(124,58,237,0) 62%),
    radial-gradient(52% 52% at 82% 56%, rgba(237,18,128,0.06) 0%, rgba(237,18,128,0) 60%),
    linear-gradient(180deg, #f4f2ee 0%, #efece7 55%, #ece9e3 100%);
}
body.light .hh-cta-primary{
  background:#16171b; color:#f4f2ee; border-color:#16171b;
  box-shadow:0 1px 30px rgba(20,21,24,0.12);
}
body.light .hh-cta-primary:hover{ background:#000; border-color:#000; box-shadow:0 2px 44px rgba(20,21,24,0.2); }
body.light .hh-dot{ text-shadow:0 0 18px rgba(8,204,253,0.35); }