@font-face{font-family:'Vazirmatn';font-weight:400;font-display:swap;src:url(fonts/vazirmatn-regular.woff2) format('woff2')}
@font-face{font-family:'Vazirmatn';font-weight:700;font-display:swap;src:url(fonts/vazirmatn-bold.woff2) format('woff2')}

/* One design canvas, 1440 px wide, written in rem. From 900 px up the root size follows the window width (16 px at 1440), so the whole page is ONE picture that
   gets smaller or bigger: no box changes its shape or place. Under 900 px the phone arrangement (one column) takes over. */
:root{--navy:#021324;--ink:#f6f8fe;--soft:#dbe4ee;--gold:#ffc344;--frame:rgba(185,186,168,.55);color-scheme:dark}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:6rem;-webkit-text-size-adjust:100%}
@media(min-width:900px){html{font-size:clamp(10px,1.1111vw,40px)}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--ink);font:400 1rem/1.55 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
html[lang=fa] body,html[lang=fa] input,html[lang=fa] select,html[lang=fa] textarea,html[lang=fa] button{font-family:'Vazirmatn',Tahoma,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:.19rem solid #fff4ba;outline-offset:.19rem}

/* the page picture: the artwork keeps its own proportions (it is as wide as the window) */
.page{position:relative;overflow:hidden;padding-bottom:2rem;background:var(--navy) url(img/bg.webp) center top/100% auto no-repeat}
.shell{width:76.25rem;margin-inline:auto;position:relative}

/* ── header ── */
.bar{display:flex;align-items:center;gap:1.5rem;height:4rem;margin-top:.75rem;padding-inline:1rem;border:1px solid var(--frame);border-radius:1.1rem;z-index:5;
  background:linear-gradient(180deg,rgba(43,63,76,.82),rgba(3,20,37,.95) 78%);box-shadow:0 -.1rem .8rem rgba(255,174,58,.16),inset 0 1px 1px rgba(255,255,255,.12)}
.brand{display:inline-flex;align-items:center;gap:.5rem;line-height:1}
.brand img{display:block;width:3.1rem;height:auto;filter:drop-shadow(0 0 .2rem rgba(255,200,90,.25))}
.brand strong{font-size:1.8rem;font-weight:750;letter-spacing:.13em}
html[lang=fa] .brand strong{letter-spacing:.05em}
.links{display:flex;gap:2rem;margin-inline:auto;font-size:.95rem;font-weight:500;white-space:nowrap}
.links a:hover{color:#ffcd64}
.bar-actions{display:flex;align-items:center;gap:1rem}
.lang,.menu{border:1px solid rgba(159,189,202,.63);border-radius:.7rem;background:linear-gradient(165deg,#244154,#112d40 47%,#051625);color:#fff;font-size:.8rem;font-weight:670;min-width:4.1rem;height:2.1rem;padding:0 .5rem;box-shadow:inset 0 1px 1px rgba(255,255,255,.27),0 .2rem .5rem rgba(0,0,0,.25)}
.lang:hover{filter:brightness(1.1)}
.menu{display:none;flex-direction:column;justify-content:center;gap:.28rem;width:2.6rem;min-width:0;align-items:center}
.menu span{display:block;width:1.2rem;height:2px;background:#fff;border-radius:2px}

/* ── buttons ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:3.2rem;padding:0 1.9rem;border-radius:.75rem;font-size:1.06rem;font-weight:730;white-space:nowrap;border:1px solid transparent;cursor:pointer;overflow:hidden;transition:filter .18s,transform .18s}
.btn::before{content:"";position:absolute;inset:1px .12rem auto .12rem;height:46%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0));pointer-events:none}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:progress}
.btn-gold{color:#091421;border-color:#ffe9a2;background:linear-gradient(172deg,#fff4b7,#ffe39a 17%,#ffd268 48%,#ffbc38 75%,#e9a124);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -.2rem .4rem rgba(129,67,0,.2),0 0 1rem rgba(254,183,51,.36),0 .3rem .7rem rgba(0,0,0,.24);text-shadow:0 1px 0 rgba(255,244,188,.6)}
.btn-outline{border-color:rgba(171,201,215,.72);background:linear-gradient(170deg,#244155,#132e41 37%,#0a1d30 78%,#071626);box-shadow:inset 0 1px 0 rgba(227,244,255,.3),inset 0 -.12rem .3rem rgba(0,0,0,.3),0 .25rem .6rem rgba(0,0,0,.23)}
.btn-small{min-height:2.75rem;padding:0 1.6rem;font-size:.95rem}

.eyebrow{color:#ffcf3d;font-size:1rem;font-weight:800;letter-spacing:.15em;line-height:1.35}
html[lang=fa] .eyebrow{letter-spacing:0}

/* ── hero ── */
.hero{display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:1rem;min-height:33rem;padding-top:1.2rem}
.hero-copy{position:relative;z-index:2}
.hero h1{margin:1rem 0 .8rem;font-size:3.8rem;line-height:1.07;font-weight:800;letter-spacing:-.035em}
html[lang=fa] .hero h1{letter-spacing:0;line-height:1.4;font-size:3.3rem}
.h1a,.h1b{display:block}
.h1b{background:linear-gradient(180deg,#fff0ad,#ffc95f 55%,#e8a63a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#f6c65b}
.lead{max-width:30rem;font-size:1.2rem;line-height:1.5;color:var(--soft)}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.4rem}
.trust{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:1.8rem;font-size:.85rem;color:#e2e9f1}
.trust li::before{content:"◇";color:#ffc039;font-size:1.15rem;margin-inline-end:.4rem;font-weight:700}
.hero-art{position:relative;z-index:1}
.hero-art::before{content:"";position:absolute;inset:6% 4% 2%;background:radial-gradient(ellipse at 50% 58%,rgba(254,192,77,.26),rgba(254,192,77,.08) 42%,transparent 74%);filter:blur(1.6rem)}
.hero-art img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 1rem 1.7rem rgba(245,167,45,.18));
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6.5%,#000 93.5%,transparent),linear-gradient(to bottom,transparent,#000 5.5%,#000 91.5%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 6.5%,#000 93.5%,transparent),linear-gradient(to bottom,transparent,#000 5.5%,#000 91.5%,transparent);mask-composite:intersect}

/* ── headings ── */
.heading{text-align:center;margin-bottom:1.5rem}
.heading h2,.h-lines{position:relative;display:table;margin:.15rem auto 0;font-size:2.9rem;font-weight:800;line-height:1.1;letter-spacing:-.03em;text-shadow:0 2px 3px rgba(0,0,0,.3)}
html[lang=fa] .heading h2{letter-spacing:0;line-height:1.35;font-size:2.5rem}
.h-lines::before,.h-lines::after{content:"";position:absolute;top:56%;width:12rem;height:2px;pointer-events:none;filter:drop-shadow(0 0 .3rem rgba(255,185,48,.8))}
.h-lines::before{inset-inline-end:calc(100% + 1.5rem);background:linear-gradient(to right,transparent,rgba(247,181,53,.2) 45%,#ffcb6a 80%,transparent)}
.h-lines::after{inset-inline-start:calc(100% + 1.5rem);background:linear-gradient(to left,transparent,rgba(247,181,53,.2) 45%,#ffcb6a 80%,transparent)}
[dir=rtl] .h-lines::before{background:linear-gradient(to left,transparent,rgba(247,181,53,.2) 45%,#ffcb6a 80%,transparent)}
[dir=rtl] .h-lines::after{background:linear-gradient(to right,transparent,rgba(247,181,53,.2) 45%,#ffcb6a 80%,transparent)}
.sub{margin:.5rem auto 0;max-width:48rem;color:#e9eef4;font-size:1.05rem}

/* ── feature cards ── */
.features{padding-top:1rem;padding-bottom:2.5rem}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(12.2rem,auto);gap:1rem}
.card,.panel,.demo-card,.faq-item{border:1px solid transparent;
  background:radial-gradient(ellipse 95% 90% at 10% 0,rgba(79,129,150,.26),transparent 78%) padding-box,linear-gradient(170deg,#203b4e,#0d2638 26%,#061a2a 70%,#0c2733) padding-box,linear-gradient(155deg,#ffdb82,#95a7ad 15%,#627c8c 45%,#86969b 73%,#e9b24f) border-box;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1),0 .4rem 1rem rgba(0,2,12,.3),0 0 .65rem rgba(250,178,48,.14)}
.feature{position:relative;overflow:hidden;padding:1rem 1.3rem 1rem 1.8rem;border-radius:1.05rem}
[dir=rtl] .feature{padding:1rem 1.8rem 1rem 1.3rem}
.feature::before{content:"";position:absolute;top:-1.5rem;inset-inline-start:-1.7rem;width:4.5rem;height:3.2rem;background:radial-gradient(ellipse,rgba(255,214,126,.85),rgba(251,170,51,.3) 30%,transparent 69%);filter:blur(.7rem);pointer-events:none}
.feature .ic{display:block;width:2.2rem;height:2.2rem;margin-bottom:.2rem;color:#ffca32;filter:drop-shadow(0 0 .12rem rgba(249,163,0,.3))}
.feature h3{margin:.1rem 0 .45rem;font-size:1.33rem;font-weight:760;line-height:1.15;letter-spacing:-.02em;color:#f9fbff}
.feature p{font-size:.95rem;line-height:1.4;color:#eef1f6}
html[lang=fa] .feature h3{letter-spacing:0}

/* ── panels ── */
.panel{border-radius:1.45rem;padding:1.3rem 1.8rem 1.5rem;margin-bottom:1.8rem}
.see{width:78rem}
.shots{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.1rem;align-items:start}
.shot img{display:block;width:100%;height:21rem;object-fit:cover;border-radius:1rem;box-shadow:0 0 0 1px rgba(255,210,127,.5),0 0 .8rem rgba(244,163,48,.16),0 .6rem .9rem rgba(0,0,0,.22)}
.shot-admin img{object-position:top left}
.shot figcaption{margin:.5rem .4rem 0;font-size:.95rem;line-height:1.4;color:#eef0f4}

.why{display:grid;grid-template-columns:1fr 1.02fr;gap:3rem;width:73rem;padding:1.5rem 3.8rem;align-items:center}
.why h2{margin:.6rem 0 .75rem;font-size:2.7rem;line-height:1.12;font-weight:790;letter-spacing:-.02em}
html[lang=fa] .why h2{letter-spacing:0;line-height:1.4;font-size:2.3rem}
.why-copy p:last-child{max-width:31rem;font-size:1.05rem;line-height:1.5;color:var(--soft)}
.reasons{display:grid;gap:.7rem}
.reasons li{position:relative;display:flex;flex-direction:column;gap:.1rem;padding-inline-start:2.4rem;padding-bottom:.6rem;border-bottom:1px solid rgba(119,139,152,.24)}
.reasons li:last-child{border-bottom:0}
.reasons li::before{content:"";position:absolute;inset-inline-start:0;top:.1rem;width:3px;height:2.6rem;background:linear-gradient(180deg,#ffd56e,#d49422);box-shadow:0 0 .45rem rgba(255,169,42,.24)}
.reasons strong{font-size:1.18rem;font-weight:750}
.reasons span{font-size:.95rem;color:#e9edf3}

/* ── FAQ ── */
.faq{width:61rem;margin-top:2.2rem;margin-bottom:2.2rem}
.faq-list{display:grid;gap:.6rem}
.faq-item{border-radius:.8rem;overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.8rem;padding:.45rem 1.4rem;list-style:none;font-size:1.06rem;font-weight:740;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:#ffca3c;font-size:1.5rem;font-weight:800;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 1.5rem 1rem;font-size:.97rem;line-height:1.5;color:#dce8f1}

/* ── demo form ── */
.demo-wrap{margin-bottom:3rem}
.demo-card{width:61rem;margin-inline:auto;padding:1.3rem 2.7rem 1.2rem;border-radius:1.5rem;box-shadow:0 0 0 1px rgba(255,202,89,.16),0 0 1.4rem rgba(255,181,58,.3),inset 0 1px 2px rgba(255,255,255,.15)}
.demo-card h2{margin:.1rem 0 .15rem;font-size:2.4rem;font-weight:780;line-height:1.1;letter-spacing:-.02em}
html[lang=fa] .demo-card h2{letter-spacing:0}
.demo-intro{margin:.2rem 0 .9rem;font-size:.98rem;color:var(--soft)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem}
.form-grid label{display:flex;flex-direction:column;gap:.25rem;min-width:0;font-size:.9rem}
.form-grid .wide{grid-column:1/-1}
input,select,textarea{display:block;width:100%;min-width:0;height:2.5rem;padding:.45rem .75rem;border:1px solid #69879e;border-radius:.62rem;color:#f4f6fc;background:rgba(2,20,38,.68);font:inherit;font-size:.95rem;
  box-shadow:inset 0 0 0 1px rgba(130,157,178,.12),inset 0 2px .45rem rgba(0,0,0,.2)}
select{appearance:none;padding-inline-end:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='m2 2 7 7 7-7' stroke='%23e0e6eb' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:1rem}
[dir=rtl] select{background-position:left .8rem center}
option{color:#f5f5f8;background:#0b2034}
textarea{resize:vertical;min-height:3.3rem;height:3.3rem}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #ffd17a;outline-offset:1px}
.trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.turnstile{margin-top:.7rem}
.form-foot{display:flex;align-items:center;gap:1.1rem;margin-top:.9rem;flex-wrap:wrap}
.form-foot .btn{min-height:2.7rem;font-size:1rem}
.note{font-size:.85rem;color:#e8eef6}
#status{min-height:1.3rem;margin-top:.5rem;font-size:.9rem}
#status.error{color:#ffb4a2}
#status.ok{color:#9ae6b4}
.channels{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid #2a3b52;font-size:.9rem}
.channels a{color:var(--gold)}
.muted{color:#b4c0cf}

/* ── footer ── */
.foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:4.7rem;border-top:1px solid rgba(190,163,96,.31);font-size:.9rem}
.foot .brand strong{font-size:1.8rem}

/* ═══ phone and small tablet: one column ═══ */
@media(max-width:899px){
  .shell,.see,.why,.faq,.demo-card{width:calc(100% - 2.2rem)}
  .bar{position:sticky;top:.5rem;gap:.7rem;height:3.6rem;margin-top:.6rem}
  .brand img{width:2.4rem}
  .brand strong{font-size:1.4rem}
  .links{display:none;position:absolute;top:calc(100% + .4rem);inset-inline:0;flex-direction:column;gap:.1rem;margin:0;padding:.6rem;border:1px solid var(--frame);border-radius:1rem;background:#061b2e;font-size:1rem}
  .links.open{display:flex}
  .links a{padding:.7rem .6rem}
  .bar-actions{margin-inline-start:auto;gap:.5rem}
  .menu{display:flex}
  .hide-s{display:none}
  .hero{grid-template-columns:1fr;min-height:0;gap:.4rem;padding-top:1.2rem}
  .hero h1{font-size:2.5rem}
  html[lang=fa] .hero h1{font-size:2.1rem}
  .lead{font-size:1.05rem;max-width:none}
  .btn{min-height:3rem;padding:0 1.4rem}
  .hero-art{margin-inline:-.6rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .heading h2,.h-lines{font-size:2.1rem}
  html[lang=fa] .heading h2{font-size:1.9rem}
  .h-lines::before,.h-lines::after{display:none}
  .panel{padding:1.1rem 1rem 1.2rem}
  .shots{grid-template-columns:1fr 1fr}
  .shot-admin{grid-column:1/-1}
  .shot img{height:auto;aspect-ratio:3/2}
  .shot:not(.shot-admin) img{aspect-ratio:1/1}
  .why{grid-template-columns:1fr;gap:1.2rem;padding:1.3rem 1.2rem}
  .why h2{font-size:2rem}
  html[lang=fa] .why h2{font-size:1.8rem}
  .demo-card{padding:1.2rem 1.1rem}
  .demo-card h2{font-size:2rem}
  .foot{flex-direction:column;align-items:flex-start;padding:1rem 0}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
  .actions .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.hero h1 span,.heading h2,.why h2,.demo-card h2{text-wrap:balance}