@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--ink:#091a2f;--muted:#627185;--paper:#f5f7f3;--white:#fff;--line:#dbe3e1;--teal:#0b887f;--mint:#dff3e9;--lime:#dcff76;font-family:"DM Sans",sans-serif;color:var(--ink);background:var(--paper);scroll-behavior:smooth}*{box-sizing:border-box}body{min-width:320px;margin:0}a{color:inherit}button{font:inherit}.skip{position:fixed;top:.5rem;left:.5rem;z-index:99;padding:.6rem;background:#fff;transform:translateY(-150%)}.skip:focus{transform:none}header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;min-height:74px;padding:.6rem max(1.25rem,calc((100vw - 1180px)/2));border-bottom:1px solid #091a2f12;background:#f5f7f3e8;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}.brand img,.cta img{border-radius:10px;box-shadow:0 7px 18px #091a2f22}nav{display:flex;align-items:center;gap:1.6rem}nav a{text-decoration:none;font-size:.9rem;font-weight:600}.menu{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.7rem 1.25rem;border:1px solid var(--teal);border-radius:8px;background:var(--teal);color:#fff;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 9px 22px #0b887f26}.btn:hover{background:#076b64}.btn.small{min-height:40px}.shell{width:min(1180px,calc(100% - 2.5rem));margin:auto}.hero{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:5vw;min-height:690px;padding-block:5rem 6rem}.eyebrow{margin:0;color:var(--teal);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}h1,h2,h3{font-family:Manrope,sans-serif}h1{margin:1.2rem 0;font-size:clamp(3rem,5.5vw,5.6rem);line-height:.98;letter-spacing:-.06em}h1 em{color:var(--teal);font-style:normal}.lead{max-width:34rem;color:var(--muted);font-size:1.12rem;line-height:1.7}.actions{display:flex;align-items:center;gap:1.5rem;margin:2rem 0 1.2rem}.actions a:last-child{text-underline-offset:5px}.hero>div>small{color:#718094}.preview{position:relative}.browser{overflow:hidden;border:1px solid #d5dfdd;border-radius:17px;background:#fff;box-shadow:0 35px 75px #16394425;transform:perspective(1200px) rotateY(-3deg)}.bar{height:40px;padding:12px 15px;border-bottom:1px solid #e8edeb;color:#c5cdcb;font-size:.55rem}.bar span{margin-left:.6rem;color:#7d898d}.dash{display:flex;height:375px}.dash aside{width:55px;padding:1.2rem;text-align:center;background:var(--ink);color:#718094;line-height:3}.dash aside:first-letter{color:var(--lime)}.screen{flex:1;padding:1.4rem;background:#f6f8f6}.screen>p{margin:0;color:#829096;font-size:.55rem}.screen>h3{margin:.2rem 0 1rem}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.metrics>div,.panels>div{padding:.8rem;border:1px solid #e3e9e6;border-radius:8px;background:#fff}.metrics small,.metrics b,.metrics i{display:block}.metrics b{margin:.3rem 0}.metrics i{color:var(--teal);font-size:.5rem;font-style:normal}.panels{display:grid;grid-template-columns:1.3fr .7fr;gap:.6rem;margin-top:.6rem}.panels>div{font-size:.65rem}.panels p{padding:.7rem 0;border-bottom:1px solid #e9eeeb}.chart{display:flex;align-items:end;gap:.45rem;height:155px;border-bottom:1px solid #dce5e1}.chart i{flex:1;height:43%;background:var(--mint)}.chart i:nth-child(2){height:56%}.chart i:nth-child(3){height:50%}.chart i:nth-child(4){height:73%}.chart i:nth-child(5){height:68%}.chart i:nth-child(6){height:88%;background:var(--teal)}.notice{position:absolute;right:-1rem;bottom:-2rem;padding:1rem;border-radius:9px;background:#fff;box-shadow:0 15px 40px #16394428;font-size:.7rem}.notice span{display:block;margin:.2rem 3rem 0 1.4rem;color:#718094}.notice strong{position:absolute;right:1rem;top:1.1rem;color:var(--teal)}.trust{display:flex;justify-content:center;gap:2rem;padding:1.2rem;border-block:1px solid var(--line);background:#fff;color:#657487;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.trust i{width:4px;height:4px;margin-top:.4rem;border-radius:50%;background:var(--teal)}.section,.flow{padding-block:7.5rem}.heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:6rem;margin-bottom:3.5rem}.heading h2,.center h2,.faq h2,.cta h2{margin:.7rem 0;font-size:clamp(2.5rem,4vw,4.2rem);line-height:1.04;letter-spacing:-.05em}.heading>p{margin:0;color:var(--muted);line-height:1.75}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.features article{min-height:330px;padding:2rem;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}.features .wide{grid-column:span 2}.icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:2rem;border-radius:9px;background:var(--mint);color:var(--teal);font-size:1.2rem}.features h3{font-size:1.25rem}.features article>p,.report p{color:var(--muted);line-height:1.6}.rows{margin-top:1.5rem;border:1px solid var(--line);border-radius:8px}.rows span{display:block;padding:.65rem;border-bottom:1px solid var(--line);font-size:.72rem}.rows b{float:right;padding:.15rem .45rem;border-radius:8px;background:var(--mint);color:var(--teal);font-size:.6rem}.rows b.due{background:#fff0ce;color:#9b6715}.big{margin-top:3rem;font:700 2.5rem Manrope}.big small{font:400 .75rem "DM Sans";color:var(--muted)}.task{margin-top:3rem;padding:1rem;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 22px #16394412}.task small{display:block;margin-top:.3rem;color:var(--muted)}.report{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.chart.large{height:220px}.avatars{margin-top:3rem;padding:1rem;border-radius:30px;background:var(--mint);color:var(--teal);font-weight:700}.flow{background:var(--ink);color:#fff}.flow .eyebrow{color:var(--lime)}.flow .heading>p,.flow li p{color:#aab6c4}.flow ol{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;padding:0;background:#405067;list-style:none}.flow li{padding:2rem;background:var(--ink)}.flow li span{color:var(--lime);font-size:.7rem}.flow li p{line-height:1.6}.center{text-align:center}.center>p:last-child{color:var(--muted)}.plans{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:1rem;margin-top:3rem}.plans article{position:relative;padding:2rem;border:1px solid var(--line);border-radius:14px;background:#fff}.plans article.featured{padding-block:2.7rem;border:2px solid var(--teal);box-shadow:0 22px 50px #0b887f1c}.plans label{position:absolute;top:0;left:50%;padding:.3rem .8rem;border-radius:0 0 7px 7px;background:var(--teal);color:#fff;font-size:.62rem;text-transform:uppercase;transform:translateX(-50%)}.plans>article>p{min-height:3rem;color:var(--muted)}.price{display:flex;align-items:center;margin:1.5rem 0}.price b{font:800 3.5rem Manrope;letter-spacing:-.06em}.price sup{font-size:1rem}.price span{margin-left:.6rem;color:var(--muted);font-size:.7rem}.plans button{width:100%;margin-top:1.2rem}.outline{background:#fff;color:var(--teal);box-shadow:none}.plans ul{padding:1rem 0 0;list-style:none;color:var(--muted);font-size:.86rem}.plans li{padding:.45rem 0}.plans li:before{content:"✓";margin-right:.6rem;color:var(--teal);font-weight:800}.enterprise{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding:1.5rem 2rem;border:1px solid var(--line);border-radius:11px;background:#eaf1ec}.enterprise small{color:var(--teal);font-weight:800;letter-spacing:.1em}.enterprise h3{margin:.4rem 0}.fine{max-width:720px;margin:1.5rem auto;text-align:center;color:var(--muted);font-size:.75rem}.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:7rem;border-top:1px solid var(--line)}details{padding:1.4rem 0;border-bottom:1px solid var(--line)}summary{cursor:pointer;font-weight:700;list-style:none}summary:after{content:"+";float:right;color:var(--teal)}details[open] summary:after{content:"−"}details p{color:var(--muted);line-height:1.6}.cta{margin:1.2rem;padding:6rem 1rem;border-radius:18px;background:var(--teal);color:#fff;text-align:center}.cta .eyebrow{margin-top:1.3rem;color:var(--lime)}.cta>p:not(.eyebrow){color:#d1e9e5}.light{border-color:#fff;background:#fff;color:var(--teal);box-shadow:none}footer{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding-block:4rem 2rem}footer>div>p{max-width:320px;color:var(--muted)}.links{display:grid;grid-template-columns:1fr 1fr}.links span{display:flex;flex-direction:column;gap:.7rem}.links span>b{font-size:.7rem;letter-spacing:.1em}.links a{color:var(--muted);text-decoration:none}.bottom{grid-column:1/-1;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.75rem}.toast{position:fixed;z-index:99;bottom:1.5rem;left:50%;max-width:calc(100% - 2rem);padding:1rem;border-radius:8px;background:var(--ink);color:#fff;box-shadow:0 10px 30px #0004;transform:translateX(-50%)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}.flow ol,.plans{grid-template-columns:1fr}.plans article.featured{padding-block:2rem}.faq{grid-template-columns:1fr;gap:3rem}.heading{grid-template-columns:1fr;gap:1rem}}
@media(max-width:680px){header{min-height:66px}.menu{display:block;padding:.4rem .7rem;border:1px solid var(--line);border-radius:7px;background:#fff}nav{position:absolute;top:100%;left:0;right:0;display:none;align-items:stretch;padding:1rem;background:var(--paper);box-shadow:0 15px 25px #091a2f18}nav.open{display:flex;flex-direction:column}.hero{min-height:auto;padding-block:3.5rem 5rem}.actions{align-items:flex-start;flex-direction:column}.dash{height:285px}.dash aside{display:none}.screen{padding:.8rem}.panels{grid-template-columns:1fr}.panels>div:last-child{display:none}.chart{height:100px}.notice{right:-.3rem}.trust{flex-wrap:wrap;gap:.7rem;text-align:center}.trust i{display:none}.section,.flow{padding-block:5rem}.features{grid-template-columns:1fr}.features .wide{grid-column:span 1}.report{display:block}.plans article>p{min-height:auto}.enterprise{align-items:flex-start;flex-direction:column;gap:1rem}.faq{gap:2rem}.links,footer{grid-template-columns:1fr}.links{gap:2rem}.bottom{grid-column:1}.cta{margin:.6rem;padding-block:4.5rem}}
@media (prefers-reduced-motion: reduce){:root{scroll-behavior:auto}}

.fa-payment-notice{display:inline-flex;align-items:center;max-width:44rem;margin:1rem auto 0;padding:.7rem 1rem;border:1px solid #abd8cc;border-radius:999px;background:var(--mint);color:#076b64;font-size:.88rem;font-weight:700;line-height:1.7}.fa-payment-notice::before{content:"✓";margin-inline-end:.55rem}.fa-payment-notice[hidden]{display:none}

/* Motion is progressive enhancement: content remains visible without JS, while the public page
   gains depth and pacing on capable devices. Only opacity and transforms animate so layout never
   shifts while localized copy wraps. */
body{position:relative;isolation:isolate;overflow-x:clip}
body::before{content:"";position:fixed;z-index:0;inset:-18vmax;pointer-events:none;background:radial-gradient(circle at 18% 22%,#dff3e980 0,transparent 24%),radial-gradient(circle at 82% 58%,#dcff7638 0,transparent 22%);animation:ambient-drift 18s ease-in-out infinite alternate}
main,footer{position:relative;z-index:1}
header{animation:header-in .45s cubic-bezier(.2,.8,.2,1) both}
.hero-copy>*{animation:hero-copy-in .62s cubic-bezier(.2,.8,.2,1) both}
.hero-copy>*:nth-child(1){animation-delay:.06s}.hero-copy>*:nth-child(2){animation-delay:.13s}.hero-copy>*:nth-child(3){animation-delay:.2s}.hero-copy>*:nth-child(4){animation-delay:.27s}.hero-copy>*:nth-child(5){animation-delay:.34s}
.preview{--tilt-x:0deg;--tilt-y:0deg;--glow-x:50%;--glow-y:50%;animation:preview-in .78s .18s cubic-bezier(.2,.8,.2,1) both}
.preview::before{content:"";position:absolute;inset:-12%;z-index:-1;border-radius:50%;background:radial-gradient(circle at var(--glow-x) var(--glow-y),#0b887f2e,transparent 58%);filter:blur(16px);transition:background-position .2s ease}
.preview .browser{transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(calc(-3deg + var(--tilt-y)));transform-style:preserve-3d;transition:transform .22s ease-out,box-shadow .25s ease}
.preview:hover .browser{box-shadow:0 42px 90px #16394432}
.preview .notice{animation:notice-in .5s .78s cubic-bezier(.2,.8,.2,1) both,notice-float 4.8s 1.4s ease-in-out infinite}
.preview .chart i{transform:scaleY(0);transform-origin:center bottom;animation:bar-rise .72s cubic-bezier(.2,.8,.2,1) forwards}
.preview .chart i:nth-child(1){animation-delay:.55s}.preview .chart i:nth-child(2){animation-delay:.62s}.preview .chart i:nth-child(3){animation-delay:.69s}.preview .chart i:nth-child(4){animation-delay:.76s}.preview .chart i:nth-child(5){animation-delay:.83s}.preview .chart i:nth-child(6){animation-delay:.9s}
.motion-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .58s cubic-bezier(.2,.8,.2,1),transform .58s cubic-bezier(.2,.8,.2,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}
.motion-ready .features article.reveal .chart i{transform:scaleY(0);transform-origin:center bottom;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.motion-ready .features article.reveal.is-visible .chart i{transform:scaleY(1)}
.motion-ready .features article.reveal.is-visible .chart i:nth-child(2){transition-delay:.05s}.motion-ready .features article.reveal.is-visible .chart i:nth-child(3){transition-delay:.1s}.motion-ready .features article.reveal.is-visible .chart i:nth-child(4){transition-delay:.15s}.motion-ready .features article.reveal.is-visible .chart i:nth-child(5){transition-delay:.2s}.motion-ready .features article.reveal.is-visible .chart i:nth-child(6){transition-delay:.25s}
.features article,.plans article,.enterprise{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.features article:hover,.plans article:hover{transform:translateY(-5px);border-color:#b9d8d2;box-shadow:0 20px 45px #16394418}
.features article:hover .icon{transform:rotate(-4deg) scale(1.08)}
.icon{transition:transform .22s cubic-bezier(.2,.8,.2,1),background .2s ease}
.btn{position:relative;overflow:hidden;transition:transform .16s ease,box-shadow .2s ease,background-color .2s ease}
.btn::after{content:"";position:absolute;inset:-60% auto -60% -45%;width:32%;background:#fff3;transform:skewX(-18deg) translateX(-240%);transition:transform .5s ease}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{transform:skewX(-18deg) translateX(620%)}.btn:active{transform:translateY(0) scale(.98)}
details p{transform-origin:top;animation:details-in .22s ease both}
.cta{position:relative;overflow:hidden}.cta::before{content:"";position:absolute;inset:-40% -15%;pointer-events:none;background:radial-gradient(circle at 25% 25%,#ffffff24,transparent 28%);animation:cta-glow 9s ease-in-out infinite alternate}.cta>*{position:relative}
summary::after{transition:transform .18s ease}details[open] summary::after{transform:rotate(180deg)}
@keyframes header-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes hero-copy-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes preview-in{from{opacity:0;transform:translateY(26px) scale(.975)}to{opacity:1;transform:none}}
@keyframes notice-in{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
@keyframes notice-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes bar-rise{to{transform:scaleY(1)}}
@keyframes details-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes ambient-drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,-1.5%,0) scale(1.04)}}
@keyframes cta-glow{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(5%,3%,0)}}
@media(max-width:680px){.features article:hover,.plans article:hover,.btn:hover{transform:none}.preview .browser{transform:none}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.motion-ready .reveal{opacity:1;transform:none}.preview .chart i{transform:scaleY(1)}}

/* ---- Design polish: refined surfaces, typographic detail, and true RTL mirroring. The palette
   and voice stay the same; this layer sharpens what is already there. ---- */
:root{--teal-deep:#076b64;--card-radius:16px}
h1{font-weight:800}
h1 em{background:linear-gradient(105deg,var(--teal) 25%,#0b6a95 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:1.35rem;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.center .eyebrow{justify-content:center}
.btn{border-radius:10px;background:linear-gradient(180deg,#0c968c,#0a7d74);border-color:#0a7d74}
.btn:hover{background:linear-gradient(180deg,#0a8a80,var(--teal-deep))}
.btn.outline{background:#fff;color:var(--teal)}
.btn.light{background:#fff;color:var(--teal)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.features article,.plans article{border-radius:var(--card-radius)}
.features article{background:linear-gradient(180deg,#fff 82%,#fafcf9)}
.trust{border-block:1px solid #e6ebe8;background:linear-gradient(180deg,#fff,#fbfdfb)}
.flow li span{display:grid;place-items:center;width:2.3rem;height:2.3rem;margin-bottom:1rem;border:1px solid #dcff7640;border-radius:50%;font-weight:700}
.flow ol{border-radius:12px;overflow:hidden}
.enterprise{background:linear-gradient(120deg,#eaf1ec,#e3f2ec)}
.faq details{margin-bottom:.85rem;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.faq details[open]{border-color:#b9d8d2;box-shadow:0 10px 28px #16394410}
.faq details p{margin-bottom:.2rem}
.plans article.featured{border-radius:var(--card-radius)}
.notice{border:1px solid #e5ebe8}

/* RTL: mirror the pieces that were positioned with physical properties. */
.rows span{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.rows b{float:none}
.plans li:before{margin-right:0;margin-inline-end:.6rem}
.notice span{margin:.2rem 3rem 0 1.4rem}
html[dir=rtl] .notice{right:auto;left:-1rem}
html[dir=rtl] .notice span{margin:.2rem 1.4rem 0 3rem}
html[dir=rtl] .notice strong{right:auto;left:1rem}
.preview{--tilt-base:-3deg}
html[dir=rtl] .preview{--tilt-base:3deg}
.preview .browser{transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(calc(var(--tilt-base) + var(--tilt-y)))}
html[dir=rtl] .bar span{margin-left:0;margin-right:.6rem}

/* Persian headline metrics: the cursive script needs looser leading and a slightly smaller
   display size than the Latin face; letter-spacing is already zeroed globally for fa. */
html[lang=fa] h1{font-size:clamp(2.5rem,4.6vw,4.6rem);line-height:1.25}
html[lang=fa] .heading h2,html[lang=fa] .center h2,html[lang=fa] .faq h2,html[lang=fa] .cta h2{font-size:clamp(2rem,3.4vw,3.4rem);line-height:1.35}
html[lang=fa] h1 em{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--teal)}
html[lang=ar] h1{line-height:1.2}
html[lang=ar] .heading h2,html[lang=ar] .center h2,html[lang=ar] .faq h2,html[lang=ar] .cta h2{line-height:1.3}
@media(max-width:680px){.preview .browser{transform:none}}