/* نگاه نو — آزمایشگاه تعاملی + عناصر زنده‌ی صفحه‌ی اول (از متغیرهای public.css استفاده می‌کند؛ هم تیره هم روشن) */
:root{--lab-a:#60a5fa;--lab-b:#3b82f6;--lab-grad:linear-gradient(135deg,#3b82f6,#2563eb)}
.lab-sec{position:relative}
.lab-sub{color:var(--muted);margin-top:8px}
.lab{margin-top:28px;border-radius:30px;padding:22px;background:linear-gradient(155deg,rgba(var(--fx),.07),rgba(var(--sf),.78) 45%);border:1px solid rgba(var(--fx),.12);box-shadow:0 40px 80px -50px rgba(var(--sh),.9),inset 0 1px 0 rgba(var(--fx),.1);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:relative;overflow:hidden;overflow:clip}
.lab::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;left:-120px;top:-160px;background:radial-gradient(circle,rgba(59,130,246,.22),transparent 65%);pointer-events:none}
.lab::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-140px;bottom:-180px;background:radial-gradient(circle,rgba(59,130,246,.24),transparent 65%);pointer-events:none}
.lab>*{position:relative;z-index:1}
.lab-tabs{position:relative;display:flex;gap:6px;padding:6px;border-radius:20px;background:rgba(var(--fx),.06);border:1px solid rgba(var(--fx),.08);margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.lab-tabs button{flex:1;min-width:max-content;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:0;border-radius:15px;background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:14px;cursor:pointer;position:relative;z-index:2;transition:color .25s}
.lab-tabs button.on{color:#fff}
.lab-ink{position:absolute;z-index:1;top:6px;bottom:6px;border-radius:15px;background:var(--lab-grad);box-shadow:0 12px 26px -12px rgba(37,99,235,.8);transition:inset-inline-start .35s cubic-bezier(.34,1.3,.5,1),width .35s cubic-bezier(.34,1.3,.5,1)}
.lab-pane{display:none;animation:labIn .5s cubic-bezier(.2,.7,.2,1)}
.lab-pane.on{display:block}
@keyframes labIn{from{opacity:0;transform:translateY(14px)}}

.fd-progress{height:6px;border-radius:6px;background:rgba(var(--fx),.1);overflow:hidden;margin-bottom:22px}
.fd-progress i{display:block;height:100%;width:0;border-radius:6px;background:var(--lab-grad);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.fd-step{display:none}.fd-step.on{display:block;animation:labIn .45s cubic-bezier(.2,.7,.2,1)}
.fd-step h3{font-size:1.2rem;margin-bottom:16px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.opts button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px 18px;border-radius:20px;border:1px solid rgba(var(--fx),.12);background:rgba(var(--fx),.04);color:var(--ink);font:inherit;font-weight:800;font-size:15px;cursor:pointer;text-align:start;transition:transform .3s cubic-bezier(.34,1.4,.5,1),border-color .2s,background .2s,box-shadow .3s}
.opts button b{font-size:26px;line-height:1.3}
.opts button small{color:var(--muted);font-weight:500;font-size:12.5px}
.opts button:hover{transform:translateY(-5px);border-color:#3b82f6;background:rgba(59,130,246,.1);box-shadow:0 20px 36px -22px rgba(59,130,246,.8)}
.opts button.sel{border-color:#3b82f6;background:rgba(59,130,246,.18)}
.fd-result{text-align:center;padding:10px 0}
.fd-badge{display:inline-block;padding:6px 16px;border-radius:999px;background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.45);color:#3b82f6;font-weight:800;font-size:13px;margin-bottom:12px}
.fd-result h3{font-size:1.6rem;margin-bottom:8px}
.fd-result p{color:var(--muted);max-width:620px;margin:0 auto 14px}
.fd-result ul{list-style:none;padding:0;margin:0 auto 20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:720px}
.fd-result li{padding:8px 16px;border-radius:999px;background:rgba(var(--fx),.06);border:1px solid rgba(var(--fx),.1);font-weight:700;font-size:13.5px;color:var(--ink);animation:labIn .5s both}
.fd-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.calc{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.calc-in label{display:flex;justify-content:space-between;font-weight:800;color:var(--ink);margin:14px 0 8px;font-size:14px}
.calc-in label:first-child{margin-top:0}
.calc-in label b{color:#3b82f6;font-size:1.05rem}
.calc-in input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:linear-gradient(270deg,#3b82f6 var(--p,50%),rgba(var(--fx),.14) var(--p,50%));outline:0;cursor:pointer}
.calc-in input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid #3b82f6;box-shadow:0 6px 16px -4px rgba(37,99,235,.8);transition:transform .2s}
.calc-in input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
.calc-in input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #3b82f6}
.calc-out{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.calc-ring{position:relative;width:170px;height:170px}
.calc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.calc-ring .rb{fill:none;stroke:rgba(var(--fx),.12);stroke-width:9}
.calc-ring .rf{fill:none;stroke:url(#none);stroke:#3b82f6;stroke-width:9;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1),stroke .4s;filter:drop-shadow(0 0 8px rgba(59,130,246,.55))}
.calc-ring>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.calc-ring strong{font-size:2.3rem;line-height:1.2;color:var(--ink);font-weight:900}
.calc-ring small{color:var(--muted);font-size:12px}
.calc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.calc-stats div{padding:12px 8px;border-radius:16px;background:rgba(var(--fx),.05);border:1px solid rgba(var(--fx),.08)}
.calc-stats b{display:block;font-size:1.25rem;color:var(--ink);font-weight:900}
.calc-stats span{font-size:11.5px;color:var(--muted)}
.calc-tip{color:var(--ink2);font-size:14px;min-height:28px;margin:0}
.lab-note{margin:18px 0 0;text-align:center;color:var(--dim);font-size:12.5px}

.rd{display:grid;grid-template-columns:1.3fr 1fr;gap:26px;align-items:center}
.rd-list{display:flex;flex-direction:column;gap:10px}
.rd-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;border:1px solid rgba(var(--fx),.1);background:rgba(var(--fx),.04);cursor:pointer;font-weight:700;color:var(--ink);transition:transform .25s cubic-bezier(.34,1.4,.5,1),border-color .2s,background .2s}
.rd-item:hover{transform:translateX(-4px);border-color:rgba(59,130,246,.5)}
.rd-item input{display:none}
.rd-box{width:24px;height:24px;border-radius:8px;border:2px solid rgba(var(--fx),.3);flex-shrink:0;display:grid;place-items:center;transition:all .25s cubic-bezier(.34,1.4,.5,1)}
.rd-item input:checked+.rd-box{background:var(--lab-grad);border-color:transparent;transform:scale(1.1)}
.rd-item input:checked+.rd-box::after{content:"✓";color:#fff;font-size:14px;font-weight:900}
.rd-item:has(input:checked){border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.1)}
.rd-out{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}

/* دکمه‌ی شناور و نوار پیشرفت اسکرول */
.hx-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:200;pointer-events:none}
.hx-progress i{display:block;height:100%;width:100%;transform-origin:right center;transform:scaleX(var(--p,0));background:var(--lab-grad);box-shadow:0 0 12px rgba(59,130,246,.7)}
.hx-fab{position:fixed;left:20px;bottom:20px;z-index:150;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hx-fab-main{width:58px;height:58px;border-radius:20px;border:0;background:var(--lab-grad);color:#fff;font-size:24px;cursor:pointer;box-shadow:0 20px 40px -14px rgba(37,99,235,.8);transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
.hx-fab-main:hover{transform:scale(1.08) rotate(-6deg)}
.hx-fab.open .hx-fab-main{transform:rotate(45deg)}
.hx-fab-menu{display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(14px) scale(.95);pointer-events:none;transition:all .3s cubic-bezier(.34,1.4,.5,1)}
.hx-fab.open .hx-fab-menu{opacity:1;transform:none;pointer-events:auto}
.hx-fab-menu a{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:16px;background:rgba(var(--sf),.92);border:1px solid rgba(var(--fx),.14);color:var(--ink);font-weight:800;font-size:13.5px;box-shadow:0 14px 30px -16px rgba(var(--sh),.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .2s,border-color .2s;white-space:nowrap}
.hx-fab-menu a:hover{transform:translateX(6px);border-color:#3b82f6}
#hxParticles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero{position:relative}.hero>.container{position:relative;z-index:1}

@media(max-width:820px){.calc,.rd{grid-template-columns:1fr}.lab{padding:14px;border-radius:24px}.calc-ring{width:150px;height:150px}.hx-fab{left:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){.lab-pane,.fd-step,.fd-result li{animation:none}.lab-ink,.calc-ring .rf{transition:none}}