/* PRAETOR LAYER — button + surface system (shared by landing + app).
 * Modern, crisp buttons (the old liquid-glass frosted style was replaced).
 * Class names kept (.glass-btn*) so markup didn't change. */
:root {
  --g-accent: #7c6cf6;
  --g-accent2: #b9b1f5;
  --g-glow: rgba(124,108,246,.5);
}

/* ---------- base button (secondary) ---------- */
.glass-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 12px;
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .2px;
  color: #e9e5ff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(149,134,255,.28);
  background: linear-gradient(180deg, rgba(124,108,246,.16), rgba(124,108,246,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(8,5,30,.35);
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s, background .2s, color .2s;
}
.glass-btn:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(149,134,255,.5);
  background: linear-gradient(180deg, rgba(124,108,246,.26), rgba(124,108,246,.11));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 22px rgba(124,108,246,.3);
}
.glass-btn:active { transform: translateY(0) scale(.985); }
.glass-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124,108,246,.4); }
.glass-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- primary (vivid violet) ---------- */
.glass-btn-primary {
  color: #fff; font-weight: 700;
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(180deg, #8f80ff 0%, #7161f2 55%, #6350e6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 8px 22px rgba(108,92,240,.5);
}
.glass-btn-primary:hover {
  color: #fff;
  border-color: rgba(255,255,255,.36);
  background: linear-gradient(180deg, #9c8eff 0%, #7f6fff 55%, #6c5cf0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 30px rgba(108,92,240,.68);
}

/* ---------- small variant ---------- */
.glass-btn-sm { padding: 8px 15px; border-radius: 10px; font-size: 13px; }

/* ---------- ghost (quiet, outlined) ---------- */
.glass-btn-ghost {
  color: #cfc8f5;
  border-color: rgba(149,134,255,.26);
  background: transparent;
  box-shadow: none;
}
.glass-btn-ghost:hover {
  color: #fff;
  border-color: rgba(149,134,255,.55);
  background: rgba(124,108,246,.1);
  box-shadow: none;
}

/* ---------- glass surface (cards / panels) ---------- */
.glass {
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(124,108,246,.05) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 20px 60px rgba(8,5,30,.5), inset 0 1px 0 rgba(255,255,255,.22);
  border-radius: 20px;
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 60% at 50% -10%, rgba(255,255,255,.14), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  .glass-btn { transition: none; }
}

/* ---------- liquid-chrome button (landing CTAs) ---------- */
.chrome-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; border-radius: 999px; border: 2px solid #2a2560;
  background: #0d0a22; color: #fff; font: 700 15px/1 inherit; letter-spacing: .3px;
  cursor: pointer; text-decoration: none; overflow: hidden; isolation: isolate;
  box-shadow: 0 10px 34px rgba(80,60,210,.45), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .1s ease, box-shadow .25s;
}
.chrome-btn:hover { box-shadow: 0 18px 50px rgba(124,108,246,.6), inset 0 1px 0 rgba(255,255,255,.2); }
.chrome-btn:active { transform: scale(.97); }
.chrome-btn.chrome-sm { padding: 9px 18px; font-size: 13px; border-width: 1px; }
.chrome-btn > .chrome-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  opacity: .9; transition: opacity .4s;
}
.chrome-btn:hover > .chrome-canvas { opacity: 1; }
.chrome-btn > span { position: relative; z-index: 1; mix-blend-mode: difference; }
/* no-WebGL fallback: a violet gradient sheen */
.chrome-btn.chrome-fallback {
  background: linear-gradient(120deg, #2a2560, #7c6cf6, #2a2560);
  background-size: 200% auto; animation: sheen 4s linear infinite;
}

/* ---------- X / social icon button ---------- */
.x-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; border-radius: 10px; text-decoration: none;
  color: #e9e5ff; border: 1px solid rgba(185,177,245,.28);
  background: linear-gradient(180deg, rgba(124,108,246,.16), rgba(124,108,246,.05));
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.x-link:hover { transform: translateY(-1px); color: #fff; border-color: rgba(185,177,245,.5);
  background: linear-gradient(180deg, rgba(124,108,246,.26), rgba(124,108,246,.11));
  box-shadow: 0 8px 22px rgba(124,108,246,.3); }
.x-link svg { width: 16px; height: 16px; fill: currentColor; }
.x-link.x-sm { width: 32px; height: 32px; }
.x-link.x-sm svg { width: 14px; height: 14px; }

/* ---------- liquid-metal button (violet chrome, vanilla port) ---------- */
.lm-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; border: 0; border-radius: 100px; cursor: pointer;
  font: 700 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: .3px;
  color: #f3f0ff; text-decoration: none; overflow: hidden; isolation: isolate;
  background: #14102f;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 18px 30px rgba(10,6,40,.5), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.lm-btn > * { position: relative; z-index: 1; }
.lm-btn .lm-label { text-shadow: 0 1px 4px rgba(12,6,40,.85); white-space: nowrap; }
.lm-metal {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  /* symmetric, dark at BOTH ends → the tile butts against itself seamlessly */
  background: linear-gradient(90deg,#0d0a26 0%,#2a2170 14%,#6c5cf0 32%,#cbc3ff 48%,#6c5cf0 64%,#2a2170 86%,#0d0a26 100%);
  background-size: 200% 100%;
  background-repeat: repeat;
  animation: lm-flow 6s linear infinite;
}
.lm-metal::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(130% 80% at 50% -30%, rgba(255,255,255,.6), transparent 55%);
}
/* shift by exactly one 200% tile → the end frame equals the start frame (seamless) */
@keyframes lm-flow { from { background-position: 0 0; } to { background-position: 200% 0; } }
.lm-btn:hover { transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(124,108,246,.5), 0 22px 46px rgba(124,108,246,.5), inset 0 1px 0 rgba(255,255,255,.24); }
.lm-btn:active { transform: translateY(0) scale(.98);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 2px 6px rgba(0,0,0,.45); }
.lm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124,108,246,.55); }
.lm-btn-sm { padding: 9px 18px; font-size: 13px; }
.lm-ripple { position: absolute; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  transform: translate(-50%,-50%) scale(0); pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
  animation: lm-ripple .6s ease-out forwards; }
@keyframes lm-ripple { to { transform: translate(-50%,-50%) scale(4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lm-metal { animation: none; } .lm-btn { transition: none; } }

/* ---------- morphic gooey background ---------- */
.goo-defs { position: fixed; width: 0; height: 0; }
.goo-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  filter: url('#prtr-goo'); opacity: .38;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 60%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 60%, #000 55%, transparent 100%);
  animation: gooIn 1.1s ease both; /* dense field fades in smoothly, no pop */
}
@keyframes gooIn { from { opacity: 0; } to { opacity: .38; } }