:root {
  --tb-brand: #0f9afb;
  --tb-brand-dark: #0870c2;
  --tb-brand-soft: rgba(15, 154, 251, 0.12);
  --tb-ink: #0b1628;
  --tb-muted: #0b1628;
  --tb-surface: #ffffff;
  --tb-surface-soft: #eef5fb;
  --tb-canvas: #f3f8fc;
  --tb-line: rgba(11, 22, 40, 0.08);
  --tb-line-strong: rgba(11, 22, 40, 0.14);
  --tb-radius: 12px;
  --tb-radius-lg: 20px;
  --tb-shadow: 0 10px 30px rgba(11, 22, 40, 0.06);
  --tb-shadow-lg: 0 22px 50px rgba(11, 22, 40, 0.1);
  --tb-nav-h: 76px;
  --tb-font: "Cairo", "IBM Plex Sans Arabic", sans-serif;
  --tb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tb-max: 1140px;
  --tb-glass: rgba(255, 255, 255, 0.78);
  --tb-glass-border: rgba(255, 255, 255, 0.65);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--tb-font) !important;
  color: var(--tb-ink) !important;
  background: var(--tb-canvas) !important;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Cinematic ambient light (CSS only — light & fast) */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}
body::before {
  width: min(70vw, 720px);
  height: min(70vw, 720px);
  top: -18%;
  inset-inline-end: -12%;
  background: radial-gradient(circle, rgba(15, 154, 251, 0.28), transparent 68%);
  animation: tbOrbA 14s ease-in-out infinite alternate;
}
body::after {
  width: min(55vw, 560px);
  height: min(55vw, 560px);
  bottom: 8%;
  inset-inline-start: -10%;
  background: radial-gradient(circle, rgba(8, 112, 194, 0.16), transparent 70%);
  animation: tbOrbB 18s ease-in-out infinite alternate;
}

@keyframes tbOrbA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-4%, 6%, 0) scale(1.08); }
}
@keyframes tbOrbB {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(5%, -4%, 0) scale(1.12); }
}

.tb-film {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6, p, a, span, li, label, input, button, select, textarea,
.btn, .nav-link, .card, .table {
  font-family: var(--tb-font) !important;
}

a { color: var(--tb-brand); text-decoration: none; }
a:hover { color: var(--tb-brand-dark); }

img { max-width: 100%; height: auto; }

::selection {
  background: rgba(15, 154, 251, 0.25);
  color: var(--tb-ink);
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}