/* ================= FONTS ================= */
@font-face{
  font-family:'Abar';
  src:url('../fonts/Abar-900.woff') format('woff');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Ravi';
  src:url('../fonts/Ravi-400.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* English display face — used sparingly for eyebrow labels / brand monogram.
   Loaded from Google Fonts; falls back to system sans if offline. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

/* ================= TOKENS ================= */
:root{
  --bg:#050505;
  --surface:#0c0c0c;
  --surface-2:#141414;
  --glass:rgba(255,255,255,.06);
  --glass-strong:rgba(255,255,255,.1);
  --border:#222222;
  --border-soft:#2a2a2a;
  --border-fade:#4a4a4a;
  --accent:#a0f00b;
  --accent-dim:rgba(160,240,11,.14);
  --text:#f5f5f3;
  --text-dim:#a3a3a0;
  --text-faint:#6f6f6c;
  --r-xl:64px;
  --r-lg:48px;
  --r-md:24px;
  --r-sm:366px;
  --shell:400px;
  --shell-md:400px;
  --wide:400px;
  --ease:cubic-bezier(.16,.84,.32,1);
  --en-font:'Space Grotesk','Abar',sans-serif;

  /* spacing scale — everything in the page keys off this */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* unified elevation language, used by every card type */
  --shadow-card:0 22px 44px -24px rgba(0,0,0,.65);
  --shadow-card-hover:0 26px 54px -20px rgba(0,0,0,.7);
  --section-pad:clamp(52px, 8vw, 88px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Ravi','Vazirmatn',Tahoma,sans-serif;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
@supports (overflow:clip){html,body{overflow-x:clip;max-width:100%;}}
h1,h2,h3,h4,.f-abar,button,.chip,.navlink,.brandmark,.stat-num,.badge,.section-eyebrow{
  font-family:'Abar','Vazirmatn',Tahoma,sans-serif;
  font-weight:900;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font-family:'Ravi','Vazirmatn',Tahoma,sans-serif;}
ul{list-style:none;}

::selection{background:var(--accent);color:#000;}

/* scrollbar */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:10px;}

/* ================= ATMOSPHERE ================= */
.atmosphere{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:layout style paint;
  transform:translateZ(0);
}
.blob{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 42% 42%, var(--accent), transparent 72%);
  opacity:calc(0.4 * var(--blob-intensity, 1));
  filter:blur(70px);
  animation:drift 20s ease-in-out infinite;
  will-change:transform,opacity;
}
@media(min-width:900px){ .blob{filter:blur(110px);} }
.blob-1{width:480px;height:480px;top:-130px;left:-150px;animation-duration:19s;}
.blob-2{width:400px;height:400px;top:34%;right:-180px;animation-duration:24s;animation-direction:reverse;opacity:calc(0.3 * var(--blob-intensity, 1));}
.blob-3{width:440px;height:440px;bottom:-180px;left:15%;animation-duration:29s;opacity:calc(0.36 * var(--blob-intensity, 1));}
.blob-4{width:340px;height:340px;top:8%;right:12%;animation-duration:26s;animation-direction:reverse;opacity:calc(0.26 * var(--blob-intensity, 1));}
.blob-5{width:360px;height:360px;bottom:6%;right:-120px;animation-duration:21s;opacity:calc(0.32 * var(--blob-intensity, 1));}
.blob-6{width:300px;height:300px;top:50%;left:40%;animation-duration:33s;animation-direction:reverse;opacity:calc(0.22 * var(--blob-intensity, 1));}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);opacity:calc(0.34 * var(--blob-intensity, 1));}
  33%{transform:translate(48px,-56px) scale(1.24);opacity:calc(0.56 * var(--blob-intensity, 1));}
  66%{transform:translate(-38px,32px) scale(.88);opacity:calc(0.24 * var(--blob-intensity, 1));}
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================= LAYOUT SHELLS ================= */
.page{position:relative;z-index:2;}
.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 20px;
}
.wide{
  width:100%;
  max-width:var(--wide);
  margin:0 auto;
  padding:0 20px;
}
.shell-md{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 20px;
  transition:max-width .3s;
}
@media(min-width:700px){
  .shell-md{max-width:var(--shell-md);}
}
@media(min-width:900px){
  .shell{padding:0 24px;}
  .wide{padding:0 40px;}
  .shell-md{padding:0;}
}

/* bilingual eyebrow labels */
.en-tag{
  font-family:var(--en-font);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  direction:ltr;
  unicode-bidi:isolate;
}

section{position:relative;padding:var(--section-pad) 0 var(--sp-2);}
.section-head{margin-bottom:var(--sp-6);text-align:var(--heading-align, right);}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:12px;letter-spacing:.02em;color:var(--accent);
  margin-bottom:var(--sp-3);
}
.section-eyebrow::before{
  content:"";width:14px;height:1px;background:var(--accent);
}
.section-eyebrow .en-tag{
  font-size:10.5px;color:var(--text-faint);letter-spacing:.15em;
}
.section-eyebrow .sep{color:var(--border-fade);font-size:10px;}
.section-title{font-size:26px;line-height:1.32;letter-spacing:-.01em;max-width:var(--heading-max-width, none);margin-inline:var(--heading-title-margin, 0 auto);}
.section-sub{color:var(--text-dim);font-size:14.5px;margin-top:var(--sp-3);max-width:520px;}
@media(min-width:900px){
  section{padding:calc(var(--section-pad) + 12px) 0 var(--sp-2);}
  .section-title{font-size:33px;}
}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease);will-change:opacity,transform;}
.reveal.in{opacity:1;transform:translateY(0);will-change:auto;}
.stagger .reveal:nth-child(1){transition-delay:.02s;}
.stagger .reveal:nth-child(2){transition-delay:.10s;}
.stagger .reveal:nth-child(3){transition-delay:.18s;}
.stagger .reveal:nth-child(4){transition-delay:.26s;}
.stagger .reveal:nth-child(5){transition-delay:.34s;}
.stagger .reveal:nth-child(6){transition-delay:.42s;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .blob{animation:none;}
  .vm-toggle{animation:none;}
  .pf-card.active{animation:none;}
  .hero-headline em{animation:none;}
  *{scroll-behavior:auto !important;}
}
html{scroll-behavior:smooth;}

/* glass helper */
.glass{
  background:var(--glass);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.08);
}

/* ================= TOP NAV ================= */
.topnav{
  position:fixed;top:16px;left:0;right:0;z-index:50;
  display:flex;justify-content:center;
  transition:top .3s var(--ease);
}
.topnav-inner{
  width:calc(100% - 40px);
  max-width:400px;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px 10px 18px;
  border-radius:100px;
  background:radial-gradient(130% 200% at 100% 0%, rgba(160,240,11,.16), transparent 55%), rgba(8,8,8,.72);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(160,240,11,.14);
}
.brandmark{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;
  white-space:nowrap;
}
.brandmark .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}
.brand-mono{
  width:30px;height:30px;border-radius:50%;
  background:var(--accent-dim);border:1px solid rgba(160,240,11,.35);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--en-font);font-size:11px;color:var(--accent);flex:0 0 auto;
}
.menu-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
  gap:4px;position:relative;
}
.menu-btn span{position:absolute;width:14px;height:1.5px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),opacity .35s var(--ease);}
.menu-btn span:nth-child(1){transform:translateY(-4px);}
.menu-btn span:nth-child(3){transform:translateY(4px);}
.menu-btn.open span:nth-child(1){transform:rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:rotate(-45deg);}


/* full menu overlay */
.menu-overlay{
  position:fixed;inset:0;z-index:49;
  background:rgba(3,3,3,.86);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  gap:0;padding:84px 20px 20px;box-sizing:border-box;overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s;
}
.menu-overlay.open{opacity:1;visibility:visible;}
.menu-overlay .menu-link{
  font-family:'Abar';font-size:clamp(15px,3.2vh,21px);color:var(--text);
  padding:clamp(5px,1.1vh,9px) 0;position:relative;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s;
}
.menu-overlay button.menu-link{background:none;border:none;cursor:pointer;text-align:inherit;-webkit-appearance:none;}
.menu-overlay > .menu-link:not(:last-of-type)::after{
  content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:30%;height:1px;background:var(--border);
}
.menu-overlay.open .menu-link{opacity:1;transform:translateY(0);}
.menu-overlay .menu-link:hover{color:var(--accent);}
.menu-overlay .menu-link:nth-child(1){transition-delay:.05s;}
.menu-overlay .menu-link:nth-child(2){transition-delay:.1s;}
.menu-overlay .menu-link:nth-child(3){transition-delay:.15s;}
.menu-overlay .menu-link:nth-child(4){transition-delay:.2s;}
.menu-overlay .menu-link:nth-child(5){transition-delay:.25s;}
.menu-overlay .menu-link:nth-child(6){transition-delay:.3s;}
.menu-overlay .menu-link:nth-child(7){transition-delay:.35s;}
.menu-overlay .menu-link:nth-child(8){transition-delay:.4s;}
.menu-overlay .menu-link:nth-child(9){transition-delay:.45s;}
.menu-social{
  display:flex;gap:14px;margin-top:clamp(12px,2.6vh,26px);
  opacity:0;transition:opacity .6s var(--ease) .4s;
}
.menu-overlay.open .menu-social{opacity:1;}
.menu-social a{
  width:clamp(36px,5.4vh,42px);height:clamp(36px,5.4vh,42px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--border-soft);
  font-size:13px;transform:none;opacity:1;padding:0;
}

/* ================= HERO ================= */
.hero{padding-top:0;}
.hero-frame{
  position:relative;
  margin:0 auto;
  max-width:var(--shell);
  padding:0 20px;
}
.hero-media{
  position:relative;
  height:clamp(620px, 86vh, 820px);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  overflow:hidden;
  border:1px solid rgba(74,74,74,.5);
  border-top:none;
}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.92) 88%,#000 100%);
}
.hero-top{
  position:absolute;top:90px;left:0;right:0;z-index:3;
  padding:0 24px;text-align:center;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:#fff;
  background:rgba(8,8,8,.62);
  border:1px solid rgba(255,255,255,.14);
  padding:8px 16px;border-radius:100px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 20px -6px rgba(0,0,0,.5);
  white-space:nowrap;
}
.hero-tag .en-tag{font-size:10px;color:var(--accent);}
.hero-tag i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);flex:0 0 auto;}
.hero-tag-text{display:inline-flex;align-items:center;gap:6px;transition:opacity .25s var(--ease);}
.hero-tag-text svg{width:12px;height:12px;flex:0 0 auto;}
.hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%);
  pointer-events:none;
}
.hero-bottom{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:0 24px 30px;text-align:center;
}
.hero-name{
  font-size:15px;color:var(--text-dim);letter-spacing:.02em;margin-bottom:6px;
}
.hero-headline{
  font-size:32px;line-height:1.32;color:#fff;margin-bottom:24px;
}
.hero-headline em{
  font-style:normal;color:var(--accent);
  animation:neon-pulse 2.8s ease-in-out infinite;
}
@keyframes neon-pulse{
  0%,100%{text-shadow:0 0 6px rgba(160,240,11,.5),0 0 18px rgba(160,240,11,.22);}
  50%{text-shadow:0 0 14px rgba(160,240,11,.9),0 0 34px rgba(160,240,11,.5),0 0 52px rgba(160,240,11,.25);}
}
.quick-actions{display:flex;align-items:center;justify-content:center;gap:14px;width:fit-content;margin:0 auto;}
.qa-btn{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  transition:transform .3s var(--ease),background .3s;
}
.qa-btn:hover{background:rgba(255,255,255,.2);transform:translateY(-3px);}
.qa-btn svg{width:17px;height:17px;}
.cta-pill{
  flex:1;min-width:170px;
  height:44px;padding:0 20px;
  border-radius:var(--r-sm);
  background:var(--accent);color:#0a0a0a;
  font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .35s var(--ease),box-shadow .35s;
  box-shadow:0 0 0 rgba(160,240,11,0);
}
.cta-pill:hover{transform:translateY(-3px);box-shadow:0 14px 30px -8px rgba(160,240,11,.45);}
.qa-cta{flex:none;width:auto;height:46px;padding:0 28px;font-size:14px;}

.hero-below{padding:26px 0 10px;text-align:center;}
.hero-below p{font-size:13.5px;color:var(--text-dim);max-width:360px;margin:0 auto 16px;}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:var(--r-sm);
  border:1px solid var(--border-soft);
  font-size:13px;color:var(--text);
  transition:border-color .3s,color .3s,transform .3s var(--ease);
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}


/* ================= FILTER CHIPS ================= */
.chip-row{
  display:flex;gap:10px;overflow-x:auto;padding:4px 20px 18px;
  margin:0 -20px 8px;
  scrollbar-width:none;
}
.chip-row::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;
  padding:10px 18px;border-radius:100px;
  font-size:12.5px;color:var(--text-dim);
  background:var(--surface-2);
  border:1px solid var(--border);
  transition:all .3s var(--ease);
  white-space:nowrap;
}
.chip.active,.chip:hover{
  color:#0a0a0a;background:var(--accent);border-color:var(--accent);
  box-shadow:0 6px 18px -6px rgba(160,240,11,.5);
}
.wide .chip-row{margin:0 0 8px;padding:4px 0 18px;}

/* ================= PORTFOLIO CARDS (single column, horizontal scroll) ================= */
.pf-scroll{
  display:flex;gap:16px;overflow-x:auto;padding:8px 20px 26px;
  margin:0 -20px;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.pf-scroll::-webkit-scrollbar{display:none;}
.wide .pf-scroll{margin:0;padding:8px 0 26px;}

@property --dmc-angle{
  syntax:'<angle>';
  inherits:true;
  initial-value:0deg;
}
@keyframes dmc-spin{ to{ --dmc-angle:360deg; } }

.pf-card{
  position:relative;flex:0 0 84%;max-width:280px;scroll-snap-align:center;
  border-radius:var(--r-md);padding:2px;cursor:pointer;
}
.pf-card-bg{position:absolute;inset:0;border-radius:inherit;z-index:0;background:var(--border);}
.pf-card.active{animation:dmc-spin 3.2s linear infinite;}
.pf-card.active .pf-card-bg{
  background:conic-gradient(from var(--dmc-angle),transparent 0 60%,var(--accent),#eaffb0,transparent 100%);
}
.pf-card-inner{
  position:relative;z-index:1;overflow:hidden;
  border-radius:calc(var(--r-md) - 2px);
  background:var(--surface-2);box-shadow:var(--shadow-card);
}
.pf-media{position:relative;aspect-ratio:4/5;overflow:hidden;}
.pf-media .watermark{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.pf-media .watermark span{
  position:absolute;white-space:nowrap;font-size:13px;font-weight:700;
  color:rgba(255,255,255,.34);letter-spacing:.08em;
  transform:rotate(-32deg);
}
/* lightweight, honest deterrent — not real protection (browsers always allow viewing rendered content) */
.no-copy{-webkit-user-select:none;user-select:none;}
.no-copy img{-webkit-user-drag:none;user-drag:none;pointer-events:none;}
.no-copy input,.no-copy textarea{-webkit-user-select:text;user-select:text;}
.no-copy input,.no-copy textarea{pointer-events:auto;}
.pf-media img,.pf-media>video{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.pf-card:hover .pf-media img{transform:scale(1.06);}
/* extra گالری photos on a portfolio card: horizontally swipeable, snapping one photo per screen,
   with a small dot indicator (see .pf-gallery-dots) so it's clear more photos are one swipe away */
.pf-gallery-track{
  display:flex;width:100%;height:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.pf-gallery-track::-webkit-scrollbar{display:none;}
.pf-gallery-track video{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;}
.pf-gallery-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;}
.pf-gallery-dots{
  display:flex;align-items:center;justify-content:center;gap:5px;margin-top:10px;
}
.pf-gallery-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .25s var(--ease);flex:0 0 auto;}
.pf-gallery-dots span.active{width:14px;border-radius:100px;background:var(--accent);}
.pf-tag{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:10px;padding:5px 10px;border-radius:100px;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);
  color:var(--accent);backdrop-filter:blur(6px);
}
/* bottom gradient area: [rating · voice-toggle] row, then title, then a 2-line clamped description */
.pf-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:36px 12px 14px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5) 32%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.94));
}
.pf-meta-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.pf-rating{color:var(--accent);font-size:11px;letter-spacing:1.5px;}
.pf-meta-row .voice-mini{margin-inline-start:auto;}
.pf-meta-row:has(.voice-mini.open) .pf-rating{opacity:0;pointer-events:none;position:absolute;}
.pf-title{
  font-size:13px;line-height:1.5;color:#fff;margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pf-desc{
  font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.72);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.pf-card.soon{
  padding:0;cursor:default;border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:1px dashed var(--border-fade);background:var(--surface);
  text-align:center;padding:14px;aspect-ratio:4/5;
}
.pf-card.soon .soon-icon{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;color:var(--text-faint);
}
.pf-card.soon span{font-size:11.5px;color:var(--text-faint);}
.pf-card.hide{display:none;}

.ig-card{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:16px;aspect-ratio:4/5;border-radius:var(--r-md);cursor:pointer;
  background:linear-gradient(150deg,#1a2404,var(--surface) 65%);
  border:1px solid rgba(160,240,11,.25);
}
.ig-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.14;filter:saturate(0) contrast(1.1);}
.ig-icon{
  position:relative;z-index:1;
  width:42px;height:42px;border-radius:50%;
  background:var(--accent-dim);border:1px solid rgba(160,240,11,.4);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.ig-icon svg{width:18px;height:18px;}
.ig-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;}
.ig-text b{font-size:12px;color:#fff;font-weight:900;}
.ig-text span{font-size:10.5px;color:var(--accent);display:flex;align-items:center;justify-content:center;}

.portfolio-more{text-align:center;margin:14px 0 10px;}

/* ================= SCROLLER NAV (arrows + dots, shared by portfolio & testimonials) ================= */
.scroller-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:2px;}
.scroller-arrow{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text-dim);
  transition:background .3s,border-color .3s,transform .3s var(--ease),color .3s;
}
.scroller-arrow:hover{background:var(--accent);border-color:var(--accent);color:#0a0a0a;transform:translateY(-2px);}
.scroller-arrow svg{width:14px;height:14px;}
.scroller-arrow:disabled{opacity:.32;pointer-events:none;transform:none;}
.scroller-dots{display:flex;align-items:center;gap:6px;}
.scroller-dot{
  width:6px;height:6px;border-radius:50%;background:var(--border-fade);
  transition:all .3s var(--ease);padding:0;border:none;cursor:pointer;flex:0 0 auto;
}
.scroller-dot.active{width:18px;border-radius:100px;background:var(--accent);}


/* ================= LIGHTBOX ================= */
.lightbox{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.lightbox.open{opacity:1;visibility:visible;}
@media(min-width:760px){.lightbox{align-items:center;}}
.lb-panel{
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:28px 28px 0 0;
  transform:translateY(40px);transition:transform .45s var(--ease);
  scrollbar-width:none;
}
.lb-panel::-webkit-scrollbar{display:none;}
.lightbox.open .lb-panel{transform:translateY(0);}
@media(min-width:760px){.lb-panel{border-radius:28px;}}
.lb-media{position:relative;overflow:hidden;height:var(--lb-height,50vh);max-height:70vh;min-height:220px;background:#000;}
.lb-media::after{content:"";position:absolute;inset-inline:0;bottom:0;height:70px;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);pointer-events:none;}
.lb-media video.lb-frame,.lb-gallery-track video{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:start;background:#000;}
.lb-media img{width:100%;height:100%;object-fit:contain;object-position:var(--lb-obj-pos,center);}
/* پاپ‌آپ نمونه‌کار: عکس اصلی + هر عکس گالری، به‌صورت افقی قابل اسکرول/سوایپ */
.lb-gallery-track{
  display:flex;width:100%;height:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.lb-gallery-track::-webkit-scrollbar{display:none;}
.lb-gallery-track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;object-position:var(--lb-obj-pos,center);scroll-snap-align:start;}
.lb-gallery-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:100px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
}
.lb-gallery-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:all .25s var(--ease);flex:0 0 auto;}
.lb-gallery-dots span.active{width:16px;border-radius:100px;background:#fff;}
.lb-gallery-dots:empty{display:none;}
/* prev/next overlay arrows on the popup image — right button = قبلی (site's RTL convention), left = بعدی */
.lb-gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;border-radius:50%;padding:0;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;
}
.lb-gallery-arrow:hover{background:var(--accent);color:#0a0a0a;}
.lb-gallery-arrow svg{width:16px;height:16px;}
.lb-gallery-prev{right:14px;}
.lb-gallery-next{left:14px;}
.lb-close{
  position:absolute;top:14px;left:14px;z-index:3;
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;color:#fff;
  border:1px solid rgba(255,255,255,.15);
}
.lb-hq-btn{
  position:absolute;top:14px;right:14px;z-index:3;
  padding:7px 14px;border-radius:100px;font-size:11.5px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);color:#fff;
  border:1px solid rgba(255,255,255,.2);cursor:pointer;
}
.hq-viewer{
  position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.94);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.hq-viewer.open{display:flex;}
.hq-viewer img{max-width:100%;max-height:100%;object-fit:contain;display:none;}
.hq-viewer-loading{color:#fff;font-size:13px;}
.hq-viewer-close{
  position:absolute;top:18px;left:18px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;color:#fff;
  border:1px solid rgba(255,255,255,.15);cursor:pointer;
}
.lb-body{padding:18px 22px 26px;}
.lb-tags{display:flex;gap:8px;margin-bottom:12px;}
.lb-tags span{font-size:10.5px;padding:5px 12px;border-radius:100px;background:var(--accent-dim);color:var(--accent);border:1px solid rgba(160,240,11,.3);}
.lb-title{font-size:21px;margin-bottom:10px;}
.lb-text{font-size:13.5px;color:var(--text-dim);margin-bottom:18px;}
.lb-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
.lb-meta div{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;}
.lb-meta b{display:block;font-size:12.5px;color:var(--text-faint);margin-bottom:4px;font-weight:400;}
.lb-meta span{font-size:13px;}
.lb-quote{
  position:relative;border-radius:20px;padding:2px;margin-bottom:18px;
  background:conic-gradient(from var(--dmc-angle),transparent 0 60%,var(--accent),#eaffb0,transparent 100%);
  animation:dmc-spin 3.2s linear infinite;
}
.lb-quote-in{border-radius:18px;background:var(--surface-2);padding:14px 16px;text-align:right;}
.lb-quote-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.lb-quote-title{font-size:12.5px;font-weight:700;color:var(--text);}
.lb-quote-stars{color:var(--accent);font-size:13px;letter-spacing:2px;direction:ltr;}
.lb-quote-text{font-size:13px;line-height:1.9;color:var(--text-dim);text-align:right;}
@media(prefers-reduced-motion:reduce){.lb-quote{animation:none;}}
.lb-videos{margin-bottom:16px;display:flex;flex-direction:column;gap:10px;}
.lb-video-item{width:100%;border-radius:16px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;}
.lb-video-item video{width:100%;max-height:280px;object-fit:cover;display:block;}
.lb-video-item .video-embed-fallback-link{display:flex;align-items:center;justify-content:center;width:100%;height:120px;color:var(--accent);text-decoration:none;font-size:13px;}
.lb-voice{margin-bottom:18px;}
.lb-voice-label{font-size:10.5px;color:var(--text-faint);margin-bottom:8px;display:block;}
.lb-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:48px;border-radius:var(--r-sm);background:var(--accent);color:#0a0a0a;font-size:14px;
  border:none;cursor:pointer;font-family:inherit;font-weight:inherit;
}

/* ================= PORTFOLIO VIDEOS ================= */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.video-card{
  border-radius:var(--r-md);overflow:hidden;background:#000;position:relative;
  border:1px solid var(--border);box-shadow:var(--shadow-card);
  aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;
}
.video-card video{width:100%;height:100%;object-fit:cover;background:#000;}
.video-card .video-embed-fallback-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--accent);text-decoration:none;font-size:13px;background:#000;}
/* Reels-style minimal player: no native browser control bar (no timeline, no
   download/speed/PiP buttons) — just a centered play icon that hides once the
   video is playing and reappears when it's paused, tapping anywhere toggles it. */
.reel-video-wrap{position:relative;width:100%;height:100%;}
.reel-play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.reel-video-wrap.is-playing .reel-play-btn{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.85);}
/* Aparat/YouTube's own player is built to fill a ~16:9 box; forcing it into a taller
   or shorter shape is what breaks their layout and playback (and leaves an ugly black
   gap). So the wrapper always keeps its natural 16:9 shape and just centers inside
   whatever outer box it's placed in, with our own black filling the leftover space —
   reads as intentional letterboxing instead of a broken embed. */
.video-embed-wrap{position:relative;width:100%;aspect-ratio:16/9;max-height:100%;margin:auto;}
.video-embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-card-body{padding:14px 16px 16px;}
.video-card-body h3{font-size:14px;margin-bottom:4px;}
.video-card-body p{font-size:12px;color:var(--text-dim);line-height:1.6;}

/* ================= ABOUT ================= */
.about-box{
  position:relative;border-radius:var(--r-lg);padding:2px;
  background:linear-gradient(160deg,#000,var(--border-fade));
  box-shadow:var(--shadow-card);
}
.about-inner{
  border-radius:calc(var(--r-lg) - 2px);
  background:radial-gradient(120% 120% at 50% 0%,#141414 0%,#0a0a0a 70%);
  padding:34px 26px 30px;text-align:center;
}
.about-portrait{
  width:88px;height:88px;border-radius:50%;overflow:hidden;
  margin:0 auto 18px;border:1px solid var(--border-soft);
}
.about-portrait img{width:100%;height:100%;object-fit:cover;}
.about-inner h3{font-size:22px;margin-bottom:14px;}
.about-inner p{font-size:13.5px;color:var(--text-dim);max-width:400px;margin:0 auto 22px;}
.tag-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:26px;}
.tag-row span{font-size:11.5px;padding:7px 14px;border-radius:100px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);}
.stat-row{display:flex;justify-content:center;gap:0;border-top:1px solid var(--border);padding-top:22px;}
.stat-row .stat{flex:1;text-align:center;border-left:1px solid var(--border);}
.stat-row .stat:last-child{border-left:none;}
.stat-num{font-size:22px;color:var(--accent);display:block;}
.stat-label{font-size:11px;color:var(--text-faint);margin-top:4px;}

@media(min-width:900px){
  .about-inner{padding:38px 30px 34px;}
}

/* ================= PROCESS ================= */
.process-list{display:flex;flex-direction:column;gap:14px;}
.process-step{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:20px;padding:20px;box-shadow:var(--shadow-card);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s var(--ease);
}
.process-step:hover{border-color:var(--border-fade);transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}
.process-num{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--accent-dim);border:1px solid rgba(160,240,11,.35);
  display:flex;align-items:center;justify-content:center;
  font-family:'Abar','Vazirmatn',Tahoma,sans-serif;font-size:16px;color:var(--accent);
}
.process-body h3{font-size:15px;margin-bottom:8px;}
.process-body p{font-size:13px;color:var(--text-dim);}

/* ================= TESTIMONIALS ================= */
.t-scroll{
  display:flex;gap:14px;overflow-x:auto;padding:6px 20px 20px;margin:0 -20px;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.t-scroll::-webkit-scrollbar{display:none;}
.wide .t-scroll{margin:0;padding:6px 0 20px;}
.t-card{
  flex:0 0 auto;width:78vw;max-width:280px;min-width:0;overflow:hidden;scroll-snap-align:start;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:22px;padding:22px;position:relative;
  box-shadow:var(--shadow-card);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s var(--ease);
}
.t-card:hover{border-color:var(--border-fade);transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.t-card::before{
  content:"”";position:absolute;top:10px;left:18px;
  font-family:Georgia,serif;font-size:44px;color:var(--accent-dim);line-height:1;
}
.t-stars{color:var(--accent);font-size:13px;letter-spacing:2px;margin-bottom:12px;position:relative;}
.t-quote{font-size:13.5px;color:var(--text-dim);margin-bottom:20px;min-height:76px;}
.t-person{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;}
.t-id{display:flex;align-items:center;gap:10px;min-width:0;}
.t-avatar{width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-dim);flex:0 0 auto;overflow:hidden;}
.t-avatar img{width:100%;height:100%;object-fit:cover;}
.t-name{font-size:13px;}
.t-loc{font-size:11px;color:var(--text-faint);}
.t-id:has(~ .voice-mini.open){opacity:0;pointer-events:none;position:absolute;}

/* voice player — one shared component, reused inside testimonial cards and portfolio cards.
   Collapsed: just a small play-icon toggle. Open: expands to fill the row with a
   waveform, elapsed time and a playback-speed control. */
.voice-mini{position:relative;flex:0 0 auto;display:flex;align-items:center;}
.voice-mini.open{flex:1 1 0;min-width:0;max-width:100%;}
.vm-toggle{
  position:relative;width:32px;height:32px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-shadow:0 3px 10px -2px rgba(0,0,0,.65),0 0 0 4px rgba(160,240,11,.14);
  transition:transform .3s var(--ease);
  animation:vm-pulse 2.6s ease-in-out infinite;
}
.vm-toggle::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,rgba(0,0,0,.55),transparent 40%,rgba(0,0,0,.55) 80%);
  opacity:.7;
}
.vm-toggle:hover{transform:scale(1.1);}
@keyframes vm-pulse{
  0%,100%{box-shadow:0 3px 10px -2px rgba(0,0,0,.65),0 0 0 4px rgba(160,240,11,.14);}
  50%{box-shadow:0 3px 14px -2px rgba(0,0,0,.7),0 0 0 8px rgba(160,240,11,.05);}
}
.vm-toggle svg{width:12px;height:12px;}
.voice-mini.open .vm-toggle{display:none;}
.vm-panel{display:none;align-items:center;gap:8px;width:100%;min-width:0;max-width:100%;}
.voice-mini.open .vm-panel{display:flex;}
.vm-play{
  width:30px;height:30px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.vm-play svg{width:11px;height:11px;}
@media(max-width:360px){.vm-panel{gap:5px;}.vm-speed{padding:3px 5px;}.vm-time{min-width:22px;}}
.vm-wave{flex:1 1 0;min-width:0;height:22px;display:flex;align-items:center;gap:2px;cursor:pointer;overflow:hidden;}
.vm-wave span{
  flex:1;background:var(--border-fade);border-radius:2px;min-width:2px;
  transition:background .3s;height:20%;
}
.vm-wave span.played{background:var(--accent);}
.vm-time{font-size:10px;color:var(--text-faint);min-width:26px;text-align:left;font-variant-numeric:tabular-nums;flex:0 0 auto;}
.vm-speed{
  flex:0 0 auto;font-size:10px;color:var(--text-dim);background:var(--surface);
  border:1px solid var(--border);border-radius:100px;padding:3px 7px;
}
.vm-close{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--text-dim);background:var(--surface);
}
.vm-close svg{width:10px;height:10px;}
/* over a photo (portfolio overlay) — light/translucent variant for legibility on dark image gradient */
.pf-overlay .vm-wave span{background:rgba(255,255,255,.28);}
.pf-overlay .vm-wave span.played{background:var(--accent);}
.pf-overlay .vm-time{color:rgba(255,255,255,.8);}
.pf-overlay .vm-speed{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25);}
.pf-overlay .vm-close{color:#fff;background:rgba(255,255,255,.15);}


/* ================= JOURNAL ================= */
.j-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.j-card{
  display:block;background:var(--surface-2);border:1px solid var(--border);
  border-radius:20px;padding:12px 12px 11px;
  box-shadow:var(--shadow-card);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s var(--ease);
}
.j-card:hover{border-color:var(--border-fade);transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}
/* photo on the right (3:4); the text block beside it is exactly as tall as the photo and never taller */
.j-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start;}
.j-thumb{width:112px;aspect-ratio:3/4;height:auto;border-radius:14px;overflow:hidden;position:relative;align-self:start;}
.j-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.75);}
.j-body{position:relative;overflow:hidden;min-width:0;contain:size;align-self:stretch;}
.j-cat{font-size:10px;color:var(--accent);margin-bottom:4px;display:block;line-height:1.5;}
.j-title{font-size:14.5px;margin:0 0 5px;line-height:1.6;font-weight:700;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.j-excerpt{font-size:12px;line-height:1.9;color:var(--text-faint);}
.j-meta{display:flex;flex-wrap:nowrap;align-items:center;gap:16px;margin-top:11px;padding-top:10px;border-top:1px solid var(--border);font-size:11px;color:var(--text-faint);}

/* ================= JOURNAL DETAIL PAGE ================= */
.journal-body{font-size:14.5px;line-height:2;color:var(--text-dim);}
.journal-body p{margin-bottom:18px;}
.jp-h2{font-size:18px;color:var(--text);margin:32px 0 14px;line-height:1.5;}
.hp-field{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none;} /* was left:-9999px — in RTL that stretched the page ~10000px wide on mobile (horizontal scroll + off-screen fixed header/nav) */

.post-nav{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:400px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  z-index:40;padding-bottom:env(safe-area-inset-bottom);
}
.post-nav-icon{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  box-shadow:var(--shadow-card);cursor:pointer;font-family:inherit;
  transition:transform .2s var(--ease),border-color .2s,color .2s;
}
.post-nav-icon:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);}
.post-nav-icon svg{width:20px;height:20px;}
/* the call/booking button in the post's bottom bar: its own class + id (#postCallBtn), so styling
   the back button (.post-nav-icon / #postBackBtn) never touches it */
.post-nav-call{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  box-shadow:var(--shadow-card);cursor:pointer;font-family:inherit;
  transition:transform .2s var(--ease),border-color .2s,color .2s;
}
.post-nav-call:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);}
.post-nav-call svg{width:20px;height:20px;}
.post-nav-cta{
  flex:1 1 60%;height:52px;border-radius:var(--r-sm);
  background:#0a0a0a;border:1px solid rgba(255,255,255,.14);color:var(--text);
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  box-shadow:0 10px 34px -10px rgba(160,240,11,.4);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.post-nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(160,240,11,.55);}

/* ================= BOOKING ================= */
.book-box{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:26px 22px 30px;
  box-shadow:var(--shadow-card);
}
.f-row{margin-bottom:16px;}
.f-row label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:8px;}
.f-control{
  width:100%;height:50px;border-radius:14px;background:var(--surface);
  border:1px solid var(--border-soft);color:var(--text);padding:0 16px;font-size:13.5px;
  transition:border-color .3s,box-shadow .3s;
}
.f-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
textarea.f-control{height:auto;min-height:96px;padding:14px 16px;resize:vertical;line-height:1.7;}
select.f-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23a3a3a0' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 16px center;}
.f-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.f-file{
  border:1px dashed var(--border-fade);border-radius:14px;padding:20px 14px;
  text-align:center;font-size:12px;color:var(--text-faint);cursor:pointer;
  transition:border-color .3s,color .3s;position:relative;
}
.f-file:hover{border-color:var(--accent);color:var(--accent);}
.f-file input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.f-file b{display:block;color:var(--text-dim);font-size:12.5px;margin-bottom:4px;font-weight:400;}
.f-submit{
  width:100%;height:52px;border-radius:var(--r-sm);background:var(--accent);color:#0a0a0a;
  font-size:14.5px;margin-top:6px;transition:transform .3s var(--ease);
}
.f-submit:hover{transform:translateY(-2px);}
.f-disclaimer{font-size:11.5px;color:var(--text-faint);text-align:center;margin-top:14px;}

/* ================= BOOKING WIZARD ================= */
.bk-progress{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px;}
.bk-progress-dot{width:8px;height:8px;border-radius:50%;background:var(--border-fade);transition:all .3s var(--ease);}
.bk-progress-dot.active{width:24px;border-radius:100px;background:var(--accent);}
.bk-progress-dot.done{background:var(--accent);opacity:.45;width:8px;}
.bk-step{display:none;}
.bk-step.active{display:block;animation:bk-fade-in .35s var(--ease);}
@keyframes bk-fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.bk-step-title{font-size:14.5px;color:var(--text);margin-bottom:16px;font-weight:600;}
.bk-optional-tag{font-size:11px;color:var(--text-faint);font-weight:normal;}
.bk-nav{display:flex;gap:10px;margin-top:22px;}
.bk-btn-next,.bk-btn-back,.bk-btn-submit{
  flex:1;padding:13px;border-radius:var(--r-sm);font-size:14px;font-weight:bold;
  cursor:pointer;border:none;font-family:inherit;transition:transform .3s var(--ease),box-shadow .3s;
}
.bk-btn-next,.bk-btn-submit{background:var(--accent);color:#0a0a0a;}
.bk-btn-next:hover,.bk-btn-submit:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(160,240,11,.4);}
.bk-btn-back{background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border);flex:0 0 auto;padding:13px 20px;}
.bk-btn-back:hover{color:var(--text);}
.f-success{
  display:none;text-align:center;padding:30px 10px;
}
.f-success.show{display:block;}
.f-success .ok-icon{
  width:56px;height:56px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--accent);
}
.f-success h4{font-size:17px;margin-bottom:8px;}
.f-success p{font-size:13px;color:var(--text-dim);}
.tc-box{
  margin-top:18px;padding:16px;border-radius:16px;
  background:var(--accent-dim);border:1px solid rgba(160,240,11,.35);
}
.tc-label{font-size:11.5px;color:var(--text-dim);display:block;margin-bottom:6px;}
.tc-code{font-family:var(--en-font);font-size:20px;letter-spacing:.06em;color:var(--accent);direction:ltr;unicode-bidi:isolate;}

.track-banner{
  width:100%;display:flex;align-items:center;gap:14px;
  padding:16px 18px;margin-bottom:20px;border-radius:var(--r-sm);
  background:linear-gradient(135deg, var(--accent-dim), var(--surface-2) 65%);
  border:1px solid rgba(160,240,11,.32);
  font-family:inherit;color:inherit;text-align:right;cursor:pointer;
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.track-banner:hover{transform:translateY(-2px);border-color:rgba(160,240,11,.6);box-shadow:0 10px 30px -12px rgba(160,240,11,.35);}
.track-banner-icon{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#0a0a0a;
}
.track-banner-text{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0;}
.track-banner-text strong{font-size:14.5px;}
.track-banner-text span{font-size:12px;color:var(--text-dim);line-height:1.6;}
.track-banner-arrow{flex:none;color:var(--accent);}

.track-form{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.track-form .f-control{margin:0;}
.track-result{
  margin-top:16px;padding:14px 16px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border);
  font-size:13px;line-height:2;color:var(--text-dim);
}
.track-result b{color:var(--text);font-weight:600;}
.track-result .tr-status{display:block;color:var(--accent);font-size:14.5px;font-weight:700;margin-bottom:6px;}
.track-result.error{color:#ff8a8a;border-color:rgba(255,138,138,.3);}
@media(min-width:900px){
  .book-box{padding:30px 26px 34px;}
}


/* ================= FINAL CTA ================= */
.final-cta{
  text-align:center;border-radius:var(--r-lg);
  padding:44px 24px;
  background:radial-gradient(120% 140% at 50% 0%,rgba(160,240,11,.14),transparent 60%),var(--surface-2);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
}
.final-cta h3{font-size:24px;margin-bottom:12px;}
.final-cta p{font-size:13.5px;color:var(--text-dim);max-width:320px;margin:0 auto 24px;}

/* ================= FOOTER ================= */
footer{padding:70px 0 26px;}
.foot-top{text-align:center;margin-bottom:34px;}
.foot-brand{font-size:19px;margin-bottom:8px;}
.foot-tag{font-size:12.5px;color:var(--text-faint);}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:26px 0;font-size:12.5px;color:var(--text-dim);}
.foot-social{display:flex;justify-content:center;gap:10px;margin-bottom:30px;}
.foot-social a{width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.foot-contact{text-align:center;font-size:12px;color:var(--text-faint);line-height:2.1;border-top:1px solid var(--border);padding-top:24px;}
.foot-bottom{text-align:center;font-size:11px;color:var(--text-faint);margin-top:20px;}

/* ================= BOTTOM MOBILE NAV ================= */
.bottom-nav{
  position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:40; /* below the full-screen menu (49) */
  display:flex;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.bottom-nav.show{opacity:1;visibility:visible;transform:translateY(0);}
/* compact pill (same surface as the header) */
.bottom-nav-inner{
  display:flex;align-items:center;gap:4px;
  padding:8px;border-radius:100px;
  background:radial-gradient(130% 200% at 0% 100%, rgba(160,240,11,.16), transparent 55%), rgba(8,8,8,.72);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(160,240,11,.14);
}
.bn-item{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:var(--text-faint);
  transition:color .3s;
}
/* just tint the icon on the active section — a filled accent circle competed too
   much for attention with the "رزرو نوبت" button */
.bn-item.active{color:var(--accent);}
.bn-item svg{width:18px;height:18px;}
.bn-cta{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  height:40px;padding:0 18px;margin-inline-start:2px;border:0;border-radius:100px;
  background:var(--accent);color:#0a0a0a;font-size:12.5px;font-weight:400;
  font-family:'Abar','Vazirmatn',Tahoma,sans-serif;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 16px -4px rgba(160,240,11,.55);
}

/* magnetic btn desktop only helper class already covered via JS */
/* ================= JALALI DATE PICKER ================= */
/* Rendered as a body-level backdrop overlay (same pattern as .lightbox) rather
   than an absolutely-positioned popup nested in the form — this avoids stacking-
   context issues with later sections, and gives mobile a proper bottom-sheet feel. */
.jdp{position:relative;}
.jdp-trigger{
  width:100%;height:50px;display:flex;align-items:center;gap:10px;
  padding:0 16px;border-radius:14px;border:1px solid var(--border-soft);
  background:var(--surface);color:var(--text-faint);font-size:13.5px;font-family:inherit;
  cursor:pointer;transition:border-color .3s,box-shadow .3s;text-align:right;
}
.jdp-trigger:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.jdp-trigger svg{width:16px;height:16px;flex:0 0 auto;color:var(--text-faint);}
.jdp-trigger.has-value{color:var(--text);}
.jdp-trigger.has-value svg{color:var(--accent);}
.jdp-trigger:hover{border-color:var(--border-fade);}

.jdp-backdrop{
  position:fixed;inset:0;z-index:92;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.jdp-backdrop.open{opacity:1;visibility:visible;}
@media(min-width:760px){ .jdp-backdrop{align-items:center;} }

.jdp-sheet{
  width:100%;max-width:360px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:22px 22px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px -10px rgba(0,0,0,.6);
  transform:translateY(24px);opacity:0;
  transition:transform .4s var(--ease),opacity .35s var(--ease);
}
.jdp-backdrop.open .jdp-sheet{transform:translateY(0);opacity:1;}
@media(min-width:760px){
  .jdp-sheet{border-radius:22px;margin:0 20px;box-shadow:0 24px 60px -12px rgba(0,0,0,.6);}
}

.jdp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.jdp-month-label{font-size:14.5px;font-weight:bold;color:var(--text);}
.jdp-nav{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.jdp-nav:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent);}
.jdp-nav svg{width:14px;height:14px;}
.jdp-close{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:16px;}
.jdp-close:hover{color:var(--text);}
.jdp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;}
.jdp-weekdays span{text-align:center;font-size:11px;color:var(--text-faint);padding:6px 0;}
.jdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.jdp-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:9px;border:none;background:transparent;color:var(--text-dim);
  font-size:13.5px;cursor:pointer;font-family:inherit;transition:background .2s,color .2s;
}
.jdp-day:hover{background:var(--surface);color:var(--text);}
.jdp-day.today{color:var(--accent);font-weight:bold;}
.jdp-day.selected{background:var(--accent);color:#0a0a0a;font-weight:bold;}
.jdp-day.empty{cursor:default;pointer-events:none;}
.jdp-day.disabled,.jdp-day:disabled{color:var(--text-faint);opacity:.32;cursor:not-allowed;pointer-events:none;}
.jdp-nav:disabled{opacity:.3;cursor:not-allowed;pointer-events:none;}
.jdp-nav:disabled:hover{background:var(--surface);color:var(--text-dim);border-color:var(--border);}
.jdp-foot{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.jdp-today,.jdp-clear{flex:1;padding:11px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-size:12.5px;cursor:pointer;font-family:inherit;transition:color .2s,border-color .2s;}
.jdp-today:hover,.jdp-clear:hover{color:var(--text);border-color:var(--border-fade);}

/* ================= CHOICE MODAL (call now vs. fill the form) ================= */
.choice-backdrop{
  position:fixed;inset:0;z-index:93;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.choice-backdrop.open{opacity:1;visibility:visible;}
@media(min-width:760px){ .choice-backdrop{align-items:center;} }
.choice-sheet{
  width:100%;max-width:380px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:22px 22px 0 0;
  padding:24px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px -10px rgba(0,0,0,.6);
  transform:translateY(24px);opacity:0;
  transition:transform .4s var(--ease),opacity .35s var(--ease);
  text-align:center;position:relative;
}
.choice-backdrop.open .choice-sheet{transform:translateY(0);opacity:1;}
@media(min-width:760px){ .choice-sheet{border-radius:22px;margin:0 20px;} }
.choice-close{
  position:absolute;top:14px;left:14px;width:30px;height:30px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.choice-sheet h3{font-size:16px;margin:6px 0 8px;}
.choice-sheet p{font-size:13px;color:var(--text-dim);margin-bottom:22px;line-height:1.8;}
.choice-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:50px;border-radius:var(--r-sm);font-size:14px;font-weight:bold;
  cursor:pointer;border:none;font-family:inherit;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.choice-btn + .choice-btn{margin-top:10px;}
.choice-btn:hover{transform:translateY(-2px);}
.choice-btn-primary{background:var(--accent);color:#0a0a0a;box-shadow:0 10px 24px -8px rgba(160,240,11,.4);}
.choice-btn-secondary{background:var(--surface);border:1px solid var(--border);color:var(--text);}

/* ============ EXPLORE ENTRY BUTTON (inside the normal videos section) ============ */
.explore-entry-btn{
  display:inline-block;margin-top:12px;font-size:12.5px;color:var(--accent);
  text-decoration:none;border:1px solid var(--border);border-radius:100px;padding:7px 16px;
  transition:border-color .25s var(--ease);
}
.explore-entry-btn:hover{border-color:var(--accent);}

/* ============ EXPLORE PAGE (grid + fullscreen reel feed) ============ */
.explore-body{background:#000;min-height:100vh;}
.explore-topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(5,5,5,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.explore-shell-inner{
  max-width:var(--explore-w,460px);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
}
.explore-back-site{color:var(--text-dim);text-decoration:none;font-size:13px;}
.explore-topbar-title{font-weight:700;color:var(--text);}
.explore-empty{padding:80px 20px;text-align:center;color:var(--text-dim);}

.explore-grid{
  max-width:var(--explore-w,460px);margin:0 auto;background:var(--bg);
  display:grid;grid-template-columns:repeat(3,1fr);
  --ex-gap:3px;
  grid-auto-rows:calc((min(100vw, var(--explore-w,460px)) - 4 * var(--ex-gap)) / 3); /* square cells at any width */
  gap:var(--ex-gap);padding:var(--ex-gap);grid-auto-flow:dense;padding-bottom:90px;
}
.explore-tile{position:relative;overflow:hidden;background:var(--surface-2);cursor:pointer;}
.explore-tile.tile-tall{grid-row:span 2;}
/* Instagram-style rhythm, every 10 posts = two blocks of 5 (one tall tile + four squares):
   block 1: tall tile on the LEFT, block 2: tall tile on the RIGHT, then it repeats.
   (RTL grid: column 3 is the physical left, column 1 the physical right.) */
/* Every THREE rows hold exactly two tall tiles, then the pattern starts over:
     row 1: tall on the LEFT (rows 1-2) + 2 squares
     row 2: ...left tall continues · square · tall on the RIGHT (rows 2-3)
     row 3: square · square · ...right tall continues      <- the left cell of row 3 is a plain square
   Posts in order: 1,2 squares · 3 = tall left · 4 = tall right · 5,6,7 squares · (repeat every 7 posts).
   RTL grid: column 3 is the physical left, column 1 the physical right. */
.explore-grid > .explore-tile:nth-child(7n+3){grid-column:3;grid-row:span 2;}
.explore-grid > .explore-tile:nth-child(7n+4){grid-column:1;grid-row:span 2;}
.explore-tile img,.explore-tile video{width:100%;height:100%;object-fit:cover;display:block;}
.explore-tile .tile-photo{position:absolute;top:8px;inset-inline-end:8px;width:24px;height:24px;border-radius:8px;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.explore-tile .tile-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;opacity:.4;}
.explore-tile .tile-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:18px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);opacity:.85;pointer-events:none;
}
.explore-tile .tile-likes{
  position:absolute;bottom:6px;right:6px;font-size:10.5px;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7);display:flex;align-items:center;gap:3px;
}

.explore-modern,body.explore-modern,html.explore-html{background:#000!important;background-image:none!important;}
.explore-modern .page{display:flow-root;} /* the filter bar's top margin must not collapse out of .page and expose the <html> colour */
.explore-modern .explore-grid{background:transparent;position:relative;z-index:1;margin-top:0;}
/* filter pills under the site header: transparent bar, each chip is frosted glass (like the review box
   in the video viewer); the row starts exactly at the header's right edge and scrolls sideways */
.ex-filters{position:sticky;top:82px;z-index:30;margin-top:90px;padding:0 0 8px;background:transparent;pointer-events:none;}
.ex-filters-track{display:flex;gap:8px;overflow-x:auto;
  width:calc(100% - 40px);max-width:400px;margin:0 auto;padding:4px 2px 6px; /* exactly the header's frame: starts at its right edge, scrolls inside it */
  -webkit-overflow-scrolling:touch;scrollbar-width:none;pointer-events:auto;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26px);mask-image:linear-gradient(to right,transparent 0,#000 26px);}
.ex-filters-track::-webkit-scrollbar{display:none;}
.ex-chip{flex:0 0 auto;padding:7px 16px;border-radius:100px;white-space:nowrap;
  /* frosted glass: darker + much blurrier than before so the videos behind never show through the label */
  background:rgba(12,12,12,.58);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  color:#fff;font-family:'Abar','Vazirmatn',Tahoma,sans-serif;font-size:12px;font-weight:400;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.2);transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease);}
.ex-chip:active{transform:scale(.96);}
.ex-chip{cursor:pointer;}
.ex-chip.active{color:var(--accent);border-color:var(--accent);background:rgba(12,12,12,.7);}
.ex-style-btn{display:inline-flex;align-items:center;gap:6px;}
.ex-style-btn svg{transition:transform .25s var(--ease);}
.ex-style-btn.open svg{transform:rotate(180deg);}
/* style drop-down: fixed so the chip row's sideways scrolling can't clip it */
.ex-style-menu{position:fixed;z-index:60;min-width:170px;max-width:calc(100vw - 24px);max-height:min(52vh,360px);overflow-y:auto;
  padding:6px;border-radius:18px;background:rgba(18,18,18,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);}
.ex-style-menu[hidden]{display:none;}
.ex-menu-item{display:block;padding:9px 14px;border-radius:12px;font-family:'Abar','Vazirmatn',Tahoma,sans-serif;font-size:12px;color:var(--text-dim);text-decoration:none;white-space:nowrap;}
.ex-menu-item:active{background:rgba(255,255,255,.06);}
.ex-menu-item.active{color:var(--accent);background:rgba(160,240,11,.08);}
/* AJAX loading: dim the old tiles, spinner in the middle, new tiles arrange in one after another */
.explore-grid{transition:opacity .2s;}
body.ex-loading .explore-grid{opacity:.28;pointer-events:none;}
.ex-loader{position:fixed;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;z-index:70;pointer-events:none;
  border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--accent);opacity:0;visibility:hidden;transition:opacity .2s;}
body.ex-loading .ex-loader{opacity:1;visibility:visible;animation:vvSpin .8s linear infinite;}
@keyframes exTileIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
.explore-grid.is-fresh .explore-tile{animation:exTileIn .42s var(--ease) both;animation-delay:calc(var(--i,0) * 38ms);}
@media(prefers-reduced-motion:reduce){.explore-grid.is-fresh .explore-tile{animation:none;}}
.explore-filter-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:20;
  width:100%;max-width:var(--explore-w,460px);display:flex;
  background:rgba(10,10,10,.92);backdrop-filter:blur(10px);border-top:1px solid var(--border);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
}
.explore-filter-nav a{
  flex:1;text-align:center;padding:8px 4px;border-radius:100px;font-size:12.5px;
  color:var(--text-dim);text-decoration:none;
}
.explore-filter-nav a.active{background:var(--accent-dim);color:var(--accent);font-weight:700;}

.reel-feed{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--explore-w,460px);z-index:600;background:#000;display:none;
  box-shadow:0 0 60px 10px rgba(0,0,0,.6);
}
.reel-feed.open{display:block;}
.reel-top-bar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--explore-w,460px);
  z-index:2;padding:14px 16px calc(14px + env(safe-area-inset-top,0px));
  display:flex;align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);
}
.reel-back{background:none;border:0;color:#fff;font-size:13.5px;cursor:pointer;padding:6px 10px;}
.reel-scroller{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.reel-scroller::-webkit-scrollbar{display:none;}
.reel-slide{
  height:100%;scroll-snap-align:start;position:relative;
  display:flex;align-items:center;justify-content:center;background:#000;
}
.reel-slide-media{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;}
.reel-slide-media video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#000;}
.reel-slide-actions{
  position:absolute;bottom:90px;left:14px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;
}
.reel-like{background:none;border:0;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;}
.reel-like-heart{font-size:30px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));transition:transform .2s var(--ease);}
.reel-like.liked .reel-like-heart{color:var(--accent);transform:scale(1.15);}
.reel-like-count{font-size:11px;}
.reel-slide-title{
  position:absolute;bottom:26px;right:16px;left:70px;z-index:2;color:#fff;font-size:13px;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}

/* ============ VIDEO TILES + FULLSCREEN VIEWER (shared: home page & Explore) ============ */
.vtile{position:relative;overflow:hidden;cursor:pointer;background:var(--surface-2);}
.vtile img,.vtile video{width:100%;height:100%;object-fit:cover;display:block;}
.vtile .tile-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;opacity:.4;}
.vtile .tile-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.vtile .tile-likes{position:absolute;bottom:6px;right:6px;font-size:10.5px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);}
.vtile-title{position:absolute;inset-inline:0;bottom:0;padding:24px 12px 10px;font-size:12.5px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);}

.vv{position:fixed;inset:0;height:100vh;height:100dvh;z-index:900;background:#000;display:none;}
@supports not (height:100dvh){.vv{height:var(--vvh,100vh);}}
.vv.open{display:block;}
.vv-frame{position:absolute;top:0;left:50%;height:100%;transform:translateX(-50%);width:100%;max-width:460px;background:#000;overflow:hidden;}
.vv-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.vv-stage .reel-video-wrap{width:100%;height:100%;}
.vv-stage video{width:100%;height:100%;object-fit:contain;background:#000;display:block;}
.vv-stage video.vv-cover{object-fit:cover;}
/* ---- SVG icons (replace text symbols that become emoji on iPhones) ---- */
.site-ico{display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;flex:none;line-height:1;vertical-align:middle;}
.site-ico svg,.site-ico img{width:100%;height:100%;display:block;object-fit:contain;}
.tile-play .site-ico{width:20px;height:20px;}
.vtile .tile-play .site-ico{width:20px;height:20px;margin-inline-start:2px;}
.tile-likes .site-ico{width:13px;height:13px;}
.reel-play-btn .site-ico{width:24px;height:24px;margin-inline-start:2px;}
.lb-main-play .site-ico{width:28px;height:28px;}
.lb-video-btn-icon .site-ico{width:14px;height:14px;}
.vv-heart .site-ico{width:24px;height:24px;}
.tile-fallback .site-ico{width:34px;height:34px;}
.vv-ph .site-ico{width:46px;height:46px;}
.foot-social a .site-ico,.menu-social a .site-ico{width:19px;height:19px;}
.vv-imgwrap{position:relative;width:100%;height:100%;background:#000;}
.vv-imgwrap .vv-photo{position:absolute;inset:0;opacity:0;transition:opacity .35s;}
.vv-imgwrap .vv-photo.active{opacity:1;}
/* story-style bars: one per photo of the post */
.vv-dots{position:absolute;z-index:3;top:calc(6px + env(safe-area-inset-top,0px));inset-inline:14px;display:flex;gap:4px;pointer-events:none;}
.vv-dot{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);}
.vv-dot.seen,.vv-dot.active{background:rgba(255,255,255,.9);}
.vv-dot.active{background:var(--accent,#a0f00b);}
/* ---- smooth playback on weaker phones ----
   1) no backdrop blur anywhere on top of a playing video (very expensive on weak GPUs)
   2) while the fullscreen viewer is open, everything behind it is hidden from painting
      (page, blurred menus, noise overlay, glows, lightbox) and its animations are paused */
.vv *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
body.vv-open > :not(.vv):not(script):not(style){visibility:hidden!important;}
body.vv-open > :not(.vv) *{animation-play-state:paused!important;}
/* buffering spinner (appears only if loading takes longer than ~0.4s, so it never flickers) */
@keyframes vvSpin{to{transform:rotate(360deg);}}
@keyframes vvSpinIn{from{opacity:0;}to{opacity:1;}}
.vv .reel-video-wrap.is-buffering::after{
  content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;z-index:3;pointer-events:none;
  border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;opacity:0;
  animation:vvSpinIn .2s .4s forwards,vvSpin .8s linear infinite;
}
.vv .reel-video-wrap.is-buffering .reel-play-btn{opacity:0!important;}
/* ultra-lite: switched on automatically on phones that visibly drop frames while playing */
.vv-ultralite .vv-frame::before,.vv-ultralite .vv-frame::after{display:none;}
.vv-ultralite *{box-shadow:none!important;filter:none!important;}
.vv-ultralite :not(.vv-track){transition:none!important;}
.vv-ultralite .vv-track{will-change:auto;}
.vv-ultralite .vv-review{background:rgba(0,0,0,.78);}
.vv-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(0,0,0,.45);color:#fff;font-size:24px;line-height:1;cursor:pointer;
}
.vv-prev{right:8px;} .vv-next{left:8px;}
.vv-back,.vv-like{
  position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:3;border:0;cursor:pointer;color:#fff;
  background:rgba(0,0,0,.5);border-radius:100px;padding:10px 16px;font-size:13.5px;
}
.vv-back{left:14px;}
.vv-like{right:14px;display:flex;align-items:center;gap:6px;}
.vv-heart{font-size:20px;line-height:1;}
.vv-like.liked .vv-heart{color:var(--accent);}
.vv-title{position:absolute;inset-inline:16px;bottom:80px;z-index:2;color:#fff;font-size:13px;text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none;}
/* while the viewer is open the animated blurred background behind it is pure wasted GPU work */
body.vv-open{overflow:hidden;}
body.vv-open .atmosphere{display:none;}

/* viewer: vertical-scroll transitions + on-screen buttons (project lightbox only) */
.vv{overscroll-behavior:none;touch-action:none;}
.vv-stage.vv-in-next{animation:vvNext .28s var(--ease);}
.vv-stage.vv-in-prev{animation:vvPrev .28s var(--ease);}
@keyframes vvNext{from{transform:translateY(36px);opacity:0}to{transform:none;opacity:1}}
@keyframes vvPrev{from{transform:translateY(-36px);opacity:0}to{transform:none;opacity:1}}
.vv-left{left:8px;} .vv-right{right:8px;}
.tile-likes{display:flex;align-items:center;gap:3px;}

/* attention-grabbing "this project has videos" button, bottom-left of the project image */
.lb-video-btn{
  position:absolute;left:14px;bottom:14px;z-index:4;display:flex;align-items:center;gap:8px;
  padding:9px 16px 9px 10px;border:1px solid rgba(255,255,255,.25);border-radius:100px;cursor:pointer;
  background:rgba(10,10,10,.55);backdrop-filter:blur(8px);color:#fff;font-weight:700;font-size:12.5px;
}
.lb-video-btn-icon{
  width:22px;height:22px;border-radius:50%;background:var(--accent);color:#0a0a0a;
  display:flex;align-items:center;justify-content:center;font-size:10px;animation:lbVideoNudge 1.8s infinite;
}
@keyframes lbVideoNudge{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.25)}}

/* ---- Instagram-style viewer: draggable vertical track with neighbours, progress bar ---- */
.vv-stage{overflow:hidden;display:block;}
.vv-track{position:absolute;inset:0;will-change:transform;}
.vv-slide{position:absolute;inset:0;background:#000;}
.vv-slide:nth-child(1){transform:translateY(-100%);}
.vv-slide:nth-child(3){transform:translateY(100%);}
.vv-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.vv-media .reel-video-wrap{width:100%;height:100%;}
.vv-media video,.vv-thumb{width:100%;height:100%;object-fit:contain;background:#000;display:block;}
.vv-media video.vv-cover,.vv-thumb.vv-cover{object-fit:cover;}
.vv-ph{font-size:40px;opacity:.35;}
.vv-slide-title{position:absolute;inset-inline:16px;bottom:84px;z-index:2;color:#fff;font-size:13px;text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none;}
.vv-progress{position:absolute;inset-inline:0;bottom:env(safe-area-inset-bottom,0px);height:22px;z-index:5;cursor:pointer;display:flex;align-items:flex-end;touch-action:none;}
.vv-progress-bar{width:100%;height:3px;background:rgba(255,255,255,.28);transition:height .15s;}
.vv-progress:hover .vv-progress-bar,.vv-progress:active .vv-progress-bar{height:6px;}
.vv-progress-fill{height:100%;width:0;background:#fff;}
.explore-entry-wrap{text-align:center;margin-top:22px;}
.explore-entry-wrap .explore-entry-btn{margin-top:0;}

/* ============ JOURNAL (archive + post) ============ */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--text-dim);margin-bottom:14px;}
.crumbs a{color:var(--text-dim);text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--text-dim);margin-bottom:16px;}
.post-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 18px;margin-bottom:22px;font-size:13.5px;}
.post-toc ol{margin:8px 0 0;padding-inline-start:20px;line-height:2;}
.post-toc a{color:var(--text-dim);text-decoration:none;}
.post-toc a:hover{color:var(--accent);}
.post-pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px;}
.post-pn a{display:block;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);text-decoration:none;font-size:13px;line-height:1.7;}
.post-pn a small{display:block;color:var(--text-dim);font-size:11px;}
.post-pn a[rel=prev]{text-align:left;}
.post-related{margin-top:34px;}
.j-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;}
.j-chips a{padding:6px 14px;border:1px solid var(--border);border-radius:100px;font-size:12.5px;color:var(--text-dim);text-decoration:none;}
.j-chips a.active,.j-chips a:hover{border-color:var(--accent);color:var(--accent);}
.j-card h2.j-title{font-size:14.5px;font-weight:700;margin:0 0 5px;}
.j-date{display:block;margin-top:8px;font-size:11px;color:var(--text-dim);}
.j-meta-i{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
@media(max-width:370px){.j-meta{gap:10px;font-size:10px;}.j-meta-i{gap:4px;}.j-meta-i svg{width:12px;height:12px;}}
.j-meta-i svg{flex:0 0 auto;color:var(--accent);opacity:.85;}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:30px 0 10px;}
.pager a,.pager span{min-width:38px;padding:8px 12px;text-align:center;border:1px solid var(--border);border-radius:100px;font-size:13px;color:var(--text-dim);text-decoration:none;}
.pager .cur{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:700;}
.pager a:hover{border-color:var(--accent);color:var(--accent);}

/* ============ SINGLE JOURNAL POST — redesign ============ */
.post-header{margin-bottom:18px;}
.post-lede{font-size:14.5px;color:var(--text-dim);line-height:1.9;margin:6px 0 14px;}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:12px;color:var(--text-faint);}
.pm-author{display:flex;align-items:center;gap:7px;color:var(--text-dim);}
.pm-avatar{
  width:22px;height:22px;border-radius:50%;background:var(--accent-dim);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
}
.post-hero{width:100%;max-width:420px;height:auto;aspect-ratio:3/4;border-radius:var(--r-md);margin:0 auto 20px;overflow:hidden;}
.post-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;}

.post-media-row{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.post-audio{position:relative;}
.post-audio-label{display:block;margin-top:8px;font-size:11.5px;color:var(--text-faint);text-align:center;}
.post-video{border-radius:var(--r-md);overflow:hidden;background:#000;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;}

.post-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:4px 18px;margin-bottom:24px;font-size:13.5px;overflow:hidden;}
.post-toc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;padding:12px 0;color:var(--text);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
}
.post-toc-arrow{transition:transform .25s var(--ease);color:var(--text-faint);font-size:16px;}
.post-toc.collapsed .post-toc-arrow{transform:rotate(-90deg);}
.post-toc-list{margin:0 0 14px;padding-inline-start:4px;line-height:2.1;list-style:none;}
.post-toc.collapsed .post-toc-list{display:none;}
.post-toc-list li{position:relative;padding-inline-start:16px;}
.post-toc-list li::before{content:"";position:absolute;right:2px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--border-fade);}
.post-toc-list li.toc-h3{padding-inline-start:30px;font-size:12.5px;}
.post-toc-list a{color:var(--text-dim);text-decoration:none;}
.post-toc-list a:hover{color:var(--accent);}

/* the rich-editor body: headings/lists/quotes/code/links/images all themed to match the site */
.journal-body{font-size:15px;line-height:2;color:#fff;}
.journal-body p,.journal-body li,.journal-body span,.journal-body ol,.journal-body ul,.journal-body td,.journal-body th,.journal-body div{color:#fff;}
.jp-rich h1,.jp-rich h2,.jp-rich h3,.jp-rich h4,.jp-rich strong,.jp-rich b{color:#fff;}
.jp-rich article,.jp-rich section,.jp-rich header,.jp-rich footer{display:block;}
.jp-rich section{margin:0 0 8px;}
.jp-rich footer{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);}
.jp-rich p{margin:0 0 18px;}
.jp-rich h2{font-size:19px;color:var(--text);margin:36px 0 14px;line-height:1.6;scroll-margin-top:90px;font-weight:800;}
.jp-rich h3{font-size:16px;color:var(--text);margin:28px 0 12px;line-height:1.6;scroll-margin-top:90px;font-weight:700;}
.jp-rich a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.jp-rich strong{color:var(--text);}
.jp-rich ul,.jp-rich ol{margin:0 0 18px;padding-inline-start:22px;}
.jp-rich li{margin-bottom:8px;}
.jp-rich blockquote{
  margin:20px 0;padding:14px 18px;border-inline-start:3px solid var(--accent);
  background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--text);font-size:14.5px;
}
.jp-rich pre{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;overflow-x:auto;font-size:12.5px;direction:ltr;text-align:left;margin:0 0 18px;}
.jp-rich img{max-width:100%;border-radius:var(--r-md);display:block;margin:20px auto;}
.jp-rich .ql-align-center{text-align:center;}
.jp-rich .ql-align-right{text-align:right;}
.jp-rich .ql-align-left{text-align:left;direction:ltr;}

/* image gallery/slider blocks dropped into the body via the "🖼 گالری" button */
.journal-gallery{margin:22px 0;}
.jg-track{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
}
.jg-track::-webkit-scrollbar{display:none;}
.jg-item{flex:0 0 86%;scroll-snap-align:start;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);position:relative;}
.jg-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.jg-cap{position:absolute;inset-inline:0;bottom:0;padding:18px 12px 8px;font-size:11.5px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);}
.jg-dots{display:flex;justify-content:center;gap:5px;margin-top:10px;}
.jg-dots span{width:5px;height:5px;border-radius:50%;background:var(--border-fade);transition:background .25s,width .25s;}
.jg-dots span.active{background:var(--accent);width:14px;border-radius:4px;}

.post-share{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px;padding-top:20px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-dim);}
.post-share-btns{display:flex;gap:8px;}
.post-share-btns a,.post-share-btns button{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:inherit;
  transition:border-color .2s,color .2s;
}
.post-share-btns a:hover,.post-share-btns button:hover{border-color:var(--accent);color:var(--accent);}
#copyLinkBtn.copied{border-color:var(--accent);color:var(--accent);}

/* ---- viewer info layer: review glass box on top, title + description button + like/back below ---- */
.vv-back,.vv-like{position:static;}
.vv-bottom{
  position:absolute;inset-inline:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:4;
  padding:0 14px;display:flex;flex-direction:column;gap:12px;pointer-events:none;
}
.vv-bottom>*{pointer-events:auto;}
.vv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.vv-info-title{flex:1;min-width:0;color:#fff;font-size:14px;font-weight:700;line-height:1.7;text-shadow:0 1px 8px rgba(0,0,0,.85);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vv-desc-btn{
  flex:none;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.5);color:#fff;border-radius:100px;
  padding:8px 14px;font-family:inherit;font-size:12px;cursor:pointer;
}
.vv-review{
  position:absolute;z-index:4;inset-inline:14px;top:calc(14px + env(safe-area-inset-top,0px));
  padding:10px 14px;border-radius:16px;color:#fff;text-align:right;
  background:rgba(20,20,20,.62);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.vv-review[hidden],.vv-info[hidden],.vv-sheet[hidden]{display:none;}
.vv-review .vv-quote{font-size:12.5px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.vv-review .vv-by{display:none;}
.vv-rv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
.vv-rv-title{font-size:12px;font-weight:700;}
.vv-rv-head .vv-stars{margin:0;direction:ltr;}
.vv-stars{color:var(--accent);font-size:12px;letter-spacing:2px;margin-bottom:2px;}
.vv-sheet{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;background:rgba(0,0,0,.45);touch-action:pan-y;}
.vv-sheet-card{
  position:relative;width:100%;max-height:72%;overflow-y:auto;overscroll-behavior:contain;
  padding:22px 20px calc(24px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;color:#fff;
  background:rgba(18,18,18,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.14);animation:vvSheetUp .28s var(--ease);
}
@keyframes vvSheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.vv-sheet-close{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;}
.vv-sheet-title{font-size:16px;font-weight:800;margin:0 0 10px;padding-inline-end:6px;}
.vv-sheet-desc{font-size:13.5px;line-height:2;color:rgba(255,255,255,.82);white-space:pre-line;margin:0 0 16px;}
.vv-sheet-review{border-top:1px solid rgba(255,255,255,.12);padding-top:14px;}
.vv-sheet-review .vv-quote{font-size:13px;line-height:1.9;}
.vv-sheet-review .vv-by{font-size:11.5px;opacity:.65;margin-top:4px;}
/* "has video" tag, top-centre of a portfolio card's image */
.pf-video-tag{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:100px;font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);pointer-events:none;
}
.pf-video-tag svg{color:var(--accent);}

.post-share{flex-wrap:wrap;}
.post-share-main{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;text-align:right;}
.post-share-text{font-size:12px;white-space:nowrap;text-align:right;}
.post-short{display:block;font-size:12px;color:var(--accent);text-decoration:none;word-break:break-all;text-align:right;}
.post-share-btns{margin-right:auto;} /* icons always start from the left edge, even when they wrap onto their own line */
@media(max-width:420px){.post-share{gap:10px;}.post-share-btns a,.post-share-btns button{width:32px;height:32px;}.post-share-btns{gap:6px;}}
.post-nav-book{background:var(--accent);color:#0a0a0a;border-color:transparent;font-weight:800;box-shadow:0 10px 30px -8px rgba(160,240,11,.55);}

.site-toast{
  position:fixed;left:50%;bottom:92px;transform:translate(-50%,14px);z-index:1000;opacity:0;pointer-events:none;
  padding:11px 18px;border-radius:100px;font-size:13px;font-weight:600;color:#0a0a0a;background:var(--accent);
  box-shadow:0 10px 30px -8px rgba(160,240,11,.5);transition:opacity .25s,transform .25s var(--ease);white-space:nowrap;
}
.site-toast.show{opacity:1;transform:translate(-50%,0);}

/* ---- viewer v3: control layer hugs the video; like/back stacked on the left, text block ~80% on the right ---- */
/* soft black fade at the top and bottom edge of the video, so it dissolves instead of cutting off.
   Kept light on purpose; sits above the video but below the controls (.vv-ui is z-index 2). */
.vv-frame::before,.vv-frame::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;}
.vv-frame::before{top:0;height:84px;background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.26) 38%,rgba(0,0,0,.08) 72%,rgba(0,0,0,0) 100%);}
.vv-frame::after{bottom:0;height:130px;background:linear-gradient(to top,rgba(0,0,0,.58) 0%,rgba(0,0,0,.32) 40%,rgba(0,0,0,.1) 75%,rgba(0,0,0,0) 100%);}
.vv-ui{z-index:2;position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;pointer-events:none;transition:width .2s var(--ease);}
.vv-ui>*{pointer-events:auto;}
.vv-ui>.vv-bottom{pointer-events:none;}
.vv-bottom{position:absolute;inset-inline:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:4;padding:0 14px;display:flex;flex-direction:row;align-items:flex-end;gap:12px;}
.vv-bottom>*{pointer-events:auto;}
.vv-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-shadow:0 1px 8px rgba(0,0,0,.9);}
.vv-info[hidden],.vv-info-title[hidden],.vv-info-desc[hidden],.vv-more[hidden]{display:none;}
.vv-info-title{width:100%;color:#fff;font-size:14px;font-weight:700;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vv-info-desc{margin:0;color:rgba(255,255,255,.85);font-size:12px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vv-more{background:none;border:0;padding:0;color:#fff;font-family:inherit;font-size:12px;font-weight:600;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer;}
.vv-actions{flex:none;display:flex;flex-direction:column;gap:10px;margin-right:auto;}
.vv-like,.vv-back{
  position:static;width:56px;height:56px;padding:0;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);color:#fff;font-family:inherit;font-size:10.5px;cursor:pointer;
}
.vv-heart{font-size:21px;line-height:1;}
.vv-count{font-size:11px;line-height:1;}
.vv-nav{top:50%;}
.vv-ui .vv-progress{left:0;right:0;}
.vv-sheet{pointer-events:auto;}
/* big play button on a project whose main media is a video (project popup) */
.lb-main-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:68px;height:68px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);cursor:pointer;
  background:rgba(0,0,0,.5);color:#fff;font-size:24px;padding-inline-start:4px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* ================= POST COMMENTS ================= */
.post-comments{margin-top:34px;padding-top:22px;border-top:1px solid var(--border);}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.pc-count{font-size:13px;color:var(--text-faint);font-weight:400;}
.pc-add{border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:100px;padding:6px 16px;font-family:'Abar','Vazirmatn',Tahoma,sans-serif;font-size:12px;cursor:pointer;}
.pc-list{display:flex;flex-direction:column;gap:10px;}
.pc-item{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:12px 14px;}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.pc-name{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text);}
.pc-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent-dim);border:1px solid rgba(160,240,11,.35);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
.pc-stars{color:var(--accent);font-size:12px;letter-spacing:2px;direction:ltr;}
.pc-text{font-size:13px;line-height:2;color:var(--text-dim);text-align:right;}
.pc-date{display:block;margin-top:6px;font-size:11px;color:var(--text-faint);}
.pc-empty{font-size:12.5px;color:var(--text-faint);margin:0;}
.pm-read{display:inline-flex;align-items:center;gap:5px;}

/* ---- SEO: visible intro on Explore + keyword links in the footer ---- */
/* folded heading + intro text at the bottom of Explore */
.ex-about{width:calc(100% - 40px);max-width:400px;margin:2px auto 110px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.02);}
.ex-about summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:12px 16px;color:var(--text-dim);}
.ex-about summary::-webkit-details-marker{display:none;}
.ex-about h1{font-size:13px;margin:0;font-weight:900;color:var(--text-dim);line-height:1.7;}
.ex-about summary svg{flex:none;transition:transform .25s var(--ease);}
.ex-about[open] summary svg{transform:rotate(180deg);}
.ex-about-body{padding:0 16px 14px;font-size:12.5px;line-height:2;color:var(--text-faint);}
.foot-seo{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:6px 18px;margin:14px 0 4px;font-size:12px;}
.foot-seo a{color:var(--text-dim);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.25);}
.foot-seo a:hover{color:var(--accent);}

/* ---- footer credit «طراحی و اجرا» ---- */
@property --fc-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
.foot-credit{display:flex;justify-content:center;margin:20px 0 6px;}
.fc-pill{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:100px;font-size:12px;color:var(--text-dim);background:rgba(255,255,255,.03);}
.fc-pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--fc-angle),rgba(255,255,255,.14) 0 55%,var(--accent) 78%,#eaffb0 88%,rgba(255,255,255,.14) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.fc-spark{color:var(--accent);flex:none;}
.fc-name{font-family:'Abar','Vazirmatn',Tahoma,sans-serif;color:var(--accent);text-decoration:none;position:relative;}
a.fc-name::after{content:"";position:absolute;inset-inline:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);}
a.fc-name:hover::after{transform:scaleX(1);}
.foot-credit.is-anim .fc-pill{animation:fcFloat 4.5s ease-in-out infinite;}
.foot-credit.is-anim .fc-pill::before{animation:fcSpin 4s linear infinite;}
.foot-credit.is-anim .fc-pill::after{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-2;pointer-events:none;box-shadow:0 0 22px -6px rgba(160,240,11,.55);animation:fcGlow 3s ease-in-out infinite;}
.foot-credit.is-anim .fc-name{background:linear-gradient(100deg,var(--accent) 0%,var(--accent) 38%,#fff 50%,var(--accent) 62%,var(--accent) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:fcShine 3.2s ease-in-out infinite;}
.foot-credit.is-anim .fc-spark{animation:fcTwinkle 2.6s ease-in-out infinite;}
@keyframes fcSpin{to{--fc-angle:360deg;}}
@keyframes fcShine{0%{background-position:100% 0;}60%,100%{background-position:-60% 0;}}
@keyframes fcGlow{0%,100%{opacity:.35;}50%{opacity:1;}}
@keyframes fcTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:.85;}50%{transform:scale(1.35) rotate(72deg);opacity:1;}}
@keyframes fcFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}
@media(prefers-reduced-motion:reduce){.foot-credit.is-anim *,.foot-credit.is-anim .fc-pill,.foot-credit.is-anim .fc-pill::before,.foot-credit.is-anim .fc-pill::after{animation:none!important;}}

/* ---- bug report page + its menu link ---- */
.menu-report{margin-top:clamp(10px,2vh,18px);font-size:12px;color:var(--text-faint);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.25);padding-bottom:2px;opacity:0;transition:opacity .6s var(--ease) .5s,color .2s;}
.menu-overlay.open .menu-report{opacity:1;}
.menu-report:hover{color:var(--accent);}
.report-wrap{width:calc(100% - 40px);max-width:440px;margin:0 auto;padding:104px 0 130px;}
.report-title{font-size:20px;margin:0 0 8px;}
.report-lead{font-size:13px;line-height:2;color:var(--text-dim);margin:0 0 18px;}
.report-form label{display:block;font-size:12.5px;color:var(--text-dim);margin:16px 0 6px;}
.report-form textarea,.report-form input[type=text],.report-form select,.report-form input[type=file]{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:inherit;font-size:16px;}
.report-form textarea{resize:vertical;min-height:130px;line-height:1.9;}
.report-form :focus{outline:none;border-color:rgba(160,240,11,.55);box-shadow:0 0 0 3px rgba(160,240,11,.12);}
.report-btn{margin-top:20px;width:100%;padding:14px;border:0;border-radius:100px;background:var(--accent);color:#0a0a0a;font-family:'Abar','Vazirmatn',Tahoma,sans-serif;font-size:14px;cursor:pointer;}
.report-btn:disabled{opacity:.6;}
.report-status{margin-top:12px;font-size:12.5px;min-height:20px;}
.report-status.bad,.report-err{color:#ff9a9a;}
.report-err{background:rgba(255,100,100,.08);border:1px solid rgba(255,100,100,.25);border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:6px;}
.report-ok{background:rgba(160,240,11,.08);border:1px solid rgba(160,240,11,.3);border-radius:14px;padding:16px;font-size:14px;line-height:2;}
.report-back{color:var(--accent);font-size:13px;text-decoration:none;}