/* ===========================================================
   کلینیک زیبایی دکتر بهادر رفیعی — سیستم طراحی
   پالت برگرفته از هویت واقعی کلینیک: سنگ مشکی و لوگوی طلایی
   =========================================================== */

@font-face{font-family:Estedad;src:url(../fonts/estedad-arabic-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Estedad;src:url(../fonts/estedad-arabic-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/vazirmatn-arabic-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/vazirmatn-arabic-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/vazirmatn-arabic-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/vazirmatn-arabic-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/vazirmatn-arabic-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/vazirmatn-arabic-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  /* ink */
  --bg:#08080a;          --bg-2:#0e0e11;        --bg-3:#141418;
  --surf:#111114;        --surf-2:#17171c;      --surf-3:#1e1e24;
  /* gold ramp */
  --g-900:#6d5316;  --g-700:#8c6d1f;  --g-500:#c9a227;
  --g-400:#dcb94e;  --g-300:#e8cd7d;  --g-200:#f1dfae;  --g-100:#f8efd6;
  /* light surfaces */
  --cream:#f7f4ee;  --cream-2:#efe9de;  --paper:#fffdf9;
  /* text */
  --tx:#f4f2ef;     --tx-2:rgba(244,242,239,.72); --tx-3:rgba(244,242,239,.48);
  --tx-d:#17171a;   --tx-d2:#4a4751;             --tx-d3:#7b7681;
  /* lines */
  --line:rgba(241,223,174,.14);  --line-2:rgba(241,223,174,.26);
  --line-d:#e3dcd0;              --line-d2:#d2c9b9;
  /* system */
  --ok:#4caf7d;  --warn:#d8a33d;  --err:#d9625a;
  --rad:4px;  --rad-l:10px;  --rad-xl:18px;
  --wrap:1220px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -24px rgba(0,0,0,.75);
  --shadow-l:0 20px 50px -22px rgba(30,24,8,.26);
  /* سطوح وابسته به تم */
  --hdr:rgba(8,8,10,.55);      --hdr-s:rgba(8,8,10,.94);
  --annb:linear-gradient(90deg,#0d0b05,#231b08,#0d0b05);
  --annb-tx:var(--g-200);      --annb-line:rgba(201,162,39,.22);
  --ftr:#050506;               --mbar:rgba(10,10,12,.96);
  --pill:rgba(8,8,10,.82);     --gen:linear-gradient(145deg,#15131a,#0a0a0d 62%);
  --gen-ic:rgba(8,8,10,.5);    --glow:.24;
  --logo-d:block;              --logo-l:none;
  --map-bg:#15151a;   --map-grid:#2a2a33;  --map-road:#34343f;
  --map-blk:#1d1d24;  --map-lbl:#5a5a66;
  --serif:'P052','URW Bookman','Century Schoolbook L','Nimbus Roman',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:Vazirmatn,system-ui,sans-serif;direction:rtl;background:var(--bg);color:var(--tx);
  font-size:16px;line-height:1.95;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto لازم است: اگر تگ صفت height داشته باشد و CSS فقط width
   بدهد، مرورگر همان صفت را ارتفاع واقعی می‌گیرد و عکس کشیده می‌شود.
   قاعده‌های خاص‌تر (مثل .hero-art .ph img) همچنان غالب‌اند. */
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--g-500);color:#000}

/* ---------- layout ---------- */
.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto}
.sec{padding:112px 0;position:relative}
.sec.tight{padding:80px 0}
.sec.light{background:var(--cream);color:var(--tx-d)}
.sec.paper{background:var(--paper);color:var(--tx-d)}
.sec.deep{background:var(--bg-2)}
.grid{display:grid;gap:28px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- type ---------- */
/* letter-spacing روی خط فارسی، حروف چسبان را از هم باز می‌کند — عادتی
   از تایپوگرافی لاتین که «کلینیک» را به «ک ل ی ن ی ک» تبدیل می‌کرد.
   text-transform هم برای این خط بی‌اثر است. فونت Estedad کمی بازتر از
   Vazirmatn است و در همین اندازه کوچک بهتر خوانده می‌شود. */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:Estedad,Vazirmatn,sans-serif;
  font-size:13.5px;font-weight:500;letter-spacing:0;
  color:var(--g-300);margin-bottom:22px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(to left,var(--g-500),transparent)}
.sec.light .eyebrow,.sec.paper .eyebrow{color:var(--g-700)}
.sec.light .eyebrow::before,.sec.paper .eyebrow::before{background:linear-gradient(to left,var(--g-700),transparent)}

h1,h2,h3,h4{font-weight:300;line-height:1.38;letter-spacing:-.3px}
h1{font-size:clamp(34px,5.2vw,62px);line-height:1.26}
h2{font-size:clamp(27px,3.5vw,42px);line-height:1.32}
h3{font-size:clamp(19px,2vw,25px)}
h4{font-size:17px;font-weight:600;line-height:1.6}
.hi{font-weight:700;color:var(--g-300)}
.sec.light .hi,.sec.paper .hi{color:var(--g-700)}
.lead{font-size:17px;line-height:2.05;color:var(--tx-2);font-weight:300;max-width:62ch}
.sec.light .lead,.sec.paper .lead{color:var(--tx-d2)}
p{color:var(--tx-2)}
.sec.light p,.sec.paper p{color:var(--tx-d2)}
.muted{color:var(--tx-3);font-size:14px}
.sec.light .muted,.sec.paper .muted{color:var(--tx-d3)}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif);letter-spacing:.5px}

.shead{margin-bottom:54px;max-width:70ch}
.shead.center{margin-inline:auto;text-align:center}
.shead.center .eyebrow::before{display:none}
.shead p{margin-top:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:0 30px;height:54px;border-radius:var(--rad);font-size:15px;font-weight:600;
  letter-spacing:.2px;transition:all .45s var(--ease);position:relative;overflow:hidden;cursor:pointer;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .45s var(--ease)}
.btn-g{background:linear-gradient(135deg,var(--g-500),var(--g-400));color:#15110a;
  box-shadow:0 10px 28px -12px rgba(201,162,39,.6)}
.btn-g:hover{background:linear-gradient(135deg,var(--g-400),var(--g-300));
  box-shadow:0 16px 36px -12px rgba(201,162,39,.8);transform:translateY(-2px)}
.btn-o{border:1px solid var(--line-2);color:var(--tx);background:rgba(255,255,255,.015)}
.btn-o:hover{border-color:var(--g-500);color:var(--g-300);background:rgba(201,162,39,.07)}
.btn-d{background:var(--tx-d);color:var(--cream)}
.btn-d:hover{background:#000;transform:translateY(-2px)}
.btn-od{border:1px solid var(--line-d2);color:var(--tx-d)}
.btn-od:hover{border-color:var(--g-700);color:var(--g-700);background:rgba(201,162,39,.06)}
.btn-sm{height:44px;padding:0 20px;font-size:14px}
.btn:hover svg{transform:translateX(-4px)}
.btn[disabled]{opacity:.38;pointer-events:none}

.link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--g-300);padding-bottom:3px;border-bottom:1px solid var(--line-2);transition:.35s var(--ease)}
.link:hover{color:var(--g-200);border-color:var(--g-400);gap:13px}
.sec.light .link,.sec.paper .link{color:var(--g-700);border-color:var(--line-d2)}
.sec.light .link:hover,.sec.paper .link:hover{color:var(--g-900);border-color:var(--g-700)}
.link svg{width:14px;height:14px}

/* ---------- announcement + header ---------- */
.annb{
  background:var(--annb);
  gap:26px;
  color:var(--annb-tx);font-size:13px;font-weight:500;text-align:center;padding:10px 24px;
  border-bottom:1px solid var(--annb-line);
  position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
}
.annb a{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--annb-tx);
  border-bottom:1px solid var(--annb-line)}
.annb a:hover{opacity:.78}
.annb svg{width:14px;height:14px}

.hdr{position:sticky;top:0;z-index:55;transition:all .5s var(--ease);
  background:var(--hdr);backdrop-filter:blur(16px);border-bottom:1px solid transparent}
.hdr.solid{background:var(--hdr-s);border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:30px;height:80px}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand .mk{width:40px;height:auto;flex:none;object-fit:contain}
.brand .tx b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.2px;line-height:1.3}
.brand .tx span{display:block;font-size:9.5px;letter-spacing:2.6px;color:var(--g-300);
  font-family:var(--serif);font-weight:400}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav a{font-size:14.5px;font-weight:400;padding:10px 14px;border-radius:var(--rad);
  color:var(--tx-2);transition:.3s var(--ease);position:relative}
.nav a::after{content:"";position:absolute;bottom:4px;right:14px;left:14px;height:1px;
  background:var(--g-500);transform:scaleX(0);transition:transform .4s var(--ease)}
.nav a:hover{color:var(--tx)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--g-300);font-weight:600}
.hdr-cta{display:flex;align-items:center;gap:12px;flex:none}
/* منوی همبرگری: استایلش پیش‌تر درون JS و با زمینه تیره ثابت بود، پس
   در حالت روشن متن تیره روی زمینه تیره می‌افتاد و خوانده نمی‌شد. */
.nav.open{display:flex;position:fixed;inset:80px 0 auto;flex-direction:column;
  align-items:stretch;background:var(--hdr-s);backdrop-filter:blur(20px);
  padding:18px;gap:2px;border-bottom:1px solid var(--line);z-index:54;
  max-height:calc(100dvh - 80px);overflow-y:auto}
.nav.open a{padding:13px 14px}
.nav.open a::after{display:none}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--rad);
  align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--tx);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;right:0;width:18px;height:1.5px;background:var(--tx)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- sticky booking rail (desktop) ---------- */
.rail{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:50;
  background:linear-gradient(180deg,var(--g-500),var(--g-700));color:#15110a;
  writing-mode:vertical-rl;padding:26px 11px;font-size:13.5px;font-weight:700;letter-spacing:1.5px;
  border-radius:0 var(--rad) var(--rad) 0;box-shadow:0 14px 40px -14px rgba(0,0,0,.8);
  display:flex;align-items:center;gap:12px;transition:.4s var(--ease)
}
.rail:hover{padding-inline:16px 11px;background:linear-gradient(180deg,var(--g-400),var(--g-500))}
.rail svg{width:16px;height:16px;transform:rotate(90deg)}

/* ---------- mobile bottom bar ---------- */
.mbar{display:none;position:fixed;bottom:0;right:0;left:0;z-index:58;
  background:var(--mbar);backdrop-filter:blur(18px);border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px}
.mbar .btn{flex:1;height:50px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 88% 8%,rgba(201,162,39,var(--glow)),transparent 62%),
             radial-gradient(60% 50% at 6% 96%,rgba(201,162,39,.08),transparent 60%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:66px;
  align-items:center;padding:92px 0 104px;min-height:min(86vh,760px)}
.hero h1{margin-bottom:26px}
.hero h1 .ln{display:block}
.hero .lead{margin-bottom:38px;font-size:17.5px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-badges{display:flex;gap:28px;margin-top:46px;padding-top:30px;border-top:1px solid var(--line);flex-wrap:wrap}
.hbg{display:flex;align-items:center;gap:11px}
.hbg .ic{width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;color:var(--g-300);flex:none}
.hbg .ic svg{width:16px;height:16px}
.hbg b{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.hbg span{display:block;font-size:11.5px;color:var(--tx-3)}

.hero-art{position:relative}
.hero-art .ph{position:relative;border-radius:var(--rad-xl);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:3/4}
.hero-art .ph img{width:100%;height:100%;object-fit:cover}
.hero-art .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(183deg,transparent 42%,rgba(6,6,8,.45) 70%,rgba(4,4,6,.93))}
.hero-art .frm{position:absolute;inset:-18px -18px 26px 26px;border:1px solid var(--line-2);
  border-radius:var(--rad-xl);pointer-events:none}
.hero-art .cap{position:absolute;right:26px;bottom:24px;left:26px;display:flex;
  align-items:flex-end;justify-content:space-between;gap:14px}
.hero-art .cap b{font-size:14px;font-weight:600;display:block;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hero-art .cap span{font-size:11.5px;color:rgba(255,255,255,.72);
  text-shadow:0 1px 8px rgba(0,0,0,.9)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:40px;
  background:var(--pill);backdrop-filter:blur(10px);border:1px solid var(--line-2);
  font-size:11.5px;font-weight:600;color:var(--g-200);white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block;
  box-shadow:0 0 0 3px rgba(76,175,125,.2)}

.scroll-cue{position:absolute;bottom:26px;right:50%;transform:translateX(50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10.5px;
  letter-spacing:2px;color:var(--tx-3)}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(to bottom,var(--g-500),transparent);display:block}

/* ---------- stats strip ---------- */
.stats{background:var(--bg-2);border-block:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:38px 26px;text-align:center;border-inline-start:1px solid var(--line)}
.stat:first-child{border:0}
.stat b{display:block;font-size:40px;font-weight:700;color:var(--g-300);line-height:1.1;letter-spacing:-1px}
.stat span{display:block;font-size:13px;color:var(--tx-3);margin-top:7px}

/* ---------- reviews strip ---------- */
.rev{display:flex;gap:18px;overflow:hidden}
.rvc{flex:1;min-width:0;background:var(--surf);border:1px solid var(--line);border-radius:var(--rad-l);
  padding:26px 26px 24px;transition:.45s var(--ease)}
.rvc:hover{border-color:var(--line-2);transform:translateY(-4px)}
.sec.light .rvc,.sec.paper .rvc{background:#fff;border-color:var(--line-d)}
.rvc .st{display:flex;gap:3px;color:var(--g-400);margin-bottom:13px}
.rvc .st svg{width:14px;height:14px}
.rvc p{font-size:14.5px;line-height:1.95;margin-bottom:18px}
.rvc .who{display:flex;align-items:center;gap:11px;padding-top:15px;border-top:1px solid var(--line)}
.sec.light .rvc .who,.sec.paper .rvc .who{border-color:var(--line-d)}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--g-700),var(--g-500));color:#15110a;font-size:13px;font-weight:700}
.rvc .who b{display:block;font-size:13.5px;font-weight:600}
.rvc .who>span>span{display:block;font-size:11.5px;color:var(--tx-3)}
.sec.light .rvc .who>span>span,.sec.paper .rvc .who>span>span{color:var(--tx-d3)}
.gbadge{display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:40px;
  border:1px solid var(--line-d);background:#fff;font-size:13px;font-weight:600;color:var(--tx-d)}
.gbadge b{color:var(--g-700);font-size:15px}

/* ---------- service cards ---------- */
.svc{position:relative;background:var(--surf);border:1px solid var(--line);border-radius:var(--rad-l);
  padding:34px 30px 30px;overflow:hidden;transition:.5s var(--ease);display:flex;flex-direction:column}
.svc::before{content:"";position:absolute;inset:0;opacity:0;transition:.5s var(--ease);
  background:radial-gradient(120% 90% at 100% 0,rgba(201,162,39,.12),transparent 60%)}
.svc:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
.svc:hover::before{opacity:1}
.svc>*{position:relative}
.svc .ic{width:54px;height:54px;border-radius:12px;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--g-300);margin-bottom:22px;
  background:linear-gradient(145deg,rgba(201,162,39,.1),transparent);transition:.5s var(--ease)}
.svc:hover .ic{border-color:var(--g-500);color:var(--g-200);transform:scale(1.06) rotate(-3deg)}
.svc .ic svg{width:25px;height:25px}
.svc h3{font-size:20px;font-weight:600;margin-bottom:11px}
.svc p{font-size:14.5px;line-height:1.95;margin-bottom:20px;flex:1}
.svc .tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.tag{font-size:11.5px;padding:5px 11px;border-radius:30px;background:rgba(241,223,174,.06);
  border:1px solid var(--line);color:var(--tx-2)}
.sec.light .tag,.sec.paper .tag{background:rgba(201,162,39,.08);border-color:var(--line-d);color:var(--tx-d2)}
.svc .foot{display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--tx-3)}
.svc .foot .go{color:var(--g-300);font-weight:600;display:inline-flex;align-items:center;gap:7px}
.svc .foot .go svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.svc:hover .foot .go svg{transform:translateX(-5px)}
.sec.light .svc,.sec.paper .svc{background:#fff;border-color:var(--line-d)}
.sec.light .svc .ic,.sec.paper .svc .ic{color:var(--g-700);border-color:var(--line-d)}
.sec.light .svc .foot,.sec.paper .svc .foot{border-color:var(--line-d);color:var(--tx-d3)}
.sec.light .svc .foot .go,.sec.paper .svc .foot .go{color:var(--g-700)}

/* ---------- before/after compare ---------- */
.cmp{position:relative;max-width:460px;margin-inline:auto;
  border-radius:var(--rad-l);overflow:hidden;user-select:none;
  cursor:ew-resize;touch-action:none;background:#000;box-shadow:var(--shadow)}
.cmp img{width:100%;display:block;pointer-events:none}
.cmp .aft{position:absolute;inset:0;overflow:hidden;width:50%}
.cmp .aft img{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none}
.cmp .hdl{position:absolute;top:0;bottom:0;right:50%;width:2px;background:var(--g-300);
  transform:translateX(50%);pointer-events:none;box-shadow:0 0 18px rgba(232,205,125,.6)}
.cmp .hdl::after{content:"";position:absolute;top:50%;right:50%;width:46px;height:46px;
  transform:translate(50%,-50%);border-radius:50%;border:2px solid var(--g-300);
  background:rgba(8,8,10,.62);backdrop-filter:blur(6px)}
.cmp .hdl i{position:absolute;top:50%;right:50%;transform:translate(50%,-50%);z-index:2;
  color:var(--g-200);font-size:13px;letter-spacing:-2px}
.cmp .lb{position:absolute;top:16px;padding:6px 14px;border-radius:30px;font-size:11.5px;
  font-weight:700;background:rgba(8,8,10,.68);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);color:var(--g-200);pointer-events:none}
.cmp .lb.r{right:16px}.cmp .lb.l{left:16px}

/* ---------- simulator ---------- */
.simwrap{display:grid;grid-template-columns:minmax(280px,430px) minmax(300px,500px);
  gap:48px;align-items:start;justify-content:center}
.simstage{position:relative;border-radius:var(--rad-l);overflow:hidden;background:#000;
  max-width:430px;margin-inline:auto;
  box-shadow:var(--shadow);border:1px solid var(--line)}
.simstage canvas{width:100%;display:block}
.simstage .lb{position:absolute;top:14px;right:14px;padding:6px 14px;border-radius:30px;
  font-size:11.5px;font-weight:700;background:rgba(8,8,10,.7);border:1px solid var(--line-2);color:var(--g-200)}
.simstage .proc{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,8,10,.6);
  backdrop-filter:blur(3px);font-size:13px;color:var(--g-200);letter-spacing:1px;opacity:0;
  pointer-events:none;transition:opacity .25s}
.simstage.busy .proc{opacity:1}
.ctrl{background:var(--surf);border:1px solid var(--line);border-radius:var(--rad-l);padding:28px}
.ctrl h4{margin-bottom:5px}
.ctrl>.muted{margin-bottom:24px}
.sld{margin-bottom:22px}
.sld .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.sld .row b{font-size:14px;font-weight:500}
.sld .row span{font-size:13px;font-weight:700;color:var(--g-300)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:linear-gradient(to left,var(--g-500) var(--p,50%),rgba(241,223,174,.14) var(--p,50%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--g-300);border:3px solid var(--bg-3);box-shadow:0 2px 10px rgba(0,0,0,.6);cursor:grab}
.disc{margin-top:22px;padding:15px 17px;border-radius:var(--rad);background:rgba(216,163,61,.07);
  border-inline-start:2px solid var(--warn);font-size:12.5px;line-height:1.9;color:var(--tx-2)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;top:27px;right:12%;left:12%;height:1px;
  background:linear-gradient(to left,transparent,var(--line-2),var(--line-2),transparent)}
.stp{text-align:center;padding:0 18px;position:relative}
.stp .n{width:54px;height:54px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--g-700);color:var(--g-300);font-size:17px;font-weight:700;
  position:relative;z-index:2;transition:.45s var(--ease)}
.stp:hover .n{background:linear-gradient(135deg,var(--g-500),var(--g-400));color:#15110a;border-color:transparent;
  box-shadow:0 10px 26px -10px rgba(201,162,39,.7)}
.stp h4{margin-bottom:9px}
.stp p{font-size:14px}
.sec.light .stp .n,.sec.paper .stp .n{background:var(--cream);border-color:var(--g-700);color:var(--g-700)}
.sec.light .steps::before,.sec.paper .steps::before{background:linear-gradient(to left,transparent,var(--line-d2),var(--line-d2),transparent)}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split.rev{direction:ltr}
.split.rev>*{direction:rtl}
.split .art{position:relative;border-radius:var(--rad-l);overflow:hidden;box-shadow:var(--shadow)}
.split .art img{width:100%}
.feat{display:flex;gap:15px;margin-bottom:20px}
.feat .ic{width:38px;height:38px;flex:none;border-radius:9px;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--g-300)}
.feat .ic svg{width:17px;height:17px}
.feat b{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.feat p{font-size:14px;line-height:1.9}
.sec.light .feat .ic,.sec.paper .feat .ic{border-color:var(--line-d);color:var(--g-700)}

/* ---------- article cards ---------- */
.art-c{background:var(--surf);border:1px solid var(--line);border-radius:var(--rad-l);overflow:hidden;
  transition:.5s var(--ease);display:flex;flex-direction:column}
.art-c:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
.art-c .th{aspect-ratio:16/10;overflow:hidden;background:var(--bg-3);position:relative}
.art-c .th.gen{display:grid;place-items:center;background:var(--gen)}
/* معرفی مقاله در انتهای صفحه خدمت: نوار افقی. با نسبت ۱۶:۱۰ و عرض
   کامل، تصویر ۴۷۵ پیکسل ارتفاع می‌گرفت و کل بخش را می‌بلعید. */
.art-c.wide{flex-direction:row;align-items:stretch}
.art-c.wide .th{flex:0 0 40%;aspect-ratio:auto;min-height:190px}
.art-c.wide .bd{flex:1;display:flex;flex-direction:column;justify-content:center}
@media(max-width:620px){
  .art-c.wide{flex-direction:column}
  .art-c.wide .th{flex:auto;aspect-ratio:16/10;min-height:0}
}
.art-c .th.gen::before{content:"";position:absolute;inset:0;
  background:radial-gradient(95% 130% at 86% -10%,rgba(201,162,39,.24),transparent 62%)}
.art-c .th.gen::after{content:"";position:absolute;inset:0;opacity:.55;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(241,223,174,.05) 11px 12px)}
.art-c .th.gen i{position:relative;z-index:2;width:62px;height:62px;border-radius:50%;
  border:1px solid rgba(241,223,174,.32);display:grid;place-items:center;color:var(--g-300);
  background:var(--gen-ic);transition:.6s var(--ease)}
.art-c:hover .th.gen i{transform:scale(1.08);border-color:var(--g-500);color:var(--g-200)}
.art-c .th.gen b{position:absolute;z-index:2;bottom:13px;right:18px;font-size:10.5px;
  letter-spacing:2.4px;color:rgba(241,223,174,.42);font-weight:700}
.art-c .th img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.art-c:hover .th img{transform:scale(1.06)}
.art-c .bd{padding:24px 24px 22px;flex:1;display:flex;flex-direction:column}
.art-c .kk{font-size:11.5px;color:var(--g-300);font-weight:700;letter-spacing:1.4px;margin-bottom:11px}
.art-c h4{font-size:17px;line-height:1.65;margin-bottom:10px}
.art-c p{font-size:13.5px;line-height:1.9;flex:1;margin-bottom:16px}
.art-c .mt{display:flex;justify-content:space-between;font-size:12px;color:var(--tx-3);
  padding-top:14px;border-top:1px solid var(--line)}
.sec.light .art-c,.sec.paper .art-c{background:#fff;border-color:var(--line-d)}
.sec.light .art-c .kk,.sec.paper .art-c .kk{color:var(--g-700)}
.sec.light .art-c .mt,.sec.paper .art-c .mt{border-color:var(--line-d);color:var(--tx-d3)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.sec.light .faq,.sec.paper .faq{border-color:var(--line-d)}
.faq details{border-bottom:1px solid var(--line)}
.sec.light .faq details,.sec.paper .faq details{border-color:var(--line-d)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:center;
  justify-content:space-between;gap:20px;font-size:16px;font-weight:500;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--g-300)}
.sec.light .faq summary:hover,.sec.paper .faq summary:hover{color:var(--g-700)}
.faq summary .pm{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;position:relative;transition:.4s var(--ease)}
.sec.light .faq summary .pm,.sec.paper .faq summary .pm{border-color:var(--line-d2)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:currentColor}
.faq summary .pm::before{width:11px;height:1.5px}
.faq summary .pm::after{width:1.5px;height:11px;transition:transform .4s var(--ease)}
.faq details[open] summary{color:var(--g-300)}
.sec.light .faq details[open] summary,.sec.paper .faq details[open] summary{color:var(--g-700)}
.faq details[open] summary .pm{background:var(--g-500);border-color:var(--g-500);color:#15110a;transform:rotate(180deg)}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq .ans{padding:0 0 26px;font-size:14.5px;line-height:2.05;color:var(--tx-2);max-width:78ch}
.sec.light .faq .ans,.sec.paper .faq .ans{color:var(--tx-d2)}

/* ---------- cta band ---------- */
.cta{position:relative;overflow:hidden;background:var(--bg-2);border-block:1px solid var(--line)}
.cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 50% 0,rgba(201,162,39,.16),transparent 65%)}
.cta .wrap{position:relative;text-align:center;padding:94px 0}
.cta h2{margin-bottom:18px}
.cta .lead{margin:0 auto 34px;text-align:center}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- forms ---------- */
.fld{margin-bottom:20px}
.fld label{display:block;font-size:13.5px;font-weight:500;margin-bottom:9px;color:var(--tx-2)}
.sec.light .fld label,.sec.paper .fld label{color:var(--tx-d2)}
.inp{width:100%;height:52px;padding:0 16px;border-radius:var(--rad);background:var(--surf-2);
  border:1px solid var(--line);color:var(--tx);font-size:14.5px;transition:.3s var(--ease);outline:none}
textarea.inp{height:auto;padding:15px 16px;line-height:1.9;resize:vertical;min-height:120px}
.inp:focus{border-color:var(--g-500);box-shadow:0 0 0 3px rgba(201,162,39,.12)}
.inp::placeholder{color:var(--tx-3)}
.sec.light .inp,.sec.paper .inp{background:#fff;border-color:var(--line-d);color:var(--tx-d)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--g-300) 50%),
  linear-gradient(135deg,var(--g-300) 50%,transparent 50%);
  background-position:16px 23px,21px 23px;background-size:5px 5px;background-repeat:no-repeat}

/* ---------- booking ---------- */
.bk{display:grid;grid-template-columns:1fr 370px;gap:34px;align-items:start}
/* خانه‌های گرید به‌طور پیش‌فرض کوچک‌تر از min-content محتوایشان نمی‌شوند
   و در نمایشگرهای باریک کارت را از قاب بیرون می‌زنند. */
.bk>*{min-width:0}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--rad-l);padding:30px}
.card.pad-s{padding:24px}
.sec.light .card,.sec.paper .card{background:#fff;border-color:var(--line-d)}
.bsteps{display:flex;gap:0;margin-bottom:32px;border-bottom:1px solid var(--line)}
.sec.light .bsteps,.sec.paper .bsteps{border-color:var(--line-d)}
.bstep{flex:1;padding:0 0 15px;text-align:center;font-size:13.5px;color:var(--tx-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
.bstep.on{color:var(--g-300);border-color:var(--g-500);font-weight:700}
.bstep.done{color:var(--ok)}
.cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.cal-hd b{font-size:16px;font-weight:600}
.cal-nav{display:flex;gap:8px}
.cal-nav button{width:36px;height:36px;border:1px solid var(--line);border-radius:var(--rad);
  display:grid;place-items:center;color:var(--tx-2);transition:.3s}
.cal-nav button:hover{border-color:var(--g-500);color:var(--g-300)}
.sec.light .cal-nav button,.sec.paper .cal-nav button{border-color:var(--line-d);color:var(--tx-d2)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dw{text-align:center;font-size:11.5px;color:var(--tx-3);padding:6px 0 10px;font-weight:600}
.sec.light .cal .dw,.sec.paper .cal .dw{color:var(--tx-d3)}
.cal .d{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--rad);font-size:14px;
  border:1px solid transparent;cursor:pointer;transition:.25s var(--ease);position:relative}
.cal .d:hover:not(.off){background:rgba(201,162,39,.1);border-color:var(--line-2)}
.cal .d.off{opacity:.22;cursor:not-allowed}
.cal .d.has::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--g-500)}
.cal .d.sel{background:linear-gradient(135deg,var(--g-500),var(--g-400));color:#15110a;font-weight:700;border-color:transparent}
.cal .d.sel::after{background:#15110a}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:8px}
.slot{height:46px;border:1px solid var(--line);border-radius:var(--rad);display:grid;place-items:center;
  font-size:14px;cursor:pointer;transition:.25s var(--ease)}
.slot:hover:not(.busy){border-color:var(--g-500);color:var(--g-300)}
.slot.busy{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.slot.sel{background:linear-gradient(135deg,var(--g-500),var(--g-400));color:#15110a;font-weight:700;border-color:transparent}
.sec.light .slot,.sec.paper .slot{border-color:var(--line-d)}
.sum{position:sticky;top:104px}
.sum .ln{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px dashed var(--line);font-size:14px}
.sec.light .sum .ln,.sec.paper .sum .ln{border-color:var(--line-d)}
.sum .ln:last-of-type{border:0}
.sum .ln span{color:var(--tx-3)}
.sec.light .sum .ln span,.sec.paper .sum .ln span{color:var(--tx-d3)}
.sum .ln b{font-weight:600}

/* ---------- user panel ---------- */
.pnl{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start}
.pnav{background:var(--surf);border:1px solid var(--line);border-radius:var(--rad-l);padding:14px;position:sticky;top:104px}
.pnav a{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--rad);
  font-size:14.5px;color:var(--tx-2);transition:.3s}
.pnav a svg{width:17px;height:17px;flex:none;opacity:.8}
.pnav a:hover{background:rgba(241,223,174,.05);color:var(--tx)}
.pnav a.on{background:linear-gradient(135deg,rgba(201,162,39,.18),rgba(201,162,39,.05));
  color:var(--g-200);font-weight:600}
.pnav a.on svg{color:var(--g-300);opacity:1}
.phead{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.phead .av{width:62px;height:62px;font-size:21px}
.phead b{display:block;font-size:20px;font-weight:600}
.phead span{font-size:13.5px;color:var(--tx-3)}
.kpi{background:var(--surf);border:1px solid var(--line);border-radius:var(--rad-l);padding:22px 24px}
.kpi .ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:rgba(201,162,39,.1);color:var(--g-300);margin-bottom:16px}
.kpi .ic svg{width:17px;height:17px}
.kpi b{display:block;font-size:27px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.kpi span{font-size:12.5px;color:var(--tx-3)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:right;font-size:12px;font-weight:600;color:var(--tx-3);padding:0 14px 13px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:15px 14px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border:0}
.tbl tbody tr{transition:background .3s}
.tbl tbody tr:nth-child(even){background:rgba(241,223,174,.02)}
.tbl tbody tr:hover{background:rgba(241,223,174,.055)}
/* ستون نام خدمت لنگرِ چشم است؛ آیکون همان خدمت کنارش می‌نشیند. */
/* سلول را table-cell نگه می‌داریم تا خط جداکننده ردیف‌ها هم‌تراز بماند؛
   چیدمان افقی داخل یک span انجام می‌شود، نه روی خود td. */
.tbl td{vertical-align:middle}
.tbl td.nm{font-weight:600;white-space:nowrap}
.tbl td.nm .w{display:flex;align-items:center;gap:11px}
.tbl td.nm .i{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  color:var(--g-300);background:rgba(201,162,39,.09);border:1px solid var(--line)}
.sec.light .tbl td.nm .i,.sec.paper .tbl td.nm .i{color:var(--g-700);border-color:var(--line-d)}
.sec.light .tbl tbody tr:nth-child(even),.sec.paper .tbl tbody tr:nth-child(even){
  background:rgba(78,114,96,.035)}
.sec.light .tbl tbody tr:hover,.sec.paper .tbl tbody tr:hover{background:rgba(78,114,96,.07)}
.sec.light .chip.ok,.sec.paper .chip.ok{background:rgba(47,125,85,.12);color:#2f7d55}
.sec.light .chip.wt,.sec.paper .chip.wt{background:rgba(150,108,22,.12);color:#8a6410}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:30px;font-size:11.5px;font-weight:600}
.chip.ok{background:rgba(76,175,125,.13);color:#7fd3a8}
.chip.wt{background:rgba(216,163,61,.13);color:var(--g-300)}
.chip.no{background:rgba(217,98,90,.13);color:#e88e88}

/* ---------- gallery ---------- */
.filt{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:38px}
.filt button{padding:9px 19px;border-radius:40px;border:1px solid var(--line);font-size:13.5px;
  color:var(--tx-2);transition:.3s var(--ease)}
.filt button:hover{border-color:var(--line-2);color:var(--tx)}
.filt button.on{background:linear-gradient(135deg,var(--g-500),var(--g-400));color:#15110a;
  border-color:transparent;font-weight:700}
.gal{columns:3;column-gap:22px}
.gi{border-radius:var(--rad-l);overflow:hidden;position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--surf);transition:.5s var(--ease)}
.gal .gi{break-inside:avoid;margin-bottom:22px;display:block}
.gi:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow)}
.gi img{width:100%;display:block}
.gi .cap{padding:16px 18px;flex:1}
.gi .cap b{display:block;font-size:14px;font-weight:600;margin-bottom:3px}
.gi .cap span{font-size:12px;color:var(--tx-3)}
.sec.light .gi,.sec.paper .gi{background:#fff;border-color:var(--line-d)}
.sec.light .gi .cap b,.sec.paper .gi .cap b{color:var(--tx-d)}
.sec.light .gi .cap span,.sec.paper .gi .cap span{color:var(--tx-d3)}
.sec.light .gi.slot-empty,.sec.paper .gi.slot-empty{background:rgba(201,162,39,.04);
  border-color:var(--line-d2)}
.sec.light .gi.slot-empty b,.sec.paper .gi.slot-empty b{color:var(--tx-d)}
.sec.light .gi.slot-empty span,.sec.paper .gi.slot-empty span{color:var(--tx-d3)}
.gi.slot-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;padding:40px 26px;aspect-ratio:4/5.9;
  border-style:dashed;border-color:var(--line-2);background:rgba(241,223,174,.02)}
.gi.slot-empty svg{width:28px;height:28px;color:var(--g-700);margin:0 auto 4px}
.gi.slot-empty b{font-size:14px;font-weight:600;display:block;margin:0}
.gi.slot-empty span{font-size:12.5px;color:var(--tx-3);line-height:1.85;max-width:26ch}

/* ---------- footer ---------- */
.ftr{background:var(--ftr);border-top:1px solid var(--line);padding:72px 0 0}
.ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:46px;padding-bottom:52px}
.ftr h5{font-size:13px;font-weight:700;letter-spacing:1.6px;color:var(--g-300);margin-bottom:22px}
.ftr ul li{margin-bottom:12px}
.ftr ul a{font-size:14px;color:var(--tx-2);transition:.3s}
.ftr ul a:hover{color:var(--g-300);padding-inline-start:5px}
.ftr .about p{font-size:14px;line-height:2;margin:18px 0 22px;max-width:40ch}
.ftr-tel{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.ftr-tel a{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--g-200);transition:.3s var(--ease)}
.ftr-tel a:hover{color:var(--g-100)}
.ftr-tel svg{color:var(--g-500);flex:none}
.soc{display:flex;gap:10px}
.soc a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;
  place-items:center;color:var(--tx-2);transition:.35s var(--ease)}
.soc a:hover{border-color:var(--g-500);color:var(--g-300);transform:translateY(-3px)}
.soc svg{width:17px;height:17px}
.hrs li{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;
  border-bottom:1px dashed var(--line);color:var(--tx-2)}
.hrs li b{font-weight:600;color:var(--tx)}
.hrs li.cl b{color:var(--err)}
.ftr-bt{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;
  align-items:center;gap:20px;font-size:12.5px;color:var(--tx-3);flex-wrap:wrap}
.map{height:210px;border-radius:var(--rad-l);overflow:hidden;border:1px solid var(--line);
  position:relative;background:var(--bg-3)}
.map svg{width:100%;height:100%}
.map .m-bg{fill:var(--map-bg)}
.map .m-grid{stroke:var(--map-grid);stroke-width:1;fill:none}
.map .m-road{stroke:var(--map-road);stroke-width:3;fill:none}
.map .m-blk{fill:var(--map-blk)}
.map .m-lbl{fill:var(--map-lbl)}
.map .pin{position:absolute;top:50%;right:50%;transform:translate(50%,-100%);color:var(--g-400)}
.map .pin svg{width:30px;height:30px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;padding:76px 0 60px;background:var(--bg-2);
  border-bottom:1px solid var(--line);overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 100% at 92% 0,rgba(201,162,39,.14),transparent 62%)}
.phero .wrap{position:relative}
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--tx-3);margin-bottom:20px}
.crumb a:hover{color:var(--g-300)}
.crumb i{opacity:.4}
.phero h1{font-size:clamp(28px,3.8vw,46px);margin-bottom:14px}
.phero .lead{font-size:16px}

/* ---------- کارت خدمت با عکس ---------- */
/* کارت ساده (فقط آیکون) برای خانه می‌ماند؛ این نسخه برای صفحه خدمات است. */
.svc.ph-card{padding:0 0 30px}
.svc.ph-card .ph{position:relative;display:block}
.svc.ph-card .ph .im{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.svc.ph-card .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.svc.ph-card:hover .ph img{transform:scale(1.06)}
/* روی عکس متنی نمی‌نشیند، پس پوشش تیره لازم نیست؛ فقط یک خط جداکننده
   تا لبه عکس روی زمینه روشن کارت محو نشود. */
.svc.ph-card .ph .im{border-bottom:1px solid var(--line)}
/* نشان خدمت روی لبهٔ پایین عکس می‌نشیند */
.svc.ph-card .ic{position:absolute;inset-inline-end:24px;bottom:-27px;z-index:2;
  margin:0;background:var(--surf);box-shadow:0 8px 24px rgba(0,0,0,.34)}
.svc.ph-card:hover .ic{transform:scale(1.06) rotate(-3deg)}
.svc.ph-card h3{margin:32px 30px 11px}
.svc.ph-card p,.svc.ph-card .tags,.svc.ph-card .foot{margin-inline:30px}
.sec.light .svc.ph-card .ic,.sec.paper .svc.ph-card .ic{background:#fff}

/* ---------- هیروی صفحه با عکس ---------- */
.phero.with-art .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}
.phero.with-art .txt{min-width:0}
.phero.with-art .hero-art .ph{aspect-ratio:4/3}
/* قاب تزیینی نسخه خانه برای عکس عمودی تنظیم شده؛ اینجا عکس افقی است
   و حاشیه متقارن مثل پاسپارتو می‌نشیند. */
.phero.with-art .hero-art .frm{inset:-18px}
/* عکس افقی کوتاه‌تر است، پس شیب تیره باید تندتر باشد تا نوشته روی
   عکس خوانا بماند. */
.phero.with-art .hero-art .ph::after{
  background:linear-gradient(180deg,transparent 40%,rgba(6,6,8,.52) 74%,rgba(4,4,6,.9))}

@media(max-width:860px){
  .phero.with-art .wrap{grid-template-columns:1fr;gap:34px}
  .phero.with-art .hero-art{order:-1}
  .phero.with-art .hero-art .frm{inset:-12px}
}
/* جدول پنج‌ستونی ذاتاً از عرض گوشی پهن‌تر است. به‌جای سرریز کردن کل
   صفحه، خودِ جدول افقی اسکرول می‌شود. */
.tscroll{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
.tscroll .tbl{min-width:600px}
.tscroll::-webkit-scrollbar{height:6px}
.tscroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

@media(max-width:760px){
  /* در گوشی، نشانِ ستون نام جا را می‌گیرد و کارت‌های عکس‌دار بالای صفحه
     همان نقش بصری را دارند. */
  .tbl td.nm .i{display:none}
  .tscroll .tbl{min-width:470px}
}
@media(max-width:560px){
  .svc.ph-card h3{margin:28px 22px 10px}
  .svc.ph-card p,.svc.ph-card .tags,.svc.ph-card .foot{margin-inline:22px}
  .svc.ph-card .ic{inset-inline-end:18px}
}

/* ---------- استوری (فقط نسخه موبایل) ---------- */
/* نوار دایره‌ها زیر هدر، و نمایشگر تمام‌صفحه. روی دسکتاپ هیچ‌کدام
   دیده نمی‌شوند؛ تصویرها lazy هستند و تا آن موقع دانلود نمی‌شوند. */
.stories{display:none}
.st-view{display:none}

@media(max-width:860px){
  .stories{display:block;background:var(--bg-2);border-bottom:1px solid var(--line)}
  .st-rail{display:flex;gap:16px;padding:14px 18px 13px;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .st-rail::-webkit-scrollbar{display:none}
  .st-dot{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:7px;
    background:none;border:0;padding:0;cursor:pointer}
  /* حلقه طلایی با gradient روی پس‌زمینه و یک حلقه تو‌خالی از رنگ صفحه */
  .st-dot .ring{display:block;width:62px;height:62px;border-radius:50%;padding:2px;
    background:conic-gradient(from 210deg,var(--g-300),var(--g-500),#8a6a14,var(--g-300));
    transition:.3s var(--ease)}
  .st-dot .im{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
    border:2px solid var(--bg-2);background:var(--surf)}
  .st-dot img{width:100%;height:100%;object-fit:cover}
  .st-dot .nm{font-size:11px;color:var(--tx-2);line-height:1.5;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px}
  .st-dot:active .ring{transform:scale(.94)}
  /* دیده‌شده‌ها مثل اینستاگرام خاکستری می‌شوند */
  .st-dot.seen .ring{background:var(--line-2)}
  .st-dot.seen .nm{color:var(--tx-3)}

  .st-view[hidden]{display:none}
  .st-view{display:block;position:fixed;inset:0;z-index:200;background:#07070a;
    overscroll-behavior:contain;touch-action:none}
  .st-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .st-view::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(4,4,6,.72) 0,transparent 22%,
      transparent 42%,rgba(4,4,6,.82) 82%,rgba(4,4,6,.95))}
  .st-bars{position:absolute;top:12px;right:12px;left:12px;z-index:3;display:flex;gap:4px}
  .st-bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
  .st-bars s{display:block;height:100%;width:0;background:#fff;text-decoration:none}
  .st-bars i.done s{width:100%}
  .st-bars i.now s{width:100%;transition:width var(--st-dur,6s) linear}
  .st-x{position:absolute;top:26px;left:14px;z-index:4;width:40px;height:40px;
    display:grid;place-items:center;border:0;background:none;color:#fff;cursor:pointer;
    filter:drop-shadow(0 1px 6px rgba(0,0,0,.7))}
  .st-cap{position:absolute;right:22px;bottom:34px;left:22px;z-index:3;color:#fff}
  .st-cap b{display:block;font-size:21px;font-weight:600;line-height:1.5;margin-bottom:10px;
    text-shadow:0 1px 14px rgba(0,0,0,.8)}
  .st-cap p{font-size:13.5px;line-height:2;color:rgba(255,255,255,.88);margin-bottom:18px;
    text-shadow:0 1px 12px rgba(0,0,0,.85)}
  .st-cap .btn{z-index:4;position:relative}
  /* نیمه راست = قبلی، نیمه چپ = بعدی (جهت خواندن فارسی) */
  .st-tap{position:absolute;top:70px;bottom:120px;z-index:2;width:38%;
    border:0;background:none;cursor:pointer}
  .st-prev{right:0}
  .st-next{left:0}
}

/* ---------- متن مقاله ---------- */
.prose{font-size:16px;line-height:2.15;color:var(--tx-2)}
.prose>*+*{margin-top:20px}
.prose .lead{font-size:17.5px;line-height:2.05;color:var(--tx);margin-bottom:34px}
.prose h2{font-size:23px;font-weight:600;color:var(--tx);margin-top:44px;line-height:1.6}
.prose h2::before{content:"";display:block;width:34px;height:1px;margin-bottom:16px;
  background:linear-gradient(to left,var(--g-500),transparent)}
.prose b{color:var(--tx);font-weight:600}
.prose i{font-style:normal;color:var(--g-300)}
.sec.light .prose i,.sec.paper .prose i{color:var(--g-700)}
.prose ul{list-style:none;padding:0}
.prose li{position:relative;padding-inline-start:26px;margin-top:13px}
.prose li::before{content:"";position:absolute;inset-inline-start:7px;top:14px;
  width:5px;height:5px;border-radius:50%;background:var(--g-500)}
@media(max-width:560px){
  .prose{font-size:15.5px;line-height:2.05}
  .prose h2{font-size:20px;margin-top:36px}
}

/* سه دکمه نقشه در ستون ۳۷۰ پیکسلی: هم‌عرض و بدون شکستن متن. */
.map-apps{gap:8px}
.map-apps .btn{flex:1;min-width:0;padding-inline:10px;white-space:nowrap;justify-content:center}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
/* بین ۱۰۸۱ تا ۱۲۲۰ منوی کامل نمایش داده می‌شود، پس فاصله‌ها فشرده
   می‌شوند تا هدر در عرض پنجره جا بگیرد. */
@media(min-width:1081px) and (max-width:1220px){
  .hdr .wrap{gap:14px}
  .nav{gap:0}
  .nav a{padding:10px 9px;font-size:13.5px}
  .nav a::after{right:9px;left:9px}
  .hdr-cta{gap:8px}
}

@media(max-width:1080px){
  /* هدر دسکتاپ برای جا شدن به پنجره ۱۱۹۴ پیکسلی نیاز دارد (نشان ۱۹۶ +
     منو ۵۶۷ + دکمه‌ها ۳۲۳ + فاصله‌ها). پیش از این، نقطه‌شکست روی ۸۶۰
     بود و هر پنجره‌ای بین ۸۶۱ تا ۱۱۹۳ کل صفحه را افقی سرریز می‌کرد. */
  .nav,.rail,.hdr-cta .btn{display:none}
  .burger{display:flex}
  .hdr-cta{margin-inline-start:auto}
  .mbar{display:flex}
  body{padding-bottom:72px}
  .hero .wrap{grid-template-columns:1fr;gap:48px;padding:64px 0 76px}
  .hero-art{max-width:460px}
  .split{grid-template-columns:1fr;gap:40px}
  .simwrap{grid-template-columns:1fr}
  .bk{grid-template-columns:1fr}
  .sum{position:static}
  .pnl{grid-template-columns:1fr}
  .pnav{position:static;display:flex;overflow-x:auto;padding:8px}
  .pnav a{white-space:nowrap}
  .gal{columns:2}
  .ftr-top{grid-template-columns:1fr 1fr;gap:38px}
}
@media(max-width:860px){
  .hero-badges{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stat:nth-child(odd){border-inline-start:0}
  .steps{grid-template-columns:repeat(2,1fr);gap:40px 0}
  .steps::before{display:none}
  .rev{flex-direction:column}
  .sec{padding:76px 0}
  .wrap{width:min(100% - 36px,var(--wrap))}
}
@media(max-width:380px){
  /* زیر ۳۸۰ پیکسل، نشان و نام کلینیک کنار هم از عرض هدر بیرون می‌زدند. */
  .hdr .wrap{gap:10px}
  .brand .tx span{display:none}
  .brand .mk{width:30px}
}
@media(max-width:560px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .gal{columns:1}
  .ftr-top{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero-badges{grid-template-columns:1fr;gap:14px}
  .annb span.hide-s{display:none}
}

/* ---------- قفل کامل لوگو ---------- */
.lockup{display:block;width:clamp(160px,22vw,210px);height:auto;margin-bottom:26px}
.ftr .about .brand{margin-bottom:4px}

/* ---------- ویدیوی تیزر ---------- */
.tour{position:relative;border-radius:var(--rad-l);overflow:hidden;background:#000;
  box-shadow:var(--shadow);border:1px solid var(--line);max-width:380px;margin-inline:auto}
.tour video{width:100%;display:block}
.tour .tg{position:absolute;top:14px;right:14px;z-index:2}

/* ---------- جدول قیمت ---------- */
.price{width:100%;border-collapse:collapse;font-size:14.5px}
.price th{text-align:right;font-size:12px;font-weight:600;color:var(--tx-3);
  padding:0 14px 13px;border-bottom:1px solid var(--line)}
.price td{padding:12px 14px;border-bottom:1px solid var(--line)}
.price td:last-child{text-align:left;font-weight:600;color:var(--g-300);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.price tr:last-child td{border:0}
.price tbody tr:hover{background:rgba(241,223,174,.025)}
.sec.light .price th,.sec.paper .price th{border-color:var(--line-d);color:var(--tx-d3)}
.sec.light .price td,.sec.paper .price td{border-color:var(--line-d)}
.sec.light .price td:last-child,.sec.paper .price td:last-child{color:var(--g-700)}
.pkg{border:1px solid var(--g-700);border-radius:var(--rad-l);padding:26px 24px;text-align:center;
  background:linear-gradient(160deg,rgba(201,162,39,.12),transparent 70%);transition:.5s var(--ease)}
.pkg:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--g-500)}
.pkg .nm{font-size:16px;font-weight:700;color:var(--g-300);margin-bottom:6px}
.pkg .pr{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.3}
.pkg .pr small{font-size:13px;font-weight:400;color:var(--tx-3);letter-spacing:0}
.pkg .inc{font-size:13px;color:var(--tx-2);margin-top:10px;line-height:1.85}

/* ---------- برندهای مواد مصرفی ---------- */
.brands{display:flex;flex-wrap:wrap;gap:9px}
.brands span{font-size:12.5px;padding:7px 14px;border-radius:30px;border:1px solid var(--line);
  color:var(--tx-2);background:rgba(241,223,174,.04);transition:.3s var(--ease)}
.brands span:hover{border-color:var(--g-500);color:var(--g-200)}
.sec.light .brands span,.sec.paper .brands span{border-color:var(--line-d);color:var(--tx-d2);
  background:rgba(201,162,39,.05)}

/* ---------- ساعات کاری سه‌گانه ---------- */
.sched{display:grid;gap:14px}
.schd{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--rad-l);
  border:1px solid var(--line);background:var(--surf);
  /* خانه گرید به‌طور پیش‌فرض کوچک‌تر از min-content نمی‌شود؛ بدون این دو
     ردیف، کارت ساعات کاری در ستون ۳۷۰ پیکسلی سرریز می‌کرد. */
  min-width:0;flex-wrap:wrap}
.schd .ic{width:38px;height:38px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(201,162,39,.1);color:var(--g-300)}
/* ستون میانی (span دوم: نام روز و توضیح) بدون min-width:0 کوچک‌تر از
   محتوایش نمی‌شد و کارت ساعات کاری را از قاب بیرون می‌زد. */
.schd>span:nth-of-type(2){min-width:0}
.schd b{display:block;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.schd span{display:block;font-size:13px;color:var(--tx-3);margin-top:2px}
.schd .hh{margin-inline-start:auto;font-size:14px;font-weight:700;color:var(--g-300);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.sec.light .schd,.sec.paper .schd{background:#fff;border-color:var(--line-d)}
.sec.light .schd .ic,.sec.paper .schd .ic{color:var(--g-700)}
.sec.light .schd span,.sec.paper .schd span{color:var(--tx-d3)}
.sec.light .schd .hh,.sec.paper .schd .hh{color:var(--g-700)}
@media(max-width:560px){
  .schd{flex-wrap:wrap}
  .schd .hh{margin-inline-start:52px;width:100%}
}


/* ═══════════════════════════ حالت روشن ═══════════════════════════ */
:root[data-theme="light"]{
  --bg:#faf8f4;      --bg-2:#f3eee4;    --bg-3:#ebe4d7;
  --surf:#ffffff;    --surf-2:#fbf9f5;  --surf-3:#f3eee4;
  --g-500:#9d7a1c;   --g-400:#b58f26;   --g-300:#8a6a18;   --g-200:#6f5513;
  --cream:#ffffff;   --cream-2:#f7f3ea; --paper:#f6f1e7;
  --tx:#16161a;      --tx-2:rgba(22,22,26,.76);  --tx-3:rgba(22,22,26,.52);
  --line:rgba(120,94,26,.17);  --line-2:rgba(120,94,26,.34);
  --shadow:0 20px 48px -26px rgba(60,46,12,.3);
  --hdr:rgba(250,248,244,.72);  --hdr-s:rgba(250,248,244,.95);
  --annb:linear-gradient(90deg,#f3e9cf,#fbf3dd,#f3e9cf);
  --annb-tx:#6b5313;            --annb-line:rgba(157,122,28,.3);
  --ftr:#f1ebdf;                --mbar:rgba(250,248,244,.97);
  --pill:rgba(255,255,255,.9);  --gen:linear-gradient(145deg,#f3ecdd,#faf7f1 62%);
  --gen-ic:rgba(255,255,255,.7);--glow:.1;
  --logo-d:none;                --logo-l:block;
  --map-bg:#ece5d8;   --map-grid:#ddd3c0;  --map-road:#cabfa6;
  --map-blk:#e1d8c6;  --map-lbl:#9c9079;
}
/* بخش‌های «روشن» و «کاغذی» در تم روشن، سطح متمایز می‌مانند */
:root[data-theme="light"] .sec.light{background:#ffffff}
:root[data-theme="light"] .sec.paper{background:var(--paper)}
:root[data-theme="light"] .sec.deep{background:var(--bg-2)}
:root[data-theme="light"] .ftr{border-top-color:var(--line-2)}
:root[data-theme="light"] .ftr .hrs li{border-bottom-color:var(--line)}
:root[data-theme="light"] .stat b,
:root[data-theme="light"] .pkg .pr{color:var(--g-300)}
:root[data-theme="light"] .btn-o{background:rgba(255,255,255,.7)}
:root[data-theme="light"] .btn-g{color:#fffdf7}
:root[data-theme="light"] .av,
:root[data-theme="light"] .cal .d.sel,
:root[data-theme="light"] .slot.sel,
:root[data-theme="light"] .filt button.on,
:root[data-theme="light"] .rail{color:#fffdf7}
:root[data-theme="light"] .kpi .ic,
:root[data-theme="light"] .schd .ic{background:rgba(157,122,28,.12)}
:root[data-theme="light"] .chip.ok{background:rgba(47,107,74,.12);color:#2f6b4a}
:root[data-theme="light"] .chip.wt{background:rgba(157,122,28,.14);color:#7a5e14}
:root[data-theme="light"] .chip.no{background:rgba(185,62,54,.12);color:#a33a33}
:root[data-theme="light"] .disc{background:rgba(157,122,28,.09);color:#6b5313}
:root[data-theme="light"] .pnav a.on{background:linear-gradient(135deg,rgba(157,122,28,.16),rgba(157,122,28,.04));
  color:var(--g-200)}
:root[data-theme="light"] .art-c .th.gen i{border-color:rgba(120,94,26,.3);color:var(--g-300)}
:root[data-theme="light"] .art-c .th.gen b{color:rgba(107,83,19,.5)}
:root[data-theme="light"] .hero-art .cap b,
:root[data-theme="light"] .hero-art .cap span{color:#fff}
:root[data-theme="light"] .pill{color:var(--g-200);border-color:var(--line-2)}
:root[data-theme="light"] .simstage .lb,
:root[data-theme="light"] .cmp .lb{background:rgba(255,255,255,.88);color:var(--g-200)}
:root[data-theme="light"] .cmp .hdl{background:var(--g-500);box-shadow:0 0 18px rgba(157,122,28,.5)}
:root[data-theme="light"] .cmp .hdl::after{border-color:var(--g-500);background:rgba(255,255,255,.75)}
:root[data-theme="light"] .cmp .hdl i{color:var(--g-200)}
:root[data-theme="light"] .simstage .proc{background:rgba(255,255,255,.72);color:var(--g-200)}
:root[data-theme="light"] input[type=range]{background:linear-gradient(to left,
  var(--g-500) var(--p,50%),rgba(120,94,26,.18) var(--p,50%))}
:root[data-theme="light"] input[type=range]::-webkit-slider-thumb{background:var(--g-500);
  border-color:#fff;box-shadow:0 2px 8px rgba(60,46,12,.35)}
:root[data-theme="light"] ::selection{color:#fff}

/* ---------- کلید تغییر تم ---------- */
.tsw{width:42px;height:42px;flex:none;border:1px solid var(--line-2);border-radius:var(--rad);
  display:grid;place-items:center;color:var(--tx-2);transition:.35s var(--ease);position:relative}
.tsw:hover{border-color:var(--g-500);color:var(--g-300);background:rgba(201,162,39,.07)}
.tsw svg{width:18px;height:18px}
.tsw .mo{display:var(--logo-d)}
.tsw .su{display:var(--logo-l)}
.lockup.dk{display:var(--logo-d)}
.lockup.lt{display:var(--logo-l)}

/* ═══════════ پیام‌های سامانه نوبت‌دهی (متصل به پایگاه داده) ═══════════ */
.bk-err,.bk-note{margin-top:14px;padding:13px 16px;border-radius:var(--rad);
  font-size:13.5px;line-height:1.85}
.bk-err{background:rgba(209,87,90,.1);border:1px solid rgba(209,87,90,.32);color:#e9a6a8}
.bk-note{background:rgba(76,175,125,.1);border:1px solid rgba(76,175,125,.3);color:#8ed2ae}
:root[data-theme="light"] .bk-err{background:rgba(185,52,56,.07);
  border-color:rgba(185,52,56,.28);color:#a8292d}
:root[data-theme="light"] .bk-note{background:rgba(34,124,82,.07);
  border-color:rgba(34,124,82,.26);color:#1c6a46}
.inp.bad{border-color:rgba(209,87,90,.6);box-shadow:0 0 0 3px rgba(209,87,90,.12)}
/* روزی که ظرفیتش تکمیل شده، با خط روی عدد مشخص می‌شود */
.cal .d.full{text-decoration:line-through;opacity:.3}
.cal .d.has{cursor:pointer}
#calNote{display:inline-block;margin-inline-start:4px}

/* ═══════════════════════════════════════════════════════════════════
   رنگ‌های مکمل حالت روشن
   طلا تنها رنگ سایت بود و نیمه پایینی صفحه یکدست کرم می‌شد. دو رنگ
   کمکی اضافه شد — «مریم‌گلی» آرام و درمانی، و «گل‌بهی» گرم و زیبایی —
   که فقط در حالت روشن و فقط روی سطح بخش‌ها و جزئیات ریز می‌نشینند.
   برند همچنان طلا است؛ این دو رنگ ریتم می‌سازند، نه هویت.

   ته‌رنگ هر بخش از کلاس خودش می‌آید (`deep` → مریم‌گلی، `paper` → گل‌بهی)
   و با `data-tint="sage|rose"` می‌توان بخشی را فقط در حالت روشن
   رنگ کرد، بی‌آنکه حالت تیره دست بخورد.
   ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  --ac1:#4e7260;   --ac1-d:#3a5648;   --ac1-w:#ecf2ee;   --ac1-t:rgba(78,114,96,.12);
  --ac2:#ab6258;   --ac2-d:#8a4840;   --ac2-w:#fbf0ec;   --ac2-t:rgba(171,98,88,.11);
}

/* ---------- ریتم رنگی بخش‌ها ---------- */
:root[data-theme="light"] :is(.sec.deep,.sec[data-tint="sage"]) { background:var(--ac1-w) }
:root[data-theme="light"] :is(.sec.paper,.sec[data-tint="rose"]){ background:var(--ac2-w) }

/* ---------- جزئیات بخش مریم‌گلی ---------- */
:root[data-theme="light"] :is(.sec.deep,.sec[data-tint="sage"]) .eyebrow{color:var(--ac1-d)}
:root[data-theme="light"] :is(.sec.deep,.sec[data-tint="sage"]) .eyebrow::before{
  background:linear-gradient(to left,var(--ac1),transparent)}
:root[data-theme="light"] :is(.sec.deep,.sec[data-tint="sage"]) :is(.feat .ic,.schd .ic,.kpi .ic){
  background:var(--ac1-t);border-color:rgba(78,114,96,.26);color:var(--ac1-d)}
:root[data-theme="light"] :is(.sec.deep,.sec[data-tint="sage"]) .stp .n{
  background:var(--ac1-t);border-color:rgba(78,114,96,.3);color:var(--ac1-d)}
:root[data-theme="light"] :is(.sec.deep,.sec[data-tint="sage"]) .stp:hover .n{
  background:linear-gradient(135deg,var(--ac1),#60876f);color:#fff;border-color:transparent}
:root[data-theme="light"] :is(.sec.deep,.sec[data-tint="sage"])
  :is(.card,.rvc,.art-c,.svc,.gi,.pkg){background:#fff;border-color:rgba(78,114,96,.17)}
:root[data-theme="light"] :is(.sec.deep,.sec[data-tint="sage"]) .faq{border-top-color:rgba(78,114,96,.2)}
:root[data-theme="light"] :is(.sec.deep,.sec[data-tint="sage"]) .faq details{
  border-bottom-color:rgba(78,114,96,.17)}

/* ---------- جزئیات بخش گل‌بهی ---------- */
:root[data-theme="light"] :is(.sec.paper,.sec[data-tint="rose"]) .eyebrow{color:var(--ac2-d)}
:root[data-theme="light"] :is(.sec.paper,.sec[data-tint="rose"]) .eyebrow::before{
  background:linear-gradient(to left,var(--ac2),transparent)}
:root[data-theme="light"] :is(.sec.paper,.sec[data-tint="rose"]) :is(.feat .ic,.schd .ic,.kpi .ic){
  background:var(--ac2-t);border-color:rgba(171,98,88,.26);color:var(--ac2-d)}
:root[data-theme="light"] :is(.sec.paper,.sec[data-tint="rose"]) .stp .n{
  background:var(--ac2-t);border-color:rgba(171,98,88,.3);color:var(--ac2-d)}
:root[data-theme="light"] :is(.sec.paper,.sec[data-tint="rose"]) .stp:hover .n{
  background:linear-gradient(135deg,var(--ac2),#bd7169);color:#fff;border-color:transparent}
:root[data-theme="light"] :is(.sec.paper,.sec[data-tint="rose"])
  :is(.card,.rvc,.art-c,.svc,.gi,.pkg){background:#fff;border-color:rgba(171,98,88,.17)}
:root[data-theme="light"] :is(.sec.paper,.sec[data-tint="rose"]) .faq{border-top-color:rgba(171,98,88,.2)}
:root[data-theme="light"] :is(.sec.paper,.sec[data-tint="rose"]) .faq details{
  border-bottom-color:rgba(171,98,88,.17)}

/* ---------- تصویر جانشین مقاله‌ها: هر کارت یک ته‌رنگ ---------- */
:root[data-theme="light"] .art-c .th.gen i{
  border-color:rgba(120,94,26,.26);background:rgba(255,255,255,.82);color:var(--g-300)}
:root[data-theme="light"] .art-c .th.gen b{color:rgba(90,72,30,.42)}
:root[data-theme="light"] .art-c .th.gen::after{opacity:.5;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(90,72,30,.045) 11px 12px)}
:root[data-theme="light"] .art-c:nth-child(3n+1) .th.gen{
  background:linear-gradient(145deg,#e4ede7,#f6f2ea 68%)}
:root[data-theme="light"] .art-c:nth-child(3n+1) .th.gen::before{
  background:radial-gradient(95% 130% at 86% -10%,rgba(78,114,96,.3),transparent 62%)}
:root[data-theme="light"] .art-c:nth-child(3n+1) .th.gen i{color:var(--ac1-d);
  border-color:rgba(78,114,96,.3)}
:root[data-theme="light"] .art-c:nth-child(3n+2) .th.gen{
  background:linear-gradient(145deg,#f8e9e3,#faf4ed 68%)}
:root[data-theme="light"] .art-c:nth-child(3n+2) .th.gen::before{
  background:radial-gradient(95% 130% at 86% -10%,rgba(171,98,88,.28),transparent 62%)}
:root[data-theme="light"] .art-c:nth-child(3n+2) .th.gen i{color:var(--ac2-d);
  border-color:rgba(171,98,88,.3)}
:root[data-theme="light"] .art-c:nth-child(3n) .th.gen{
  background:linear-gradient(145deg,#f4ead4,#faf6ec 68%)}

/* ---------- نوار آمار: تکیه‌گاه گرم زیر هدر ---------- */
:root[data-theme="light"] .stats{
  background:linear-gradient(180deg,#f7f1e3,#f3ecdc);
  border-block-color:rgba(157,122,28,.22)}

/* ---------- فراخوان پایانی: طلا به گل‌بهی ---------- */
:root[data-theme="light"] .cta{
  background:linear-gradient(135deg,#f6ead9 0%,#faefe8 52%,#f1e9dd 100%);
  border-block-color:rgba(157,122,28,.28)}
:root[data-theme="light"] .cta::before{
  background:radial-gradient(70% 120% at 50% 0,rgba(171,98,88,.2),transparent 66%)}

/* ---------- فوتر: پایان‌بندی تیره، تا صفحه روی زمین بنشیند ---------- */
:root[data-theme="light"] .ftr{
  background:linear-gradient(180deg,#273029,#1e2521);
  border-top-color:rgba(157,122,28,.4);
  /* توکن‌ها داخل فوتر به نسخه تیره برمی‌گردند */
  --tx:#f2f1ec;
  --tx-2:rgba(242,241,236,.74);
  --tx-3:rgba(242,241,236,.5);
  --g-300:#e3c977;  --g-200:#efe0b2;  --g-100:#f8f0d8;  --g-500:#c9a227;
  --line:rgba(226,215,178,.16);  --line-2:rgba(226,215,178,.3);
  --logo-d:block;   --logo-l:none;
  --map-bg:#232b26;  --map-grid:#2d362f;  --map-road:#3a453c;
  --map-blk:#2a332d; --map-lbl:#6f7d72;
  color:var(--tx)}
:root[data-theme="light"] .ftr .map{background:var(--map-bg);border-color:var(--line)}
:root[data-theme="light"] .ftr .ftr-bt{border-top-color:var(--line)}
:root[data-theme="light"] .ftr .soc a:hover{border-color:var(--g-500);color:var(--g-300)}