@font-face {
  font-family: "Vazir";
  src: url("fonts/Vazir.woff2") format("woff2"),
       url("fonts/Vazir.woff") format("woff"),
       url("fonts/Vazir.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --w:#ffffff; --bg:#f4f7ff; --txt:#0d1829; --muted:#6272899;
  --muted:#627289; --border:#dce6f5; --blue:#1e5fdb;
  --blue-d:#1347b8; --bl:#e8f0ff; --gold:#e8920c;
  --teal:#0891b2; --shadow:0 4px 24px rgba(20,50,120,.08);
  --shadow-lg:0 16px 56px rgba(20,50,120,.13);
  --mono:'Vazir',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;font-family:'Vazir',sans-serif;background:var(--bg);color:var(--txt);}
::selection{background:var(--blue);color:#fff;}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-thumb{background:var(--blue);}
a{text-decoration:none;color:inherit;}

/* ═══ SNAP CONTAINER ═══ */
#snap{
  height:100dvh;overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
}
.sec{
  height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;position:relative;overflow:hidden;
}
.sec:nth-child(odd){background:var(--w);}
.sec:nth-child(even){background:var(--bg);}

/* ═══ NAV ═══ */
#nav{
  position:fixed;top:0;inset-inline:0;z-index:500;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:17px;}
.logo img{width:26px;height:26px;object-fit:contain;}
.logo .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(30,95,219,.2);animation:dotpop 2s infinite;}
@keyframes dotpop{0%,100%{box-shadow:0 0 0 3px rgba(30,95,219,.2);}50%{box-shadow:0 0 0 7px rgba(30,95,219,.06);}}
.logo .en{font-size:11px;color:var(--muted);}
.nav-r{display:flex;align-items:center;gap:24px;}
.nav-links{display:flex;gap:24px;font-size:13px;color:var(--muted);}
.nav-links a:hover{color:var(--blue);}
.nav-cta{font-family:var(--mono);font-size:12px;background:var(--blue);color:#fff;padding:9px 18px;border-radius:7px;letter-spacing:.5px;box-shadow:0 4px 14px rgba(30,95,219,.3);transition:.25s;}
.nav-cta:hover{background:var(--blue-d);transform:translateY(-1px);}
@media(max-width:700px){.nav-links{display:none;}}

/* ═══ SIDE DOTS ═══ */
#dots{
  position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:400;
  display:flex;flex-direction:column;gap:14px;
}
.dot-item{
  width:8px;height:8px;border-radius:50%;border:2px solid var(--border);
  background:transparent;cursor:pointer;transition:.35s;position:relative;
}
.dot-item.active{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,95,219,.18);}
.dot-item .dot-label{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:10px;color:var(--blue);white-space:nowrap;
  opacity:0;transition:.25s;pointer-events:none;
}
.dot-item.active .dot-label{opacity:1;}
@media(max-width:600px){#dots{display:none;}}

/* ═══ PROGRESS BAR ═══ */
#prog{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--teal));z-index:9999;transition:width .2s linear;}

/* ═══ SECTION GRID ═══ */
.sgrid{
  max-width:1180px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  align-items:center;width:100%;padding-top:60px;
}
@media(max-width:900px){
  .sgrid{grid-template-columns:1fr;gap:28px;padding:60px 20px 20px;}
  .sec-right{order:-1;}
}

/* ═══ ROBOT BUBBLE ═══ */
.bot-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:28px;}
.bot-av{
  flex-shrink:0;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--bl),#fff);
  border:2px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:var(--shadow);animation:bob 3s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.bot-bub{
  background:#fff;border:1px solid var(--border);
  border-radius:16px 16px 16px 4px;padding:13px 17px;
  box-shadow:var(--shadow);max-width:460px;
}
.bot-name{font-family:var(--mono);font-size:10px;color:var(--blue);letter-spacing:1.5px;margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.bot-name::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 5px #22c55e;}
.bot-msg{font-size:14px;line-height:1.8;color:var(--txt);}
.bot-msg strong{color:var(--blue);}
.bot-img{width:50px;height:50px; alt: "2berman";}
.tdots{display:inline-flex;gap:4px;vertical-align:middle;}
.tdots span{width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.3;animation:td 1.2s infinite;}
.tdots span:nth-child(2){animation-delay:.2s;}
.tdots span:nth-child(3){animation-delay:.4s;}
@keyframes td{40%{transform:translateY(-6px);opacity:1;}0%,80%,100%{transform:none;opacity:.3;}}

/* ═══ SECTION TEXT ═══ */
.sec-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--blue);background:var(--bl);border:1px solid rgba(30,95,219,.2);padding:5px 13px;border-radius:100px;letter-spacing:.5px;margin-bottom:16px;}
.sec-tag .tl{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 5px var(--teal);}
.sec-h{font-size:clamp(26px,3.5vw,44px);font-weight:900;letter-spacing:-1.2px;line-height:1.15;margin-bottom:14px;}
.sec-h .hl{background:linear-gradient(110deg,var(--blue),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.sec-p{font-size:15.5px;color:var(--muted);line-height:1.9;margin-bottom:22px;max-width:440px;}
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{font-family:var(--mono);font-size:11px;color:var(--blue);background:var(--bl);border:1px solid rgba(30,95,219,.15);padding:5px 12px;border-radius:100px;}
.tagG{color:var(--teal);background:#e0f7fa;border-color:rgba(8,145,178,.2);}
.tagA{color:var(--gold);background:#fff8ec;border-color:rgba(232,146,12,.2);}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;}
.btn{font-family:'Vazir';font-weight:700;font-size:14px;padding:13px 24px;border-radius:9px;transition:.3s;display:inline-block;cursor:pointer;border:none;}
.btn-b{background:linear-gradient(120deg,var(--blue),#3b76f0);color:#fff;box-shadow:0 6px 22px rgba(30,95,219,.3);}
.btn-b:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,95,219,.4);}
.btn-o{border:1.5px solid var(--border);color:var(--txt);background:transparent;}
.btn-o:hover{border-color:var(--blue);color:var(--blue);}
.stat-row{display:flex;gap:0;border-top:1px solid var(--border);margin-top:28px;padding-top:22px;flex-wrap:wrap;}
.stat{flex:1;min-width:80px;text-align:center;border-left:1px solid var(--border);}
.stat:last-child{border:none;}
.stat .n{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--blue);}
.stat .l{font-size:11px;color:var(--muted);margin-top:3px;}

/* ═══ MOCKUP BROWSER ═══ */
.mock{
  background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-lg);width:100%;position:relative;
  animation:mfloat 5s ease-in-out infinite;
}
@keyframes mfloat{0%,100%{transform:translateY(0) rotate(-.4deg);}50%{transform:translateY(-8px) rotate(.4deg);}}
.mock-bar{
  height:32px;background:#f4f7ff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:6px;padding:0 12px;
}
.mock-bar span{width:9px;height:9px;border-radius:50%;}
.mock-bar span:nth-child(1){background:#ff5f56;}
.mock-bar span:nth-child(2){background:#ffbd2e;}
.mock-bar span:nth-child(3){background:#27c93f;}
.mock-bar .addr{margin-right:10px;flex:1;height:16px;background:#e8ecf5;border-radius:8px;}
.mock-screen{min-height:240px;position:relative;overflow:hidden;}

/* Skeleton layer */
.mk-skel{padding:14px;display:flex;flex-direction:column;gap:10px;}
.sk{background:linear-gradient(90deg,#e8eef8 25%,#f4f7ff 50%,#e8eef8 75%);background-size:200% 100%;animation:shim 1.5s infinite;border-radius:5px;}
@keyframes shim{from{background-position:200% 0;}to{background-position:-200% 0;}}
.sk-nav-row{display:flex;justify-content:space-between;margin-bottom:4px;}
.sk-hero{height:80px;margin-bottom:6px;}
.sk-line{height:10px;margin-bottom:6px;}
.sk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.sk-card{height:52px;}

/* Design layer (Section 1) */
.mk-design{display:none;flex-direction:column;}
.mk-d-nav{height:36px;background:linear-gradient(90deg,var(--blue),#3b76f0);display:flex;align-items:center;padding:0 12px;justify-content:space-between;}
.mk-d-logo{color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px;}
.mk-d-logo img{width:14px;height:14px;filter:brightness(0) invert(1);}
.mk-d-links{display:flex;gap:8px;}
.mk-d-links div{width:28px;height:6px;background:rgba(255,255,255,.4);border-radius:3px;}
.mk-d-hero{height:90px;background:linear-gradient(135deg,#f0f5ff,#dce8ff);display:flex;align-items:center;padding:12px;}
.mk-d-hero-txt{display:flex;flex-direction:column;gap:6px;}
.mk-d-h1{height:12px;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:4px;}
.mk-d-h2{height:8px;background:#c5d5f5;border-radius:4px;}
.mk-d-btns{display:flex;gap:6px;margin-top:8px;}
.mk-d-btn1{padding:4px 10px;background:var(--blue);border-radius:4px;font-size:8px;color:#fff;}
.mk-d-btn2{padding:4px 10px;border:1px solid var(--border);border-radius:4px;font-size:8px;color:var(--muted);}
.mk-d-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 12px;}
.mk-d-card{background:#f8faff;border:1px solid var(--border);border-radius:6px;padding:8px;text-align:center;}
.mk-d-card .ci{font-size:16px;margin-bottom:4px;}
.mk-d-card .ct{font-size:8px;color:var(--blue);font-weight:600;}
.mk-d-card .cl{height:5px;background:#e0e8f8;border-radius:2px;margin-top:4px;}

/* Web layer (Section 2) */
.mk-web{display:none;flex-direction:column;}
.mk-w-nav{height:36px;background:linear-gradient(90deg,var(--blue),#3b76f0);display:flex;align-items:center;padding:0 12px;justify-content:space-between;}
.mk-w-logo{color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;gap:4px;}
.mk-w-logo img{width:13px;height:13px;filter:brightness(0) invert(1);}
.mk-w-nav-links{display:flex;gap:6px;}
.mk-w-nav-links span{font-size:8px;color:rgba(255,255,255,.8);}
.mk-w-btn{font-size:8px;background:rgba(255,255,255,.2);color:#fff;padding:3px 7px;border-radius:3px;}
.mk-w-hero{height:82px;background:linear-gradient(135deg,#ebf0ff,#d0deff);display:flex;align-items:center;padding:10px 12px;position:relative;overflow:hidden;}
.mk-w-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--teal));}
.mk-code{font-family:var(--mono);font-size:8px;color:var(--txt);line-height:1.7;}
.mk-code .kw{color:#7c3aed;}.mk-code .fn{color:var(--teal);}.mk-code .str{color:#16a34a;}
.mk-w-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px 10px;}
.mk-w-card{background:#fff;border:1px solid var(--border);border-radius:5px;padding:7px;border-top:2px solid var(--blue);}
.mk-w-card .wci{font-size:13px;margin-bottom:3px;}
.mk-w-card .wct{font-size:7px;font-weight:700;color:var(--txt);}
.mk-w-card .wcl{height:4px;background:#e8eef8;border-radius:2px;margin-top:4px;}
.mk-w-card .wcl2{height:4px;background:#f0f5ff;border-radius:2px;margin-top:3px;width:60%;}

/* Bot layer (Section 3) */
.mk-bot{display:none;flex-direction:column;}
.mk-b-inner{position:relative;}
.mk-bot-float{
  position:absolute;bottom:8px;left:10px;
  display:flex;align-items:flex-end;gap:6px;
  animation:botSlideIn .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes botSlideIn{from{transform:translateY(20px);opacity:0;}to{transform:none;opacity:1;}}
.mk-bot-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#0088cc,#005fa3);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.mk-bot-chat{background:#fff;border:1px solid var(--border);border-radius:10px 10px 10px 2px;padding:6px 9px;font-size:8px;color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.1);max-width:130px;}
.mk-bot-dot{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#0088cc,#005fa3);display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;box-shadow:0 2px 8px rgba(0,136,204,.3);}
.tg-badge{
  position:absolute;top:8px;left:10px;
  background:#0088cc;color:#fff;border-radius:5px;padding:4px 8px;
  font-size:8px;font-weight:700;display:flex;align-items:center;gap:4px;
  animation:badgePop .4s cubic-bezier(.16,1,.3,1) .3s both;
}
@keyframes badgePop{from{transform:scale(.6);opacity:0;}to{transform:none;opacity:1;}}

/* SEO layer (Section 4) */
.mk-seo-wrap{display:none;flex-direction:column;}
.mk-seo-inner{position:relative;}
.seo-badge{
  position:absolute;top:8px;left:10px;
  background:linear-gradient(120deg,#16a34a,#15803d);color:#fff;
  border-radius:6px;padding:5px 9px;font-size:8px;font-weight:700;
  display:flex;align-items:center;gap:4px;
  animation:badgePop .4s cubic-bezier(.16,1,.3,1) .2s both;
}
.mk-chart{position:absolute;bottom:4px;right:8px;display:flex;align-items:flex-end;gap:3px;height:50px;}
.mk-bar{
  width:10px;border-radius:2px 2px 0 0;background:linear-gradient(to top,var(--blue),var(--teal));
  height:0;transition:height .6s cubic-bezier(.16,1,.3,1);
}
.mk-chart.animate .mk-bar{height:var(--h);}

/* Contact section */
.contact-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:var(--shadow);}
.contact-card h3{font-size:18px;font-weight:800;margin-bottom:18px;}
.fi{margin-bottom:14px;}
.fi label{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:1px;margin-bottom:6px;}
.fi input,.fi textarea,.fi select{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:11px 13px;font-family:'Vazir';font-size:14px;color:var(--txt);outline:none;transition:.25s;}
.fi input:focus,.fi textarea:focus{border-color:var(--blue);background:#fff;}
.fi textarea{resize:vertical;min-height:80px;}
.fi select{cursor:pointer;}
.sbtn{width:100%;background:linear-gradient(120deg,var(--blue),#3b76f0);color:#fff;border:none;font-family:'Vazir';font-weight:800;font-size:14px;padding:13px;border-radius:8px;cursor:pointer;transition:.3s;box-shadow:0 6px 20px rgba(30,95,219,.28);}
.sbtn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,95,219,.42);}
.cinfo h3{font-size:20px;font-weight:800;margin-bottom:8px;}
.cinfo p{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:22px;}
.ci{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;box-shadow:var(--shadow);transition:.25s;}
.ci:hover{border-color:rgba(30,95,219,.3);transform:translateX(-3px);}
.ci-ic{width:38px;height:38px;border-radius:9px;background:var(--bl);border:1px solid rgba(30,95,219,.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ci-lb{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:1px;}
.ci-v{font-size:13px;font-weight:600;margin-top:2px;}
.socs{display:flex;gap:8px;margin-top:16px;}
.soc{flex:1;text-align:center;padding:11px 6px;background:#fff;border:1px solid var(--border);border-radius:9px;font-family:var(--mono);font-size:11px;color:var(--muted);transition:.25s;box-shadow:var(--shadow);}
.soc:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);}

/* Float bot */
#fbot{position:fixed;bottom:22px;left:22px;z-index:600;display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
#fbot-av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#3b76f0);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 20px rgba(30,95,219,.4);cursor:pointer;animation:bob 4s ease-in-out infinite;}
#fbot-b{display:none;background:#fff;border:1px solid var(--border);border-radius:12px 12px 12px 4px;padding:12px 16px;max-width:210px;box-shadow:var(--shadow-lg);}
#fbot-b.open{display:block;animation:popin .3s cubic-bezier(.16,1,.3,1);}
@keyframes popin{from{opacity:0;transform:scale(.85) translateY(6px);}to{opacity:1;transform:none;}}
#fbot-b .fn{font-family:var(--mono);font-size:10px;color:var(--blue);letter-spacing:1px;margin-bottom:5px;font-weight:700;}
#fbot-b .ft{font-size:13px;color:var(--txt);line-height:1.7;}
#fbot-b .ft strong{color:var(--blue);}

/* Section transitions */
.sec-left,.sec-right{transition:opacity .5s,transform .5s;}
.sec:not(.visible) .sec-left{opacity:0;transform:translateX(40px);}
.sec:not(.visible) .sec-right{opacity:0;transform:translateX(-40px);}
.sec.visible .sec-left,.sec.visible .sec-right{opacity:1;transform:none;}
.sec.visible .sec-left{transition-delay:0s;}
.sec.visible .sec-right{transition-delay:.12s;}

@media(max-width:900px){
  .sgrid{padding-top:70px;}
  .mock{max-width:100%;}
  .sec-right{margin:0;}
}