/* ---------- fonts (self-hosted, no external requests) ---------- */
@font-face{font-family:Vazirmatn;font-weight:400;font-display:swap;src:url(../fonts/vazirmatn-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Vazirmatn;font-weight:500;font-display:swap;src:url(../fonts/vazirmatn-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Vazirmatn;font-weight:700;font-display:swap;src:url(../fonts/vazirmatn-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Vazirmatn;font-weight:800;font-display:swap;src:url(../fonts/vazirmatn-arabic-800-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Vazirmatn;font-weight:800;font-display:swap;src:url(../fonts/vazirmatn-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Vazirmatn;font-weight:400;font-display:swap;src:url(../fonts/vazirmatn-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Vazirmatn;font-weight:500;font-display:swap;src:url(../fonts/vazirmatn-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Vazirmatn;font-weight:700;font-display:swap;src:url(../fonts/vazirmatn-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

/* ---------- tokens ---------- */
:root{
  --ink:#15232e;      /* text, dark panels */
  --ink-2:#4a5a66;    /* secondary text */
  --paper:#f1f4f3;    /* page */
  --white:#ffffff;
  --line:#d6dfdc;
  --teal:#0e7c7b;     /* brand, matches the product UI */
  --teal-deep:#0a5f5e;
  --teal-soft:#dcefed;
  --brass:#b8862f;    /* used once: the moving lead on the pipeline */
  --err:#b23a26;
  --display:Vazirmatn,Tahoma,sans-serif;
  --body:Vazirmatn,Tahoma,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.9}
img{max-width:100%;display:block}
a{color:var(--teal-deep)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.4;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.35rem)}
h2{font-size:clamp(1.6rem,3vw,2.15rem)}
h3{font-size:1.2rem;font-weight:700;line-height:1.6}
p{margin:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.lede{font-size:1.12rem;color:var(--ink-2);max-width:62ch}
.skip,.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;right:16px;top:12px;z-index:50;background:var(--white);padding:8px 14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 1rem var(--body);padding:12px 24px;border-radius:999px;border:1.5px solid var(--teal);text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.btn-solid{background:var(--teal);color:var(--white)}
.btn-solid:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn-line{background:transparent;color:var(--teal-deep)}
.btn-line:hover{background:var(--teal-soft)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(241,244,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 1.2rem/1 var(--display);direction:ltr}
.logo svg{flex:none}
.top nav{display:flex;gap:22px;margin-inline-start:auto}
.top nav a{color:var(--ink-2);text-decoration:none;font-size:.97rem}
.top nav a:hover{color:var(--teal-deep)}
.top .btn{padding:8px 18px;font-size:.95rem}

/* ---------- hero ---------- */
.hero{padding:72px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:28px;margin-top:40px;color:var(--ink-2);font-size:.92rem;line-height:1.6}
.hero-facts b{display:block;color:var(--ink);font-size:1rem;margin-bottom:2px}
.hero-shot{min-width:0}

/* browser frame used for every demo screenshot */
.frame{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(21,35,46,.35)}
.frame-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#e7ecea;border-bottom:1px solid var(--line);direction:ltr}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:#c3ccc9}
.frame-bar span{margin-inline-start:12px;font-size:.72rem;color:var(--ink-2);background:var(--white);border-radius:5px;padding:0 10px;line-height:18px}
.frame img{width:100%;height:auto}

/* ---------- pipeline (the one animated moment) ---------- */
.flow{padding:110px 0 90px}
.flow-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:56px}
.track{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;counter-reset:st}
.track::before{content:"";position:absolute;top:21px;right:22px;left:calc((100% - 80px) / 5 - 22px);height:2px;background:var(--line)}
.track .run{position:absolute;top:21px;right:22px;height:2px;width:0;background:var(--teal)}
.track .lead{position:absolute;top:13px;right:14px;width:18px;height:18px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 5px rgba(184,134,47,.2)}
.track li{position:relative;counter-increment:st}
.track li::before{content:counter(st,persian);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);border:2px solid var(--line);font:800 1.05rem/1 var(--display);color:var(--ink-2);margin-bottom:18px;position:relative;transition:border-color .3s,color .3s,background .3s}
.track li.on::before{border-color:var(--teal);color:var(--white);background:var(--teal)}
.track h3{font-size:1.08rem;margin-bottom:6px}
.track p{font-size:.95rem;color:var(--ink-2);line-height:1.8}
.track .who{display:inline-block;margin-top:10px;font-size:.82rem;color:var(--teal-deep);background:var(--teal-soft);border-radius:999px;padding:1px 10px}

/* ---------- roles (tabs) ---------- */
.roles{padding:90px 0;background:var(--white);border-block:1px solid var(--line)}
.roles h2{margin-bottom:12px}
.tabs{display:flex;gap:6px;margin:36px 0 34px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{all:unset;cursor:pointer;padding:10px 18px 12px;font:500 1rem var(--body);color:var(--ink-2);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--teal)}
.tabs button:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.panel{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:start}
.panel[hidden]{display:none}
.panel h3{font-family:var(--display);font-size:1.45rem;margin-bottom:10px}
.panel .lede{font-size:1rem;margin-bottom:18px}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-inline-start:26px;margin-bottom:9px}
.ticks li::before{content:"";position:absolute;right:0;top:.5em;width:16px;height:16px;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%230e7c7b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- features ---------- */
.feats{padding:100px 0 60px}
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;margin-top:80px}
.feat.flip .feat-text{order:2}
.feat h3{font-family:var(--display);font-size:1.5rem;margin-bottom:12px}
.feat .lede{font-size:1rem;margin-bottom:16px}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:100px;border-top:1px solid var(--line)}
.more div{padding:26px 0 26px 28px;border-bottom:1px solid var(--line)}
.more h3{font-size:1.04rem;margin-bottom:4px}
.more p{font-size:.95rem;color:var(--ink-2)}

/* ---------- pricing ---------- */
.pricing{padding:100px 0;background:var(--white);border-block:1px solid var(--line)}
.pricing .lede{margin-top:12px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px;align-items:stretch}
.plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:30px 28px;background:var(--paper)}
.plan h3{font-family:var(--display);font-size:1.45rem}
.plan .for{color:var(--ink-2);font-size:.96rem;margin:4px 0 22px;min-height:3.6em}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.price b{font:800 2.3rem/1.1 var(--display)}
.price span{color:var(--ink-2);font-size:.95rem}
.plan .ticks{flex:1;margin-bottom:28px;font-size:.97rem}
.plan .btn{width:100%}
.plan-dark{background:var(--ink);color:#e8eeec;border-color:var(--ink)}
.plan-dark .for,.plan-dark .price span{color:#a9b8b5}
.plan-dark .price{border-color:#2d3f4b}
.plan-dark .ticks li::before,.contact .ticks li::before{filter:brightness(1.9) saturate(.8)}
.plan-dark .btn-solid{background:#e8eeec;color:var(--ink);border-color:#e8eeec}
.plan-dark .btn-solid:hover{background:var(--white)}
.note{margin-top:22px;font-size:.92rem;color:var(--ink-2)}

/* ---------- faq ---------- */
.faq{padding:100px 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:500;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--body);color:var(--teal)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:10px;color:var(--ink-2)}

/* ---------- contact ---------- */
.contact{padding:100px 0;background:var(--ink);color:#e8eeec}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}
.contact .lede{color:#a9b8b5;margin-top:14px}
.contact .ticks{margin-top:28px;color:#c9d4d1}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.wide{grid-column:1/-1}
label{font-size:.93rem;color:#c9d4d1}
input,select{height:50px}
input,select,textarea{font:inherit;font-size:1rem;color:var(--ink);background:#f7f9f8;border:1.5px solid transparent;border-radius:10px;padding:11px 14px;width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:#6fc3bf;box-shadow:0 0 0 3px rgba(111,195,191,.35)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#e07a66}
.ltr{direction:ltr;text-align:right}
.err{font-size:.86rem;color:#f2a493;min-height:1.2em}
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-foot .btn{background:#6fc3bf;border-color:#6fc3bf;color:var(--ink);font-weight:700}
.form-foot .btn:hover{background:#8fd3cf}
.form-foot .btn[disabled]{opacity:.6;cursor:wait}
.status{font-size:.97rem}
.status.ok{color:#8fd3cf}
.status.bad{color:#f2a493}

/* ---------- footer ---------- */
footer{padding:28px 0;background:var(--ink);color:#8c9d99;border-top:1px solid #2d3f4b;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer a{color:#c9d4d1;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .top nav{display:none}
  .top .btn{margin-inline-start:auto}
  .hero{padding-top:44px}
  .hero-grid,.flow-head,.panel,.feat,.faq-grid,.contact-grid{grid-template-columns:1fr;gap:32px}
  .feat.flip .feat-text{order:0}
  .track{grid-template-columns:1fr;gap:0}
  .track::before{top:22px;bottom:22px;right:21px;left:auto;width:2px;height:auto}
  .track .run{top:22px;right:21px;width:2px;height:0}
  .track .lead{display:none}
  .track li{display:grid;grid-template-columns:44px 1fr;gap:0 18px;padding-bottom:28px}
  .track li::before{grid-row:1/4;margin:0}
  .track .who{justify-self:start}
  .plans{grid-template-columns:1fr}
  .more{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .hero-facts{grid-template-columns:1fr 1fr}
  .more{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .flow,.roles,.feats,.pricing,.faq,.contact{padding:72px 0}
  .plan .for{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}