/* ═══════════════════════════════════════════════════════════
   New Era 3D — Investor briefing page
   Uses the main site's tokens (css/style.css). Only page-specific
   layout lives here so the homepage stylesheet stays lean.
   ═══════════════════════════════════════════════════════════ */

.inv{background:var(--ink)}

/* ─────────── nav ─────────── */
.invnav{
  position:sticky; top:0; z-index:60;
  background:rgba(10,12,16,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.invnav__inner{display:flex; align-items:center; gap:20px; padding-block:14px}
.invnav .logo__img{width:150px; height:auto}
.invnav__tag{
  color:var(--text-faint); margin-left:auto;
  padding-left:20px; border-left:1px solid var(--line-hi);
}
@media (max-width:640px){
  .invnav__tag{display:none}
  .invnav__inner{gap:12px; justify-content:space-between}
}

/* ─────────── hero ─────────── */
.invhero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(90px,14vw,190px);
  border-bottom:1px solid var(--line);
}
.invhero__media{position:absolute; inset:0; z-index:-1}
.invhero__media img{width:100%; height:100%; object-fit:cover; filter:grayscale(.35)}
.invhero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 18%, rgba(10,12,16,.82) 55%, rgba(10,12,16,.55)),
    linear-gradient(0deg, var(--ink), transparent 55%);
}
.invhero__eyebrow{color:var(--accent-hi)}
.invhero__title{
  font:600 clamp(2.3rem,5.4vw,4.1rem)/1.05 var(--font-d);
  letter-spacing:-.01em; word-spacing:.16em; margin:18px 0 22px; max-width:19ch;
}
.invhero__title em{font-style:normal; color:var(--accent)}
.invhero__lede{max-width:54ch}
.invhero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

/* ─────────── sections ─────────── */
.invsec{padding-block:var(--sec); border-bottom:1px solid var(--line)}
.invsec--alt{background:var(--ink-2)}
.invsec__kicker{
  margin-top:clamp(28px,4vw,44px); max-width:52ch;
  font:600 clamp(1.15rem,2.2vw,1.5rem)/1.4 var(--font-d); color:var(--text);
  padding-left:20px; border-left:3px solid var(--accent);
}

/* ─────────── stat cards ─────────── */
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.statgrid--three{grid-template-columns:repeat(3,1fr)}
.istat{
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px); display:grid; gap:10px; align-content:start;
  transition:transform .35s var(--ease), border-color .35s;
}
.invsec--alt .istat{background:var(--ink-3)}
.istat:hover{transform:translateY(-5px); border-color:rgba(242,109,13,.45)}
.istat__num{
  font:600 clamp(2.4rem,4.4vw,3.4rem)/1 var(--font-d);
  color:var(--accent); letter-spacing:-.01em;
}
/* ranges and percentages are long strings — keep them on one line */
.istat__num--range{font-size:clamp(1.9rem,3vw,2.5rem); white-space:nowrap}
.istat__label{color:var(--text); font-size:.66rem}
.istat__note{color:var(--text-dim); font-size:.9rem; line-height:1.55}
.istat__note sup, .why sup{color:var(--accent-hi); font-size:.62em; padding-left:2px}
@media (max-width:1000px){ .statgrid, .statgrid--three{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .statgrid, .statgrid--three{grid-template-columns:1fr} }

/* ─────────── why grid ─────────── */
.whygrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.why{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px); position:relative; overflow:hidden;
}
.why::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .4s var(--ease);
}
.why:hover::before{transform:scaleY(1)}
.why h3{font:600 1.3rem/1.2 var(--font-d); word-spacing:.16em; margin-bottom:10px}
.why p{color:var(--text-dim); font-size:.94rem}
@media (max-width:900px){ .whygrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .whygrid{grid-template-columns:1fr} }

/* ─────────── code-path note ─────────── */
.invnote{
  margin-top:clamp(24px,3.5vw,40px); display:grid; gap:14px;
  padding:clamp(22px,3vw,34px); max-width:88ch;
  border:1px solid var(--line-hi); border-left:3px solid var(--accent); border-radius:var(--r);
  background:var(--ink-2);
}
.invnote p{color:var(--text-dim); font-size:.96rem; line-height:1.7}
.invnote strong{color:var(--text)}
.invnote__caveat{color:var(--text-faint); font-size:.9rem}

/* ─────────── why us split ─────────── */
.invsplit{display:grid; grid-template-columns:1fr 44%; gap:clamp(28px,5vw,72px); align-items:center}
.invsplit__copy{display:grid; gap:18px}
.invsplit__copy h2{margin-bottom:4px}
.invsplit__copy p{color:var(--text-dim)}
.invsplit__media{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line)}
.invsplit__media img{width:100%; height:100%; object-fit:cover}
.invsplit__media figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:38px 16px 14px;
  background:linear-gradient(transparent, rgba(10,12,16,.92)); color:var(--text-dim);
}
.invfacts{display:grid; gap:14px; margin-top:6px}
.invfacts li{
  display:grid; gap:4px; padding-left:18px; border-left:2px solid rgba(242,109,13,.5);
}
.invfacts strong{font:600 1.15rem/1.2 var(--font-d); word-spacing:.16em; color:var(--text)}
.invfacts span{color:var(--text-dim); font-size:.92rem}
@media (max-width:900px){ .invsplit{grid-template-columns:1fr} }

/* ─────────── process / gate ─────────── */
.invsec--gate{
  background:
    radial-gradient(70% 60% at 80% 0%, rgba(242,109,13,.10), transparent 60%),
    var(--ink-2);
}
.isteps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:none}
.istep{
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,38px); display:grid; gap:12px; align-content:start;
}
.istep__num{color:var(--accent-hi); font-size:.64rem}
.istep h3{font:600 1.35rem/1.2 var(--font-d); word-spacing:.16em}
.istep p{color:var(--text-dim); font-size:.94rem}
@media (max-width:900px){ .isteps{grid-template-columns:1fr} }

.invcta{
  margin-top:clamp(32px,4vw,52px);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding:clamp(28px,4vw,46px);
  border:1px solid rgba(242,109,13,.4); border-radius:var(--r);
  background:linear-gradient(120deg, rgba(242,109,13,.10), transparent 60%), var(--ink);
}
.invcta__head{font:600 clamp(1.5rem,2.8vw,2.1rem)/1.15 var(--font-d); word-spacing:.16em}
.invcta__sub{color:var(--text-dim); max-width:46ch; margin-top:10px}
.invcta__actions{display:grid; gap:12px; justify-items:start}
.invcta__alt{color:var(--text-dim); font-size:.9rem}
.invcta__alt a{color:var(--text); border-bottom:1px solid var(--accent); white-space:nowrap}

/* ─────────── sources & disclosure ─────────── */
.invsec--fine{padding-block:clamp(48px,7vw,86px); background:var(--ink)}
.fine__head{color:var(--text-faint); margin-bottom:18px}
.fine__list{
  list-style:decimal; padding-left:1.4em; display:grid; gap:7px; max-width:92ch;
  color:var(--text-faint); font-size:.8rem; line-height:1.6;
}
.fine__legal{
  margin-top:26px; max-width:92ch;
  color:var(--text-faint); font-size:.78rem; line-height:1.65;
}