/* =========================================================
   TahlilPlus landing – light/dark, RTL (fa) + LTR (en), Vazirmatn
   ========================================================= */
:root {
  --bg: #000;
  --bg-rgb: 0,0,0;
  --ink: 255,255,255;
  --fg-strong: #fff;
  --btn-bg: #fff;
  --btn-fg: #000;
  --btn-bg-hover: #c9c9ce;
  --shadow: 0,0,0;
  --shadow-k: 1;
  --win-bg: #0b0b0d;
  --win-2: #111113;
  --win-2-rgb: 17,17,19;
  --win-3: #1a1a1c;
  --win-line: #1c1c1f;
  --win-line-2: #2a2a2e;
  --win-line-3: #3a3a40;
  --glass-1: #33373d; --glass-2: #1b1e21; --glass-3: #0b0c0e; --glass-4: #050505;
  --tab-1: #2c2c32; --tab-2: #0c0c0f;
  --logo-filter: none;
  --surface-0: #0b0b0d;
  --surface-100: #111113;
  --surface-200: #1a1a1c;
  --panel: #0b0d10;
  --line: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .10);
  --line-3: rgba(255, 255, 255, .15);
  --fg-100: #f2f2f4;
  --fg-200: #c9c9ce;
  --fg-300: #8a8a90;
  --fg-400: #5c5c62;
  --up: #1fa38a;
  --down: #e0434f;
  --sky: #38bdf8;
  --cobalt: #3b44e8;
  --purple: #a855f7;
  --beam: 80,120,195;
  --beam-hi: 215,228,255;
  --beam-mid: 120,155,212;
  --beam-lo: 45,82,155;
  --beam-k: 1;
  --beam-a: .34;
  --beam-core: 215,228,255;
  --beam-core-a: .6;
  --glint: 220,232,255;
  --glint-blend: screen;
  --fog: 110,130,180;
  --fog-a: .22;
  --fog-lit: 170,195,245;
  --fog-lit-a: .38;
  --person: #04060a;
  --person-rim: .45;
  --rock-top: #0f1726;
  --rim-cool: 70,135,215;
  --rim-warm: 245,205,160;
  --ledge: 150,175,215;
  --mist: 40,115,180;
  --mist-a: .55;
  --rock-bottom: #000;
  --pink: #ec4899;
  --orange: #e39a35;
  --brand-grad: linear-gradient(90deg, var(--sky), var(--purple), var(--pink));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-quart: cubic-bezier(.25, 1, .5, 1);
  --container: 1240px;
  --radius: 12px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-100);
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg-strong); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(168, 85, 247, .45); }

.skip-link {
  position: absolute; inset-inline-start: 12px; top: -48px; z-index: 100;
  background: var(--btn-bg); color: var(--btn-fg); padding: 8px 14px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.center { text-align: center; }
.stack-6 > * + * { margin-top: 24px; }
.stack-8 > * + * { margin-top: 32px; }
.stack-10 > * + * { margin-top: 40px; }
.stack-12 > * + * { margin-top: 48px; }
.pt-2 { padding-top: 8px; }
.w-full { width: 100%; justify-content: center; }
.up { color: var(--up); }
.down { color: var(--down); }

/* ---------- Typography ---------- */
.display {
  font-size: clamp(40px, 10.5vw, 46px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: balance;
}
@media (min-width: 640px) { .display { font-size: clamp(46px, 6vw, 76px); line-height: 1.15; } }
.h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.h2.xl { font-size: clamp(32px, 4.5vw, 56px); }
.lead { font-size: 18px; color: var(--fg-200); text-wrap: pretty; }
@media (min-width: 640px) { .lead { font-size: 20px; } }
.body { font-size: 16px; line-height: 1.95; color: var(--fg-300); text-wrap: pretty; max-width: 65ch; }
.fineprint { font-size: 12px; color: var(--fg-300); max-width: 42rem; margin-inline: auto; line-height: 1.8; }
.section-head { max-width: 48rem; }
.section-head.center { margin-inline: auto; }
.section-head.center .body { margin-inline: auto; }
.section-head > * + * { margin-top: 20px; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; border: 0;
  transition: transform 160ms var(--ease-quart), background-color 160ms var(--ease-quart), border-color 160ms var(--ease-quart), color 160ms;
}
.btn:active { transform: scale(.97); }
.btn .arrow { display: inline-block; transition: transform 200ms var(--ease-quart); }
.btn:hover .arrow { transform: translateX(-3px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-ghost { background: var(--surface-100); color: var(--fg-100); border: 1px solid var(--line-3); }
.btn-ghost:hover { background: var(--surface-200); border-color: rgba(var(--ink), .3); }
.btn-sm { padding: 7px 16px; font-size: 13px; }

/* spinning conic border (badge + glow pill) */
.spin-border { position: relative; display: inline-flex; overflow: hidden; border-radius: 999px; padding: 1px; isolation: isolate; }
.spin-border-glow {
  position: absolute; inset: -200%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--ink), .10) 40deg, var(--sky) 78deg, var(--cobalt) 104deg, var(--purple) 128deg, var(--pink) 144deg, color-mix(in srgb, var(--orange) 60%, transparent) 162deg, transparent 195deg);
  animation: spin 4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.badge-link {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; background: var(--surface-100);
  padding: 6px 10px 6px 16px;
  font-size: 14px; color: var(--fg-200);
  transition: color 150ms;
}
.badge-link:hover { color: var(--fg-100); }
.badge-link .arrow { display: inline-block; transition: transform 200ms var(--ease-quart); }
.badge-link:hover .arrow { transform: translateX(-2px); }
.badge-tag {
  border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 9px;
  font-size: 11px; color: var(--fg-200);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}
@media (min-width: 1024px) {
  .site-header { background: rgba(var(--bg-rgb), .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.nav { height: 64px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.brand img { height: 28px; width: auto; transition: opacity 150ms; }
.brand:hover img { opacity: .8; }
.nav-links { display: none; align-items: center; gap: 4px; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--fg-200); transition: color 150ms; }
.nav-links a:hover { color: var(--fg-100); }
.nav-actions { display: none; align-items: center; gap: 12px; margin-inline-start: auto; }
.nav-login { font-size: 14px; color: var(--fg-200); padding: 6px 8px; transition: color 150ms; }
.nav-login:hover { color: var(--fg-100); }
.nav-toggle {
  margin-inline-start: auto; background: none; border: 0; padding: 8px; border-radius: 6px;
  color: var(--fg-200); cursor: pointer; transition: transform 160ms var(--ease-quart);
}
.nav-toggle:active { transform: scale(.97); }
@media (min-width: 1024px) {
  .nav-links, .nav-actions { display: flex; }
  .nav-toggle { display: none; }
}
.mobile-menu { border-top: 1px solid var(--line); padding: 12px 24px 24px; background: var(--bg); }
.mobile-menu li a { display: block; padding: 12px 0; font-size: 16px; color: var(--fg-200); border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 20px; width: 100%; justify-content: center; }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 64px 0 48px; }
@media (min-width: 640px) { .hero { padding: 56px 0 128px; } }
.hero-bg {
  position: absolute; inset-inline: 0; top: 0; height: 560px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 97%);
}
@media (min-width: 640px) { .hero-bg { height: 720px; } }
.hero-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(1.5px); opacity: .45; }
.hero-bg-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 58% 52% at 50% 40%, rgba(var(--bg-rgb), .62), transparent 75%); }
.hero-bg-top { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-rgb), .35), transparent 26%); }
/* Spotlight, modeled on luxalgo.com: a wide, cool beam pours from a bright source near the top and
   fans out toward the lower corner, slowly breathing (it swings a little and widens/narrows). It
   lands on a tiny figure standing on a misty ridge just above the product window. The beam lives on
   a fixed 2400px stage centered in the hero (wide enough that its edges never show; the layout
   was tuned for a 1440px window, i.e. stage x 480-1920); everything is mirrored for RTL so the light comes from
   the reading-start side. */
.hero-light {
  position: absolute; top: 0; left: 50%; width: 2400px; height: 900px; margin-left: -1200px;
  pointer-events: none; overflow: hidden;
}
[dir="rtl"] .hero-light { transform: scaleX(-1); }
.hero-source {
  position: absolute; left: 1545px; top: -26px; width: 150px; height: 52px; margin-left: -75px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--beam-hi), calc(.95 * var(--beam-k))), rgba(var(--beam-hi), calc(.35 * var(--beam-k))) 55%, transparent);
  filter: blur(6px);
  animation: hero-flicker 9s ease-in-out infinite alternate;
}
/* Projector-like cone: a crisp core layer plus a wide soft haze, both pivoting at the source */
.hero-beam {
  position: absolute; left: 1545px; top: -20px; width: 760px; height: 1150px; margin-left: -380px;
  transform-origin: 50% 0; transform: rotate(51deg);
  animation: hero-beam 9s ease-in-out infinite alternate;
}
/* blur sits on the wrapper so it softens the clipped cone's edges (filter runs before clip-path) */
.hero-beam > i { position: absolute; inset: 0; }
.hero-beam > i::before { content: ""; position: absolute; inset: 0; }
.hb-core { filter: blur(9px); }
.hb-haze { filter: blur(36px); }
.hb-core::before {
  clip-path: polygon(45.5% 0, 54.5% 0, 88% 100%, 12% 100%);
  background: linear-gradient(180deg,
    rgba(var(--beam-hi), calc(.85 * var(--beam-k))) 0%,
    rgba(var(--beam-mid), calc(.58 * var(--beam-k))) 18%,
    rgba(var(--beam-mid), calc(.4 * var(--beam-k))) 40%,
    rgba(var(--beam-lo), calc(.24 * var(--beam-k))) 62%,
    rgba(var(--beam-lo), calc(.08 * var(--beam-k))) 82%,
    transparent 95%);
  /* soft on the upper side of the band, crisper on the lower side, like the reference */
  -webkit-mask-image: linear-gradient(90deg, transparent 14%, rgba(0,0,0,.35) 38%, #000 66%, #000 86%, rgba(0,0,0,.5) 89%);
  mask-image: linear-gradient(90deg, transparent 14%, rgba(0,0,0,.35) 38%, #000 66%, #000 86%, rgba(0,0,0,.5) 89%);
}
.hb-haze::before {
  clip-path: polygon(44% 0, 56% 0, 94% 100%, 6% 100%);
  background: linear-gradient(180deg, rgba(var(--beam-mid), calc(.2 * var(--beam-k))) 0%, rgba(var(--beam-mid), calc(.2 * var(--beam-k))) 30%, rgba(var(--beam-lo), calc(.2 * var(--beam-k))) 60%, rgba(var(--beam-lo), calc(.12 * var(--beam-k))) 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, rgba(0,0,0,.4) 45%, #000 70%, #000 82%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent 20%, rgba(0,0,0,.4) 45%, #000 70%, #000 82%, transparent 96%);
}
@keyframes hero-beam {
  0%   { transform: rotate(50deg) scaleX(.92); opacity: .88; }
  45%  { transform: rotate(52.2deg) scaleX(1.1); opacity: 1; }
  100% { transform: rotate(50.8deg) scaleX(.97); opacity: .9; }
}
@keyframes hero-flicker { 0% { opacity: .85; } 40% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 1; } }
.hero-window { z-index: 1; }
.hero-figure {
  position: absolute; z-index: 0; top: -140px; width: 1300px; height: 360px; pointer-events: none;
  inset-inline-start: calc(max(0px, 50% - 540px) - 840px);
}
[dir="rtl"] .hero-figure { transform: scaleX(-1); }
.hero-figure > * { position: absolute; }
/* A long, curved ridge (like a planet's horizon) whose rim catches the beam */
.hero-rock {
  left: 0; top: 90px; width: 1300px; height: 260px; overflow: visible; filter: blur(.8px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.hero-rock .rk-top { stop-color: var(--rock-top); }
.hero-rock .rk-bottom { stop-color: var(--rock-bottom); }
.hero-rock .rk-rim { stop-color: rgb(var(--rim-cool)); }
.hero-rock .rk-rim-warm { stop-color: rgb(var(--rim-warm)); }
.hero-rock .rk-sheen { stop-color: rgb(var(--rim-cool)); }
.hero-rock .rk-warm { stop-color: rgb(var(--rim-warm)); }
.hero-rock .rk-shadow { stop-color: var(--rock-bottom); }
.hero-rock .rk-dent { fill: var(--rock-bottom); opacity: .45; filter: blur(6px); }
.hero-person {
  left: 1002px; top: 82px; width: 15px; height: 37px; overflow: visible; z-index: 1; opacity: .92;
  filter: blur(.6px) drop-shadow(0 0 3px rgba(var(--beam), calc(var(--beam-a) * 2)));
}
.hero-person .ps-dark { stop-color: var(--person); }
.hero-person .ps-rim { stop-color: rgb(var(--beam-core)); stop-opacity: var(--person-rim); }
/* Barely-there life: breathing and the head lifting toward the light */
.hero-person .hp-body { transform-origin: 21px 98px; animation: hero-sway 7s ease-in-out infinite; }
.hero-person .hp-head { transform-origin: 21px 14px; animation: hero-look 11s ease-in-out infinite; }
@keyframes hero-sway {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  35%      { transform: rotate(.9deg) scaleY(1.008); }
  70%      { transform: rotate(-.6deg) scaleY(.997); }
}
@keyframes hero-look {
  0%, 30%, 100% { transform: rotate(0deg); }
  45%, 75%      { transform: rotate(9deg) translateY(-.3px); }
}
/* Slow ~9.4s breathing taken from the reference clip: first the beam lights the ledge top, then a
   blue mist swells up around the figure while the rim warms to amber, then both settle again. */
.hero-rock .rk-ledge { fill: rgba(var(--ledge), .3); filter: blur(2.5px); animation: hero-ledge 9.4s ease-in-out infinite; }
.hero-rock .rk-rim-glow { stroke: rgb(var(--rim-warm)); filter: blur(.6px); animation: hero-rim-warm 9.4s ease-in-out infinite; }
.hf-mist {
  left: 860px; top: -40px; width: 300px; height: 210px; border-radius: 50%; z-index: 0;
  background:
    radial-gradient(ellipse 34% 44% at 52% 62%, rgba(var(--mist), var(--mist-a)), transparent 72%),
    radial-gradient(ellipse 50% 40% at 40% 40%, rgba(var(--mist), calc(var(--mist-a) * .5)), transparent 75%);
  filter: blur(18px); transform-origin: 50% 80%;
  animation: hero-mist 9.4s ease-in-out infinite;
}
@keyframes hero-ledge    { 0%, 22% { opacity: 1; } 45%, 62% { opacity: .35; } 85%, 100% { opacity: 1; } }
@keyframes hero-rim-warm { 0%, 20% { opacity: .15; } 45%, 64% { opacity: .9; } 88%, 100% { opacity: .15; } }
@keyframes hero-mist     { 0%, 18% { opacity: .15; transform: scale(.8); } 45%, 62% { opacity: 1; transform: scale(1.08); } 86%, 100% { opacity: .15; transform: scale(.85); } }
/* Mist: a column of light around the figure where the beam meets the ridge, and fog drifting across */
.hf-halo {
  left: 945px; top: -20px; width: 130px; height: 210px; border-radius: 50%; opacity: .7;
  background: radial-gradient(closest-side, rgba(var(--fog-lit), calc(var(--fog-lit-a) * .8)), rgba(var(--beam), calc(var(--beam-a) * .4)) 55%, transparent);
  filter: blur(16px);
  animation: hero-flicker 9s ease-in-out infinite alternate;
}
.hf-glint {
  left: 950px; top: 111px; width: 130px; height: 9px; border-radius: 50%; z-index: 2;
  background: radial-gradient(closest-side, rgba(var(--rim-warm), .7), rgba(var(--rim-warm), .2) 55%, transparent);
  mix-blend-mode: var(--glint-blend); filter: blur(4px);
  animation: hero-flicker 9s ease-in-out infinite alternate;
}
.hf-fog { left: 560px; top: 30px; width: 740px; height: 210px; z-index: 2; mix-blend-mode: var(--glint-blend); }
.hf-fog::before, .hf-fog::after { content: ""; position: absolute; inset: 0; border-radius: 50%; filter: blur(20px); }
.hf-fog::before {
  background:
    radial-gradient(ellipse 10% 30% at 61% 36%, rgba(var(--fog-lit), calc(var(--fog-lit-a) * .45)), transparent 70%),
    radial-gradient(ellipse 45% 18% at 50% 52%, rgba(var(--fog), var(--fog-a)), transparent 75%);
  animation: hero-fog-glow 9s ease-in-out infinite alternate;
}
.hf-fog::after {
  background:
    radial-gradient(ellipse 34% 14% at 30% 58%, rgba(var(--fog), var(--fog-a)), transparent 75%),
    radial-gradient(ellipse 28% 12% at 72% 50%, rgba(var(--fog), calc(var(--fog-a) * .9)), transparent 75%);
  animation: hero-fog-drift 18s ease-in-out infinite alternate;
}
@keyframes hero-fog-glow { from { opacity: .75; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
@keyframes hero-fog-drift { from { transform: translateX(-24px); } to { transform: translateX(28px); } }
/* Mobile/tablet, after the LuxAlgo mobile hero: the stage shrinks around the light source, which
   sits in the top corner of the screen; the beam falls more steeply and a little brighter across the
   text toward the figure, which stands small on the ridge at the opposite edge above the window. */
@media (max-width: 899px) {
  .hero-light {
    height: 1500px; left: 100%; margin-left: -1575px;
    transform-origin: 1545px 0; transform: scale(.6); --beam-k: 1.8;
  }
  [dir="rtl"] .hero-light { left: 0; margin-left: -1515px; transform: scale(-.6, .6); }
  .hero-beam { height: 1250px; animation-name: hero-beam-m; }
  .hero-figure { top: -65px; inset-inline-start: -380px; transform-origin: 0 0; transform: scale(.45); }
  [dir="rtl"] .hero-figure { transform-origin: 100% 0; transform: translateX(-45%) scale(-.45, .45); }
}
@keyframes hero-beam-m {
  0%   { transform: rotate(34deg) scaleX(.92); opacity: .88; }
  45%  { transform: rotate(36deg) scaleX(1.1); opacity: 1; }
  100% { transform: rotate(34.8deg) scaleX(.97); opacity: .9; }
}
.hero-inner { position: relative; }
.hero-inner > .anim-in:first-child { display: flex; justify-content: center; }
.hero-copy { max-width: 48rem; margin: 32px auto 0; text-align: center; }
.hero-copy > * + * { margin-top: 28px; }
.hero-lead { max-width: 36rem; margin-inline: auto; font-size: 18px; color: var(--fg-200); text-wrap: pretty; }
@media (min-width: 640px) { .hero-lead { font-size: 20px; } }
.hero-window-wrap { margin-top: 56px; }
@media (min-width: 640px) { .hero-window-wrap { margin-top: 64px; } }

/* ---------- App window (shared) ---------- */
.app-window {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--win-line);
  background: var(--panel);
  box-shadow: 0 60px 160px -40px rgba(var(--shadow), calc(.95 * var(--shadow-k)));
}
.hero-window {
  max-width: 1080px; margin-inline: auto;
  box-shadow: 0 0 0 1px rgba(var(--ink), .04), 0 40px 120px -30px rgba(59,68,232,.45), 0 30px 100px -40px rgba(236,72,153,.35), 0 60px 160px -40px rgba(var(--shadow), calc(.95 * var(--shadow-k)));
}
.hero-window::before {
  content: ""; position: absolute; inset-inline: 10%; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(var(--ink), .55), transparent);
}
.aw-bar {
  height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border-bottom: 1px solid var(--win-line); background: var(--win-bg); font-size: 12px;
}
.aw-dots { display: flex; gap: 6px; margin-inline-end: 6px; }
.aw-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--win-line-2); }
.aw-logo { height: 18px; width: auto; }
.aw-sep { width: 1px; height: 20px; background: var(--win-line-2); margin: 0 4px; }
.aw-pill { padding: 5px 10px; border: 1px solid var(--win-line-2); border-radius: 8px; color: var(--fg-100); white-space: nowrap; }
.aw-pill.muted { color: var(--fg-300); }
.aw-spacer { flex: 1; }
.hero-live { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-200); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 9px rgba(46,164,96,.6); animation: pulse 1.6s ease-in-out infinite; display: inline-block; }
@keyframes pulse { 50% { opacity: .35; } }

.aw-body { display: grid; grid-template-columns: 1fr; height: clamp(300px, 52vw, 560px); }
@media (min-width: 900px) { .aw-body { grid-template-columns: 230px 1fr 40px; } }
.aw-tools { display: none; flex-direction: column; gap: 14px; padding: 14px 0; align-items: center; border-inline-end: 1px solid var(--win-line); order: 3; }
.aw-tools i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--win-line-3); }
.aw-side { display: none; border-inline-end: 1px solid var(--win-line); padding: 12px; font-size: 12px; overflow: hidden; order: 1; }
.aw-chart { position: relative; order: 2; min-width: 0; }
.aw-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 900px) {
  .aw-tools { display: flex; border-inline-end: 0; border-inline-start: 1px solid var(--win-line); }
  .aw-side { display: block; }
}
.aw-legend { position: absolute; left: 12px; top: 10px; font-size: 12px; color: var(--fg-300); font-family: ui-monospace, "SF Mono", Menlo, monospace; display: flex; gap: 8px; align-items: center; }
.aw-legend b { color: var(--fg-100); }
.aw-legend-tag { border: 1px solid var(--win-line-2); border-radius: 6px; padding: 1px 6px; color: var(--fg-200); font-family: "Vazirmatn", sans-serif; }
.aw-side-title { color: var(--fg-300); font-size: 11px; margin: 4px 0 8px; }
.watch { margin-bottom: 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; }
.watch li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 6px 4px; border-radius: 6px; color: var(--fg-200); transition: background-color 200ms; }
.watch li:hover { background: var(--win-2); }
.watch li.flash-up { background: rgba(31,163,138,.12); }
.watch li.flash-down { background: rgba(224,67,79,.12); }
.aw-signal { border: 1px solid var(--win-line); background: linear-gradient(180deg, rgba(31,163,138,.10), transparent); border-radius: 10px; padding: 10px; display: grid; gap: 4px; color: var(--fg-200); }
.aw-signal-kind { color: var(--up); font-weight: 700; }
.aw-signal small { color: var(--fg-300); }

/* ---------- Marquee ---------- */
.strip { border-block: 1px solid var(--line); padding: 40px 0; }
.marquee { position: relative; overflow: hidden; user-select: none; }
.marquee-center {
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.45) 12%, rgba(0,0,0,.45) 38%, #000 50%, rgba(0,0,0,.45) 62%, rgba(0,0,0,.45) 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.45) 12%, rgba(0,0,0,.45) 38%, #000 50%, rgba(0,0,0,.45) 62%, rgba(0,0,0,.45) 88%, transparent);
}
.marquee-edges {
  margin-inline: -24px; padding-inline: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track.slow { animation-duration: 45s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; flex-shrink: 0; align-items: center; }
.marquee-group.gap { gap: 16px; padding-inline-end: 16px; align-items: stretch; }
/* RTL: move content to the right so it reads naturally */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
.marquee-track[dir="ltr"] { animation-name: marquee-ltr; }
/* an LTR track on the RTL page must start at the left edge, or scrolling left empties the strip */
.marquee:has(> .marquee-track[dir="ltr"]) { direction: ltr; }
@keyframes marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.strip-cap { text-align: center; font-size: 12px; color: var(--fg-300); margin-bottom: 22px; letter-spacing: .02em; }
.bl { display: inline-flex; align-items: center; gap: 9px; height: 24px; margin: 0 40px; white-space: nowrap; opacity: .9; color: var(--fg-strong); }
.bl img { height: 22px; width: auto; }
.bl img.bl-wide { height: 20px; }
.bl img[src*="tradingview"] { height: 16px; }
.bl b.coinbase { font-weight: 700; letter-spacing: -.02em; font-size: 21px; }
.bl b { font-family: "Vazirmatn", system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.bl-text b { font-size: 19px; font-weight: 800; }
.bl-text sup { font-size: 11px; margin-left: 2px; }
.bl b.bybit { letter-spacing: .08em; }
@media (max-width: 639px) { .bl { margin: 0 22px; } .bl b { font-size: 16px; } .bl-text b { font-size: 17px; } }
.mk { display: inline-flex; align-items: baseline; gap: 8px; margin: 0 40px; white-space: nowrap; color: var(--fg-200); font-size: 15px; opacity: .9; }
.mk b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; color: var(--fg-strong); letter-spacing: .02em; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
@media (min-width: 640px) { .section { padding: 128px 0; } }
#strategy { padding-block: 96px; }
.bordered { border-block: 1px solid var(--line); }

.workspace { max-width: 1040px; margin-inline: auto; }
:root:not([data-theme="light"]) .workspace {
  /* night: the desk is a dark monitor, frame included (day: light desk, see the day theme below) */
  --win-bg: #0b0b0d; --win-line: #1c1c1f; --win-line-2: #2a2a2e; --win-line-3: #3a3a40; --panel: #08090b;
  --fg-100: #f2f2f4; --fg-200: #c9c9ce; --fg-300: #8a8a90;
}
/* Workspace: a camera tour over a 2x2 chart desk (zoom, pan, 3D tilt, depth of field, screen pixels).
   Dark desk at night, light desk by day. */
.wsx {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  background: #08090b; perspective: 1500px; perspective-origin: 50% 50%;
}
.wsx-cam {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px;
  transform-origin: 0 0; background: #0a0b0d; color: #d6d7da;
  font: 13px/1 ui-sans-serif, "Vazirmatn", system-ui, sans-serif;
  will-change: transform;
}
.wsx-tool { position: absolute; left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: center; gap: 22px; padding: 0 16px; }
.wsx-tool b { font: 700 14px ui-sans-serif, system-ui, sans-serif; color: #eceef1; }
.wsx-tool i, .wsx-ind i { display: inline-block; width: 5px; height: 5px; border: solid #8c8f95; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-3px); margin-left: 6px; }
.wsx-tf, .wsx-ind { color: #d6d7da; font-weight: 600; display: inline-flex; align-items: center; }
.wsx-ind em { font-style: normal; margin-right: 6px; color: #b9bcc2; }
.wsx-ic { color: #b9bcc2; font-size: 15px; }
.wsx-ic.dim, .wsx-foot .dim { color: #5c5f66; }
.wsx-flex { flex: 1; }
.wsx-rail { position: absolute; left: 0; top: 62px; width: 30px; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 21px; padding-top: 10px; }
.wsx-rail i { width: 12px; height: 12px; border: 1.5px solid #4a4d54; border-radius: 3px; }
.wsx-rail i:nth-child(3n+2) { border-radius: 50%; }
.wsx-rail i:nth-child(4n) { border-width: 0 0 1.5px; transform: rotate(-40deg); border-radius: 0; }
.wsx-p { position: absolute; width: 615px; height: 312px; background: #0e0f12; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.wsx-p canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wsx-p::after { content: ""; position: absolute; inset: 0; border: 1.5px solid #f2f3f5; opacity: 0; transition: opacity .45s; pointer-events: none; }
.wsx-p.is-on::after { opacity: .92; }
.wsx-foot { position: absolute; left: 16px; right: 16px; bottom: 0; height: 30px; display: flex; align-items: center; gap: 20px; font-size: 11px; color: #9a9da3; }
.wsx-foot b { color: #e6e7ea; font: 600 11px ui-monospace, Menlo, monospace; }
/* Depth of field: everything outside the focus ellipse goes soft */
.wsx-dof {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  -webkit-backdrop-filter: blur(var(--dof, 0px)); backdrop-filter: blur(var(--dof, 0px));
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 38%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 38%, #000 100%);
}
/* phones/tablets: no live backdrop blur over the moving desk (see `lite` in main.js) */
.tp-lite .wsx-dof { display: none; }
.wsx-vig {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.45);
}

/* ---------- Split (assistant demo) ---------- */
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } }
.split-copy > * + * { margin-top: 24px; }
.split-media { min-width: 0; }

.demo-root { position: relative; border-radius: 14px; padding: 1px; }
.prism-border {
  position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
  background: linear-gradient(135deg, rgba(56,189,248,.0) 20%, rgba(56,189,248,.55), rgba(168,85,247,.55), rgba(236,72,153,.45), rgba(236,72,153,0) 80%);
  background-size: 300% 300%;
  animation: prism 8s ease-in-out infinite;
  filter: blur(.3px);
}
.prism-border::after {
  content: ""; position: absolute; inset: 20px 10%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(108,106,230,.35), transparent);
  filter: blur(40px);
}
@keyframes prism { 50% { background-position: 100% 100%; } }
.demo-scale { position: relative; width: 100%; aspect-ratio: 900 / 780; overflow: hidden; border-radius: 12px; }
.demo-canvas {
  position: absolute; top: 0; right: 0; width: 900px; height: 780px; transform-origin: top right;
  background: var(--win-bg); border: 1px solid var(--win-line); border-radius: 12px; overflow: hidden;
  color: var(--fg-100); display: flex; flex-direction: column; font-size: 13px;
}
.dm-bar { height: 46px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--win-line); color: var(--fg-300); }
.dm-logo { height: 19px; width: auto; margin-inline: 4px; }
.dm-sep { width: 1px; height: 20px; background: var(--win-line-2); margin: 0 8px; }
.dm-chip { padding: 5px 12px; border: 1px solid var(--win-line-2); border-radius: 8px; color: var(--fg-200); }
.dm-flex { flex: 1; }
.dm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--win-line-2); border-radius: 8px; color: var(--fg-100); }
.dm-avatar { width: 26px; height: 26px; border-radius: 50%; background: #6c6ae6; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.dm-body { flex: 1; min-height: 0; display: flex; }
.dm-chat { width: 300px; flex: none; border-inline-start: 1px solid var(--win-line); display: flex; flex-direction: column; padding: 12px; order: 0; }
.dm-chat-top { display: flex; gap: 10px; align-items: center; color: var(--fg-400); padding-bottom: 12px; }
.dm-msgs { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 12px; font-size: 12.5px; line-height: 1.85; color: var(--fg-300); }
.dm-user { align-self: stretch; background: var(--win-line); color: var(--fg-100); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.8; }
.dm-thinking { display: flex; align-items: center; gap: 8px; color: var(--fg-400); font-size: 12px; }
.dm-thinking i { width: 6px; height: 6px; background: var(--up); border-radius: 2px; animation: pulse 1s infinite; }
[data-step] { opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
[data-step].on { opacity: 1; transform: none; }
.dm-input { margin-top: 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--win-line-2); border-radius: 999px; padding: 6px; background: var(--win-2); }
.dm-plus { width: 26px; height: 26px; border-radius: 50%; background: var(--win-line); display: grid; place-items: center; color: var(--fg-300); }
.dm-typed { flex: 1; color: var(--fg-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.dm-typed.typing { color: var(--fg-100); }
.dm-typed.typing::after { content: "|"; margin-inline-start: 1px; animation: pulse .8s steps(1) infinite; }
.dm-model { color: var(--fg-100); font-size: 12px; white-space: nowrap; }
.dm-model small { color: var(--fg-300); }
.dm-mic { width: 26px; height: 26px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); display: grid; place-items: center; }
.dm-note { margin-top: 8px; text-align: center; font-size: 10px; color: var(--fg-400); }
.dm-chart { position: relative; flex: 1; min-width: 0; }
.dm-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 700ms var(--ease); }
.dm-creating {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 26px; opacity: 0; transition: opacity 500ms; direction: rtl;
}
.dm-creating.on { opacity: 1; }
.dm-creating b { color: var(--fg-strong); font-weight: 700; }
.dm-creating em {
  font-style: normal; font-weight: 700;
  background: linear-gradient(90deg, var(--win-line-3) 0%, var(--win-line-3) 35%, var(--fg-100) 50%, var(--win-line-3) 65%, var(--win-line-3) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.8s linear infinite;
}
.dm-creating .spark { color: var(--fg-strong); font-size: 22px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.dm-results {
  position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  direction: rtl; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.dm-results.on { opacity: 1; transform: none; }
.dm-results > div { background: rgba(var(--win-2-rgb), .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--win-line-2); border-radius: 12px; padding: 12px 14px; }
.dm-results small { display: block; color: var(--fg-300); font-size: 11px; }
.dm-results b { font-size: 22px; font-weight: 700; }

/* ---------- Statement ---------- */
.statement { position: relative; overflow: hidden; padding: 80px 24px; }
@media (min-width: 640px) { .statement { padding: 112px 24px; } }
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; background-size: 72px 72px;
  background-image: linear-gradient(rgba(var(--ink), .055) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink), .055) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
}
.float-words {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 50% at center, transparent 56%, #000 78%, transparent 98%);
  mask-image: radial-gradient(ellipse 62% 50% at center, transparent 56%, #000 78%, transparent 98%);
}
.float-words span {
  position: absolute; left: var(--x); top: var(--y);
  font-size: 13px; color: var(--fg-300); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px;
  background: rgba(var(--win-2-rgb), .6); white-space: nowrap;
  animation: drift 9s ease-in-out infinite alternate;
}
.float-words span:nth-child(2n) { animation-duration: 11s; animation-delay: -3s; }
.float-words span:nth-child(3n) { animation-duration: 13s; animation-delay: -6s; }
@keyframes drift { to { transform: translate(14px, -18px); } }
@media (max-width: 767px) { .float-words { display: none; } }
.statement-text {
  position: relative; margin-inline: auto; width: fit-content; max-width: 100%;
  font-size: clamp(28px, 4vw, 56px); line-height: 1.35; font-weight: 600; letter-spacing: -.01em;
  text-align: center; text-wrap: balance;
}
.st-line { display: block; }
.statement-text .w { transition: opacity 300ms linear, color 300ms; opacity: .16; }
.statement-text .w.lit { opacity: 1; }
.statement-text .w.brand { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Bento ---------- */
.bento-grid { display: grid; padding-inline: 0; }
@media (min-width: 640px) { .bento-grid { grid-template-columns: 1fr 1fr; padding-inline: 24px; } }
.bento-cell { display: flex; flex-direction: column; padding: 40px 24px 64px; border-color: var(--line); }
@media (max-width: 639px) { .bento-cell + .bento-cell { border-top: 1px solid var(--line); } }
@media (min-width: 640px) {
  .bento-cell { padding: 56px 48px 96px; }
  .bento-cell:nth-child(2n) { border-inline-start: 1px solid var(--line); }
  .bento-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.bento-visual { height: 340px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 640px) { .bento-visual { height: 360px; } }
.bento-copy { max-width: 32rem; margin: 32px auto 0; text-align: center; }
.bento-copy h3 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
@media (min-width: 640px) { .bento-copy h3 { font-size: 27px; } }
.bento-copy p { margin-top: 14px; color: var(--fg-300); font-size: 16px; line-height: 1.95; }
@media (min-width: 640px) { .bento-copy p { font-size: 17px; } }

.vis-card { position: relative; width: min(100%, 496px); aspect-ratio: 1118 / 812; overflow: hidden; border-radius: 16px; border: 1px solid var(--win-line); background: var(--panel); transition: transform 500ms var(--ease), border-color 300ms; }
.bento-cell:hover .vis-card { transform: translateY(-4px); }
.vis-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.hairline { position: absolute; inset-inline: 32px; top: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, rgba(var(--ink), .3), transparent); }

/* "Monitor" cards: dark at night; by day they take the light theme colours (overrides in the day theme below) */
:root:not([data-theme="light"]) .dark-ui {
  --bg-rgb: 0,0,0; --ink: 255,255,255; --fg-strong: #fff;
  --win-bg: #0b0b0d; --win-2: #111113; --win-2-rgb: 17,17,19; --win-3: #1a1a1c;
  --win-line: #1c1c1f; --win-line-2: #2a2a2e; --win-line-3: #3a3a40; --panel: #0b0d10;
  --fg-100: #f2f2f4; --fg-200: #c9c9ce; --fg-300: #8a8a90; --fg-400: #5c5c62;
  color: var(--fg-100);
}

/* AI chat card over a volume profile */
.vis-ai { aspect-ratio: 1.45; max-width: 36rem; width: 100%; border-color: rgba(255,255,255,.09); background: #0c0d0f; }
.vis-ai-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 35%); }
.vis-ai-ui { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; z-index: 2; padding: 0 22px; display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 74%; }
@media (min-width: 640px) { .vis-ai-ui { padding: 0 28px; width: 76%; } }
.vis-ai .bubble { border-radius: 12px; background: #17181b; border-color: rgba(255,255,255,.08); font-size: 12.5px; color: #dcdde0; max-width: 100%; }
.vis-ai .ask-box { border-radius: 14px; background: #17181b; border-color: rgba(255,255,255,.07); }
.vis-ai .chips { flex-wrap: nowrap; }
.vis-ai .chip { background: #1c1d20; border-color: rgba(255,255,255,.08); color: #e6e7ea; padding: 10px 14px; font-size: 12.5px; }
.vis-ai .pill-inner { background: #141518; padding: 11px 24px; font-size: 15px; }
.vis-ai .glow-pill { animation: ai-glow 5s ease-in-out infinite; }
.vis-ai .chip, .vis-ai .ai-press { flex: none; }
@media (max-width: 639px) {
  .vis-ai-ui { width: 94%; padding: 0 14px; gap: 10px; }
  .vis-ai .bubble { font-size: 11px; line-height: 1.7; padding: 8px 12px; }
  .vis-ai .pill-inner { padding: 8px 18px; font-size: 13.5px; }
  .vis-ai .chip { padding: 8px 12px; font-size: 11px; }
  .vis-ai .ask-box { padding: 9px 12px; }
  .vis-ai .ask-row { margin-top: 6px; }
}
.ask-tools { display: inline-flex; align-items: center; gap: 10px; }
.ask-tools svg + svg { margin-inline-end: -4px; }
.ai-press { position: relative; display: inline-flex; animation: ai-press 5s var(--ease) infinite; }
.ai-cursor { position: absolute; left: 64%; top: 62%; width: 15px; height: 21px; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); animation: ai-cursor 5s var(--ease) infinite; }
@keyframes ai-cursor {
  0%, 8% { transform: translate(70px, 46px); opacity: 0; }
  22% { opacity: 1; }
  40%, 46% { transform: translate(0, 0) scale(1); }
  49% { transform: translate(0, 0) scale(.86); }
  53%, 84% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(70px, 46px); opacity: 0; }
}
@keyframes ai-press { 0%, 46%, 56%, 100% { transform: none; } 50% { transform: scale(.965); } }
@keyframes ai-glow {
  0%, 44%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 22px 60px -10px rgba(96,165,250,.55), 0 12px 48px -12px rgba(217,70,239,.55); }
  52%, 70% { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 22px 70px -8px rgba(96,165,250,.9), 0 12px 56px -8px rgba(217,70,239,.9); }
}

/* Chart-style picker → footprint (camera tour) */
.vis-fp { background: #02060f; border-color: rgba(255,255,255,.08); }
.fp-cam {
  position: absolute; left: 0; top: 0; width: 1118px; height: 812px; transform-origin: 0 0; will-change: transform;
  background:
    radial-gradient(60% 45% at 78% 0%, rgba(255,226,206,.95), rgba(255,226,206,0) 70%),
    radial-gradient(55% 40% at 0% 42%, rgba(40,215,245,.95), rgba(40,215,245,0) 75%),
    linear-gradient(180deg, #e9eef1 0%, #bfe7f1 16%, #33c9ea 38%, #0d79b8 58%, #062a5c 74%, #020914 90%, #01040a 100%);
  font: 15px/1 ui-sans-serif, "Vazirmatn", system-ui, sans-serif; color: #e8e9ec;
}
.fp-win { position: absolute; left: 48px; top: 35px; width: 1020px; height: 741px; background: #141517; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.fp-r1, .fp-r2, .fp-foot { position: absolute; left: 0; right: 0; display: flex; align-items: center; padding: 0 16px; gap: 18px; }
.fp-r1 { top: 0; height: 42px; border-bottom: 1px solid #222326; }
.fp-r2 { top: 42px; height: 46px; border-bottom: 1px solid #222326; gap: 26px; }
.fp-sq { width: 16px; height: 14px; border: 1.6px solid #c9cacd; border-radius: 3px; position: relative; }
.fp-sq::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; border-left: 1.6px solid #c9cacd; }
.fp-logo { height: 20px; width: auto; }
.fp-q, .fp-b { border: 1px solid #2c2d31; border-radius: 6px; padding: 7px 10px; font-size: 14px; color: #a4a6ab; }
.fp-b { color: #c8c9cd; }
.fp-av { width: 28px; height: 28px; border-radius: 50%; background: #4d8a3a; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.fp-flex { flex: 1; }
.fp-r2 b { font-weight: 700; font-size: 16px; }
.fp-tf, .fp-ind { display: inline-flex; align-items: center; font-weight: 600; font-size: 16px; }
.fp-tf i, .fp-ind i, .fp-foot span i { width: 6px; height: 6px; border: solid #9a9ca1; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translateY(-2px); margin-left: 8px; display: inline-block; }
.fp-ic { color: #d4d5d8; font-size: 17px; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; }
.fp-ic.dim { color: #8d8f94; }
.fp-ic svg { width: 18px; height: 18px; }
.fp-style.is-hot { background: #26272b; }
.fp-rail { position: absolute; left: 0; top: 88px; bottom: 41px; width: 50px; border-right: 1px solid #222326; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 12px; }
.fp-rail i { width: 16px; height: 16px; border: 1.6px solid #6f7177; border-radius: 3px; }
.fp-rail i.on { border: 0; width: 26px; height: 26px; border-radius: 6px; background: #26272b; }
.fp-rail i:nth-child(3n+2) { border-width: 0 0 1.6px; transform: rotate(-40deg); border-radius: 0; }
.fp-rail i:nth-child(4n+3) { border-radius: 50%; }
.fp-chart { position: absolute; left: 50px; top: 88px; right: 0; bottom: 41px; }
.fp-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fp-foot { bottom: 0; height: 41px; border-top: 1px solid #222326; font-size: 14px; font-weight: 600; color: #d6d7da; }
.fp-foot b { font-weight: 700; }
.fp-seg { display: inline-flex; border: 1px solid #2c2d31; border-radius: 6px; overflow: hidden; }
.fp-seg em { font-style: normal; padding: 6px 9px; color: #8d8f94; font-size: 13px; }
.fp-seg em.on { background: #26272b; color: #e8e9ec; }
.fp-menu {
  position: absolute; top: 86px; width: 168px; padding: 6px; z-index: 4;
  background: #1a1b1e; border: 1px solid #2c2d31; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .18s, transform .22s var(--ease); pointer-events: none;
}
.fp-menu.is-open { opacity: 1; transform: none; }
.fp-it { display: flex; align-items: center; gap: 12px; height: 31px; padding: 0 9px; border-radius: 5px; font-size: 14.5px; color: #dcdde0; }
.fp-it b { font-weight: 500; }
.fp-it svg { width: 16px; height: 16px; color: #8d8f94; flex: none; }
.fp-it.is-hot { background: #2a2b2f; }
.fp-sep { display: block; height: 1px; background: #2c2d31; margin: 5px 4px; }
.fp-tip { position: absolute; z-index: 5; padding: 5px 8px; border-radius: 5px; background: #2c2d31; color: #e8e9ec; font-size: 12.5px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.fp-tip.is-on { opacity: 1; }
.fp-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 31px; z-index: 6; transform-origin: 2px 2px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }

.ask-box { border-radius: 16px; border: 1px solid var(--win-line); background: var(--win-2); padding: 12px 16px; }
.ask-box p { font-size: 13px; color: var(--fg-300); }
.ask-row { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--fg-300); }
.ask-send { width: 24px; height: 24px; border-radius: 50%; background: var(--win-line-2); display: grid; place-items: center; }

/* Alert cards (stacked notifications, bottom one faded out) */
.vis-alerts { background: #050506; border-color: rgba(255,255,255,.07); }
.vis-alerts::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(transparent, #050506 88%); pointer-events: none; z-index: 2; }
.alerts { position: absolute; inset: 7% 6% auto; display: grid; gap: 14px; }
.alerts li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: stretch;
  padding: 13px 14px 11px; border-radius: 14px; background: #0c0c0e; border: 1px solid #1d1d21;
  box-shadow: 0 18px 40px -20px #000; animation: al-drift 7s ease-in-out infinite;
}
.alerts li:nth-child(2) { animation-delay: -2.3s; }
.alerts li:nth-child(3) { animation-delay: -4.6s; }
@keyframes al-drift { 50% { transform: translateY(-3px); } }
.al-blk { width: 46px; min-height: 70px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(180deg, #4fc47c, #27a15a); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.down .al-blk { background: linear-gradient(180deg, #f2443b, #d22a25); }
.al-blk svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.al-body { min-width: 0; display: flex; flex-direction: column; padding-top: 1px; }
.al-h { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #f2f2f4; white-space: nowrap; overflow: hidden; }
.al-h b { font-weight: 600; }
.al-h em { font-style: normal; }
.al-d { color: #9a9aa0; }
.al-coin { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 9px/1 system-ui, sans-serif; color: #fff; }
.al-coin.gold { background: linear-gradient(160deg, #f5c84b, #c9921c); color: #3a2a05; }
.al-coin.btc { background: #f7931a; font-size: 11px; }
.al-coin.eur { background: linear-gradient(160deg, #2f6fe0, #1f4fb0); font-size: 11px; }
.sk { display: block; height: 5px; border-radius: 3px; background: #1c1c20; width: 82%; margin-top: 11px; }
.sk.s2 { width: 60%; margin-top: 7px; }
.al-body time { margin-top: auto; padding-top: 6px; align-self: flex-end; font: 10.5px ui-monospace, Menlo, monospace; color: #6c6c72; }
.al-x { color: #6c6c72; font-size: 17px; line-height: 1; padding-top: 1px; }
@media (max-width: 639px) {
  .alerts { inset: 6% 5% auto; gap: 10px; }
  .alerts li { gap: 11px; padding: 10px 11px 9px; }
  .al-blk { width: 36px; min-height: 58px; }
  .al-h { font-size: 12.5px; }
}

/* Indicator library grid (tiles cross-fade, centre "add" tile with a spinning border) */
.vis-lib { background: #050506; border-color: rgba(255,255,255,.07); }
.lib {
  position: absolute; left: 50%; top: 50%; width: 106%; transform: translate(-50%, -50%);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px;
  -webkit-mask: radial-gradient(ellipse 50% 54% at 50% 50%, #000 62%, transparent 100%); mask: radial-gradient(ellipse 50% 54% at 50% 50%, #000 62%, transparent 100%);
}
.lib-t { position: relative; aspect-ratio: 1.52; border-radius: 10px; border: 1px solid #18181b; background: #08080a; }
.lib-t svg { position: absolute; left: 11%; top: 14%; width: 78%; height: 72%; overflow: visible; transition: opacity 1.1s ease; }
.lib-t svg.off { opacity: 0; }
.lib-t .ln { fill: none; stroke: #6a6a70; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lib-t .dsh { stroke-dasharray: 2.5 2.5; stroke: #4c4c52; }
.lib-t .fl { fill: #3b3b40; }
.lib-t .fl2 { fill: #252529; }
.lib-add { overflow: hidden; isolation: isolate; border-color: transparent; background: #0a0a0c; }
.lib-add .spin-border-glow { z-index: -2; animation-duration: 3.2s; }
.lib-add::before { content: ""; position: absolute; inset: 1px; border-radius: 9px; background: #08080a; z-index: -1; }
.lib-add::after { content: ""; position: absolute; inset: 1px; border-radius: 9px; background: radial-gradient(60% 70% at 50% 60%, rgba(52,190,100,.16), transparent 70%); z-index: -1; }
.lib-badge {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px;
  background: linear-gradient(180deg, #38ad5f, #25884a); border: 1px solid #56d184; color: #ecfff2; font: 700 13px/1 system-ui, sans-serif;
  box-shadow: 0 0 24px rgba(60,205,110,.4); animation: lib-glow 2.6s ease-in-out infinite;
}
.lib-badge::before { content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); border: 7px solid transparent; border-top: 0; border-bottom-color: #56d184; }
.lib-badge::after { content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); border: 6px solid transparent; border-top: 0; border-bottom-color: #38ad5f; }
.lib-badge i { font-style: normal; font-size: 10px; }
@keyframes lib-glow { 50% { box-shadow: 0 0 34px rgba(60,205,110,.62); } }
@media (max-width: 639px) { .lib { gap: 8px; } .lib-badge { font-size: 11px; padding: 4px 9px; } }

/* ---------- Glass card (markets) ---------- */
.glass-card { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid rgba(var(--ink), .08); }
.glass-card-bg { position: absolute; inset: 0; background: radial-gradient(120% 140% at 50% -30%, var(--glass-1) 0%, var(--glass-2) 45%, var(--glass-3) 78%, var(--glass-4) 100%); }
.glass-card-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 50% at 15% 10%, rgba(59,68,232,.18), transparent 70%), radial-gradient(35% 45% at 90% 0%, rgba(236,72,153,.12), transparent 70%); }
.glass-grid { position: relative; display: grid; gap: 40px; align-items: center; padding: 32px; }
@media (min-width: 640px) { .glass-grid { padding: 48px; } }
@media (min-width: 1024px) { .glass-grid { grid-template-columns: 1fr 1.15fr; gap: 56px; padding: 64px; } }
.glass-card strong { color: var(--fg-100); font-weight: 600; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-lg { border: 1px solid var(--line-2); background: rgba(var(--ink), .04); border-radius: 999px; padding: 6px 16px; font-size: 14px; color: var(--fg-200); transition: border-color 150ms, color 150ms; }
.chip-lg:hover { border-color: rgba(var(--ink), .3); color: var(--fg-strong); }
.glass-card-fade { position: absolute; inset-inline: 0; bottom: 0; height: 96px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.ticker-panel { border-color: var(--line-2); box-shadow: 0 60px 140px -20px rgba(var(--shadow), calc(.9 * var(--shadow-k))); padding: 8px 8px 48px; }
.tp-head, .tp-row { display: grid; grid-template-columns: 1.2fr 1fr .8fr 1fr; gap: 12px; align-items: center; padding: 10px 14px; }
.tp-head { font-size: 11px; color: var(--fg-300); border-bottom: 1px solid var(--win-line); }
.tp-rows { font: 13px ui-monospace, Menlo, monospace; }
.tp-row { border-radius: 8px; transition: background-color 250ms; }
.tp-row:hover { background: var(--win-2); }
.tp-row b { color: var(--fg-strong); font-weight: 600; }
.tp-row canvas { width: 100%; height: 26px; }
.tp-row .chg { text-align: start; }

/* ---------- Stats + reviews ---------- */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) { .stats { gap: 16px; } }
@media (max-width: 767px) { .stat { padding: 20px 8px; } .stat b { font-size: 34px; } }
.stat {
  position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-100);
  padding: 28px; display: grid; justify-items: center; gap: 6px; text-align: center;
  transition: border-color 200ms, transform 300ms var(--ease);
}
.stat::before { content: ""; position: absolute; inset-inline: 20%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ink), .45), transparent); }
.stat::after { content: ""; position: absolute; inset: auto 0 -60% 0; height: 100%; background: radial-gradient(closest-side, rgba(108,106,230,.22), transparent); pointer-events: none; }
.stat:hover { border-color: rgba(var(--ink), .22); transform: translateY(-3px); }
.stat svg { color: var(--fg-200); }
.stat small { color: var(--fg-300); font-size: 13px; }
.stat b { font-size: clamp(40px, 5vw, 56px); font-weight: 700; line-height: 1.1; background: linear-gradient(180deg, var(--fg-strong), var(--fg-300)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* counters: the number's box keeps its final width (set in main.js) so it doesn't jump while counting */
.stat b { white-space: nowrap; direction: ltr; }
.stat b [data-count] { display: inline-block; text-align: right; }
.review {
  margin: 0; display: flex; flex-direction: column; gap: 0;
  width: 380px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-100); padding: 26px 26px 22px;
}
/* five stars from one mask; --r (0-5) sets how much is filled, so 4.5 shows a half star */
.stars {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M10 0l2.36 6.9H19.6l-5.86 4.26 2.24 6.94L10 13.84 4.02 18.1l2.24-6.94L.4 6.9h7.24z'/%3E%3C/svg%3E");
  display: block; width: 110px; height: 20px; flex: none;
  background: linear-gradient(90deg, var(--star-on) calc(var(--r) * 20%), var(--star-off) 0);
  -webkit-mask: var(--star) 0 0 / 22px 20px repeat-x; mask: var(--star) 0 0 / 22px 20px repeat-x;
}
:root { --star-on: #1ec98b; --star-off: rgba(30,201,139,.28); }
[dir="rtl"] .stars { transform: scaleX(-1); }
.rv-t { display: block; margin-top: 18px; font-size: 15.5px; font-weight: 700; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review blockquote {
  margin: 12px 0 0; color: var(--fg-300); font-size: 14.5px; line-height: 1.75;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
}
[dir="rtl"] .review blockquote { line-height: 1.85; }
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 26px; color: var(--fg-300); font-size: 14.5px; }
.av { width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover; box-shadow: 0 0 0 1px rgba(var(--ink), .08); }
@media (max-width: 639px) {
  .review { width: 300px; padding: 22px 20px 18px; }
  .marquee-edges { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
}

/* ---------- Plans ---------- */
.plans { display: grid; gap: 16px; max-width: 1080px; margin-inline: auto; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-100); padding: 28px; display: flex; flex-direction: column; gap: 6px; transition: border-color 200ms; }
.plan:hover { border-color: rgba(var(--ink), .2); }
.plan h3 { font-size: 18px; font-weight: 600; }
.plan-top { display: flex; align-items: center; justify-content: space-between; }
.tag { border: 1px solid var(--line-3); border-radius: 999px; padding: 1px 10px; font-size: 11px; color: var(--fg-200); }
.plan-sub { font-size: 14px; color: var(--fg-300); }
.plan-price { font-size: 36px; font-weight: 700; margin: 18px 0 20px; letter-spacing: -.01em; }
/* "best for" box in place of a price (no public pricing yet) */
.plan-for { margin: 18px 0 20px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-200); font-size: 15px; line-height: 1.7; color: var(--fg-100); min-height: 7.4em; }
.plan-for span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--fg-300); }
.plan-list { margin-top: 24px; display: grid; gap: 12px; font-size: 14px; color: var(--fg-200); }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; }
.plan-list li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: rgba(31,163,138,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' stroke='%231fa38a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.plan-featured { border-color: transparent; background: linear-gradient(var(--surface-100), var(--surface-100)) padding-box, linear-gradient(160deg, rgba(56,189,248,.7), rgba(168,85,247,.6), rgba(236,72,153,.5), rgba(var(--ink), .08) 70%) border-box; border: 1px solid transparent; box-shadow: 0 30px 80px -30px rgba(108,106,230,.45); }

/* ---------- Mentor ---------- */
.mentor { align-items: center; }
.lead-form { display: grid; gap: 14px; margin-top: 32px; }
.form-row { display: grid; gap: 10px; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(3, 1fr); } }
.lead-form label > span:first-child:not(:only-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lead-form label { position: relative; }
.lead-form input[type="text"], .lead-form input[type="email"], .lead-form input[type="tel"] {
  width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-100);
  padding: 0 14px; font-size: 15px; transition: border-color 150ms, box-shadow 150ms;
}
.lead-form input[dir="ltr"] { text-align: right; }
.lead-form input::placeholder { color: var(--fg-400); }
.lead-form input:focus { outline: none; border-color: rgba(168,85,247,.7); box-shadow: 0 0 0 3px rgba(168,85,247,.2); }
.lead-form input[aria-invalid="true"] { border-color: var(--down); }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--fg-200); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: #a855f7; cursor: pointer; }
.lead-form .btn { justify-self: start; margin-top: 6px; }
.form-msg { font-size: 14px; min-height: 1.5em; color: var(--fg-300); }
.form-msg.ok { color: var(--up); }
.form-msg.err { color: #ff7b85; }

.tablets { position: relative; height: 480px; perspective: 1400px; }
.tablet {
  position: absolute; width: 58%; aspect-ratio: 3 / 4; border-radius: 22px; padding: 10px;
  background: linear-gradient(145deg, var(--tab-1), var(--tab-2)); border: 1px solid rgba(var(--ink), .14);
  box-shadow: 0 50px 90px -30px rgba(var(--shadow), calc(.95 * var(--shadow-k))), inset 0 1px 0 rgba(var(--ink), .12);
  transition: transform 700ms var(--ease);
}
.tablet-screen { position: relative; height: 100%; border-radius: 14px; overflow: hidden; background: var(--win-bg); border: 1px solid var(--win-line); }
.tablet-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.t1 { top: 0; right: 8%; transform: rotateY(-18deg) rotateX(8deg) rotateZ(-6deg); z-index: 3; }
.t2 { top: 16%; right: 24%; transform: rotateY(-18deg) rotateX(8deg) rotateZ(-2deg) translateZ(-60px); z-index: 2; opacity: .85; }
.t3 { top: 32%; right: 40%; transform: rotateY(-18deg) rotateX(8deg) rotateZ(2deg) translateZ(-120px); z-index: 1; opacity: .65; }
.tablets:hover .t1 { transform: rotateY(-10deg) rotateX(4deg) rotateZ(-4deg) translateY(-8px); }
/* entrance: when the block scrolls in (.reveal.in), the back card lands first and the
   front card last, each rising and swinging into its place in the stack.
   fill-mode backwards so the hover lift still works once the entrance has played. */
.t1 { --tab-to: rotateY(-18deg) rotateX(8deg) rotateZ(-6deg); --tab-op: 1; --tab-d: 420ms; }
.t2 { --tab-to: rotateY(-18deg) rotateX(8deg) rotateZ(-2deg) translateZ(-60px); --tab-op: .85; --tab-d: 210ms; }
.t3 { --tab-to: rotateY(-18deg) rotateX(8deg) rotateZ(2deg) translateZ(-120px); --tab-op: .65; --tab-d: 0ms; }
.split-media.reveal.in .tablet { animation: tablet-in 1100ms cubic-bezier(.2, .85, .25, 1) backwards; animation-delay: calc(200ms + var(--tab-d)); }
@keyframes tablet-in {
  0% { opacity: 0; transform: translate3d(-60px, 140px, -200px) rotateY(-40deg) rotateX(40deg) rotateZ(-14deg); }
  60% { opacity: var(--tab-op); }
  100% { opacity: var(--tab-op); transform: var(--tab-to); }
}
.ebook { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; background: radial-gradient(120% 80% at 100% 0%, rgba(108,106,230,.35), transparent 60%), var(--win-bg); }
.ebook b { font-size: 22px; line-height: 1.3; position: relative; z-index: 1; }
.ebook span { font-size: 13px; color: var(--fg-200); line-height: 1.8; position: relative; z-index: 1; max-width: 90%; }
.ebook img { position: relative; z-index: 1; }
.ebook canvas { top: 45%; height: 55%; opacity: .7; }
@media (max-width: 639px) { .tablets { height: 360px; } .tablet { width: 62%; } }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; gap: 40px; }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: 1fr 2fr; gap: 64px; } }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; font-size: 17px; font-weight: 500; color: var(--fg-100); transition: color 150ms;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--fg-strong); }
.faq summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; inset: 6px 0 auto; height: 1.6px; background: var(--fg-300); border-radius: 2px; transition: transform 300ms var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq-a { overflow: hidden; }
.faq-a p { padding-bottom: 22px; color: var(--fg-300); line-height: 2; max-width: 62ch; }
.faq details[open] .faq-a { animation: faq-open 400ms var(--ease); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Final CTA ---------- */
.final-cta { position: relative; padding: 128px 0; }
@media (min-width: 640px) { .final-cta { padding: 176px 0; } }
.cta-canvas { position: absolute; inset-inline: 0; top: -12rem; width: 100%; height: calc(100% + 24rem); pointer-events: none; mix-blend-mode: screen; }
.final-cta .container { position: relative; max-width: 42rem; }

/* ---------- Footer ---------- */
.site-footer { position: relative; border-top: 1px solid var(--line-2); background: var(--bg); padding-bottom: 32px; }
.wordmark {
  --mx: 50%; --my: 50%;
  display: none; justify-content: center; padding-top: 72px; user-select: none;
}
@media (min-width: 768px) { .wordmark { display: flex; } }
.wordmark span {
  font-size: clamp(80px, 13vw, 190px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  background:
    radial-gradient(320px circle at var(--mx) var(--my), rgba(90,108,255,.9), rgba(168,85,247,.6) 40%, transparent 70%),
    linear-gradient(rgba(var(--ink), .05), rgba(var(--ink), .05));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.footer-grid { display: grid; gap: 40px; padding-top: 56px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.footer-about p { margin-top: 16px; color: var(--fg-300); font-size: 14px; line-height: 2; max-width: 36ch; }
.site-footer h3 { font-size: 12px; font-weight: 500; color: var(--fg-300); margin-bottom: 14px; }
.site-footer h3.mt { margin-top: 28px; }
.site-footer ul li + li { margin-top: 10px; }
.site-footer ul a, .contact-list li { font-size: 14px; color: var(--fg-300); transition: color 150ms; }
.site-footer ul a:hover { color: var(--fg-100); }
.contact-list li { display: flex; align-items: center; gap: 8px; }
.contact-list svg { color: var(--fg-200); flex: none; }
.socials { display: flex; gap: 10px; }
.socials a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--fg-200); transition: color 150ms, border-color 150ms, background-color 150ms, transform 160ms var(--ease-quart); }
.socials a:hover { color: var(--fg-strong); border-color: rgba(var(--ink), .3); background: var(--surface-100); transform: translateY(-2px); }
.footer-legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; font-size: 12px; color: var(--fg-400); line-height: 1.9; }
.footer-legal .copy { color: var(--fg-300); }

/* ---------- Day theme (dark is the default) ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-rgb: 255,255,255;
  --ink: 10,10,20;
  --surface-0: #f7f7f9;
  --surface-100: #f5f5f7;
  --surface-200: #ececf0;
  --panel: #fcfcfd;
  --line: rgba(10,10,20,.07);
  --line-2: rgba(10,10,20,.10);
  --line-3: rgba(10,10,20,.16);
  --fg-100: #0b0b10;
  --fg-200: #3b3b44;
  --fg-300: #676771;
  --fg-400: #9c9ca6;
  --fg-strong: #000;
  --up: #0e9479;
  --down: #d73a47;
  --btn-bg: #0b0b10;
  --btn-fg: #fff;
  --btn-bg-hover: #2c2c36;
  --shadow: 30,30,60;
  --shadow-k: .22;
  --win-bg: #ffffff;
  --win-2: #f6f6f9;
  --win-2-rgb: 246,246,249;
  --win-3: #efeff3;
  --win-line: #e8e8ee;
  --win-line-2: #dcdce4;
  --win-line-3: #c6c6d0;
  --glass-1: #eef0f6; --glass-2: #f6f7fa; --glass-3: #fcfcfd; --glass-4: #ffffff;
  --tab-1: #f1f1f5; --tab-2: #d4d5dc;
  --logo-filter: invert(1);
  --beam: 90,120,200;
  --beam-hi: 110,135,220;
  --beam-mid: 120,145,218;
  --beam-lo: 140,160,225;
  --beam-k: .5;
  --beam-a: .16;
  --beam-core: 120,150,230;
  --beam-core-a: .22;
  --glint: 120,150,230;
  --glint-blend: normal;
  --fog: 205,214,235;
  --fog-a: .6;
  --fog-lit: 150,175,235;
  --fog-lit-a: .3;
  --person: #1c2233;
  --person-rim: .35;
  --rock-top: #c6cee0;
  --rim-cool: 90,130,215;
  --rim-warm: 230,160,110;
  --ledge: 255,255,255;
  --mist: 110,150,225;
  --mist-a: .35;
  --rock-bottom: #fff;
}
:root[data-theme="light"] ::selection { background: rgba(168,85,247,.25); }
:root[data-theme="light"] .cta-canvas { mix-blend-mode: multiply; }
:root[data-theme="light"] .hero-bg-canvas { opacity: .35; }
:root[data-theme="light"] .bw-invert { filter: var(--logo-filter); }
:root[data-theme="light"] .wsx { background: #f3f4f7; }
:root[data-theme="light"] .wsx-cam { background: #f7f8fa; color: #3b3f47; }
:root[data-theme="light"] .wsx-tool b { color: #131722; }
:root[data-theme="light"] .wsx-tool i, :root[data-theme="light"] .wsx-ind i { border-color: #8a8e96; }
:root[data-theme="light"] .wsx-tf, :root[data-theme="light"] .wsx-ind { color: #3b3f47; }
:root[data-theme="light"] .wsx-ind em, :root[data-theme="light"] .wsx-ic { color: #5d616a; }
:root[data-theme="light"] .wsx-ic.dim, :root[data-theme="light"] .wsx-foot .dim { color: #a7aab1; }
:root[data-theme="light"] .wsx-rail i { border-color: #b4b7be; }
:root[data-theme="light"] .wsx-p { background: #fff; box-shadow: inset 0 0 0 1px rgba(10,10,20,.06); }
:root[data-theme="light"] .wsx-p::after { border-color: #2962ff; }
:root[data-theme="light"] .wsx-foot { color: #6b6f78; }
:root[data-theme="light"] .wsx-foot b { color: #131722; }
:root[data-theme="light"] .wsx-vig { background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 60%, rgba(30,40,70,.12) 100%); box-shadow: inset 0 0 50px rgba(30,40,70,.1); }
:root[data-theme="light"] .vis-ai { background: #fff; border-color: var(--win-line); }
:root[data-theme="light"] .vis-ai-fade { background: linear-gradient(to top, rgba(255,255,255,.6), transparent 35%); }
:root[data-theme="light"] .vis-ai .bubble { background: #f4f5f8; border-color: var(--win-line); color: #2a2d35; }
:root[data-theme="light"] .vis-ai .ask-box { background: #f4f5f8; border-color: var(--win-line); }
:root[data-theme="light"] .vis-ai .chip { background: #f1f2f5; border-color: var(--win-line); color: #2a2d35; }
:root[data-theme="light"] .vis-ai .pill-inner { background: #fff; color: #131722; }
:root[data-theme="light"] .vis-fp { border-color: var(--win-line); }
:root[data-theme="light"] .vis-fp { background: #eaf3fb; }
:root[data-theme="light"] .fp-cam {
  color: #131722;
  background:
    radial-gradient(60% 45% at 78% 0%, rgba(255,226,206,.95), rgba(255,226,206,0) 70%),
    radial-gradient(55% 40% at 0% 42%, rgba(40,215,245,.7), rgba(40,215,245,0) 75%),
    linear-gradient(180deg, #f3f6f8 0%, #d6eef5 18%, #8fdcf0 40%, #5fb4e0 60%, #a9cdee 78%, #e4eef8 100%);
}
:root[data-theme="light"] .fp-win { background: #fff; box-shadow: 0 30px 80px rgba(6,42,92,.28); }
:root[data-theme="light"] .fp-r1, :root[data-theme="light"] .fp-r2, :root[data-theme="light"] .fp-rail { border-color: #e6e7eb; }
:root[data-theme="light"] .fp-foot { border-color: #e6e7eb; color: #3b3f47; }
:root[data-theme="light"] .fp-sq, :root[data-theme="light"] .fp-sq::after { border-color: #5d616a; }
:root[data-theme="light"] .fp-logo { filter: var(--logo-filter); }
:root[data-theme="light"] .fp-q, :root[data-theme="light"] .fp-b { border-color: #dfe1e6; color: #5d616a; }
:root[data-theme="light"] .fp-av { color: #fff; }
:root[data-theme="light"] .fp-tf i, :root[data-theme="light"] .fp-ind i, :root[data-theme="light"] .fp-foot span i { border-color: #8a8e96; }
:root[data-theme="light"] .fp-ic { color: #3b3f47; }
:root[data-theme="light"] .fp-ic.dim, :root[data-theme="light"] .fp-it svg, :root[data-theme="light"] .fp-seg em { color: #8a8e96; }
:root[data-theme="light"] .fp-style.is-hot, :root[data-theme="light"] .fp-rail i.on, :root[data-theme="light"] .fp-seg em.on { background: #eceef2; color: #131722; }
:root[data-theme="light"] .fp-rail i { border-color: #a7aab1; }
:root[data-theme="light"] .fp-seg { border-color: #dfe1e6; }
:root[data-theme="light"] .fp-menu { background: #fff; border-color: #e1e3e8; box-shadow: 0 18px 40px rgba(20,30,60,.18); }
:root[data-theme="light"] .fp-it { color: #2a2d35; }
:root[data-theme="light"] .fp-it.is-hot { background: #eef0f4; }
:root[data-theme="light"] .fp-sep { background: #e6e7eb; }
:root[data-theme="light"] .fp-tip { background: #2a2d35; color: #fff; }
:root[data-theme="light"] .vis-lib { background: #fff; border-color: var(--win-line); }
:root[data-theme="light"] .lib-t { border-color: #e9eaee; background: #fafbfc; }
:root[data-theme="light"] .lib-t .ln { stroke: #8d9097; }
:root[data-theme="light"] .lib-t .dsh { stroke: #b0b3ba; }
:root[data-theme="light"] .lib-t .fl { fill: #b9bcc3; }
:root[data-theme="light"] .lib-t .fl2 { fill: #e1e3e8; }
:root[data-theme="light"] .lib-add { background: #fff; }
:root[data-theme="light"] .lib-add::before { background: #fafbfc; }
:root[data-theme="light"] .stat::after { background: radial-gradient(closest-side, rgba(108,106,230,.12), transparent); }

/* smooth switch */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color 350ms ease, border-color 350ms ease, color 350ms ease, box-shadow 350ms ease, fill 350ms ease !important;
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--fg-200);
  display: grid; place-items: center; cursor: pointer; margin-inline-start: auto;
  transition: color 150ms, border-color 150ms, background-color 150ms, transform 160ms var(--ease-quart);
}
.theme-toggle:hover { color: var(--fg-100); border-color: var(--line-3); background: var(--surface-100); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { position: absolute; transition: transform 500ms var(--ease), opacity 300ms; }
.theme-toggle .i-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="light"] .theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="light"] .theme-toggle .i-moon { opacity: 1; transform: none; }
.nav-toggle { margin-inline-start: 0; }
@media (min-width: 1024px) { .theme-toggle { margin-inline-start: 0; } }

/* ---------- Language switch (fa ⇄ en) ---------- */
.lang-switch {
  flex: none; height: 36px; min-width: 36px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--fg-200); display: inline-grid; place-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-inline-start: auto;
  transition: color 150ms, border-color 150ms, background-color 150ms;
}
.lang-switch:hover { color: var(--fg-100); border-color: var(--line-3); background: var(--surface-100); }
.lang-switch + .theme-toggle { margin-inline-start: -16px; }
@media (min-width: 1024px) { .lang-switch { margin-inline-start: 0; } }

/* ---------- English page (dir="ltr") ---------- */
[dir="ltr"] .btn:hover .arrow { transform: translateX(3px); }
[dir="ltr"] .badge-link:hover .arrow { transform: translateX(2px); }
[dir="ltr"] .marquee-track { animation-name: marquee-ltr; }
[dir="ltr"] .dm-creating, [dir="ltr"] .dm-results { direction: ltr; }
[dir="ltr"] .ov-dash th, [dir="ltr"] .ov-dash td { text-align: left; }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(16px); filter: blur(10px); transition: opacity 700ms var(--ease), transform 700ms var(--ease), filter 700ms var(--ease); transition-delay: var(--d, 0ms); will-change: transform; }
.reveal.in { opacity: 1; transform: none; filter: none; }
.bento-cell.reveal { transform: translateY(24px); }
.bento-cell.reveal.in { transform: none; }
.anim-in { animation: reveal-in 900ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes reveal-in { from { opacity: 0; transform: translateY(10px); filter: blur(14px); } }
[data-words] .word { display: inline-block; white-space: pre; opacity: 0; }
[data-words].go .word { animation: word-in 850ms var(--ease) both; animation-delay: calc(140ms + var(--i) * 110ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(4px); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }

/* no-JS fallback */
.no-js .reveal { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  [data-words] .word { opacity: 1; }
  .marquee-track { animation: none; }
  .split-media.reveal.in .tablet { animation: none; }
  .statement-text .w { opacity: 1; }
  .float-words { display: none; }
}

/* Honeypot field of the lead and contact forms: hidden from people, filled in only by bots */
.hp-field { position: absolute !important; inset-inline-start: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }