/* ═══ HERO ═══ */
.hero{position:relative;background:var(--cloud)}
.hero-swiper{height:clamp(620px,calc(100svh - var(--headH)),940px)}
.hero-swiper .swiper-slide{overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;height:100%;padding:3rem 0 6rem}
.hero-h{font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.08;color:var(--deep);margin:1.2rem 0 1.3rem}
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.75,.2,1)}
.swiper-slide-active .ln>span{transform:none}
.swiper-slide-active .ln:nth-child(2)>span{transition-delay:.12s}
.hero-p{color:var(--muted);font-size:18px;max-width:46ch;margin-bottom:1.8rem;opacity:0;transform:translateY(14px);transition:.7s .35s}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;opacity:0;transform:translateY(14px);transition:.7s .45s}
.hero-proof{display:flex;align-items:center;gap:.9rem;margin-top:2.2rem;opacity:0;transition:.7s .6s}
.swiper-slide-active .hero-p,.swiper-slide-active .hero-cta,.swiper-slide-active .hero-proof{opacity:1;transform:none}
.hero-visual{position:relative;height:100%;min-height:420px}
.swiper-slide-active .hv-main{animation:kb 8s ease-out forwards}
   .hv-main{position:absolute;inset:0;border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 4px;overflow:hidden;background-size:cover!important;background-position:center;border:1px solid var(--line)}
   @keyframes kb{from{background-size:112%}to{background-size:100%}}
.hv-chip{position:absolute;display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:99px;padding:.55rem 1rem;font-size:14px;font-weight:700;color:var(--deep);box-shadow:0 14px 30px rgba(25,68,82,.12);opacity:0;transition:.6s .7s}
.hv-chip i{color:var(--green)!important}
.hv-chip.a{top:8%;left:-4%}.hv-chip.b{bottom:10%;right:-3%;transition-delay:.85s}
.swiper-slide-active .hv-chip{opacity:1}
.hv-no{position:absolute;bottom:-1.6rem;left:-.6rem;font-family:var(--disp);font-size:5.5rem;color:transparent;-webkit-text-stroke:1px var(--sky);opacity:.85}
.hero-foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:1.4rem;padding-bottom:1.4rem;z-index:20}
.hf-count b{color:var(--green);font-weight:700}
.hf-bar{flex:1;height:2px;background:var(--line-2);position:relative;overflow:hidden}
.hf-bar span{position:absolute;inset:0;background:var(--green);transform-origin:left;transform:scaleX(0)}
.sq-btn{width:46px;height:46px;border:1px solid var(--line-2);background:#fff;border-radius:12px 12px 12px 3px;color:var(--deep);transition:.3s}
.sq-btn:hover{background:var(--green);border-color:var(--green);color:#fff}
.sq-btn i{color: var(--deep)!important}
/* ═══ MARQUEE ═══ */
.marquee-band{border-block:1px solid var(--line);background:#fff;overflow:hidden;padding:.9rem 0}
.marquee-track{display:flex;gap:2.6rem;width:max-content;animation:mq 30s linear infinite}
.marquee-track span{font-family:var(--disp);font-size:1rem;color:var(--deep);white-space:nowrap}
.marquee-track i{color:var(--sky)!important;font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}
/* ═══ HERO — MOBILE RESPONSIVE PATCH ═══ */
@media (max-width:991.98px){
  /* let slides size to content instead of fixed 620px+ */
  .hero-swiper{height:auto}

  /* stack: image first, then copy */
  .hero-grid{grid-template-columns:1fr;gap:2.2rem;height:auto;padding:2.4rem 0 5.6rem}
  .hero-visual{order:-1;height:280px;min-height:0}

  /* keep chips INSIDE the frame */
  .hv-chip{font-size:12px;padding:.45rem .85rem;box-shadow:0 10px 22px rgba(25,68,82,.14)}
  .hv-chip.a{top:12px;left:12px}
  .hv-chip.b{bottom:12px;right:12px}
  .hv-no{font-size:3.6rem;bottom:-1.1rem;left:0}

  /* tighter copy rhythm */
  .hero-h{margin:1rem 0}
  .hero-p{font-size:16px;margin-bottom:1.4rem}
  .hero-proof{margin-top:1.5rem}

  /* footer controls */
  .hero-foot{gap:1rem;padding-bottom:1.1rem}
  .sq-btn{width:42px;height:42px}
}

@media (max-width:575.98px){
  .hero-grid{padding:1.8rem 0 5.2rem;gap:1.6rem}
  .hero-visual{height:230px}
  .hero-h{font-size:2.15rem;line-height:1.12}
  .hero-cta .btn-solid,.hero-cta .btn-line{padding:.7rem 1.3rem;font-size:.88rem}
  .hv-chip.b{display:none}          /* one chip is enough on tiny screens */
  .hf-bar{display:none}             /* count + arrows stay clean */
  .hf-count{margin-right:auto}
}