/* ── Shell ── */
.hero {
  min-height:100svh; background:var(--black); color:#fff;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}

/* large background Δ — brand anchor */
.hero-delta-bg {
  position:absolute;
  left:50%; top:50%;
  transform:translate(-46%, -50%);
  font-family:var(--fd); font-optical-sizing:auto; font-weight:200;
  font-size:clamp(340px, 58vw, 700px);
  color:rgba(255,255,255,.068);
  line-height:1; letter-spacing:-.06em;
  pointer-events:none; user-select:none;
  z-index:0;
  -webkit-font-smoothing:antialiased;
  animation:deltaPulse 9s ease-in-out infinite;
}
@keyframes deltaPulse {
  0%,100% { opacity:.82 }
  50%      { opacity:1  }
}

/* canvas particle layer */
#hero-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1; pointer-events:none;
}

/* subtle grid */
.hero-grid {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:72px 72px;
}

/* vignette */
.hero-vig {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse 100% 90% at 50% 60%, transparent 30%, var(--black) 100%);
}

/* ── Body ── */
.hero-body {
  flex:1; display:grid; grid-template-columns:1fr 1fr;
  align-items:center;
  padding:clamp(88px,11vw,120px) var(--pad) clamp(52px,6vw,72px);
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto; width:100%;
  align-self:stretch;
}

.hero-left { display:flex; flex-direction:column; max-width:580px }

.hero-micro {
  font-family:var(--fm); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.40);
  display:inline-flex; align-items:center; gap:14px;
  margin-bottom:44px;
  opacity:0; animation:fadeUp .7s var(--ease) .1s both;
}
.hero-micro::before { content:''; width:20px; height:1px; background:currentColor; flex-shrink:0 }

.hero-h1 {
  font-family:var(--fd); font-optical-sizing:auto;
  font-size:clamp(38px,5.6vw,80px); font-weight:300;
  line-height:1.02; letter-spacing:-.03em; color:#fff;
  margin-bottom:28px;
  opacity:0; animation:fadeUp .8s var(--ease) .2s both;
}
.hero-h1 em { font-style:italic; font-weight:200; color:rgba(255,255,255,.5) }

.hero-sub {
  font-size:clamp(14px,1.4vw,16px); font-weight:300; line-height:1.85;
  color:rgba(255,255,255,.70);
  margin-bottom:40px;
  opacity:0; animation:fadeUp .8s var(--ease) .3s both;
}

.hero-btns {
  display:flex; gap:12px; flex-wrap:wrap;
  opacity:0; animation:fadeUp .8s var(--ease) .4s both;
}

/* ── Right / Vortex ── */
.hero-right {
  display:flex; align-items:center; justify-content:center;
  padding-left:40px;
}
.vortex-wrap {
  width:clamp(260px,34vw,440px); aspect-ratio:1;
  opacity:0; animation:fadeIn 1.2s var(--ease) .5s both;
}
.vortex-wrap svg { width:100%; height:100% }

@keyframes fadeUp { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

/* ── Ticker ── */
.hero-ticker {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.07);
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto; width:100%;
}
.ht {
  padding:clamp(22px,3vw,36px) var(--pad);
  border-right:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; gap:7px;
}
.ht:last-child { border-right:none }
.ht-v {
  font-family:var(--fd); font-optical-sizing:auto;
  font-size:clamp(18px,2.2vw,26px); font-weight:300; color:#fff;
  letter-spacing:-.01em; line-height:1;
}
.ht-l {
  font-family:var(--fm); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.35);
}