/* Jompom Hero (3D toys, .btn, .actions come from base.css) */
.jp-hero{position:relative;overflow:hidden;color:#fff;padding:140px 0 150px;
  background:
   radial-gradient(60% 70% at 78% 42%,rgba(67,186,255,.95),rgba(67,186,255,0) 70%),
   linear-gradient(135deg,#1d8bca 0%,#0b5d8f 55%,#08466c 100%)}
.jp-hero .hr-dots{position:absolute;inset:-60px;background-image:radial-gradient(rgba(255,255,255,.16) 1.6px,transparent 1.8px);background-size:28px 28px;transform:translate3d(var(--px,0),var(--py,0),0);pointer-events:none}
.jp-hero .hr-squig{position:absolute;pointer-events:none;fill:none;stroke-linecap:round}
.jp-hero .hr-squig path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:jp-hero-draw 2.4s .5s var(--out) forwards}
.jp-hero .hr-squig.a{left:-60px;bottom:40px;width:520px;stroke:var(--sun);stroke-width:14;opacity:.9}
.jp-hero .hr-squig.b{right:-80px;top:110px;width:380px;stroke:rgba(255,255,255,.35);stroke-width:10}
@keyframes jp-hero-draw{to{stroke-dashoffset:0}}
.jp-hero .hr-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center}
.jp-hero .hr-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;border:2px solid rgba(255,255,255,.18)}
.jp-hero .hr-eyebrow i{width:12px;height:12px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 0 rgba(252,185,0,.7);animation:jp-hero-ping 1.8s infinite}
@keyframes jp-hero-ping{70%{box-shadow:0 0 0 10px rgba(252,185,0,0)}100%{box-shadow:0 0 0 0 rgba(252,185,0,0)}}
.jp-hero .hr-title{color:#fff;font-size:clamp(42px,6vw,92px);line-height:.92;margin:24px 0 26px;letter-spacing:-.045em}
.jp-hero .hr-title .w{display:inline-block;transform-origin:50% 100%}
.jp-hero .hr-title .l2{display:block;color:var(--ink);margin-top:.08em}
.jp-hero .hr-title .l2 .w{background:#fff;padding:0 .14em .06em;border-radius:.16em;margin-right:.06em;box-shadow:.06em .06em 0 var(--ink)}
.jp-hero .hr-lead{font-size:clamp(16px,1.5vw,19px);max-width:34em;color:#e9f6ff}
.jp-hero .actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}

@media (max-width:980px){
  .jp-hero{padding:118px 0 130px}
  .jp-hero .hr-grid{grid-template-columns:minmax(0,1fr)}
  .jp-hero .scene{width:min(440px,100%)}
}
@media (max-width:560px){
  .jp-hero .actions .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .jp-hero .hr-squig path{stroke-dashoffset:0}
}