/* ===== Glass button system =====
   Translucent surfaces with backdrop blur, fine borders,
   inner light edge and a soft emerald bloom on hover.
   ================================================================ */

:root{
  --btn-radius:4px;
  --btn-ease:cubic-bezier(.2,.8,.25,1);
}

/* ---------- PRIMARY (emerald glass) ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-h);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.03em;
  padding:14px 26px;
  border-radius:var(--btn-radius);
  cursor:pointer;
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  color:#eafff7;
  background:linear-gradient(160deg,rgba(42,151,120,.42) 0%,rgba(42,151,120,.22) 100%);
  border:1px solid rgba(127,231,196,.38);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.22),
    inset 0 -1px 0 0 rgba(0,0,0,.15),
    0 6px 20px -8px rgba(42,151,120,.35);
  transition:background .28s var(--btn-ease),border-color .28s var(--btn-ease),
             box-shadow .28s var(--btn-ease),transform .22s var(--btn-ease),color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
/* sheen sweep */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--btn-ease);
}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{
  color:#fff;
  background:linear-gradient(160deg,rgba(42,151,120,.62) 0%,rgba(42,151,120,.34) 100%);
  border-color:rgba(127,231,196,.65);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.3),
    inset 0 -1px 0 0 rgba(0,0,0,.15),
    0 14px 34px -12px rgba(42,151,120,.6),
    0 0 0 1px rgba(42,151,120,.18);
}
.btn:active{
  transform:translateY(0);
  background:linear-gradient(160deg,rgba(42,151,120,.7) 0%,rgba(42,151,120,.4) 100%);
  box-shadow:inset 0 2px 8px 0 rgba(0,0,0,.28),0 3px 10px -6px rgba(42,151,120,.4);
}
.btn:focus-visible{outline:2px solid rgba(127,231,196,.9);outline-offset:3px}

/* ---------- GHOST (neutral glass) ---------- */
.btn-ghost,.btn-ghost-light{
  color:var(--ink);
  background:linear-gradient(160deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.16),
    0 6px 18px -10px rgba(0,0,0,.5);
}
.btn-ghost:hover,.btn-ghost-light:hover{
  color:#fff;
  background:linear-gradient(160deg,rgba(42,151,120,.26) 0%,rgba(42,151,120,.1) 100%);
  border-color:rgba(127,231,196,.5);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.22),
    0 14px 30px -14px rgba(42,151,120,.45);
}
.btn-ghost:active,.btn-ghost-light:active{
  box-shadow:inset 0 2px 8px 0 rgba(0,0,0,.3);
}

/* ghost on light sections */
.v2band.paper .btn-ghost,.v2band.paper2 .btn-ghost{
  color:var(--ink-d);
  background:linear-gradient(160deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.55) 100%);
  border:1px solid rgba(15,34,52,.12);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.9),0 6px 18px -10px rgba(15,34,52,.25);
}
.v2band.paper .btn-ghost:hover,.v2band.paper2 .btn-ghost:hover{
  background:linear-gradient(160deg,rgba(42,151,120,.16) 0%,rgba(42,151,120,.06) 100%);
  border-color:rgba(42,151,120,.45);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.9),0 14px 28px -14px rgba(42,151,120,.35);
}

/* ---------- size variants ---------- */
.btn-sm{padding:10px 18px;font-size:.8rem}
.btn-full{width:100%;padding:16px 24px;font-size:.98rem;margin-top:10px}

/* ---------- NAV CTA ---------- */
.navcta{
  position:relative;
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-h);font-weight:600;
  border-radius:var(--btn-radius);
  color:#eafff7!important;
  overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(42,151,120,.42) 0%,rgba(42,151,120,.2) 100%);
  border:1px solid rgba(127,231,196,.4);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.2),0 4px 14px -8px rgba(42,151,120,.4);
  transition:background .28s var(--btn-ease),border-color .28s var(--btn-ease),
             box-shadow .28s var(--btn-ease),transform .22s var(--btn-ease);
}
.navcta:hover{
  color:#fff!important;
  background:linear-gradient(160deg,rgba(42,151,120,.62) 0%,rgba(42,151,120,.32) 100%);
  border-color:rgba(127,231,196,.68);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.28),0 10px 26px -10px rgba(42,151,120,.55);
}
.navcta:active{transform:translateY(0);box-shadow:inset 0 2px 7px 0 rgba(0,0,0,.25)}

/* ---------- catalogue tabs ---------- */
.cat-tab{
  font-family:var(--font-h);font-weight:600;
  border-radius:var(--btn-radius);
  padding:12px 20px;
  color:var(--muted);
  background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.12);
  transition:background .25s var(--btn-ease),border-color .25s var(--btn-ease),color .2s ease,transform .2s var(--btn-ease);
  cursor:pointer;
}
.cat-tab:hover{color:var(--ink);transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.cat-tab.is-active{
  color:#eafff7;
  background:linear-gradient(160deg,rgba(42,151,120,.5) 0%,rgba(42,151,120,.24) 100%);
  border-color:rgba(127,231,196,.55);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.22),0 8px 22px -12px rgba(42,151,120,.5);
}

/* ---------- subnav pills ---------- */
.subnav a{
  border-radius:var(--btn-radius);
  background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.12);
  transition:background .25s var(--btn-ease),border-color .25s var(--btn-ease),color .2s ease,transform .2s var(--btn-ease);
}
.subnav a:hover,.subnav a.active{
  color:#eafff7;
  background:linear-gradient(160deg,rgba(42,151,120,.46) 0%,rgba(42,151,120,.2) 100%);
  border-color:rgba(127,231,196,.5);
  transform:translateY(-1px);
}

/* ---------- card CTA links ---------- */
.pcard-cta,.sl-go{transition:transform .2s var(--btn-ease),color .2s ease}
.pcard:hover .pcard-cta{transform:translateX(2px)}

/* ---------- shape unification ---------- */
.nav-left>a,.nav-right>a,.nav-drop-toggle{border-radius:var(--btn-radius)}
.btn,.btn-sm,.btn-full,.btn-ghost,.btn-ghost-light,.navcta,.cat-tab,.subnav a{border-radius:var(--btn-radius)!important}
.nav-menu,.nav-mega-menu{border-radius:6px}
.rfq-form input,.rfq-form textarea{border-radius:var(--btn-radius)}

/* ---------- sizing corrections ---------- */
@media(min-width:901px){
  .navcta{padding:.52rem .95rem!important;font-size:.72rem!important;letter-spacing:.08em!important}
}
@media(min-width:901px) and (max-width:1100px){
  .navcta{padding:.46rem .8rem!important;font-size:.66rem!important}
}
@media(min-width:601px){
  .hero-cta .btn{min-width:210px}
}

/* ---------- panel journey CTA ---------- */
.panel-cta{margin-top:28px;display:flex;justify-content:flex-start}
.panel-cta .btn span{transition:transform .22s var(--btn-ease)}
.panel-cta .btn:hover span{transform:translateX(3px)}
@media(max-width:600px){.panel-cta .btn{width:100%}}

/* ---------- fallback: no backdrop-filter support ---------- */
@supports not (backdrop-filter:blur(1px)){
  .btn{background:linear-gradient(160deg,rgba(30,90,72,.96),rgba(24,74,60,.96))}
  .btn-ghost,.btn-ghost-light,.cat-tab,.subnav a{background:rgba(18,41,61,.92)}
  .navcta{background:linear-gradient(160deg,rgba(30,90,72,.96),rgba(24,74,60,.96))}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .btn,.navcta,.cat-tab,.subnav a{transition:background .2s ease,color .2s ease}
  .btn:hover,.navcta:hover,.cat-tab:hover,.subnav a:hover,
  .btn:active,.navcta:active{transform:none}
  .btn::before{display:none}
}

/* ---------- mobile ---------- */
@media(max-width:600px){
  .btn{padding:14px 22px;font-size:.88rem}
  .btn-full{padding:16px}
}

/* primary on light grounds — keep contrast (glass would wash out on white) */
.v2band.paper .btn:not(.btn-ghost):not(.btn-ghost-light),
.v2band.paper2 .btn:not(.btn-ghost):not(.btn-ghost-light){
  color:#04121c;
  background:linear-gradient(160deg,rgba(63,199,154,.95) 0%,rgba(42,151,120,.95) 100%);
  border:1px solid rgba(26,107,83,.55);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.4),0 8px 22px -12px rgba(42,151,120,.5);
}
.v2band.paper .btn:not(.btn-ghost):hover,
.v2band.paper2 .btn:not(.btn-ghost):hover{
  color:#04121c;
  background:linear-gradient(160deg,rgba(75,212,166,1) 0%,rgba(49,171,136,1) 100%);
  border-color:rgba(26,107,83,.7);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.5),0 16px 34px -14px rgba(42,151,120,.6);
}