/*! SLMMmedia Theme | Blau→Lila | Bootstrap 5 */
:root{
  --brand-start: #2b6cff;  /* Blau */
  --brand-end:   #7a3cff;  /* Lila */
  --brand-primary: #4b5dff;
  --bg: #0b1020;
  --surface: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.10);
  --text: #e8ecff;
  --muted: #a9b1d9;
  --radius: 20px;
  --blur: 14px;
}

*{box-sizing:border-box}
html, body { height: 100%; }
body {
  margin: 0;
  background: linear-gradient(135deg, var(--brand-start) -10%, #0b1020 40%, #0a1428 100%);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
}

a { color: #bcd0ff; }
a:hover { color: #dbe6ff; }

/* Glass blocks */
.glass{
  background: var(--surface);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.navbar-glass{ background: var(--surface-2); }

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  border: 0;
}
.btn-outline-light{ border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,0.08); }

/* Cards */
.card.glass{ border: 1px solid rgba(255,255,255,0.08); }

/* Utilities */
.text-secondary{ color: var(--muted) !important; }
.gradient-card{
  background: radial-gradient(circle at 20% -10%, rgba(43,108,255,0.25), transparent 35%),
              radial-gradient(circle at 120% 10%, rgba(122,60,255,0.18), transparent 30%);
}

/* Accessibility: focus outlines */
:focus-visible{
  outline: 2px solid rgba(255,255,255,0.65);
  outline-offset: 2px;
}

/* Reveal animation */
.reveal{ opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; }
.reveal-visible{ opacity: 1; transform: none; }

/* Ripple */
.ripple{ position: relative; overflow: hidden; }
.ripple::after{
  content:""; position:absolute; border-radius:50%; width:0; height:0; inset: 50% auto auto 50%;
  background: rgba(255,255,255,0.35); transform: translate(-50%,-50%);
}
.ripple-animate::after{ width: 220px; height: 220px; opacity: 0; transition: width .6s, height .6s, opacity .6s; }