/* The product site. Brand tokens mirror admin/src/theme.tsx (indigo + sun). */
@font-face{font-family:Vazirmatn FD;src:url(fonts/Vazirmatn-FD-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn FD;src:url(fonts/Vazirmatn-FD-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn FD;src:url(fonts/Vazirmatn-FD-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
:root{--primary:#2b3a8c;--primary-dark:#1e2a6b;--soft:#eef2ff;--navy:#1e2440;--sun:#f5b83d;--sun-soft:#fff1cc;--ink:#1e2440;--muted:#5e6478;--bg:#fbfaf7;--surface:#fff;--line:#e7e9ee;--mint:#1e8a5a;--shadow:0 12px 34px rgba(30,36,64,.08)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.85 "Vazirmatn FD",Tahoma,sans-serif;overflow-x:clip}
a{color:inherit}img{max-width:100%;display:block}ul{margin:0;padding:0;list-style:none}
h1,h2,h3{font-weight:800;line-height:1.3;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.1rem,1.2rem + 3.5vw,3.7rem);line-height:1.22}
h2{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.4rem)}h3{font-size:1.12rem}
p{margin:0 0 1em}
.i{width:1.3em;height:1.3em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:min(1200px,100%);margin-inline:auto;padding-inline:20px}.wrap.narrow{width:min(800px,100%)}
.center{text-align:center}.sub{text-align:center;color:var(--muted);max-width:38em;margin-inline:auto}
.lead{font-size:1.16rem;color:var(--muted);max-width:36em}
.kicker{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--primary);background:var(--soft);padding:5px 14px;border-radius:999px;font-size:.92rem}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--primary);color:#fff;padding:8px 14px;border-radius:8px;z-index:40}.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:9px 22px;border:0;border-radius:12px;background:var(--primary);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn.lg{min-height:56px;padding-inline:32px;font-size:1.05rem}.btn.sm{min-height:42px;padding-inline:18px;font-size:.93rem}
.btn.ghost{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary)}.btn.ghost:hover{background:var(--soft)}
.btn.accent{background:var(--sun);color:var(--navy)}.btn.accent:hover{background:#e0a526}

.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-block-end:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:22px;min-height:72px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.25rem;text-decoration:none}
.nav{display:flex;gap:2px;margin-inline-end:auto}
.nav a{padding:7px 12px;border-radius:9px;text-decoration:none;font-weight:700;font-size:.93rem;color:var(--muted)}
.nav a:hover{color:var(--ink);background:var(--soft)}
.link-login{font-weight:700;text-decoration:none;font-size:.93rem;padding:10px 6px}

.hero{background:radial-gradient(900px 500px at 92% -10%,var(--sun-soft),transparent 65%),radial-gradient(800px 560px at 0% 20%,var(--soft),transparent 60%)}
.hero-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center;padding-block:clamp(40px,5vw,76px)}
h1 em{font-style:normal;color:var(--primary);background:linear-gradient(transparent 68%,var(--sun) 68%,var(--sun) 90%,transparent 90%)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.ticks{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:22px;font-size:.92rem;color:var(--muted)}
.ticks.col{flex-direction:column}.ticks li{display:flex;align-items:center;gap:6px}.ticks .i{color:var(--mint)}

.mock-phone{position:absolute;inset-inline-end:0;bottom:0;width:170px;background:#fbf7f1;border:6px solid var(--navy);border-radius:26px;padding:14px 11px;display:grid;gap:7px;box-shadow:0 24px 50px rgba(30,36,64,.28)}
.ph-head{font-weight:800;font-size:14px}.ph-chip{background:#ddf3e8;color:#1e6b48;border-radius:999px;padding:2px 9px;font-size:10px;font-weight:700;width:fit-content}
.ph-card{background:#fff;border-radius:12px;padding:7px 9px;display:grid;gap:4px}.ph-card small{font-size:10px;color:var(--muted)}.bar{height:7px;border-radius:9px;background:#eef0f4;overflow:hidden}.bar i{display:block;height:100%;width:var(--w);background:var(--sun);border-radius:9px}.ph-note{font-size:11px;background:var(--soft)}

.ri{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--soft);color:var(--primary);margin-bottom:14px;font-size:1.05rem}
.bento-sec{padding-block:clamp(44px,6vw,76px);background:var(--surface);border-block:1px solid var(--line)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.tile{display:block;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:22px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#bcc1cc}
.tile p{margin:0;color:var(--muted);font-size:.94rem}.tile h2{font-size:1.15rem}
.bento.flat{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:0}.bento.small{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.bento.small .tile{display:flex;align-items:center;gap:10px;padding:14px}.bento.small .ri{margin:0;width:42px;height:42px}.bento.small h3{margin:0;font-size:1rem}

.dark{background:var(--navy);color:#fff;padding-block:clamp(52px,7vw,92px)}
.dark-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dark .lead{color:#c8cde0}.dark .kicker{background:rgba(245,184,61,.16);color:var(--sun)}
.shield-list{display:grid;gap:12px}.shield-list li{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.07);border-radius:14px;padding:14px 16px}.shield-list .i{color:var(--sun);font-size:1.15rem}.shield-list strong{display:block}.shield-list span{font-size:.9rem;color:#c8cde0}

.sites{padding-block:clamp(52px,7vw,92px)}
.sites-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.browsers{position:relative;height:330px}
.br{position:absolute;width:62%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 18px 44px rgba(30,36,64,.16)}
.br-bar{display:block;background:#f3f4f7;font-size:11px;padding:5px 12px;color:var(--muted);direction:ltr;text-align:start}
.br-hero{height:170px;display:grid;align-content:center;gap:9px;padding:20px}.br-hero b{width:60%;height:15px;border-radius:7px}.br-hero i{width:34%;height:24px;border-radius:12px}
.b1{top:0;inset-inline-start:0}.b1 .br-hero{background:#fff1e4}.b1 b{background:#2c2230}.b1 i{background:#d9534f}
.b2{top:68px;inset-inline-start:19%;z-index:1}.b2 .br-hero{background:#bfe3fb}.b2 b{background:#16324a}.b2 i{background:#1277c4}
.b3{top:136px;inset-inline-start:38%;z-index:2}.b3 .br-hero{background:#101a40}.b3 b{background:#fff}.b3 i{background:#c79a2e}

.faq-sec,.list-sec{padding-block:clamp(36px,5vw,64px)}
.faq{display:grid;gap:10px;margin-top:22px}.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 20px}.faq summary{cursor:pointer;font-weight:700;padding-block:15px}.faq p{color:var(--muted)}
.end-cta{padding-block:20px 72px}.end-box{text-align:center;background:linear-gradient(135deg,#3f50a8,#1e2440);color:#fff;border-radius:28px;padding:clamp(34px,6vw,64px) 22px}.end-box p{color:#dfe3f3}

.pagehero{background:radial-gradient(700px 360px at 90% -10%,var(--sun-soft),transparent 65%),var(--soft);padding-block:clamp(40px,6vw,76px)}
.pagehero-in{display:flex;justify-content:space-between;align-items:center;gap:28px}
.big-i{display:grid;place-items:center;width:150px;height:150px;border-radius:44px;background:#fff;color:var(--primary);font-size:3.2rem;flex:none;box-shadow:var(--shadow)}
.crumbs{display:flex;gap:7px;flex-wrap:wrap;font-size:.87rem;color:var(--muted);margin-bottom:12px}.crumbs a{text-decoration:none}
.points{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.points article{display:flex;gap:14px;background:var(--surface);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.points h2{font-size:1.1rem;margin-bottom:.3em}.points p{margin:0;color:var(--muted)}
.tick{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ddf3e8;color:var(--mint);flex:none}

.demo-in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form{display:grid;gap:14px;background:var(--surface);border-radius:22px;padding:clamp(20px,4vw,32px);box-shadow:var(--shadow)}
.form label{display:grid;gap:5px;font-weight:700;font-size:.93rem}
.form input{width:100%;min-height:50px;padding:10px 14px;font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px}
.form input:focus{outline:2px solid var(--primary);border-color:transparent}
.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.alert{display:flex;gap:8px;align-items:center;margin:0;padding:12px 14px;border-radius:12px;font-weight:700;font-size:.95rem}.alert.ok{background:#ddf3e8;color:#1e6b48}.alert.bad{background:#fdecea;color:#8a1f14}

.foot{background:var(--navy);color:#fff;padding-block:52px 20px}
.foot-in{display:grid;grid-template-columns:1.2fr 1.6fr .9fr;gap:36px}
.foot h2{font-size:1rem;margin-bottom:.8em}.foot nav{display:flex;flex-direction:column;gap:4px;font-size:.93rem}.foot nav a{text-decoration:none;opacity:.8}.foot nav a:hover{opacity:1}
.foot nav:first-of-type{display:grid;grid-template-columns:1fr 1fr}.foot nav:first-of-type h2{grid-column:1/-1}
.foot p{opacity:.75;margin-top:.7em}.foot-end{margin-top:30px;padding-top:14px;border-block-start:1px solid rgba(255,255,255,.14);font-size:.87rem;opacity:.75}

/* real product screens */
.stage{position:relative;margin:0;padding-block-end:30px;padding-inline-end:44px}
.stage figcaption{margin-top:10px;font-size:.8rem;color:var(--muted);text-align:center}
.frame{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:0 22px 56px rgba(30,36,64,.15)}
.frame img{width:100%;height:auto}
.frame-bar{display:flex;gap:5px;padding:9px 12px;background:#f3f4f7}.frame-bar i{width:9px;height:9px;border-radius:50%;background:#d9dce3}
.frame.sm{box-shadow:var(--shadow)}
.frame.sm img{width:123%;max-width:none;margin-inline-start:-23%}
.stage .mock-phone{bottom:6px}
.hero-shot{flex:0 1 54%;min-width:0}
.pagehero-in>div:first-child{flex:1 1 46%;min-width:0}

.kinds{margin-block-start:-8px;padding-block-end:clamp(30px,4vw,52px)}
.kinds-in{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kind{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.kind:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.kind .ri{margin:0;flex:none;width:46px;height:46px}
.kind strong{display:block;line-height:1.5}.kind small{display:block;color:var(--muted);font-size:.87rem;line-height:1.7;margin-top:2px}

.day{padding-block:clamp(44px,6vw,80px);background:var(--surface);border-block:1px solid var(--line)}
.story{display:grid;gap:clamp(30px,5vw,60px);margin-top:36px}
.story article{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,60px);align-items:center}
.story article:nth-child(even){grid-template-columns:1.2fr .8fr}.story article:nth-child(even) .story-copy{order:2}
.time{display:inline-block;font-weight:700;font-size:.87rem;color:#8a5a00;background:var(--sun-soft);border-radius:999px;padding:2px 13px;margin-bottom:10px}
.story h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem)}
.story p{color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--primary);text-decoration:none}

.bento-sec{background:transparent;border:0}
.steps-sec{padding-block:clamp(44px,6vw,76px);background:var(--surface);border-block:1px solid var(--line)}
.steps{counter-reset:s;list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps li{counter-increment:s;display:grid;gap:6px;align-content:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;font-weight:800}
.steps strong{font-size:1.08rem}.steps span{color:var(--muted)}

.nav-m{display:none;position:relative}
.nav-m summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.nav-m summary::-webkit-details-marker{display:none}
.nav-m nav{position:absolute;inset-inline-end:0;top:54px;min-width:220px;display:grid;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;z-index:40}
.nav-m a{padding:11px 13px;border-radius:9px;text-decoration:none;font-weight:700}.nav-m a:hover{background:var(--soft)}

@media (max-width:980px){
  .nav-m{display:block}.pagehero-in{flex-direction:column;align-items:stretch}.hero-shot{flex:none}
  .kinds-in,.steps{grid-template-columns:1fr}.story article,.story article:nth-child(even){grid-template-columns:1fr}.story article:nth-child(even) .story-copy{order:0}
  .hero-in,.dark-in,.sites-in,.demo-in{grid-template-columns:1fr}
  .nav{display:none}.link-login{margin-inline-start:auto}
  .bento{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:640px){
  .points,.bento{grid-template-columns:1fr}
  .btn.lg{width:100%}.big-i{display:none}
  .stage{padding-inline-end:0}.stage .mock-phone{display:none}
  .top-in{gap:10px}.link-login{display:none}.btn.sm{margin-inline-start:auto;padding-inline:13px}
  .browsers{height:290px}.br{width:74%}.b2{inset-inline-start:13%}.b3{inset-inline-start:26%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}