/* ── درس‌جی‌پی‌تی · لندینگ «گیر کردی؟ بپرس. حله!» ──
   موبایل‌محور؛ روی دسکتاپ همین ستون موبایل وسط صفحه می‌نشیند.
   قاعدهٔ روانی: فقط transform/opacity انیمیت می‌شوند، هیچ backdrop-filter و هیچ انیمیشنِ رنگ/گرادیان پیوسته.
   نوار مرورگر گوشی آزاد است که با اسکرول جمع شود و جا باز کند؛ اندازه‌ها روی svh/lvh (ثابت) است، پس با جمع و باز شدنش هیچ چیز جابه‌جا نمی‌شود. */

/* فونت Vazirmatn این‌جا تعریف نمی‌شود: صفحه حالا روی «/» و داخل خود اپ رندر می‌شود و
   لایهٔ ریشه همان فونت را از /fonts/fonts.css می‌آورد (و فایل arabic را هم preload
   می‌کند). نسخهٔ دومِ همین دو فایل زیر /landing/assets/fonts فقط ۸۰ کیلوبایت تکراری
   روی مهم‌ترین صفحهٔ سایت بود. تعریف مشترک، latin-ext را هم اضافه دارد.
   اگر روزی این صفحه بیرون از اپ سرو شد، fonts.css را کنارش بیاور. */

:root {
  --ink: #0C1B26; --sub: #415A6B; --mut: #6B8496; --line: rgba(14,116,165,.14);
  --blue: #0B6BFF; --sky: #0EA5E9; --cyan: #22D3EE; --navy: #06173A; --violet: #7C5CFF; --sun: #FFD23F; --pink: #FF6B9A; --green: #12B886;
  --bg: #F6FBFF; --acc-ink: #0369A1; --acc-soft: #EAF6FD;
  --ubub: linear-gradient(178deg, #29C6F7 0%, #0EA5E9 55%, #0C9BDD 100%);
  --block: linear-gradient(160deg, #0B6BFF 0%, #0E8BF0 48%, #1CC3F0 100%);
  --fill: linear-gradient(100deg, #0B6BFF 0%, #0EA5E9 55%, #22C8EE 100%);
  --gold-fill: linear-gradient(100deg, #FFE28A 0%, #FFC93C 50%, #FFB020 100%);
  --sh: 0 14px 34px rgba(9,45,72,.12); --sh-s: 0 4px 14px rgba(9,45,72,.08);
  --ease-out: cubic-bezier(.2,.8,.25,1); --ease-spring: cubic-bezier(.34,1.46,.5,1); --ease-io: cubic-bezier(.65,0,.35,1); --ease-smooth: cubic-bezier(.22,1,.36,1);
  --W: min(100vw, 430px);
  /* صفحهٔ «با نوار» و «بی‌نوار»؛ اسکریپت داخل head همین‌ها را به پیکسل ثابت می‌کند. این‌جا فقط پشتیبان بدون JS است */
  --sv: 100vh; --lv: 100vh;
  --gut: 20px; --safe-b: env(safe-area-inset-bottom, 0px);
}
@supports (height: 1svh) { :root { --sv: 100svh; --lv: 100lvh; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: var(--sv); overflow-x: clip; color: var(--ink); background: var(--bg); font-family: Vazirmatn, Tahoma, sans-serif; font-size: 15px; line-height: 1.9; -webkit-tap-highlight-color: transparent; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }
::selection { background: rgba(34,211,238,.35); }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ستون اصلی — روی دسکتاپ همان تجربهٔ موبایل */
.app { position: relative; width: 100%; max-width: 430px; margin: 0 auto; background: var(--bg); }
main > section, .foot { position: relative; overflow-x: clip; }
@media (min-width: 600px) {
  body { background: radial-gradient(60% 50% at 20% 10%, #CFE6FF 0%, transparent 70%), radial-gradient(50% 50% at 90% 90%, #E3DAFF 0%, transparent 70%), #EEF5FC; }
  .app { box-shadow: 0 0 0 1px rgba(14,116,165,.1), 0 40px 90px rgba(8,59,88,.18); }
  .desk-aside { display: flex; }
}
.desk-aside { display: none; position: fixed; top: 50%; inset-inline-start: calc(50% + 250px); transform: translateY(-50%); flex-direction: column; gap: 10px; width: 200px; color: var(--sub); font-size: 13px; font-weight: 700; line-height: 1.9; }
.desk-aside b { color: var(--ink); font-size: 18px; font-weight: 900; line-height: 1.5; }
@media (min-width: 1001px) { body .desk-aside { display: flex; } }
@media (max-width: 1000px) { .desk-aside { display: none !important; } }

/* ── هدر شناور و باریک (بدون blur). با اسکرول به پایین کنار می‌رود و با کمی اسکرول به بالا برمی‌گردد تا جای صفحه را نگیرد ── */
.hdr { position: fixed; z-index: 50; top: 8px; left: 50%; width: calc(min(100vw, 430px) - 24px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 4px; padding-inline-start: 6px; border-radius: 18px;
  background: rgba(255,255,255,.95); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--sh-s); transition: transform .4s var(--ease-smooth); }
.hdr.hide { transform: translate(-50%, calc(-100% - 12px)); }
.hdr__brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 14.5px; white-space: nowrap; }
.logo-tile { width: 32px; height: 32px; border-radius: 11px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(14,116,165,.12); flex-shrink: 0; }
.logo-tile img { width: 26px; height: 26px; }
/* دکمهٔ همبرگری سمت چپ هدر: سه خط که با باز شدن منو به ضربدر تبدیل می‌شوند (فقط transform) */
.hdr__menu { margin-inline-start: auto; position: relative; width: 40px; height: 34px; border-radius: 12px; background: var(--ink); box-shadow: 0 6px 14px -6px rgba(12,27,38,.55); transition: transform .18s var(--ease-out); }
.hdr__menu:active { transform: scale(.93); }
.hdr__menu i { position: absolute; left: 11px; top: 50%; width: 18px; height: 2.5px; margin-top: -1.25px; border-radius: 3px; background: #fff; transform-origin: 50% 50%; transition: transform .4s var(--ease-spring), opacity .2s; }
.hdr__menu i:nth-child(1) { transform: translateY(-6px); }
.hdr__menu i:nth-child(3) { transform: translateY(6px) scaleX(.6); transform-origin: 0 50%; }
.menu-open .hdr__menu i:nth-child(1) { transform: rotate(45deg); }
.menu-open .hdr__menu i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-open .hdr__menu i:nth-child(3) { transform: rotate(-45deg); transform-origin: 50% 50%; }

/* ── منو: کشوی کوچکی زیر هدر که به فصل‌های لندینگ می‌برد ── */
.menu-bd { position: fixed; inset: 0; z-index: 48; background: rgba(6,23,58,.38); opacity: 0; pointer-events: none; transition: opacity .3s; }
.menu { position: fixed; z-index: 49; top: 58px; left: 50%; width: calc(min(100vw, 430px) - 24px); max-height: calc(var(--sv) - 78px); overflow-y: auto; padding: 8px; border-radius: 22px; background: #fff;
  box-shadow: 0 26px 50px -18px rgba(9,45,72,.5), 0 0 0 1px var(--line); opacity: 0; pointer-events: none; transform: translate(-50%, -10px) scale(.97); transform-origin: 50% 0; transition: transform .4s var(--ease-spring), opacity .2s; }
.menu-open .menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.menu-open .menu-bd { opacity: 1; pointer-events: auto; }
.menu a { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 10px; border-radius: 15px; font-weight: 900; font-size: 15px; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .4s var(--ease-spring), background .2s; }
.menu-open .menu a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 35ms + 60ms), calc(var(--i) * 35ms + 60ms), 0s; }
.menu a i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 18px; line-height: 1; background: var(--acc-soft); flex-shrink: 0; }
.menu a::after { content: ""; margin-inline-start: auto; margin-inline-end: 6px; width: 8px; height: 8px; border-left: 2.5px solid #A9BCCB; border-bottom: 2.5px solid #A9BCCB; transform: rotate(45deg); }
.menu a:active { background: #EEF4FA; }
.menu a[aria-current="true"] { background: var(--acc-soft); }
.menu a[aria-current="true"] i { background: #fff; box-shadow: 0 0 0 2px var(--blue); }

/* ── دکمهٔ اصلی: حاشیهٔ رنگی چرخان با transform (روی GPU، نه repaint) ── */
.cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 10px; border-radius: 22px;
  color: #fff; font-weight: 900; font-size: 17px; line-height: 1.25; text-align: right; box-shadow: 0 14px 30px -10px rgba(11,107,255,.7); transition: transform .18s var(--ease-out); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.cta::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 640px; height: 640px; margin: -320px 0 0 -320px; background: conic-gradient(#FFD23F, #22D3EE, #7C5CFF, #FF6B9A, #FFD23F); animation: ring 3.4s linear infinite; }
.cta::after { content: ""; position: absolute; z-index: -1; inset: 2.5px; border-radius: 19.5px; background: var(--fill); }
.cta:active { transform: scale(.96); }
.cta__ic { width: 46px; height: 46px; border-radius: 16px; background: #fff; color: var(--blue); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,30,80,.18); font-size: 22px; }
.cta__ic svg { width: 24px; height: 24px; }
.cta__t { display: flex; flex-direction: column; }
.cta__t small { font-size: 12px; font-weight: 700; opacity: .9; }
.cta__go { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.22); }
.cta__go svg { width: 18px; height: 18px; animation: nudgeX 1.6s ease-in-out infinite; }
.cta--block { display: flex; width: 100%; }
.cta--gold { color: #3D2800; box-shadow: 0 14px 30px -10px rgba(210,140,0,.6); }
.cta--gold::after { background: var(--gold-fill); }
.cta--gold .cta__ic { color: #B7791F; }
.cta--gold .cta__go { background: rgba(255,255,255,.45); }
@keyframes ring { to { transform: rotate(360deg); } }
@keyframes nudgeX { 0%, 100% { transform: none; } 50% { transform: translateX(-4px); } }
.lite .cta::before { animation: none; }

/* ── استیکر، عنوان، ظهور ── */
.stk { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 14px; font-weight: 900; font-size: 13.5px; line-height: 1.3; white-space: nowrap;
  background: var(--sun); color: #3D2800; box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 12px 22px rgba(0,20,60,.16); transform: rotate(var(--r, -6deg)); }
/* بدون content-visibility: جای‌گیرِ ارتفاع قبل از رندر باعث پرش صفحه هنگام اسکرول می‌شد (Safari اسکرول‌انکر ندارد) */
.chap { min-height: var(--sv); padding: 80px var(--gut) calc(96px + var(--safe-b)); display: flex; flex-direction: column; justify-content: center; }
.kick { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 900; background: var(--ink); color: #fff; transform: rotate(-2deg); }
.h2 { font-size: clamp(29px, 8.4vw, 42px); line-height: 1.35; font-weight: 900; letter-spacing: -.5px; margin-top: 12px; }
.lead { font-size: 15px; line-height: 1.95; margin-top: 8px; color: var(--sub); }
.hl { position: relative; white-space: nowrap; z-index: 0; }
.hl::after { content: ""; position: absolute; z-index: -1; inset: 58% -4px 4% -4px; background: var(--sun); border-radius: 6px; transform: skewX(-8deg) scaleX(var(--hx, 1)); transform-origin: right; transition: transform .8s var(--ease-out); }
[data-in] .hl::after { --hx: 0; }
[data-in].on .hl::after { --hx: 1; transition-delay: .35s; }
.blue-t { color: var(--blue); }
[data-in] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
[data-in].on { opacity: 1; transform: none; }

/* ── دکمهٔ شناور پایین: یک قرص جمع‌وجور وسط پایین (نه نوار تمام‌عرض) تا جای کمی از صفحه بگیرد ── */
.dock { position: fixed; z-index: 45; left: 50%; bottom: calc(12px + var(--safe-b)); height: 52px; gap: 10px; padding: 0; padding-inline-start: 6px; padding-inline-end: 18px; border-radius: 999px; font-size: 15px; white-space: nowrap;
  box-shadow: 0 14px 30px -8px rgba(0,20,60,.5); transform: translate(-50%, 180%); transition: transform .5s var(--ease-smooth); }
.dock::after { border-radius: 999px; }
.dock.show { transform: translate(-50%, 0); }
.dock.show:active { transform: translate(-50%, 0) scale(.96); }
.dock .cta__ic { width: 40px; height: 40px; border-radius: 50%; }
.dock .cta__ic img { width: 30px; height: 30px; }
.dock .cta__t small { font-size: 11px; }

/* ── کانفتی، تُست، شیت ── */
/* بوم کاغذ رنگی: canvas با inset کش نمی‌آید (اندازه‌اش از نسبت تصویرش می‌آید)، پس عرض و ارتفاعش صریح ۱۰۰٪ صفحه است */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; z-index: 80; pointer-events: none; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 14px; background: rgba(12,27,38,.94); color: #fff; font-size: 13.5px; font-weight: 700; transition: opacity .3s, transform .4s var(--ease-spring); max-width: calc(min(100vw, 430px) - 40px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(6,23,58,.5); opacity: 0; pointer-events: none; transition: opacity .3s; }
.sheet.open { opacity: 1; pointer-events: auto; }
.sheet__box { width: 100%; max-width: 430px; max-height: calc(var(--sv) * .88); overflow: auto; padding: 14px var(--gut) calc(24px + var(--safe-b)); border-radius: 28px 28px 0 0; background: #fff; transform: translateY(100%); transition: transform .5s var(--ease-smooth); }
.sheet.open .sheet__box { transform: none; }
.sheet__grab { width: 44px; height: 5px; border-radius: 9px; background: #D5E1EA; margin: 0 auto 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}