@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap');
/* ============================================================
   والیکا V3 — استایلِ مرکزی
   مدرن، داینامیک، RTL، حالت شب/روز، فونت فرهود، انیمیشن‌محور
   ============================================================ */

/* ---- فونت فرهود (فارسی) ---- */
@font-face{
  font-family:'Farhood';
  src:url('../fonts/Farhood.woff2') format('woff2'),
      url('../fonts/Farhood.ttf') format('truetype');
  font-weight:normal; font-display:swap;
  /* فونتِ Farhood گلیفِ لاتینِ نامرئی دارد؛ با محدودکردنِ آن فقط به فارسی/عربی،
     حروفِ انگلیسی خودکار از فونتِ جایگزین (Vazirmatn) می‌آیند و در کلِ سایت و ادمین دیده می‌شوند. */
  unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---- متغیرهای رنگ: حالت شب (پیش‌فرض) ---- */
:root{
  --gold:#C8A24A;            /* رنگ برند (با متغیر JS هم override می‌شود) */
  --gold-soft:#e7cf8f;
  --bg:#0c0b10;              /* پس‌زمینه‌ی اصلی */
  --bg2:#13121a;             /* سطح دوم */
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10);
  --txt:#f3efe7;            /* متن اصلی */
  --muted:#9b96a6;          /* متن کم‌رنگ */
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --r:18px;                 /* شعاع گوشه */
  --max:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* ---- حالت روز ---- */
[data-theme="light"]{
  --gold:#9a7716;            /* طلاییِ تیره‌تر برای خوانایی روی پس‌زمینه‌ی روشن */
  --gold-soft:#caa53f;
  --bg:#f3efe6;
  --bg2:#ffffff;
  --surface:rgba(20,16,8,.05);
  --surface-2:rgba(20,16,8,.08);
  --border:rgba(20,16,8,.17);
  --txt:#16140f;
  --muted:#544d40;
  --shadow:0 24px 60px -24px rgba(60,45,15,.30);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; font-size:32px}        /* پایه‌ی بزرگ‌تر برای خوانایی */
/* اعدادِ زیبا و یکدست (وزیرمتن، tabular) */
.lat,.num,.statband .n,.price-box b,.prow b,.dim-tag,.spec b,.aw-tags span{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.num,.statband .n,.spec b,.price-box .prow.total b{font-family:'Farhood','Vazirmatn',Tahoma,sans-serif}
body{
  font-family:'Farhood','Vazirmatn',Tahoma,sans-serif;
  background:var(--bg); color:var(--txt);
  font-size:1.18rem; line-height:1.95; overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
  -webkit-font-smoothing:antialiased;
}
/* نوارِ پیشرفتِ اسکرول (بالای صفحه) */
#scrollbar{position:fixed; top:0; inset-inline:0; height:3px; z-index:60; transform-origin:right; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold),var(--gold-soft)); transition:transform .1s linear}
.lat{font-family:'Cormorant Garamond',serif; direction:ltr; letter-spacing:.06em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 26px}
section{padding:96px 0; position:relative; z-index:1}

/* ---- پس‌زمینه‌ی ذرات (canvas تمام‌صفحه) ---- */
#particles{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.6; transition:opacity .6s;
}
[data-theme="light"] #particles{opacity:.85}

/* نورِ ملایمِ پس‌زمینه که با حالت عوض می‌شود */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -8%, color-mix(in srgb,var(--gold) 16%,transparent), transparent 60%),
    radial-gradient(900px 600px at 8% 12%, color-mix(in srgb,var(--gold) 8%,transparent), transparent 55%);
}

/* ============================================================
   هدر شیشه‌ای چسبان
   ============================================================ */
.hd{
  position:fixed; top:var(--promoH,0); inset-inline:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 30px; transition:all .4s var(--ease);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--border);
}
.hd.solid{
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border);
  padding:12px 30px;
}
.brand{display:flex; align-items:center; gap:11px; font-size:25px; font-weight:bold}
.brand .m{
  width:40px; height:40px; border:2px solid var(--gold); border-radius:11px;
  display:grid; place-items:center; color:var(--gold); font-size:22px;
  box-shadow:0 0 22px -6px var(--gold); transition:.4s var(--ease);
}
.brand:hover .m{transform:rotate(-8deg) scale(1.06)}
.hd nav{display:flex; gap:6px}
.hd nav a{
  position:relative; padding:9px 14px; border-radius:10px; color:var(--muted);
  font-size:25px; transition:.3s;
}
.hd nav a:hover,.hd nav a.active{color:var(--txt); background:var(--surface)}
.hd nav a.active::after{
  content:''; position:absolute; bottom:2px; inset-inline:15px; height:2px;
  background:var(--gold); border-radius:2px;
}
.hd-act{display:flex; align-items:center; gap:12px}

/* ---- دکمه‌ی همبرگری (موبایل) ---- */
.burger{display:none; width:46px; height:46px; border-radius:12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); position:relative}
.burger span{position:absolute; inset-inline:11px; height:2.4px; background:var(--txt); border-radius:2px; transition:.35s var(--ease)}
.burger span:nth-child(1){top:15px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:29px}
body.menu-open .burger span:nth-child(1){top:22px; transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:22px; transform:rotate(-45deg)}
/* کشوی منوی موبایل */
.mobile-nav{position:fixed; inset:0 0 0 auto; width:min(82vw,340px); z-index:55;
  background:var(--bg2); border-inline-start:1px solid var(--border); box-shadow:var(--shadow);
  transform:translateX(100%); transition:transform .42s var(--ease); padding:90px 26px 30px;
  display:flex; flex-direction:column; gap:6px; overflow:auto}
body.menu-open .mobile-nav{transform:translateX(0)}
.mobile-nav a{font-size:21px; padding:14px 16px; border-radius:12px; color:var(--txt); border:1px solid transparent; transition:.25s}
.mobile-nav a:hover{background:var(--surface); border-color:var(--border)}
.nav-scrim{position:fixed; inset:0; z-index:54; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.4s}
body.menu-open .nav-scrim{opacity:1; pointer-events:auto}
.tgl{
  width:42px; height:42px; border-radius:12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--txt);
  font-size:18px; display:grid; place-items:center; transition:.4s var(--ease);
}
.tgl:hover{transform:rotate(20deg); border-color:var(--gold); color:var(--gold)}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:16px 34px; border-radius:13px; font-size:26px; cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft)); color:#1b1505;
  border:none; font-family:inherit; font-weight:bold; position:relative; overflow:hidden;
  box-shadow:0 12px 30px -12px var(--gold); transition:.35s var(--ease);
}
.btn:hover{transform:translateY(-3px); box-shadow:0 18px 38px -12px var(--gold)}
/* درخششِ متحرک روی دکمه (انیمیشن مدرن) */
.btn::after{content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg);
  transition:left .6s var(--ease)}
.btn:hover::after{left:120%}
.btn-ghost{
  background:transparent; color:var(--txt); border:1px solid var(--border);
  box-shadow:none;
}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px)}

/* ============================================================
   هیرو با مدل سه‌بعدی
   ============================================================ */
.hero{
  min-height:100svh; position:relative; display:grid;
  grid-template-columns:1.05fr .95fr; align-items:center; gap:30px;
  max-width:var(--max); margin:0 auto; padding:120px 26px 60px;
}
.hero .copy{position:relative; z-index:3}
.eyebrow{
  display:inline-block; font-size:22px; letter-spacing:.32em; color:var(--gold);
  border:1px solid var(--border); padding:7px 16px; border-radius:30px;
  margin-bottom:24px; background:var(--surface);
}
.hero h1{
  font-size:clamp(56px,6vw,92px); line-height:1.15; font-weight:bold;
  letter-spacing:-.5px; margin-bottom:22px;
}
.hero h1 .gold{
  background:linear-gradient(120deg,var(--gold),var(--gold-soft),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{font-size:clamp(33px,2.5vw,42px); color:var(--muted); max-width:52ch; margin-bottom:34px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}

/* محفظه‌ی مدل سه‌بعدی */
.stage{
  position:relative; height:min(82svh,720px); z-index:2;
}
#statue{position:absolute; inset:0; width:100%; height:100%}
.stage .halo{
  position:absolute; inset:8% 12%; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--gold) 26%,transparent), transparent 62%);
  filter:blur(34px); z-index:-1; animation:breathe 7s var(--ease) infinite;
}
@keyframes breathe{50%{transform:scale(1.08); opacity:.8}}
.stage .loadhint{
  position:absolute; inset-inline:0; bottom:8%; text-align:center;
  color:var(--muted); font-size:19px; letter-spacing:.2em;
}

.spec{
  position:absolute; bottom:34px; inset-inline:26px; max-width:var(--max);
  margin:0 auto; display:flex; gap:36px; flex-wrap:wrap; z-index:3;
  border-top:1px solid var(--border); padding-top:18px;
}
.spec>div{display:flex; flex-direction:column}
.spec span{font-size:20px; color:var(--muted); margin-bottom:3px}
.spec b{font-size:19px; color:var(--gold); font-weight:bold}
.scrollcue{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:16px; letter-spacing:.3em; color:var(--muted); z-index:3;
  animation:bob 2s infinite;
}
@keyframes bob{50%{transform:translate(-50%,7px); opacity:.5}}

/* ============================================================
   عناوین بخش
   ============================================================ */
.kicker{
  font-size:23px; letter-spacing:.3em; color:var(--gold); margin-bottom:12px;
}
.h2{font-size:clamp(54px,5.4vw,84px); font-weight:bold; line-height:1.25; margin-bottom:14px}
.sub{color:var(--muted); font-size:33px; max-width:60ch; margin-bottom:40px}

/* ---- تایپ‌رایتر ---- */
.tw-cursor{color:var(--gold); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   نوار چرخان (showcase اسکرولی افقی)
   ============================================================ */
.rotor-sec{height:230vh; position:relative}
.rotor-sticky{
  position:sticky; top:0; height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden;
}
.rotor-head{text-align:center; margin-bottom:30px}
.rotor{
  display:flex; gap:26px; padding-inline:8vw; will-change:transform;
}
.rotor .card{flex:0 0 auto; width:300px}
.rotor .ph{
  height:400px; border-radius:var(--r); overflow:hidden; position:relative;
  border:1px solid var(--border); box-shadow:var(--shadow);
  transition:transform .15s linear; transform-style:preserve-3d;
}
.rotor .ph img{width:100%; height:100%; object-fit:cover; transition:.6s var(--ease)}
.rotor .card:hover .ph img{transform:scale(1.08)}
.rotor .cap{padding:14px 4px; display:flex; justify-content:space-between; align-items:baseline}
.rotor .cap .s{font-size:18px; font-weight:bold}
.rotor .cap .e{font-size:19px; color:var(--muted)}

/* ============================================================
   گرید آثار
   ============================================================ */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(46%,250px),1fr)); gap:22px;
}
.mcard{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; transition:.45s var(--ease); position:relative;
}
.mcard:hover{transform:translateY(-8px); border-color:color-mix(in srgb,var(--gold) 50%,var(--border)); box-shadow:var(--shadow)}
.mcard .im{aspect-ratio:4/5; overflow:hidden; position:relative}
.mcard .im img{width:100%; height:100%; object-fit:cover; transition:.7s var(--ease)}
.mcard:hover .im img{transform:scale(1.07)}
.mcard .im::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, color-mix(in srgb,var(--bg) 85%,transparent), transparent 45%);
}
.mcard .b{padding:16px 17px 19px; position:relative; z-index:1}
.mcard .b .s{font-size:20px; font-weight:bold; margin-bottom:3px}
.mcard .b .e{font-size:18px; color:var(--muted)}
.mcard .tags{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap}
.mcard .tags span{
  font-size:20px; padding:4px 11px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
}

/* ============================================================
   نوار فیلتر (گالری)
   ============================================================ */
.filterbar{
  display:flex; flex-direction:column; gap:14px; margin-bottom:34px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:20px 22px;
}
.fgroup{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.flbl{font-size:19px; color:var(--muted); min-width:78px}
.chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 15px; border-radius:30px; font-family:inherit; font-size:19px;
  background:transparent; border:1px solid var(--border); color:var(--txt);
  transition:.28s var(--ease);
}
.chip:hover{border-color:var(--gold)}
.chip.active{background:var(--gold); color:#1b1505; border-color:var(--gold); font-weight:bold}
.chip .dot{width:13px; height:13px; border-radius:50%; box-shadow:0 0 0 1px var(--border)}
.resultline{font-size:20px; color:var(--muted); margin-bottom:20px}
.resultline b{color:var(--gold)}

/* ============================================================
   آماری
   ============================================================ */
.statband{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:42px 0;
}
.st{text-align:center}
.st .n{font-size:clamp(32px,4vw,52px); font-weight:bold; color:var(--gold)}
.st .l{color:var(--muted); font-size:25px}

/* ============================================================
   صفحه‌ی جزئیات اثر (artwork.html)
   ============================================================ */
.aw-hero{
  display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center;
  padding-top:130px;
}
.aw-frame{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow); position:relative; aspect-ratio:4/5;
}
.aw-frame img{width:100%; height:100%; object-fit:cover}
.aw-meta .pill{
  display:inline-flex; gap:8px; font-size:18px; color:var(--gold);
  border:1px solid var(--border); padding:6px 14px; border-radius:30px; margin-bottom:16px;
}
.aw-meta h1{font-size:clamp(30px,4.5vw,52px); margin-bottom:10px}
.aw-tags{display:flex; gap:9px; flex-wrap:wrap; margin:18px 0}
.aw-tags span{
  font-size:18px; padding:6px 14px; border-radius:30px;
  background:var(--surface-2); border:1px solid var(--border);
}
.aw-tags span .dot{display:inline-block; width:11px; height:11px; border-radius:50%; margin-inline-start:6px; vertical-align:middle}

/* نوارِ تصاویرِ کوچکِ اثر */
.aw-thumbs{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.aw-thumb{width:74px; height:74px; border-radius:12px; overflow:hidden; cursor:pointer; padding:0;
  border:2px solid var(--border); background:none; transition:.25s var(--ease)}
.aw-thumb img{width:100%; height:100%; object-fit:cover}
.aw-thumb:hover{transform:translateY(-3px)}
.aw-thumb.on{border-color:var(--gold)}

/* بخش تاریخچه + هنرمند */
.aw-section{
  margin-top:36px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:30px 32px;
}
.aw-section h3{
  font-size:24px; margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.aw-section p{color:var(--muted); font-size:19px}
.artist-row{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap}
.artist-portrait{width:120px; height:120px; border-radius:16px; object-fit:cover; flex:0 0 auto; border:2px solid var(--gold); background:var(--surface-2)}
.artist-portrait.empty{display:grid; place-items:center; color:var(--muted); font-size:18px; text-align:center}
.artist-info b{font-size:21px; display:block}
.artist-info .yr{color:var(--gold); font-size:19px; margin-bottom:8px}

#rooms-grid{grid-template-columns:repeat(auto-fill,minmax(min(46%,320px),1fr))}
#rooms-grid .mcard .im{aspect-ratio:16/11}
#rooms-grid .mcard .im::after{display:none}

footer{border-top:1px solid var(--border); padding:64px 0 36px; margin-top:40px; background:var(--bg2)}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; margin-bottom:40px}
footer h4{font-size:23px; margin-bottom:14px; color:var(--gold)}
footer a{display:block; color:var(--muted); font-size:22px; padding:4px 0; transition:.25s}
footer a:hover{color:var(--txt); padding-inline-start:6px}
.fbot{border-top:1px solid var(--border); padding-top:24px; color:var(--muted); font-size:19px; text-align:center}

[data-reveal]{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:.1s}
[data-reveal][data-delay="2"]{transition-delay:.2s}
[data-reveal][data-delay="3"]{transition-delay:.3s}

/* ---- سفارشی‌ساز + سبد + فرم + visualizer ---- */
.cz-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.cz-preview{position:sticky; top:90px}
.preview-stage{min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:30px}
.dim-tag{font-size:22px; color:var(--muted)}
.quality-box{margin-top:16px; padding:16px 18px; border-radius:14px; font-size:22px; border:1px solid var(--border)}
.quality-box .q-detail{display:block; margin-top:6px; font-size:19px; color:var(--muted)}
.quality-box.ok{background:color-mix(in srgb,#5fbf7f 14%,transparent); border-color:#5fbf7f}
.quality-box.bad{background:color-mix(in srgb,#d9694f 16%,transparent); border-color:#d9694f}
.quality-box.neutral{background:var(--surface)}
.cz-block{margin-bottom:24px}
.cz-block h4{font-size:18px; margin-bottom:12px; color:var(--gold)}
.opts{display:flex; gap:10px; flex-wrap:wrap}
.opt{padding:11px 18px; border-radius:12px; cursor:pointer; font-family:inherit; font-size:22px; background:var(--surface); border:1px solid var(--border); color:var(--txt); transition:.25s var(--ease); display:inline-flex; align-items:center; gap:8px}
.opt:hover{border-color:var(--gold); transform:translateY(-2px)}
.opt.active{background:var(--gold); color:#1b1505; border-color:var(--gold); font-weight:bold}
.frame-sw{width:18px; height:18px; border-radius:5px; box-shadow:0 0 0 1px var(--border)}
.link-btn{background:none; border:none; color:var(--gold); cursor:pointer; font-family:inherit; font-size:20px; margin-top:10px}
.custom-wrap{display:none; gap:10px; align-items:center; margin-top:12px}
.custom-wrap.open{display:flex}
.custom-wrap input{width:90px; padding:10px; border-radius:10px; background:var(--surface); border:1px solid var(--border); color:var(--txt); font-family:inherit}
.qty{display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.qty button{width:46px; height:46px; background:var(--surface); border:none; color:var(--txt); font-size:22px; cursor:pointer}
.qty button:hover{background:var(--gold); color:#1b1505}
.qty span{min-width:54px; text-align:center; font-size:18px}
.price-box{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px 24px; margin-top:14px}
.prow{display:flex; justify-content:space-between; padding:8px 0; font-size:23px; color:var(--muted)}
.prow b{color:var(--txt)}
.prow.total{border-top:1px solid var(--border); margin-top:8px; padding-top:14px; font-size:22px}
.prow.total b{color:var(--gold)}
.cart-item{display:grid; grid-template-columns:90px 1fr auto; gap:18px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:14px}
.cart-item img{width:90px; height:90px; object-fit:cover; border-radius:12px; background:var(--surface-2)}
.cart-item .ci-info b{font-size:19px} .cart-item .ci-info div{color:var(--muted); font-size:20px}
.cart-item .ci-price{font-size:19px; color:var(--gold); font-weight:bold; white-space:nowrap}
.cart-item .ci-rm{background:none;border:none;color:#d9694f;cursor:pointer;font-size:20px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-grid .full{grid-column:1/-1}
.form-grid label{display:block; font-size:20px; color:var(--muted); margin-bottom:7px}
.form-grid input,.form-grid textarea{width:100%; padding:13px 15px; border-radius:12px; font-family:inherit; font-size:22px; background:var(--surface); border:1px solid var(--border); color:var(--txt)}
.form-grid input:focus,.form-grid textarea:focus{outline:none; border-color:var(--gold)}
.form-err{border-color:#d9694f!important}
.vz-stage{position:relative; width:100%; min-height:520px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; display:flex; align-items:center; justify-content:center}
.vz-stage img.wall{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.vz-art{position:absolute; cursor:grab; touch-action:none; box-shadow:0 18px 50px -14px rgba(0,0,0,.6)}
.vz-art img{width:100%; height:100%; object-fit:cover; display:block}
.vz-handle{position:absolute; bottom:-8px; left:-8px; width:22px; height:22px; background:var(--gold); border-radius:50%; cursor:nwse-resize}
.vz-empty{color:var(--muted); text-align:center; padding:40px}
.aw-thumbs{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.aw-thumb{width:74px; height:74px; border-radius:12px; overflow:hidden; cursor:pointer; padding:0; border:2px solid var(--border); background:none; transition:.25s var(--ease)}
.aw-thumb img{width:100%; height:100%; object-fit:cover}
.aw-thumb:hover{transform:translateY(-3px)}
.aw-thumb.on{border-color:var(--gold)}

/* ---- انیمیشن‌های مدرن‌ترِ افزوده ---- */
.hero h1 .gold{background-size:220% 100%; animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:220% 0}}
[data-reveal="left"]{opacity:0; transform:translateX(-44px)}
[data-reveal="right"]{opacity:0; transform:translateX(44px)}
[data-reveal="zoom"]{opacity:0; transform:scale(.9)}
[data-reveal="left"].in,[data-reveal="right"].in,[data-reveal="zoom"].in{opacity:1; transform:none}
.mcard{position:relative}
.mcard::before{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; border-radius:var(--r); background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--gold) 22%,transparent), transparent 45%); transition:opacity .4s}
.mcard:hover::before{opacity:1}

/* ---- واکنش‌گرایی ---- */
@media (max-width:980px){
  /* گریدِ دو ستونه: متن سمتِ راست، مجسمه سمتِ چپ — هم‌قد، بدونِ همپوشانی و بدونِ فضای خالی */
  .hero{grid-template-columns:1.05fr .95fr; padding:80px 16px 28px; min-height:auto; align-items:stretch; gap:10px}
  .hero .copy{order:0; position:relative; z-index:3}
  .stage{align-self:stretch; height:auto; min-height:300px; order:0; margin:0; z-index:1}
  .spec{position:static; margin-top:24px; inset:auto}
  .scrollcue{display:none}
  .aw-hero{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .statband{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:880px){ .cz-grid{grid-template-columns:1fr} .cz-preview{position:static} .form-grid{grid-template-columns:1fr} .cart-layout{grid-template-columns:1fr!important} #summary{position:static!important} }
@media (max-width:760px){
  /* فونت‌های ریزِ موبایل ~۳۰٪ بزرگ‌تر شدند تا با متنِ پایه متناسب باشند */
  html{font-size:18px}
  .hd nav{display:none}
  .burger{display:block}
  section{padding:46px 0}
  .fgrid{grid-template-columns:1fr}
  .spec{gap:14px; inset-inline:16px; bottom:18px}
  .spec span{font-size:17px} .spec b{font-size:18px}
  .brand{font-size:25px} .brand .m{width:38px;height:38px;font-size:22px}
  .hd-act .tgl,.hd-act a{font-size:23px}
  .eyebrow{font-size:16px; letter-spacing:.2em; margin-bottom:14px; padding:5px 12px}
  .kicker{font-size:16px}
  .hero h1{font-size:34px; line-height:1.3; margin-bottom:16px}
  .lead{font-size:21px; margin-bottom:22px}
  .h2{font-size:32px}
  .sub{font-size:21px}
  .btn{font-size:21px; padding:12px 20px}
  .opt{font-size:20px; padding:9px 14px}
  .link-btn{font-size:20px}
  .price-box{padding:18px}
  .form-grid input,.form-grid textarea,.field input,.field textarea,.field select{font-size:21px; padding:12px 13px}
  .st .n,.statband .n{font-size:44px}
  .st .l,.statband .l{font-size:21px}
  .tl-year{font-size:39px}
  .tl-im{height:230px}
  footer h4{font-size:21px} footer a{font-size:18px}
}
@media (max-width:430px){
  .hero h1{font-size:31px}
  .h2{font-size:28px}
  .lead{font-size:19px}
  .brand{font-size:22px}
  .stage{height:50svh}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  [data-reveal]{opacity:1!important; transform:none!important}
}

/* ============================================================
   نظراتِ مشتریان (مارکیِ متحرک) + ارتباط با ما
   ============================================================ */
.tmarquee{overflow:hidden; position:relative; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ttrack{display:flex; gap:20px; width:max-content; animation:tscroll 38s linear infinite}
.tmarquee:hover .ttrack{animation-play-state:paused}
@keyframes tscroll{to{transform:translateX(50%)}}   /* RTL: حرکت به راست */
.tcard{flex:0 0 340px; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px 24px; box-shadow:var(--shadow)}
.tcard .stars{color:var(--gold); font-size:18px; letter-spacing:2px; margin-bottom:10px}
.tcard p{font-size:23px; line-height:1.9; margin-bottom:14px}
.tcard .who{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:20px}
.tcard .av{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-soft)); color:#1b1505; display:grid; place-items:center; font-weight:bold}
.contact-chip{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:14px; font-size:18px;
  background:var(--surface); border:1px solid var(--border); color:var(--txt); transition:.3s var(--ease)}
.contact-chip:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px)}
.contact-chip .ic{font-size:22px}
/* نظراتِ زیرِ اثر */
.reviews{margin-top:18px}
.review{background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:10px}
.review .stars{color:var(--gold)} .review .who{color:var(--muted); font-size:19px; margin-top:4px}

/* ============================================================
   تایم‌لاینِ سال + اسکرولِ افقیِ آثار + نمایشگرِ سه‌بعدیِ تابلو
   ============================================================ */
.tl-year{font-family:'Farhood','Vazirmatn',Tahoma,sans-serif; font-size:clamp(34px,4.4vw,52px); font-weight:700; color:var(--gold); text-align:center; letter-spacing:2px; text-shadow:0 0 24px color-mix(in srgb,var(--gold) 45%,transparent)}
.tl-ruler{position:relative; max-width:var(--max); margin:18px auto 6px; padding:0 64px; height:64px}
.tl-ticks{position:absolute; inset-inline:64px; top:14px; height:40px}
.tl-tick{position:absolute; top:8px; width:1px; height:14px; background:var(--border)}
.tl-tick.major{height:24px; top:0; background:color-mix(in srgb,var(--gold) 60%,var(--border))}
.tl-tick.major .num{position:absolute; top:26px; left:50%; transform:translateX(-50%); font-size:16px; color:var(--muted); white-space:nowrap}
#tlIndicator{position:absolute; top:-2px; width:2px; height:30px; background:var(--gold); box-shadow:0 0 10px var(--gold); transition:right .2s var(--ease)}
.tl-arrow{position:absolute; top:8px; width:42px; height:42px; border-radius:50%; cursor:pointer; z-index:2;
  background:var(--surface); border:1px solid var(--border); color:var(--txt); font-size:22px; display:grid; place-items:center; transition:.25s}
.tl-arrow:hover{border-color:var(--gold); color:var(--gold)}
#tlPrev{right:8px} #tlNext{left:8px}
.tl-vp{overflow:hidden; width:100%}
.tl-strip{display:flex; gap:26px; padding-inline:42vw; will-change:transform; transition:transform .12s linear}

.tl-card{flex:0 0 240px; transition:transform .35s var(--ease), opacity .35s; opacity:.55}
.tl-card.focus{transform:scale(1.06); opacity:1}
.tl-im{height:300px; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow)}
.tl-im img{width:100%; height:100%; object-fit:cover}
.tl-cap{padding:12px 4px; text-align:center}
.tl-cap .s{font-size:18px; font-weight:bold}
.tl-cap .y{font-size:20px; color:var(--gold)}
@media(max-width:640px){ .tl-card{flex-basis:200px} .tl-im{height:250px} }

/* ============================================================
   متنِ مارکیِ سه‌خطی پشتِ تابلوی سه‌بعدی
   ============================================================ */
#frame3d-sec{min-height:auto}
.marq3{position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; justify-content:space-around; pointer-events:none; overflow:hidden; opacity:.9}
.marq-line{white-space:nowrap; font-weight:800; font-size:clamp(30px,6vw,72px); line-height:1.4;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--gold) 28%,transparent);
  will-change:transform}
[data-theme="light"] .marq-line{-webkit-text-stroke:1px color-mix(in srgb,var(--gold) 45%,transparent)}
.marq-line.l1{animation:marqRL 24s linear infinite}
.marq-line.l2{animation:marqLR 30s linear infinite; color:color-mix(in srgb,var(--gold) 10%,transparent); -webkit-text-stroke:0}
.marq-line.l3{animation:marqRL 36s linear infinite}
@keyframes marqRL{from{transform:translateX(30%)} to{transform:translateX(-50%)}}
@keyframes marqLR{from{transform:translateX(-50%)} to{transform:translateX(30%)}}
@media (prefers-reduced-motion:reduce){ .marq-line{animation:none} }

/* ============================================================
   انیمیشنِ انتقال بین صفحات
   ============================================================ */
/* انتقالِ صفحه فقط با opacity — هیچ transform روی body تا position:fixed (هدر) سالم بماند */
@keyframes pageIn{from{opacity:0} to{opacity:1}}
body.page-in{animation:pageIn .45s ease both}
body.page-out{opacity:0; transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){ body.page-in{animation:none} body.page-out{transition:none} }


/* ---- تایم‌لاینِ pinned (اسکرولِ عمودی) ---- */
.tl-pin-sec{height:520vh; position:relative; padding:0}
.tl-pin{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; gap:14px; overflow:hidden}
@media(max-width:760px){ .tl-pin-sec{height:600vh} .tl-strip{padding-inline:34vw} .tl-card{flex-basis:200px} }

/* بازه‌ی قیمتِ اثر روی کارت */
.price-range{margin-top:8px; font-size:24px; color:var(--gold); font-weight:bold}


/* ---- نوارِ تبلیغِ بالای سایت ---- */
.promo-bar{position:fixed; top:0; inset-inline:0; z-index:60; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:8px 16px; text-align:center; text-decoration:none; color:#1b1505; font-weight:bold; font-size:23px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft),var(--gold)); box-shadow:0 2px 12px -4px rgba(0,0,0,.4)}
.promo-bar img{height:26px; width:auto; border-radius:5px; background:#fff; padding:2px}
.promo-bar span{line-height:1.4}
@media(max-width:600px){ .promo-bar{font-size:19px; padding:7px 10px} .promo-bar img{height:22px} }


/* ---- رفعِ شلوغیِ هدر در موبایل ---- */
@media(max-width:820px){
  .hd-act{gap:7px}
  .hd-act > .btn{display:none}            /* دکمه‌ی ورود به گالری روی موبایل */
  .tgl{width:42px;height:42px;font-size:18px}
  [data-account-btn]{padding:0 9px!important}
  .brand{font-size:20px}
}


/* ---- فیلدهای فرم (ورود/حساب/سفارش) متناسب با تم ---- */
.field{margin-bottom:18px}
.field label{display:block; font-size:18px; color:var(--muted); margin-bottom:8px}
.field input,.field textarea,.field select{width:100%; padding:14px 16px; border-radius:13px; font-family:inherit; font-size:19px;
  background:var(--surface); border:1px solid var(--border); color:var(--txt); transition:.25s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted); opacity:.7}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--gold); background:var(--surface-2)}
.field textarea{min-height:110px; resize:vertical; line-height:1.9}
/* ---- ورودی‌های متنی: فونتِ لاتین‌خوان ----
   فونتِ Farhood گلیفِ لاتین «دارد» اما نامرئی/توخالی است؛ برای همین متنِ انگلیسیِ تایپ‌شده دیده نمی‌شد.
   با Vazirmatn هم فارسی و هم انگلیسی درست و خوانا نمایش داده می‌شود. */
input,textarea,select,
.field input,.field textarea,.field select,
.form-grid input,.form-grid textarea,
.tbl input,.custom-wrap input{font-family:'Vazirmatn',Tahoma,sans-serif}


/* ---- دکمه‌ی هدر متناسب با آیکون‌های کنارش ---- */
.hd-act .btn{padding:10px 20px; font-size:23px; border-radius:12px; box-shadow:0 8px 20px -10px var(--gold)}
.hd-act{gap:10px}