/* افزوده‌های صفحه‌ی اصلی: شبکه‌ی متحرک، مدار تعاملی، قبل/بعد، کاربردها، پایلوت.
   متغیرها و پایه از site.css می‌آید؛ این فایل فقط در index.html بارگذاری می‌شود. */

/* ---- قهرمان ---- */
.hero { isolation: isolate; }
.hero > *:not(.net) { position: relative; z-index: 1; }
.net { position: absolute !important; left: 50%; top: 0; width: 100vw; height: 100%; transform: translateX(-50%); z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 78%); }
/* نور دنبال‌کننده‌ی نشانگر: تمام‌عرض صفحه، تا لبه‌ی سخت ستون محتوا دیده نشود */
.hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(30rem circle at var(--mx, 50vw) var(--my, 28%), rgba(34,211,238,.12), transparent 65%); transition: opacity 1s; }
.hero h1 .hl { background-image: linear-gradient(110deg, #7ee9f9 0%, #22d3ee 30%, #0fa9c9 50%, #22d3ee 70%, #7ee9f9 100%); background-size: 220% auto; animation: shine 7s linear infinite; }
@keyframes shine { to { background-position: -220% 0; } }
.rot { margin: 1.5rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 700; }
.rot-word { display: inline-grid; height: 2.3rem; padding: 0 1rem; border-radius: .85rem; overflow: hidden; background: var(--accent-soft); border: 1px solid var(--accent-line); color: #8bf0ff; }
.rot-word b { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; font-weight: 800; opacity: 0; transform: translateY(120%); transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.rot-word b.on { opacity: 1; transform: none; }
.rot-word b.out { opacity: 0; transform: translateY(-120%); }
.hero .cta { margin-top: 1.8rem; }
.mock { transition: transform .3s ease; will-change: transform; }
.fchip { position: absolute; z-index: 3; display: flex; align-items: center; gap: .55rem; padding: .55rem .95rem; border-radius: .9rem; font-size: .72rem; font-weight: 700;
  background: rgba(22,32,46,.92); border: 1px solid var(--accent-line); backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(0,0,0,.45); animation: bob 6s ease-in-out infinite; }
.fchip i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.fchip.f1 { top: -1.3rem; inset-inline-end: -1rem; }
.fchip.f2 { bottom: 4rem; inset-inline-start: -2.4rem; animation-delay: -2s; }
.fchip.f3 { bottom: -1.2rem; inset-inline-end: 4rem; animation-delay: -4s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 62rem) { .fchip { display: none; } }

/* ---- نوار اطمینان ---- */
.trust { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); padding: 1.8rem 0 .5rem; }
.ti { display: flex; gap: .8rem; align-items: flex-start; padding: 1.1rem; border-radius: 1.1rem; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.ti svg { width: 1.45rem; height: 1.45rem; color: var(--accent); flex: none; margin-top: .15rem; }
.ti b { display: block; font-size: .85rem; line-height: 1.7; }
.ti span { display: block; margin-top: .2rem; font-size: .74rem; color: var(--muted); line-height: 1.9; }
@media (max-width: 62rem) { .trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .trust { grid-template-columns: 1fr; } }

/* ---- مدار تعاملی ----
   گره‌ها روی یک حلقه‌ی چرخان‌اند و با انیمیشن معکوس صاف می‌مانند؛ --a زاویه‌ی هر گره از بالای حلقه است. */
.orbit-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.4rem; align-items: center; }
@media (max-width: 52rem) { .orbit-wrap { grid-template-columns: 1fr; } }
.orbit-stage { container-type: inline-size; position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1; margin-inline: auto; }
.circ { position: absolute; border-radius: 50%; border: 1px solid var(--line); pointer-events: none; }
.circ.c1 { inset: 14%; }
.circ.c2 { inset: 2%; border-color: rgba(34,211,238,.16); }
.circ.c3 { inset: 30%; border-style: dashed; }
.sat-ring { position: absolute; inset: 2%; animation: ospin 38s linear infinite reverse; pointer-events: none; }
.sat-ring i { position: absolute; left: 50%; top: 0; width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent); translate: -50% -50%; }
.ring { position: absolute; inset: 0; animation: ospin 80s linear infinite; }
.spoke { position: absolute; left: 50%; top: 50%; width: 36cqw; height: 2px; transform-origin: 0 50%; transform: rotate(calc(var(--a) - 90deg));
  background: linear-gradient(90deg, transparent 12%, var(--line-strong)); opacity: .8; transition: opacity .3s, box-shadow .3s; }
.spoke.on { background: linear-gradient(90deg, transparent 12%, var(--accent)); opacity: 1; box-shadow: 0 0 12px rgba(34,211,238,.55); }
.slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-36cqw); }
.onode { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: .35rem; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; font: inherit;
  transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); animation: ocount 80s linear infinite; }
@keyframes ocount { from { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); } to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 - 360deg)); } }
.oi { width: clamp(2.7rem, 12cqw, 3.7rem); height: clamp(2.7rem, 12cqw, 3.7rem); border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line-strong); color: var(--accent);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s; }
.oi svg { width: 48%; height: 48%; }
.ol { font-size: .7rem; font-weight: 700; color: var(--muted); white-space: nowrap; transition: color .25s; }
.onode:hover .oi, .onode:focus-visible .oi { transform: scale(1.1); border-color: var(--accent); }
.onode.on .oi { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: 0 0 30px rgba(34,211,238,.6); }
.onode.on .ol { color: var(--text); }
.orbit-stage:hover .ring, .orbit-stage:hover .onode, .orbit-stage:hover .sat-ring, .orbit-stage:focus-within .ring, .orbit-stage:focus-within .onode { animation-play-state: paused; }
.ocore { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 24cqw; height: 24cqw; border-radius: 50%; border: 1px solid var(--accent-line); cursor: pointer; color: var(--text); font: inherit;
  display: grid; place-content: center; gap: .1rem; text-align: center; background: radial-gradient(circle at 50% 35%, #2c3f5a, #1a2638); box-shadow: 0 0 60px rgba(34,211,238,.3); transition: box-shadow .3s; z-index: 2; }
.ocore .cw { font-size: clamp(1.1rem, 6.4cqw, 1.7rem); font-weight: 900; line-height: 1.2; }
.ocore small { font-size: clamp(.5rem, 2.6cqw, .68rem); color: #8bf0ff; }
.ocore:hover, .ocore.on { box-shadow: 0 0 80px rgba(34,211,238,.55); }
.ocore::before, .ocore::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 1px solid var(--accent-line); animation: cpulse 3.2s ease-out infinite; pointer-events: none; }
.ocore::after { animation-delay: 1.6s; }
@keyframes cpulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.orbit-info { background: linear-gradient(165deg, #182334, #111a28); border: 1px solid var(--accent-line); border-radius: 1.4rem; padding: 1.8rem; min-height: 18rem; box-shadow: 0 0 50px rgba(34,211,238,.08); }
.opanel { animation: pin .4s ease; }
.opanel h3 { margin-top: .9rem; font-size: 1.3rem; font-weight: 800; line-height: 1.6; }
.opanel p { margin-top: .7rem; font-size: .88rem; color: var(--muted); line-height: 2.05; }
.opanel ul { list-style: none; margin-top: .9rem; display: grid; gap: .4rem; font-size: .84rem; color: #cbd5e1; }
.opanel li::before { content: "✓"; color: var(--accent); font-weight: 900; margin-inline-end: .5rem; }
.opanel .more, .feat .more { display: inline-block; margin-top: 1.1rem; font-size: .8rem; font-weight: 700; color: var(--accent); }

/* ---- پیش از مدار / با مدار ---- */
.chaos-wrap { display: grid; gap: 1.3rem; justify-items: center; }
.seg, .stabs { display: inline-flex; gap: .2rem; padding: .28rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line-strong); }
.seg button, .stabs button { font: inherit; font-size: .85rem; font-weight: 700; padding: .5rem 1.5rem; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.seg button[aria-pressed="true"], .stabs button[aria-selected="true"] { background: var(--grad); color: var(--accent-fg); box-shadow: 0 6px 20px rgba(34,211,238,.3); }
.chaos { position: relative; container-type: inline-size; width: 100%; max-width: 56rem; min-height: 27rem; overflow: hidden; border-radius: 1.6rem; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 0%, rgba(74,100,130,.18), transparent 60%), linear-gradient(165deg, #141e2c, #0e1521); }
.chaos::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 75%); }
.sample-tag { position: absolute; top: .8rem; inset-inline-start: 1rem; z-index: 5; font-size: .66rem; color: #6d7c90; border: 1px dashed var(--line-strong); border-radius: 999px; padding: .05rem .7rem; }
/* تکه‌های پراکنده */
.frag { position: absolute; left: var(--x); top: var(--y); width: min(17.5rem, 44%); padding: .8rem .9rem; border-radius: .9rem; font-size: .72rem; line-height: 1.8; z-index: 2;
  background: #1a2535; border: 1px solid var(--line-strong); box-shadow: 0 14px 34px rgba(0,0,0,.4); transform: rotate(var(--r));
  transition: transform .9s cubic-bezier(.6,0,.2,1), opacity .6s ease, filter .6s ease; animation: drift 7s ease-in-out infinite alternate; }
.frag:nth-of-type(2n) { animation-delay: -2.4s; }
.frag:nth-of-type(3n) { animation-delay: -4.1s; }
@keyframes drift { from { translate: 0 0; } to { translate: 3px -5px; } }
.fh { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .68rem; color: #9fb0c3; margin-bottom: .5rem; }
.dt { width: .55rem; height: .55rem; border-radius: 50%; background: #5f7189; }
.dt.wa { background: #4fae7c; } .dt.ml { background: #6f93c7; } .dt.xl { background: #4f9e6f; } .dt.cl { background: #d9a752; }
.bub { max-width: 88%; padding: .25rem .7rem; border-radius: .7rem; margin-top: .3rem; background: #243349; color: #cbd5e1; }
.bub.out { margin-inline-start: auto; background: #1f4a45; }
.mrow { padding: .35rem 0; border-top: 1px solid var(--line); }
.mrow b { display: block; font-size: .72rem; color: #d3dde8; }
.mrow span { color: #7d8ea3; font-size: .66rem; }
.mrow.dim b { color: #8797ab; }
.xg { display: grid; grid-template-columns: .6fr 1.3fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; }
.xg span { background: #16202e; padding: .15rem .5rem; color: #aab8c8; }
.xg .h { background: #1d2a3c; color: #7d8ea3; font-weight: 700; }
.xg .hi { background: rgba(217,167,82,.14); color: #e7c27e; }
.crow { padding: .3rem .6rem; margin-top: .3rem; border-radius: .6rem; background: #202d40; color: #c4cfdb; }
.crow.miss { background: rgba(242,96,126,.13); color: #ff9db2; }
.f-note { width: auto; padding: .5rem 1rem; background: #3a2f18; border-color: rgba(217,167,82,.4); color: #e7c27e; font-weight: 800; font-size: .8rem; }
/* کارت یکپارچه */
.unified { position: absolute; z-index: 3; inset: 50% 1.4rem auto; max-width: 40rem; margin-inline: auto; padding: 1.2rem 1.4rem; border-radius: 1.1rem; background: linear-gradient(170deg, #172435, #101a28);
  border: 1px solid var(--accent-line); box-shadow: 0 0 60px rgba(34,211,238,.12), 0 24px 50px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-46%) scale(.94); pointer-events: none; transition: opacity .7s ease .35s, transform .8s cubic-bezier(.2,.8,.2,1) .35s; }
.uh { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .92rem; }
.uh b { font-weight: 800; }
.uh em { font-style: normal; color: var(--muted); font-size: .8rem; }
.ubadge { font-size: .66rem; font-weight: 700; padding: .05rem .7rem; border-radius: 999px; background: var(--accent-soft); color: #8bf0ff; border: 1px solid var(--accent-line); }
.ustep { list-style: none; display: flex; margin: 1.3rem 0 1.1rem; }
.ustep li { position: relative; flex: 1; text-align: center; font-size: .74rem; font-weight: 700; padding-top: 1.6rem; color: var(--muted); }
.ustep li small { display: block; font-weight: 500; font-size: .64rem; color: #6d7c90; }
.ustep li::before { content: ""; position: absolute; top: .55rem; left: 0; right: 0; height: 2px; background: var(--line-strong); }
.ustep li:first-child::before { left: 0; right: 50%; }
.ustep li:last-child::before { left: 50%; right: 0; }
.ustep li.done::before { background: var(--accent); }
.ustep li.cur::before { background: linear-gradient(to left, var(--accent) 50%, var(--line-strong) 50%); }
.ustep li i { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #1a2535; border: 2px solid var(--line-strong); z-index: 1; }
.ustep li.done { color: var(--text); }
.ustep li.done i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(34,211,238,.6); }
.ustep li.cur { color: #8bf0ff; }
.ustep li.cur i { border-color: var(--accent); background: #0e1521; }
.ustep li.cur i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--accent); animation: cpulse 1.8s ease-out infinite; }
.ucols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ubox { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: .8rem; padding: .7rem .9rem; font-size: .72rem; color: #b6c2d0; }
.ubox h4 { font-size: .68rem; color: var(--muted); margin-bottom: .4rem; font-weight: 700; }
.ubox .file { display: block; padding: .15rem 0; }
.ubox .file::before { content: "▤"; color: var(--accent); margin-inline-end: .5rem; }
.ubox p { padding: .12rem 0; }
.ubox .d { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #5f7189; margin-inline-end: .5rem; }
.ubox .d.ok { background: var(--accent); }
/* با مدار */
.chaos.ordered .frag { transform: translate(var(--tx), var(--ty)) scale(.35) rotate(0deg); opacity: 0; filter: blur(3px); animation: none; }
.chaos.ordered .unified { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.chaos-cap { min-height: 3.2rem; max-width: 34rem; text-align: center; color: var(--muted); font-size: .92rem; line-height: 2; }
@media (max-width: 44rem) {
  .chaos { min-height: 36rem; }
  .frag { width: min(15rem, 62%); }
  .f-wa { --x: 4% !important; --y: 5% !important; } .f-mail { --x: 34% !important; --y: 25% !important; }
  .f-xl { --x: 5% !important; --y: 47% !important; } .f-call { --x: 34% !important; --y: 69% !important; } .f-note { --x: 58% !important; --y: 6% !important; }
  .unified { inset: 50% .8rem auto; padding: 1rem; }
  .ucols { grid-template-columns: 1fr; }
  .ustep li { font-size: .66rem; } .ustep li small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .frag { animation: none; } .ustep li.cur i::after { animation: none; } }

/* ---- کاربردها ---- */
.stabs { display: flex; width: fit-content; margin: 0 auto 1.6rem; }
.spanel { animation: pin .45s ease; }
.feat.ico { color: inherit; }
.feat.ico h3 { font-size: .98rem; }
.sector-cta { text-align: center; margin-top: 1.8rem; }

/* ---- پایلوت ---- */
.pilot { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; padding: 2.4rem; border-radius: 1.6rem; overflow: hidden;
  border: 1px solid var(--accent-line); background: linear-gradient(150deg, #14263a, #0e1725); box-shadow: 0 0 70px rgba(34,211,238,.1); }
.pilot h2 { margin-top: .8rem; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.pilot p { margin: .9rem 0 1.4rem; color: #b6c2d0; font-size: .9rem; line-height: 2.1; }
.slots { position: relative; display: flex; justify-content: center; gap: 1rem; }
.slots::before { content: ""; position: absolute; top: 50%; left: 8%; right: 8%; height: 1px; background: repeating-linear-gradient(90deg, var(--accent-line) 0 6px, transparent 6px 12px); }
.sl { position: relative; width: 6.2rem; height: 6.2rem; border-radius: 50%; display: grid; place-content: center; text-align: center; font-size: .76rem; font-weight: 700; color: #c9f7fd; background: rgba(13,20,32,.85); }
.sl span { font-size: 1.6rem; line-height: 1.1; color: var(--accent); }
.sl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--accent-line); animation: ospin 26s linear infinite; }
@media (max-width: 48rem) { .pilot { grid-template-columns: 1fr; padding: 1.6rem; } .sl { width: 5rem; height: 5rem; font-size: .68rem; } }

/* ---- دعوت نهایی: حلقه‌های چرخان ---- */
.final .orb { position: absolute; inset: 0; pointer-events: none; }
.orb i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border: 1px solid rgba(34,211,238,.18); border-radius: 50%; animation: orbspin 60s linear infinite; }
.orb i::after { content: ""; position: absolute; left: 50%; top: -.3rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); translate: -50% 0; }
.orb i:nth-child(1) { width: 18rem; height: 18rem; animation-duration: 28s; }
.orb i:nth-child(2) { width: 32rem; height: 32rem; animation-duration: 46s; animation-direction: reverse; }
.orb i:nth-child(3) { width: 48rem; height: 48rem; animation-duration: 70s; }
@keyframes orbspin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .ring, .onode, .sat-ring, .orb i, .sl::before, .hero h1 .hl, .fchip, .cchip b, .ocore::before, .ocore::after, .good-lines line { animation: none !important; }
  .cchip, .hub, .rot-word b { transition: none; }
  .opanel, .spanel { animation: none; }
}

/* ---- وصل‌کردن: صفحه خاموش شروع می‌شود و با وصل‌شدن نقطه‌ی مدار، روشن می‌شود ----
   حالت خاموش با کلاس off روی body (از home.js) اعمال می‌شود؛ بدون JavaScript صفحه روشن می‌ماند. */
html.m-off .page > :not(.hero):not(.rail),
html.m-off .hero > .comic,
html.m-off .hero-copy { filter: grayscale(1) brightness(.62); }
html.m-lit .page > :not(.hero):not(.rail),
html.m-lit .hero > .comic,
html.m-lit .hero-copy { animation: lightup 1.5s ease forwards; }
@keyframes lightup { from { filter: grayscale(1) brightness(.62); } to { filter: none; } }
html.m-off .hero::after { opacity: 0; }
html.m-off .scroll-progress { opacity: .25; }
html.m-lit .hero h1 .hl { animation: shine 7s linear infinite, neon 1.6s linear 1; }
@keyframes neon { 0% { opacity: .2; } 8% { opacity: 1; } 14% { opacity: .3; } 22% { opacity: 1; } 30% { opacity: .55; } 38%, 100% { opacity: 1; } }

.plugbar { position: relative; direction: ltr; width: min(100%, 34rem); height: 8.6rem; margin: 1.8rem auto 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.cable { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cable path { fill: none; stroke-linecap: round; }
#cableShadow { stroke: rgba(0,0,0,.55); stroke-width: 9; filter: blur(5px); transform: translateY(7px); }
#cablePath { stroke: url(#cg); stroke-width: 5; transition: filter .6s; }
.gs0 { stop-color: #2c3a4e; transition: stop-color .6s; } .gs1 { stop-color: #8fa1b8; transition: stop-color .6s; }
.plugbar.done .gs0 { stop-color: #0f8fa8; } .plugbar.done .gs1 { stop-color: #8bf5ff; }
.plugbar.done #cablePath { filter: drop-shadow(0 0 7px rgba(34,211,238,.9)); }
.pb-org { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: .55rem; direction: rtl; padding: .65rem 1rem; border-radius: 1rem; font-size: .8rem; font-weight: 800;
  background: linear-gradient(165deg, rgba(34,48,68,.92), rgba(18,27,40,.92)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); transition: border-color .5s, box-shadow .5s; }
.pb-org svg { width: 1.25rem; height: 1.25rem; color: #9aa9bd; transition: color .5s; }
.plugbar.done .pb-org { border-color: var(--accent-line); box-shadow: 0 10px 24px rgba(0,0,0,.4), 0 0 26px rgba(34,211,238,.25); }
.plugbar.done .pb-org svg { color: var(--accent); }
/* سوکت: حلقه‌ها، خط‌کش و چاه تیره */
.socket { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6rem; height: 6rem; display: grid; place-items: center; direction: rtl; }
.socket i { position: absolute; border-radius: 50%; transition: border-color .4s, box-shadow .5s, background .5s, opacity .4s; }
.socket .tk { inset: -.55rem; background: repeating-conic-gradient(rgba(148,163,184,.42) 0 1.1deg, transparent 1.1deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 68%, transparent 69%); mask: radial-gradient(circle, transparent 62%, #000 63%, #000 68%, transparent 69%); animation: ospin 40s linear infinite; }
.socket .r1 { inset: 0; border: 1.5px solid rgba(148,163,184,.38); }
.socket .r2 { inset: .55rem; border: 1.5px dashed rgba(148,163,184,.4); animation: ospin 18s linear infinite reverse; }
.socket .well { inset: 1.15rem; background: radial-gradient(circle at 50% 38%, #1a2638, #080e17); box-shadow: inset 0 3px 10px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.07); }
.socket .sw { position: relative; font-weight: 900; font-size: .9rem; color: #7f8fa4; transition: color .5s, text-shadow .5s; }
.plugbar.near .socket .tk { background: repeating-conic-gradient(rgba(34,211,238,.75) 0 1.3deg, transparent 1.3deg 10deg); }
.plugbar.near .socket .r1, .plugbar.near .socket .r2 { border-color: rgba(34,211,238,.75); }
.plugbar.near .socket .r2 { animation-duration: 4s; }
.plugbar.near .socket .well { box-shadow: inset 0 3px 10px rgba(0,0,0,.75), 0 0 22px rgba(34,211,238,.35); }
.plugbar.done .socket .r1, .plugbar.done .socket .r2 { border-color: var(--accent); border-style: solid; box-shadow: 0 0 18px rgba(34,211,238,.55); }
.plugbar.done .socket .r2 { animation-duration: 10s; border-style: dashed; }
.plugbar.done .socket .tk { background: repeating-conic-gradient(rgba(34,211,238,.9) 0 1.3deg, transparent 1.3deg 10deg); }
.plugbar.done .socket .well { background: radial-gradient(circle at 50% 38%, #1d5666, #07141d); box-shadow: inset 0 0 18px rgba(34,211,238,.55), 0 0 34px rgba(34,211,238,.5); }
.plugbar.done .socket .sw { color: #eaffff; text-shadow: 0 0 12px rgba(34,211,238,.9); }
.plugbar.done .socket::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: sockripple 2.6s ease-out infinite; pointer-events: none; }
@keyframes sockripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
/* نقطه‌ی مدار (دوشاخه) */
.plug { position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; will-change: transform; z-index: 3; }
.plug:active { cursor: grabbing; }
.plug .core { position: absolute; inset: .15rem; border-radius: 50%; display: grid; place-items: center; color: #053541; transition: transform .25s cubic-bezier(.3,1.6,.5,1);
  background: linear-gradient(150deg, #8ff5ff 0%, #22d3ee 52%, #0d9db9 100%); border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -4px 8px rgba(0,70,90,.35), 0 8px 20px rgba(0,0,0,.45), 0 0 26px rgba(34,211,238,.6); }
.plug:hover .core { transform: scale(1.07); } .plug:active .core { transform: scale(.94); }
.plug .core svg { width: 1.35rem; height: 1.35rem; }
.plug .ic-drag { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(1px); } 50% { transform: translateX(-3px); } }
.plug .ic-on { display: none; }
.plugbar.done .plug .ic-drag { display: none; } .plugbar.done .plug .ic-on { display: block; }
.plug .ring { position: absolute; inset: -.4rem; border-radius: 50%; border: 1.5px solid rgba(34,211,238,.4); pointer-events: none; transition: border-color .4s, inset .3s; }
.plug:hover .ring { inset: -.55rem; border-color: rgba(34,211,238,.8); }
.plug .halo { position: absolute; inset: -1.1rem; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.34), transparent 66%); pointer-events: none; }
.plug.idle .halo { animation: haloPulse 2.2s ease-in-out infinite; }
@keyframes haloPulse { 0%, 100% { transform: scale(.85); opacity: .55; } 50% { transform: scale(1.25); opacity: 1; } }
.plugbar.done .plug .halo { animation: none; opacity: .5; }
/* فلش‌های راهنما از نقطه به سمت سوکت */
.pb-chev { position: absolute; left: 34%; top: 50%; translate: 0 -50%; display: flex; gap: .55rem; transition: opacity .4s; pointer-events: none; }
.pb-chev i { width: .7rem; height: .7rem; border-left: 2.5px solid rgba(148,163,184,.7); border-bottom: 2.5px solid rgba(148,163,184,.7); transform: rotate(45deg); opacity: .15; animation: chev 1.6s ease-in-out infinite; }
.pb-chev i:nth-child(1) { animation-delay: .5s; } .pb-chev i:nth-child(2) { animation-delay: .25s; }
@keyframes chev { 0%, 100% { opacity: .12; } 40% { opacity: 1; } }
.plugbar.done .pb-chev, .plugbar.near .pb-chev { opacity: 0; }
.pb-hint { position: absolute; left: 50%; bottom: -.5rem; translate: -50% 0; font-size: .8rem; color: #93a3b7; white-space: nowrap; direction: rtl; transition: color .5s; }
.plugbar.done .pb-hint { color: #8bf0ff; }
@media (max-width: 34rem) { .pb-org { font-size: .7rem; padding: .5rem .7rem; gap: .4rem; } .pb-org svg { width: 1rem; height: 1rem; } .socket { width: 4.8rem; height: 4.8rem; } .socket .well { inset: .9rem; } .pb-chev { left: 30%; } }
@media (prefers-reduced-motion: reduce) { .plug .ic-drag, .socket .tk, .socket .r2, .plug.idle .halo, .pb-chev i, .plugbar.done .socket::after { animation: none !important; } }

.flash { position: fixed; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; z-index: 70;
  background: radial-gradient(circle, rgba(190,250,255,.95), rgba(34,211,238,.45) 40%, transparent 70%); animation: flashA 1.3s cubic-bezier(.2,.7,.2,1) forwards; }
.flash.ring { background: none; border: 2px solid rgba(34,211,238,.85); animation-name: ringA; animation-duration: 1.5s; }
@keyframes flashA { from { transform: scale(.4); opacity: 1; } to { transform: scale(240); opacity: 0; } }
@keyframes ringA { from { transform: scale(.4); opacity: 1; } to { transform: scale(150); opacity: 0; } }

/* ---- ریل جریان: ستون کناری که با اسکرول روشن می‌شود ---- */
.rail { display: none; position: fixed; top: 22vh; height: 56vh; right: 1.3rem; width: 2px; z-index: 15; --p: 0%; }
.rail::before { content: ""; position: absolute; inset: 0; background: var(--line); }
.rail-fill { position: absolute; left: 0; right: 0; top: 0; height: var(--p); background: var(--grad); box-shadow: 0 0 10px rgba(34,211,238,.7); }
.rail-fill::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; translate: -50% 0; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px var(--accent); }
.rn { position: absolute; right: -5px; top: var(--t); width: 12px; height: 12px; border-radius: 50%; background: #2a3a4d; border: 2px solid var(--bg); transition: background .3s, box-shadow .3s; }
.rn.lit { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.rn span { position: absolute; right: 1.4rem; top: 50%; translate: 0 -50%; white-space: nowrap; font-size: .72rem; color: var(--muted); opacity: 0; transition: opacity .25s; pointer-events: none; }
.rn:hover span, .rn.cur span { opacity: 1; }
.rn.cur span { color: var(--text); }
@media (min-width: 75rem) { html.m-on .rail { display: block; } }
@media (prefers-reduced-motion: reduce) { html.m-lit .page > :not(.hero):not(.rail), html.m-lit .hero > .comic, html.m-lit .hero-copy, .plug.idle, .flash { animation: none !important; } }

.tagline2 { margin-top: 1rem; font-size: 1.02rem; font-weight: 700; color: #8bf0ff; letter-spacing: .01em; }

/* ---- نوار مدل‌های زبانی: نشان تک‌رنگ با رنگ‌بندی مدار؛ نور به‌نوبت از یکی به دیگری می‌رود ---- */
.llms { padding: 3rem 0 1rem; text-align: center; }
.llm-cap { font-size: .78rem; color: #7b8aa0; margin-bottom: 1.3rem; }
.llm-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.llm { position: relative; display: inline-flex; align-items: center; gap: .6rem; direction: ltr; padding: .65rem 1.2rem .65rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #8190a5; font-size: 1rem; font-weight: 800;
  transition: transform .25s, border-color .25s, background .25s, color .25s, box-shadow .25s; }
.llm svg { width: 1.45rem; height: 1.45rem; flex: none; color: #5f7189; transition: color .4s, filter .4s; }
.llm b { font-weight: 800; }
.llm-tag { font-style: normal; font-size: .62rem; font-weight: 700; padding: .05rem .55rem; border-radius: 999px; background: var(--accent-soft); color: #8bf0ff; border: 1px solid var(--accent-line); }
.llm:hover, .llm.lit { transform: translateY(-3px); border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); box-shadow: 0 10px 30px rgba(34,211,238,.15); }
.llm:hover svg, .llm.lit svg { color: var(--accent); filter: drop-shadow(0 0 8px rgba(34,211,238,.85)); }
@media (prefers-reduced-motion: reduce) { .llm svg { color: #8fa2b8; } }

/* ---- مدار جذاب‌تر: جارو (رادار)، کمان هسته، خط‌کش حلقه، جریان روی سیم‌ها و کج‌شدن سه‌بعدی ---- */
.orbit-stage { transition: transform .35s ease; }
.orbit-stage::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(34,211,238,.13), transparent 66%); }
.ticks { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: ospin 140s linear infinite reverse;
  background: repeating-conic-gradient(rgba(34,211,238,.42) 0 .55deg, transparent .55deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 48%, #000 48.4%, #000 50%, transparent 50.4%); mask: radial-gradient(circle, transparent 48%, #000 48.4%, #000 50%, transparent 50.4%); }
.sweep { position: absolute; inset: 2%; border-radius: 50%; pointer-events: none; animation: ospin 7s linear infinite;
  background: conic-gradient(from 0deg, transparent 70%, rgba(34,211,238,.26) 100%);
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 25%); mask: radial-gradient(circle, transparent 24%, #000 25%); }
.core-arc { position: absolute; left: 50%; top: 50%; width: 31cqw; height: 31cqw; translate: -50% -50%; border-radius: 50%; pointer-events: none; animation: ospin 3.6s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(34,211,238,.95) 92%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
.spoke::after { content: ""; position: absolute; top: 50%; left: 0; width: .42rem; height: .42rem; margin-top: -.21rem; border-radius: 50%; background: #c8f9ff; box-shadow: 0 0 10px var(--accent); animation: flowdim 3.2s linear infinite; }
.spoke:nth-child(2)::after { animation-delay: -.5s; } .spoke:nth-child(3)::after { animation-delay: -1.1s; } .spoke:nth-child(4)::after { animation-delay: -1.7s; }
.spoke:nth-child(5)::after { animation-delay: -2.2s; } .spoke:nth-child(6)::after { animation-delay: -2.7s; } .spoke:nth-child(7)::after { animation-delay: -3.2s; } .spoke:nth-child(8)::after { animation-delay: -3.7s; }
.spoke.on::after { animation: flowout 1.1s linear infinite; }
@keyframes flowout { 0% { left: 4%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 98%; opacity: 0; } }
@keyframes flowdim { 0% { left: 4%; opacity: 0; } 15% { opacity: .45; } 85% { opacity: .45; } 100% { left: 98%; opacity: 0; } }
.oi { position: relative; }
.onode.on .oi::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--accent); animation: cpulse 1.8s ease-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ticks, .sweep, .core-arc, .onode.on .oi::after { animation: none !important; } .spoke::after { display: none; } }

/* ---- پرونده‌ی یکپارچه‌ی مشتری (لندینگ): مرحله‌های قابل‌انتخاب، پنل ماژول و نوار دستیار ---- */
.chaos.big { min-height: 32rem; }
.ustep.sel { margin-top: 1.1rem; }
.ustep li button { display: block; width: 100%; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: center; }
.ustep li button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: .5rem; }
.ustep.sel li:hover i { border-color: var(--accent); }
.ustep.sel li:hover { color: var(--text); }
.upanel { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; animation: pin .35s ease; }
.uai { margin-top: .9rem; display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-radius: .8rem; font-size: .72rem; color: #c9f7fd; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.uai i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; animation: cpulse 2s ease-out infinite; }
@media (max-width: 44rem) { .chaos.big { min-height: 44rem; } .upanel { grid-template-columns: 1fr; } .ustep li { font-size: .64rem; } }
@media (prefers-reduced-motion: reduce) { .upanel, .uai i { animation: none; } }

/* ---- کره‌ی مدار (قهرمان): سازمان در مرکز، ماژول‌ها روی مدار ---- */
.globe-wrap { position: relative; width: 100%; margin: 1.6rem auto 0; }
#globe { display: block; width: 100%; height: clamp(22rem, 44vw, 35rem); cursor: grab; touch-action: pan-y; }
#globe:active { cursor: grabbing; }
.globe-hint { text-align: center; font-size: .72rem; color: #6d7c90; margin-top: -.4rem; }

/* ---- کمیک قهرمان (نسخه‌ی مدرن و بدون کادر): خاموش = پیش از مدار، روشن = با مدار ----
   با وصل‌شدن: پرتو نور از روی کمیک رد می‌شود، خط‌های تصویر «بعد» خودشان کشیده می‌شوند و حباب‌ها می‌جهند. */
.comic { position: relative; width: 100%; margin: 2.2rem auto 0; }
.comic::after { content: ""; position: absolute; inset: -6% -4%; z-index: 9; pointer-events: none; mix-blend-mode: screen; transform: translateX(130%);
  background: linear-gradient(100deg, transparent 38%, rgba(34,211,238,.26) 50%, transparent 62%); }
html.m-lit .comic::after { animation: sweepc 1.7s cubic-bezier(.6,0,.3,1) .15s forwards; }
@keyframes sweepc { to { transform: translateX(-130%); } }
.comic-title { display: flex; justify-content: center; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 2rem; font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; }
.ct-state { display: inline-grid; padding: .15rem 1.1rem; border-radius: 999px; background: rgba(135,150,168,.16); border: 1px solid rgba(135,150,168,.4); color: #aab6c6; font-size: 1rem; transition: background .5s, color .5s, border-color .5s; }
.ct-state b { grid-area: 1 / 1; text-align: center; font-weight: 800; transition: opacity .4s; }
.ct-state .st-on { opacity: 0; } html.m-on .ct-state .st-on { opacity: 1; } html.m-on .ct-state .st-off { opacity: 0; }
html.m-on .ct-state { background: var(--accent-soft); border-color: var(--accent-line); color: #8bf0ff; }
.comic-hint .st-on { display: none; } html.m-on .comic-hint .st-on { display: inline; } html.m-on .comic-hint .st-off { display: none; }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 2rem; }
@media (max-width: 62rem) { .strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .strip { grid-template-columns: 1fr; gap: 2rem; } }
.panel { position: relative; margin: 0; container-type: inline-size; aspect-ratio: 1 / .98; min-width: 0; }
.panel::before { content: ""; position: absolute; inset: 6% 0 14%; pointer-events: none; transition: background .8s;
  background: radial-gradient(circle at 50% 52%, rgba(112,140,176,.22), transparent 64%); }
html.m-on .panel::before { background: radial-gradient(circle at 50% 52%, rgba(34,211,238,.17), transparent 64%); }
.panel::after { content: ""; position: absolute; inset: 6% 0 14%; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.4px); background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(circle at 50% 52%, #000, transparent 62%); mask-image: radial-gradient(circle at 50% 52%, #000, transparent 62%); transition: opacity .6s; }
html.m-on .panel::after { background-image: radial-gradient(rgba(34,211,238,.4) 1px, transparent 1.4px); }
.phead { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 2.6cqw; }
.pnum { font-size: 11cqw; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.22); transition: -webkit-text-stroke-color .6s; }
html.m-on .pnum { -webkit-text-stroke-color: rgba(34,211,238,.6); }
.ptag { font-size: 3.6cqw; font-weight: 800; padding: .5cqw 3.2cqw; border-radius: 999px; background: rgba(135,150,168,.16); border: 1px solid rgba(135,150,168,.4); color: #b4c0cf; transition: background .5s, color .5s, border-color .5s; }
html.m-on .ptag { background: var(--accent-soft); border-color: var(--accent-line); color: #8bf0ff; }
.layer { position: absolute; inset: 0; transition: opacity .6s ease var(--d, 0s), transform .6s ease var(--d, 0s), filter .6s ease var(--d, 0s); }
.layer.a { opacity: 0; }
html.m-on .layer.a { opacity: 1; }
html.m-on .layer.b { opacity: 0; filter: blur(4px); transform: translateX(-10px) scale(.97); }
.ill { position: absolute; left: 50%; top: 34cqw; translate: -50% 0; width: 66cqw; height: auto; overflow: visible; transition: transform .4s ease; }
.panel:hover .ill { transform: translateY(-4px); }
.ill .s { fill: none; stroke: #dce6f2; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ill .paper { fill: #dfe8f3; }
.ill .f2 { fill: #22344d; }
.ill .yel { fill: #f3cd63; } .ill .amb { fill: #ffc45c; }
.ill .cy { stroke: #22d3ee; } .ill .cyf { fill: #22d3ee; stroke: none; }
.ill .red { fill: none; stroke: #ff6b81; stroke-width: 2.6; stroke-linecap: round; }
.ill .dash { stroke-dasharray: 4 5; }
.ill .dk { fill: none; stroke: #0b2530; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ill .arc { stroke-width: 6; stroke-linecap: round; }
.ill .t { fill: #0d1420; font: 800 9.5px Vazirmatn, sans-serif; } .ill .tc { fill: #22d3ee; font: 900 12px Vazirmatn, sans-serif; }
.ill .tl { fill: #e8edf3; font: 800 8.5px Vazirmatn, sans-serif; text-anchor: middle; }
.ill .q { fill: #ff6b81; font: 900 22px Vazirmatn, sans-serif; }
.ill .tok { animation: tokmove 3s ease-in-out infinite alternate; }
@keyframes tokmove { to { transform: translateX(139px); } }
/* خط‌های «بعد» خودشان کشیده می‌شوند */
.layer.a .ill .dr { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.m-on .layer.a .ill .dr { animation: draw .9s cubic-bezier(.5,0,.2,1) forwards; animation-delay: calc(var(--d) + .3s + var(--i) * .04s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.layer.a .ill .paper, .layer.a .ill .f2, .layer.a .ill .yel, .layer.a .ill .amb, .layer.a .ill .cyf, .layer.a .ill text { opacity: 0; transform-box: fill-box; transform-origin: center; }
html.m-on .layer.a .ill .paper, html.m-on .layer.a .ill .f2, html.m-on .layer.a .ill .yel, html.m-on .layer.a .ill .amb, html.m-on .layer.a .ill .cyf, html.m-on .layer.a .ill text {
  animation: fillin .55s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: calc(var(--d) + .7s); }
@keyframes fillin { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.bubble { position: absolute; left: 3cqw; top: 15cqw; max-width: 62%; padding: 2cqw 3.6cqw; background: #dbe3ed; color: #0d1420; font-weight: 800; font-size: 4cqw; line-height: 1.65; border-radius: 4cqw; z-index: 3;
  box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.bubble::after { content: ""; position: absolute; left: 7cqw; bottom: -2.6cqw; width: 4cqw; height: 3cqw; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
.layer.a .bubble { background: #e6fbff; box-shadow: 0 10px 30px rgba(34,211,238,.25); opacity: 0; transform: scale(.6); transform-origin: 10% 100%; }
html.m-on .layer.a .bubble { animation: bpop .6s cubic-bezier(.3,1.7,.5,1) forwards; animation-delay: calc(var(--d) + 1s); }
@keyframes bpop { to { opacity: 1; transform: none; } }
.nar { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 1cqw; font-size: 3.6cqw; line-height: 1.9; color: #c2cfdf; z-index: 4; }
.nar b { display: inline-block; margin-inline-end: 1.6cqw; padding: 0 2.4cqw; font-size: 3cqw; font-weight: 800; border-radius: 999px; color: #ff9db0; background: rgba(255,107,129,.12); border: 1px solid rgba(255,107,129,.35); }
.layer.a .nar b { color: #8bf0ff; background: var(--accent-soft); border-color: var(--accent-line); }
.comic-hint { text-align: center; margin-top: 1.8rem; font-size: .85rem; color: #8fa0b5; }
@media (prefers-reduced-motion: reduce) {
  .ill .tok, html.m-on .layer.a .ill .dr, html.m-on .layer.a .ill .paper, html.m-on .layer.a .ill .f2, html.m-on .layer.a .ill text, html.m-on .layer.a .bubble, html.m-lit .comic::after { animation: none !important; }
  html.m-on .layer.a .ill .dr { stroke-dashoffset: 0; } html.m-on .layer.a .ill .paper, html.m-on .layer.a .ill .f2, html.m-on .layer.a .ill .yel, html.m-on .layer.a .ill .amb, html.m-on .layer.a .ill .cyf, html.m-on .layer.a .ill text, html.m-on .layer.a .bubble { opacity: 1; transform: none; }
  .layer { transition: none; }
}

/* ---- چیدمان جدید قهرمان: متن + «پنل اتصال» ---- */
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.2rem; align-items: center; text-align: start; padding-top: .6rem; }
@media (max-width: 62rem) { .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; } }
.hero-copy { min-width: 0; }
.hero-copy h1 { margin-top: 1.1rem; font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.22; }
.hero-copy .tagline2 { margin-top: 1.1rem; }
.hero-copy p.lead { margin: 1rem 0 0; max-width: 34rem; }
.hero-copy .rot { margin: 1.3rem 0 0; justify-content: flex-start; font-size: 1.05rem; }
.hero-copy .cta { display: flex; justify-content: flex-start; margin-top: 1.8rem; }
.hero-console { position: relative; padding: 1.2rem 1.4rem 1.5rem; border-radius: 1.7rem; overflow: hidden;
  background: linear-gradient(165deg, rgba(26,39,58,.86), rgba(11,18,29,.92)); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(14px);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); }
.hero-console::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 35%, #000, transparent 75%); }
.hero-console > * { position: relative; }
.con-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.con-title { font-size: .85rem; font-weight: 800; color: #c9d5e3; }
.con-status { display: inline-grid; grid-template-columns: auto; align-items: center; position: relative; padding: .28rem 1rem .28rem 1rem; padding-inline-start: 1.6rem; border-radius: 999px; font-size: .74rem; font-weight: 800;
  border: 1px solid rgba(135,150,168,.4); background: rgba(135,150,168,.12); color: #b4c0cf; transition: background .5s, color .5s, border-color .5s; }
.con-status i { position: absolute; inset-inline-start: .65rem; top: 50%; translate: 0 -50%; width: .5rem; height: .5rem; border-radius: 50%; background: #7f8ea2; transition: background .5s, box-shadow .5s; }
.con-status b { grid-area: 1 / 1; font-weight: 800; transition: opacity .4s; }
.con-status .st-on { opacity: 0; } html.m-on .con-status .st-on { opacity: 1; } html.m-on .con-status .st-off { opacity: 0; }
html.m-on .con-status { border-color: var(--accent-line); background: var(--accent-soft); color: #8bf0ff; }
html.m-on .con-status i { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.hero-console .plugbar { width: 100%; margin: .8rem auto 0; }
.con-mods { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-top: 2.6rem; padding-top: 1.1rem; border-top: 1px dashed rgba(255,255,255,.1); }
.cm { display: grid; justify-items: center; gap: .4rem; font-size: .64rem; color: #74849a; text-align: center; transition: color .5s; }
.cm i { width: 2.5rem; height: 2.5rem; border-radius: .85rem; display: grid; place-items: center; background: #19263a; border: 1px solid var(--line-strong); transition: background .5s, border-color .5s, box-shadow .5s; }
.cm svg { width: 1.2rem; height: 1.2rem; color: #6a7b91; transition: color .5s, filter .5s; }
html.m-on .cm { color: #c9d5e3; transition-delay: calc(var(--n) * .12s + .5s); }
html.m-on .cm i { background: rgba(34,211,238,.12); border-color: var(--accent-line); box-shadow: 0 0 18px rgba(34,211,238,.25); transition-delay: calc(var(--n) * .12s + .5s); }
html.m-on .cm svg { color: var(--accent); filter: drop-shadow(0 0 5px rgba(34,211,238,.8)); transition-delay: calc(var(--n) * .12s + .5s); }
@media (max-width: 34rem) { .hero-console { padding: 1rem; } .cm { font-size: .56rem; } .cm i { width: 2.1rem; height: 2.1rem; } }

/* ---- جلوه‌ی سه‌بعدی ملایم روی پنل‌های کمیک ---- */
.panel { transform-style: preserve-3d; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease; }
.layer { transform-style: preserve-3d; }
.phead { translate: 0 0 18px; } .ill { translate: -50% 0 30px; } .bubble { translate: 0 0 48px; } .nar { translate: 0 0 10px; }
.panel .gl { position: absolute; inset: -4%; z-index: 7; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.1), transparent 52%); }
.panel:hover .gl { opacity: 1; }
.panel:hover .ill { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .panel { transform: none; } .panel .gl { display: none; } }

/* ---- هیروی خلوت: سرتیتر + دکمه‌ی فشاری سه‌بعدی (فشردن = وصل، دوباره فشردن = قطع) ---- */
.hero { padding-bottom: 1rem; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h1 { margin-top: 0; font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.2; }
.hero-copy p.lead { margin: 1.3rem auto 0; max-width: 32rem; font-size: 1.05rem; }
.pad { position: relative; width: min(100%, 30rem); height: 18rem; margin: 2.4rem auto 4.5rem; }
.pad-scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease; }
.floor { position: absolute; left: 50%; top: 64%; width: min(26rem, 94vw); aspect-ratio: 1; translate: -50% -50%; transform: rotateX(66deg); transform-style: preserve-3d; pointer-events: none; }
/* سایه‌ی دکمه روی خود کف (هم‌صفحه با حلقه‌ها، پس خودبه‌خود بیضی و هم‌پرسپکتیو می‌شود) */
.floor::before { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: radial-gradient(circle, rgba(2,6,12,.85) 0, rgba(2,6,12,.5) 38%, transparent 70%); filter: blur(5px); transition: inset .16s ease, opacity .4s; }
.pad.on .floor::before { inset: 38%; background: radial-gradient(circle, rgba(2,6,12,.7) 0, rgba(2,6,12,.35) 40%, transparent 70%); }
.floor i { position: absolute; border-radius: 50%; transition: border-color .5s, box-shadow .6s, background .6s; }
.floor .f1 { inset: 0; border: 1.5px solid rgba(148,163,184,.3); }
.floor .f2 { inset: 13%; border: 1.5px dashed rgba(148,163,184,.36); animation: ospin 30s linear infinite reverse; }
.floor .f3 { inset: 30%; border: 2px solid rgba(148,163,184,.34); }
.floor .tk { inset: -3.5%; background: repeating-conic-gradient(rgba(148,163,184,.42) 0 1deg, transparent 1deg 7.5deg); animation: ospin 60s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); }
.floor .disk { inset: 28%; background: radial-gradient(circle, rgba(148,163,184,.14), transparent 70%); }
.pad.on .floor .f1, .pad.on .floor .f2, .pad.on .floor .f3 { border-color: var(--accent); box-shadow: 0 0 26px rgba(34,211,238,.45), inset 0 0 26px rgba(34,211,238,.25); }
.pad.on .floor .tk { background: repeating-conic-gradient(rgba(34,211,238,.9) 0 1.2deg, transparent 1.2deg 7.5deg); }
.pad.on .floor .disk { background: radial-gradient(circle, rgba(34,211,238,.55), transparent 70%); }
.pad.on .floor::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: padrip 2.8s ease-out infinite; }
@keyframes padrip { from { transform: scale(.35); opacity: .9; } to { transform: scale(1.12); opacity: 0; } }
.beam { position: absolute; left: 50%; bottom: 46%; width: 9rem; height: 0; translate: -50% 0; opacity: 0; pointer-events: none; transition: height .9s cubic-bezier(.2,.8,.2,1), opacity .6s;
  background: linear-gradient(to top, rgba(34,211,238,.42), rgba(34,211,238,0)); clip-path: polygon(22% 100%, 78% 100%, 100% 0, 0 0); }
.pad.on .beam { height: 11rem; opacity: 1; }
.pbtn { position: absolute; left: 50%; top: 45%; translate: -50% -50%; width: 7.8rem; height: 7.8rem; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; }
.pbtn .top { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; color: #8a9bb1; transition: transform .16s cubic-bezier(.3,1.5,.5,1), box-shadow .16s, background .4s, color .4s;
  background: radial-gradient(circle at 34% 24%, #41536c, #1c2839 72%); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), inset 0 -8px 16px rgba(0,0,0,.5), 0 1px 0 rgb(35,48,68), 0 2px 0 rgb(33,45,64), 0 3px 0 rgb(30,42,60), 0 4px 0 rgb(28,39,56), 0 5px 0 rgb(25,36,52), 0 6px 0 rgb(23,32,48), 0 7px 0 rgb(20,29,44), 0 8px 0 rgb(18,26,40), 0 9px 0 rgb(15,23,36), 0 10px 0 rgb(13,20,32); }
.pbtn .top::before { content: ""; position: absolute; inset: .75rem; border-radius: 50%; border: 1.5px solid rgba(148,163,184,.32); transition: border-color .4s; }
.pbtn .top svg { width: 2.7rem; height: 2.7rem; position: relative; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.pbtn:hover .top { transform: translateY(-3px); }
.pbtn:active .top, .pad.on .pbtn .top { transform: translateY(8px); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), inset 0 -8px 16px rgba(0,0,0,.5), 0 1px 0 rgb(25,36,52), 0 2px 0 rgb(13,20,32); }
.pad.on .pbtn .top { color: #05303b; background: radial-gradient(circle at 34% 24%, #a5f8ff, #22d3ee 55%, #0a8ca8); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -8px 16px rgba(0,80,100,.4), 0 1px 0 rgb(14,95,114), 0 2px 0 rgb(9,70,88), 0 0 60px rgba(34,211,238,.75); }
.pad.on .pbtn .top::before { border-color: rgba(255,255,255,.45); }
.pad.on .pbtn .top svg { filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); }
.pad-hint { position: absolute; left: 0; right: 0; bottom: -.3rem; text-align: center; font-size: .82rem; color: #8fa0b5; transition: color .5s; }
.pad.on .pad-hint { color: #8bf0ff; }
.hero .comic { margin-top: 2.5rem; }
@media (max-width: 34rem) { .pad { height: 16rem; } .pbtn { width: 6.8rem; height: 6.8rem; } .pbtn .top svg { width: 2.3rem; height: 2.3rem; } }
@media (prefers-reduced-motion: reduce) { .floor .f2, .floor .tk, .pad.on .floor::after { animation: none !important; } .pad-scene { transition: none; } }