/* ==========================================================================
   ادونکس — لندینگ تیره
   ۱. فونت و توکن   ۲. پایه و دکمه   ۳. هدر   ۴. هیرو   ۵. سربرگ بخش‌ها
   ۶. کارت و شبکه   ۷. ماکت‌های دست‌ساز   ۸. سوالات و خرید   ۹. واکنش‌گرایی
   ========================================================================== */
@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:800 900;font-display:swap}
@font-face{font-family:'YB';src:url('../fonts/yekanbakh-regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'YB';src:url('../fonts/yekanbakh-medium.woff') format('woff');font-weight:500 600;font-display:swap}
@font-face{font-family:'YB';src:url('../fonts/yekanbakh-bold.woff') format('woff');font-weight:700 900;font-display:swap}

:root{
  color-scheme:dark;
  --font:'YB',Tahoma,'Segoe UI',Arial,sans-serif;
  --display:'Kalameh','YB',Tahoma,sans-serif;

  --bg:#07060E;
  --bg2:#0B0918;
  --panel:#110C22;
  --line:rgba(160,140,255,.16);
  --line2:rgba(160,140,255,.30);

  --ink:#F2EEFF;
  --ink2:rgba(222,214,250,.78);
  --muted:rgba(222,214,250,.50);

  --blue:#7C3AED;
  --cyan:#F59E0B;
  --violet:#4F46E5;
  --ok:#34D399;
  --warn:#FBBF24;
  --risk:#FB7185;

  --grad:linear-gradient(120deg,#7C3AED,#4F46E5);
  --r:16px;
  --r-l:24px;
  --head:72px;
  --pad:clamp(56px,7vw,104px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 18px);-webkit-text-size-adjust:100%}
body{
  margin:0;min-width:320px;overflow-x:hidden;color:var(--ink);background:var(--bg);
  font-family:var(--font);font-size:17px;line-height:2;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(760px 520px at 78% -60px,rgba(124,58,237,.26),transparent 70%),
    radial-gradient(680px 520px at 6% 16%,rgba(79,70,229,.16),transparent 70%),
    radial-gradient(700px 520px at 92% 58%,rgba(245,158,11,.12),transparent 70%),
    radial-gradient(700px 520px at 10% 92%,rgba(124,58,237,.14),transparent 70%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to left,rgba(160,140,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(160,140,255,.05) 1px,transparent 1px);
  background-size:72px 72px,72px 72px;
  -webkit-mask-image:radial-gradient(1200px 700px at 50% 0,#000,transparent 75%);
          mask-image:radial-gradient(1200px 700px at 50% 0,#000,transparent 75%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.4;margin:0}
p{margin:0}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* ---------- دکمه‌ها ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:14px;
  font-family:var(--display);font-size:17px;font-weight:800;line-height:1;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn--main{background:var(--grad);color:#fff;box-shadow:0 18px 40px -18px rgba(124,58,237,.95)}
.btn--ghost{background:rgba(255,255,255,.05);border-color:var(--line2);color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- هدر ---------- */
.head{
  position:sticky;top:0;z-index:40;height:var(--head);display:flex;align-items:center;
  background:rgba(5,7,15,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.head .wrap{display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{width:42px;height:42px;border-radius:13px;overflow:hidden;border:1px solid var(--line2);
  box-shadow:0 10px 26px -12px rgba(124,58,237,.9)}
.brand__mark img{width:100%;height:100%;object-fit:cover}
.brand b{display:block;font-family:var(--display);font-size:19px;font-weight:800;line-height:1.25}
.brand span{display:block;font-size:11px;letter-spacing:.32em;color:var(--muted);line-height:1.2}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav a{padding:8px 13px;border-radius:10px;font-size:15px;font-weight:600;color:var(--ink2)}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.head .btn{padding:10px 20px;font-size:15px}

/* ---------- هیرو ---------- */
.hero{padding:clamp(48px,7vw,86px) 0 var(--pad)}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,56px);align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:9px;padding:7px 17px;border-radius:999px;
  background:linear-gradient(180deg,rgba(245,158,11,.16),rgba(245,158,11,.04));
  border:1px solid rgba(245,158,11,.38);color:#FFE2B0;font-size:14.5px;font-weight:700;line-height:1;
}
.kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.hero h1{margin:18px 0 0;font-size:clamp(34px,4.6vw,58px);font-weight:900;letter-spacing:-1px;line-height:1.3}
.hero h1 b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:16px 0 0;max-width:54ch;color:var(--ink2);font-size:clamp(16px,1.3vw,18.5px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.045);
  color:var(--ink2);font-size:14px;font-weight:600;line-height:1.9}
.chip b{color:#CFC2FF;font-weight:700}
.hero__shot{position:relative}
.hero__shot img{border-radius:var(--r-l);border:1px solid var(--line2);
  box-shadow:0 40px 90px -40px #000,0 0 0 8px rgba(124,58,237,.06)}

/* ---------- نوار سازگاری ---------- */
.strip{border-block:1px solid var(--line);background:rgba(255,255,255,.02)}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;padding:16px 0;
  color:var(--muted);font-size:14.5px;font-weight:600}
.strip span{display:inline-flex;align-items:center;gap:8px}
.strip i{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}

/* ---------- سربرگ بخش‌ها ---------- */
section{padding:var(--pad) 0}
.sec-head{text-align:center;max-width:70ch;margin:0 auto clamp(28px,4vw,48px)}
.sec-head .tag{
  display:inline-flex;align-items:center;gap:9px;padding:6px 16px;border-radius:999px;
  background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.38);
  color:#C3D7FF;font-size:14px;font-weight:700;line-height:1.8;
}
.sec-head h2{margin:14px 0 0;font-size:clamp(26px,3.4vw,44px);font-weight:900;letter-spacing:-.6px}
.sec-head h2 b{background:linear-gradient(90deg,var(--cyan),var(--blue) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head p{margin:12px auto 0;color:var(--ink2);font-size:clamp(15.5px,1.2vw,17.5px)}

/* ---------- قاب تصویر پنل ---------- */
.shot{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line2);
  box-shadow:0 44px 90px -46px #000,0 0 0 8px rgba(124,58,237,.05)}

/* ---------- کارت‌ها ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;padding:24px 22px;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.017) 60%,rgba(0,0,0,.2));
  border:1px solid var(--line);
}
.card::before{content:'';position:absolute;top:0;inset-inline:26%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.75}
.card h3{font-size:19px;margin-bottom:6px}
.card p{color:var(--ink2);font-size:15.5px;line-height:1.85}
.ico{
  position:relative;display:block;width:56px;height:56px;margin-bottom:14px;border-radius:17px;
  transform:rotate(-8deg);background:linear-gradient(155deg,var(--a1),var(--a2));
  box-shadow:0 14px 30px -10px var(--a3),0 0 0 1px rgba(255,255,255,.16) inset,0 -7px 14px rgba(0,0,0,.35) inset;
}
.ico::before{content:'';position:absolute;inset:3px 3px 46% 3px;border-radius:14px 14px 18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.42),transparent)}
.ico svg{position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%) rotate(8deg);
  stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.c-bl{--a1:#C4A6FF;--a2:#5B21B6;--a3:rgba(124,58,237,.55)}
.c-vi{--a1:#A5B4FC;--a2:#3730A3;--a3:rgba(79,70,229,.55)}
.c-cy{--a1:#FFD98A;--a2:#D97706;--a3:rgba(245,158,11,.5)}
.c-gr{--a1:#8CF3C4;--a2:#12A56F;--a3:rgba(52,211,153,.5)}
.c-am{--a1:#FFDF9B;--a2:#DF9E1A;--a3:rgba(251,191,36,.5)}
.c-ro{--a1:#FFA3B8;--a2:#E23A62;--a3:rgba(251,113,133,.5)}

/* فهرست تیک‌دار */
.ticks{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.ticks li{display:flex;align-items:flex-start;gap:10px;color:var(--ink2);font-size:15.5px;line-height:1.8}
.ticks svg{flex:0 0 20px;width:20px;height:20px;margin-top:6px;stroke:var(--ok);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* دو ستون: تصویر + متن */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,42px);align-items:center}
.split--rev{grid-template-columns:.85fr 1.15fr}
.split h3{font-size:clamp(20px,2vw,26px);margin-bottom:10px}
.split p.lead{color:var(--ink2);font-size:16.5px;margin-bottom:16px}

/* ---------- ماکت‌های دست‌ساز ---------- */
.mock{
  padding:20px;border-radius:var(--r-l);border:1px solid var(--line2);
  background:linear-gradient(170deg,#140E28,#0B0918);box-shadow:0 40px 80px -44px #000;
}
.mock__bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--muted);font-size:13.5px}
.mock__bar b{color:var(--ink);font-family:var(--display);font-size:16px;font-weight:800}
.mock__bar .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.mock__bar .sp{margin-inline-start:auto}

/* برنامه در برابر عملکرد */
.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:12px;font-size:14px;color:var(--ink2)}
.bar__track{position:relative;height:30px;border-radius:9px;background:rgba(255,255,255,.05);overflow:hidden}
.bar__plan{position:absolute;inset-block:0;inset-inline-start:0;background:rgba(124,58,237,.28);
  border-inline-end:2px dashed rgba(122,162,255,.8)}
.bar__real{position:absolute;inset-block:5px;inset-inline-start:0;border-radius:7px;
  background:linear-gradient(90deg,#7C3AED,#F59E0B)}
.bar__val{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);font-size:12.5px;color:#E8E0FF}
.legend{display:flex;gap:16px;margin-top:14px;color:var(--muted);font-size:13px}
.legend i{display:inline-block;width:12px;height:8px;border-radius:3px;margin-inline-end:6px}

/* سطح تسلط */
.mastery{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px}
.mst{padding:12px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.mst b{display:block;font-size:14.5px;font-weight:700}
.mst span{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}
.mst__b{height:6px;margin-top:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.mst__b i{display:block;height:100%;border-radius:99px}

/* گواهینامه */
.cert{
  position:relative;padding:22px;border-radius:20px;text-align:center;
  background:linear-gradient(160deg,#1A1038,#0E0A1E);border:1px solid rgba(191,211,255,.28);
  box-shadow:0 30px 70px -40px #000;
}
.cert::before{content:'';position:absolute;inset:8px;border-radius:14px;border:1px dashed rgba(191,211,255,.22)}
.cert__seal{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;place-content:center;
  background:conic-gradient(from 210deg,#FBBF24,#FDE68A,#D97706,#FBBF24);color:#3B2503;
  box-shadow:0 12px 26px -12px rgba(251,191,36,.9)}
.cert__seal svg{width:26px;height:26px;stroke:#3B2503;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cert h4{font-size:19px}
.cert p{margin-top:4px;color:var(--ink2);font-size:14.5px}
.cert__id{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 14px;border-radius:999px;
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.32);color:#FFE2B0;
  font-size:13px;font-weight:700;direction:ltr;line-height:1.9}
.cert__qr{width:64px;height:64px;margin:12px auto 0;border-radius:10px;background:
  repeating-conic-gradient(#0B1020 0 25%,#E8E0FF 0 50%) 0 0/16px 16px;border:3px solid #E8E0FF}

/* گفتگو و تیکت */
.chat{display:grid;gap:10px}
.msg{max-width:86%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.8}
.msg--in{background:rgba(255,255,255,.06);border:1px solid var(--line);border-start-start-radius:6px}
.msg--out{margin-inline-start:auto;background:linear-gradient(120deg,rgba(124,58,237,.85),rgba(79,70,229,.85));
  border-start-end-radius:6px;color:#fff}
.msg--ai{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.3)}
.msg small{display:block;margin-bottom:3px;font-size:11.5px;color:var(--muted)}
.tick-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.tick-row span{padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink2);font-size:13px;line-height:1.9}

/* نقش‌ها */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.role{padding:20px;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(255,255,255,.065),rgba(255,255,255,.015))}
.role b{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:18px;font-weight:800}
.role b i{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue)}
.role p{margin-top:7px;color:var(--ink2);font-size:14.5px;line-height:1.8}

/* شبکه قابلیت‌ها */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.feat{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:14.5px;color:var(--ink2)}
.feat i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

/* ---------- سوالات ---------- */
.faq{display:grid;gap:10px;max-width:900px;margin:0 auto}
.faq details{padding:16px 20px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.035)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-size:17px;font-weight:800;
  display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-inline-start:auto;color:var(--cyan);font-size:20px;line-height:1}
.faq details[open] summary::after{content:'−'}
.faq p{margin-top:10px;color:var(--ink2);font-size:15.5px}

/* ---------- خرید و فوتر ---------- */
.buy{text-align:center;padding:clamp(34px,5vw,56px) clamp(20px,4vw,48px);border-radius:28px;
  background:linear-gradient(150deg,rgba(124,58,237,.18),rgba(79,70,229,.14));
  border:1px solid rgba(190,170,255,.28);box-shadow:0 40px 90px -50px rgba(124,58,237,.9)}
.buy h2{font-size:clamp(24px,3vw,38px);font-weight:900}
.buy p{margin:12px auto 22px;max-width:56ch;color:var(--ink2)}
.foot{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

/* ---------- حرکت و واکنش‌گرایی ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0ms)}
.js .reveal.is-in{opacity:1;transform:none}

@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr}
  .split,.split--rev{grid-template-columns:1fr}
  .g4,.feats{grid-template-columns:repeat(2,1fr)}
  .g3,.roles{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .g2,.g3,.g4,.roles,.feats{grid-template-columns:1fr}
  .bar{grid-template-columns:64px 1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}

/* نقشه اتصال: روی موبایل کوچک نشود */
.diagram{overflow-x:auto}
.diagram svg{min-width:640px}

/* ==========================================================================
   ۱۰. سناریوی دانشجو — ماکت‌های زنده (بدون تصویر؛ همه با HTML/CSS/SVG)
   حالت پیش‌فرضِ هر ماکت، حالت «کاملِ» آن است؛ انیمیشن فقط ساختِ آن را
   دوباره نشان می‌دهد. با prefers-reduced-motion همه‌چیز ثابت می‌ماند.
   ========================================================================== */

/* مسیر عمودی سناریو */
.journey{position:relative;display:grid;gap:clamp(26px,3.4vw,44px)}
.journey::before{
  content:'';position:absolute;top:26px;bottom:26px;inset-inline-start:33px;width:2px;
  background:linear-gradient(180deg,rgba(124,58,237,.05),rgba(124,58,237,.55) 8%,rgba(245,158,11,.5) 55%,rgba(79,70,229,.5) 92%,rgba(79,70,229,.05));
}
.jstep{position:relative;display:grid;grid-template-columns:68px 1fr;gap:clamp(12px,2vw,24px);align-items:start}
.jstep__num{
  position:relative;z-index:2;width:68px;height:68px;border-radius:22px;display:grid;
  place-items:center;place-content:center;font-family:var(--display);font-size:23px;font-weight:900;color:#fff;
  background:linear-gradient(150deg,var(--blue),var(--violet));transform:rotate(-8deg);
  box-shadow:0 0 0 7px rgba(124,58,237,.10),0 18px 36px -14px rgba(124,58,237,.95);
}
.jstep__num i{display:block;transform:rotate(8deg);font-style:normal}
.jstep__body{min-width:0;padding-top:4px}
.jstep__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:12px}
.jstep__head h3{font-size:clamp(20px,2.1vw,27px)}
.jstep__head span{color:var(--muted);font-size:14.5px}
.jstep__head em{font-style:normal;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.34);color:#FFE2B0;line-height:1.8}
.jstep__cols{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;align-items:start}

/* ---------- قاب پنجره ماکت ---------- */
.ui{
  border-radius:20px;overflow:hidden;border:1px solid var(--line2);
  background:linear-gradient(170deg,#130E26,#0B0918);box-shadow:0 34px 70px -40px #000;
}
.ui__bar{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.025);font-size:13.5px;color:var(--muted)}
.ui__bar b{color:var(--ink);font-family:var(--display);font-size:15px;font-weight:800}
.ui__dots{display:flex;gap:5px}
.ui__dots i{width:8px;height:8px;border-radius:50%;background:#372B58}
.ui__dots i:first-child{background:#FB7185}.ui__dots i:nth-child(2){background:#FBBF24}.ui__dots i:nth-child(3){background:#34D399}
.ui__sp{margin-inline-start:auto}
.ui__body{padding:16px}
.ui--plain{padding:16px}

/* ردیف/کارت‌های داخلی مشترک */
.row{display:flex;align-items:center;gap:10px}
.row + .row{margin-top:9px}
.pillbox{padding:10px 13px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.muted{color:var(--muted);font-size:13px}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.kpi div{padding:11px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.035);text-align:center}
.kpi b{display:block;font-family:var(--display);font-size:20px;font-weight:900;color:#E8E0FF}
.kpi span{display:block;font-size:12px;color:var(--muted)}

/* ---------- ۱. خرید دوره ---------- */
.buycard{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.buycard__thumb{height:96px;border-radius:14px;background:
  radial-gradient(60px 60px at 70% 30%,rgba(245,158,11,.5),transparent 70%),
  linear-gradient(150deg,#2A1B5C,#100B24);border:1px solid var(--line2);display:grid;place-items:center}
.buycard__thumb svg{width:38px;height:38px;stroke:#CFC2FF;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.price{font-family:var(--display);font-size:20px;font-weight:900;color:#E8E0FF}
.price s{color:var(--muted);font-size:14px;font-weight:600;margin-inline-start:8px}
.cta-mini{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;color:#fff;
  font-family:var(--display);font-size:14.5px;font-weight:800;background:var(--grad);
  box-shadow:0 14px 28px -14px rgba(124,58,237,.95)}
.granted{display:flex;align-items:center;gap:9px;margin-top:12px;padding:11px 14px;border-radius:13px;
  background:rgba(52,211,153,.10);border:1px solid rgba(52,211,153,.36);color:#B7F5DE;font-size:14px;font-weight:700}
.granted svg{width:19px;height:19px;stroke:var(--ok);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- ۲. مطالعه ---------- */
.reader{position:relative}
.reader p{font-size:14.5px;line-height:2.1;color:var(--ink2)}
.mark{position:relative;display:inline;padding:1px 2px;border-radius:4px;background:rgba(251,191,36,.18);
  box-shadow:inset 0 -2px 0 rgba(251,191,36,.55)}
.reader__note{margin-top:12px;padding:11px 13px;border-radius:13px;border:1px dashed rgba(251,191,36,.45);
  background:rgba(251,191,36,.07);color:#FFE7B4;font-size:13.5px}
.timer{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;font-size:22px;color:#E8E0FF}
.timer .dg{display:inline-block;width:.62em;overflow:hidden;height:1.15em;line-height:1.15em;vertical-align:-.16em}
.timer .dg i{display:block;font-style:normal}
.progress{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7C3AED,#F59E0B)}

/* ---------- ۳. تست ---------- */
.q{font-size:15px;color:var(--ink);line-height:1.9}
.opt{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:12px;margin-top:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:14px;color:var(--ink2)}
.opt b{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;place-content:center;
  background:rgba(255,255,255,.07);font-size:12.5px;color:#CFC2FF}
.opt--ok{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.12);color:#CFF7E7}
.opt--ok b{background:var(--ok);color:#04231A}
.opt--no{border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.10);color:#FFD3DB}
.ring{display:block;width:104px;height:104px;margin:0 auto}
.ring circle{fill:none;stroke-linecap:round}
.ring .bgc{stroke:rgba(255,255,255,.08);stroke-width:10}
.ring .fg{stroke:url(#rg);stroke-width:10;stroke-dasharray:283;stroke-dashoffset:78;transform:rotate(-90deg);transform-origin:50% 50%}
.ring-lbl{text-align:center;margin-top:-64px;margin-bottom:12px}
.ring-lbl b{display:block;font-family:var(--display);font-size:24px;font-weight:900;color:#E8E0FF}
.ring-lbl span{display:block;margin-top:40px;font-size:12px;color:var(--muted)}

/* ---------- ۴. مرور ---------- */
.flip{perspective:900px}
.flip__card{position:relative;height:132px;border-radius:16px;transform-style:preserve-3d}
.flip__face{position:absolute;inset:0;border-radius:16px;padding:16px;display:grid;align-content:center;gap:6px;
  border:1px solid var(--line);background:rgba(255,255,255,.045);backface-visibility:hidden}
.flip__face small{color:var(--muted);font-size:12px}
.flip__face b{font-size:16px;font-weight:700;color:var(--ink)}
.flip__face--b{transform:rotateY(180deg);background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.4)}
.quality{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.quality span{padding:9px 6px;border-radius:12px;text-align:center;font-size:13px;font-weight:700;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink2)}
.quality .q1{color:#FFD3DB;border-color:rgba(251,113,133,.35)}
.quality .q2{color:#FFE7B4;border-color:rgba(251,191,36,.35)}
.quality .q3{color:#CFF7E7;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.12)}
.quality .q4{color:#FFE2B0;border-color:rgba(245,158,11,.35)}
.curve{width:100%;height:118px;display:block}
.curve .dot{fill:#F59E0B}

/* ---------- ۵. خلاصه ---------- */
.type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:100%}
.sumcard{padding:13px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.sumcard h4{font-size:15px;margin-bottom:6px}
.sumcard p{font-size:13.5px;color:var(--ink2);line-height:1.9}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tagrow span{padding:4px 11px;border-radius:999px;font-size:12px;line-height:1.9;
  border:1px solid rgba(79,70,229,.35);background:rgba(79,70,229,.12);color:#E6D4FF}

/* ---------- ۷. انتخاب رشته ---------- */
.choice{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:14px}
.choice + .choice{margin-top:8px}
.choice u{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;place-content:center;
  text-decoration:none;background:rgba(255,255,255,.07);font-size:12.5px;color:#CFC2FF}
.choice em{font-style:normal;color:var(--muted);font-size:12.5px;display:block}
.risk{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.8}
.risk--ok{background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.4);color:#B7F5DE}
.risk--mid{background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.4);color:#FFE7B4}
.risk--bad{background:rgba(251,113,133,.14);border:1px solid rgba(251,113,133,.4);color:#FFD3DB}

/* ---------- ۸. گواهینامه ---------- */
.cert{position:relative;overflow:hidden}
.cert__shine{position:absolute;top:-40%;bottom:-40%;width:70px;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);inset-inline-start:-120px}

/* ---------- انیمیشن‌ها ---------- */
@keyframes j-pulse{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(8px)}}
@keyframes j-grow{from{width:0}}
@keyframes j-sweep{0%{clip-path:inset(0 100% 0 0)}60%,100%{clip-path:inset(0 0 0 0)}}
@keyframes j-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes j-fade{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes j-ring{from{stroke-dashoffset:283}}
@keyframes j-flip{0%,42%{transform:rotateY(0)}58%,100%{transform:rotateY(180deg)}}
@keyframes j-type{from{width:0}to{width:100%}}
@keyframes j-tick{from{transform:translateY(0)}to{transform:translateY(-90%)}}
@keyframes j-shine{0%{inset-inline-start:-120px}60%,100%{inset-inline-start:120%}}
@keyframes j-dot{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes j-press{0%,70%,100%{transform:none;box-shadow:0 14px 28px -14px rgba(124,58,237,.95)}
  80%{transform:translateY(2px) scale(.97);box-shadow:0 8px 16px -10px rgba(124,58,237,.95)}}

.js .jstep.is-in .anim-grow{animation:j-grow 1.1s cubic-bezier(.2,.8,.3,1) both}
.js .jstep.is-in .anim-sweep{animation:j-sweep 1.4s ease-out both}
.js .jstep.is-in .anim-pop{animation:j-pop .7s cubic-bezier(.2,1.3,.4,1) both}
.js .jstep.is-in .anim-fade{animation:j-fade .8s ease-out both}
.js .jstep.is-in .ring .fg{animation:j-ring 1.6s cubic-bezier(.3,.8,.3,1) both}
.js .jstep.is-in .flip__card{animation:j-flip 6s ease-in-out 1.2s infinite}
.js .jstep.is-in .anim-type{animation:j-type 2.4s steps(42) .4s both}
.js .jstep.is-in .timer .dg i{animation:j-tick 10s steps(10) infinite}
.js .jstep.is-in .cert__shine{animation:j-shine 4.5s ease-in-out 1s infinite}
.js .jstep.is-in .cta-mini{animation:j-press 4s ease-in-out 1s infinite}
.js .jstep.is-in .d1{animation-delay:.12s}
.js .jstep.is-in .d2{animation-delay:.26s}
.js .jstep.is-in .d3{animation-delay:.4s}
.js .jstep.is-in .d4{animation-delay:.54s}

@media (max-width:820px){
  .jstep{grid-template-columns:52px 1fr}
  .jstep__num{width:52px;height:52px;border-radius:17px;font-size:18px}
  .journey::before{inset-inline-start:25px}
  .jstep__cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .js .jstep.is-in .anim-grow,.js .jstep.is-in .anim-sweep,.js .jstep.is-in .anim-pop,
  .js .jstep.is-in .anim-fade,.js .jstep.is-in .ring .fg,.js .jstep.is-in .flip__card,
  .js .jstep.is-in .anim-type,.js .jstep.is-in .timer .dg i,.js .jstep.is-in .cert__shine,
  .js .jstep.is-in .cta-mini{animation:none}
}

/* ==========================================================================
   ۱۱. اجزای مخصوص آپدیت مارک — همه دست‌ساز، بدون تصویر
   ========================================================================== */

/* نشان محصول در سربرگ (SVG دست‌ساز) */
.mark{position:relative;display:grid;place-items:center;place-content:center;
  border-radius:30px;transform:rotate(-6deg);
  background:linear-gradient(155deg,#2A1B5C,#100B24);border:1px solid rgba(190,170,255,.34);
  box-shadow:0 26px 60px -18px rgba(124,58,237,.85),0 0 0 8px rgba(124,58,237,.07)}
.mark::before{content:'';position:absolute;inset:4px 4px 52% 4px;border-radius:26px 26px 30px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent)}
.mark svg{position:relative;width:64%;height:64%;transform:rotate(6deg)}

/* تغییر قیمت: قبلی ← جدید */
.chg{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center}
.chg__box{padding:12px 10px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.chg__box small{display:block;font-size:12px;color:var(--muted)}
.chg__box b{display:block;margin-top:3px;font-family:var(--display);font-size:19px;font-weight:900}
.chg__old b{color:#C9C2E0;text-decoration:line-through;text-decoration-color:rgba(251,113,133,.7)}
.chg__new{border-color:rgba(16,185,129,.42);background:rgba(16,185,129,.10)}
.chg__new b{color:#B7F5DE}
.chg__arw{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;place-content:center;
  background:linear-gradient(150deg,#C4A6FF,#5B21B6);box-shadow:0 10px 22px -10px rgba(124,58,237,.9)}
.chg__arw svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.who{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13.5px;color:var(--ink2)}
.who i{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;place-content:center;
  background:linear-gradient(150deg,#A5B4FC,#3730A3);color:#fff;font-style:normal;font-size:12px;font-weight:700}

/* جدول تاریخچه */
.log{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:13.5px}
.log th{color:var(--muted);font-size:12px;font-weight:600;text-align:right;padding:0 10px 2px}
.log td{background:rgba(255,255,255,.035);border-block:1px solid var(--line);padding:9px 10px;color:var(--ink2)}
.log td:first-child{border-inline-start:1px solid var(--line);border-start-start-radius:11px;border-end-start-radius:11px;color:var(--ink);font-weight:600}
.log td:last-child{border-inline-end:1px solid var(--line);border-start-end-radius:11px;border-end-end-radius:11px}
.log s{color:#C9C2E0;opacity:.75}
.log em{font-style:normal;color:#B7F5DE;font-weight:700}

/* ماکت صفحه محصول */
.prod{display:grid;grid-template-columns:96px 1fr;gap:13px;align-items:start}
.prod__img{height:116px;border-radius:14px;border:1px solid var(--line2);display:grid;place-items:center;place-content:center;
  background:radial-gradient(70px 70px at 60% 35%,rgba(245,158,11,.28),transparent 70%),linear-gradient(150deg,#2A1B5C,#100B24)}
.prod__img svg{width:40px;height:40px;stroke:#CFC2FF;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.prod h4{font-size:16.5px}
.prod__stars{color:#F59E0B;font-size:13px;letter-spacing:2px}
.prod__price{font-family:var(--display);font-size:20px;font-weight:900;color:#E8E0FF;margin-top:4px}
.prod__buy{display:inline-block;margin-top:10px;padding:9px 20px;border-radius:12px;background:#151024;
  border:1px solid var(--line2);color:var(--ink2);font-size:13.5px;font-weight:700}

/* خط تاریخ بروزرسانی — همان چیزی که افزونه چاپ می‌کند */
.udm{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:7px 14px;border-radius:12px;
  background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.42);
  color:#E4DBFF;font-size:13.5px;font-weight:600;line-height:1.9}
.udm svg{width:16px;height:16px;stroke:#F59E0B;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.udm b{color:#FFE2B0;font-weight:800}
.udm--rounded{border-radius:999px}
.udm--minimal{background:none;border-color:transparent;padding-inline:0}
.udm--dark{background:#100B24;border-color:rgba(190,170,255,.3)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800;
  background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.45);color:#B7F5DE;line-height:1.85}
.badge--week{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.45);color:#FFE2B0}

/* سه حالت نمایش: متن‌ها روی هم و یکی‌یکی دیده می‌شوند */
.modes3{position:relative;height:34px;margin-top:4px}
.modes3 span{position:absolute;inset-inline-start:0;top:0;white-space:nowrap}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.seg span{padding:5px 13px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--muted)}
.seg span.on{background:linear-gradient(120deg,#7C3AED,#4F46E5);color:#fff}

/* کش و AJAX */
.cache{display:grid;grid-template-columns:1fr 34px 1fr;gap:10px;align-items:center;text-align:center}
.cache__pane{padding:13px 11px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.cache__pane small{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.cache__stale{border-color:rgba(251,113,133,.38);background:rgba(251,113,133,.08)}
.cache__stale b{color:#FFD3DB;text-decoration:line-through}
.cache__fresh{border-color:rgba(16,185,129,.42);background:rgba(16,185,129,.10)}
.cache__fresh b{color:#B7F5DE}
.cache__pane b{font-family:var(--display);font-size:15px;font-weight:800}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(160,140,255,.25);
  border-top-color:#F59E0B;margin:0 auto}

/* کد Schema */
.code{margin-top:4px;padding:14px;border-radius:14px;border:1px solid var(--line);background:#0A0716;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:2;
  direction:ltr;text-align:left;color:#B9AEDE;overflow:hidden;position:relative}
.code .k{color:#C4A6FF}
.code .v{color:#FFD98A}
.code .hl{display:inline-block;padding:0 6px;border-radius:6px;background:rgba(245,158,11,.16);
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.4)}
.code__scan{position:absolute;top:0;bottom:0;width:80px;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.10),transparent);inset-inline-start:-100px}

/* نمودار ۷ روز */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:118px;margin-top:6px}
.days div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.days i{display:block;width:100%;border-radius:9px 9px 4px 4px;
  background:linear-gradient(180deg,#F59E0B,#7C3AED);box-shadow:0 8px 20px -10px rgba(124,58,237,.9)}
.days span{font-size:11.5px;color:var(--muted)}

/* محصولات قدیمی */
.stale{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.stale a,.stale div{display:block;padding:12px 10px;border-radius:14px;text-align:center;
  border:1px solid var(--line);background:rgba(255,255,255,.035)}
.stale b{display:block;font-family:var(--display);font-size:21px;font-weight:900}
.stale span{display:block;font-size:12px;color:var(--muted)}
.stale .s7 b{color:#FFE2B0}.stale .s30 b{color:#FFC0CB}.stale .s90 b{color:#FF9AAE}

/* قوانین نمایش */
.rule{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:13.5px;color:var(--ink2)}
.rule + .rule{margin-top:8px}
.rule .sw{margin-inline-start:auto;width:38px;height:21px;border-radius:99px;position:relative;
  background:linear-gradient(120deg,#7C3AED,#4F46E5)}
.rule .sw::after{content:'';position:absolute;top:3px;inset-inline-end:3px;width:15px;height:15px;border-radius:50%;background:#fff}
.rule .sw--off{background:rgba(255,255,255,.12)}
.rule .sw--off::after{inset-inline-end:auto;inset-inline-start:3px;background:#8C82AE}

/* جایگاه‌ها */
.spots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.spot{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:11px;font-size:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink2)}
.spot i{width:6px;height:6px;border-radius:50%;background:#10B981;box-shadow:0 0 8px #10B981}
.spot--no{opacity:.55}
.spot--no i{background:#FB7185;box-shadow:0 0 8px #FB7185}

/* انیمیشن‌های مخصوص */
@keyframes u-swap{0%,45%{opacity:0;transform:translateY(6px)}55%,100%{opacity:1;transform:none}}
@keyframes u-spin{to{transform:rotate(360deg)}}
@keyframes u-scan{0%{inset-inline-start:-100px}70%,100%{inset-inline-start:110%}}
@keyframes u-bars{from{height:0}}
@keyframes u-cycle1{0%,26%{opacity:1}34%,100%{opacity:0}}
@keyframes u-cycle2{0%,30%{opacity:0}38%,60%{opacity:1}68%,100%{opacity:0}}
@keyframes u-cycle3{0%,64%{opacity:0}72%,94%{opacity:1}100%{opacity:0}}

.js .jstep.is-in .anim-swap{animation:u-swap 1.6s ease-out both}
.js .jstep.is-in .spin{animation:u-spin 1.1s linear infinite}
.js .jstep.is-in .code__scan{animation:u-scan 3.6s ease-in-out .6s infinite}
.js .jstep.is-in .days i{animation:u-bars 1.1s cubic-bezier(.2,.8,.3,1) both}
.js .jstep.is-in .modes3 span:nth-child(1){animation:u-cycle1 7.5s linear infinite}
.js .jstep.is-in .modes3 span:nth-child(2){animation:u-cycle2 7.5s linear infinite}
.js .jstep.is-in .modes3 span:nth-child(3){animation:u-cycle3 7.5s linear infinite}

@media (prefers-reduced-motion:reduce){
  .js .jstep.is-in .anim-swap,.js .jstep.is-in .spin,.js .jstep.is-in .code__scan,
  .js .jstep.is-in .days i,.js .jstep.is-in .modes3 span{animation:none}
  .modes3 span:nth-child(2),.modes3 span:nth-child(3){opacity:0}
}
@media (max-width:820px){
  .chg,.cache{grid-template-columns:1fr}
  .stale,.spots{grid-template-columns:1fr}
}

/* اندازه قطعی نشان‌ها (درصد روی SVG داخل گرید قابل اتکا نیست) */
.hero__mark.mark svg{width:78px;height:78px}
.brand__mark.mark svg{width:35px;height:35px}

/* ===== اصلاحات نسخه موبایل — سلطان وب ===== */
@media (max-width:1080px){
  /* منو روی موبایل پنهان است؛ دکمه خرید باید به لبه چپ هدر بچسبد */
  .head .btn{margin-inline-start:auto}
}
@media (max-width:860px){
  /* فقط کارت‌های «آیکون + عنوان + توضیح» وسط‌چین می‌شوند */
  .card{text-align:center}
  .card .ico,.card .ico3d{margin-inline:auto}
  .card .tick-row{justify-content:center}
  /* نوار عنوان ماکت‌ها به‌جای سرریز، بشکند */
  .mock__bar,.ui__bar{flex-wrap:wrap;row-gap:6px}
  .ui__bar .ui__sp,.mock__bar .sp{margin-inline-start:0}
}

/* --- اختصاصی آپدیت مارک --- */
@media (max-width:640px){
  /* جدول چهارستونی تاریخچه روی موبایل سرریز می‌کرد */
  .log{font-size:11.5px}
  .log td{padding:7px 6px}
  .log th{padding:0 6px 2px;font-size:11px}
}