/* =========================================================
   Hero CTA —— 新版 Explore 按钮（圆箭头图标款）
   结构在 bundle 里改的（.btn.btn--accent.btn--explore），
   这里只负责外观：
     · 药丸形 50px 高、左侧 31px 圆箭头图标 + 文案
     · 悬停：底色变亮 + 图标顺时针转 250°（1.5s）
     · 按下：整体缩到 0.97
   原 .btn 的「上滑填充」效果（:after）与箭头位移对本按钮关闭。

   尺寸规格：整组从 40px 版本等比放大 1.25×（40 → 50）
     高度 50 / 圆角 37.5 / 图标 31.25 / 内距 22.5·10 / 间距 12.5 / 字号 17.5
   ========================================================= */
.btn--explore{
  width:auto;min-width:137.5px;height:50px;
  display:inline-flex;align-items:center;justify-content:flex-start;gap:12.5px;
  padding:0 22.5px 0 10px;
  background-color:#C7FF3D;
  border:1px solid transparent;
  border-radius:37.5px;
  color:rgb(19,19,19);
  font-weight:500;font-size:17.5px;letter-spacing:.02em;
  box-shadow:6.25px 6.25px 12.5px rgba(0,0,0,.116);
  transition:background-color .5s var(--ease),box-shadow .5s var(--ease),
             transform .2s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}

/* 新按钮 50px，比旁边 50px 的「Get in touch」同高 → 整排垂直居中 */
.hero__cta{align-items:center}

/* 两颗按钮统一规格：同高 50px / 同圆角 37.5px / 同图标 31.25px / 同间距 12.5px */
.hero__cta .btn:not(.btn--explore){
  height:50px;border-radius:37.5px;
  align-items:center;gap:12.5px;
  padding:0 22.5px 0 25px;
  font-size:17.5px;
}
/* 右按钮的 ↗ 用原本的文字字形：放大到接近左按钮图标的大小，别显得像小一号 */
.hero__cta .btn:not(.btn--explore) .arrow{
  font-size:24px;line-height:1;flex:none;align-self:center;
}

.btn--explore:after{display:none}
.btn--explore:hover{
  background-color:rgb(192,255,20);
  color:rgb(19,19,19);border-color:transparent;
  box-shadow:6.25px 6.25px 20px rgba(0,0,0,.18);
}
.btn--explore:active{transform:scale(.97)}
.btn--explore .svgIcon{
  height:31.25px;width:31.25px;flex:none;display:block;
  transition:transform 1.5s var(--ease);
}
.btn--explore .svgIcon path{fill:rgb(19,19,19)}
.btn--explore:hover .svgIcon{transform:rotate(250deg)}
