@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--bg:#f2eeff;--card:rgba(255,255,255,.72);--ink:#1b1740;--mut:#5d5883;--line:rgba(110,90,230,.25);--a:#6d5dfc;--b:#ff5fa2;--c:#35e0ff;--at:#5b4ae0;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#06041a;--card:rgba(22,16,52,.62);--ink:#f3efff;--mut:#aaa4d0;--line:rgba(150,130,255,.28);--at:#b3a8ff;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#06041a;--card:rgba(22,16,52,.62);--ink:#f3efff;--mut:#aaa4d0;--line:rgba(150,130,255,.28);--at:#b3a8ff;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;color:var(--ink);font:400 16px/2 "Vazirmatn",Tahoma,sans-serif;overflow-x:hidden}
.aura,.rings,.floor,.geo{position:fixed;pointer-events:none;z-index:-2}
.aura{inset:0;background:radial-gradient(520px 420px at 90% -3%,color-mix(in srgb,var(--a) 50%,transparent),transparent 70%),radial-gradient(480px 420px at -5% 32%,color-mix(in srgb,var(--c) 34%,transparent),transparent 70%),radial-gradient(560px 480px at 105% 78%,color-mix(in srgb,var(--b) 34%,transparent),transparent 70%)}
.rings{left:50%;top:-120px;width:min(1000px,230vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;opacity:.55;background:repeating-radial-gradient(circle,transparent 0 62px,color-mix(in srgb,var(--c) 60%,transparent) 62px 64px);-webkit-mask:radial-gradient(circle,#000 0,transparent 64%);mask:radial-gradient(circle,#000 0,transparent 64%)}
.floor{left:-60%;right:-60%;bottom:-40px;height:300px;opacity:.32;background:linear-gradient(var(--c) 1px,transparent 1px) 0 0/100% 34px,linear-gradient(90deg,var(--c) 1px,transparent 1px) 0 0/34px 100%;transform:perspective(420px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask:linear-gradient(transparent,#000 85%);mask:linear-gradient(transparent,#000 85%)}
.geo i{position:absolute;display:block;opacity:.55;animation:fl 9s ease-in-out infinite}
.geo i:nth-child(1){top:16%;inset-inline-start:6%;width:46px;height:46px;border:2px solid var(--c);border-radius:50%;box-shadow:0 0 18px var(--c)}
.geo i:nth-child(2){top:46%;inset-inline-end:5%;width:30px;height:30px;border:2px solid var(--b);transform:rotate(45deg);box-shadow:0 0 16px var(--b);animation-delay:-3s}
.geo i:nth-child(3){top:70%;inset-inline-start:8%;width:0;height:0;border-inline:14px solid transparent;border-bottom:24px solid var(--a);filter:drop-shadow(0 0 8px var(--a));animation-delay:-5s}
.geo i:nth-child(4){top:30%;inset-inline-end:10%;width:12px;height:12px;background:var(--c);border-radius:50%;box-shadow:0 0 14px var(--c);animation-delay:-2s}
@keyframes fl{50%{transform:translateY(-18px) rotate(12deg)}}
.wrap{max-width:720px;margin:auto;padding:0 16px 34px}
.top{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:6px 14px;border:1px solid var(--line);border-radius:99px;background:var(--card);backdrop-filter:blur(12px);font-size:13px}
.top a{color:var(--at);text-decoration:none;font-weight:600}
.hero{text-align:center;margin:20px 0 6px;position:relative}
.frame{position:relative;padding:2px;border-radius:22px;background:conic-gradient(from var(--ang),var(--c),var(--a),var(--b),var(--c));animation:spin 7s linear infinite}
.frame::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:inherit;filter:blur(22px);opacity:.7;z-index:-1}
.frame img{display:block;width:100%;height:auto;border-radius:20px}
@keyframes spin{to{--ang:360deg}}
.shot{isolation:isolate;position:relative;margin:6px 0 22px}
.shot.tall{max-width:84%;margin-inline:auto}
.hud,.wm{position:absolute;direction:ltr;unicode-bidi:isolate;font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:1.5px;color:#d8f6ff;background:rgba(6,4,26,.55);border:1px solid color-mix(in srgb,var(--c) 70%,transparent);border-radius:6px;padding:5px 8px;backdrop-filter:blur(6px)}
.hud{top:12px;left:12px}.wm{bottom:12px;right:12px;letter-spacing:.5px;opacity:.9}
.hud::before{content:"●";color:var(--c);margin-right:6px}
.orb{width:150px;height:150px;margin:10px auto 6px;border-radius:50%;display:grid;place-items:center;font:800 34px/1 ui-monospace,Menlo,sans-serif;letter-spacing:4px;direction:ltr;position:relative;border:2px solid var(--c);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 40%,transparent),transparent 70%);box-shadow:0 0 44px color-mix(in srgb,var(--c) 70%,transparent),inset 0 0 44px color-mix(in srgb,var(--b) 60%,transparent)}
.orb::after{content:"";position:absolute;inset:-22px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--c) 65%,transparent);animation:spinr 18s linear infinite}
@keyframes spinr{to{transform:rotate(360deg)}}
.kick{margin:20px 0 0;color:var(--at);letter-spacing:3px;font-size:13px;direction:ltr}
.hero h1{margin:2px 0 4px;font-size:34px;font-weight:800;line-height:1.55;background:linear-gradient(90deg,var(--ink),var(--at) 55%,var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--a) 55%,transparent))}
.hero p{margin:0;color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.chips span{padding:0 13px;border-radius:99px;font-size:13px;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(10px);box-shadow:0 0 14px -4px color-mix(in srgb,var(--c) 70%,transparent)}
section{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:24px;padding:20px 20px 10px;margin:18px 0;box-shadow:0 22px 50px -26px color-mix(in srgb,var(--a) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.14);animation:up .7s both}
h2{margin:0 0 12px;font-size:21px;font-weight:800}
h2::after{content:"";display:block;height:3px;width:54px;margin-top:4px;border-radius:3px;background:linear-gradient(90deg,var(--c),var(--a),var(--b));box-shadow:0 0 12px var(--c)}
.story p{margin:0 0 14px;text-align:justify}
.note{font-size:13px;color:var(--mut);border-inline-start:3px solid var(--c);padding-inline-start:10px;margin:6px 0 14px;line-height:1.9}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:12px}
.box{border:1px solid var(--line);border-radius:16px;padding:10px 14px;line-height:1.9;font-size:15px;background:linear-gradient(160deg,color-mix(in srgb,var(--a) 10%,transparent),transparent 60%)}
.box b{display:block;color:var(--at)}
h3{font-size:16px;margin:14px 0 6px;color:var(--at)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 12px}
.steps li{counter-increment:s;position:relative;padding:2px 42px 2px 0;margin-bottom:8px}
.steps li::before{content:counter(s,persian);position:absolute;inset-inline-start:0;top:6px;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;color:#fff;font-size:14px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 14px -2px var(--a)}
.tag{display:inline-block;font-size:12px;padding:0 10px;border-radius:99px;background:linear-gradient(135deg,var(--a),var(--b));color:#fff}
.team{border:1px solid var(--line);border-radius:16px;padding:10px 14px;margin-bottom:10px;font-size:15px}
.row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.pill{border:1px solid var(--line);border-radius:99px;padding:0 12px;font-size:14px;background:color-mix(in srgb,var(--a) 12%,transparent)}
.cta{margin:22px 0 6px;padding:20px;text-align:center;border-radius:24px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--a) 30%,transparent),color-mix(in srgb,var(--b) 26%,transparent));box-shadow:0 0 40px -12px var(--a)}
.cta b{display:block;font-size:18px}
.cta small{color:var(--mut)}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.btn{flex:1 1 200px;padding:6px 14px;border-radius:14px;text-decoration:none;color:#fff;font-weight:600;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 8px 24px -8px var(--a)}
.btn.alt{background:rgba(255,255,255,.08);border:1px solid var(--c);color:var(--ink);box-shadow:0 0 18px -6px var(--c)}
.foot{text-align:center;color:var(--mut);font-size:13px;padding:8px 0 0}
bdi{font-weight:600}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.pre{position:fixed;inset:0;z-index:99;display:grid;place-items:center;background:var(--bg);animation:preOut .6s 1.6s forwards}
html.ready .pre{animation:preOut .5s forwards}
.pre b{font:600 13px ui-monospace,Menlo,monospace;letter-spacing:4px;color:var(--c);direction:ltr}
.pre i{display:block;width:160px;height:3px;margin:12px auto 0;background:var(--line);overflow:hidden;border-radius:3px}
.pre i::after{content:"";display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--c),var(--b));animation:ld 1s ease-in-out infinite}
@keyframes ld{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes preOut{to{opacity:0;visibility:hidden}}
.pbar{position:fixed;top:0;inset-inline:0;height:3px;z-index:90;transform-origin:right;transform:scaleX(0);background:linear-gradient(90deg,var(--c),var(--a),var(--b));box-shadow:0 0 12px var(--c)}
header.nav{position:sticky;top:8px;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0;padding:6px 16px;border:1px solid var(--line);border-radius:99px;background:var(--card);backdrop-filter:blur(14px)}
.logo{font:800 16px ui-monospace,Menlo,monospace;letter-spacing:2px;color:var(--ink);text-decoration:none;direction:ltr}
.logo span{color:var(--c)}
.nav nav{display:flex;gap:14px;font-size:14px}.nav nav a{color:var(--mut);text-decoration:none}.nav nav a:hover{color:var(--at)}
.home .hero{padding:34px 0 8px}
.home .hero h1{font-size:clamp(34px,9vw,58px);line-height:1.5}
.kin .w{display:inline-block;opacity:0;transform:translateY(.7em) rotateX(40deg);animation:wd .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*90ms + 1.1s)}
.home .hero h1.kin{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);filter:none}
.kin .w{color:var(--ink);text-shadow:0 0 22px color-mix(in srgb,var(--a) 75%,transparent);padding-inline:.12em}.kin .w:nth-child(even){color:var(--at)}
html.ready .kin .w{animation-delay:calc(var(--i)*90ms + .2s)}
@keyframes wd{to{opacity:1;transform:none}}
.lead{max-width:34em;margin:6px auto 0;color:var(--mut)}
.btns.c{justify-content:center;margin:18px 0 6px}
.mq{overflow:hidden;margin:24px -16px;border-block:1px solid var(--line);padding:6px 0;background:var(--card)}
.mq div{display:flex;width:max-content;animation:mq 26s linear infinite;font:600 13px ui-monospace,Menlo,monospace;letter-spacing:4px;color:var(--at);direction:ltr}
.mq span{padding-inline:14px}
@keyframes mq{to{transform:translateX(-50%)}}
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:8px 0 18px;perspective:900px}
.card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card);backdrop-filter:blur(14px);transition:transform .25s,box-shadow .3s;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));box-shadow:0 18px 44px -22px var(--ca,var(--a))}
.card:hover{box-shadow:0 22px 60px -18px var(--ca,var(--a))}
.card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s}
.card:hover img{transform:scale(1.06)}
.card div{padding:14px 18px 16px;line-height:1.9}
.card h3{margin:0;color:var(--ink);font-size:20px}
.card small{color:var(--mut)}
.soon{opacity:.75;border-style:dashed;display:grid;place-items:center;min-height:240px;text-align:center}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
footer{margin:26px 0 0;padding:18px 0 28px;text-align:center;color:var(--mut);font-size:13px;line-height:2}
footer a{color:var(--at);text-decoration:none;font-weight:600}
.cur,.tr{position:fixed;top:0;left:0;z-index:100;pointer-events:none;opacity:0}
.fc .cur,.fc .tr{opacity:1}
html.fc,html.fc *{cursor:none!important}
.cur{width:20px;height:26px;background:#fff;clip-path:polygon(0 0,0 82%,22% 64%,38% 100%,54% 93%,37% 58%,66% 58%);filter:drop-shadow(0 0 5px var(--c));transition:scale .2s,background .2s}
.cur.hot{scale:1.5;background:var(--c)}
.tr{width:6px;height:6px;background:var(--c);box-shadow:0 0 8px var(--c)}
@media (max-width:520px){.nav nav{gap:10px;font-size:13px}.nav nav a:nth-child(n+4){display:none}}