@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap");

:root {
  --color-primary: #4f6bff;
  --color-primary-deep: #0b2d5c;
  --color-accent: #ffd600;
  --color-aqua: #00c2c7;
  --color-white: #ffffff;
  --color-surface: #f5f7fb;
  --color-surface-alt: #eef3ff;
  --color-card: rgba(255, 255, 255, 0.94);
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-border: rgba(17, 24, 39, 0.08);
  --color-success: #0f9d58;
  --gradient-primary: linear-gradient(135deg, #4f6bff 0%, #3056ea 55%, #0b2d5c 100%);
  --gradient-soft: linear-gradient(135deg, rgba(79, 107, 255, 0.12), rgba(0, 194, 199, 0.08));
  --gradient-glow: radial-gradient(circle at top left, rgba(255, 214, 0, 0.4), transparent 35%),
    radial-gradient(circle at bottom right, rgba(79, 107, 255, 0.22), transparent 40%);
  --shadow-sm: 0 12px 24px rgba(11, 45, 92, 0.08);
  --shadow-md: 0 22px 48px rgba(11, 45, 92, 0.12);
  --shadow-lg: 0 35px 80px rgba(11, 45, 92, 0.16);
  --radius-xs: 12px;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --site-width: min(1180px, calc(100% - 40px));
  --header-height: 88px;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-heading: "Sora", "Manrope", sans-serif;
  --transition: 260ms ease;
}