/* ==========================================================================
   jasonhaygood.com — premium dark-mode operator hub
   Gunmetal + brushed titanium + a cyan HUD glow. Inter (body) + Fraunces (italic accents).
   ========================================================================== */

:root {
  --navy-deep: #0c0d10;
  --navy: #16181c;
  --navy-light: #202226;
  --gold: #d7dde3;
  --gold-bright: #ffffff;
  --white: #ffffff;
  --dim: #b6bac1;
  --dim-strong: #82868d;
  --line: rgba(215, 221, 227, 0.14);
  --glow: #5fd4ff;
  --glow-soft: rgba(95, 212, 255, 0.35);
  --metal: linear-gradient(135deg, #f4f6f8 0%, #c3c9d0 45%, #eef1f4 70%, #a9b0b8 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--navy-deep);
  color: var(--white);
  line-height: 1.55;
  font-size: 16px;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; color: var(--gold); text-shadow: 0 0 22px var(--glow-soft); }
strong { font-weight: 600; color: var(--white); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ============================================================ NAV */
.topnav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 48px;
  z-index: 100;
  background: rgba(12, 13, 16, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  isolation: isolate;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--metal); color: var(--navy-deep);
  font-weight: 800; font-size: 16px; letter-spacing: 0.5px;
  border-radius: 6px;
  box-shadow: 0 0 16px var(--glow-soft), inset 0 1px 0 rgba(255,255,255,0.6);
}
.brand-sub { color: var(--dim); font-size: 14px; letter-spacing: 0.3px; }
.nav-cta { display: flex; align-items: center; gap: 24px; }
.nav-link {
  color: var(--dim);
  font-size: 13px; font-weight: 700;
  letter-spacing: 2.5px;
  transition: color 0.2s ease;
}
.nav-link:hover { color: var(--gold); }
@media (max-width: 720px) {
  .topnav { padding: 14px 20px; }
  .brand-sub { display: none; }
  .nav-cta { gap: 16px; }
  /* five nav links wrap to a second row on phones and, since .topnav is
     fixed with a gradient that fades to transparent, the wrapped row lets
     page content show/bleed through underneath it. Trim to the three links
     that matter most on a phone so the nav stays one row. */
  .topnav .nav-link[href*="#building"],
  .topnav .nav-link[href*="#how"] { display: none; }
}

/* ============================================================ HERO */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.45) saturate(0.85);
  z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(18,19,22,0.55) 0%,
    rgba(18,19,22,0.35) 40%,
    rgba(18,19,22,0.85) 100%);
  z-index: 1;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 880px;
  padding: 0 48px;
  margin: 0 auto;
}
.hero-accent {
  width: 64px; height: 4px;
  background: var(--glow);
  box-shadow: 0 0 14px var(--glow-soft);
  margin-bottom: 24px;
}
.hero-eyebrow {
  color: var(--glow);
  font-size: 13px; font-weight: 600;
  letter-spacing: 2.5px;
  margin-bottom: 18px;
  text-shadow: 0 0 16px var(--glow-soft);
}
.hero-title {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.hero-sub {
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--dim);
  max-width: 680px;
  margin-bottom: 40px;
  line-height: 1.6;
}
.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  color: var(--dim-strong); font-size: 11px; letter-spacing: 3px;
  z-index: 2;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font-size: 15px; font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.22s ease;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
}
.btn-primary {
  background: var(--metal); color: var(--navy-deep);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3) inset;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px var(--glow-soft), 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.btn-secondary {
  background: transparent; color: var(--white);
  border-color: rgba(255,255,255,0.3);
}
.btn-secondary:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.05);
}
.btn-ghost {
  font-size: 14px; padding: 10px 18px;
  border-color: rgba(255,255,255,0.2);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--gold); color: var(--gold);
}

/* ============================================================ SECTIONS */
.section-eyebrow {
  color: var(--gold);
  font-size: 12px; font-weight: 600;
  letter-spacing: 2.5px;
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.section-lead {
  font-size: 18px;
  color: var(--dim);
  max-width: 700px;
  margin-bottom: 40px;
}

/* ============================================================ FEATURED VIDEO */
.featured-video {
  padding: 120px 0 100px;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-top: 1px solid var(--line);
}
.video-frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--line);
}
.video-frame video { width: 100%; display: block; }
.video-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px;
  font-size: 13px; color: var(--dim-strong);
  letter-spacing: 0.5px;
}
.video-meta a { color: var(--gold); }
.video-meta a:hover { color: var(--gold-bright); }

/* ============================================================ KORE / ARTEMIS PLATFORM */
.kore {
  padding: 120px 0 110px;
  background: var(--navy);
  border-top: 1px solid var(--line);
}
.kore-word {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
}
.kore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
}
.kore-card {
  background: var(--navy-light);
  padding: 36px 28px 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
}
.kc-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 16px;
}
.kc-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--white);
}
.kc-what {
  font-size: 15px;
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: 14px;
}
.kc-novel {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gold-bright);
  line-height: 1.55;
  margin-bottom: 20px;
}
.kc-enables {
  list-style: none;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.kc-enables li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 14px;
  color: var(--dim);
  line-height: 1.5;
}
.kc-enables li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.kore-proof {
  text-align: center;
  color: var(--dim);
  font-size: 16px;
  margin-top: 48px;
  font-style: italic;
  font-family: 'Fraunces', serif;
}
@media (max-width: 880px) {
  .kore-grid { grid-template-columns: 1fr; }
}

/* ============================================================ ABOUT */
.about {
  padding: 120px 0;
  background: var(--navy);
  border-top: 1px solid var(--line);
}
.two-col {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}
.about-photo img {
  width: 100%;
  border-radius: 8px;
  filter: contrast(1.05);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.about-text p { color: var(--dim); margin-bottom: 18px; font-size: 17px; }
.about-credentials {
  list-style: none;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.about-credentials li {
  padding: 10px 0;
  color: var(--dim);
  font-size: 15px;
}
.about-credentials strong { color: var(--gold); }
@media (max-width: 880px) {
  .two-col { grid-template-columns: 1fr; gap: 48px; }
  .about-photo { max-width: 320px; }
}

/* ============================================================ PROOF / BADGES */
.proof {
  padding: 100px 0 120px;
  background: var(--navy-deep);
  border-top: 1px solid var(--line);
}
.badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}
.badge {
  background: var(--navy-light);
  padding: 32px 20px 24px;
  border-radius: 6px;
  border-top: 3px solid var(--gold);
  text-align: center;
}
.badge-name {
  font-size: 20px;
  font-style: italic;
  font-family: 'Fraunces', serif;
  color: var(--white);
  font-weight: 600;
  margin-bottom: 6px;
}
.badge-fw {
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 18px;
}
.badge-ribbon {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 5px 14px;
  border-radius: 2px;
}
.proof-tag {
  text-align: center;
  color: var(--dim);
  font-size: 16px;
  margin-top: 32px;
  font-style: italic;
  font-family: 'Fraunces', serif;
}
.proof-counter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.counter-block { text-align: center; }
.counter-num {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 8px;
}
.counter-label {
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dim-strong);
}
@media (max-width: 720px) {
  .badges { grid-template-columns: repeat(2, 1fr); }
  .proof-counter { grid-template-columns: 1fr; gap: 32px; }
  .counter-num { font-size: 48px; }
}

/* ============================================================ CONNECT */
.connect {
  padding: 120px 0;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-top: 1px solid var(--line);
}
.connect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.connect-card {
  background: var(--navy-light);
  padding: 36px 28px 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  position: relative;
  transition: all 0.25s ease;
}
.connect-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 16px 50px rgba(0,0,0,0.4);
}
.connect-card.primary {
  background: var(--metal);
  color: var(--navy-deep);
  border-color: transparent;
}
.connect-card.primary:hover { box-shadow: 0 16px 60px rgba(200,204,210,0.3); }
.cc-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 16px;
  opacity: 0.7;
}
.cc-title {
  font-size: 22px; font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.cc-sub {
  font-size: 14px;
  color: var(--dim);
  margin-bottom: 24px;
  line-height: 1.5;
}
.connect-card.primary .cc-sub { color: rgba(18,19,22,0.7); }
.cc-arrow {
  font-size: 22px;
  font-weight: 300;
  transition: transform 0.2s ease;
}
.connect-card:hover .cc-arrow { transform: translateX(6px); }
@media (max-width: 880px) {
  .connect-grid { grid-template-columns: 1fr; }
}

/* ============================================================ FOOTER */
.site-footer {
  padding: 60px 0 40px;
  background: var(--navy-deep);
  border-top: 1px solid var(--line);
}
.footer-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-name { font-size: 18px; font-weight: 600; color: var(--white); }
.footer-sub { font-size: 14px; color: var(--dim); margin-top: 4px; }
.footer-links {
  display: flex; gap: 28px;
  font-size: 14px;
  flex-wrap: wrap;
}
.footer-links a { color: var(--dim); }
.footer-links a:hover { color: var(--gold); }
.footer-meta {
  text-align: center;
  font-size: 12px;
  color: var(--dim-strong);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  letter-spacing: 1px;
}

/* ============================================================ HENRY CHAT BUBBLE */
.henry-bubble {
  position: fixed; bottom: 28px; right: 28px;
  z-index: 200;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px 14px 18px;
  background: var(--metal);
  color: var(--navy-deep);
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 12px 30px var(--glow-soft), 0 0 0 1px rgba(0,0,0,0.05);
  transition: all 0.22s ease;
}
.henry-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px var(--glow-soft);
}
.hb-icon {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--navy-deep);
  color: var(--gold);
  border-radius: 50%;
  font-weight: 800; font-size: 14px;
}
.hb-pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--gold);
  opacity: 0;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}
@media (max-width: 540px) {
  .henry-bubble { bottom: 18px; right: 18px; padding: 12px 18px 12px 14px; }
  .hb-label { display: none; }
}

.henry-panel {
  position: fixed; bottom: 96px; right: 28px;
  z-index: 199;
  width: min(520px, calc(100vw - 40px));
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: inset 0.25s ease, width 0.25s ease, bottom 0.25s ease, border-radius 0.25s ease;
  max-height: calc(100vh - 120px);
}
/* The `display:flex` above has the same specificity as the browser's own
   `[hidden]{display:none}` UA rule, and an author rule beats the UA
   stylesheet on a tie - so the panel rendered open regardless of the
   `hidden` attribute, and closePanel() setting `hidden` had no visual
   effect at all (2026-08-19, Jason: widget open by default, X did nothing). */
.henry-panel[hidden] { display: none; }
/* Fullscreen mode */
.henry-panel.hp-expanded {
  bottom: 0; right: 0;
  width: 100%;
  max-height: 100vh;
  border-radius: 0;
}
@media (min-width: 600px) {
  .henry-panel.hp-expanded {
    bottom: 24px; right: 24px;
    width: min(700px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    border-radius: 14px;
  }
}
.hp-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: var(--navy-light);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  gap: 8px;
}
.hp-title { color: var(--gold); font-weight: 600; font-size: 14px; letter-spacing: 0.4px; flex: 1; }
.hp-subtitle { color: var(--dim); font-size: 12px; margin-top: 1px; }
.hp-header-btns { display: flex; align-items: center; gap: 4px; }
.hp-expand, .hp-close {
  background: none; border: none;
  color: var(--dim);
  cursor: pointer;
  line-height: 1; padding: 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  font-size: 16px;
}
.hp-expand:hover, .hp-close:hover { color: var(--white); background: rgba(255,255,255,0.07); }
.hp-close { font-size: 22px; padding: 4px 6px; }

/* Henry chat */
.hp-messages {
  padding: 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
  min-height: 200px;
  max-height: 460px;
}
.henry-panel.hp-expanded .hp-messages { max-height: none; }
.hp-msg { font-size: 14.5px; line-height: 1.6; padding: 11px 14px; border-radius: 12px; max-width: 86%; white-space: pre-wrap; word-wrap: break-word; }
.hp-msg.henry { background: var(--navy-light); color: var(--white); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 3px; }
.hp-msg.user { background: var(--gold); color: var(--navy-deep); align-self: flex-end; border-bottom-right-radius: 3px; font-weight: 500; }
.hp-msg a { color: var(--gold); text-decoration: underline; }
.hp-msg.user a { color: var(--navy-deep); }
.hp-msg.typing { color: var(--dim); font-style: italic; }
.hp-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--navy-light); flex-shrink: 0; }
.hp-input input { flex: 1; background: var(--navy-deep); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; color: var(--white); font-size: 14px; outline: none; }
.hp-input input:focus { border-color: var(--gold); }
.hp-input input::placeholder { color: var(--dim); }
.hp-input button { background: var(--gold); color: var(--navy-deep); border: none; border-radius: 8px; width: 42px; font-size: 18px; font-weight: 700; cursor: pointer; transition: background 0.15s; flex-shrink: 0; }
.hp-input button:hover { background: var(--gold-bright); }
.hp-input button:disabled { opacity: 0.5; cursor: default; }
.hp-booklink { display: block; text-align: center; padding: 9px 14px; font-size: 12px; color: var(--dim); border-top: 1px solid var(--line); background: var(--navy-light); border-radius: 0 0 16px 16px; transition: color 0.15s; flex-shrink: 0; }
.hp-booklink:hover { color: var(--gold); }


/* ============================================================
   VENTURE CARDS (2026-08-24 rebuild)
   Neutral aliases of the original platform-card component. Same visual
   system, no Kore vocabulary in the live markup. The originals are left
   in place because the journey page still uses them for the career
   chapter, where naming the platform is accurate rather than stale. */
.accent-word {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
}
.venture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
}
.venture-card {
  background: var(--navy-light);
  padding: 36px 28px 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vc-thumb {
  display: block;
  width: calc(100% + 56px);
  margin: -36px -28px 22px -28px;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--line);
  background: var(--navy-deep);
}
.venture-card {
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.venture-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.venture-card.mini {
  padding: 18px 18px 20px;
}
.venture-card.mini .vc-thumb { margin: -18px -18px 16px -18px; width: calc(100% + 36px); }
.venture-card.mini .vc-label { font-size: 10px; margin-bottom: 8px; }
.venture-card.mini .vc-title { font-size: 17px; margin-bottom: 8px; }
.venture-card.mini .vc-what { font-size: 13.5px; margin-bottom: 0; }
.venture-grid-mini {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.vc-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 16px;
}
.vc-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--white);
}
.vc-what {
  font-size: 15px;
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: 14px;
}
.vc-novel {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gold-bright);
  line-height: 1.55;
  margin-bottom: 20px;
}
.vc-enables {
  list-style: none;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.vc-enables li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 14px;
  color: var(--dim);
  line-height: 1.5;
}
.vc-enables li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.venture-proof {
  text-align: center;
  color: var(--dim);
  font-size: 16px;
  margin-top: 48px;
  font-style: italic;
  font-family: 'Fraunces', serif;
}
/* removed 2026-08-24: this rule was extracted out of a max-width media query by the
   alias pass and emitted flat, so it forced a single column at EVERY width. The
   responsive version below is the one that should apply. */

@media (max-width: 900px) {
  .venture-grid, .venture-grid-mini { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .venture-grid-mini { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   HERO, LONG-TITLE VARIANT (2026-08-24 rebuild)
   The original hero carried a four-word headline, so .hero-title could sit at
   96px inside a centred 100vh flex box. A two-line headline at that size
   overflows the viewport and slides under the fixed .topnav, which is exactly
   what it did on first render. This variant scales the type down and adds top
   padding equal to the nav's height so the first line always clears it.
   .accent-line is the emphasis treatment; .hero-accent is a 64x4 divider RULE
   and must never be used to wrap text, which renders as a solid gold block. */
.hero-title-long {
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.08;
}
.hero-content { padding-top: 92px; padding-bottom: 40px; }
.accent-line {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}
@media (max-width: 700px) {
  .hero-title-long { font-size: clamp(30px, 8vw, 40px); }
  .hero-content { padding-top: 84px; }
}

/* ============================================================
   HUD GLOW ACCENTS (2026-08-27) — Batman/Iron Man tech read:
   gunmetal panels, brushed-metal fills, thin cyan backlight on
   labels, borders and hover states. Additive only (text-shadow /
   box-shadow), so it layers on top of the color rules above
   instead of overriding them.
   ============================================================ */
.section-eyebrow, .kc-label, .vc-label, .cc-label, .hp-title,
.brand-sub, .video-meta a {
  text-shadow: 0 0 14px var(--glow-soft);
}
.venture-card, .kore-card, .connect-card {
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 -1px 18px -6px var(--glow-soft);
}
.venture-card, .kore-card { border-top-color: var(--glow); }
.connect-card { border-top: 3px solid var(--glow); }
.venture-card:hover, .kore-card:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 4px 28px -4px var(--glow-soft);
}
.nav-link:hover, .footer-links a:hover, .btn-ghost:hover,
.hp-booklink:hover, .cc-label {
  text-shadow: 0 0 12px var(--glow-soft);
}
.btn-secondary:hover, .btn-ghost:hover {
  box-shadow: 0 0 20px -4px var(--glow-soft);
}