/* ==========================================================
   Home page — loaded on the front page only. Mobile-first. Brand D.
   0.8.0: the page opens on the dark stage (header + hero + numbers). Shared pieces (bento, reviews, price card,
   check list, «what we do not do») live in main.css because /mts uses them too.
   ========================================================== */

.home .sec{padding-block:48px}
@media(min-width:980px){.home .sec{padding-block:92px}}
.home .hm-yt,.home .hm-posts{padding-top:0}

/* ---------- 00 stage ---------- */
.hm-in{display:grid;gap:28px;padding-block:20px 34px}
@media(min-width:980px){.hm-in{grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;padding-block:56px 76px}}
.hm-txt .ix{margin:0}
.hm-h{margin-top:16px;font-size:clamp(42px,12.4vw,60px);font-weight:900;letter-spacing:-.04em;line-height:1.16}
@media(min-width:980px){.hm-h{font-size:clamp(50px,4.9vw,74px);line-height:1.12;white-space:nowrap}}
.hm-ld{margin-top:16px;max-width:46ch;font-size:16px;line-height:1.95;color:var(--ink2)}
@media(min-width:980px){.hm-ld{font-size:18px}}
.hm-act{display:flex;flex-direction:column;gap:10px;margin-top:24px}
@media(min-width:480px){.hm-act{flex-direction:row;flex-wrap:wrap}}
/* the price, right under the buttons */
.hm-px{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;margin-top:18px;font-size:13.5px;line-height:1.8;color:var(--ink3)}
.hm-px b{margin-inline-end:14px;font-family:var(--sans);font-size:16px;font-weight:900;color:#fff}
.hm-px b .or{font-weight:500;color:var(--ink2)} /* 0.8.1: «۱۹۰ میلیون تومان یا ۱٬۰۰۰ USDT» */
.hm-px span+span::before{content:"";display:inline-block;width:1px;height:12px;margin-inline:11px;background:var(--line3);vertical-align:-1px}

/* numbers: a strip closing the stage */
.proof{border-top:1px solid var(--line)}
.proof-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin-block:0}
.proof-g div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding-block:18px}
.proof-g dd{margin:0;font-size:clamp(30px,8.6vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.proof-g dt{font-size:13px;line-height:1.6;color:var(--ink3)}
@media(min-width:760px){.proof-g{display:flex}.proof-g div{flex:1;padding-block:26px}}

/* ---------- trade replay: a card on the stage ---------- */
.rp{margin:0;border-radius:22px;overflow:hidden;background:var(--card);border:1px solid var(--line);
  box-shadow:0 30px 60px rgba(0,0,0,.35)}
.rp-h{display:flex;align-items:center;gap:10px;padding:14px 16px 4px;min-height:48px}
.rp-id{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;color:#fff}
.rp-dot{width:7px;height:7px;border-radius:50%;background:var(--up)}
.rp-k{font-size:12.5px;color:var(--ink3)}
.rp-k .mn{font-size:12px;letter-spacing:.08em}
.rp-again{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:0;color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.rp-again:hover{background:rgba(255,255,255,.14)}
.rp-again svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rp-h .rp-k{margin-inline-start:auto}
/* 0.8.1: the header stays on one line on phones — labels never wrap; under 480px the replay button is icon-only */
.rp-id,.rp-k{white-space:nowrap}
.rp-id{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rp-again{flex:none}
@media(max-width:479px){.rp-again{width:44px;padding:0;justify-content:center}.rp-again span{display:none}}
@media(max-width:339px){.rp-h .rp-k{display:none}}
.rp-svg{display:block;width:100%;height:auto;padding:0 8px}
.rp-px{font-family:var(--mono);font-size:10px;letter-spacing:.02em}
.rp-res{font-family:var(--mono);font-size:9.5px;font-weight:700}
.rp-leg{display:flex;gap:14px;padding:6px 16px 12px;font-size:12px;color:var(--ink3)}
.rp-leg .e{color:#fff}
.rp-leg .s{color:var(--down)}
.rp-leg .t{color:var(--up)}
.rp-leg .rr{margin-left:auto}
.rp-cap{padding:12px 16px 14px;border-top:1px solid var(--line);font-size:13px;line-height:1.85;color:var(--ink3)}
.rp-cap a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}

/* motion: candles one by one, then the levels, then the result */
@keyframes rp-in{from{opacity:0}}
@keyframes rp-rise{from{opacity:0;transform:translateY(6px)}}
.rp-cd{animation:rp-in .18s linear var(--d,0s) backwards}
.rp-lv{animation:rp-in .45s ease-out var(--d,0s) backwards}
.rp-win{animation:rp-rise .45s cubic-bezier(.2,.8,.25,1) var(--d,0s) backwards}
.rp.rp-stop .rp-cd,.rp.rp-stop .rp-lv,.rp.rp-stop .rp-win{animation:none;opacity:0}

/* ---------- 01 path picker: three levels. Without JS the three panels simply follow each other. ---------- */
.pick{margin-top:26px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-l)}
@media(min-width:760px){.pick{padding:32px}}
.pick-tabs{display:flex;flex-direction:column;gap:4px;margin-bottom:22px;padding:5px;background:var(--bg);border-radius:18px}
@media(min-width:760px){.pick-tabs{display:inline-flex;flex-direction:row;margin-bottom:30px}}
.pick-tabs button{min-height:48px;padding:0 18px;border:0;border-radius:14px;background:transparent;color:var(--ink2);
  font:inherit;font-size:14.5px;font-weight:700;text-align:start;cursor:pointer;transition:background-color .18s,color .18s}
.pick-tabs button:hover{color:var(--ink)}
.pick-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.pick-p{display:grid;gap:22px}
.pick-p+.pick-p{margin-top:28px;padding-top:28px;border-top:1px solid var(--line2)}
.pick.js .pick-p+.pick-p{margin-top:0;padding-top:0;border-top:0}
@media(min-width:860px){.pick-p{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}
.pick-t>span.k{display:block;font-size:12px;letter-spacing:.08em;color:var(--ink3);text-align:end}
.pick-t h3{margin-top:4px;font-size:clamp(24px,6.6vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.35}
.pick-t p{margin-top:10px;font-size:15.5px;line-height:1.95;color:var(--ink2)}
.pick-t .btn{margin-top:20px}
.pick-s{display:grid;gap:8px}
.pick-s li{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--bg);border-radius:16px}
.pick-s .n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--card);
  border:1px solid var(--line3);font-size:16px;font-weight:900;color:var(--blue)}
.pick-s .x{display:flex;flex-direction:column;line-height:1.7}
.pick-s .x b{font-size:15px;font-weight:700}
.pick-s .x span{font-size:13.5px;color:var(--ink2)}

/* ---------- 02 COT card inside the bento ---------- */
.bx-cot{display:grid;gap:22px}
@media(min-width:860px){.bx-cot{grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}}
.bx-cot h3{font-size:clamp(20px,5.2vw,26px)}
.bx-cot p{margin-top:8px}
.bx-cot .btn{margin-top:18px}
.hm-mk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hm-mk li{padding:9px 0;border-radius:10px;background:var(--bg);text-align:center;font-size:12px;letter-spacing:.03em;color:var(--ink2)}
.hm-mk li:nth-last-child(-n+3){background:var(--tint);color:var(--blue-d)}

/* ---------- 07 YouTube ---------- */
.bx-yt{display:grid;gap:18px}
@media(min-width:860px){.bx-yt{grid-template-columns:1.5fr .5fr;gap:40px;align-items:center}}
.bx-yt p{margin-top:8px}
.yt-act{display:flex;flex-direction:column;gap:10px}