/* ============================================================
   Mahmoud Alyosify — Design System
   Palette sampled from img/FatFooter-En.png
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Sampled from the hero artwork ──────────────────────── */
  --void:      #05070f;   /* deepest sky                     */
  --navy:      #0b1030;   /* sky body                        */
  --indigo:    #2a1f6b;   /* sky → beam transition           */
  --violet:    #6b3fd4;   /* light beams                     */
  --magenta:   #b14bd8;   /* beam bloom                      */
  --amber:     #f0a13a;   /* sunset band                     */
  --coral:     #e86a4d;   /* horizon line                    */
  --beam:      #eaf4ff;   /* beam core / white light         */
  --gold:      #d4b483;   /* graduation sash                 */
  --teal:      #3ad0c8;   /* water reflection highlight      */

  /* ── Surfaces ───────────────────────────────────────────── */
  --bg:            var(--void);
  --bg-raised:     #0a0e20;
  --bg-panel:      #0e1330;
  --bg-panel-hi:   #141a42;
  --bg-glass:      rgba(20, 26, 66, 0.55);

  --line:          rgba(234, 244, 255, 0.08);
  --line-strong:   rgba(234, 244, 255, 0.16);
  --line-glow:     rgba(107, 63, 212, 0.45);

  /* ── Text ───────────────────────────────────────────────── */
  --ink:           #f2f5ff;
  --ink-soft:      #a8b2d8;
  --ink-mute:      #6b769e;

  /* ── Gradients ──────────────────────────────────────────── */
  --beam-gradient:   linear-gradient(100deg, var(--violet) 0%, var(--magenta) 42%, var(--amber) 100%);
  --beam-gradient-v: linear-gradient(180deg, var(--violet) 0%, var(--magenta) 50%, var(--amber) 100%);
  --sky-gradient:    linear-gradient(180deg, var(--void) 0%, var(--navy) 45%, var(--indigo) 100%);
  --sunset-gradient: linear-gradient(90deg, var(--coral) 0%, var(--amber) 50%, var(--gold) 100%);
  --panel-gradient:  linear-gradient(150deg, rgba(42, 31, 107, 0.30) 0%, rgba(11, 16, 48, 0.55) 100%);

  /* ── Glows ──────────────────────────────────────────────── */
  --glow-violet: 0 0 48px rgba(107, 63, 212, 0.35);
  --glow-amber:  0 0 48px rgba(240, 161, 58, 0.28);
  --glow-beam:   0 0 80px rgba(234, 244, 255, 0.18);

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.6);

  /* ── Type ───────────────────────────────────────────────── */
  --font-display: 'Sora', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body:    'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-hero:  clamp(2.75rem, 8vw, 6.5rem);
  --fs-h1:    clamp(2.25rem, 5.2vw, 4rem);
  --fs-h2:    clamp(1.75rem, 3.6vw, 2.75rem);
  --fs-h3:    clamp(1.15rem, 2vw, 1.5rem);
  --fs-lead:  clamp(1.02rem, 1.5vw, 1.22rem);
  --fs-body:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.78rem;

  /* ── Space (4px scale) ──────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --section-py: clamp(80px, 11vw, 160px);
  --page-max:   1240px;
  --page-px:    clamp(20px, 5vw, 56px);

  /* ── Radii ──────────────────────────────────────────────── */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-full: 999px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s var(--ease-soft);
  --t-mid:  0.35s var(--ease-out);
  --t-slow: 0.7s  var(--ease-out);

  --z-bg: 0; --z-content: 10; --z-nav: 100; --z-chat: 900; --z-overlay: 1000;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Native scrolling everywhere. scroll-behavior only affects anchor jumps,
     never the wheel, and the browser disables it under reduced-motion. */
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
  /* Must sit on the root as well as body: overflow set only on body
     propagates to the viewport, which let RTL pages scroll sideways. */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[dir='rtl'] body { font-family: 'IBM Plex Sans Arabic', var(--font-body); }
html[dir='rtl'] { --font-display: 'IBM Plex Sans Arabic', 'Sora', sans-serif; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; }

::selection { background: var(--violet); color: var(--beam); }

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--violet), var(--magenta));
  border-radius: var(--r-full);
  border: 2px solid var(--void);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--magenta), var(--amber)); }

/* ── Typography primitives ────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.display    { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.04em; }
.h1         { font-size: var(--fs-h1); }
.h2         { font-size: var(--fs-h2); }
.h3         { font-size: var(--fs-h3); font-weight: 600; }
.lead       { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.75; }
.small      { font-size: var(--fs-sm); }
.mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.beam-text {
  background: var(--beam-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sunset-text {
  background: var(--sunset-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Eyebrow label ────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--magenta);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--beam-gradient);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  --btn-py: 13px;
  --btn-px: 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-mid), border-color var(--t-mid), color var(--t-mid);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  color: var(--void);
  background: var(--beam-gradient);
  background-size: 200% 100%;
  box-shadow: var(--glow-violet);
}
.btn--primary:hover {
  background-position: 100% 0;
  box-shadow: var(--glow-amber), 0 10px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  background: rgba(234, 244, 255, 0.02);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  border-color: var(--magenta);
  color: var(--beam);
  box-shadow: var(--glow-violet);
  transform: translateY(-2px);
}

.btn--sm { --btn-py: 8px; --btn-px: 16px; font-size: var(--fs-xs); }

/* ── Panels / cards ───────────────────────────────────────── */
.panel {
  position: relative;
  background: var(--panel-gradient);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}
.panel:hover {
  border-color: var(--line-glow);
  box-shadow: var(--shadow-md), var(--glow-violet);
}

/* Beam accent that sweeps the top edge of a panel */
.panel--beam::before {
  content: '';
  position: absolute;
  inset-inline: 12%;
  top: -1px;
  height: 1px;
  background: var(--beam-gradient);
  opacity: 0;
  transition: opacity var(--t-mid);
}
.panel--beam:hover::before { opacity: 1; }

/* ── Chips / tags ─────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: rgba(107, 63, 212, 0.10);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.chip:hover { color: var(--beam); border-color: var(--line-glow); background: rgba(107, 63, 212, 0.22); }

.chip--live {
  color: var(--teal);
  border-color: rgba(58, 208, 200, 0.35);
  background: rgba(58, 208, 200, 0.08);
}
.chip--live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(58, 208, 200, 0.6);
  animation: pulse-dot 2.2s var(--ease-out) infinite;
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(58, 208, 200, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(58, 208, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 208, 200, 0); }
}

/* ── Utilities ────────────────────────────────────────────── */
.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;
}
.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: var(--s-4);
  z-index: var(--z-overlay);
  padding: 10px 18px;
  border-radius: var(--r-full);
  background: var(--violet);
  color: var(--beam);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s-4); }