/* PeyGrid public site (docs/accounts/PLAN.md §8). Dark identity shared with the worker app;
   logical properties throughout so the Persian (rtl) page mirrors without a second sheet. */
@font-face {
  font-family: "Archivo";
  src: url(/site/archivo.woff2?v=e2448d05) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url(/site/vazirmatn.woff2?v=a501289a) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0D1117;
  --bg-deep: #090C11;
  --surface: #151B23;
  --raised: #1C2430;
  --line: #263140;
  --line-hi: #35445A;
  --text: #E6EDF3;
  --muted: #9DA9B6;
  --green: #42B883;
  --green-hi: #73D6AA;
  --hi: #F2C230;
  --danger: #FF8A8E;
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --gutter: 16px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
:root[lang="fa"] {
  --display: "Vazirmatn", Tahoma, sans-serif;
  --body: "Vazirmatn", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 144px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--body);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
a { color: var(--green-hi); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--green); color: var(--bg); }
input, button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }
p { margin: 0; }
code, bdi[dir="ltr"], .mono { font-family: var(--mono); }
code { font-size: .875em; overflow-wrap: anywhere; color: var(--text); background: var(--raised); border-radius: 6px; padding: .1em .4em; }
html { scrollbar-color: var(--line-hi) var(--bg); }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 20;
  background: var(--hi); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-weight: 600;
}
.skip:focus { top: 12px; }
.skip:hover { color: var(--bg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 10px;
  background: var(--green); color: #07130D;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--green-hi); color: #07130D; }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: progress; background: var(--line-hi); color: var(--muted); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: .9375rem; border-radius: 8px; }
.btn-lg { min-height: 60px; padding: 0 30px; font-size: 1.125rem; border-radius: 12px; }
.btn.off { background: var(--raised); color: var(--muted); }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.arrow { font-weight: 600; text-decoration: none; }
.arrow::after { content: "→"; display: inline-block; margin-inline-start: .45em; transition: transform .25s var(--ease); }
[dir="rtl"] .arrow::after { content: "←"; }
.arrow:hover::after { transform: translateX(4px); }
[dir="rtl"] .arrow:hover::after { transform: translateX(-4px); }

/* ---- Top bar ---- */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--top-bg);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-block-end: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 1.1875rem/1 "Archivo", var(--body); letter-spacing: .01em; margin-inline-end: auto; }
.brand:hover { color: var(--text); }
.top-nav { display: none; gap: 28px; margin-inline-end: 12px; }
.top-nav a { color: var(--muted); text-decoration: none; font-size: .9375rem; }
.top-nav a:hover { color: var(--text); }
.lang { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-deep); }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; min-width: 40px; padding: 0 9px; border-radius: 6px;
  color: var(--muted); font-size: .8125rem; font-weight: 600; text-decoration: none;
}
.lang a[lang="en"] { font-family: "Archivo", var(--body); letter-spacing: .04em; }
.lang a[lang="fa"] { font-family: Tahoma, "Segoe UI", sans-serif; }
:root[lang="fa"] .lang a[lang="fa"] { font-family: "Vazirmatn", Tahoma, sans-serif; }
.lang a:hover { color: var(--text); }
.lang a[aria-current="page"] { background: var(--raised); color: var(--text); }

/* ---- Hero ---- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 32px 28px; }
.hero-sky {
  position: absolute; z-index: -2; inset: -30% -30% auto auto; width: 120%; height: 130%;
  background:
    radial-gradient(closest-side, var(--sky-green), transparent) 70% 30% / 60% 60% no-repeat,
    radial-gradient(closest-side, var(--sky-blue), transparent) 30% 70% / 70% 70% no-repeat;
  animation: sky 26s ease-in-out infinite alternate;
  pointer-events: none;
}
[dir="rtl"] .hero-sky { inset: -30% auto auto -30%; scale: -1 1; }
@keyframes sky { to { transform: translate3d(-9%, 6%, 0) scale(1.08); } }
.mesh {
  position: absolute; z-index: -1; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-height: 980px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
  animation: drift 48s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift { to { transform: translate3d(-18px, 12px, 0); } }
.mesh .links { fill: none; stroke: var(--mesh-link); stroke-width: 1; }
.mesh circle { transform-box: fill-box; transform-origin: center; }
.mesh .n { fill: var(--mesh-node); --o: .75; animation: wake 1.6s var(--ease) var(--d, 0s) both; }
.mesh .n.on { fill: var(--green); --o: 1; }
.mesh .n.on.tw { animation: wake 1.6s var(--ease) var(--d, 0s) both, twinkle var(--p, 6s) ease-in-out calc(var(--d, 0s) + 1.6s) infinite; }
.mesh .n.mine { fill: var(--hi); --o: 1; r: 4.4px; }
.mesh .halo { fill: var(--green); opacity: 0; animation: halo 4.8s ease-out var(--d, 0s) infinite; }
.mesh .halo.mine { fill: var(--hi); }
.mesh .pk { fill: var(--green-hi); opacity: 0; animation: travel var(--t, 4s) linear var(--d, 0s) infinite; }
@keyframes wake {
  0% { opacity: 0; transform: scale(.2); }
  45% { opacity: 1; transform: scale(1.9); }
  100% { opacity: var(--o); transform: scale(1); }
}
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes halo { 0% { opacity: .5; transform: scale(.4); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes travel {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)); }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)); }
}
.hero.off .hero-sky, .hero.off .mesh, .hero.off .mesh * { animation-play-state: paused; }

.hero-in { position: relative; }
.hero-photo { position: relative; margin: 24px 0 0; isolation: isolate; }
.gpu-stage { aspect-ratio: 4 / 3; }
.gpu-stage img, .gpu-stage canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gpu-stage img { transition: opacity .4s; object-position: 50% calc(50% - 36px); }
.gpu-stage.gpu-ready img { opacity: 0; }
.gpu-stage canvas { z-index: -1; }
.gpu-stage .photo-counter { z-index: 1; }
.photo-counter { position: absolute; inset-inline-start: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 10px 12px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--surface); color: var(--text); }
.flow-currency { color: var(--muted); font: 12px var(--mono); }
.flow-amount { display: inline-block; font: 20px var(--mono); }
.flow-caption { display: block; color: var(--muted); font-size: .75rem; }
.wallet, .card { box-shadow: 0 8px 24px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .04); }
@media (max-width: 899px) {
  /* Phones: the card sits under the headline; gpu3d.js turns it gently with the scroll. */
  .hero-in { display: flex; flex-direction: column; }
  .hero-copy { display: contents; }
  .gpu-track { order: 1; }
  .gpu-stage { height: 310px; width: 100%; aspect-ratio: auto; }
  .photo-counter { padding: 6px 10px; }
  .flow-amount { font-size: 16px; }
  .flow-caption { font-size: .6875rem; }
  .hero-copy > .wallet { order: 2; }
  .hero-alt { order: 3; }
}
@media (min-width: 900px) {
  .hero { --pin: calc(104px + 2vh); --stage-h: clamp(420px, calc(100vh - var(--pin) - 4vh), 820px); }
  .hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(12px, 2.5vw, 40px); align-items: center; }
  .hero-photo { margin: 0; }
  .gpu-stage { aspect-ratio: auto; height: clamp(380px, 44vw, 600px); }
  .hero h1 { font-size: clamp(1.875rem, 3.4vw, 3.25rem); }
}
@media (min-width: 1100px) { .hero { --pin: calc(61px + 3vh); } }
.hero h1 {
  font-weight: 800; font-stretch: 108%;
  font-size: clamp(1.875rem, 3.4vw, 3.25rem);
  line-height: 1.02; letter-spacing: -.028em;
}
.hero h1 span { display: block; }
.hero h1 .lit { color: var(--green-hi); }
.wallet.busy::after { content: ''; display: block; height: 12px; margin-block-start: 12px; border-radius: 6px; background: var(--line-hi); animation: loading 1s ease-in-out infinite alternate; }
@keyframes loading { to { opacity: .35; transform: scaleX(.85); } }
:root[lang="fa"] .hero h1 { font-weight: 850; letter-spacing: 0; line-height: 1.35; font-size: clamp(1.875rem, 3.2vw, 3rem); }
.lede { margin-block-start: 22px; max-width: 46ch; color: var(--soft-text); font-size: clamp(1.0625rem, 1rem + .15vw, 1.125rem); line-height: 1.6; }

.wallet {
  margin-block-start: 34px; max-width: 640px;
  padding: 18px; border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.wallet-label { display: block; font: 700 1.0625rem/1.3 var(--display); margin-block-end: 12px; }
.wallet-row { display: flex; gap: 10px; }
.wallet-input {
  flex: 1; min-width: 0; min-height: 50px; padding: 0 14px;
  border: 1px solid var(--line-hi); border-radius: 10px; background: var(--bg-deep);
  font-family: var(--mono); font-size: .9375rem; letter-spacing: .01em; caret-color: var(--hi);
  transition: border-color .2s;
}
.wallet-input::placeholder { color: var(--muted); opacity: 1; font-family: var(--body); }
.wallet-input:hover { border-color: var(--line-hi); }
.wallet-input:focus { outline: 2px solid var(--green); outline-offset: 3px; border-color: var(--green); }
.wallet-input[aria-invalid="true"] { border-color: var(--danger); }
[dir="rtl"] .wallet-input:placeholder-shown { direction: rtl; }
.wallet .btn { min-height: 50px; min-width: 96px; }
.wallet.busy .btn { background: var(--line-hi); color: var(--muted); }
.hint { color: var(--muted); font-size: .875rem; line-height: 1.5; margin-block-start: 10px; }
.hero-alt { margin-block-start: 22px; font-size: .9375rem; }

/* ---- Wallet result ---- */
.result { margin-block-start: 28px; }
.result:empty, .result:not(:has(> :not([hidden]))) { margin-block-start: 0; }
.msg {
  max-width: 640px; padding: 14px 16px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
}
.msg.error { border-color: rgba(255, 138, 142, .45); color: var(--danger); }
.msg strong { display: block; font-family: var(--display); font-size: 1.0625rem; margin-block-end: 2px; color: var(--text); }
.card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 18px;
  animation: rise .6s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-block-end: 14px; border-block-end: 1px solid var(--line); }
.addr { font-size: .8125rem; color: var(--muted); overflow-wrap: anywhere; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green);  }
.pulse.tick { animation: beat 1.4s ease-out; } /* once per refresh */
@keyframes beat { 50% { opacity: .4; transform: scale(.8); } }
.card-main { display: grid; gap: 20px; padding-block: 20px; border-block-end: 1px solid var(--line); }
.label { font: 600 .8125rem/1.2 var(--body); color: var(--muted); letter-spacing: .02em; }
.big { margin-block-start: 6px; font: 800 clamp(1.875rem, 3vw, 2.75rem)/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.big .unit { font-size: clamp(.9375rem, .8rem + .6vw, 1.375rem); font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.ledger { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-content: start; }
.ledger div { display: flex; flex-direction: column; gap: 2px; padding-block: 9px; border-block-end: 1px dashed var(--line); }
.ledger dt { font-size: .8125rem; color: var(--muted); }
.ledger dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card-parts { display: grid; gap: 24px; padding-block-start: 20px; }
.part-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.part h3 { font-size: 1.0625rem; font-weight: 700; }
.part-note { font-size: .8125rem; color: var(--muted); }
.pc-table { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.pc-table th { text-align: start; font-weight: 600; font-size: .75rem; color: var(--muted); padding: 0 0 8px; }
.pc-table th:last-child, .pc-table td:last-child { text-align: end; }
.pc-table td { padding: 10px 0; border-block-start: 1px solid var(--line); vertical-align: middle; }
.pc-table td + td, .pc-table th + th { padding-inline-start: 12px; }
.pc-table tfoot th, .pc-table tfoot td { padding-block: 12px 0; border-block-start: 1px solid var(--line-hi); font-size: .9375rem; color: var(--text); font-weight: 700; }
.pc-table .empty td { color: var(--muted); text-align: start; }
.state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.state.on { color: var(--text); }
.state.on .dot { background: var(--green); border-color: var(--green);  }
.speed { white-space: nowrap; }

.bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.bars li { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.bar { position: relative; height: 112px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.bar i {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(180deg, var(--green-hi), var(--green));
  transform-origin: 50% 100%; transform: scaleY(var(--h, 0));
  transition: transform .9s var(--ease);
}
.bars li.today .bar i { background: linear-gradient(180deg, #F6D56A, var(--hi)); }
.bars.flat .bar i { transform: scaleY(0); }
.day { font-size: .6875rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-list { list-style: none; margin: 0; padding: 0; }
.pay-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding-block: 10px; border-block-start: 1px solid var(--line); font-size: .875rem; }
.pay-list li:first-child { border-block-start: 0; padding-block-start: 0; }
.pay-list .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-list .when { color: var(--muted); text-align: end; }
.pay-list .st { color: var(--muted); font-size: .8125rem; }
.pay-list .st.ok { color: var(--green-hi); }
.pay-list .st.bad { color: var(--danger); }
.pay-list a { font-family: var(--mono); font-size: .8125rem; text-align: end; }
.pay-list .none { display: block; color: var(--muted); border: 0; padding: 0; }

/* ---- Sections ---- */
.sec { padding-block: 48px; border-block-start: 1px solid var(--line); }
.sec-title { font-weight: 800; font-stretch: 104%; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.08; letter-spacing: -.022em; }
:root[lang="fa"] .sec-title { letter-spacing: 0; line-height: 1.4; }
.sec-lede { margin-block-start: 14px; color: var(--muted); max-width: 52ch; font-size: 1.0625rem; }

.circuit { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 34px; }
.circuit li { position: relative; padding-inline-start: 68px; }
.circuit li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 21px; top: 50px; bottom: -28px; width: 2px;
  background: linear-gradient(180deg, var(--green), var(--line-hi));
  transform-origin: 50% 0; transition: transform .7s var(--ease);
}
.circuit li:nth-child(2)::after { transition-delay: .35s; }
.circuit h3 { font-size: 1.3125rem; font-weight: 700; line-height: 1.3; padding-block-start: 8px; }
.circuit p { margin-block-start: 8px; color: var(--muted); max-width: 38ch; }
.node {
  position: absolute; inset-inline-start: 0; top: 0;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--green); color: var(--green-hi);
  font: 800 1.0625rem/1 "Archivo", var(--body);
  transition: transform .6s var(--ease);
}
.circuit li:nth-child(3) .node { border-color: var(--hi); color: var(--hi); }
.js .circuit:not(.in) li::after { transform: scaleY(0); }
.js .circuit:not(.in) .node { transform: scale(.6); background: var(--bg); }
.circuit.in li:nth-child(1) .node { transition-delay: .1s; }
.circuit.in li:nth-child(2) .node { transition-delay: .45s; }
.circuit.in li:nth-child(3) .node { transition-delay: .8s;  }

.earn-in { display: grid; gap: 36px; }
.statement { margin-block-start: 18px; font: 700 clamp(1.375rem, 2vw, 1.875rem)/1.2 var(--display); letter-spacing: -.012em; color: var(--text); max-width: 20ch; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; }
.facts li { padding-block: 20px; border-block-start: 1px solid var(--line); }
.facts li:last-child { border-block-end: 1px solid var(--line); }
.facts h3 { font-size: 1.125rem; font-weight: 700; }
.facts p { margin-block-start: 6px; color: var(--muted); max-width: 52ch; }

.pair-in { display: grid; gap: 64px; }
.spec { margin: 28px 0 0; }
.spec div { display: grid; gap: 4px; padding-block: 16px; border-block-start: 1px solid var(--line); }
.spec div:last-child { border-block-end: 1px solid var(--line); }
.spec dt { color: var(--muted); font-size: .875rem; }
.spec dd { margin: 0; font-weight: 600; }
.switches { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); border-block-start: 1px solid var(--line); }
.switches li { display: flex; align-items: center; gap: 12px; padding-block: 14px; border-block-end: 1px solid var(--line); font-weight: 600; }
.switches .ico { width: 20px; height: 20px; color: var(--green-hi); }
.assure { display: flex; gap: 12px; align-items: flex-start; margin-block-start: 24px; color: var(--text); max-width: 46ch; }
.assure .ico { color: var(--hi); margin-block-start: 1px; }

.dl { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: 56px; background: radial-gradient(60% 80% at 50% 0%, var(--sky-green), transparent 70%), var(--bg-deep); }
.dl-in { display: flex; flex-direction: column; align-items: center; }
.dl-logo { width: 120px; height: 120px; margin-block-end: 18px; }
.dl .sec-title { max-width: 18ch; }
.dl .btn-lg { margin-block-start: 30px; }
.ver { margin-block-start: 14px; color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.ver.off { color: var(--hi); }
.ref { margin-block-start: 6px; color: var(--text); font-size: .9375rem; }
.ref bdi { color: var(--hi); }
.smart { margin-block-start: 22px; max-width: 46ch; color: var(--muted); font-size: .875rem; }
.dl-os { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 40px; margin-block-start: 30px; }
.dl-col { display: flex; flex-direction: column; align-items: center; flex: 0 1 340px; }
.dl-col[hidden] { display: none; }
.dl .dl-col .btn-lg { margin-block-start: 0; }
@media (max-width: 430px) { .dl .dl-col .btn-lg { max-width: 100%; white-space: normal; } }
.dl-cmd { display: block; max-width: 100%; margin-block-start: 14px; padding: 10px 14px; border: 1px solid var(--line-hi); border-radius: 10px; text-align: left; line-height: 1.5; user-select: all; }
.dl .arrow { display: inline-block; margin-block-start: 14px; }

.faq-in { display: grid; gap: 28px; }
.faq-list { border-block-start: 1px solid var(--line); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding-block: 14px; cursor: pointer; list-style: none;
  font: 600 1.0625rem/1.4 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-inline-end: 4px;
  border-inline-end: 2px solid var(--muted); border-block-end: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--green-hi); }
.faq summary:hover { color: var(--green-hi); }
.faq details p { padding-block-end: 20px; color: var(--soft-text); max-width: 64ch; }

.foot { border-block-start: 1px solid var(--line); padding-block: 28px 36px; background: var(--bg-deep); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; font-size: .9375rem; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; font: 700 1rem/1 "Archivo", var(--body); margin-inline-end: auto; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }
.foot .social { display: inline-flex; align-items: center; gap: 8px; }
.foot .social .ico { width: 20px; height: 20px; }

/* ---- Reveal (site.js adds .in once a block scrolls into view) ---- */
[data-reveal] { transition: opacity .6s var(--ease), transform .6s var(--ease); }
/* Content stays readable before observation, in captures, and without scripting. */
.js [data-reveal].in { animation: rise .5s var(--ease) both; }
.wrap, .hero-in, .card, .part, .ledger, .ledger > div { min-width: 0; }
h1, h2, h3, .ref { overflow-wrap: anywhere; }
.wallet-row > input { width: 0; }
.pc-table { table-layout: fixed; }
.pc-table td, .pc-table th { overflow-wrap: anywhere; }
.speed, .state { white-space: normal; }
@media (max-width: 430px) {
  .top-in { gap: 8px; flex-wrap: wrap; padding-block: 10px; }
  .brand { gap: 6px; }
  .top .btn-sm { padding-inline: 12px; }
  .wallet { padding: 12px; }
  .wallet-row { flex-wrap: wrap; }
  .wallet-input { flex-basis: 100%; width: 100%; }
  .wallet .btn { width: 100%; }
  .card { padding: 12px; }
}
@media print {
  [data-reveal], .js .circuit:not(.in) .node { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation: none !important; }
}

/* ---- Wider screens ---- */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .hero { padding-block: 40px 32px; }
  .wallet { padding: 22px; }
  .card { padding: 26px; }
  .card-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; }
  .ledger { grid-template-columns: 1fr 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .facts li:nth-last-child(2) { border-block-end: 1px solid var(--line); }
  .spec div { grid-template-columns: 9.5rem 1fr; gap: 16px; }
}
@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .top-nav { display: flex; }
  .hero { padding-block: 48px 36px; }
  .mesh {
    opacity: .95;
    -webkit-mask-image: linear-gradient(90deg, transparent 26%, rgba(0, 0, 0, .5) 52%, #000 72%);
    mask-image: linear-gradient(90deg, transparent 26%, rgba(0, 0, 0, .5) 52%, #000 72%);
  }
  [dir="rtl"] .mesh {
    -webkit-mask-image: linear-gradient(270deg, transparent 26%, rgba(0, 0, 0, .5) 52%, #000 72%);
    mask-image: linear-gradient(270deg, transparent 26%, rgba(0, 0, 0, .5) 52%, #000 72%);
  }
  .card-parts { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .sec { padding-block: 64px; }
  .circuit { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-block-start: 56px; }
  .circuit li:not(:last-child)::after { top: 21px; bottom: auto; inset-inline-start: 56px; width: calc(100% + 40px - 68px); height: 2px; background: linear-gradient(90deg, var(--green), var(--line-hi)); transform-origin: 0 50%; }
  [dir="rtl"] .circuit li:not(:last-child)::after { background: linear-gradient(270deg, var(--green), var(--line-hi)); transform-origin: 100% 50%; }
  .js .circuit:not(.in) li::after { transform: scaleX(0); }
  .circuit li { padding-inline-start: 0; padding-block-start: 68px; }
  .earn-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
  .earn-lead { position: sticky; top: 108px; }
  .pair-in { grid-template-columns: 1fr 1fr; gap: 80px; }
  .faq-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 72px; align-items: start; }
  .dl { padding-block: 72px; }
}

:root { --trust-bg: var(--surface); --trust-text: var(--text); --trust-line: var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block-start: 32px; }
.trust-card { background: var(--trust-bg); color: var(--trust-text); border: 1px solid var(--trust-line); border-radius: 16px; padding: 24px; }
.trust-card h3 { margin-block-end: 16px; }
.trust-card p, .decision-note { font-size: 1rem; line-height: 1.8; }
.decision-note { margin-block-start: 16px; }

/* ---- The 1 USDT withdrawal offer (portal.payout_offer keeps it until the end of 2026) ----
   The old minimum is struck through and the new one lands; the final state is the static one, so
   it reads the same without scripting, in captures and under reduced motion. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.offer-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green-hi); font: 700 .75rem/1.4 var(--body); letter-spacing: .05em; text-transform: uppercase;
}
:root[lang="fa"] .offer-tag { letter-spacing: 0; font-size: .8125rem; }
.offer-pill {
  display: inline-flex; align-self: start; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-block-end: 18px;
  padding-block: 5px; padding-inline: 5px 14px; border: 1px solid var(--line-hi); border-radius: 999px;
  background: var(--surface); color: var(--text); text-decoration: none; font-size: .9375rem; line-height: 1.3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.offer-pill:hover { border-color: var(--green); color: var(--text); }
.offer-pill s, .offer-was { --tilt: -10deg; position: relative; text-decoration: none; color: var(--muted); }
[dir="rtl"] .offer-pill s, [dir="rtl"] .offer-was { --tilt: 10deg; }
.offer-pill s::after, .offer-was::after {
  content: ""; position: absolute; inset-inline: -14%; inset-block-start: 50%; height: max(2px, .1em);
  border-radius: 2px; background: var(--danger); transform: rotate(var(--tilt)); transform-origin: left center;
}
[dir="rtl"] .offer-pill s::after, [dir="rtl"] .offer-was::after { transform-origin: right center; }
.offer-pill s { margin-inline: 6px; font: 700 1.0625rem/1 var(--display); }
.offer-pill s::after { inset-inline: -6%; }
.offer-pill b { color: var(--green-hi); font: 800 1.0625rem/1 var(--display); }
.offer-pill s::after { animation: strike .45s var(--ease) 1s both; }

.offer {
  margin-block-start: 26px; max-width: 30rem; padding: 22px 24px 24px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--green) 20%, transparent), transparent 62%), var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.offer-label { margin-block-start: 14px; color: var(--muted); font-size: .9375rem; }
.offer-figures {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; margin-block-start: 2px;
  font-family: var(--display); font-variant-numeric: tabular-nums;
}
.offer-was { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1.1; }
.offer-arrow { width: 40px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .offer-arrow { scale: -1 1; }
.offer-now {
  color: var(--green-hi); font-size: clamp(3rem, 6.5vw, 4.75rem); font-weight: 850; line-height: 1; letter-spacing: -.03em;
}
.offer-unit { font-size: .42em; font-weight: 700; letter-spacing: .02em; }
.offer-was .offer-unit { font-size: .55em; }
:root[lang="fa"] .offer-now { letter-spacing: 0; }
.offer-note { margin-block-start: 14px; color: var(--soft-text); line-height: 1.7; max-width: 42ch; }
@keyframes strike { from { transform: rotate(var(--tilt)) scaleX(0); } }
@keyframes was { from { color: var(--text); } }
@keyframes nudge { from { opacity: 0; transform: translateX(-12px); } }
@keyframes land { 0% { opacity: 0; transform: scale(.55); } 60% { opacity: 1; transform: scale(1.1); } }
.js .offer.in .offer-was::after { animation: strike .5s var(--ease) .3s both; }
.js .offer.in .offer-was { animation: was .4s linear .55s both; }
.js .offer.in .offer-arrow { animation: nudge .45s var(--ease) .7s both; }
.js .offer.in .offer-now { display: inline-block; animation: land .65s var(--ease) .85s both; }
[lang="fa"] body { line-height: 1.8; }
@media (max-width: 640px) { .trust-grid { grid-template-columns: 1fr; } .trust-card { padding: 20px; } }

.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.video-card { min-width: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.video-card h3 { margin-block: 0 12px; font-family: var(--display); }
.video-card p { color: var(--muted); }
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-deep); border-radius: 8px; }
.video-quality { display: flex; gap: 8px; margin-block-start: 16px; }
.video-quality [aria-pressed="true"] { background: var(--green); color: #07130D; outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 640px) { .video-grid { grid-template-columns: 1fr; } .video-card { padding: 16px; } }

/* ---- GPU earnings page (/gpus: gpus.html, gpus.js) ----
   A table that scrolls inside its own box on a narrow phone, never the page; figures end-aligned. */
.top-nav a[aria-current="page"] { color: var(--text); }
.earn-more { margin-block-start: 20px; }
.gpus-page { padding-block: 40px 56px; background: radial-gradient(60% 40% at 50% 0%, var(--sky-green), transparent 70%); }
.gpus-page h1 { font-weight: 800; font-stretch: 104%; font-size: clamp(1.875rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.022em; }
:root[lang="fa"] .gpus-page h1 { letter-spacing: 0; line-height: 1.4; }
.gpu-sub { margin-block-start: 12px; color: var(--soft-text); font-weight: 600; font-size: 1.0625rem; }
.gpus-page .sec-lede, .gpu-note { max-width: 62ch; }
.gpu-error { margin-block-start: 24px; }
.gpu-scroll { max-width: 48rem; margin-block-start: 28px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.gpu-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gpu-table th, .gpu-table td { padding: 12px 16px; text-align: start; vertical-align: middle; border-block-start: 1px solid var(--line); }
.gpu-table thead th { border-block-start: 0; font-size: .8125rem; font-weight: 600; color: var(--muted); vertical-align: bottom; }
.gpu-table tbody th { font-weight: 600; overflow-wrap: break-word; }
.gpu-table .num { text-align: end; white-space: nowrap; }
.gpu-table .unit { display: block; font-weight: 400; }
.gpu-table tbody tr:hover { background: var(--raised); }
.gpu-loading td, .gpu-empty td { color: var(--muted); }
:root:not(.js) .gpu-loading { display: none; }
.chg { display: inline-block; margin-inline-end: 6px; font-size: .75em; }
.chg.up { color: var(--green-hi); }
.chg.down { color: var(--danger); }
.gpu-meta { margin-block-start: 14px; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.gpu-meta:empty { display: none; }
@media (max-width: 430px) {
  .gpu-table th, .gpu-table td { padding: 10px 5px; font-size: .8125rem; }
  .gpu-table tr > :first-child { padding-inline-start: 10px; }
  .gpu-table tr > :last-child { padding-inline-end: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal]:not(.in), .js .circuit:not(.in) .node { opacity: 1; transform: none; }
  .js .circuit:not(.in) li::after { transform: none; }
  .mesh .n { opacity: var(--o); }
}

/* Shared geometry; theme-specific paints. */
:root {
  --top-bg: rgba(13, 17, 23, .94); --soft-text: #C3CDD8;
  --sky-green: rgba(46, 163, 111, .16); --sky-blue: rgba(36, 80, 120, .20);
  --mesh-link: #52657C; --mesh-node: #71849B;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7FAF9; --bg-deep: #EDF3F0; --surface: #FFFFFF; --raised: #E3ECE7;
  --line: #B5C6BC; --line-hi: #768D80; --text: #162C21; --muted: #4C6256;
  --green: #279866; --green-hi: #08653E; --hi: #806000; --danger: #A02232;
  --top-bg: rgba(247, 250, 249, .96); --soft-text: #374F41;
  --sky-green: rgba(46, 163, 111, .10); --sky-blue: rgba(36, 80, 120, .08);
  --mesh-link: #7D9989; --mesh-node: #507560;
  --trust-bg: var(--surface); --trust-text: var(--text); --trust-line: var(--line);
}
:root[data-theme="light"] .btn:hover { background: #73D6AA; }
.hero-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line-hi); white-space: normal; }
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; border: 1px solid var(--line-hi); border-radius: 9px; background: var(--surface); cursor: pointer; }
.theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.top-in { flex-wrap: wrap; padding-block: 10px; }
.top-nav { display: flex; flex-wrap: wrap; gap: 10px 18px; order: 4; width: 100%; }
.top-nav a { font-size: 1rem; }
@media (min-width: 1100px) { .top-nav { order: 0; width: auto; } }

/* ---- Hero story (wide, tall enough screens with motion allowed) ----
   The copy and the card stay pinned for about 1.6 screens of scroll while gpu3d.js turns the card with
   the track's progress (front, heat-pipe side, backplate, three-quarter view); then the page continues.
   overflow: clip (not hidden) keeps the hero from becoming the sticky scroll container. A copy taller
   than the screen pins higher (gpu3d.js measures --copy-h) so its buttons stay reachable. Without
   graphics (.gpu-off) or after a wallet is checked the hero is the plain two-column layout. */
@supports (overflow: clip) {
  @media (min-width: 900px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
    .js .hero:not(.gpu-off) { overflow: clip; padding-block-start: 3vh; }
    .js .hero:not(.gpu-off) .hero-sky { top: -25vh; height: 140vh; }
    .js .hero:not(.gpu-off) .mesh {
      -webkit-mask-image: linear-gradient(90deg, transparent 26%, rgba(0, 0, 0, .5) 52%, #000 72%), linear-gradient(180deg, #000 50%, transparent 96%);
      mask-image: linear-gradient(90deg, transparent 26%, rgba(0, 0, 0, .5) 52%, #000 72%), linear-gradient(180deg, #000 50%, transparent 96%);
      -webkit-mask-composite: source-in; mask-composite: intersect;
    }
    [dir="rtl"].js .hero:not(.gpu-off) .mesh {
      -webkit-mask-image: linear-gradient(270deg, transparent 26%, rgba(0, 0, 0, .5) 52%, #000 72%), linear-gradient(180deg, #000 50%, transparent 96%);
      mask-image: linear-gradient(270deg, transparent 26%, rgba(0, 0, 0, .5) 52%, #000 72%), linear-gradient(180deg, #000 50%, transparent 96%);
    }
    .js .hero:not(.gpu-off) .hero-in { align-items: start; }
    .js .hero:not(.gpu-off) .hero-copy {
      position: sticky; top: min(var(--pin), calc(100vh - var(--copy-h, 0px) - 12px)); min-height: var(--stage-h);
      display: flex; flex-direction: column; justify-content: center; padding-block-end: 86px;
    }
    .js .hero:not(.gpu-off) .gpu-track { height: calc(var(--stage-h) + 160vh); }
    .js .hero:not(.gpu-off) .gpu-stage { position: sticky; top: var(--pin); height: var(--stage-h); }
    .js .hero:has(#card:not([hidden])) .gpu-track { height: auto; }
  }
}

.tg-float { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #229ED9; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .15s; }
.tg-float:hover { transform: scale(1.08); color: #fff; }
.tg-float svg { width: 26px; height: 26px; fill: currentColor; }