/* =========================================================================
   ONE BOOST — base.css
   Foundation: design tokens, reset, typography, container, ambient background.
   Load order: base → components → sections → animations
   ========================================================================= */

:root {
  /* ---- Surfaces (near-black, subtle warm/red bias) ---- */
  --bg:          #0B080A;
  --bg-soft:     #0F0B0E;
  --surface:     #15100F;
  --surface-2:   #1C1519;
  --surface-3:   #241A20;

  /* ---- Hairlines ---- */
  --line:        #2B222A;
  --line-2:      #3C2E38;

  /* ---- Brand red (the single accent) ---- */
  --red:         #E10600;
  --red-bright:  #FF2A20;
  --red-deep:    #8E0400;
  --red-ink:     #FF4C40;

  /* ---- Text ---- */
  --text:        #F5F2F3;
  --text-2:      #ADA3A8;
  --text-3:      #6E646A;

  /* ---- Effects ---- */
  --glow:        rgba(225, 6, 0, .38);
  --glow-soft:   rgba(225, 6, 0, .14);
  --radius:      18px;
  --radius-sm:   12px;
  --shadow:      0 24px 60px -20px rgba(0,0,0,.75);
  --maxw:        1200px;
  --ease:        cubic-bezier(.22, 1, .36, 1);

  /* ---- Fonts ---- */
  --font-display: 'Sora', 'Tajawal', system-ui, sans-serif;
  --font-body:    'Manrope', 'Tajawal', system-ui, sans-serif;
  --font-ar:      'Tajawal', 'Manrope', system-ui, sans-serif;
}

/* ---- Reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Arabic mode swaps the running font to Tajawal */
html[lang="ar"] body { font-family: var(--font-ar); }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .logo-word, html[lang="ar"] .eyebrow { font-family: var(--font-ar); }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }
::selection { background: var(--red); color: #fff; }

/* Anchor jumps clear the sticky nav */
section[id], [id].anchor { scroll-margin-top: 90px; }

/* ---- Container ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---- Ambient background glows (animated in animations.css) ---- */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-fx::before, .bg-fx::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .55;
}
.bg-fx::before {
  width: 620px; height: 620px; top: -220px; inset-inline-end: -160px;
  background: radial-gradient(circle, var(--glow), transparent 68%);
}
.bg-fx::after {
  width: 520px; height: 520px; top: 640px; inset-inline-start: -180px;
  background: radial-gradient(circle, var(--glow-soft), transparent 70%);
}

/* ---- Utilities ---- */
[data-hide] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}