/* ════════════════════════════════════════════════════════════════════
   FX — موتورِ مشترکِ لندینگِ اکوسیستمِ فری‌جی‌پی‌تی  (پایه‌ی بصری)
   پیشوندِ خنثا: fx-  ·  رنگ‌ها از پالتِ هر دامنه (tokens.css) خوانده می‌شوند.
   این فایل بینِ همه‌ی سایت‌ها یکسان است؛ فقط tokens.css فرق می‌کند.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* مقادیرِ پیش‌فرض — tokens.css هر دامنه این‌ها را override می‌کند */
  --fx-bg:        #05060d;
  --fx-bg-2:      #0a0e1a;
  --fx-bg-3:      #0e1530;
  --fx-surface:   rgba(255, 255, 255, .045);
  --fx-surface-2: rgba(255, 255, 255, .07);
  --fx-border:    rgba(255, 255, 255, .10);
  --fx-border-2:  rgba(255, 255, 255, .16);

  --fx-text:      #e9edf8;
  --fx-text-soft: rgba(233, 237, 248, .82);
  --fx-text-dim:  rgba(233, 237, 248, .60);
  --fx-text-mute: rgba(233, 237, 248, .42);

  /* triad امضا — هر دامنه سه رنگ خودش را می‌گذارد */
  --fx-a:  #2dd4bf;   /* رنگِ اصلی  */
  --fx-a2: #22d3ee;
  --fx-b:  #6366f1;   /* رنگِ دوم   */
  --fx-b2: #8b5cf6;
  --fx-c:  #f5b301;   /* لهجه/طلایی */
  --fx-c2: #fb7185;

  --fx-grad-brand:  linear-gradient(135deg, var(--fx-a) 0%, var(--fx-b) 52%, var(--fx-c) 100%);
  --fx-grad-a:      linear-gradient(135deg, var(--fx-a), var(--fx-a2));
  --fx-grad-c:      linear-gradient(135deg, var(--fx-c), var(--fx-c2));
  --fx-grad-b:      linear-gradient(135deg, var(--fx-b), var(--fx-b2));
  --fx-grad-deep:   linear-gradient(160deg, var(--fx-bg-2) 0%, var(--fx-bg-3) 60%, #070a16 100%);

  --fx-glow-a:   rgba(45, 212, 191, .55);
  --fx-glow-b:   rgba(99, 102, 241, .50);
  --fx-glow-c:   rgba(245, 179, 1, .50);

  /* رنگِ متنِ روی دکمه‌ی اصلی (تیره روی رنگِ روشن) */
  --fx-on-a: #04140f;

  --fx-font-fa:      'Vazirmatn', 'Tahoma', 'Segoe UI', system-ui, sans-serif;
  --fx-font-display: 'Michroma', 'Vazirmatn', system-ui, sans-serif;

  --fx-r-sm: 12px;
  --fx-r:    18px;
  --fx-r-lg: 26px;
  --fx-r-xl: 34px;
  --fx-r-pill: 999px;

  --fx-shadow:      0 24px 60px -24px rgba(0, 0, 0, .8);
  --fx-shadow-a:    0 24px 70px -22px rgba(45, 212, 191, .45);
  --fx-glass:       rgba(13, 18, 38, .55);
  --fx-glass-strong:rgba(13, 18, 38, .78);
  --fx-blur: blur(22px);

  --fx-maxw: 1240px;
  --fx-nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fx-font-fa);
  background: var(--fx-bg);
  color: var(--fx-text);
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ltr { direction: ltr; unicode-bidi: isolate; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--fx-glow-a); color: #fff; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--fx-bg-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--fx-a), var(--fx-b));
  border-radius: 999px; border: 2px solid var(--fx-bg-2);
}

/* ─── چیدمانِ پایه ─── */
.fx-container { width: 100%; max-width: var(--fx-maxw); margin: 0 auto; padding: 0 22px; }
@media (min-width: 768px)  { .fx-container { padding: 0 32px; } }
@media (min-width: 1200px) { .fx-container { padding: 0 40px; } }

.fx-section { position: relative; padding: 96px 0; }
@media (max-width: 720px) { .fx-section { padding: 64px 0; } }

/* ─── تایپوگرافیِ بخش ─── */
.fx-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: var(--fx-r-pill);
  font-size: 13px; font-weight: 600; letter-spacing: .2px;
  color: var(--fx-a);
  background: color-mix(in srgb, var(--fx-a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fx-a) 26%, transparent);
}
.fx-h2 {
  margin: 18px 0 14px;
  font-size: clamp(28px, 4.6vw, 48px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.4px;
}
.fx-sub {
  max-width: 720px;
  font-size: clamp(15px, 1.9vw, 18px);
  color: var(--fx-text-dim);
  line-height: 1.95;
}
.fx-sec-head { text-align: center; margin: 0 auto 56px; max-width: 820px; }
.fx-sec-head .fx-sub { margin-inline: auto; }

.fx-grad-text {
  background: var(--fx-grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fx-grad-text-c {
  background: var(--fx-grad-c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ─── دکمه‌ها ─── */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--fx-r-pill);
  font-weight: 700; font-size: 15px; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease;
  will-change: transform;
}
.fx-btn:hover { transform: translateY(-2px); }
.fx-btn-primary { color: var(--fx-on-a); background: var(--fx-grad-a); box-shadow: var(--fx-shadow-a); }
.fx-btn-primary:hover { box-shadow: 0 28px 80px -20px var(--fx-glow-a); }
.fx-btn-ghost {
  color: var(--fx-text); background: var(--fx-surface);
  border-color: var(--fx-border-2); backdrop-filter: var(--fx-blur);
}
.fx-btn-ghost:hover { background: var(--fx-surface-2); border-color: var(--fx-a); }

/* ─── شیشه و کارت ─── */
.fx-glass {
  background: var(--fx-glass); border: 1px solid var(--fx-border);
  backdrop-filter: var(--fx-blur); -webkit-backdrop-filter: var(--fx-blur);
}
.fx-card {
  position: relative; border-radius: var(--fx-r-lg);
  background: var(--fx-glass); border: 1px solid var(--fx-border);
  backdrop-filter: var(--fx-blur); -webkit-backdrop-filter: var(--fx-blur);
  padding: 30px; overflow: hidden;
}
.fx-ring { position: relative; }
.fx-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fx-a) 50%, transparent), color-mix(in srgb, var(--fx-b) 18%, transparent) 45%, color-mix(in srgb, var(--fx-c) 45%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .8;
}
.fx-logo-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--fx-grad-brand);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -10px var(--fx-glow-a); flex-shrink: 0;
}