/* ═══════════════════════════════════════
   VLADFX HERO — Full-viewport hero with video bg
   Homepage only.
   ═══════════════════════════════════════ */

.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;
  padding:100px 24px 80px;overflow:hidden;
}

.hero-video{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;z-index:0;opacity:.53;
}

.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(8,8,10,.7) 0%,
    rgba(8,8,10,.3) 40%,
    rgba(8,8,10,.5) 70%,
    rgba(8,8,10,.95) 100%
  );
}

.hero-content{position:relative;z-index:2;max-width:800px}

.hero .tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 20px;border-radius:100px;
  font-size:.78rem;font-weight:600;letter-spacing:2.5px;
  color:var(--brand);border:1px solid rgba(244,64,65,.25);
  background:var(--brand-soft);margin-bottom:32px;text-transform:uppercase;
}
.hero .tag .dot{
  width:6px;height:6px;border-radius:50%;background:var(--brand);
  animation:pulse-dot 2s ease-in-out infinite;
}

.hero h1{
  font-size:clamp(3rem,8vw,6rem);font-weight:900;
  line-height:1.05;margin-bottom:24px;letter-spacing:-.03em;color:var(--text);
  white-space:normal;
  word-break:break-word;
  /* Hide static text until scramble.js starts typing */
  visibility:hidden;
}
.hero h1 .gradient{
  background:linear-gradient(135deg,var(--brand),var(--brand2),#fbbf24);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 200%;animation:gradShift 5s ease infinite;
  display:inline;
}
.hero h1 .mobile-br{display:none}

.hero p{
  font-size:1.15rem;color:var(--dim);max-width:540px;
  margin:0 auto 40px;line-height:1.7;
}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.scroll-hint{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  z-index:2;color:var(--dimmer);animation:bounce 2.5s ease infinite;
}

/* ── Responsive ── */
@media(max-width:768px){
  .hero h1{font-size:4rem;line-height:1.05}
  .hero h1 .mobile-br{display:block}
  .hero p{font-size:1rem}
}
@media(max-width:480px){
  .hero h1{font-size:3.2rem;line-height:1.06}
  .hero h1 .mobile-br{display:block}
  .cta-row{flex-direction:column;align-items:center}
  .btn{width:100%;justify-content:center}
}