/* Homepage hero: video background, headline, and an animated "illustrative" stat card.
   Structure, spacing, colour and animation timings follow a supplied design spec exactly
   (see the commit that added this file for the source); copy, primary-button colour and
   the stat card's content were adapted to OZ Media Digital's existing brand and to the
   site's compliance rules (no unverified numbers presented as real, media-src stays
   self-hosted). The site's own <header> is unchanged and sits above this section as usual;
   this file does not touch it.
   Breakpoints match the spec's sm/md/lg: 640px / 768px / 1024px. */

.hero-elevate { position: relative; width: 100%; overflow: hidden; background: #080A19; padding: 96px 0 88px; isolation: isolate; }
.hero-elevate-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hero-elevate-inner { position: relative; z-index: 1; width: 100%; max-width: 1800px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .hero-elevate-inner { padding: 0 32px; } }
@media (min-width: 768px) { .hero-elevate-inner { padding: 0 82px; } }

.hero-elevate-row { display: flex; flex-direction: column; align-items: center; gap: 40px; }
@media (min-width: 1024px) { .hero-elevate-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; } }

.hero-elevate-copy { max-width: 593px; width: 100%; }

.hero-elevate-badge { display: inline-flex; align-items: center; gap: 8px; color: #ff6b75; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid rgba(203,31,44,0.55); background: rgba(203,31,44,0.14); border-radius: 999px; padding: 9px 18px; margin-bottom: 20px; }

.hero-elevate-copy h1 { color: #fff; font-weight: 400; font-size: 36px; line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 20px; }
@media (min-width: 640px) { .hero-elevate-copy h1 { font-size: 52px; margin-bottom: 32px; } }
@media (min-width: 768px) { .hero-elevate-copy h1 { font-size: 64px; } }
@media (min-width: 1024px) { .hero-elevate-copy h1 { font-size: 72px; } }
.hero-elevate-copy h1 strong { font-weight: 800; background: linear-gradient(120deg, #ff3b47, #cb1f2c); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero-elevate-sub { color: rgba(255,255,255,0.8); font-weight: 450; font-size: 16px; line-height: 1.3; max-width: 370px; margin-bottom: 28px; }
@media (min-width: 640px) { .hero-elevate-sub { font-size: 18px; margin-bottom: 40px; } }
@media (min-width: 768px) { .hero-elevate-sub { font-size: 20px; } }

.hero-elevate-cta { display: flex; flex-direction: column; gap: 12px; }
.hero-elevate-cta .btn { width: 100%; }
@media (min-width: 480px) { .hero-elevate-cta { flex-direction: row; flex-wrap: wrap; gap: 16px; } .hero-elevate-cta .btn { width: auto; } }
.hero-elevate-cta .btn { height: 46px; padding: 0 20px; border-radius: 12px; font-size: 14px; font-weight: 450; line-height: 15.5px; }
@media (min-width: 640px) { .hero-elevate-cta .btn { height: 51px; padding: 0 27px; font-size: 15.5px; } }
.hero-elevate-cta .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 16px 46px -14px rgba(203,31,44,0.95); }
.hero-elevate-cta .btn-accent:hover { opacity: 0.9; }
.hero-elevate-cta .btn-outline-light { border: 1px solid #fff; background: transparent; color: #fff; }
.hero-elevate-cta .btn-outline-light:hover { opacity: 0.8; }

.hero-elevate-note { margin: 16px 0 0; color: rgba(255,255,255,0.66); font-size: 0.92rem; }

/* ---------- stat card ---------- */
.hero-elevate-cardwrap { width: 100%; max-width: 405px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.hero-elevate-cardwrap .hero-card { width: 100%; }
.hero-elevate-cardwrap .hero-badges { justify-content: space-between; }
@media (min-width: 1024px) { .hero-elevate-cardwrap { margin: 0; } }


/* ---------- entrance animations: pure CSS, revealed only via animation-delay + forwards ---------- */
.he-in { opacity: 0; }
.he-up    { animation: heFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.he-down  { animation: heFadeDown 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.he-scale { animation: heFadeScale 0.9s cubic-bezier(0.16,1,0.3,1) forwards; }

@keyframes heFadeUp    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heFadeDown  { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heFadeScale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .he-in, .he-up, .he-down, .he-scale { animation: none !important; opacity: 1 !important; transform: none !important; }
}