/*
 * FANBASE Liquid Glass — lightweight static-site interpretation of the supplied
 * React LiquidButton's translucent surface, refracted specular edges and inset
 * lighting. No SVG turbulence, CPU-heavy displacement, or framework migration.
 * All existing brand colour and text-contrast variants remain intact.
 */

/* The treatment is reserved for actual action controls, not ordinary links. */
:where(
  .nav-cta,
  .mobile-menu-cta,
  .agency-hero-primary,
  .method-cta-button,
  .case-study-actions a,
  .process-actions a,
  .plan a,
  .button,
  .menu-button,
  .back-top,
  .round-arrow
){
  --glass-surface:rgba(245,247,247,.84);
  --glass-light:rgba(255,255,255,.72);
  --glass-ink-shadow:rgba(17,38,56,.12);
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  overflow:hidden;
  background:var(--glass-surface)!important;
  border:1px solid rgba(255,255,255,.33);
  -webkit-backdrop-filter:blur(12px) saturate(165%);
  backdrop-filter:blur(12px) saturate(165%);
  box-shadow:
    inset 0 1.4px 0 var(--glass-light),
    inset 1px 1px 1px -1px rgba(255,255,255,.46),
    inset -1.3px -1.6px 1.5px -1px rgba(0,0,0,.19),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 8px 20px var(--glass-ink-shadow),
    0 2px 6px rgba(18,41,60,.07);
  -webkit-tap-highlight-color:transparent;
}
/* Gentle liquid glints. Pseudo-elements never intercept clicks. */
:where(
  .nav-cta,.mobile-menu-cta,.agency-hero-primary,.method-cta-button,
  .case-study-actions a,.process-actions a,.plan a,.button,
  .menu-button,.back-top,.round-arrow
)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(153deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 29%,transparent 52%),
    radial-gradient(ellipse 76% 44% at 47% 0%,rgba(255,255,255,.18),transparent 100%);
  opacity:.8;
}
:where(
  .nav-cta,.mobile-menu-cta,.agency-hero-primary,.method-cta-button,
  .case-study-actions a,.process-actions a,.plan a,.button,
  .menu-button,.back-top,.round-arrow
)::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  pointer-events:none;
  border:1px solid transparent;
  border-top-color:rgba(255,255,255,.38);
  border-radius:inherit;
  opacity:.82;
}
/* Keep icons, nested labels and arrow capsules above the liquid highlight. */
:where(
  .nav-cta,.mobile-menu-cta,.agency-hero-primary,.method-cta-button,
  .case-study-actions a,.process-actions a,.plan a,.button,
  .menu-button,.back-top,.round-arrow
)>*{position:relative;z-index:1}
:where(
  .nav-cta,.mobile-menu-cta,.agency-hero-primary,.method-cta-button,
  .case-study-actions a,.process-actions a,.plan a,.button,
  .menu-button,.back-top,.round-arrow
):hover{
  background:var(--glass-hover,var(--glass-surface))!important;
  box-shadow:
    inset 0 1.4px 0 var(--glass-light),
    inset -1px -1.4px 1.5px -.5px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 13px 28px var(--glass-ink-shadow),
    0 3px 7px rgba(13,35,53,.07);
}
:where(
  .nav-cta,.mobile-menu-cta,.agency-hero-primary,.method-cta-button,
  .case-study-actions a,.process-actions a,.plan a,.button,
  .menu-button,.back-top,.round-arrow
):focus-visible{
  outline:3px solid #20a9e8!important;
  outline-offset:3px!important;
}

/* The same navy already used by the header, hero and primary dark actions. */
.nav-cta,.mobile-menu-cta,.agency-hero-primary,.process-link-main{
  --glass-surface:rgba(17,38,56,.83);
  --glass-hover:rgba(7,155,223,.82);
  --glass-light:rgba(255,255,255,.26);
  --glass-ink-shadow:rgba(13,39,58,.23);
}
/* Original vibrant FANBASE blue: retain its hue and white text. */
.case-study-actions a,.plan.popular a,.button.button-primary{
  --glass-surface:linear-gradient(132deg,rgba(0,127,201,.83),rgba(17,174,232,.82));
  --glass-hover:linear-gradient(132deg,rgba(0,115,184,.91),rgba(0,153,217,.87));
  --glass-light:rgba(255,255,255,.34);
  --glass-ink-shadow:rgba(0,135,202,.26);
}
/* Popular plan's original, slightly deeper blue. */
.plan.popular a{
  --glass-surface:rgba(0,143,208,.83);
  --glass-hover:rgba(0,111,166,.89);
}
.method-cta-button,.button.button-light,.button.button-white{
  --glass-surface:rgba(255,255,255,.79);
  --glass-hover:rgba(233,248,255,.86);
  --glass-light:rgba(255,255,255,.98);
  --glass-ink-shadow:rgba(0,0,0,.17);
}
.process-link-quiet,.plan:not(.popular) a,.back-top,.round-arrow,.menu-button{
  --glass-surface:rgba(242,246,248,.74);
  --glass-hover:rgba(226,239,246,.85);
  --glass-light:rgba(255,255,255,.94);
  --glass-ink-shadow:rgba(20,46,66,.10);
}
/* Keep the white circular arrow details of the Shadcn-inspired hero. */
.site-header .nav-cta .icon,
.agency-hero-cta-icon{
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  backdrop-filter:blur(6px) saturate(140%);
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(13,37,54,.1);
}
/* Tabs and steps get gentle glass only when active; inactive choices stay flat. */
:is(.segmented button.active,.process-tab.is-active,.process-step.is-active){
  background:rgba(255,255,255,.78)!important;
  -webkit-backdrop-filter:blur(11px) saturate(155%);
  backdrop-filter:blur(11px) saturate(155%);
  border:1px solid rgba(255,255,255,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 1px rgba(18,49,69,.07),0 5px 14px rgba(18,49,69,.07);
}
/* Preserve focus and disabled state; avoid adding movement on tap. */
:where(.button,button).glass-disabled,
:where(.button,button):disabled{cursor:not-allowed;opacity:.6}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :is(.nav-cta,.mobile-menu-cta,.agency-hero-primary,.process-link-main){--glass-surface:#122d42}
  :is(.case-study-actions a,.plan.popular a,.button.button-primary){--glass-surface:#058fcf}
  :is(.method-cta-button,.button.button-light,.button.button-white){--glass-surface:#fff}
}
@media(prefers-reduced-motion:reduce){
  :is(
    .nav-cta,.mobile-menu-cta,.agency-hero-primary,.method-cta-button,
    .case-study-actions a,.process-actions a,.plan a,.button,
    .menu-button,.back-top,.round-arrow
  ){transition:none!important}
}

/* The original hover accents remain blue while each resting tint stays intact. */
.process-link-main{--glass-hover:rgba(0,127,187,.85)}
.plan:not(.popular) a{--glass-hover:rgba(223,244,251,.88)}
.round-arrow:hover,.portfolio-card:hover .round-arrow{
  --glass-surface:rgba(17,38,56,.85);
  --glass-hover:rgba(17,38,56,.85);
}
.back-top:hover{--glass-hover:rgba(199,238,250,.86)}


/* FANBASE segmented pricing tabs: contrast and hover polish */
/* The former white lettering was lost against the frosted white active pill. */
.pricing-toolbar .segmented button.active{
  color:#13293a;
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(255,255,255,.82);
  text-shadow:none;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(28,64,82,.09),
    0 5px 16px rgba(20,49,67,.11),
    0 0 0 1px rgba(255,255,255,.34);
}
.pricing-toolbar .segmented button.active span{
  color:#006d97;
  font-weight:850;
  opacity:1;
}
.pricing-toolbar .segmented button{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  cursor:pointer;
  transform:translateZ(0);
  transition:transform .24s cubic-bezier(.2,.75,.2,1),
             box-shadow .24s ease,
             background-color .24s ease,
             color .24s ease;
}
.pricing-toolbar .segmented button span{
  position:relative;
  z-index:1;
  transition:color .2s ease;
}
.pricing-toolbar .segmented button:focus-visible{
  outline:3px solid #099bd8;
  outline-offset:3px;
}
@media(hover:hover) and (pointer:fine){
  .pricing-toolbar .segmented button:hover{
    transform:translateY(-2px) scale(1.012);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
      0 7px 19px rgba(14,50,69,.13);
  }
  .pricing-toolbar .segmented button:not(.active):hover{
    background:rgba(255,255,255,.48);
    color:#132c3f;
  }
  .pricing-toolbar .segmented button.active:hover{
    box-shadow:inset 0 1px 0 #fff,
      0 9px 21px rgba(13,50,72,.17),
      0 0 0 1px rgba(255,255,255,.55);
  }
}
@media(prefers-reduced-motion:reduce){
  .pricing-toolbar .segmented button,
  .pricing-toolbar .segmented button span{transition:none!important}
  .pricing-toolbar .segmented button:hover{transform:none!important}
}