/* ── BUTTONS ───────────────────────────────────── */
.btn-primary,.btn-secondary{font-size:var(--fs-lg);font-weight:600;padding:12px 26px;border-radius:14px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;line-height:1.4;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,background .3s;border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg,#7c3aed,#6366f1);color:var(--text-white);box-shadow:0 6px 24px rgba(124,58,237,.24)}
.btn-primary:hover{box-shadow:0 10px 32px rgba(124,58,237,.36)}
/* Liquid Glass — real refraction via SVG displacement filter */
.btn-secondary{position:relative;isolation:isolate;overflow:hidden;font-weight:500;color:#f8f8ff;background:transparent;border:0;text-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:inset 0 1.5px 0.5px rgba(255,255,255,.55),inset 0 -1px 0.5px rgba(0,0,0,.15),inset 0 0 0 0.5px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.12),0 4px 14px -6px rgba(0,0,0,.22);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn-secondary svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));transition:transform .3s var(--ease);transform-origin:center}
.btn-secondary:hover svg{transform:scale(1.12)}
.btn-secondary::before{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backdrop-filter:blur(6px) saturate(180%) brightness(1.15);backdrop-filter:url(#liquid-glass-strong) blur(2px) saturate(180%) brightness(1.12);background:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.08) 100%);z-index:-1;pointer-events:none}
.btn-secondary::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.04) 32%,transparent 50%,rgba(255,255,255,.05) 100%);pointer-events:none;z-index:-1;mix-blend-mode:overlay}
.btn-secondary:hover{box-shadow:inset 0 1.5px 0.5px rgba(255,255,255,.75),inset 0 -1px 0.5px rgba(0,0,0,.16),inset 0 0 0 0.5px rgba(255,255,255,.22),0 1px 3px rgba(0,0,0,.14),0 5px 16px -5px rgba(0,0,0,.28)}
.btn-secondary:active{transform:scale(.985);transition-duration:.15s}

/* Toast — copy confirmation */
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);background:rgba(20,20,28,.92);color:#f0f0ff;font-size:var(--fs-md);font-weight:500;padding:12px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 32px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);z-index:99999;opacity:0;pointer-events:none;letter-spacing:.01em;transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:90vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.toast-in{opacity:1;transform:translate(-50%,0)}
.toast.toast-out{opacity:0;transform:translate(-50%,-10px)}

/* Liquid Glass spotlight — clipped to the button's border-radius via overflow:hidden,
   sits at z-index:-2 so the ::before's backdrop-filter (z:-1) refracts it */
.glass-spot{position:absolute;top:0;left:0;width:55px;height:55px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 70%);pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:-2;will-change:transform,opacity;transform:translate3d(-9999px,-9999px,0)}
.glass-spot.on{opacity:1}

/* ── BROWSER SPECIFIC FALLBACKS ────────────────── */
/* Firefox & Safari don't support SVG displacement in backdrop-filter,
   so their glass-spot light needs to be natively brighter to compensate. */
.is-safari .glass-spot,
.is-firefox .glass-spot {
  background: radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,0) 70%);
}

/* Safari structural liquid glass edge simulation:
   Since Safari ignores the SVG displacement filter, we use very specific
   multi-layered inset shadows to recreate the thick, bright refractive top lip
   and the deep, dark bottom lip that Chrome gets automatically. */
.is-safari .btn-secondary,
.is-safari .hero-social,
.is-safari .case-btn-primary,
.is-safari .case-btn-icon {
  box-shadow: 
    inset 0 2.5px 3px rgba(255, 255, 255, 0.65), 
    inset 0 1px 0 rgba(255, 255, 255, 0.9), 
    inset 0 -1.5px 1px rgba(0, 0, 0, 0.25), 
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.15), 
    0 2px 4px rgba(0, 0, 0, 0.12), 
    0 6px 16px -4px rgba(0, 0, 0, 0.25) !important;
}
.is-safari .btn-secondary:hover,
.is-safari .hero-social:hover,
.is-safari .case-btn-primary:hover,
.is-safari .case-btn-icon:hover {
  box-shadow: 
    inset 0 3px 4px rgba(255, 255, 255, 0.75), 
    inset 0 1px 0 rgba(255, 255, 255, 1), 
    inset 0 -1.5px 1px rgba(0, 0, 0, 0.3), 
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 
    0 3px 6px rgba(0, 0, 0, 0.15), 
    0 8px 20px -4px rgba(0, 0, 0, 0.3) !important;
}