/* ═══════════════════════════════════════════════════════════
   NECTUS · home.css — the front door
   ═══════════════════════════════════════════════════════════ */

/* ── hero ─────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto}
.hero-type{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.hero-back{z-index:1}
.hero-front{z-index:3}
.hero-back .h-xl{transform:translateY(-.34em)}
.hero-front .h-xl{transform:translateY(.46em)}

.hero-top{
  position:absolute;z-index:3;top:clamp(92px,12vh,124px);left:var(--gut);right:var(--gut);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.hero-meta{
  position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(26px,5vh,52px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.hero-blurb{max-width:30ch;font-size:.95rem;line-height:1.75;color:var(--mercury)}
.hero-blurb b{color:var(--platinum);font-weight:500}
.hero-acts{display:flex;gap:10px;flex-wrap:wrap}
.cue{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--iron)}
.cue-b{width:1px;height:38px;background:linear-gradient(180deg,var(--iron),transparent);position:relative;overflow:hidden}
.cue-b::after{content:'';position:absolute;top:-38px;left:0;width:1px;height:38px;background:var(--platinum);animation:cueRun 2.4s var(--ease) infinite}
@keyframes cueRun{0%{transform:translateY(0)}70%,100%{transform:translateY(76px)}}

/* ── doctrine ─────────────────────────────────────────────── */
.doc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:900px){.doc-grid{grid-template-columns:1fr}}

/* ── the bar ──────────────────────────────────────────────── */
.bar-sec{min-height:100svh;display:flex;align-items:center}
.bar-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(34px,6vh,68px)}
.bar-foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:36px;border-top:1px solid var(--hair);padding-top:22px}
.bar-foot .note{max-width:46ch}

/* ── vault teaser ─────────────────────────────────────────── */
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.teaser-hood{position:relative}
.teaser-hood.open .seal{opacity:0;pointer-events:none}

/* ── cta ──────────────────────────────────────────────────── */
.cta .h-l{text-align:center}
.cta-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* ── the class strip: what the loaded weight earns ────────── */
.tier{margin-top:clamp(30px,4.5vh,54px);padding-top:clamp(20px,2.6vh,28px);border-top:1px solid var(--hair)}
.tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.tier-lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--iron)}
.tier-kg{
  font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;
  text-transform:uppercase;color:var(--platinum);font-variant-numeric:tabular-nums;
}
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--hair-2);border:1px solid var(--hair-2)}
.tier-card{
  background:var(--pitch);padding:16px 18px;display:flex;flex-direction:column;gap:6px;
  position:relative;overflow:hidden;min-height:104px;justify-content:flex-end;
  animation:tierIn .5s var(--ease) both;
}
.tier-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.tier-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,10,.1),rgba(7,8,10,.9))}
.tier-card > *{position:relative;z-index:1}
.tier-cat{font-family:var(--mono);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--iron)}
.tier-nm{font-family:var(--disp);font-weight:500;font-size:1.25rem;line-height:1;text-transform:uppercase;color:var(--platinum)}
.tier-pr{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--mercury);font-variant-numeric:tabular-nums}
@keyframes tierIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tier-none{
  grid-column:1/-1;background:var(--pitch);padding:26px 18px;text-align:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--iron);line-height:2;
}
.tier.locked .tier-grid{filter:blur(6px) grayscale(1) brightness(.6);opacity:.55}
