/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
  padding-top: calc(var(--header-h) * .4);
}

.hero__inner{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  width: 100%;
}

.hero__title{
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin-bottom: 22px;
}

.hero__title .line{ display: block; overflow: hidden; padding-bottom: .1em; }
.hero__title .word{ display: inline-block; overflow: hidden; }
.hero__title .word span{
  display: inline-block;
  will-change: transform;
}

.hero__title .accent{
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead{
  font-size: 1.15rem;
  color: var(--text-2);
  max-width: 46ch;
  margin-bottom: 34px;
}

.hero__ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}

.hero__stats{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 44px);
}

.stat{ display: flex; flex-direction: column; gap: 2px; }
.stat strong{
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-0);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat span{ font-size: .82rem; color: var(--text-2); }

.hero__visual{
  position: relative;
  height: clamp(360px, 42vw, 560px);
  perspective: 1200px;
}

.hero__card{
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), var(--glow-red);
  border: 1px solid var(--border-strong);
  will-change: transform;
}

.hero__card img{ width: 100%; height: 100%; object-fit: cover; }

.hero__card--main{
  width: 62%; height: 72%;
  top: 6%; left: 10%;
  z-index: 3;
  animation: floatY 7s var(--ease-in-out) infinite;
}
.hero__card--a{
  width: 46%; height: 46%;
  bottom: 2%; right: 0;
  z-index: 4;
  animation: floatY 8.5s var(--ease-in-out) infinite .4s;
}
.hero__card--b{
  width: 34%; height: 34%;
  top: -2%; right: 6%;
  z-index: 2;
  animation: floatY 6.5s var(--ease-in-out) infinite .8s;
}

@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-16px); }
}

.hero__glow-ring{
  position: absolute;
  inset: 8% 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,59,78,.25), transparent 65%);
  filter: blur(40px);
  z-index: 1;
}

.hero__scroll-cue{
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__scroll-cue i{ animation: bounceDown 1.8s ease-in-out infinite; }

@keyframes bounceDown{
  0%, 100%{ transform: translateY(0); opacity: .6; }
  50%{ transform: translateY(8px); opacity: 1; }
}