@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Inter:wght@500;600;700&display=swap');

:root {
  --brand-red: #cc0000;
  --brand-light-red: #ff3333;
  --brand-dark: #1a1a1a;
  --surface: #ffffff;
  --surface-gray: #f8f9fa;
  --ink-muted: rgba(26, 26, 26, 0.65);
  --ink-faint: rgba(26, 26, 26, 0.45);
  --hairline: rgba(26, 26, 26, 0.12);
  --shadow-card: 0 8px 24px rgba(26, 26, 26, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
  margin: 0; 
  min-width: 320px; 
  background: var(--surface-gray); 
  color: var(--brand-dark); 
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  text-rendering: optimizeLegibility; 
}

a { color: inherit; text-decoration: none; }
button, a, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Custom Container & Layout */
.container-shell { 
  width: min(100% - 2rem, 1280px); 
  margin-inline: auto; 
}

.editorial-rule { 
  display: inline-block; 
  width: 2.5rem; 
  height: 2px; 
  background: var(--brand-red); 
  vertical-align: middle; 
}

.course-card-shadow { 
  box-shadow: var(--shadow-card); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card-shadow:hover { 
  box-shadow: 0 14px 30px rgba(26, 26, 26, 0.14); 
}

@media (min-width: 640px) { 
  .container-shell { 
    width: min(100% - 3rem, 1280px); 
  } 
}

@keyframes rise { 
  from { opacity: 0; transform: translateY(1rem); } 
  to { opacity: 1; transform: translateY(0); } 
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { 
    animation-duration: 0.01ms !important; 
    animation-iteration-count: 1 !important; 
    scroll-behavior: auto !important; 
    transition-duration: 0.01ms !important; 
  }
}