/* index1: the client's 2026-10-07 revision of the Persian landing page (loaded after style.css) */

/* ---------- Header tools: device setting, language, day, night as four separate buttons ---------- */
.nav-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: none; }
.tool-btn {
  flex: none; height: 36px; min-width: 36px; padding: 0; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--fg-200);
  display: inline-grid; place-items: center; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  transition: color 150ms, border-color 150ms, background-color 150ms, transform 160ms var(--ease-quart);
}
.tool-btn:hover { color: var(--fg-100); border-color: var(--line-3); background: var(--surface-100); }
.tool-btn:active { transform: scale(.94); }
.tool-btn[aria-pressed="true"] { color: var(--fg-100); border-color: var(--line-3); background: var(--surface-200, var(--surface-100)); }
.tool-lang { padding: 0 10px; }
/* the device button shows a monitor on desktop and a phone on mobile */
.tool-btn .i-desktop { display: none; }
@media (min-width: 1024px) {
  .tool-btn .i-desktop { display: block; }
  .tool-btn .i-mobile { display: none; }
}
/* four buttons plus the menu button must fit next to the logo on small phones */
.nav-toggle { flex: none; }
@media (max-width: 400px) {
  .nav { gap: 10px; }
  .nav-tools { gap: 5px; }
  .tool-btn { height: 34px; min-width: 34px; }
  .tool-lang { padding: 0 8px; }
}
@media (max-width: 379px) {
  .nav.container { padding-inline: 16px; }
  .nav { gap: 8px; }
  .brand img { height: 22px; }
  .nav-tools { gap: 3px; }
  .tool-btn { height: 32px; min-width: 32px; }
  .tool-lang { padding: 0 7px; }
  .nav-toggle { padding: 6px; }
}

/* ---------- Hero spotlight: a visible, slow swing like the reference, instead of a barely-there breath ---------- */
.hero-beam { animation: hero-beam-swing 7s ease-in-out infinite alternate; }
.hero-source { animation: hero-source-swing 7s ease-in-out infinite alternate; }
@keyframes hero-beam-swing {
  0%   { transform: rotate(46deg) scaleX(.9); opacity: .8; }
  50%  { transform: rotate(53.5deg) scaleX(1.12); opacity: 1; }
  100% { transform: rotate(49deg) scaleX(.96); opacity: .88; }
}
@keyframes hero-source-swing {
  0%   { opacity: .8; transform: translateX(-10px) scaleX(.94); }
  50%  { opacity: 1; transform: translateX(6px) scaleX(1.06); }
  100% { opacity: .9; transform: translateX(-2px) scaleX(1); }
}
@media (max-width: 899px) {
  .hero-beam { animation-name: hero-beam-swing-m; }
}
@keyframes hero-beam-swing-m {
  0%   { transform: rotate(31deg) scaleX(.9); opacity: .8; }
  50%  { transform: rotate(37.5deg) scaleX(1.12); opacity: 1; }
  100% { transform: rotate(34deg) scaleX(.96); opacity: .88; }
}

/* ---------- "۹۰٪" statement: holographic light lines instead of floating keywords ---------- */
.holo-lines {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at center, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 70% at center, #000 30%, transparent 85%);
}
.holo-lines .hl {
  fill: none; stroke: url(#holo-a); stroke-width: 1.8; stroke-linecap: round; opacity: .75;
  stroke-dasharray: 420 900; animation: holo-run 9s linear infinite;
  filter: drop-shadow(0 0 4px rgba(129, 140, 248, .7));
}
.holo-lines .hl2, .holo-lines .hl4 { stroke: url(#holo-b); }
.holo-lines .hl2 { animation-duration: 12s; animation-delay: -4s; opacity: .45; }
.holo-lines .hl3 { animation-duration: 10s; animation-delay: -7s; animation-direction: reverse; opacity: .35; }
.holo-lines .hl4 { animation-duration: 14s; animation-delay: -2s; opacity: .3; }
.holo-lines .hl5 { animation-duration: 11s; animation-delay: -9s; animation-direction: reverse; opacity: .3; }
:root[data-theme="light"] .holo-lines .hl { opacity: .35; filter: none; }
@keyframes holo-run { from { stroke-dashoffset: 1320; } to { stroke-dashoffset: 0; } }

/* ---------- Alerts text next to the library animation, as one full-width cell ---------- */
@media (min-width: 640px) {
  .bento-wide { grid-column: 1 / -1; border-inline-start: 0 !important; }
}

/* ---------- Contact form: a clear, easy-to-reach card ---------- */
.lead-card {
  margin-top: 28px; padding: 24px; border-radius: 18px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(var(--ink), .04), rgba(var(--ink), .015));
  box-shadow: 0 20px 60px -30px rgba(99, 102, 241, .45);
}
.lead-card .form-row { gap: 12px; }
@media (min-width: 640px) { .lead-card .form-row { grid-template-columns: 1fr 1fr; } }
.lead-card input[type="text"], .lead-card input[type="tel"] { height: 52px; font-size: 16px; }
/* plan chosen on a «درخواست مشاوره» card of the plans section (main.js pre-selects it) */
.lead-form select {
  width: 100%; height: 52px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-100);
  padding: 0 14px; padding-inline-end: 40px; font: inherit; font-size: 16px; color: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none; transition: border-color 150ms, box-shadow 150ms;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px; background-position: right 14px center;
}
[dir="rtl"] .lead-form select { background-position: left 14px center; }
.lead-form select:focus { outline: none; border-color: rgba(168,85,247,.7); box-shadow: 0 0 0 3px rgba(168,85,247,.2); }
.lead-form select option { background: var(--surface-100); color: var(--fg-100); }
.lead-form select.is-picked { border-color: rgba(168,85,247,.7); box-shadow: 0 0 0 3px rgba(168,85,247,.2); }
.lead-card .btn { justify-self: stretch; justify-content: center; height: 52px; font-size: 16px; }

/* ---------- FAQ: slow drifting galaxy in the background ---------- */
.faq-section { position: relative; overflow: hidden; isolation: isolate; }
.faq-section > .container { position: relative; }
.galaxy { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.galaxy > i { position: absolute; inset: -20%; }
.gx-stars {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 46% 32%, rgba(200,210,255,.85), transparent),
    radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 77% 22%, rgba(190,200,255,.9), transparent),
    radial-gradient(1px 1px at 88% 54%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 6% 86%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 54% 8%, rgba(255,255,255,.7), transparent);
  background-size: 360px 360px;
  animation: gx-drift 90s linear infinite;
  opacity: .8;
}
.gx-far { background-size: 220px 220px; opacity: .45; animation-duration: 140s; animation-direction: reverse; }
.gx-neb {
  background:
    radial-gradient(ellipse 38% 30% at 30% 45%, rgba(59, 68, 232, .28), transparent 70%),
    radial-gradient(ellipse 30% 26% at 70% 60%, rgba(168, 85, 247, .2), transparent 70%),
    radial-gradient(ellipse 26% 20% at 55% 30%, rgba(56, 189, 248, .14), transparent 70%);
  filter: blur(20px);
  animation: gx-swirl 26s ease-in-out infinite alternate;
}
:root[data-theme="light"] .gx-stars { opacity: 0; }
:root[data-theme="light"] .gx-neb { opacity: .55; }
@keyframes gx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-360px, 180px, 0); } }
@keyframes gx-swirl {
  0%   { transform: rotate(0deg) scale(1) translate3d(0, 0, 0); }
  50%  { transform: rotate(8deg) scale(1.08) translate3d(3%, -2%, 0); }
  100% { transform: rotate(-6deg) scale(1.02) translate3d(-3%, 2%, 0); }
}

/* ---------- Footer wordmark: plain white glow on dark, plain black on light (no rainbow) ---------- */
.wordmark span {
  background:
    radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 255, 255, .95), rgba(255, 255, 255, .45) 45%, transparent 70%),
    linear-gradient(rgba(var(--ink), .05), rgba(var(--ink), .05));
  -webkit-background-clip: text; background-clip: text;
}
:root[data-theme="light"] .wordmark span {
  background:
    radial-gradient(320px circle at var(--mx) var(--my), rgba(0, 0, 0, .9), rgba(0, 0, 0, .4) 45%, transparent 70%),
    linear-gradient(rgba(var(--ink), .05), rgba(var(--ink), .05));
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- Phones: smoother scrolling (client reported "piece by piece" jumps) ----------
   Blurred entrance animations are costly on phones and made headings such as
   "مسیر خودتان را انتخاب کنید" stutter; on small screens they only fade and slide.
   The "۹۰٪" statement no longer lights word by word with the scroll there. */
@media (max-width: 767px) {
  .reveal, .reveal.in { filter: none; transition-property: opacity, transform; }
  [data-words].go .word { animation-name: word-in-m; }
  .anim-in { animation-name: reveal-in-m; }
  .statement-text .w { opacity: 1; transition: none; }
}
/* the same on tablets and any touch device (iPad Safari included) */
.tp-lite .reveal, .tp-lite .reveal.in { filter: none; transition-property: opacity, transform; }
.tp-lite [data-words].go .word { animation-name: word-in-m; }
.tp-lite .anim-in { animation-name: reveal-in-m; }
@keyframes word-in-m { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes reveal-in-m { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Logo strip: "5" of MetaTrader next to its mark ---------- */
.bl sup { font-size: 11px; margin-left: 2px; }