:root {
  --font-display: "Tajawal", "Cairo", sans-serif;
  --font-body: "Noto Naskh Arabic", "Cairo", sans-serif;
  --bg: #f2f8fc;
  --surface: #ffffff;
  --surface-soft: #edf5fb;
  --text: #102235;
  --muted: #4c6177;
  --primary: #0f5b7b;
  --primary-2: #2c8fb8;
  --accent: #cb7a36;
  --border: #d3e0ec;
}

body.theme-ribbon::before {
  content: "";
  position: fixed;
  inset: -20% -15% auto auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 143, 184, 0.16), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.theme-ribbon .hero {
  position: relative;
}

.theme-ribbon .hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -20px 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(44, 143, 184, 0.08), transparent);
  pointer-events: none;
}

.theme-ribbon .card {
  border-radius: 22px;
}