:root{--bg:#0b1020;--ink:#f4f6ff;--mute:#a7b0cf;--a:#7cc4ff;--b:#b48cff;--c:#ffb36b;--g1:rgba(255,255,255,.14);--g2:rgba(255,255,255,.04);--rim:rgba(255,255,255,.38);--sh:rgba(0,0,0,.45);--ease:cubic-bezier(.34,1.4,.5,1);--out:cubic-bezier(.2,.8,.2,1)}
:root[data-theme=light]{--bg:#eef1fb;--ink:#12162b;--mute:#4d5575;--a:#3a8dff;--b:#8a5cff;--c:#ff8f3a;--g1:rgba(255,255,255,.7);--g2:rgba(255,255,255,.25);--rim:rgba(255,255,255,.95);--sh:rgba(40,50,110,.22)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--bg)}
body{font:300 1.0625rem/1.9 Vazirmatn,system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden;padding-bottom:130px}
h1,h2,h3{font-weight:800;line-height:1.35}
a{color:inherit}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:12px}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform;animation:fl 26s ease-in-out infinite alternate}
.bg i:nth-child(1){background:var(--a);top:-25vmax;right:-15vmax}
.bg i:nth-child(2){background:var(--b);bottom:-30vmax;left:-20vmax;animation-delay:-9s}
.bg i:nth-child(3){background:var(--c);width:30vmax;height:30vmax;top:40%;left:35%;opacity:.22;animation-delay:-17s}
:root[data-theme=light] .bg i{opacity:.35}
@keyframes fl{to{transform:translate3d(6vmax,-5vmax,0) scale(1.15)}}
/* Liquid Glass material */
.lg{position:relative;isolation:isolate;background:linear-gradient(135deg,var(--g1),var(--g2));backdrop-filter:blur(14px) saturate(1.8) brightness(1.05);-webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.05);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 var(--rim),inset 0 -10px 24px rgba(255,255,255,.05),inset 0 0 18px rgba(255,255,255,.06),0 18px 40px -12px var(--sh)}
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(180px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.32),transparent 60%);opacity:var(--lo,.55);transition:opacity .4s}
.lg::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;background:conic-gradient(from var(--ang,200deg),rgba(255,255,255,.8),transparent 25%,rgba(255,255,255,.15) 50%,transparent 75%,rgba(255,255,255,.8));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
.lg:hover{--lo:1}
.rf .lens,.rf .nav.lg{backdrop-filter:blur(3px) url(#lensf) saturate(1.7)}
/* header */
.hd{position:fixed;top:max(12px,env(safe-area-inset-top));inset-inline:0;margin-inline:auto;width:min(1040px,calc(100% - 24px));z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-radius:999px;border:1px solid transparent;transition:background .5s var(--out),box-shadow .5s,backdrop-filter .5s,border-color .5s,transform .5s var(--out),padding .5s;background:transparent;box-shadow:none}
.hd.s{background:linear-gradient(135deg,var(--g1),var(--g2));backdrop-filter:blur(16px) saturate(1.8);-webkit-backdrop-filter:blur(16px) saturate(1.8);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 var(--rim),0 14px 34px -14px var(--sh);transform:scale(.97)}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;text-decoration:none;letter-spacing:.02em}
.brand svg{width:30px;height:30px}
.hd div{display:flex;gap:8px;align-items:center}
.ic{width:40px;height:40px;border-radius:50%;border:0;background:var(--g2);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .4s var(--ease),background .3s}
.ic:hover{transform:scale(1.1);background:var(--g1)}.ic:active{transform:scale(.92)}
.ic svg,.nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:999px;border:0;font:500 1rem Vazirmatn,sans-serif;color:#fff;text-decoration:none;cursor:pointer;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 28px -8px var(--b);transition:transform .45s var(--ease),box-shadow .3s;will-change:transform}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 36px -8px var(--b)}.btn:active{transform:scale(.95)!important}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.btn.g{background:var(--g2);color:var(--ink);box-shadow:inset 0 1px 0 var(--rim)}
/* sections */
main>section{padding:clamp(70px,11vw,130px) 20px 0;max-width:1040px;margin:auto}
.hero{min-height:100svh;display:grid;align-content:center;position:relative;text-align:center;padding-top:110px!important;max-width:none!important}
.hero h1{font-size:clamp(2.6rem,9.5vw,6.4rem);letter-spacing:-.02em;max-width:12ch;margin:0 auto .3em;background:linear-gradient(180deg,var(--ink) 30%,var(--mute));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mute);max-width:34ch;margin:0 auto 2rem;font-size:1.15rem}
.hero .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lens{position:absolute;top:0;left:0;width:clamp(130px,22vw,210px);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:2;will-change:transform;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),rgba(255,255,255,.06) 40%,rgba(255,255,255,.12) 70%);backdrop-filter:blur(1.5px) saturate(1.8) brightness(1.15);-webkit-backdrop-filter:blur(1.5px) saturate(1.8) brightness(1.15);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 2px 1px rgba(255,255,255,.7),inset 0 -16px 30px rgba(124,196,255,.25),inset 14px 0 30px rgba(180,140,255,.2),0 30px 50px -20px var(--sh)}
.hero>*:not(.lens){position:relative;z-index:1}
h2{font-size:clamp(1.8rem,5vw,2.9rem);margin-bottom:.4em}
.lead{color:var(--mute);max-width:46ch;margin-bottom:2.2rem}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.card{border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:10px;transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-5px)}
.card h3{font-size:1.2rem}.meta{color:var(--mute);font-size:.9rem}
.card ul{list-style:none;padding:0;display:grid;gap:4px;font-size:.92rem;color:var(--mute);flex:1}
.card li::before{content:"✓";margin-inline-end:8px;color:var(--a)}
.price{font-size:1.6rem;font-weight:800}.price small{font-size:.8rem;font-weight:300;color:var(--mute)}
.tag{align-self:flex-start;font-size:.78rem;padding:2px 12px;border-radius:99px;background:var(--g2);box-shadow:inset 0 1px 0 var(--rim)}
.tag.available{color:#4be3a0}.tag.limited{color:var(--c)}.tag.soldout{color:#ff7a8a}
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.step{padding:24px;border-radius:26px;opacity:.25;transform:translateY(14px) scale(.97);transition:opacity .7s var(--out),transform .7s var(--out);transition-delay:calc(var(--i)*140ms)}
.step.on{opacity:1;transform:none}
.step b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;margin-bottom:12px;background:linear-gradient(135deg,var(--a),var(--b));color:#fff}
.step p,.why p{color:var(--mute);font-size:.95rem}
.why .card h3{font-size:1.1rem}
.faq{display:grid;gap:10px}
.q{border-radius:22px;overflow:hidden}
.q button{all:unset;box-sizing:border-box;width:100%;padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500}
.q button:focus-visible{outline:2px solid var(--a);outline-offset:-4px}
.q button::after{content:"+";font-size:1.5rem;transition:transform .5s var(--ease)}
.q[open-q] button::after{transform:rotate(135deg)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--out)}
.q[open-q] .a{grid-template-rows:1fr}
.q .a div{overflow:hidden;padding:0 22px;color:var(--mute)}
.q[open-q] .a div{padding-bottom:18px}
.box{border-radius:32px;padding:clamp(24px,5vw,44px)}
footer{max-width:1040px;margin:90px auto 0;padding:0 20px;color:var(--mute);font-size:.88rem;text-align:center}
/* bottom nav */
.nav{position:fixed;z-index:60;bottom:max(14px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;width:min(440px,calc(100% - 24px));border-radius:999px;padding:7px;display:grid;grid-template-columns:repeat(4,1fr);transition:transform .6s var(--out),opacity .6s;transform-origin:center bottom}
.nav.c{transform:scale(.9) translateY(4px);opacity:.78}
.nav a{position:relative;z-index:1;display:grid;justify-items:center;gap:1px;padding:8px 2px 6px;text-decoration:none;font-size:.72rem;color:var(--mute);border-radius:999px;transition:color .3s,transform .45s var(--ease);-webkit-tap-highlight-color:transparent}
.nav a:hover{transform:translateY(-2px) scale(1.06)}.nav a:active{transform:scale(.9)}
.nav a[aria-current=true]{color:var(--ink)}
.ind{position:absolute;z-index:0;top:7px;bottom:7px;left:0;border-radius:999px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -6px 14px rgba(124,196,255,.3),0 6px 16px -6px var(--b);transition:transform .55s var(--ease),width .55s var(--ease)}
.ind.m{transform-origin:center;filter:saturate(1.3)}
.toast{position:fixed;z-index:70;top:max(76px,env(safe-area-inset-top));left:50%;translate:-50% -20px;padding:10px 22px;border-radius:99px;opacity:0;pointer-events:none;transition:.5s var(--ease);font-size:.92rem}
.toast.on{opacity:1;translate:-50% 0}
@media(max-width:700px){.bg i{filter:blur(40px)}.lg{backdrop-filter:blur(10px) saturate(1.6);-webkit-backdrop-filter:blur(10px) saturate(1.6)}.hd .btn{display:none}}
@media(min-width:1400px){body{font-size:1.15rem}main>section,footer,.hd{max-width:1180px}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition-duration:.01ms!important}html{scroll-behavior:auto}.step{opacity:1;transform:none}}
/* v2 additions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.25s ease both vo}::view-transition-new(root){animation:.4s var(--out) both vi}
@keyframes vo{to{opacity:0;filter:blur(6px)}}@keyframes vi{from{opacity:0;filter:blur(8px);transform:translateY(10px)}}
.hd{view-transition-name:hd}.nav{view-transition-name:nav}
.hl{display:flex;gap:4px}.hl a{padding:6px 16px;border-radius:99px;text-decoration:none;color:var(--mute);transition:.3s}.hl a:hover,.hl a[aria-current]{color:var(--ink);background:var(--g2)}
.ic{position:relative}.bd{position:absolute;top:-2px;inset-inline-start:-2px;min-width:18px;height:18px;border-radius:9px;background:var(--b);color:#fff;font-size:.7rem;line-height:18px;text-align:center;transition:transform .4s var(--ease)}.bd[hidden]{display:none}
.pop{animation:pop .5s var(--ease)}@keyframes pop{40%{transform:scale(1.12)}}
.pg{padding-top:120px!important}.pg h1{font-size:clamp(2rem,6vw,3.4rem);margin-bottom:.3em}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--g2);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:11px 16px;min-width:0;transition:border-color .3s,box-shadow .3s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 30%,transparent)}
select option{color:#111}.tools input{flex:1 1 200px}
.cols{display:grid;gap:20px;grid-template-columns:1fr}@media(min-width:860px){.cols{grid-template-columns:1.4fr 1fr}}
.row2{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.qty{display:flex;align-items:center;gap:6px}.qty button{width:34px;height:34px;border-radius:50%;border:0;background:var(--g2);color:var(--ink);cursor:pointer;font-size:1.1rem;transition:transform .35s var(--ease)}.qty button:active{transform:scale(.85)}
.tot{display:flex;justify-content:space-between;font-weight:800;font-size:1.2rem;padding-top:14px}
.fm{display:grid;gap:12px}.fm label{display:grid;gap:4px;font-size:.92rem;color:var(--mute)}
.st{text-align:center;padding:50px 20px}.st h2{font-size:1.6rem}.st p{color:var(--mute);margin:8px 0 22px}
.prose{max-width:62ch}.prose h2{font-size:1.3rem;margin:1.6em 0 .3em}.prose p,.prose li{color:var(--mute)}
.ok{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#4be3a0,var(--a));color:#fff;animation:pop .8s var(--ease)}.ok svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;animation:dr .7s .3s both}@keyframes dr{from{stroke-dashoffset:40}}
.sk{height:200px;border-radius:28px;background:linear-gradient(90deg,var(--g2),var(--g1),var(--g2));background-size:200% 100%;animation:sh 1.4s infinite}@keyframes sh{to{background-position:-200% 0}}
footer nav{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}footer small{display:block;max-width:60ch;margin:10px auto 0;opacity:.8}
.card .lnk{font-size:.9rem;color:var(--a);text-decoration:none}
@media(max-width:700px){.hl{display:none}}
/* v2.1 light-mode fixes */
:root[data-theme=light] input,:root[data-theme=light] select,:root[data-theme=light] textarea{background:rgba(255,255,255,.85);border-color:rgba(18,22,43,.2)}
:root[data-theme=light] .tag{background:rgba(18,22,43,.06);box-shadow:none}
:root[data-theme=light] .tag.available{color:#087a4e}:root[data-theme=light] .tag.limited{color:#b45309}:root[data-theme=light] .tag.soldout{color:#c42b43}
:root[data-theme=light] .row2{border-color:rgba(18,22,43,.1)}
:root[data-theme=light] .card li::before,:root[data-theme=light] .card .lnk{color:var(--a)}
input::placeholder{color:var(--mute);opacity:.8}
.code{word-break:break-all;font:500 .8rem/1.7 ui-monospace,Menlo,Consolas,monospace;padding:14px;border-radius:16px;background:var(--g2);margin:10px auto 14px;max-width:520px;text-align:left;user-select:all}