/* ============================================================
   hero.css — hero section + 3D canvas veil + scroll cue
   ============================================================ */
.hero{padding:150px 0 80px;text-align:center;overflow:hidden;min-height:100vh;display:flex;align-items:center}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.hero .wrap{z-index:3}
.hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 62% 58% at 50% 46%, var(--beige) 16%, rgba(241,235,221,.74) 44%, rgba(241,235,221,.28) 72%, transparent 90%)}

.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:var(--cream);border:1px solid var(--glass-brd);font-size:13px;color:var(--lime-deep);margin-bottom:26px;font-weight:500;box-shadow:var(--shadow)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--lime-2);box-shadow:0 0 10px var(--lime-2);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4;transform:scale(.8)}}
.hero h1{font-size:clamp(40px,7.2vw,86px);font-weight:700;max-width:14ch;margin:0 auto}
.hero h1 em{font-style:normal;color:var(--lime-deep);position:relative}
.hero p.sub{max-width:600px;margin:24px auto 0;color:var(--ink-soft);font-size:clamp(16px,2.2vw,19px)}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.hero-strip{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:54px;color:var(--ink-soft);font-size:14px}
.hero-strip b{color:var(--ink);font-family:"Space Grotesk";font-size:20px;display:inline-block}

.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:"Space Grotesk";font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.scroll-cue span{width:24px;height:38px;border:2px solid var(--glass-brd);border-radius:14px;position:relative}
.scroll-cue span::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:4px;height:8px;border-radius:3px;background:var(--lime-2);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{transform:translate(-50%,12px);opacity:.3}}