/* ═══════════════════════════════════════════
   HERO — Dark Image Background, Left-Aligned
   ═══════════════════════════════════════════ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#0a1628}

/* Full-bleed background image */
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:0}

/* Subtle overlay for text readability on the left */
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,
      rgba(10,22,40,0.85) 0%,
      rgba(10,22,40,0.6) 35%,
      rgba(10,22,40,0.2) 60%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(10,22,40,0.4) 0%,
      transparent 30%,
      transparent 70%,
      rgba(10,22,40,0.6) 100%);
  pointer-events:none}

/* Content — left-aligned, vertically centered */
.hero-content{position:relative;z-index:2;max-width:660px;padding:0 80px;text-align:left}

/* Headline */
.hero-h1{font-size:clamp(44px,6.5vw,82px);font-weight:900;line-height:1.05;letter-spacing:-0.04em;color:#fff;opacity:0;animation:fadeUp .9s .5s forwards}
.hero-h1 .gr{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;display:block;filter:drop-shadow(0 2px 12px rgba(79,70,229,0.25))}

/* Subtitle */
.hero-sub{font-size:17px;color:rgba(200,210,230,0.75);line-height:1.85;font-weight:400;max-width:520px;margin:32px 0 0;opacity:0;animation:fadeUp .8s .75s forwards}

/* CTAs */
.hero-actions{display:flex;gap:16px;margin-top:44px;opacity:0;animation:fadeUp .8s .95s forwards}

/* Hero-specific button overrides for dark bg */
.hero .btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.25);color:#fff;box-shadow:none}
.hero .btn-secondary:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.45);box-shadow:0 4px 24px rgba(255,255,255,0.08);transform:translateY(-3px)}

/* ── Responsive ── */
@media(max-width:1024px){
  .hero-content{padding:0 40px;max-width:600px}
  .hero-h1{font-size:clamp(44px,5.5vw,68px)}
  .hero-sub{max-width:480px}
}

@media(max-width:768px){
  .hero{min-height:92vh;min-height:92svh;align-items:flex-end;padding-bottom:max(72px,calc(env(safe-area-inset-bottom) + 40px))}
  .hero-content{padding:0 24px;max-width:100%}
  .hero-h1{font-size:44px;line-height:1.08;letter-spacing:-0.02em}
  .hero-sub{font-size:15px;line-height:1.75;margin-top:22px;max-width:100%}
  .hero-actions{flex-direction:column;gap:12px}
  .hero-overlay{background:
    linear-gradient(180deg,
      rgba(10,22,40,0.65) 0%,
      rgba(10,22,40,0.3) 35%,
      rgba(10,22,40,0.45) 65%,
      rgba(10,22,40,0.88) 100%) !important}
}

@media(max-width:420px){
  .hero{min-height:88vh;min-height:88svh;padding-bottom:max(48px,calc(env(safe-area-inset-bottom) + 28px))}
  .hero-content{padding:0 20px}
  .hero-h1{font-size:36px;letter-spacing:-0.025em}
  .hero-sub{font-size:14px;line-height:1.7;margin-top:18px}
  .hero-actions{margin-top:28px;gap:10px}
}