/* ---------- shell ---------- */
.hero{
  position:relative;min-height:100svh;width:100%;
  display:flex;flex-direction:column;
  padding:var(--nav-h,5.5rem) clamp(1.25rem,4vw,3.5rem) 0;
  overflow:hidden;isolation:isolate;
}

/* background layer: a muted, looping video over a still poster fallback */
.hero-media{
  position:absolute;inset:0;z-index:-2;
  background:url("../assets/img/hero-poster.jpg") center/cover no-repeat;
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none;}   /* show the still poster instead of the moving video */
}
/* bottom legibility gradient so the headline and band stay readable over the photo */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent 48%, oklch(0.28 0 0 / .5) 74%, oklch(0.16 0 0 / .82) 100%);
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    oklch(0.12 0 0 / calc(var(--scrim)*0.9)) 0%,
    oklch(0.12 0 0 / calc(var(--scrim)*0.24)) 40%,
    oklch(0.12 0 0 / calc(var(--scrim)*1)) 100%);
}

/* ---------- main split ---------- */
.main{
  position:relative;flex:1;
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,2.1fr);
  align-items:start;gap:clamp(1.5rem,4vw,3rem);
  padding:clamp(3rem,7vh,5.5rem) 0 clamp(2rem,5vh,4rem);
}
.main-left{
  display:flex;flex-direction:column;align-items:flex-start;
  padding-top:clamp(.5rem,2vw,1.25rem);
}
.lede{
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  max-width:19ch;
  color:oklch(1 0 0 / .82);
  font-size:clamp(1.0625rem,1.6vw,1.375rem);
  font-weight:400;line-height:1.35;letter-spacing:-.012em;
}

h1{
  margin:0 0 0 32px;color:#fff;
  font-size:clamp(2rem,7.2vw,6.25rem);
  font-weight:600;line-height:1.16;
  letter-spacing:-.035em;
  text-shadow:0 1px 48px oklch(0.12 0 0 / .32);
}
h1 .accent{
  color:oklch(1 0 0 / .48);
}

/* hero CTAs (Book a Demo, Try Free) turn orange on hover; the ghost Login is left as-is */
.hero .luma-btn:not(.ghostlight):hover{background:#FF6001;color:#fff;}

/* ---------- bottom band ---------- */
.band{
  position:relative;
  padding-bottom:clamp(1.75rem,4vh,2.75rem);
}
.band-labels{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding:1.125rem 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.band-label{
  color:oklch(1 0 0 / .88);
  font-size:clamp(.875rem,1.4vw,1.0625rem);font-weight:400;
  letter-spacing:-.005em;
}
.band-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding-top:clamp(1.5rem,4vh,2.5rem);
}
.stat-value{
  display:block;color:#fff;
  font-size:clamp(1.5rem,3.1vw,2.5rem);
  font-weight:600;line-height:1.05;letter-spacing:-.03em;
  text-wrap:balance;
}
.stat-caption{
  display:block;margin-top:.5rem;
  color:oklch(1 0 0 / .68);
  font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;line-height:1.45;
}

/* ---------- motion ---------- */
@keyframes rise{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}
.main-left,h1,.band-labels,.band-stats{
  animation:rise .85s cubic-bezier(.16,1,.3,1) both;
}
h1{animation-delay:.06s;}
.main-left{animation-delay:.18s;}
.band-labels{animation-delay:.28s;}
.band-stats{animation-delay:.36s;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .main{grid-template-columns:1fr;gap:2rem;}
  .main-left{order:2;padding-top:0;}
  h1{order:1;margin-left:0;}
  .lede{max-width:34ch;}
}
@media (max-width:620px){
  .brand img{height:1.75rem;}
  .band-labels{grid-template-columns:1fr;gap:.5rem;}
  .band-stats{grid-template-columns:1fr;gap:1.5rem;}
}