/* medgh Components — aurora, container, utilities, buttons, glass */

/* ── Layout ─────────────────────────────────────────── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

section, nav, footer, aside { position: relative; z-index: 1; }

/* ── Aurora background ──────────────────────────────── */
.aurora {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.a1,.a2,.a3,.a4 {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.13;
}
.a1 { width:680px;height:680px; background:var(--primary); top:-200px; left:-120px; animation: au1 22s ease-in-out infinite; }
.a2 { width:560px;height:560px; background:var(--cyan);    top:-80px;  right:-80px; animation: au2 28s ease-in-out infinite; }
.a3 { width:440px;height:440px; background:var(--magenta); bottom:15%; right:8%;    animation: au3 19s ease-in-out infinite; }
.a4 { width:380px;height:380px; background:var(--cyan);    bottom:5%;  left:18%;   animation: au4 24s ease-in-out infinite; }

@keyframes au1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(70px,50px) scale(1.12)} 66%{transform:translate(-40px,70px) scale(0.9)} }
@keyframes au2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-60px,40px) scale(0.9)} 66%{transform:translate(50px,-50px) scale(1.1)} }
@keyframes au3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,-60px) scale(1.18)} }
@keyframes au4 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,-35px) scale(0.85)} }

/* ── Text utilities ─────────────────────────────────── */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-rendering: geometricPrecision;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 100px;
  border: 1px solid var(--border-2);
  background: rgba(107,71,255,0.06);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 22px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad); flex-shrink: 0;
}

.section-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700; line-height: 1.12;
  letter-spacing: -0.025em; margin-bottom: 18px;
  text-wrap: balance;
}
.section-sub  { font-size: 1.15rem; color: var(--text-2); max-width: 520px; margin: 0 auto; line-height: 1.74; }
.section-head { text-align: center; margin-bottom: 60px; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r);
  font-family: var(--f-body); font-size: 0.97rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none; outline: none;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 4px 28px rgba(107,71,255,0.32);
}
.btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(107,71,255,0.48); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-2);
}
.btn-outline:hover  { background: var(--surface-2); border-color: rgba(255,255,255,0.2); }

.btn-ghost {
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--glass-border);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* ── Glassmorphism card ─────────────────────────────── */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.glass-card:hover {
  background: var(--glass-hover);
  border-color: rgba(255,255,255,0.1);
}

/* ── Status badges ──────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 0.75rem; font-weight: 600;
}
.badge-green   { background: rgba(52,211,153,0.12);  color: var(--green); }
.badge-amber   { background: rgba(251,191,36,0.12);  color: var(--amber); }
.badge-red     { background: rgba(248,113,113,0.12); color: var(--red); }
.badge-primary { background: rgba(107,71,255,0.15);  color: #A78BFA; }