:root{
  --bg:#0a0a14;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.12);
  --text:#eef0ff;--muted:#a3a8c8;--a:#7c5cff;--b:#00d4ff;--c:#ff4fd8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Vazirmatn,Tahoma,sans-serif;background:var(--bg);color:var(--text);line-height:1.9;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}

/* animated background */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blob{position:absolute;border-radius:50%;opacity:.5;will-change:transform;transform:translateZ(0);animation:float 20s ease-in-out infinite}
.blob.b1{width:520px;height:520px;background:radial-gradient(circle,rgba(124,92,255,.75),transparent 68%);top:-180px;right:-160px}
.blob.b2{width:480px;height:480px;background:radial-gradient(circle,rgba(0,212,255,.65),transparent 68%);bottom:-180px;left:-160px;animation-delay:-7s}
.blob.b3{width:380px;height:380px;background:radial-gradient(circle,rgba(255,79,216,.45),transparent 68%);top:45%;left:35%;animation-delay:-12s;opacity:.35}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(40px,-40px,0)}}

/* nav */
nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 5%;background:rgba(10,10,20,.92);border-bottom:1px solid var(--line)}
.logo{font-weight:800;font-size:1.25rem;background:linear-gradient(90deg,var(--a),var(--b),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes shine{to{background-position:200% center}}
nav ul{display:flex;gap:6px;list-style:none;flex-wrap:wrap}
nav ul a{padding:6px 14px;border-radius:99px;color:var(--muted);font-size:.9rem;transition:.25s}
nav ul a:hover,nav ul a.active{background:var(--card);color:var(--text)}

/* layout */
main{max-width:1050px;margin:0 auto;padding:40px 5% 80px}
.hero{text-align:center;padding:50px 0 30px}
.hero h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:800;line-height:1.4}
.grad{background:linear-gradient(90deg,var(--a),var(--b),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);max-width:560px;margin:14px auto 26px}
.date-chip{display:inline-block;padding:6px 18px;border:1px solid var(--line);border-radius:99px;background:var(--card);margin-bottom:18px;font-size:.9rem}

.btn{display:inline-block;padding:12px 28px;border-radius:14px;border:0;font:inherit;font-weight:700;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 6px 20px rgba(124,92,255,.35);transition:transform .25s}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn.ghost{background:var(--card);border:1px solid var(--line);box-shadow:none}

h2.title{font-size:1.5rem;margin:50px 0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;transition:transform .3s,border-color .3s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);border-color:rgba(124,92,255,.6)}
.card .ico{font-size:2.6rem;display:inline-block;animation:bob 3s ease-in-out infinite}
.card:nth-child(2) .ico{animation-delay:-1s}.card:nth-child(3) .ico{animation-delay:-2s}
@keyframes bob{50%{transform:translateY(-8px) rotate(6deg)}}
.card h3{margin:10px 0 4px}
.card p{color:var(--muted);font-size:.92rem;margin-bottom:14px}
.card .go{color:var(--b);font-weight:700}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.show{opacity:1;transform:none}

/* tools */
.tool label{display:block;color:var(--muted);font-size:.85rem;margin:10px 0 4px}
input,select,textarea{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--text);font:inherit;outline:none;transition:.25s}
input:focus,select:focus,textarea:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(124,92,255,.25)}
select option{background:#14142a}
textarea{min-height:130px;resize:vertical}
.row{display:flex;gap:10px}.row>*{flex:1}
.result{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(124,92,255,.14);border:1px dashed rgba(124,92,255,.5);min-height:46px;font-weight:700;word-break:break-word}
.calc-screen{direction:ltr;text-align:right;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.4);margin-bottom:10px;height:92px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.calc-screen .hist{font-size:.9rem;color:var(--muted);height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calc-screen .cur{font-size:2rem;font-weight:700;white-space:nowrap;line-height:1.3;transform-origin:right center}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;direction:ltr}
.keys button{padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:1.1rem;cursor:pointer;transition:.2s}
.keys button:active{background:rgba(124,92,255,.5)}
@media (hover:hover){.keys button:hover{background:rgba(124,92,255,.35)}}
.keys button.op{background:rgba(0,212,255,.18)}
.keys button.eq{background:linear-gradient(135deg,var(--a),var(--b))}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;text-align:center}
.stats div{padding:10px;border-radius:12px;background:rgba(0,0,0,.3)}
.stats b{display:block;font-size:1.3rem;color:var(--b)}

/* app page */
.phone{width:230px;height:440px;margin:0 auto;border-radius:36px;border:6px solid #2a2a45;background:linear-gradient(160deg,#1b1745,#0e2a4a);position:relative;box-shadow:0 30px 80px rgba(124,92,255,.35);animation:bob 4s ease-in-out infinite;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.phone .notch{position:absolute;top:8px;width:70px;height:16px;border-radius:99px;background:#2a2a45}
.phone .tile{width:150px;padding:10px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:center;animation:slide 3s ease-in-out infinite}
.phone .tile:nth-child(3){animation-delay:-1s}.phone .tile:nth-child(4){animation-delay:-2s}
@keyframes slide{50%{transform:translateX(10px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media (max-width:600px){.blob.b1{width:340px;height:340px}.blob.b2{width:320px;height:320px}.blob.b3{display:none}}
.dl-box{text-align:center;margin-top:30px}
.note{color:var(--muted);font-size:.85rem;margin-top:10px}

footer{text-align:center;color:var(--muted);padding:30px;border-top:1px solid var(--line);font-size:.9rem}

/* welcome */
#welcome{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 40%,#17123a,#07070f);transition:opacity .8s,transform .8s}
#welcome.hide{opacity:0;transform:scale(1.15);pointer-events:none}
.orb{width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--a),var(--b),var(--c),var(--a));animation:spin 5s linear infinite;position:relative;margin-bottom:30px;box-shadow:0 0 80px rgba(124,92,255,.6)}
.orb::after{content:"V";position:absolute;inset:10px;border-radius:50%;background:#0a0a14;display:grid;place-items:center;font-size:3rem;font-weight:800;color:#fff;animation:spin 5s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
#welcome h1{font-size:clamp(1.8rem,6vw,3rem);animation:rise 1s both}
#welcome p{color:var(--muted);margin:10px 0 28px;animation:rise 1s .3s both;min-height:1.9em}
#welcome .actions{display:flex;gap:12px;animation:rise 1s .6s both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;opacity:0;animation:tw 4s ease-in-out infinite}
@keyframes tw{50%{opacity:.9;transform:translateY(-20px)}}