/* ═══════════════════════════════════════════
   X-MART · دارک گلس‌مورفیسم + نئون
   ═══════════════════════════════════════════ */

@font-face{font-family:Kalameh;src:url(../fonts/Kalameh-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Kalameh;src:url(../fonts/Kalameh-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Kalameh;src:url(../fonts/Kalameh-Black.ttf) format('truetype');font-weight:900;font-display:swap}

:root{
  --bg:#05060a;
  --bg-2:#0a0c14;
  --ink:#EEF2F9;
  --muted:#8A93A9;
  --dim:#5A6178;

  --cy:#38E1FF;
  --vi:#7C5CFF;
  --pk:#FF4D9D;
  --mt:#4DFFB8;

  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);-webkit-text-size-adjust:100%}
body{
  font-family:Kalameh,system-ui,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--ink);
  line-height:1.85;font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{display:block;max-width:100%}

/* هر عنصری که display صریح داره، روی [hidden] مرورگر غلبه می‌کنه و
   «مخفی» می‌مونه ولی همچنان جا می‌گیره و کلیک می‌گیره. این یک خط،
   جلوی کل این دسته باگ رو می‌گیره. */
[hidden]{display:none!important}

a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--vi);color:#fff}

.wrap{width:min(1200px,92vw);margin-inline:auto}
.wrap-narrow{width:min(820px,92vw)}

/* ── اسکرول‌بار ── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--vi),var(--cy));border-radius:9px;border:3px solid var(--bg)}

/* ═══ پس‌زمینه ═══ */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(90rem 60rem at 80% -10%,#0d1030 0%,transparent 60%),
  radial-gradient(70rem 50rem at 0% 100%,#160b26 0%,transparent 60%),var(--bg)}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;will-change:transform}
.b1{width:46vw;height:46vw;background:#2b6cff;top:-14vw;right:-10vw;animation:drift1 26s ease-in-out infinite}
.b2{width:40vw;height:40vw;background:#8b2fff;bottom:-12vw;left:-8vw;animation:drift2 32s ease-in-out infinite}
.b3{width:32vw;height:32vw;background:#ff2f86;top:42%;left:38%;opacity:.28;animation:drift3 38s ease-in-out infinite}
@keyframes drift1{50%{transform:translate3d(-8vw,10vh,0) scale(1.15)}}
@keyframes drift2{50%{transform:translate3d(10vw,-8vh,0) scale(1.2)}}
@keyframes drift3{33%{transform:translate3d(-12vw,-6vh,0)}66%{transform:translate3d(8vw,8vh,0)}}
.grid-fade{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 10%,transparent 70%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 10%,transparent 70%)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* درخشش دنبال‌کننده‌ی موس */
#glare{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(124,92,255,.16),transparent 65%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .4s;will-change:transform}
body.has-pointer #glare{opacity:1}

/* ═══ شیشه ═══ */
.glass{
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.10);
}

/* ═══ دکمه‌ها ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.78em 1.5em;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:.95rem;cursor:pointer;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s;
  white-space:nowrap;background:none;
}
.btn:active{transform:scale(.96)}
.btn-lg{padding:.95em 1.9em;font-size:1.02rem}
.btn-sm{padding:.5em 1.05em;font-size:.85rem}
.btn-primary{background:linear-gradient(105deg,var(--cy),var(--vi) 55%,var(--pk));color:#06070d;
  box-shadow:0 8px 30px rgba(124,92,255,.38)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(124,92,255,.55)}
.btn-ghost{background:var(--glass);border-color:var(--line-2);color:var(--ink);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:var(--glass-2);border-color:rgba(255,255,255,.35);transform:translateY(-3px)}
.btn-wa{background:linear-gradient(105deg,#25D366,#0e9f4f);color:#03150a;box-shadow:0 8px 26px rgba(37,211,102,.3)}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(37,211,102,.45)}
.btn-tg{background:linear-gradient(105deg,#37AEE2,#1c7fb0);color:#02121c;box-shadow:0 8px 26px rgba(55,174,226,.3)}
.btn-tg:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(55,174,226,.45)}
.btn[disabled]{opacity:.4;pointer-events:none}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--glass);
  cursor:pointer;display:grid;place-items:center;font-size:1rem;transition:.2s}
.icon-btn:hover{background:var(--glass-2);transform:rotate(90deg)}

/* ═══ پیش‌بارگذاری ═══
   یک حلقه‌ی ۳.۶ ثانیه‌ای با پنج ضرب:
     ۰.۰–۰.۵s  گلس ترک‌خورده برق می‌زنه
     ۰.۵–۱.۴s  تراشه‌ها می‌پرن و ورق شکسته کنده می‌شه
     ۱.۴–۲.۲s  گلس نو از بالا می‌شینه
     ۲.۲–۳.۰s  دستمال کشیده می‌شه و برق دنبالش میاد
     ۳.۰–۳.۶s  درخشش پایانی و محو شدن برای تکرار
   نوار پیشرفت از این حلقه جداست و پیشرفت واقعی بارگذاری رو نشون می‌ده. */
#preloader{position:fixed;inset:0;z-index:200;background:
  radial-gradient(60rem 40rem at 50% 30%,#12162e 0%,transparent 65%),var(--bg);
  display:grid;place-items:center;
  transition:opacity .6s var(--ease),visibility .6s}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}

.pl-inner{display:grid;gap:20px;justify-items:center;--d:3.6s}
.pl-stage{width:min(258px,60vw);filter:drop-shadow(0 24px 60px rgba(124,92,255,.35))}

.pl-scene{animation:plLoop var(--d) linear infinite}
@keyframes plLoop{0%{opacity:0}5%{opacity:1}88%{opacity:1}97%,100%{opacity:0}}

.pl-body{fill:#1b2039;stroke:#39406b;stroke-width:2}
.pl-ui rect{fill:#38E1FF;opacity:.13}

/* ── ۱) ترک‌ها برق می‌زنن، بعد با ورق شکسته کنده می‌شن ── */
.pl-cracks path,.pl-cracks circle{
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:plCrackDraw var(--d) var(--ease) infinite}
@keyframes plCrackDraw{0%{stroke-dashoffset:340}9%,100%{stroke-dashoffset:0}}
.pl-cracks{animation:plGlint var(--d) ease-in-out infinite}
@keyframes plGlint{0%,4%{opacity:.35}8%{opacity:1}11%{opacity:.55}14%{opacity:1}17%,100%{opacity:.9}}

.pl-broken{animation:plPeel var(--d) var(--ease) infinite;transform-origin:210px 40px}
@keyframes plPeel{
  0%,14%   {opacity:1;transform:none}
  20%      {opacity:1;transform:translate(4px,-7px) rotate(-2deg)}
  39%      {opacity:0;transform:translate(150px,-230px) rotate(-30deg)}
  100%     {opacity:0;transform:translate(150px,-230px) rotate(-30deg)}
}

/* ── ۲) تراشه‌های جداشده، هر کدوم مسیر خودش ── */
.pl-shards .sh{fill:#bfe9ff;fill-opacity:.30;stroke:#e8f8ff;stroke-opacity:.7;stroke-width:.9;
  opacity:0;transform-origin:140px 150px}
@keyframes plShard1{0%,15%{opacity:0;transform:none}
  20%{opacity:.75;transform:translate(-8px,-10px) rotate(-6deg)}
  38%{opacity:0;transform:translate(-120px,-180px) rotate(-52deg) scale(.6)}
  100%{opacity:0;transform:translate(-120px,-180px) rotate(-52deg) scale(.6)}}
@keyframes plShard2{0%,15%{opacity:0;transform:none}
  21%{opacity:.7;transform:translate(10px,-6px) rotate(5deg)}
  40%{opacity:0;transform:translate(165px,-120px) rotate(48deg) scale(.55)}
  100%{opacity:0;transform:translate(165px,-120px) rotate(48deg) scale(.55)}}
@keyframes plShard3{0%,16%{opacity:0;transform:none}
  22%{opacity:.65;transform:translate(-6px,8px) rotate(-4deg)}
  41%{opacity:0;transform:translate(-140px,150px) rotate(-40deg) scale(.5)}
  100%{opacity:0;transform:translate(-140px,150px) rotate(-40deg) scale(.5)}}
.sh1{animation:plShard1 var(--d) var(--ease) infinite}
.sh2{animation:plShard2 var(--d) var(--ease) infinite}
.sh3{animation:plShard3 var(--d) var(--ease) infinite}

/* ── ۳) گلس نو از بالا میاد و با یه تکون کوچیک می‌شینه ── */
.pl-new{animation:plDrop var(--d) cubic-bezier(.34,1.4,.5,1) infinite}
@keyframes plDrop{
  0%,38%  {opacity:0;transform:translateY(-240px) rotate(-5deg)}
  48%     {opacity:.95;transform:translateY(9px) rotate(.6deg)}
  53%     {opacity:.95;transform:translateY(-4px)}
  58%,100%{opacity:.95;transform:none}
}

/* ── ۴) دستمال از بالا-چپ تا پایین-راست ── */
.pl-cloth{animation:plWipe var(--d) cubic-bezier(.45,0,.25,1) infinite}
@keyframes plWipe{
  0%,58%  {opacity:0;transform:translate(52px,26px) rotate(-14deg)}
  62%     {opacity:1;transform:translate(76px,58px) rotate(-12deg)}
  72%     {opacity:1;transform:translate(150px,178px) rotate(3deg)}
  82%     {opacity:1;transform:translate(224px,318px) rotate(13deg)}
  87%,100%{opacity:0;transform:translate(258px,368px) rotate(16deg)}
}
/* برق شفافیت که دقیقاً پشت دستمال حرکت می‌کنه */
.pl-shine{animation:plShine var(--d) cubic-bezier(.45,0,.25,1) infinite}
@keyframes plShine{
  0%,59%  {opacity:0;transform:translateX(0)}
  64%     {opacity:.55;transform:translateX(70px)}
  84%     {opacity:.55;transform:translateX(300px)}
  89%,100%{opacity:0;transform:translateX(330px)}
}

/* ── ۵) درخشش پایانی ── */
.spark{opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes plSpark{0%,84%{opacity:0;transform:scale(.2) rotate(0)}
  90%{opacity:.95;transform:scale(1) rotate(35deg)}
  96%,100%{opacity:0;transform:scale(.35) rotate(60deg)}}
.s1{animation:plSpark var(--d) ease-out infinite}
.s2{animation:plSpark var(--d) ease-out infinite;animation-delay:.1s}
.s3{animation:plSpark var(--d) ease-out infinite;animation-delay:.19s}

/* ── متن مرحله‌ها ── */
.pl-copy{position:relative;height:1.7em;width:min(300px,80vw)}
.pl-line{position:absolute;inset:0;text-align:center;color:var(--muted);font-size:.95rem;
  opacity:0;animation:plText var(--d) var(--ease) infinite}
@keyframes plText{0%{opacity:0;transform:translateY(6px)}
  4%{opacity:1;transform:none}18%{opacity:1}22%,100%{opacity:0;transform:translateY(-6px)}}
.pl-line.l2{animation-delay:calc(var(--d) * .20)}
.pl-line.l3{animation-delay:calc(var(--d) * .40)}
.pl-line.l4{animation-delay:calc(var(--d) * .60)}
.pl-line.l5{animation-delay:calc(var(--d) * .78)}

/* ── نوار پیشرفت واقعی ── */
.pl-load{display:flex;align-items:center;gap:12px}
.pl-bar{width:190px;height:4px;border-radius:9px;background:rgba(255,255,255,.09);overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;border-radius:9px;
  background:linear-gradient(90deg,var(--cy),var(--vi),var(--pk));
  transition:width .35s var(--ease)}
.pl-pct{font-size:.82rem;color:var(--dim);min-width:3.2em;text-align:start;font-variant-numeric:tabular-nums}
.pl-pct b{color:var(--ink);font-weight:700}

/* کسی که انیمیشن براش اذیت‌کننده‌ست، فقط نوار پیشرفت رو می‌بینه */
@media (prefers-reduced-motion:reduce){
  .pl-scene,.pl-broken,.pl-new,.pl-cloth,.pl-shine,.pl-cracks,
  .pl-cracks path,.pl-cracks circle,.pl-shards .sh,.spark{animation:none!important}
  .pl-broken,.pl-shards,.pl-cloth,.pl-shine,.spark{opacity:0}
  .pl-new{opacity:.95}
  .pl-cracks path,.pl-cracks circle{stroke-dashoffset:0}
  .pl-line{animation:none;opacity:0}
  .pl-line.l3{opacity:1}
}

/* ═══ ناوبری ═══ */
.nav{position:fixed;top:0;inset-inline:0;z-index:90;height:var(--nav-h);
  transition:background .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.stuck{background:rgba(6,8,14,.72);backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom-color:var(--line)}
.nav-in{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(140deg,var(--cy),var(--vi),var(--pk));
  box-shadow:0 0 22px rgba(124,92,255,.6);animation:spinq 9s linear infinite}
@keyframes spinq{to{transform:rotate(360deg)}}
.logo-txt{font-weight:900;letter-spacing:.16em;font-size:1.12rem;direction:ltr}
.logo-txt i{font-style:normal;color:var(--cy)}
.nav-links{display:flex;gap:24px;margin-inline-start:auto;font-size:.93rem;color:var(--muted)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{content:'';position:absolute;bottom:-6px;inset-inline-start:0;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cy),var(--pk));transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.cart-btn{position:relative;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);
  background:var(--glass);backdrop-filter:blur(12px);display:grid;place-items:center;cursor:pointer;transition:.25s}
.cart-btn:hover{border-color:var(--cy);color:var(--cy);transform:translateY(-2px)}
.cart-count{position:absolute;top:-7px;inset-inline-end:-7px;min-width:21px;height:21px;padding:0 5px;
  border-radius:999px;background:linear-gradient(120deg,var(--pk),var(--vi));color:#fff;font-size:.7rem;
  font-weight:700;display:grid;place-items:center;box-shadow:0 0 14px rgba(255,77,157,.7)}
.cart-btn.bump{animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:scale(1.22) rotate(-6deg)}}

/* ═══ هیرو ═══ */
#hero{min-height:100svh;display:flex;align-items:center;position:relative;padding:calc(var(--nav-h) + 40px) 0 70px}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;width:min(1200px,92vw)}
.pill{display:inline-flex;align-items:center;gap:9px;padding:.42em 1.05em;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);font-size:.83rem;color:var(--muted);backdrop-filter:blur(12px)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--mt);box-shadow:0 0 12px var(--mt);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}
.hero-copy h1{font-size:clamp(2.5rem,5.6vw,4.4rem);font-weight:900;line-height:1.22;margin:22px 0 18px;letter-spacing:-.01em}
.grad{background:linear-gradient(100deg,var(--cy),var(--vi) 45%,var(--pk));-webkit-background-clip:text;
  background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(124,92,255,.35))}
.lead{color:var(--muted);font-size:1.08rem;max-width:34em}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin:30px 0 34px}
.hero-trust{list-style:none;display:flex;gap:34px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line)}
.hero-trust b{display:block;font-size:1.5rem;font-weight:900;
  background:linear-gradient(120deg,var(--cy),var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-trust span{font-size:.82rem;color:var(--dim)}

/* گوشی سه‌بعدی */
.hero-visual{position:relative;display:grid;place-items:center;perspective:1400px;min-height:520px}
.phone{position:relative;transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform;
  animation:levit 7s ease-in-out infinite}
@keyframes levit{50%{translate:0 -16px}}
.phone-body{position:relative;width:270px;height:552px;border-radius:44px;
  background:linear-gradient(155deg,#232634,#0c0e16 55%,#1a1d29);
  padding:9px;box-shadow:0 50px 100px rgba(0,0,0,.75),inset 0 0 0 1.5px rgba(255,255,255,.13),0 0 70px rgba(124,92,255,.22)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:linear-gradient(170deg,#0a1024,#170e2b 50%,#24102a)}
.screen-glow{position:absolute;inset:-40%;background:conic-gradient(from 0deg,var(--cy),var(--vi),var(--pk),var(--mt),var(--cy));
  opacity:.32;filter:blur(38px);animation:spinq 14s linear infinite}
.notch{position:absolute;top:11px;left:50%;translate:-50% 0;width:78px;height:23px;border-radius:999px;background:#04050a;z-index:3}
.screen-ui{position:absolute;inset:0;padding:52px 18px 20px;display:grid;gap:13px;align-content:start;z-index:2}
.su-row{display:flex;justify-content:space-between}
.su-row span{height:9px;border-radius:5px;background:rgba(255,255,255,.28)}
.su-row span:first-child{width:44%}.su-row span:last-child{width:20%}
.su-card{height:112px;border-radius:18px;background:linear-gradient(120deg,rgba(255,255,255,.20),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14)}
.su-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.su-grid i{aspect-ratio:1;border-radius:15px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.09)}
.su-grid i:nth-child(2){background:rgba(56,225,255,.20)}
.su-grid i:nth-child(4){background:rgba(255,77,157,.20)}
.su-grid i:nth-child(5){background:rgba(77,255,184,.16)}

.glass-layer{position:absolute;inset:9px;border-radius:36px;transform:translateZ(46px);
  background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 42%,rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.30);overflow:hidden;pointer-events:none;
  box-shadow:inset 0 0 40px rgba(255,255,255,.09)}
.glass-sheen{position:absolute;top:-60%;left:-120%;width:70%;height:250%;transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);animation:sheen 4.5s var(--ease) infinite}
@keyframes sheen{0%{left:-120%}55%,100%{left:170%}}
.glass-tag{position:absolute;bottom:16px;left:50%;translate:-50% 0;font-size:.66rem;letter-spacing:.1em;direction:ltr;
  padding:.32em .85em;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);
  color:#fff;white-space:nowrap;backdrop-filter:blur(8px)}
.phone-shadow{position:absolute;bottom:-46px;left:50%;translate:-50% 0;width:210px;height:34px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(124,92,255,.5),transparent);filter:blur(18px)}

.float-chip{position:absolute;padding:.5em 1.1em;border-radius:999px;font-size:.8rem;font-weight:700;
  background:var(--glass-2);border:1px solid var(--line-2);backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.4);animation:levit 6s ease-in-out infinite}
.c1{top:12%;inset-inline-start:-2%;color:var(--cy);animation-delay:.4s}
.c2{top:47%;inset-inline-end:-4%;color:var(--pk);animation-delay:1.3s}
.c3{bottom:12%;inset-inline-start:2%;color:var(--mt);animation-delay:2.1s}

.scroll-hint{position:absolute;bottom:26px;left:50%;translate:-50% 0;font-size:.78rem;color:var(--dim);
  display:grid;justify-items:center;gap:7px}
.scroll-hint i{width:22px;height:35px;border-radius:12px;border:1.5px solid var(--line-2);position:relative}
.scroll-hint i::after{content:'';position:absolute;top:7px;left:50%;translate:-50% 0;width:3px;height:7px;border-radius:2px;
  background:var(--cy);animation:sdown 1.7s infinite}
@keyframes sdown{60%{transform:translate(-50%,15px);opacity:0}100%{opacity:0}}

/* ═══ نوار متحرک ═══ */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.022);padding:15px 0}
.marquee-track{display:flex;gap:34px;width:max-content;animation:march 34s linear infinite;align-items:center}
.marquee span{font-size:.92rem;color:var(--muted);white-space:nowrap}
.marquee i{color:var(--vi);font-size:.6rem;font-style:normal}
@keyframes march{to{transform:translateX(50%)}}

/* ═══ سکشن‌ها ═══ */
.sec{padding:110px 0;position:relative}
.sec-head{text-align:center;max-width:640px;margin:0 auto 52px}
.sec-kicker{display:inline-block;font-size:.78rem;letter-spacing:.22em;color:var(--cy);margin-bottom:12px}
.sec-head h2{font-size:clamp(1.85rem,3.7vw,2.9rem);font-weight:900;line-height:1.35;margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:1.02rem}

/* ═══ انتخاب گوشی ═══ */
.finder-box{padding:26px}
.finder-search{display:flex;align-items:center;gap:11px;padding:.85em 1.2em;border-radius:999px;
  background:rgba(0,0,0,.28);border:1px solid var(--line);color:var(--muted);margin-bottom:22px;transition:.25s}
.finder-search:focus-within{border-color:var(--cy);box-shadow:0 0 0 4px rgba(56,225,255,.11)}
.finder-search input{flex:1;background:none;border:0;outline:none}
.finder-search input::placeholder{color:var(--dim)}
.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:11px;max-height:340px;overflow-y:auto;padding-inline-end:6px}
.dev{position:relative;padding:.95em 1em;border-radius:var(--r-sm);border:1px solid var(--line);
  background:rgba(255,255,255,.028);cursor:pointer;text-align:start;font-size:.9rem;transition:.22s var(--ease)}
.dev:hover{background:rgba(255,255,255,.075);border-color:var(--line-2);transform:translateY(-2px)}
.dev.on{border-color:var(--cy);background:linear-gradient(120deg,rgba(56,225,255,.16),rgba(124,92,255,.1));
  box-shadow:0 0 0 3px rgba(56,225,255,.12),0 10px 26px rgba(56,225,255,.14)}
.dev .hot{position:absolute;top:-7px;inset-inline-end:9px;font-size:.62rem;padding:.15em .6em;border-radius:999px;
  background:linear-gradient(120deg,var(--pk),var(--vi));color:#fff;font-weight:700}
.dev small{display:block;color:var(--dim);font-size:.72rem;direction:ltr;text-align:start}
.finder-empty{text-align:center;color:var(--muted);padding-top:18px;font-size:.92rem}
.finder-empty a{color:var(--cy);border-bottom:1px dashed}

/* ═══ کارت محصول ═══ */
.model-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:24px}
.card{position:relative;padding:28px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),border-color .4s;
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r-lg);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.1)}
.card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 0%,var(--a,#38E1FF),transparent 70%);mix-blend-mode:soft-light}
.card:hover{transform:translateY(-9px);border-color:var(--line-2)}
.card:hover::before{opacity:.55}
.card.dim{opacity:.42;filter:grayscale(.6)}
.card-badge{position:absolute;top:20px;inset-inline-end:20px;font-size:.7rem;padding:.3em .85em;border-radius:999px;
  background:rgba(0,0,0,.42);border:1px solid var(--line-2);color:var(--a);font-weight:700}
.card-art{height:168px;margin:6px 0 20px;border-radius:var(--r);position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(0,0,0,.42),rgba(0,0,0,.15));border:1px solid var(--line);display:grid;place-items:center}
.card-art .sheet{width:96px;height:126px;border-radius:14px;position:relative;
  background:linear-gradient(140deg,color-mix(in srgb,var(--a) 32%,transparent),transparent 50%,color-mix(in srgb,var(--a2) 32%,transparent));
  border:1px solid color-mix(in srgb,var(--a) 55%,transparent);
  box-shadow:0 18px 44px color-mix(in srgb,var(--a) 26%,transparent),inset 0 0 26px rgba(255,255,255,.09);
  transform:rotate(-8deg);transition:transform .55s var(--ease)}
.card:hover .card-art .sheet{transform:rotate(0) scale(1.09)}
.card-art .sheet::after{content:'';position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%)}
.card-art .ring{position:absolute;width:210px;height:210px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--a) 26%,transparent);animation:spinq 18s linear infinite}
.card-art .ring:nth-of-type(2){width:150px;height:150px;animation-duration:12s;animation-direction:reverse}
.card h3{font-size:1.5rem;font-weight:900;margin-bottom:3px}
.card h3 em{font-style:normal;color:var(--a)}
.card .tag{color:var(--a);font-size:.86rem;margin-bottom:11px}
.card .desc{color:var(--muted);font-size:.92rem;margin-bottom:17px}
.card ul{list-style:none;display:grid;gap:8px;margin-bottom:20px;font-size:.88rem}
.card ul li{display:flex;gap:9px;align-items:flex-start;color:#C3CBDD}
.card ul li::before{content:'';flex:none;width:15px;height:15px;margin-top:5px;border-radius:50%;
  background:color-mix(in srgb,var(--a) 22%,transparent);border:1px solid var(--a);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M4 12l5 6 11-13'/%3E%3C/svg%3E");
  background-size:9px;background-position:center;background-repeat:no-repeat}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.price b{font-size:1.42rem;font-weight:900}
.price small{display:block;font-size:.78rem;color:var(--dim);text-decoration:line-through}
.price u{text-decoration:none;font-size:.8rem;color:var(--muted)}
.card .pick-hint{width:100%;font-size:.82rem;color:var(--dim);text-align:center;padding-top:4px}
.oos{width:100%;text-align:center;font-size:.85rem;color:var(--pk);padding:.6em;border-radius:var(--r-sm);
  background:rgba(255,77,157,.09);border:1px solid rgba(255,77,157,.25)}
.stock-warn{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-bottom:14px;
  font-size:.82rem;font-weight:700;color:#FFC24D;padding:.32em .9em;border-radius:999px;
  background:rgba(255,194,77,.1);border:1px solid rgba(255,194,77,.3)}
.stock-warn::before{content:'';width:7px;height:7px;border-radius:50%;background:#FFC24D;
  box-shadow:0 0 10px #FFC24D;animation:pulse 1.8s infinite}

/* ═══ آزمایشگاه ═══ */
.lab-box{padding:18px;position:relative}
#scratchCanvas{width:100%;height:330px;border-radius:var(--r);cursor:crosshair;touch-action:none;background:#07080f}
.lab-labels{display:flex;justify-content:space-between;padding:14px 8px 2px;font-size:.86rem;font-weight:700}
.ll-bad{color:var(--pk)}.ll-good{color:var(--mt)}
.lab-reset{position:absolute;top:30px;inset-inline-end:30px}
.lab-note{text-align:center;color:var(--dim);font-size:.85rem;margin-top:18px}

/* ═══ جدول مقایسه ═══ */
.table-scroll{overflow-x:auto;border-radius:var(--r-lg)}
.cmp{width:100%;min-width:600px;border-collapse:collapse;overflow:hidden}
.cmp th,.cmp td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--line);font-size:.92rem}
.cmp th:first-child,.cmp td:first-child{text-align:start;color:var(--muted);font-weight:400}
.cmp thead th{font-size:1.05rem;font-weight:900;padding-block:22px}
.cmp thead th span{display:block;font-size:.75rem;font-weight:400;color:var(--dim);margin-top:2px}
.cmp tbody tr{transition:background .2s}
.cmp tbody tr:hover{background:rgba(255,255,255,.04)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--mt);font-weight:700}
.cmp .no{color:var(--dim)}

/* ═══ نظرات ═══ */
.rev-rail{display:flex;gap:18px;overflow-x:auto;padding:6px 4vw 30px;scroll-snap-type:x mandatory}
.rev-rail::-webkit-scrollbar{height:6px}
.rev{flex:none;width:min(330px,80vw);padding:24px;scroll-snap-align:center;
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r-lg);backdrop-filter:blur(18px);transition:.3s var(--ease)}
.rev:hover{transform:translateY(-6px);border-color:var(--line-2)}
.rev .stars{color:#FFC24D;letter-spacing:2px;margin-bottom:10px;font-size:.9rem}
.rev p{font-size:.94rem;color:#CBD2E2;margin-bottom:16px}
.rev .who{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--line)}
.rev .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.9rem;
  background:linear-gradient(130deg,var(--vi),var(--cy));color:#06070d;flex:none}
.rev .who b{font-size:.9rem;display:block}
.rev .who span{font-size:.76rem;color:var(--dim)}

/* ═══ سوالات ═══ */
.faq-list{display:grid;gap:12px}
.fq{border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.028);overflow:hidden;transition:.3s}
.fq.open{border-color:var(--line-2);background:rgba(255,255,255,.055)}
.fq-q{width:100%;display:flex;align-items:center;gap:14px;padding:19px 22px;background:none;border:0;
  cursor:pointer;text-align:start;font-weight:700;font-size:1rem}
.fq-q .plus{margin-inline-start:auto;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;transition:.35s var(--ease);color:var(--cy);font-size:1.1rem;line-height:1}
.fq.open .fq-q .plus{transform:rotate(135deg);background:var(--cy);color:#06070d;border-color:var(--cy)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.fq-a p{padding:0 22px 22px;color:var(--muted);font-size:.94rem}
.faq-cta{margin-top:30px;padding:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.faq-cta h4{font-size:1.15rem;font-weight:900}
.faq-cta p{color:var(--muted);font-size:.9rem}

/* ═══ فوتر ═══ */
footer{border-top:1px solid var(--line);padding:60px 0 26px;background:rgba(0,0,0,.28);position:relative}
.foot-in{display:flex;gap:44px;justify-content:space-between;flex-wrap:wrap}
.foot-brand{max-width:280px}
.foot-brand p{color:var(--dim);font-size:.88rem;margin-top:12px}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-cols h5{font-size:.86rem;margin-bottom:14px;color:var(--ink)}
.foot-cols div{display:grid;gap:9px}
.foot-cols a{font-size:.88rem;color:var(--muted);transition:.2s}
.foot-cols a:hover{color:var(--cy)}
.foot-bot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);text-align:center;font-size:.8rem;color:var(--dim)}

/* ═══ سبد ═══ */
.drawer{position:fixed;inset:0;z-index:110}
.drawer-backdrop{position:absolute;inset:0;background:rgba(3,4,8,.72);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .4s}
.drawer.in .drawer-backdrop{opacity:1}
.drawer-panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(430px,92vw);border-radius:0;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .48s var(--ease);border-block:0;border-inline-start:0}
[dir=rtl] .drawer-panel{transform:translateX(-100%)}
.drawer.in .drawer-panel{transform:translateX(0)!important}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:1.2rem;font-weight:900}
.drawer-body{flex:1;overflow-y:auto;padding:18px 24px;display:grid;gap:13px;align-content:start}
.drawer-foot{padding:20px 24px;border-top:1px solid var(--line);display:grid;gap:13px}
.ci{display:flex;gap:13px;padding:13px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.ci-art{width:52px;height:66px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,color-mix(in srgb,var(--a) 40%,transparent),transparent 55%,color-mix(in srgb,var(--a2) 40%,transparent));
  border:1px solid color-mix(in srgb,var(--a) 55%,transparent)}
.ci-info{flex:1;min-width:0}
.ci-info b{font-size:.94rem;display:block}
.ci-info span{font-size:.78rem;color:var(--dim);display:block}
.ci-info .ci-price{font-size:.86rem;color:var(--cy);margin-top:3px}
.ci-qty{display:flex;align-items:center;gap:9px;margin-top:9px}
.ci-qty button{width:25px;height:25px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  cursor:pointer;display:grid;place-items:center;line-height:1;transition:.2s}
.ci-qty button:hover{background:var(--cy);color:#06070d;border-color:var(--cy)}
.ci-qty b{min-width:20px;text-align:center;font-size:.9rem}
.ci-del{align-self:flex-start;background:none;border:0;color:var(--dim);cursor:pointer;font-size:1rem;transition:.2s;padding:2px}
.ci-del:hover{color:var(--pk)}
.cart-empty{text-align:center;padding:50px 20px;color:var(--dim)}
.cart-empty .em{font-size:2.6rem;display:block;margin-bottom:12px}
.sum{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted)}
.sum.total{font-size:1.12rem;font-weight:900;color:var(--ink);padding-top:11px;border-top:1px solid var(--line)}
.ship-hint{font-size:.8rem;color:var(--mt);text-align:center}

/* ═══ مودال ═══ */
.modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px;
  background:rgba(3,4,8,.76);backdrop-filter:blur(9px);opacity:0;transition:opacity .35s}
.modal.in{opacity:1}
/* بدون این، مودالِ hidden با display:grid روی [hidden] غلبه می‌کنه و
   نامرئی می‌مونه ولی جلوی کلیک کل صفحه رو می‌گیره */
.modal[hidden],.drawer[hidden]{display:none!important}
.modal-card{width:min(520px,100%);max-height:88svh;overflow-y:auto;padding:32px;position:relative;
  transform:translateY(22px) scale(.97);transition:transform .45s var(--ease)}
.modal.in .modal-card{transform:none}
.modal-x{position:absolute;top:18px;inset-inline-end:18px}

/* ═══ انتخاب روش پرداخت ═══ */
.pay-picker{display:grid;gap:9px;margin:18px 0 6px}
.pay-picker h4{font-size:.92rem;font-weight:900;margin-bottom:2px}
.pay-opt{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  padding:.85em 1em;border-radius:var(--r);border:1px solid var(--line);
  background:rgba(255,255,255,.03);transition:.2s var(--ease)}
.pay-opt:hover{border-color:var(--line-2);background:rgba(255,255,255,.055)}
.pay-opt.on{border-color:rgba(56,225,255,.55);background:rgba(56,225,255,.07)}
.pay-opt input{accent-color:var(--cy);margin-top:.35em;flex:none;cursor:pointer}
.pay-main{display:grid;gap:3px;font-size:.88rem}
.pay-main b{font-weight:700}
.pay-main b i{font-style:normal;color:var(--am);font-size:.85em;font-weight:400}
.pay-sub{color:var(--muted);font-size:.8rem;line-height:1.7}
.card-no{font-family:ui-monospace,monospace;font-size:1rem;letter-spacing:.06em;color:var(--cy);
  background:rgba(0,0,0,.3);border-radius:8px;padding:.25em .7em;justify-self:start;margin:2px 0}
.vpn-card{text-align:center}
.vpn-emoji{font-size:3rem;margin-bottom:8px;animation:levit 3s ease-in-out infinite}
.vpn-card h3{font-size:1.35rem;font-weight:900;margin-bottom:12px;line-height:1.5}
.vpn-card p{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.vpn-actions{display:grid;gap:11px}
.vpn-note{font-size:.76rem!important;color:var(--dim)!important;margin:18px 0 0!important}

.checkout-card h3{font-size:1.45rem;font-weight:900}
.co-sub{color:var(--muted);font-size:.9rem;margin-bottom:22px}
#checkoutForm{display:grid;gap:14px}
#checkoutForm label{display:grid;gap:7px;font-size:.88rem;color:var(--muted)}
#checkoutForm .opt{color:var(--dim);font-size:.78rem}
#checkoutForm input,#checkoutForm textarea{padding:.8em 1em;border-radius:var(--r-sm);border:1px solid var(--line);
  background:rgba(0,0,0,.3);outline:none;transition:.22s;resize:vertical;font-size:.94rem}
#checkoutForm input:focus,#checkoutForm textarea:focus{border-color:var(--cy);box-shadow:0 0 0 4px rgba(56,225,255,.1)}
#checkoutForm input::placeholder,#checkoutForm textarea::placeholder{color:var(--dim)}
#checkoutForm .bad{border-color:var(--pk)!important;box-shadow:0 0 0 4px rgba(255,77,157,.12)!important}
.co-total{display:grid;gap:6px;padding:15px;border-radius:var(--r);background:rgba(255,255,255,.045);
  border:1px solid var(--line);margin-top:6px}
.co-actions{display:grid;gap:10px;margin-top:6px}
.co-note{font-size:.8rem;color:var(--dim);text-align:center;margin-top:4px}

/* ═══ توست ═══ */
.toast{position:fixed;bottom:26px;left:50%;translate:-50% 0;z-index:150;padding:.85em 1.6em;border-radius:999px;
  background:rgba(10,12,20,.94);border:1px solid var(--line-2);backdrop-filter:blur(16px);font-size:.9rem;
  box-shadow:0 16px 44px rgba(0,0,0,.55);opacity:0;transition:opacity .3s,translate .3s var(--ease);
  translate:-50% 18px;max-width:88vw;text-align:center}
.toast.in{opacity:1;translate:-50% 0}

/* ═══ انیمیشن ورود ═══
   پیش‌فرض: محتوا دیده می‌شه. مخفی‌سازی فقط وقتی فعال می‌شه که JS
   کلاس .anim رو گذاشته باشه — تا اگه اسکریپت خطا خورد، سایت خالی نمونه. */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.anim .reveal{opacity:0;transform:translateY(26px)}
html.anim .reveal.seen{opacity:1;transform:none}

/* ═══ ریسپانسیو ═══ */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:44px;text-align:center}
  .hero-copy .lead{margin-inline:auto}
  .hero-cta,.hero-trust{justify-content:center}
  .hero-visual{min-height:auto;order:-1}
  .phone-body{width:225px;height:462px}
  .nav-links{display:none}
  .float-chip{display:none}
}
@media (max-width:640px){
  body{font-size:15px}
  .sec{padding:74px 0}
  .wrap{width:94vw}
  #hero{min-height:auto;padding-top:calc(var(--nav-h) + 28px)}
  .hero-trust{gap:22px}
  .hero-trust b{font-size:1.2rem}
  .btn-lg{padding:.9em 1.4em;font-size:.95rem}
  .hero-cta .btn{flex:1 1 100%}
  .finder-box,.card,.modal-card{padding:20px}
  .device-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));max-height:290px}
  #scratchCanvas{height:250px}
  .lab-reset{position:static;margin-top:12px;width:100%}
  .foot-cols{gap:32px}
  .scroll-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}