@font-face{font-family:BN;src:local("B Nazanin"),local("BNazanin"),url(../fonts/BNazanin.woff2) format("woff2"),url(../fonts/BNazanin.ttf) format("truetype");font-display:swap}
:root{--bg:#faf9f6;--bg2:#f1efe9;--tx:#12162a;--mu:#5d6074;--nv:#1d2b6b;--or:#e8702a;--ln:rgba(18,22,42,.14);--pn:#1d2b6b;--pn2:#14141c;--r:26px;--f:BN,"B Nazanin",Nazanin,"Noto Naskh Arabic","Times New Roman",serif}
[data-theme=dark]{--bg:#0a0e22;--bg2:#10163a;--tx:#eceae4;--mu:#a3a7bd;--nv:#8fa0f0;--ln:rgba(236,234,228,.16);--pn:#18235a;--pn2:#04050d}
html[lang=en]{--f:"Iowan Old Style","Palatino Linotype",Georgia,serif}
html[lang=zh]{--f:"Songti SC","Noto Serif CJK SC","Noto Serif SC",SimSun,serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}html[lang=fa]{font-size:112%}
body{background:var(--bg);color:var(--tx);font:400 1.05rem/1.9 var(--f);transition:background .4s,color .4s;overflow-x:hidden}
a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.wrap{width:min(1100px,92%);margin-inline:auto}
.top{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:.4rem 1.4rem;flex-wrap:wrap;padding:.5rem 4%;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--ln)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;margin-inline-end:auto}
.badge{width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--ln)}
.top nav{display:flex;gap:1.3rem;font-size:.95rem}
.top nav a{position:relative;color:var(--mu);transition:color .3s}
.top nav a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--or);transform:scaleX(0);transition:transform .35s}
.top nav a:hover,.top nav a.on{color:var(--tx)}.top nav a:hover::after,.top nav a.on::after{transform:scaleX(1)}
.tools{display:flex;gap:.5rem}
select,button,input,textarea{font:inherit;color:var(--tx)}
select,#theme{background:transparent;border:1px solid var(--ln);border-radius:99px;padding:.1rem .7rem;cursor:pointer;line-height:1.6}
#theme{width:2.2rem;padding:0}select option{color:#000}
h1,h2,h3{font-weight:700;line-height:1.35}
.hero{text-align:center;padding:clamp(3rem,8vw,6rem) 0 4rem;overflow:hidden;background:radial-gradient(60% 50% at 50% 28%,color-mix(in srgb,var(--nv) 16%,transparent),transparent)}
.halo{position:relative;width:min(280px,66vw);aspect-ratio:1;margin:1.5rem auto 3rem}
.halo img{width:100%;height:100%;border-radius:50%;background:#fff;box-shadow:0 30px 80px -20px rgba(29,43,107,.55);animation:pop 1.3s cubic-bezier(.2,.8,.2,1) both}
.halo svg{position:absolute;left:-14%;top:-14%;width:128%;height:128%;color:var(--or);animation:spin 70s linear infinite}
.halo svg+svg{left:-27%;top:-27%;width:154%;height:154%;color:var(--nv);animation:spin 110s linear infinite reverse}
.hero h1{font-size:clamp(2.4rem,7vw,4.8rem)}
.hero .slogan{font-size:clamp(1.2rem,3vw,1.7rem);color:var(--or);margin-top:.4rem}
.hero .lead{max-width:34em;margin:1rem auto 2rem;color:var(--mu)}
.hero>:not(.halo){animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.hero h1{animation-delay:.5s}.hero .slogan{animation-delay:.7s}.hero .lead{animation-delay:.9s}.hero .btns{animation-delay:1.1s}
.btn{display:inline-block;padding:.55rem 1.8rem;border-radius:99px;background:var(--or);color:#fff;border:1px solid var(--or);cursor:pointer;margin:.3rem;transition:transform .3s,background .3s,color .3s}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px -10px var(--or)}
.btn.ol{background:transparent;color:var(--tx);border-color:var(--ln)}.btn.ol:hover{border-color:var(--or);box-shadow:none}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-block:1px solid var(--ln);text-align:center}
.facts div{padding:2rem 1rem}.facts b{display:block;font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--nv)}.facts span{color:var(--mu)}
section{padding:clamp(3rem,7vw,5.5rem) 0}section>.wrap>h2{font-size:clamp(1.8rem,4vw,2.8rem);text-align:center;margin-bottom:2.5rem}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:1.2rem}
.panel{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r);padding:clamp(2rem,5vw,3.4rem);min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;color:#f4f2ec;background:var(--pn)}
.panel:nth-child(2){background:var(--pn2)}
.panel::before{content:"";position:absolute;z-index:-1;width:340px;height:340px;border-radius:50%;border:46px dotted rgba(255,255,255,.09);inset-block-start:-100px;inset-inline-end:-100px;transition:transform 1.4s}
.panel:hover::before{transform:rotate(120deg) scale(1.12)}
.panel h3{font-size:2.1rem}.panel p{color:#c6c9dc;max-width:30em}.lnk{color:var(--or);font-weight:700;margin-top:1rem}
.why{background:var(--bg2)}.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem}
.cols div{border-top:2px solid var(--or);padding-top:1rem}.cols h3{font-size:1.35rem}.cols p,.row p{color:var(--mu)}
.cta{text-align:center}.cta h2{max-width:20em;margin:0 auto 1.5rem;font-size:clamp(1.6rem,3.6vw,2.4rem)}
.phead{text-align:center;padding:clamp(3.5rem,8vw,6rem) 4% 1rem}.phead h1{font-size:clamp(2.2rem,6vw,4rem)}.phead p{color:var(--mu);max-width:34em;margin:.8rem auto 0}
.row{display:grid;grid-template-columns:1fr 2fr;gap:1rem 3rem;padding:2.2rem 0;border-top:1px solid var(--ln)}.row h2{font-size:1.7rem;color:var(--nv)}
.chs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.ch{display:flex;flex-direction:column;padding:1.1rem 1.4rem;border:1px solid var(--ln);border-radius:20px;background:var(--bg);cursor:pointer;text-align:start;transition:transform .35s,border-color .35s}
.ch:hover{transform:translateY(-5px);border-color:var(--or)}.ch span,.ch i{color:var(--mu);font-style:normal;font-size:.9rem}.ch b{word-break:break-all;direction:ltr;text-align:start;font-weight:600}
form{max-width:640px;margin:3rem auto 0;display:grid;gap:.9rem}form h2{text-align:center;font-size:1.7rem}
input,textarea{width:100%;padding:.7rem 1rem;background:var(--bg);border:1px solid var(--ln);border-radius:14px}textarea{min-height:140px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--or)}form .btn{justify-self:center}
footer{border-top:1px solid var(--ln);padding:2.5rem 0;text-align:center;color:var(--mu);font-size:.95rem}footer p:first-child{color:var(--or);font-size:1.15rem}
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s,transform .9s}.rv.in{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{from{opacity:0;transform:translateY(26px)}}@keyframes pop{from{opacity:0;transform:scale(.7) rotate(-30deg)}}
@media(max-width:640px){.row{grid-template-columns:1fr}
.top{flex-wrap:nowrap;gap:.5rem;padding:.3rem 3%;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.badge{width:30px;height:30px}.brand{min-width:0;gap:.4rem;font-size:.95rem;white-space:nowrap}.brand span{overflow:hidden;text-overflow:ellipsis}
select,#theme{font-size:.8rem;padding:0 .4rem;line-height:1.7}#theme{width:1.8rem}.tools{gap:.3rem;flex-shrink:0}
.top nav{position:fixed;inset-inline:0;bottom:0;z-index:9;justify-content:space-around;padding:.5rem 2%;font-size:.9rem;background:var(--bg);border-top:1px solid var(--ln)}
body{padding-bottom:3rem}.hero{padding-top:1.5rem}}
@media(prefers-reduced-motion:reduce){*,::before{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}