/* ══════════════════════════════════════════════════════════
   HERO v4 — kinetic statement → real CDL licences lock in →
   product rises → flow plays → loops.
   ══════════════════════════════════════════════════════════ */

/* the licence ring sits behind the copy but in front of the grid */
.lic-field{position:absolute;inset:0;z-index:14;pointer-events:none;overflow:hidden}

.lic{
  position:absolute;
  left:var(--x); top:var(--y);
  width:var(--w);
  transform:translate(-50%,-50%) rotate(var(--r)) scale(.86);
  opacity:0;
  filter:drop-shadow(0 26px 44px rgba(var(--shd-rgb),calc(.62*var(--shd-k)))) drop-shadow(0 4px 10px rgba(var(--shd-rgb),calc(.5*var(--shd-k))));
  will-change:transform,opacity,filter;
}
.lic img{width:100%;height:auto;display:block;border-radius:9px}

/* once the product takes over, the licences step back into atmosphere */
.lic.recede{filter:drop-shadow(0 20px 40px rgba(var(--shd-rgb),calc(.6*var(--shd-k)))) blur(1.4px) saturate(.85) brightness(var(--lic-dim,.62))}

/* copy needs to win over the licence field */
.stage{z-index:24}
.chips{z-index:30}
.copy h1 em{display:inline-block}

/* a soft well behind the headline so type never fights a licence */
.hero::after{
  content:'';position:absolute;left:50%;top:0;width:min(1150px,96vw);height:74vh;
  transform:translateX(-50%);z-index:18;pointer-events:none;
  background:radial-gradient(ellipse 52% 46% at 50% 40%,
    rgba(var(--bg-rgb),.93) 0%, rgba(var(--bg-rgb),.74) 40%, rgba(var(--bg-rgb),.28) 68%, rgba(var(--bg-rgb),0) 100%);
}

/* kinetic lines sit above everything during phase 1 */
.kin{z-index:40}

@media (max-width:820px){
  .hero::after{width:100vw;height:66vh;
    background:radial-gradient(ellipse 76% 40% at 50% 38%,
      rgba(var(--bg-rgb),.95) 0%, rgba(var(--bg-rgb),.8) 46%, rgba(var(--bg-rgb),.3) 74%, rgba(var(--bg-rgb),0) 100%)}
}


:root[data-theme="light"]{--lic-dim:.94}


/* ══════════════════════════════════════════════════════════
   MOBILE HERO — declutter, keep licences + product + one-at-a-time chips
   ══════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* header: drop the redundant CTA (the hero already has one), keep lang + theme */
  .hdr{gap:12px;padding:0 16px}
  .hdr .btn{display:none}
  .langsw{transform:scale(.92);transform-origin:right center}

  /* kinetic statement never runs past the edge */
  .kin-line{font-size:clamp(30px,8.4vw,72px);padding:0 4vw}

  /* the product screen: a touch bigger, centred, the hero of the lower half */
  .scene{margin-top:22px;perspective:1200px}
  .screen{width:100%}
  .screen-glare{opacity:.5}

  /* driver card: readable, anchored over the dashboard, never on the copy or header */
  .dcard{left:6% !important;right:auto !important;top:auto !important;bottom:96px !important;width:66vw;max-width:270px}

  /* CHIPS → single bottom "toast" slot, shown one at a time by JS */
  .chips .chip{
    left:50% !important; right:auto !important; top:auto !important;
    bottom:250px !important;
    transform:translateX(-50%) translateY(12px) scale(.94);
    max-width:88vw; justify-content:center; font-size:13.5px; padding:10px 16px;
  }
  .chips .chip.c7{bottom:250px !important}
}

@media (max-width:700px) and (max-height:740px){
  .chips .chip{bottom:210px !important}
}