@font-face{font-family:Vazirmatn;src:url(/assets/fonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/assets/fonts/Vazirmatn-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/assets/fonts/Vazirmatn-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/assets/fonts/Vazirmatn-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/assets/fonts/Vazirmatn-Black.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  --bg:#05060f;--bg2:#0a0c1c;--card:#0f1226;--card2:#151937;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --text:#eef0fb;--muted:#aab2cf;--p1:#8b5cf6;--p2:#06b6d4;--p3:#ec4899;--p4:#f59e0b;--ok:#34d399;
  --grad:linear-gradient(120deg,#a78bfa 0%,#8b5cf6 30%,#06b6d4 70%,#22d3ee 100%);
  --grad2:linear-gradient(120deg,#ec4899,#8b5cf6);
  --radius:22px;--shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
*{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.95;font-size:16px;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(1000px 600px at 90% -10%,rgba(139,92,246,.20),transparent 60%),radial-gradient(800px 500px at -10% 30%,rgba(6,182,212,.12),transparent 60%),radial-gradient(700px 500px at 50% 110%,rgba(236,72,153,.10),transparent 60%)}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(139,92,246,.45)}
.container{width:min(1200px,92%);margin-inline:auto}
.skip{position:absolute;right:-999px}.skip:focus{right:1rem;top:1rem;background:#fff;color:#000;padding:.5rem 1rem;z-index:99}
.muted{color:var(--muted)}
.grad{background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
.grad2{background:var(--grad2);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes shimmer{to{background-position:200% center}}

.cursor-glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:-1;left:0;top:0;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(139,92,246,.13),transparent 65%);transition:opacity .3s;opacity:0}
.progress{position:fixed;top:0;right:0;height:3px;width:0;z-index:100;background:var(--grad);box-shadow:0 0 12px rgba(139,92,246,.8)}

/* nav */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px) saturate(160%);background:rgba(5,6,15,.55);border-bottom:1px solid transparent;transition:.35s}
.topbar.scrolled{background:rgba(5,6,15,.85);border-bottom-color:var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--grad);box-shadow:0 10px 30px -8px rgba(139,92,246,.8),inset 0 1px 0 rgba(255,255,255,.35);position:relative}
.brand-mark svg{width:30px;height:30px}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text b{font-size:1.15rem;font-weight:900;letter-spacing:-.3px}
.brand-text small{color:var(--muted);font-size:.66rem;direction:ltr;text-align:right;letter-spacing:1.5px}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a{padding:.5rem .85rem;border-radius:11px;color:var(--muted);font-size:.93rem;transition:.2s;position:relative}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav a.active{color:var(--text)}
.nav a.active:after{content:"";position:absolute;bottom:2px;right:30%;left:30%;height:2px;border-radius:2px;background:var(--grad)}
.nav a.btn{color:#fff;margin-right:.5rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1.7rem;border-radius:14px;font-weight:800;font-family:inherit;font-size:.98rem;border:1px solid transparent;cursor:pointer;transition:.3s;position:relative;overflow:hidden;isolation:isolate}
.btn-primary{background:var(--grad);background-size:160% auto;color:#fff;box-shadow:0 14px 40px -12px rgba(139,92,246,.9),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-3px);background-position:right center;box-shadow:0 20px 50px -12px rgba(139,92,246,1)}
.btn-shine:after{content:"";position:absolute;top:0;bottom:0;width:40%;right:-60%;z-index:-1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.8s ease-in-out infinite}
@keyframes shine{0%,60%{right:-60%}100%{right:130%}}
.btn-ghost{border-color:var(--line2);background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08);transform:translateY(-3px)}
.btn-sm{padding:.55rem 1.1rem !important;font-size:.88rem;border-radius:11px}
.arrow{transition:transform .3s}.btn:hover .arrow{transform:translateX(-5px)}

/* hero */
.hero{position:relative;min-height:calc(100vh - 76px);display:flex;align-items:center;padding:4rem 0 5rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;background:url(/assets/img/hero-ai.webp) center/cover no-repeat;opacity:.28;transform:scale(1.08);filter:saturate(1.3)}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 8%,rgba(5,6,15,.55) 55%,rgba(5,6,15,.25)),linear-gradient(0deg,var(--bg),transparent 40%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem 1rem;border:1px solid var(--line2);border-radius:99px;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);font-size:.85rem;color:#d5d9ee}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.hero h1{font-size:clamp(2.3rem,5.2vw,4.3rem);line-height:1.3;font-weight:900;margin:1.4rem 0 1.2rem;letter-spacing:-1px}
.hero h1 .typed{display:inline-block;min-width:2ch;border-left:3px solid var(--p2);padding-left:4px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}
.hero p.lead{font-size:1.15rem;color:#b9c0da;max-width:600px}
.hero-cta{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:1rem;margin-top:3rem;flex-wrap:wrap}
.stat{padding:1rem 1.3rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line);backdrop-filter:blur(10px);min-width:140px}
.stat b{display:block;font-size:2rem;font-weight:900;line-height:1.3}
.stat span{color:var(--muted);font-size:.82rem}

.hero-visual{position:relative;height:560px}
.hv-img{position:absolute;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line2)}
.hv-img img{width:100%;height:100%;object-fit:cover}
.hv-1{inset:0 0 22% 10%;transform:rotate(-2deg)}
.hv-2{width:50%;height:42%;left:2%;bottom:0;transform:rotate(3deg);border:4px solid var(--bg)}
.hv-img:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(139,92,246,.25),transparent 50%,rgba(6,182,212,.2))}
.float{position:absolute;padding:1rem 1.2rem;border-radius:18px;background:rgba(15,18,38,.78);backdrop-filter:blur(16px);border:1px solid var(--line2);box-shadow:0 20px 50px -15px rgba(0,0,0,.8);font-size:.88rem;z-index:2;animation:bob 6s ease-in-out infinite}
.float b{display:block;font-size:1.35rem;font-weight:900}
.float small{color:var(--muted)}
.f1{top:8%;left:4%}
.f2{bottom:30%;right:2%;animation-delay:-2s;min-width:230px}
.f3{bottom:4%;right:8%;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-14px)}}
.mini-bars{display:flex;align-items:flex-end;gap:5px;height:44px;margin-top:.5rem}
.mini-bars i{flex:1;border-radius:4px 4px 0 0;background:var(--grad);opacity:.9;animation:grow 1.8s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{height:0!important}}
.ai-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--p2);margin-left:.4rem;box-shadow:0 0 10px var(--p2)}

/* marquee */
.marquee{border-block:1px solid var(--line);background:rgba(255,255,255,.02);overflow:hidden;padding:1.1rem 0;direction:ltr}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marq 40s linear infinite}
.marquee span{font-weight:800;font-size:1.05rem;color:#7e87a8;white-space:nowrap;display:flex;align-items:center;gap:.8rem}
.marquee span:before{content:"✦";color:var(--p1)}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
section{padding:4.5rem 0;position:relative}
.sec-head{text-align:center;max-width:780px;margin:0 auto 3.5rem}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:#c4b5fd;font-weight:800;font-size:.82rem;letter-spacing:1px;padding:.3rem .9rem;border-radius:99px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3)}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:900;margin:1rem 0 .9rem;line-height:1.45;letter-spacing:-.5px}
.sec-head p{color:var(--muted);font-size:1.05rem}
.grid{display:grid;gap:1.4rem}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}

.card{background:linear-gradient(180deg,rgba(21,25,55,.75),rgba(10,12,28,.75));border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s;position:relative;overflow:hidden;backdrop-filter:blur(6px)}
.card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(139,92,246,.6),transparent 40%,transparent 60%,rgba(6,182,212,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.4s;pointer-events:none}
.card:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(139,92,246,.18),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -25px rgba(139,92,246,.45)}
.card:hover:before,.card:hover:after{opacity:1}
.card h3{font-size:1.2rem;margin:1rem 0 .5rem;font-weight:900}
.card p,.card li{color:var(--muted);font-size:.95rem}
.card ul{padding-right:1.1rem;margin-top:.7rem}
.card li::marker{color:var(--p2)}
.ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;background:linear-gradient(140deg,rgba(139,92,246,.3),rgba(139,92,246,.08));border:1px solid rgba(139,92,246,.4);box-shadow:0 10px 25px -10px rgba(139,92,246,.7)}
.ico.c2{background:linear-gradient(140deg,rgba(6,182,212,.3),rgba(6,182,212,.08));border-color:rgba(6,182,212,.4);box-shadow:0 10px 25px -10px rgba(6,182,212,.7)}
.ico.c3{background:linear-gradient(140deg,rgba(236,72,153,.3),rgba(236,72,153,.08));border-color:rgba(236,72,153,.4);box-shadow:0 10px 25px -10px rgba(236,72,153,.7)}
.ico.c4{background:linear-gradient(140deg,rgba(245,158,11,.3),rgba(245,158,11,.08));border-color:rgba(245,158,11,.4);box-shadow:0 10px 25px -10px rgba(245,158,11,.7)}
.num{position:absolute;left:1.5rem;top:1rem;font-size:3.2rem;font-weight:900;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{display:inline-block;font-size:.75rem;padding:.2rem .7rem;border-radius:99px;background:rgba(6,182,212,.14);color:#67e8f9;border:1px solid rgba(6,182,212,.3);margin-left:.3rem;margin-top:.6rem;font-weight:700}

/* photo cards */
.pcard{padding:0}
.pcard .pimg{height:210px;overflow:hidden;position:relative}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pcard .pimg:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,12,28,1),rgba(10,12,28,.1) 60%)}
.pcard:hover .pimg img{transform:scale(1.08)}
.pcard .pbody{padding:0 1.8rem 1.8rem;margin-top:-2.2rem;position:relative;z-index:1}
.pcard .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;color:#c4b5fd;font-weight:800;font-size:.92rem}
.pcard:hover .go .arrow{transform:translateX(-5px)}

/* evolution */
.evo{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative}
.evo .card{text-align:center}
.evo .card .ico{margin:0 auto}
.evo .level{font-size:.78rem;font-weight:800;color:var(--muted);letter-spacing:1px}
.evo .card.best{border-color:rgba(139,92,246,.5);background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(10,12,28,.8));transform:scale(1.04)}
.evo .card.best:hover{transform:scale(1.04) translateY(-6px)}
.ribbon{position:absolute;top:14px;left:-34px;transform:rotate(-45deg);background:var(--grad);color:#fff;font-size:.72rem;font-weight:800;padding:.2rem 2.4rem}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split.rev>:first-child{order:2}
.split-img{position:relative;border-radius:28px;overflow:visible}
.split-img img{filter:brightness(.82) saturate(1.1);border-radius:28px;width:100%;aspect-ratio:4/3.2;object-fit:cover;border:1px solid var(--line2);box-shadow:var(--shadow)}
.split-img:before{content:"";position:absolute;inset:-18px 18px 18px -18px;border-radius:32px;background:var(--grad);opacity:.25;filter:blur(2px);z-index:-1}
.split-img .float{bottom:-22px;right:18px;top:auto;left:auto}
.split h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:900;line-height:1.45;margin:1rem 0}
.split p{color:var(--muted);font-size:1.03rem}
.checks{list-style:none;margin:1.5rem 0 2rem;display:grid;gap:.8rem}
.checks li{display:flex;gap:.8rem;align-items:flex-start;color:#cdd3ea}
.checks li:before{content:"✓";flex:0 0 26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:900;font-size:.85rem;margin-top:.2rem}

/* pillars */
.pillar-wrap{position:relative}
.pillar-wrap .card{text-align:right}

/* big numbers band */
.band{border-radius:32px;padding:3rem;background:linear-gradient(120deg,rgba(139,92,246,.14),rgba(6,182,212,.10));border:1px solid var(--line2);display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center;position:relative;overflow:hidden}
.band b{display:block;font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.3}
.band span{color:var(--muted);font-size:.92rem}

/* photo strip */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:230px 230px;gap:1rem}
.gallery .g{border-radius:22px;overflow:hidden;position:relative;border:1px solid var(--line)}
.gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.gallery .g:hover img{transform:scale(1.07)}
.gallery .g:first-child{grid-row:span 2}
.gallery .g span{position:absolute;bottom:1rem;right:1rem;padding:.35rem .9rem;border-radius:99px;background:rgba(5,6,15,.7);backdrop-filter:blur(10px);font-size:.82rem;font-weight:700;border:1px solid var(--line2)}

/* page hero with image */
.phero{position:relative;padding:7rem 0 5rem;text-align:center;overflow:hidden;border-bottom:1px solid var(--line)}
.phero-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.1);filter:saturate(1.2)}
.phero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,6,15,.72),rgba(5,6,15,.88) 70%,var(--bg)),radial-gradient(ellipse at center,rgba(139,92,246,.25),transparent 70%)}
.phero h1{font-size:clamp(2.1rem,4.8vw,3.6rem);font-weight:900;line-height:1.4;letter-spacing:-.5px}
.phero p{color:#c3c9e0;max-width:740px;margin:1.1rem auto 0;font-size:1.1rem}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:1.2rem;display:inline-flex;gap:.5rem;padding:.3rem 1rem;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.crumbs a:hover{color:var(--text)}

/* article */
.article{display:grid;grid-template-columns:270px 1fr;gap:3rem;align-items:start}
.toc{position:sticky;top:100px;background:rgba(15,18,38,.7);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.toc h4{font-size:.88rem;margin-bottom:.8rem;color:var(--muted)}
.toc a{display:block;padding:.45rem .8rem;border-radius:10px;font-size:.9rem;color:var(--muted);border-right:2px solid transparent;transition:.2s}
.toc a:hover,.toc a.on{color:var(--text);border-right-color:var(--p1);background:rgba(139,92,246,.1)}
.prose{min-width:0}
.prose h2{font-size:1.7rem;font-weight:900;margin:3.2rem 0 1.1rem;scroll-margin-top:100px;display:flex;align-items:center;gap:.7rem}
.prose h2:before{content:"";width:6px;height:1.6rem;border-radius:4px;background:var(--grad);flex:0 0 6px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.18rem;font-weight:800;margin:1.8rem 0 .6rem;color:#e0e4f5}
.prose p{color:#c3cae2;margin-bottom:1rem}
.prose ul,.prose ol{padding-right:1.4rem;margin-bottom:1.2rem;color:#c3cae2}
.prose li{margin-bottom:.45rem}
.prose li::marker{color:var(--p2);font-weight:800}
.prose strong{color:#fff}
.callout{border:1px solid rgba(139,92,246,.35);background:linear-gradient(120deg,rgba(139,92,246,.12),rgba(139,92,246,.03));border-radius:16px;padding:1.2rem 1.4rem;margin:1.5rem 0;position:relative;padding-right:3.6rem}
.callout:before{content:"💡";position:absolute;right:1.1rem;top:1.05rem;font-size:1.4rem}
.callout.cy{border-color:rgba(6,182,212,.35);background:linear-gradient(120deg,rgba(6,182,212,.12),rgba(6,182,212,.03))}
.callout.cy:before{content:"⚡"}
.callout b{display:block;margin-bottom:.3rem;color:#fff}
.fig{margin:2rem 0;border-radius:22px;overflow:hidden;border:1px solid var(--line2);position:relative;box-shadow:var(--shadow)}
.fig img{width:100%;max-height:380px;object-fit:cover}
.fig figcaption{position:absolute;bottom:0;inset-inline:0;padding:2.5rem 1.3rem 1rem;background:linear-gradient(0deg,rgba(5,6,15,.95),transparent);font-size:.9rem;color:#d5d9ee}
.table-wrap{overflow-x:auto;margin:1.4rem 0;border-radius:16px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
th,td{padding:.9rem 1.1rem;border-bottom:1px solid var(--line);text-align:right}
tr:last-child td{border-bottom:0}
th{background:linear-gradient(120deg,rgba(139,92,246,.2),rgba(6,182,212,.12));font-weight:800}
td{color:#c3cae2}
tr:hover td{background:rgba(255,255,255,.02)}
.formula{direction:ltr;text-align:center;font-family:ui-monospace,Consolas,monospace;background:rgba(15,18,38,.8);border:1px solid rgba(139,92,246,.3);border-radius:14px;padding:1.1rem;margin:1.1rem 0;color:#c4b5fd;font-size:1rem;overflow-x:auto}

/* steps */
.steps{display:grid;gap:1rem;counter-reset:s;position:relative}
.step{display:flex;gap:1.3rem;align-items:flex-start;background:rgba(15,18,38,.7);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;transition:.3s}
.step:hover{border-color:rgba(139,92,246,.45);transform:translateX(-6px)}
.step:before{counter-increment:s;content:counter(s,persian);flex:0 0 50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--grad);font-weight:900;font-size:1.2rem;box-shadow:0 10px 25px -8px rgba(139,92,246,.8)}
.step h3{font-size:1.1rem;font-weight:900;margin-bottom:.3rem}
.step p{color:var(--muted);font-size:.95rem}

/* cta */
.cta-band{position:relative;overflow:hidden;border-radius:32px;padding:3.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;border:1px solid rgba(139,92,246,.4);
  background:linear-gradient(120deg,rgba(139,92,246,.35),rgba(6,182,212,.2)),url(/assets/img/highfive.webp) center/cover}
.cta-band:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(5,6,15,.55),rgba(5,6,15,.88))}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900}
.cta-band p{color:#c9cfe5;margin-top:.4rem}

/* forms */
.form{display:grid;gap:1.1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{font-size:.9rem;color:#b5bcd6;display:block;margin-bottom:.4rem;font-weight:500}
input,select,textarea{width:100%;background:rgba(5,6,15,.6);border:1px solid var(--line2);border-radius:13px;padding:.9rem 1.05rem;color:var(--text);font-family:inherit;font-size:.96rem;transition:.2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--p1);box-shadow:0 0 0 4px rgba(139,92,246,.2);background:rgba(5,6,15,.85)}
textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}
.alert{padding:1rem 1.2rem;border-radius:14px;margin-bottom:1rem}
.alert.ok{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4)}
.alert.err{background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.4)}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:2rem;align-items:start}
.contact-side{border-radius:var(--radius);overflow:hidden;position:relative;min-height:100%;border:1px solid var(--line2)}
.contact-side img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.contact-side .ov{position:relative;padding:2rem;background:linear-gradient(0deg,rgba(5,6,15,.97) 0%,rgba(5,6,15,.9) 45%,rgba(5,6,15,.2) 85%);min-height:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.contact-side h3{font-size:1.4rem;font-weight:900;margin-bottom:.8rem}

/* quiz */
.quiz-q{margin-bottom:1.5rem;padding-bottom:1.3rem;border-bottom:1px dashed var(--line)}
.quiz-q p{font-weight:800;margin-bottom:.7rem}
.opts{display:flex;gap:.5rem;flex-wrap:wrap}
.opts label{margin:0;cursor:pointer;padding:.55rem 1.1rem;border:1px solid var(--line2);border-radius:12px;color:var(--text);font-size:.9rem;transition:.2s;background:rgba(255,255,255,.02)}
.opts label:hover{border-color:rgba(139,92,246,.5)}
.opts input{display:none}
.opts label:has(input:checked){background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px rgba(139,92,246,.9)}
.score{font-size:4rem;font-weight:900}

/* footer */
.footer{border-top:1px solid var(--line);padding:4.5rem 0 1.6rem;margin-top:3rem;position:relative;overflow:hidden;background:rgba(0,0,0,.25)}
.footer-glow{position:absolute;width:700px;height:300px;right:50%;top:-150px;transform:translateX(50%);background:radial-gradient(ellipse,rgba(139,92,246,.25),transparent 70%);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:2.4rem;position:relative}
.footer h4{margin-bottom:1rem;font-size:1rem;font-weight:900}
.footer a:not(.btn):not(.brand){display:block;color:var(--muted);font-size:.92rem;padding:.25rem 0;transition:.2s}
.footer a:not(.btn):not(.brand):hover{color:var(--text);transform:translateX(-4px)}
.footer .brand{margin-bottom:1rem}
.footer p{font-size:.92rem}
.copy{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;text-align:center}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.grid>.reveal:nth-child(2),.evo>.reveal:nth-child(2){transition-delay:.1s}
.grid>.reveal:nth-child(3),.evo>.reveal:nth-child(3){transition-delay:.2s}
.grid>.reveal:nth-child(4){transition-delay:.3s}

@media (max-width:1020px){
  .hero-grid,.article,.split,.contact-grid{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .hero-visual{height:440px;margin-top:1rem}
  .toc{position:static}
  .g3,.g4,.evo{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;background:rgba(5,6,15,.97);backdrop-filter:blur(20px);padding:1rem 4% 1.5rem;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:.4s cubic-bezier(.2,.8,.2,1);gap:.2rem}
  .nav.open{transform:none}
  .nav a{padding:.85rem 1rem}
  .nav a.btn{margin:.5rem 0 0}
  .nav a.active:after{display:none}
  .evo .card.best{transform:none}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:260px 180px 180px}
  .gallery .g:first-child{grid-column:span 2;grid-row:auto}
}
@media (max-width:640px){
  .g2,.g3,.g4,.evo,.form .row,.footer-grid{grid-template-columns:1fr}
  section{padding:4rem 0}
  .hero{min-height:auto;padding:3rem 0 3rem}
  .hero-visual{height:360px}
  .f1{left:0}.f2{right:0}
  .cta-band,.band{padding:2rem}
  .phero{padding:5rem 0 3.5rem}
  .stat{min-width:0;flex:1}
}
@media (hover:none){.cursor-glow{display:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* polish */
h1,h2,h3{text-wrap:balance}
.hero h1 .typed{white-space:nowrap}
html{scrollbar-color:#3b3470 var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:linear-gradient(var(--p1),var(--p2));border-radius:10px;border:2px solid var(--bg)}
.float small,.stat span{color:#b8bfd9}
.band>div+div{border-right:1px solid var(--line)}
.split-img:before{inset:18px -18px -18px 18px;opacity:.18}
@media (max-width:1020px){.band>div+div{border-right:0}}

.hero h1 .typed{min-width:5.5ch;min-height:1.2em;vertical-align:bottom}
.stat{flex:1 1 0}
.pill{gap:.7rem}
.f3{display:none}

.contact-side img{object-position:center 20%}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#aab2cf 50%),linear-gradient(135deg,#aab2cf 50%,transparent 50%);background-position:1.2rem 55%,.85rem 55%;background-size:6px 6px;background-repeat:no-repeat;padding-left:2.4rem}
.btn-primary{background:linear-gradient(120deg,#8b5cf6,#7c3aed 40%,#06b6d4);background-size:160% auto}
.hero h1 .typed{padding-left:8px}

.contact-grid{align-items:stretch}
.contact-side{min-height:560px}
.contact-side .ov{position:absolute;inset:0;min-height:0;height:auto;background:linear-gradient(0deg,rgba(5,6,15,.97) 0%,rgba(5,6,15,.88) 50%,rgba(5,6,15,.25) 100%)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:1rem center;background-size:14px 14px}

/* ===== Time section ===== */
.timesec{padding:6rem 0;overflow:hidden}
.timesec:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 420px at 25% 50%,rgba(139,92,246,.18),transparent 70%),radial-gradient(500px 380px at 80% 40%,rgba(6,182,212,.10),transparent 70%)}
.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.time-copy h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:900;line-height:1.5;margin:1rem 0 1.4rem}
.quote-box{position:relative;padding:1.6rem 1.8rem 1.3rem;border-radius:22px;background:linear-gradient(140deg,rgba(139,92,246,.14),rgba(15,18,38,.7));border:1px solid rgba(139,92,246,.3);backdrop-filter:blur(10px);min-height:170px}
.quote-box:before{content:"”";position:absolute;top:-.6rem;left:1.2rem;font-size:6rem;line-height:1;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.5}
.quote{font-size:1.2rem;font-weight:700;line-height:1.9;color:#eef0fb;transition:opacity .45s,transform .45s,filter .45s}
.quote-by{display:block;margin-top:.6rem;color:#c4b5fd;font-weight:700;font-size:.92rem;transition:opacity .45s}
.quote-by:before{content:"— "}
.quote.out{opacity:0;transform:translateY(10px);filter:blur(6px)}.quote-by.out{opacity:0}
.quote-dots{display:flex;gap:.45rem;margin-top:1rem}
.quote-dots button{width:8px;height:8px;border-radius:99px;border:0;background:rgba(255,255,255,.2);cursor:pointer;transition:.35s;padding:0}
.quote-dots button.on{width:26px;background:var(--grad)}
.time-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0 1rem}
.tstat{padding:1rem 1.2rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.tstat small{color:#b8bfd9;font-size:.82rem}
.tstat b{display:block;font-size:1.7rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.ybar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:.4rem}
.ybar i{display:block;height:100%;width:0;border-radius:6px;background:var(--grad);box-shadow:0 0 10px rgba(139,92,246,.8);transition:width 1.2s}
.time-note{font-size:.95rem}

.clock-wrap{position:relative;width:min(460px,100%);aspect-ratio:1;margin-inline:auto}
.clock{position:absolute;inset:9%;width:82%;height:82%;filter:drop-shadow(0 30px 60px rgba(139,92,246,.35));z-index:2}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(139,92,246,.25)}
.r1{inset:4%;animation:spinr 40s linear infinite;border-style:dashed}
.r2{inset:0;border-color:rgba(6,182,212,.18);animation:spinr 70s linear infinite reverse}
.r3{inset:-5%;border-color:rgba(236,72,153,.12);border-style:dotted;animation:spinr 110s linear infinite}
@keyframes spinr{to{transform:rotate(360deg)}}
.orbit{position:absolute;inset:0;animation:spinr 12s linear infinite}
.orbit i{position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:#22d3ee;box-shadow:0 0 16px 4px rgba(34,211,238,.7)}
.o2{inset:4%;animation-duration:20s;animation-direction:reverse}.o2 i{background:#a78bfa;box-shadow:0 0 16px 4px rgba(167,139,250,.7)}
.o3{inset:-5%;animation-duration:32s}.o3 i{width:7px;height:7px;background:#f472b6;box-shadow:0 0 14px 3px rgba(244,114,182,.7)}
.clock-wrap:after{content:"";position:absolute;inset:18%;border-radius:50%;z-index:1;background:radial-gradient(circle,rgba(139,92,246,.35),transparent 70%);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.15);opacity:.55}}
.clock-caption{position:absolute;bottom:-6.4rem;inset-inline:0;text-align:center;font-weight:700;color:#cdd3ea}
@media (max-width:1020px){.time-grid{grid-template-columns:1fr;gap:5rem}.clock-wrap{order:-1;width:min(380px,90%)}}
@media (max-width:640px){.time-stats{grid-template-columns:1fr}.quote{font-size:1.05rem}.timesec{padding:4rem 0 5rem}}

.digital-pill{position:absolute;bottom:-2.6rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:.7rem;padding:.55rem 1.2rem;border-radius:99px;background:rgba(15,18,38,.85);border:1px solid rgba(139,92,246,.4);backdrop-filter:blur(12px);box-shadow:0 12px 30px -10px rgba(139,92,246,.6);white-space:nowrap}
.digital-pill b{font-size:1.35rem;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:1px}
.digital-pill small{color:#b8bfd9;font-size:.8rem}
.live-dot{width:8px;height:8px;border-radius:50%;background:#f472b6;box-shadow:0 0 0 0 rgba(244,114,182,.7);animation:pulse2 1s infinite}
@keyframes pulse2{70%{box-shadow:0 0 0 9px rgba(244,114,182,0)}100%{box-shadow:0 0 0 0 rgba(244,114,182,0)}}
.clock{filter:drop-shadow(0 30px 60px rgba(139,92,246,.45))}
.quote-box:before{top:.2rem}
.quote-box{padding-top:2rem}
@media (max-width:1020px){.time-grid{gap:8rem}}
.tstat{text-align:right}.tstat b[dir=ltr]{text-align:right}
.digital-pill small{color:#cdd3ea}