/* ============================================================
   ثيم البوابة — "المركز / الطيف الثلاثي"
   يجمع المسارات الثلاثة. قاعدة محايدة باردة، سماوي مركزي مهيمن،
   وألوان المسارات الثلاثة حاضرة كهوية (أزرق صورة · ذهب صوت · مرجاني فيديو).
   ============================================================ */
:root {
  --bg-void: #06070c; --bg-deep: #0a0b12; --bg-panel: #0e0f18; --bg-elevated: #151623; --bg-code: #07080d;
  --line: #1b1d2c; --line-strong: #2a2d42; --line-faint: #12131d;
  --fg: #e3e7f2; --fg-muted: #9aa1b8; --fg-dim: #5e6478; --fg-faint: #3b4053;
  --acid: #6ee0ff; --acid-dim: #2a7e96;     /* مهيمن: سماوي المركز */
  --cyan: #8fa0ff; --cyan-dim: #45518a;     /* ثانوي: بنفسجي-أزرق */
  --amber: #ffb43c; --amber-dim: #8a5f17;
  --red: #ff6a5a; --red-dim: #8a2e26;
  --magenta: #c98bff; --magenta-dim: #5e3a8a;
  /* ألوان المسارات الثلاثة */
  --t-image:#49c5ff; --t-image-dim:#226d92;
  --t-audio:#ffb43c; --t-audio-dim:#8a5f17;
  --t-video:#ff6a5a; --t-video-dim:#8a2e26;
  --spectrum: linear-gradient(90deg, #49c5ff, #6ee0ff, #ffb43c, #ff6a5a, #c98bff);
  --mono: "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --ar: "IBM Plex Sans Arabic","Tajawal","Noto Sans Arabic",system-ui,sans-serif;
}
body {
  background-image:
    radial-gradient(ellipse at 10% 5%, rgba(73,197,255,0.07) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 40%, rgba(255,180,60,0.05) 0%, transparent 42%),
    radial-gradient(ellipse at 90% 85%, rgba(255,106,90,0.06) 0%, transparent 40%),
    linear-gradient(rgba(120,140,200,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,200,0.018) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px, 24px 24px;
}
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 14% 26%, rgba(73,197,255,0.12) 0%, transparent 40%),
              radial-gradient(circle at 50% 60%, rgba(255,180,60,0.08) 0%, transparent 40%),
              radial-gradient(circle at 86% 74%, rgba(255,106,90,0.10) 0%, transparent 40%); }

/* ===== بطاقات المسارات الكبيرة (خاصّة بالبوابة) ===== */
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px; margin: 32px 0; }
.track { display: block; background: var(--bg-panel); border: 1px solid var(--line); padding: 0; color: var(--fg); position: relative; overflow: hidden; transition: all 0.18s ease; }
.track:hover { transform: translateY(-3px); border-color: var(--tc, var(--acid)); }
.track .tk-top { height: 5px; background: var(--tc, var(--acid)); }
.track .tk-body { padding: 26px 26px 24px; }
.track .tk-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tc, var(--acid)); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.track .tk-ico { width: 40px; height: 40px; margin-bottom: 14px; }
.track .tk-title { font-size: 26px; font-weight: 800; margin: 0 0 6px; color: var(--fg); }
.track .tk-sub { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); margin-bottom: 14px; }
.track .tk-desc { font-size: 14.5px; color: var(--fg-muted); line-height: 1.7; margin-bottom: 18px; }
.track .tk-meta { display: flex; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--fg-dim); border-top: 1px solid var(--line); padding-top: 14px; }
.track .tk-meta b { color: var(--tc, var(--acid)); font-weight: 500; }
.track.image { --tc: var(--t-image); }
.track.audio { --tc: var(--t-audio); }
.track.video { --tc: var(--t-video); }
.track .tk-go { position: absolute; bottom: 18px; left: 22px; font-family: var(--mono); font-size: 11px; color: var(--tc, var(--acid)); text-transform: uppercase; opacity: 0; transition: opacity 0.15s; }
.track:hover .tk-go { opacity: 1; }

/* بطاقات القصص الطريفة */
.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 16px; margin: 28px 0; }
.story { background: var(--bg-panel); border: 1px solid var(--line); padding: 22px 24px; position: relative; }
.story::before { content: attr(data-era); position: absolute; top: -10px; right: 18px; background: var(--bg-void); padding: 0 10px; font-family: var(--mono); font-size: 11px; color: var(--amber); letter-spacing: 0.1em; }
.story h4 { margin-top: 4px; color: var(--acid); font-family: var(--ar); font-size: 17px; }
.story p { font-size: 14px; color: var(--fg-muted); margin-bottom: 0; }

/* مسارات موصى بها (paths) */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 14px; margin: 24px 0; }
.path { background: var(--bg-elevated); border: 1px solid var(--line); padding: 18px 20px; }
.path .ph { font-family: var(--mono); font-size: 12px; color: var(--magenta); letter-spacing: 0.08em; margin-bottom: 10px; }
.path .step { font-size: 13px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.path .step .dot { width: 7px; height: 7px; flex-shrink: 0; }
.path a { border: none; }