#hero{position:relative;z-index:1;overflow:hidden;background:var(--hero-bg);color:var(--brand);margin-top:calc(-1 * var(--hdr-h));padding-top:var(--hdr-h)}
#hero .hero-defs{position:absolute;width:0;height:0;overflow:hidden}
#hero .hero-land{position:absolute;left:0;right:0;width:100%;pointer-events:none}
#hero .hero-land--d{top:0;bottom:0;height:100%}
#hero .hero-land--sky,#hero .hero-land--mtn{display:none}
#hero .hero-body{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}

/* badge, headline, sub */
#hero .hero-badge{margin-top:36px;height:34px;padding:0 16px 0 12px;gap:8px;font-size:14px;line-height:1;white-space:nowrap}
#hero .hero-badge-ico{width:16px;height:16px;color:var(--brand)}
#hero .hero-title{margin:22px 20px 0;text-align:center;font-size:clamp(36px,4.4444vw,64px);line-height:1.06;letter-spacing:-.03em;color:var(--ink-head)}
#hero .hero-word{color:var(--brand);display:inline-block;position:relative}
#hero .hero-word-in{display:inline-block}
#hero .hero-word-out{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none}
#hero .br-m{display:none}
#hero .hero-ul{position:relative;display:inline-block}
#hero .hero-ul-svg{position:absolute;left:0;bottom:-.22em;width:calc(100% - .53em);height:.31em;color:var(--brand);overflow:visible}
#hero .hero-sub{margin:30px 24px 0;max-width:640px;text-align:center;font-size:18px;line-height:1.5;color:var(--sub);text-wrap:pretty}

/* CTA + personas */
#hero .hero-cta{margin-top:34px;width:300px;max-width:calc(100% - 40px);height:52px;font-size:17px}
#hero .hero-personas{margin-top:12px;display:flex;gap:12px}
#hero .hero-personas .btn-soft{width:144px;height:44px;padding:0}

/* stat strip */
#hero .hero-stats{margin-top:40px;width:min(940px,calc(100% - 40px));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;background:rgba(255,255,255,.94);border:1px solid #E1E6EC;border-radius:20px;box-shadow:0 12px 40px rgba(20,40,60,.08);color:var(--ink-head);overflow:hidden}
#hero .stat{padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0}
#hero .stat + .stat{border-left:1px solid #E9EDF1}
#hero .stat-head{display:flex;align-items:flex-start;gap:10px}
#hero .stat-ico{flex:none;margin-top:1px;width:26px;height:26px}
#hero .stat-title{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
#hero .stat-sub{font-size:13.5px;line-height:1.4;color:var(--grey-mid);text-wrap:pretty}

/* mascot */
#hero .hero-mascot{margin-top:40px;width:236px;height:200px;position:relative;z-index:20;filter:drop-shadow(0 10px 16px rgba(20,40,60,.22))}
#hero .hero-mascot svg{position:absolute;inset:0;width:100%;height:100%}

/* card fan: 1em == 1px at 1440, scales down fluidly with the viewport */
#hero .hero-fan{position:relative;width:100%;display:flex;justify-content:center}
#hero .hero-fan--d{font-size:min(1px,calc(100vw / 1440));margin-top:-30em}
#hero .hero-fan--m{display:none}
#hero .fan-stage{position:relative;flex:none;width:1440em;height:470em;perspective:1600em}
#hero .fan-tilt{position:absolute;inset:0;transform:rotateX(10deg);transform-origin:50% 100%;transform-style:preserve-3d}
#hero .card{position:absolute;left:calc(var(--l) * 1em);top:calc(var(--t) * 1em);width:210em;height:270em;transform:rotate(var(--r));z-index:var(--z);border-radius:26em;background:#fff;padding:5em;box-shadow:0 18em 40em rgba(20,40,60,.22)}
#hero .card-in{position:relative;width:100%;height:100%;border-radius:21em;overflow:hidden;background:var(--g)}
#hero .card-in::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 45%,rgba(0,0,0,.14))}
#hero .card-star{position:absolute;top:12em;right:16em;color:#fff;font-size:16em;line-height:1}
#hero .card-obj{position:absolute;left:50%;top:42%;width:132em;height:132em;transform:translate(-50%,-50%)}
#hero .card-label{position:absolute;left:.842em;bottom:.737em;color:#fff;font-family:var(--font-display);font-weight:800;font-size:19em;line-height:1.05;text-shadow:0 .105em .316em rgba(0,0,0,.28);white-space:nowrap}
#hero .card--r .card-label{left:auto;right:.842em;text-align:right}
#hero .card--wide .card-label{width:5.79em}
/* ghost pills */
#hero .hero-ghosts{display:flex;gap:12px;margin:8px 0 56px;position:relative;z-index:2}

@media (max-width:900px){
  #hero .hero-land--d{display:none}
  #hero .hero-land--sky{display:block;top:0;bottom:0;height:100%}
  #hero .hero-land--mtn{display:block;bottom:0;height:640px}
  #hero .hero-badge{margin-top:18px;height:30px;padding:0 12px 0 10px;gap:6px;font-size:12px}
  #hero .hero-badge-ico{width:13px;height:13px}
  #hero .hero-title{margin:16px 20px 0;font-size:min(28px,7.4666vw);line-height:1.1;white-space:nowrap}
  #hero .br-d{display:none}
  #hero .br-m{display:inline}
  #hero .hero-ul-svg{bottom:-.286em;width:calc(100% - .571em);height:.393em}
  #hero .hero-ul-svg path{stroke-width:8}
  #hero .hero-sub{margin:18px 24px 0;font-size:15px}
  #hero .hero-cta{margin-top:22px;width:335px;height:50px;font-size:16px}
  #hero .hero-personas{margin-top:10px;flex-direction:column;gap:8px;width:min(335px,calc(100% - 40px))}
  #hero .hero-personas .btn-soft{width:100%}
  #hero .hero-stats{margin-top:26px;width:min(335px,calc(100% - 40px));grid-template-columns:1fr 1fr;border-radius:18px}
  #hero .stat{padding:16px 16px 18px;gap:8px}
  #hero .stat + .stat{border-left:0}
  #hero .stat:nth-child(2n){border-left:1px solid #E9EDF1}
  #hero .stat:nth-child(n+3){border-top:1px solid #E9EDF1}
  #hero .stat-head{gap:8px}
  #hero .stat-ico{margin-top:0;width:22px;height:22px}
  #hero .stat-title{font-size:20px;text-wrap:initial}
  #hero .stat-sub{font-size:12.5px}
  #hero .hero-mascot{margin-top:28px;width:176px;height:150px;filter:drop-shadow(0 8px 12px rgba(20,40,60,.22))}
  #hero .hero-fan--d{display:none}
  #hero .hero-fan--m{display:flex;font-size:1px;margin-top:-18em}
  #hero .hero-fan--m .fan-stage{width:375em;height:262em;perspective:1000em}
  #hero .hero-fan--m .fan-tilt{transform:rotateX(8deg);transform-style:flat}
  #hero .hero-fan--m .card{width:128em;height:166em;border-radius:20em;padding:4em;box-shadow:0 12em 28em rgba(20,40,60,.22)}
  #hero .hero-fan--m .card-in{border-radius:16em}
  #hero .hero-fan--m .card-obj{width:80em;height:80em}
  #hero .hero-fan--m .card-label{left:.8em;bottom:.667em;font-size:15em}
  #hero .hero-fan--m .card--r .card-label{left:auto;right:.8em}
  #hero .hero-ghosts{flex-direction:column;gap:8px;width:min(335px,calc(100% - 40px));margin:6px 0 32px}
  #hero .hero-ghosts .btn-ghost{width:100%}
}

/* --- motion (ANIM-A) ------------------------------------------------------
   transform/opacity/clip-path only; everything below is skipped under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  /* hero word: vertical roll (JS drives the transforms; clip hides the travelling words) */
  #hero .hero-word{clip-path:inset(-.2em -.3em)}
  #hero .hero-word-in,#hero .hero-word-out{will-change:transform,opacity}

  /* landscape: parallax layers (JS sets translateY) + drifting clouds */
  #hero .land-far,#hero .land-mid,#hero .land-near,#hero .hero-land--mtn{will-change:transform}
  #hero .land-clouds-hi{will-change:transform;animation:hero-cloud-hi 26s ease-in-out infinite}
  #hero .land-clouds-lo{will-change:transform;animation:hero-cloud-lo 22s ease-in-out infinite}
  @keyframes hero-cloud-hi{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-5px)}}
  @keyframes hero-cloud-lo{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,4px)}}

  /* stork: idle bob on the suitcase (blink is driven by JS via --stork-eye) */
  #hero .hero-mascot .mascot-stork{will-change:transform;animation:hero-stork-bob 3s ease-in-out infinite}
  @keyframes hero-stork-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

  /* card fan: poker deal on first view. Each card starts stacked at the deck (--dx/--dy), flies out in DOM order (--di), lands on its rotation (--r) */
  #hero .hero-fan:not(.is-in) .card{opacity:0}
  #hero .hero-fan.is-in .card{animation:hero-deal .62s cubic-bezier(.22,.9,.3,1.08) backwards;animation-delay:calc(var(--di,0) * 95ms)}
  @keyframes hero-deal{
    0%{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(-14deg) scale(.55)}
    12%{opacity:1}
    55%{transform:translate(calc(var(--dx,0px) * .28),calc(var(--dy,0px) * .28 - 34px)) rotate(calc(var(--r) - 10deg)) scale(1.03)}
    100%{opacity:1;transform:rotate(var(--r))}
  }
  #hero .card{transition:transform .18s ease,filter .18s ease}
  #hero .card:hover{transform:rotate(var(--r)) translateY(-8px);filter:brightness(1.06)}
}