/* Mehrina Style — همه رنگ‌ها از --h و --s می‌آیند؛ JS آن‌ها را از روی لوگو استخراج می‌کند. */
@font-face{font-family:"Vazirmatn";src:url(../fonts/Vazirmatn-var.woff2) format("woff2-variations"),url(../fonts/Vazirmatn-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{--h:338;--s:42%;color-scheme:dark;
--bg:hsl(var(--h) calc(var(--s)*.5) 6%);--ink:hsl(var(--h) calc(var(--s)*.6) 96%);--mute:hsl(var(--h) calc(var(--s)*.4) 78%);
--a:hsl(var(--h) var(--s) 68%);--b:hsl(var(--h) var(--s) 84%);--c:hsl(var(--h) var(--s) 42%);
--glass:hsl(var(--h) var(--s) 90%/.07);--edge:hsl(var(--h) var(--s) 80%/.28);--shade:hsl(var(--h) var(--s) 4%/.7);
--f:"Vazirmatn",Tahoma,"Segoe UI",sans-serif}
[data-theme=light]{color-scheme:light;--bg:hsl(var(--h) calc(var(--s)*.8) 96%);--ink:hsl(var(--h) calc(var(--s)*.7) 14%);--mute:hsl(var(--h) calc(var(--s)*.4) 30%);
--a:hsl(var(--h) var(--s) 40%);--b:hsl(var(--h) var(--s) 66%);--c:hsl(var(--h) var(--s) 28%);
--glass:hsl(0 0% 100%/.62);--edge:hsl(var(--h) var(--s) 40%/.3);--shade:hsl(var(--h) var(--s) 40%/.22)}

*,*:before,*:after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.8;transition:background .5s,color .5s;min-height:100vh}
img{max-width:100%;height:auto}
a{color:var(--a)}
.sr-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:8px;top:-80px;z-index:9;padding:8px 14px;border-radius:10px;background:var(--a);color:var(--bg);text-decoration:none}
.skip:focus{top:8px}

/* ---------- پس‌زمینه سه‌بعدی */
.stage{position:fixed;inset:0;overflow:hidden;perspective:900px;z-index:0;pointer-events:none}
.stage:before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 18%,var(--glass),transparent 70%)}
.scarf{position:absolute;transition:opacity .6s;top:6%;left:50%;width:min(130vw,780px);height:34vh;margin-left:calc(min(130vw,780px)/-2);display:flex;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-8deg);opacity:.55;animation:sway 14s ease-in-out infinite alternate}
.scarf i{flex:1;background:linear-gradient(180deg,var(--b),var(--a) 45%,var(--c));box-shadow:0 18px 40px var(--shade);animation:wave 4.5s ease-in-out infinite;animation-delay:calc(var(--i)*-.28s);transform-origin:50% 0}
@keyframes wave{0%,100%{transform:translateZ(-26px) skewY(-7deg)}50%{transform:translateZ(34px) skewY(7deg)}}
@keyframes sway{to{transform:rotateX(52deg) rotateZ(6deg)}}
[data-theme=light] .scarf{opacity:.4}
.scrolled .stage{opacity:.35;transition:opacity .6s}
.waves{position:absolute;left:-10%;bottom:-6%;width:120%;height:34%;opacity:.5;animation:drift 18s ease-in-out infinite alternate}
.waves path{fill:none;stroke:var(--a);stroke-width:1.2}
@keyframes drift{to{transform:translateX(5%) translateY(-2%)}}
.p{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--b);box-shadow:0 0 8px var(--a);animation:rise linear infinite;opacity:0}
@keyframes rise{10%{opacity:.9}to{transform:translateY(-100vh);opacity:0}}

/* ---------- صفحه اول */
main{position:relative;z-index:1}
.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;padding:max(10px,env(safe-area-inset-top)) 16px max(10px,env(safe-area-inset-bottom));text-align:center}
.bar{align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:8px}
.langs{display:flex;gap:6px}
.langs a,#theme{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--edge);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font:700 13px/1 var(--f);text-decoration:none;cursor:pointer;transition:transform .3s,border-color .3s}
.langs a[aria-current]{border-color:var(--a);box-shadow:0 0 12px var(--a)}
.langs a:hover,#theme:hover{transform:translateY(-2px) rotateX(20deg)}
#theme{font-size:17px}
.hero{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0}
.logo{width:140px;max-height:24dvh;object-fit:contain;filter:drop-shadow(0 10px 22px var(--shade))}
.logo.l,[data-theme=light] .logo.d{display:none}
[data-theme=light] .logo.l{display:block}
h1{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
.h1-brand{font-size:clamp(.95rem,3.6vw,1.2rem);font-weight:700;color:var(--mute);letter-spacing:.01em}
.soon{font-size:clamp(1.9rem,8vw,3rem);font-weight:800;background:linear-gradient(100deg,var(--c) 20%,var(--b) 45%,var(--a) 55%,var(--c) 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite;padding:.08em 0}
@keyframes shine{to{background-position:-250% 0}}
.sub{font-size:.9rem;color:var(--mute);max-width:40ch;line-height:1.8}
.cd{direction:ltr;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,420px);perspective:700px}
.cd div{padding:10px 0 8px;border-radius:16px;border:1px solid var(--edge);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 28px var(--shade);transition:transform .5s;transform-style:preserve-3d}
.cd div:hover{transform:rotateX(14deg) rotateY(-16deg) translateZ(10px)}
.cd b{display:block;font-size:clamp(1.5rem,7vw,2.2rem);font-weight:800;color:var(--a);font-variant-numeric:tabular-nums;line-height:1.1}
.cd span{font-size:.72rem;color:var(--mute)}
#mh-form{position:relative;width:min(100%,420px);padding:12px;border-radius:20px;border:1px solid var(--edge);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 36px var(--shade);transform:rotateX(4deg);transform-origin:50% 100%}
.row{display:flex;gap:8px}
#mh-phone{flex:1;min-width:0;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--edge);background:var(--bg);color:var(--ink);font:inherit;font-size:1rem;direction:ltr;text-align:center}
#mh-phone::placeholder{color:var(--mute);opacity:.8}
input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.go{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border:0;border-radius:12px;font:inherit;font-weight:800;cursor:pointer;color:var(--bg);text-decoration:none;white-space:nowrap;background:linear-gradient(120deg,var(--b),var(--a) 55%,var(--c));box-shadow:0 8px 0 -2px var(--c),0 14px 20px var(--shade);transition:transform .2s,box-shadow .2s}
.go:hover{transform:translateY(-2px)}.go:active{transform:translateY(5px);box-shadow:0 2px 0 -2px var(--c)}.go:disabled{opacity:.6;cursor:wait}
#mh-msg{min-height:1.5em;margin-top:6px;font-size:.8rem;color:var(--mute)}
#mh-msg.ok{color:var(--b);font-weight:700}#mh-msg.err{color:var(--a);font-weight:700}
[data-theme=light] #mh-msg.ok{color:var(--c)}
.hp{position:absolute!important;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.more{font-size:.82rem;color:var(--mute);text-decoration:none;border-bottom:1px solid var(--edge);padding-bottom:2px}
.more span{display:inline-block;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}

/* ---------- بخش‌های محتوایی */
.sec{width:min(100% - 32px,1080px);margin:0 auto;padding:56px 0 8px;content-visibility:auto;contain-intrinsic-size:auto 700px}
.sec h2,.page-head h1{font-size:clamp(1.35rem,4.6vw,2rem);font-weight:800;line-height:1.4;margin-bottom:10px;background:linear-gradient(100deg,var(--b),var(--a) 60%,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.intro{color:var(--mute);max-width:70ch;margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{padding:18px 18px 16px;border-radius:18px;border:1px solid var(--edge);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 28px var(--shade);transition:transform .35s}
.grid .card:hover{transform:translateY(-4px) rotateX(4deg)}
.card h3{font-size:1.02rem;font-weight:800;color:var(--a);margin-bottom:6px;line-height:1.5}
.card p{font-size:.9rem;color:var(--mute)}
.steps{counter-reset:s}
.steps .card h3:before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:26px;height:26px;margin-inline-end:8px;border-radius:50%;background:var(--a);color:var(--bg);font-size:.8rem}
.faq details{border:1px solid var(--edge);border-radius:14px;background:var(--glass);margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--a);font-weight:800;transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 18px 16px;color:var(--mute);font-size:.92rem}
.cta{text-align:center;margin-top:26px}

/* ---------- پاورقی */
.site-foot{position:relative;z-index:1;margin-top:56px;border-top:1px solid var(--edge);background:linear-gradient(transparent,var(--glass))}
.foot-in{width:min(100% - 32px,1080px);margin:0 auto;padding:26px 0 calc(26px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-size:.84rem}
.foot-brand a{color:var(--ink);font-weight:800;text-decoration:none}
.foot-links,.foot-links ul{display:flex;flex-wrap:wrap;gap:14px;list-style:none;padding:0}
.foot-links a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--edge)}
.foot-links a:hover{color:var(--a)}
.copy{color:var(--mute);width:100%}

/* ---------- دیدگاه‌ها */
.comments{margin-top:28px}
.comment-list{list-style:none;padding:0}
.comment-list .comment{margin:12px 0;padding:12px;border:1px solid var(--edge);border-radius:12px}
.comment-form input:not([type=submit]):not([type=checkbox]),.comment-form textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--edge);background:var(--bg);color:var(--ink);font:inherit}
.comment-form .submit{height:44px;border:0;border-radius:12px;padding:0 18px;background:var(--a);color:var(--bg);font:inherit;font-weight:700;cursor:pointer}

/* ---------- صفحات داخلی */
.topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;width:min(100% - 32px,860px);margin:0 auto;padding:12px 0}
.topbar .logo{width:44px}
.page-wrap{width:min(100% - 32px,860px);margin:0 auto;padding:16px 0 20px;display:flex;flex-direction:column;gap:16px}
.page-wrap.center{min-height:80vh;justify-content:center;text-align:center}
.page-wrap.center .logo{width:96px;margin:0 auto 12px}
.entry h1,.entry .entry-title{font-size:clamp(1.3rem,4vw,1.8rem);line-height:1.5;margin-bottom:10px}
.entry .entry-title a{color:var(--ink);text-decoration:none}
.entry-content>*+*{margin-top:1em}
.entry-content h2,.entry-content h3{line-height:1.5;margin-top:1.4em}
.entry-content ul,.entry-content ol{padding-inline-start:1.4em}
.entry-content img,.thumb img{border-radius:14px}
.meta{color:var(--mute);font-size:.82rem;margin-bottom:10px}
.nav-links{display:flex;gap:8px;justify-content:center}
.page-numbers{padding:4px 12px;border-radius:10px;border:1px solid var(--edge);color:var(--ink);text-decoration:none}
.page-numbers.current{background:var(--a);color:var(--bg)}
.search-form{display:flex;gap:8px;margin-top:12px}
.search-field{flex:1;height:44px;border-radius:12px;border:1px solid var(--edge);background:var(--bg);color:var(--ink);padding:0 12px;font:inherit}
.search-submit{height:44px;border-radius:12px;border:0;padding:0 16px;background:var(--a);color:var(--bg);font:inherit;cursor:pointer}

@media(min-width:700px){.logo{width:170px}.screen{gap:14px}}
@media(max-height:640px){.screen .logo{width:90px}.screen .sub{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}