:root{
  --night:#0F1B2D;--night-2:#172741;--night-3:#22365A;
  --white:#FFFFFF;--mist:#EEF2F7;--ink:#0F1B2D;--soft:#64718A;--line:#DDE3EC;
  --gold:#D4A74A;--gold-2:#EBC56E;--turq:#3FB8AF;--rose:#D9534F;
  --font:'Vazirmatn',Tahoma,sans-serif;--r:10px;--ease:cubic-bezier(.22,.8,.24,1);
}
:root[lang=en]{--font:'Outfit','Vazirmatn',sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.75}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
[lang=en] .fa,[lang=fa] .en{display:none!important}
.ltr{direction:ltr;unicode-bidi:isolate}
[dir=rtl] h1.ltr,[dir=rtl] h3.ltr,[dir=rtl] b.ltr{text-align:right!important}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
[dir=rtl] .flip{transform:scaleX(-1)}

/* header (on night) */
header{position:fixed;inset:0 0 auto;z-index:30;color:#fff;transition:background .4s,box-shadow .4s,height .4s}
header.solid{background:rgba(15,27,45,.94);backdrop-filter:blur(12px);box-shadow:0 10px 30px -20px #000}
.top{display:flex;align-items:center;gap:36px;height:84px;transition:height .4s}
header.solid .top{height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:26px}
[lang=en] .brand{font-weight:800;letter-spacing:-.02em}
.brand svg{color:var(--gold);transition:transform 1s var(--ease)}.brand:hover svg{transform:rotate(90deg)}
.menu{display:flex;gap:6px;font-weight:500;font-size:15px}
.menu a{padding:8px 14px;border-radius:var(--r);transition:background .2s,color .2s}
.menu a:hover{background:rgba(255,255,255,.08);color:var(--gold-2)}
.acts{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.ib{position:relative;width:44px;height:44px;border:0;background:rgba(255,255,255,.06);border-radius:50%;display:grid;place-items:center;transition:background .2s,transform .2s}
.ib:hover{background:var(--gold);color:var(--night);transform:translateY(-2px)}
.langb{width:auto;padding:0 16px;border-radius:22px;display:flex;gap:8px;font-weight:600;font-size:14px}
.badge{position:absolute;top:-2px;inset-inline-end:-2px;min-width:20px;height:20px;border-radius:10px;background:var(--gold);color:var(--night);font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px}
.badge.bump{animation:bump .5s var(--ease)}@keyframes bump{40%{transform:scale(1.55)}}

/* hero slider */
.hero{position:relative;background:var(--night);color:#fff;overflow:hidden;padding-top:84px}
.glow{position:absolute;width:700px;height:700px;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;transition:background 1s}
.glow.a{top:-260px;inset-inline-end:-160px;background:var(--turq);animation:float1 14s ease-in-out infinite}
.glow.b{bottom:-360px;inset-inline-start:-200px;background:var(--gold);opacity:.18;animation:float1 18s ease-in-out infinite reverse}
@keyframes float1{50%{transform:translate(60px,40px) scale(1.1)}}
.stars-bg{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E")}
.slides{position:relative;height:600px}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;pointer-events:none}
.slide.on{pointer-events:auto}
.slide .txt>*{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.slide.on .txt>*{opacity:1;transform:none}
.slide.on .txt>*:nth-child(2){transition-delay:.1s}.slide.on .txt>*:nth-child(3){transition-delay:.2s}.slide.on .txt>*:nth-child(4){transition-delay:.3s}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;background:rgba(212,167,74,.15);color:var(--gold-2);font-size:14px;font-weight:600}
.chip svg.i{width:16px;height:16px}
.slide h1,.slide h2.h{margin:18px 0 14px;font-size:54px;line-height:1.4;font-weight:900}
[lang=en] .slide h1,[lang=en] .slide h2.h{font-size:58px;line-height:1.08;letter-spacing:-.03em;font-weight:800}
.slide p{color:#B9C4D8;font-size:19px;max-width:40ch;margin:0 0 30px}
.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;border:0;border-radius:27px;font-weight:700;font-size:16px;transition:transform .25s var(--ease),background .2s,box-shadow .25s}
.btn:hover{transform:translateY(-3px)}
.btn-gold{background:var(--gold);color:var(--night);box-shadow:0 14px 30px -12px rgba(212,167,74,.9)}
.btn-gold:hover{background:var(--gold-2)}
.btn-glass{color:#fff;background:rgba(255,255,255,.08);margin-inline-start:10px}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}[dir=rtl] .btn:hover .arrow{transform:scaleX(-1) translateX(5px)}
.slide .art{position:relative;height:100%;display:grid;place-items:center}
.slide .art .disc{position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid rgba(212,167,74,.35);transform:scale(.6);opacity:0;transition:all 1.2s var(--ease)}
.slide .art .disc::after{content:"";position:absolute;inset:30px;border-radius:50%;border:1px dashed rgba(255,255,255,.18);animation:spin 40s linear infinite}
@keyframes spin{to{rotate:360deg}}
.slide.on .art .disc{transform:none;opacity:1}
.slide .art img{position:relative;width:250px;border-radius:4px;box-shadow:0 40px 70px -24px #000;transform:translateY(60px) rotate(8deg);opacity:0;transition:transform 1s var(--ease) .15s,opacity .8s .15s}
.slide.on .art img{transform:rotate(-4deg);opacity:1;animation:bob 6s ease-in-out 1.2s infinite}
@keyframes bob{50%{transform:rotate(-4deg) translateY(-14px)}}
.slide .art img.back{position:absolute;width:200px;transform:translate(100px,30px) rotate(12deg);opacity:0;filter:brightness(.6)}
[dir=rtl] .slide .art img.back{transform:translate(-100px,30px) rotate(-12deg)}
.slide.on .art img.back{opacity:1;animation:none}
.hctl{position:relative;display:flex;align-items:center;gap:20px;padding-bottom:40px}
.bars{display:flex;gap:10px;flex:1;max-width:420px}
.bars button{flex:1;height:4px;border:0;padding:0;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.bars button i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
[dir=rtl] .bars button i{transform-origin:right}
.bars button.on i{animation:fill var(--dur,6s) linear forwards}
.bars button.past i{transform:none}
@keyframes fill{to{transform:scaleX(1)}}
.hctl .nb{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;display:grid;place-items:center;transition:background .2s,color .2s}
.hctl .nb:hover{background:var(--gold);color:var(--night);border-color:var(--gold)}
.count{font-variant-numeric:tabular-nums;color:#8C9AB5;font-size:14px}

/* search band */
.finder{position:relative;z-index:3;margin-top:-34px}
.finder form{display:flex;align-items:center;gap:12px;background:#fff;border-radius:40px;padding:8px;padding-inline-start:24px;box-shadow:0 24px 50px -24px rgba(15,27,45,.45)}
.finder input{flex:1;border:0;font:inherit;font-size:17px;outline:none;min-width:0}
.finder svg.i{color:var(--soft)}
.finder .btn{height:50px}
.quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;font-size:14px;color:var(--soft)}
.quick a{padding:4px 12px;border-radius:16px;background:var(--mist);transition:background .2s,color .2s}
.quick a:hover{background:var(--night);color:#fff}

section{padding-top:96px}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px}
h2{margin:0;font-size:34px;font-weight:900;line-height:1.4}
[lang=en] h2{font-weight:800;letter-spacing:-.02em;line-height:1.2}
.head p{margin:4px 0 0;color:var(--soft)}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--night)}
.more:hover{color:var(--gold)}

/* subject orbs */
.subs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sub{position:relative;overflow:hidden;border-radius:var(--r);padding:30px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;background:var(--night);color:#fff;isolation:isolate}
.sub::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;inset-inline-end:-80px;top:-80px;background:var(--c);opacity:.35;filter:blur(30px);z-index:-1;transition:transform .6s var(--ease),opacity .6s}
.sub:hover::before{transform:scale(1.6);opacity:.6}
.sub .ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--c);transition:transform .6s var(--ease),background .3s}
.sub:hover .ic{transform:rotate(360deg);background:#fff}
.sub b{font-size:24px;display:block}.sub small{color:#AAB6CC}
.sub .go{position:absolute;bottom:30px;inset-inline-end:30px;transition:transform .3s var(--ease)}
.sub:hover .go{transform:translateX(6px)}[dir=rtl] .sub:hover .go{transform:scaleX(-1) translateX(6px)}

/* tabs + grid */
.tabs{display:flex;gap:6px;background:var(--mist);padding:5px;border-radius:26px;position:relative}
.tabs button{white-space:nowrap;flex:none;position:relative;z-index:1;border:0;background:none;padding:8px 18px;border-radius:22px;font-weight:600;font-size:14px;color:var(--soft);transition:color .3s}
.tabs button.on{color:#fff}
.tabs .pill{position:absolute;top:5px;bottom:5px;border-radius:22px;background:var(--night);transition:all .45s var(--ease)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.card{transition:opacity .4s,transform .4s var(--ease)}
.card.hide{display:none}.card.enter{opacity:0;transform:translateY(20px) scale(.97)}
.cv{position:relative;aspect-ratio:3/4;border-radius:var(--r);background:var(--mist);display:grid;place-items:center;overflow:hidden;transition:background .4s}
.card:hover .cv{background:var(--night)}
.cv img{width:64%;border-radius:3px;box-shadow:0 18px 30px -14px rgba(15,27,45,.6);transition:transform .6s var(--ease)}
.card:hover .cv img{transform:translateY(-8px) rotate(-3deg) scale(1.05)}
.cv .tools{position:absolute;inset-inline-end:12px;top:12px;display:flex;flex-direction:column;gap:8px}
.cv .tools button{width:38px;height:38px;border:0;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--night);opacity:0;transform:translateX(16px);transition:all .35s var(--ease)}
[dir=rtl] .cv .tools button{transform:translateX(-16px)}
.card:hover .cv .tools button,.cv .tools button.on{opacity:1;transform:none}
.cv .tools button:nth-child(2){transition-delay:.05s}.cv .tools button:nth-child(3){transition-delay:.1s}
.cv .tools button:hover{background:var(--gold)}
.cv .tools .fav.on{color:var(--rose)}.cv .tools .fav.on svg{fill:var(--rose)}
.card h3{font-size:15px;font-weight:700;line-height:1.5;margin:14px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:45px}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.meta .s{font-size:13px;color:var(--soft)}
.meta .p{font-weight:800;font-variant-numeric:tabular-nums}
.addb{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;transition:all .25s}
.addb:hover,.addb.done{background:var(--gold);border-color:var(--gold);color:var(--night)}
.addb svg.i{width:18px;height:18px}

/* coverflow slider */
.flowsec{background:var(--night);color:#fff;margin-top:96px;padding:88px 0 72px;overflow:hidden;position:relative}
.flowsec h2{color:#fff}.flowsec .head p{color:#9AA8C2}
.flow{position:relative;height:420px;perspective:1400px;user-select:none;touch-action:pan-y}
.flow .it{position:absolute;top:0;left:50%;width:230px;margin-left:-115px;transition:transform .8s var(--ease),opacity .8s,filter .8s;cursor:grab}
.flow .it img{width:100%;border-radius:4px;box-shadow:0 30px 60px -24px #000;display:block;-webkit-user-drag:none}
.flow .it .cap{text-align:center;margin-top:16px;opacity:0;transition:opacity .4s}
.flow .it.c .cap{opacity:1}
.flow .it .cap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;text-align:center!important}.flow .it .cap span{color:var(--gold-2);font-weight:700}
.flowctl{display:flex;justify-content:center;gap:12px;margin-top:20px}
.flowctl button{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;display:grid;place-items:center;transition:all .2s}
.flowctl button:hover{background:var(--gold);color:var(--night);border-color:var(--gold)}

/* why us */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.w{padding:28px;border:1px solid var(--line);border-radius:var(--r);transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.w:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(15,27,45,.5)}
.w .ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(212,167,74,.14);color:var(--gold);margin-bottom:16px}
.w:hover .ic svg{animation:wig .6s var(--ease)}
@keyframes wig{30%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}}
.w b{display:block;font-size:17px;margin-bottom:4px}.w p{margin:0;color:var(--soft);font-size:14px}

/* newsletter */
.nl{margin-top:96px}
.nl .box{position:relative;overflow:hidden;border-radius:var(--r);padding:56px;background:linear-gradient(120deg,var(--night) 0%,var(--night-3) 100%);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.nl .box .big{position:absolute;width:320px;height:320px;inset-inline-end:-80px;bottom:-120px;color:var(--gold);opacity:.12;animation:spin 60s linear infinite}
.nl h2{color:#fff}.nl p{color:#AAB6CC;margin:6px 0 0}
.nl form{position:relative;display:flex;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:30px;padding:6px}
.nl input{flex:1;min-width:0;border:0;background:none;color:#fff;font:inherit;padding:0 16px;outline:none}
.nl input::placeholder{color:#8C9AB5}
.nl .btn{height:48px}

footer{margin-top:96px;background:var(--night);color:#AAB6CC;font-size:15px}
.foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:40px;padding:72px 0 40px}
.foot .brand{color:#fff}
.foot h4{margin:0 0 14px;color:#fff;font-size:16px}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:8px 0}
.foot a:hover{color:var(--gold-2)}
.ct{display:flex;gap:10px;align-items:center;margin:8px 0}.ct svg.i{width:18px;height:18px;color:var(--gold)}
.social{display:flex;gap:8px;margin-top:18px}
.social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#fff;transition:all .25s var(--ease)}
.social a:hover{background:var(--gold);color:var(--night);transform:translateY(-4px) rotate(-8deg)}
.legal{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.totop{position:fixed;bottom:24px;inset-inline-end:24px;width:50px;height:50px;border-radius:50%;border:0;background:var(--gold);color:var(--night);display:grid;place-items:center;box-shadow:0 12px 24px -10px rgba(212,167,74,.9);z-index:40;opacity:0;transform:translateY(20px);transition:all .4s var(--ease)}
.totop.show{opacity:1;transform:none}.totop svg{transform:rotate(-90deg)}

.rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.stg>*{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stg.in>*{opacity:1;transform:none}
.toast{position:fixed;top:96px;left:50%;translate:-50% -160px;background:#fff;color:var(--ink);padding:14px 22px;border-radius:30px;display:flex;gap:10px;align-items:center;z-index:60;transition:translate .5s var(--ease);font-weight:600;box-shadow:0 20px 40px -16px rgba(15,27,45,.5)}
.toast.show{translate:-50% 0}.toast svg.i{color:#fff;background:var(--turq);border-radius:50%;padding:3px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,.stg>*,.slide.on .txt>*{opacity:1!important;transform:none!important}}
@media (max-width:1000px){
  .wrap{padding:0 16px}
  .menu{display:none}
  .top{gap:12px}.acts{gap:4px}.acts a[aria-label=Account]{display:none}.ib{width:40px;height:40px}.langb{width:auto;padding:0 12px}
  .sub .go{display:none}
  .slides{height:720px}
  .slide{grid-template-columns:minmax(0,1fr);gap:0;align-content:start;padding-top:24px}
  .slide h1,.slide h2.h,[lang=en] .slide h1,[lang=en] .slide h2.h{font-size:36px}
  .slide p{font-size:17px}
  .slide .art{height:330px}.slide .art .disc{width:300px;height:300px}.slide .art img{width:180px}.slide .art img.back{display:none}
  .btn-glass{margin:10px 0 0}
  .subs,.why{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sub{padding:20px;min-height:170px}.w{padding:18px}
  .head{flex-wrap:wrap}
  .tabs{overflow-x:auto;max-width:100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
  .cv .tools button{opacity:1;transform:none}
  .flow .it{width:170px;margin-left:-85px}.flow{height:400px}
  .nl .box{grid-template-columns:minmax(0,1fr);padding:32px 20px}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot>div:first-child{grid-column:1/-1}
  .finder .btn span{display:none}
}