@font-face{font-family:Vz;src:url(../fonts/Vazirmatn-Regular.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vz;src:url(../fonts/Vazirmatn-Medium.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Vz;src:url(../fonts/Vazirmatn-SemiBold.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Vz;src:url(../fonts/Vazirmatn-Bold.woff2)format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#F1EFEB; --card:#FAF9F6; --ink:#1C1A18; --ink2:#5A544D;
  --gold:#AF7D42; --gold2:#C8A163; --line:#E4DFD6;
  --r:30px; --ease:cubic-bezier(.22,.8,.3,1);
  --pad:clamp(16px,4vw,46px);
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Vz,system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* ── سربرگ ───────────────────────────────────────────────────────────── */
/* پدِ کناریِ صریح: `padding` سرراست، پدِ `.wrap` را صفر می‌کرد و نشان تا
   بیرونِ صفحه می‌رفت — یک بار همین‌جا ۱۰ پیکسل سرریز شد. */
.top{padding:clamp(26px,4.6vw,54px) clamp(8px,2vw,24px) clamp(20px,3.2vw,30px);
  text-align:center}

/* نشانِ کارگاه. `h1` است چون تنها عنوانِ صفحه است؛ نامِ کسب‌وکار در alt
   می‌ماند تا برای موتورِ جست‌وجو و صفحه‌خوان هم خوانده شود. */
.mark{margin:0;line-height:0}
/* نشان تقریبا هم‌عرضِ صفحه. خودِ PNG هالهٔ روشنِ دورِ حروف را دارد، پس
   drop-shadow اضافه نمی‌کنیم — روی هم می‌افتادند و کدر می‌شد. */
.mark img{width:min(100%,1040px);height:auto;margin:0 auto}

/* صحنهٔ هیرو از بالای کارت بیرون می‌زند و روی لینکِ بازگشت می‌افتد؛
   پس سربرگ لایهٔ بالاتر و کمی فاصله می‌گیرد. */
.top:has(.back){text-align:right;position:relative;z-index:4;
  padding-bottom:clamp(6px,1.4vw,14px)}
.back{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:13px;font-weight:600;color:var(--gold);padding:10px 0}
.back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.back:hover{color:var(--ink)}

/* ── بنرِ روایتِ تصویری (کاتالوگ سه‌بعدی) ───────────────────────────────
   فریمِ اولِ همان کلیپ پس‌زمینه‌اش است، پس چیزی جدا برای بارگذاری ندارد. */
.film{position:relative;display:flex;align-items:center;gap:16px;
  margin:clamp(6px,1.4vw,14px) 0 clamp(20px,3.4vw,34px);
  padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,30px);
  border-radius:24px;overflow:hidden;text-decoration:none;color:#fff;
  background:#2A211A;box-shadow:0 1px 2px rgba(28,26,23,.04),0 26px 56px -42px rgba(28,26,23,.5);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.film:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(28,26,23,.06),0 36px 70px -40px rgba(28,26,23,.55)}
.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.52;transition:transform 1.4s var(--ease),opacity .45s var(--ease)}
.film:hover img{transform:scale(1.05);opacity:.6}
.film .t{position:relative;flex:1;min-width:0}
.film b{display:block;font-size:clamp(15px,2.2vw,19px);font-weight:700;letter-spacing:-.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.6)}
.film em{display:block;margin-top:6px;font-style:normal;font-size:12px;color:#EFE7DA;
  text-shadow:0 1px 12px rgba(0,0,0,.6)}
.film svg{position:relative;flex:0 0 auto;width:20px;height:20px;fill:none;stroke:var(--gold2);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.5))}

/* ── کارتِ محصول ─────────────────────────────────────────────────────── */
.prod{padding:clamp(10px,2vw,22px) 0 clamp(26px,5vw,64px)}
.card{position:relative;display:block;margin-top:clamp(12px,2vw,20px);
  background:var(--card);border-radius:var(--r);text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(28,26,23,.035),0 34px 70px -44px rgba(28,26,23,.3);
  padding:clamp(20px,3.4vw,44px);
  display:grid;grid-template-columns:1fr;gap:clamp(6px,2vw,30px);align-items:center;
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
a.card:hover{transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(28,26,23,.05),0 44px 80px -42px rgba(28,26,23,.38)}
a.card:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media(min-width:900px){
  /* ترتیبِ DOM: صحنه، سپس متن. در RTL ستونِ ۱ سمتِ راست است.
     side=l → متن چپ: صحنه در ستونِ ۱ می‌ماند، پس ستونِ ۱ پهن.
     side=r → متن راست: متن به ستونِ ۱ می‌رود و ستونِ ۲ پهن می‌شود.
     جابه‌جاییِ نسبت‌ها لازم است، وگرنه کارتِ آینه‌ای عکسِ کوچک‌تری می‌گیرد. */
  .prod[data-side="l"] .card{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
  .prod[data-side="r"] .card{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .prod[data-side="r"] .txt  {order:1}
  .prod[data-side="r"] .stage{order:2}
}

/* صحنه: عکسِ کلیدشده که از کارت بیرون می‌زند */
.stage{position:relative;aspect-ratio:1136/790;min-height:1px}
.scene{position:absolute;bottom:-13%;width:129%;height:auto;
  filter:drop-shadow(0 26px 30px rgba(28,26,23,.14));will-change:transform}
.prod[data-side="l"] .scene{right:-13%}
.prod[data-side="r"] .scene{left:-13%}

/* موبایل: صحنه تمام‌عرضِ صفحه. پدِ کارت و پدِ قاب هر دو لغو می‌شوند، وگرنه
   عکس در یک جعبهٔ باریک می‌افتد و دو طرفش فضای خالی می‌ماند. */
@media(max-width:899px){
  .card{padding-top:0}
  .stage{aspect-ratio:1136/660;
    margin-inline:calc(-1 * clamp(20px,3.4vw,44px) - var(--pad));
    margin-top:0;margin-bottom:clamp(4px,2vw,14px)}
  .scene{width:150%;bottom:-2%;left:50%!important;right:auto!important;
    transform:translateX(-50%) translateY(var(--py,0px))!important}
  .sc .scene{transform:translateX(-50%) translateY(var(--py,0px)) scale(1.05)!important}
  .sc.in .scene{transform:translateX(-50%) translateY(var(--py,0px)) scale(1)!important}
}

/* ── متن ─────────────────────────────────────────────────────────────── */
.prod[data-side="l"] .txt{text-align:left}
.prod[data-side="r"] .txt{text-align:right}
@media(max-width:899px){.txt{text-align:right!important}}
.txt h2{margin:0;font-size:clamp(22px,3.3vw,32px);font-weight:700;letter-spacing:-.015em}
.lat{display:flex;align-items:center;gap:14px;margin:11px 0 18px;direction:ltr}
.lat.ctr{justify-content:center;margin-top:7px}
.prod[data-side="r"] .lat{flex-direction:row-reverse}
@media(max-width:899px){.prod .lat{flex-direction:row-reverse!important}}
.lat span{font-size:10px;font-weight:600;letter-spacing:.38em;color:var(--gold);white-space:nowrap}
.lat i{display:block;height:1px;width:46px;background:var(--gold);opacity:.65;
  transform:scaleX(0);transition:transform .9s var(--ease) .25s}
.prod[data-side="l"] .lat i{transform-origin:left}
.prod[data-side="r"] .lat i{transform-origin:right}
.in .lat i{transform:scaleX(1)}
.txt p{margin:0 0 clamp(18px,2.6vw,26px);font-size:13.5px;line-height:2.2;
  color:var(--ink2);max-width:40ch}
.prod[data-side="l"] .txt p{margin-left:0;margin-right:auto}
.prod[data-side="r"] .txt p{margin-left:auto;margin-right:0}
@media(max-width:899px){.txt p{margin-left:auto!important;margin-right:0!important}}

.feat{list-style:none;margin:0 0 clamp(20px,3vw,30px);padding:0;
  display:flex;flex-direction:column;gap:clamp(11px,1.6vw,16px)}
.prod[data-side="l"] .feat{direction:ltr}
.prod[data-side="r"] .feat{direction:rtl}
@media(max-width:899px){.prod .feat{direction:rtl!important}}
.feat li{display:flex;align-items:center;justify-content:flex-start;gap:14px;
  font-size:13px;font-weight:500;opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(.28s + var(--i)*.085s)}
.feat li>span:last-child{direction:rtl;unicode-bidi:isolate}
.in .feat li{opacity:1;transform:none}
.ic{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--gold);border:1px solid rgba(175,125,66,.42);background:rgba(175,125,66,.07)}
.ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

.dots{display:flex;gap:11px;direction:ltr;align-items:center}
.prod[data-side="l"] .dots{justify-content:flex-start}
.prod[data-side="r"] .dots{justify-content:flex-end}
@media(max-width:899px){.prod .dots{justify-content:flex-end!important}}
.dots b{display:block;width:21px;height:21px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(28,26,23,.1);opacity:0;transform:scale(.4);
  transition:opacity .5s var(--ease),transform .55s var(--ease);
  transition-delay:calc(.62s + var(--i)*.07s)}
.in .dots b{opacity:1;transform:none}

/* «مشاهدهٔ محصول» — نشانهٔ کلیک‌پذیریِ کارت */
.more{display:flex;align-items:center;gap:9px;margin-top:clamp(18px,2.4vw,26px);
  font-size:12.5px;font-weight:600;color:var(--gold);direction:rtl}
.prod[data-side="l"] .more{justify-content:flex-start;direction:ltr}
.prod[data-side="r"] .more{justify-content:flex-start}
@media(max-width:899px){.prod .more{direction:rtl!important;justify-content:flex-start!important}}
.more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.prod[data-side="l"] .more svg{transform:rotate(180deg)}
a.card:hover .more svg{transform:translateX(-4px)}
.prod[data-side="l"] a.card:hover .more svg{transform:rotate(180deg) translateX(-4px)}

/* ── ظهور ────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.sc{opacity:0;transition:opacity 1s var(--ease)}
.sc.in{opacity:1}
.sc .scene{transform:translateX(var(--dx,0)) translateY(var(--py,0px)) scale(1.05);
  transition:transform 1.1s var(--ease)}
.sc.in .scene{transform:translateX(0) translateY(var(--py,0px)) scale(1)}
.float{animation:fl 11s ease-in-out infinite}
@keyframes fl{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* ── صفحهٔ محصول ─────────────────────────────────────────────────────── */
.hero{position:relative;z-index:1;margin-top:clamp(10px,2vw,18px);background:var(--card);
  border-radius:var(--r);padding:clamp(22px,3.6vw,46px);
  box-shadow:0 1px 2px rgba(28,26,23,.035),0 34px 70px -44px rgba(28,26,23,.3);
  display:grid;grid-template-columns:1fr;gap:clamp(8px,2vw,34px);align-items:center}
@media(min-width:900px){.hero{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.hero .stage{aspect-ratio:1136/790}
.hero .scene{right:-11%;left:auto;width:124%;bottom:-11%}
@media(max-width:899px){
  .hero{padding-top:0}
  .hero .stage{aspect-ratio:1136/640;
    margin-inline:calc(-1 * clamp(22px,3.6vw,46px) - var(--pad));margin-bottom:10px}
  .hero .scene{width:152%;bottom:-2%;left:50%!important;right:auto!important;
    transform:translateX(-50%) translateY(var(--py,0px))!important}
  .hero .sc .scene{transform:translateX(-50%) translateY(var(--py,0px)) scale(1.05)!important}
  .hero .sc.in .scene{transform:translateX(-50%) translateY(var(--py,0px)) scale(1)!important}
}
.hero h1{margin:0;font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:-.02em}
.hero .tag{margin:12px 0 0;font-size:13.5px;line-height:2.1;color:var(--ink2)}
.hero .lat{flex-direction:row-reverse}
.hero .dots{justify-content:flex-end;margin-top:22px;flex-wrap:wrap;gap:14px}
.hero .dots .sw{display:flex;align-items:center;gap:8px;direction:rtl;
  font-size:11.5px;color:var(--ink2)}
.hero .dots b{opacity:1;transform:none;width:18px;height:18px}

.sect{margin:clamp(34px,6vw,76px) 0 0}
.sect h2{margin:0 0 clamp(16px,2.4vw,24px);font-size:clamp(17px,2.3vw,22px);font-weight:700}
.sect h2 em{font-style:normal;color:var(--gold);font-size:10px;font-weight:600;
  letter-spacing:.36em;display:block;margin-top:7px;direction:ltr}
.story p{margin:0 0 18px;font-size:14px;line-height:2.3;color:var(--ink2);max-width:72ch}

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:0 clamp(18px,3vw,42px);background:var(--card);border-radius:22px;
  padding:clamp(10px,2vw,20px) clamp(16px,2.6vw,30px);
  box-shadow:0 1px 2px rgba(28,26,23,.03)}
.specs div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}
.specs div:last-child{border-bottom:0}
.specs dt,.specs span:first-child{color:var(--ink2)}
.specs b{font-weight:600;white-space:nowrap}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(14px,2.4vw,26px)}
.gal figure{margin:0;border-radius:22px;overflow:hidden;background:var(--card);
  box-shadow:0 1px 2px rgba(28,26,23,.035),0 24px 50px -40px rgba(28,26,23,.3)}
.gal img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{padding:14px 18px;font-size:12.5px;color:var(--ink2)}

.sister{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(12px,2vw,20px)}
.sister a{display:flex;align-items:center;gap:16px;text-decoration:none;
  background:var(--card);border-radius:20px;padding:14px 18px;
  box-shadow:0 1px 2px rgba(28,26,23,.035);transition:transform .4s var(--ease)}
.sister a:hover{transform:translateY(-3px)}
.sister img{width:74px;height:54px;object-fit:contain;flex:0 0 auto}
.sister b{display:block;font-size:14px;font-weight:600}
.sister small{display:block;margin-top:5px;font-size:11.5px;color:var(--ink2)}

/* ── دستیار ──────────────────────────────────────────────────────────── */
.agent{margin:clamp(34px,6vw,76px) 0 0;background:var(--card);border-radius:26px;
  padding:clamp(20px,3vw,34px);
  box-shadow:0 1px 2px rgba(28,26,23,.035),0 30px 60px -44px rgba(28,26,23,.28)}
.agent .hd{display:flex;align-items:center;gap:13px}
.agent .orb{width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%,var(--gold2),var(--gold));
  box-shadow:0 0 0 5px rgba(175,125,66,.1)}
.agent.busy .orb{animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(175,125,66,.1)}
                 50%{box-shadow:0 0 0 11px rgba(175,125,66,.03)}}
.agent .hd b{font-size:14.5px;font-weight:600}
.agent .hd small{display:block;margin-top:3px;font-size:11px;color:var(--ink2)}
.log{margin:20px 0 0;display:flex;flex-direction:column;gap:12px;
  max-height:min(52vh,440px);overflow-y:auto;scroll-behavior:smooth}
.log:empty{display:none}
.msg{max-width:min(86%,560px);padding:12px 16px;border-radius:18px;
  font-size:13.5px;line-height:2.05;white-space:pre-wrap;word-break:break-word;
  animation:pop .45s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.me{align-self:flex-start;background:rgba(175,125,66,.1);color:var(--ink)}
.msg.ai{align-self:flex-end;background:var(--bg)}
.msg.err{align-self:flex-end;background:#F6E7E7;color:#7D2327}
.msg.err span{display:block;margin-top:6px;font-size:11.5px;opacity:.8;direction:ltr;text-align:left}
.typing{display:inline-flex;gap:5px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.5;
  animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.chips button{font:inherit;font-size:12px;color:var(--ink2);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;
  transition:border-color .3s,color .3s,background .3s}
.chips button:hover{border-color:var(--gold2);color:var(--gold);background:rgba(175,125,66,.05)}
.ask{display:flex;align-items:center;gap:10px;margin-top:18px;
  border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 6px;
  background:var(--bg);transition:border-color .3s}
.ask:focus-within{border-color:var(--gold2)}
.ask input{flex:1;min-width:0;font:inherit;font-size:13.5px;color:inherit;
  background:transparent;border:0;outline:0;padding:10px 14px}
.ask button{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gold);color:#fff;display:grid;place-items:center;
  transition:background .3s,transform .3s}
.ask button:hover:not(:disabled){background:var(--ink);transform:scale(1.05)}
.ask button:disabled{opacity:.4;cursor:default}
.ask button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.agent .note{margin:14px 0 0;font-size:11px;color:var(--ink2);opacity:.75}

/* ── پاورقی ──────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);margin-top:clamp(28px,5vw,60px);
  padding:clamp(26px,4vw,46px) 0 clamp(34px,5vw,56px);text-align:center}
.foot .sig{font-size:14px;font-weight:600}
.foot .sig em{font-style:normal;color:var(--gold)}
.foot .cnt{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  font-size:12.5px;color:var(--ink2)}
.foot a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.foot a:hover{color:var(--gold);border-color:var(--gold2)}

@media(prefers-reduced-motion:reduce){
  .rv,.sc,.sc .scene,.lat i,.feat li,.dots b,.gal img,a.card,.sister a{transition:none!important}
  .rv,.sc,.feat li,.dots b{opacity:1!important;transform:none!important}
  .lat i{transform:scaleX(1)!important}
  .float,.agent.busy .orb,.typing i,.msg{animation:none!important}
  .scene{--py:0px!important}
}