/* =========================================================
   NEVATV — Hero v2
   Two background systems (aurora | signal) x two layouts (centered | cinematic)
   Neon-glow futuristic stat numerals.
   Everything is CSS/SVG — no canvas, no particle loop — so it stays
   cheap on mid-range phones.
   ========================================================= */

:root{
  /* Was 'Orbitron','Rajdhani' - neither is loaded any more, so these
     silently fell back to a code font. Labels now use the body face. */
  --font-tech: var(--font-label);
  --font-lux: var(--font-num);   /* same face as prices — see styles.css */
  --hero-glow-1: rgba(212,175,55,0.30);
  --hero-glow-2: rgba(242,211,116,0.18);
}

/* ---------------------------------------------------------
   SHELL
   --------------------------------------------------------- */
.heroV2{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
}
.heroV2 .hero-inner{
  position: relative;
  z-index: 3;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* Vignette keeps the edges dark so text never fights the glow */
.heroV2::after{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(10,10,11,0.62) 0%, rgba(10,10,11,0.22) 48%, transparent 72%),
    radial-gradient(120% 95% at 50% 40%, transparent 42%, rgba(10,10,11,0.62) 76%, rgba(10,10,11,0.95) 100%);
}

/* ---------------------------------------------------------
   BACKGROUND A — AURORA
   Layered radial blooms that drift slowly.
   --------------------------------------------------------- */
.bg-aurora{ position:absolute; inset:-20% -10%; z-index:0; pointer-events:none; }
.bg-aurora .blob{
  position:absolute;
  border-radius:50%;
  filter: blur(66px);
  opacity:0.9;
  will-change: transform;
}
/* Blobs are pushed toward the edges so the centre stays dark and the
   headline never has to fight the glow. */
.bg-aurora .b1{
  width:44vw; height:44vw; min-width:340px; min-height:340px;
  left:-8%; top:-4%;
  background: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.95), rgba(212,175,55,0.26) 40%, transparent 66%);
  animation: drift1 22s ease-in-out infinite alternate;
}
.bg-aurora .b2{
  width:38vw; height:38vw; min-width:290px; min-height:290px;
  right:-6%; top:-10%;
  background: radial-gradient(circle at 50% 50%, rgba(242,211,116,0.78), rgba(169,127,31,0.20) 42%, transparent 66%);
  animation: drift2 27s ease-in-out infinite alternate;
}
.bg-aurora .b3{
  width:56vw; height:34vw; min-width:360px; min-height:230px;
  left:20%; bottom:-18%;
  background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.6), transparent 62%);
  animation: drift3 31s ease-in-out infinite alternate;
}
/* faint warm horizon line under the content */
.bg-aurora .horizon{
  position:absolute; left:0; right:0; bottom:14%;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
  filter: blur(0.5px);
}
@keyframes drift1{ from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(6%,4%,0) scale(1.12);} }
@keyframes drift2{ from{transform:translate3d(0,0,0) scale(1.05);} to{transform:translate3d(-7%,6%,0) scale(0.95);} }
@keyframes drift3{ from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-5%,-5%,0) scale(1.15);} }

/* ---------------------------------------------------------
   BACKGROUND B — SIGNAL WAVES
   Concentric broadcast arcs pulsing outward from the logo mark's
   origin, plus a faint transmission grid.
   --------------------------------------------------------- */
.bg-signal{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-signal .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(212,175,55,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 78%);
}
.bg-signal .core{
  position:absolute; left:50%; top:46%;
  width:min(64vw, 560px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(212,175,55,0.46), rgba(212,175,55,0.10) 42%, transparent 66%);
  filter: blur(46px);
}
.bg-signal .ring{
  position:absolute; left:50%; top:46%;
  width:min(62vw, 560px); aspect-ratio:1;
  margin-left:calc(min(62vw,560px) / -2);
  margin-top:calc(min(62vw,560px) / -2);
  border-radius:50%;
  border:1.5px solid rgba(212,175,55,0.55);
  box-shadow: 0 0 26px rgba(212,175,55,0.22), inset 0 0 26px rgba(212,175,55,0.12);
  opacity:0;
  animation: emit 6s linear infinite;
  will-change: transform, opacity;
}
.bg-signal .ring:nth-child(3){ animation-delay:0s; }
.bg-signal .ring:nth-child(4){ animation-delay:2s; }
.bg-signal .ring:nth-child(5){ animation-delay:4s; }
/* two still rings so the composition never looks empty between pulses */
.bg-signal .ring-static{
  position:absolute; left:50%; top:46%;
  border-radius:50%;
  border:1px solid rgba(212,175,55,0.16);
  transform:translate(-50%,-50%);
}
.bg-signal .rs1{ width:min(46vw,420px); aspect-ratio:1; }
.bg-signal .rs2{ width:min(78vw,700px); aspect-ratio:1; border-color:rgba(212,175,55,0.09); }

@keyframes emit{
  0%   { transform:scale(0.35); opacity:0; }
  12%  { opacity:0.75; }
  100% { transform:scale(1.9); opacity:0; }
}

/* ---------------------------------------------------------
   TYPE
   --------------------------------------------------------- */
.heroV2 .kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-tech);
  font-weight:800;
  font-size:0.68rem;
  letter-spacing:3.6px;
  text-transform:uppercase;
  color: var(--gold);
  padding:8px 16px;
  border:1px solid rgba(212,175,55,0.28);
  border-radius:999px;
  background: rgba(212,175,55,0.06);
  backdrop-filter: blur(4px);
  text-shadow: 0 0 14px rgba(212,175,55,0.45);
}
.heroV2 .kicker .live-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--gold);
  box-shadow:0 0 0 0 rgba(212,175,55,0.7);
  animation: livepulse 2.2s ease-out infinite;
}
@keyframes livepulse{
  0%{ box-shadow:0 0 0 0 rgba(212,175,55,0.65); }
  70%{ box-shadow:0 0 0 9px rgba(212,175,55,0); }
  100%{ box-shadow:0 0 0 0 rgba(212,175,55,0); }
}

.heroV2 h1{
  font-family: var(--font-display);
  font-weight:400;
  line-height:0.92;
  letter-spacing:1.5px;
  margin:22px 0 0;
  font-size: clamp(3rem, 8.4vw, 6.6rem);
  text-transform:uppercase;
}
.heroV2 h1 .line2{
  display:block;
  background: linear-gradient(100deg, var(--gold-light), var(--gold) 42%, #8f6b18 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 26px rgba(212,175,55,0.35));
}
.heroV2 .sub{
  margin:24px auto 0;
  max-width:600px;
  font-size:clamp(1rem, 2.4vw, 1.16rem);
  color:var(--text-muted);
  line-height:1.65;
}

/* ---------------------------------------------------------
   NEON STAT NUMERALS
   --------------------------------------------------------- */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  margin-top:52px;
}
.stat{
  position:relative;
  padding:22px 10px 20px;
  border:1px solid rgba(212,175,55,0.16);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(212,175,55,0.07), rgba(19,19,22,0.5) 60%);
  overflow:hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.stat::before{
  content:"";
  position:absolute; left:50%; top:-1px; transform:translateX(-50%);
  width:56%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.85;
}
.stat:hover{ border-color:rgba(212,175,55,0.42); transform:translateY(-3px); }

.stat .val{
  display:block;
  font-family: var(--font-tech);
  font-weight:800;
  font-size:clamp(1.35rem, 3.4vw, 2.15rem);
  line-height:1.05;
  letter-spacing:0.5px;
  color:#FFF4CF;
  text-shadow:
    0 0 6px rgba(242,211,116,0.75),
    0 0 18px rgba(212,175,55,0.55),
    0 0 42px rgba(212,175,55,0.30);
}
.stat .cap{
  display:block;
  margin-top:9px;
  font-family:var(--font-body);
  font-size:0.74rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--text-faint);
}

/* ---------------------------------------------------------
   LUXURY VARIANT
   Where the neon style shouts, this one whispers: hairline rules
   instead of boxes, thin high-contrast numerals, and a soft halo
   rather than a neon burn.
   --------------------------------------------------------- */
.stat-strip.luxury{ gap:0; margin-top:58px; }

.stat-strip.luxury .stat{
  background:none;
  border:none;
  border-radius:0;
  padding:10px 18px 6px;
  /* hairline divider between items instead of a card outline */
  border-right:1px solid rgba(212,175,55,0.16);
}
.stat-strip.luxury .stat:last-child{ border-right:none; }
.stat-strip.luxury .stat::before{ display:none; }
.stat-strip.luxury .stat:hover{ transform:none; border-color:rgba(212,175,55,0.16); }

.stat-strip.luxury .val{
  font-family: var(--font-lux);
  font-weight:400;
  font-size:clamp(2.08rem, 5.4vw, 3.56rem);   /* x1.227: DM Serif digits run 19% shorter than Bodoni's did */
  letter-spacing:0.5px;
  line-height:1;
  background:linear-gradient(180deg, #FFF6DC 8%, var(--gold) 62%, #9C7620 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* soft halo, not a neon burn */
  filter: drop-shadow(0 0 16px rgba(212,175,55,0.35));
  text-shadow:none;
}
.stat-strip.luxury .cap{
  margin-top:12px;
  font-size:0.66rem;
  letter-spacing:2.6px;
  color:var(--text-faint);
}

/* A thin gold rule above the row ties it to the hairline dividers */
.stat-strip.luxury{
  position:relative;
  padding-top:26px;
}
.stat-strip.luxury::before{
  content:"";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(340px, 62%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,0.6), transparent);
}

/* ---------------------------------------------------------
   CTAs
   --------------------------------------------------------- */
.heroV2 .cta-wrap{
  margin-top:38px;
  display:flex; gap:14px; flex-wrap:wrap;
}
.heroV2 .trust-line{
  margin-top:26px;
  font-size:0.85rem;
  color:var(--text-faint);
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.heroV2 .trust-line b{ color:var(--gold); font-weight:700; }

/* ---------------------------------------------------------
   LAYOUT 1 — CENTERED
   --------------------------------------------------------- */
.layout-centered .hero-inner{
  text-align:center;
  padding-top:104px;
  padding-bottom:96px;
}
.layout-centered .cta-wrap{ justify-content:center; }
.layout-centered .trust-line{ justify-content:center; }

/* ---------------------------------------------------------
   LAYOUT 2 — CINEMATIC (full viewport + scroll cue)
   --------------------------------------------------------- */
.layout-cinematic{ min-height:100svh; display:flex; align-items:center; }
.layout-cinematic .hero-inner{
  text-align:center;
  padding-top:120px;
  padding-bottom:120px;
  width:100%;
}
.layout-cinematic .cta-wrap{ justify-content:center; }
.layout-cinematic .trust-line{ justify-content:center; }
.layout-cinematic .stat-strip{ margin-top:56px; }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-tech); font-size:0.6rem; letter-spacing:2.6px;
  color:var(--text-faint); text-transform:uppercase;
}
.scroll-cue .bar{
  width:1px; height:34px;
  background:linear-gradient(180deg, rgba(212,175,55,0.7), transparent);
  animation: cue 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue{
  0%,100%{ transform:scaleY(0.35); opacity:.4; }
  50%    { transform:scaleY(1);    opacity:1; }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width: 760px){
  .stat-strip{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px; margin-top:40px; }

  /* In a 2-col grid the "last child" rule no longer lines up, so switch to
     right-borders on odd items only, and add a row divider. */
  .stat-strip.luxury{ gap:0 0; margin-top:44px; row-gap:22px; }
  .stat-strip.luxury .stat{ border-right:none; padding:8px 10px 4px; }
  .stat-strip.luxury .stat:nth-child(odd){ border-right:1px solid rgba(212,175,55,0.16); }
  .stat-strip.luxury .stat:nth-child(1),
  .stat-strip.luxury .stat:nth-child(2){ border-bottom:1px solid rgba(212,175,55,0.12); padding-bottom:20px; }

  .layout-centered .hero-inner{ padding-top:64px; padding-bottom:64px; }
  .layout-cinematic .hero-inner{ padding-top:80px; padding-bottom:96px; }
  .heroV2 h1{ letter-spacing:0.8px; }
  .heroV2 .cta-wrap .btn{ flex:1 1 100%; }
  .bg-aurora .blob{ filter: blur(52px); }
  .bg-signal .grid{ background-size:44px 44px; }
}
@media (max-width: 400px){
  .heroV2 .kicker{ font-size:0.6rem; letter-spacing:2px; padding:7px 13px; }
  .stat{ padding:17px 8px 15px; }
  .stat .cap{ font-size:0.66rem; letter-spacing:1px; }
}

/* Heavy blurs are the expensive part; drop them for reduced-motion users
   and keep everything static. */
@media (prefers-reduced-motion: reduce){
  .bg-aurora .blob,
  .bg-signal .ring,
  .scroll-cue .bar,
  .heroV2 .kicker .live-dot{ animation:none !important; }
  .bg-signal .ring{ opacity:0.22; transform:scale(1.25); }
}