:root {
  /* Shakarim University Official Brandbook Palette */
  --brand-blue-main: #324266;
  --brand-blue-main-rgb: 50, 66, 102;
  --brand-blue-secondary: #4B6885;
  --brand-blue-secondary-rgb: 75, 104, 133;
  --brand-gold: #E9B21E;
  --brand-gold-rgb: 233, 178, 30;
  --brand-gold-glow: rgba(233, 178, 30, 0.35);
  --brand-sky-blue: #6A829C;
  --brand-light-blue: #829BB3;
  --brand-gray: #D0D0CE;
  --brand-beige: #D6D2C4;
  
  /* Stage Dark Theme */
  --bg-dark-deep: #0D131F;
  --bg-stage-gradient: radial-gradient(circle at 50% 25%, #243352 0%, #151F33 55%, #0B101B 100%);
  --bg-card-glass: rgba(30, 43, 69, 0.7);
  --bg-card-border: rgba(130, 155, 179, 0.22);
  --bg-card-gold-border: rgba(233, 178, 30, 0.45);
  
  /* Typography */
  --font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Montserrat', -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-main);
  color: #FFFFFF;
  background: var(--bg-dark-deep);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Elegant Corporate Badges */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(233, 178, 30, 0.08);
  border: 1px solid rgba(233, 178, 30, 0.6);
  color: var(--brand-gold);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Clean Premium Buttons */
.brand-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #E9B21E;
  color: #121A2B;
  border: none;
  border-radius: 10px;
  padding: 13px 26px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(233, 178, 30, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-btn-gold:hover {
  background: #F3C13C;
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(233, 178, 30, 0.45);
}

.brand-btn-gold:active {
  transform: translateY(0);
}

.brand-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(50, 66, 102, 0.35);
  border: 1px solid rgba(130, 155, 179, 0.3);
  color: #FFFFFF;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.brand-btn-outline:hover {
  background: rgba(75, 104, 133, 0.5);
  border-color: var(--brand-gold);
  color: var(--brand-gold);
}

/* Animations */
@keyframes popIn {
  0% { transform: scale(0.96) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.pop-in {
  animation: popIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}