/* hero.css — hero canvas, slides, typewriter caret, CTAs */
.hero{position:relative;height:calc(100vh - var(--nav-h, 0px));min-height:560px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--border)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%; }
.hero .slides{position:absolute;inset:0;display:grid;place-items:center;z-index:1;padding:0 var(--space)}
.hero .slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.7rem;
  opacity:0;transform:translateY(10px);transition:opacity .4s ease, transform .4s ease;pointer-events:none;padding:0 var(--space)}
.hero .slide.active{opacity:1;transform:translateY(0);pointer-events:auto}
.hero h1{font-size:clamp(38px, 7.5vw, 86px); margin:.2rem 0; max-width: 24ch; color:#fff;}
.hero p.lede{font-size:clamp(18px, 2.6vw, 30px); color:#fff; max-width: 80ch}
.hero .typing::after{content:"▍";display:inline-block;margin-left:.08em;animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.hero-ctas{position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(16px, 4vh, 40px); display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; z-index: 99;}

  /* Base readability on imagery */
.hero h1,
.hero .lede {
  /* layered text-shadows = crisp edges + soft lift */
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.28),
    0 0 1px rgba(0, 0, 0, 0.55);
}

/* Slight extra punch for the headline */
.hero h1 {
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25));
}

/* Softer lift for the lede */
.hero .lede {
  opacity: 0.96; /* improves contrast without looking heavy */
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.18));
}

/* Dark theme tuning: keep contrast without halos */
:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] .hero .lede {
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.4),
    0 0 1px rgba(0, 0, 0, 0.8);
}

/* Optional: stronger preset if a slide is extra busy */
.hero.shadow-strong h1,
.hero.shadow-strong .lede {
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.5),
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 2px rgba(0, 0, 0, 0.7);
}