/* =========================
   Premium dark UI polish
   ========================= */

:root {
  --maxw: 1200px;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 6s ease infinite;
}


/* Premium nav + cards polish */
.nav-shell {
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-pill {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.nav-pill:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}

.premium-panel {
  background: radial-gradient(1200px 500px at 50% 0%,
      rgba(var(--cl-accent), .08),
      rgba(255,255,255,.03) 45%,
      rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 18px 70px rgba(0,0,0,.50);
  border-radius: 26px;
}


.premium-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.premium-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.05);
  box-shadow: 0 22px 90px rgba(0,0,0,.55);
}

.input-premium {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
}

.input-premium:focus-within {
  border-color: rgba(var(--cl-accent), .75);
  box-shadow: 0 0 0 5px rgba(var(--cl-accent), .16);
}


/* Page glow/gradient */
.site-glow {
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(var(--cl-accent), 0.18), transparent 60%),
    radial-gradient(700px 420px at 12% 30%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 520px at 90% 35%, rgba(255,255,255,0.05), transparent 65%);
  opacity: 1;
}

/* Sticky header: blur + stroke */
.site-header {
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  background: rgba(8, 8, 10, 0.55);
  border-bottom: 1px solid var(--stroke);
}

/* Global container helper (use this class in components) */
.container-x {
  width: min(var(--maxw), calc(100% - 48px));
  margin-inline: auto;
}

/* Panels / cards */
.panel {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-1);
}

.panel-soft {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-2xl);
}

/* Buttons (make them look expensive) */
.btn-accent {
  background: rgba(var(--cl-accent), 1);
  color: white;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: 0 16px 40px rgba(var(--cl-accent), 0.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(var(--cl-accent), 0.30);
  filter: brightness(1.05);
}

/* Inputs (search bar should feel premium) */
.input-premium {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 14px 16px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input-premium:focus {
  outline: none;
  border-color: rgba(var(--cl-accent), 0.8);
  box-shadow: 0 0 0 5px rgba(var(--cl-accent), 0.18);
  background: rgba(255,255,255,0.06);
}

/* Card hover behavior */
.card-premium {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.card-premium:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.055);
}

/* Typography tightening */
h1, h2 {
  letter-spacing: -0.02em;
}