/* ============================================================
   HIRMAN — MARKETING HOMEPAGE (redesign)
   Premium-SaaS direction: same brand tokens as the live product
   (indigo / oxblood / green), no gold or unrelated colors.
   Real screenshots + photography are not yet available — every
   device screen and ambient background below is clearly marked
   with a SCREENSHOT SLOT / PHOTO SLOT comment showing exactly
   what to swap in and where. Search this file for "SLOT:" to
   find every one of them.
   ============================================================ */
:root{
  --font:'Vazirmatn','Tahoma',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --font-wordmark:'Fraunces','Georgia',serif;

  --ink:#061023; --ink-2:#061023;
  --paper:#BCBDB6; --surface:#FFFFFF; --surface-glass:rgba(255,255,255,.86); --surface-2:#BCBDB6;
  --line:rgba(4,18,47,.10); --line-soft:rgba(4,18,47,.065);
  --text:#061023; --muted:#5E7392; --muted-soft:#5E7392;

  --navy:#2B4970; --navy-dark:#04122F; --navy-soft:#BCBDB6; --navy-deep:#061023;
  --rose:#2B4970; --rose-dark:#04122F; --rose-soft:#BCBDB6;
  --green:#2B4970; --green-soft:#BCBDB6;

  /* -- on-dark text/line palette: the site default is now a light, mostly-
     white backdrop (~70-80% of every page). Components below still refer
     to the "-onDark" tokens (headings, eyebrows, kickers, feature lists…)
     because they were originally written for a dark page. Rather than
     rewriting every one of those rules, we simply point the tokens at the
     ordinary light-surface colors by default here — then re-declare the
     real dark values only inside `.dark-panel-box` (and the floating dark
     nav/tabbar chrome), so nesting a component in a dark box is enough to
     flip its text back to the correct light-on-dark colors automatically. -- */
  --ink-onDark:var(--ink); --text-onDark:var(--text);
  --muted-onDark:var(--muted); --muted-soft-onDark:var(--muted-soft);
  --line-onDark:var(--line); --line-soft-onDark:var(--line-soft);
  --navy-onDark:var(--navy-dark); --green-onDark:#2B4970; --rose-onDark:var(--rose-dark);

  --radius-lg:24px; --radius-md:17px; --radius-sm:13px; --radius-xl:32px; --radius-2xl:40px;
  --shadow-xs:0 1px 2px rgba(6,16,35,.04),0 8px 22px rgba(4,18,47,.04);
  --shadow-sm:0 10px 30px rgba(4,18,47,.07),0 2px 8px rgba(4,18,47,.04);
  --shadow-md:0 20px 50px rgba(4,18,47,.12),0 6px 16px rgba(4,18,47,.06);
  --shadow-lg:0 34px 90px rgba(6,16,35,.30),0 10px 28px rgba(6,16,35,.14);
  --ease:cubic-bezier(.16,.8,.24,1); --ease-spring:cubic-bezier(.2,.9,.16,1.14);
  --dark-panel:linear-gradient(178deg,#04122F 0%,#04122F 55%,#061023 100%);
  /* page-level backdrop is now light by default; --bg-page is reused only
     as the background for the big dark "boxed" sections (see .dark-panel-box) */
  --bg-page:linear-gradient(170deg,#04122F 0%,#04122F 26%,#04122F 48%,#04122F 70%,#061023 100%);
  --bg-page-light:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 60%,#BCBDB6 100%);

  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --tabbar-h:66px;
}
*{box-sizing:border-box;}
html{background:var(--navy-dark);overflow-x:hidden;}
body{margin:0;font-family:var(--font);background:var(--bg-page-light);color:var(--text);direction:rtl;
  -webkit-font-smoothing:antialiased;line-height:1.7;position:relative;overflow-x:clip;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");}
/* NOTE: the page is light by default now, so the old full-viewport colorful
   glow (body::after) was removed — that "glow" treatment is scoped to just
   the big dark boxed sections instead, see .dark-panel-box below. */
img,svg{display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
::selection{background:rgba(43,73,112,.55);color:#FFFFFF;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}
.ico{width:18px;height:18px;flex-shrink:0;}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:0;color:var(--ink-onDark);}
p{margin:0;}
.num{font-family:var(--font-mono);font-feature-settings:"tnum";letter-spacing:0;}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:750;color:var(--navy-dark);
  background:var(--navy-soft);padding:7px 15px 7px 11px;border-radius:999px;margin-bottom:18px;letter-spacing:.02em;}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--navy-dark);flex-shrink:0;}
.eyebrow i.pulse{animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(43,73,112,.35);}50%{opacity:.7;box-shadow:0 0 0 5px rgba(43,73,112,0);}}
.eyebrow.is-rose{color:var(--rose-dark);background:var(--rose-soft);}
.eyebrow.is-rose i{background:var(--rose-dark);}
.eyebrow.is-green{color:#2B4970;background:var(--green-soft);}
.eyebrow.is-green i{background:#2B4970;}
.eyebrow.on-dark{color:#BCBDB6;background:rgba(255,255,255,.09);}
.eyebrow.on-dark i{background:#BCBDB6;}
.eyebrow.is-rose.on-dark{color:#BCBDB6;background:rgba(43,73,112,.18);}
.eyebrow.is-rose.on-dark i{background:#BCBDB6;}
.eyebrow.is-green.on-dark{color:#BCBDB6;background:rgba(43,73,112,.2);}
.eyebrow.is-green.on-dark i{background:#BCBDB6;}
.kicker{display:block;font-size:11px;letter-spacing:.16em;color:var(--navy-onDark);font-weight:800;text-transform:uppercase;margin-bottom:8px;}
.kicker.is-green{color:var(--green-onDark);}
.kicker.is-rose{color:var(--rose-onDark);}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--radius-sm);font-family:inherit;
  font-weight:700;font-size:15px;padding:13px 24px;cursor:pointer;border:1px solid transparent;white-space:nowrap;position:relative;overflow:hidden;
  min-height:44px;
  transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);}
.btn:active{transform:translateY(1px) scale(.98);}
.btn-primary{background:linear-gradient(135deg,#2B4970,#2B4970);color:#FFFFFF;box-shadow:0 14px 30px rgba(43,73,112,.3),inset 0 1px 0 rgba(255,255,255,.22);border-color:rgba(43,73,112,.16);}
.btn-primary:hover{background:linear-gradient(135deg,#2B4970,#2B4970);transform:translateY(-2px);box-shadow:0 20px 40px rgba(43,73,112,.36),inset 0 1px 0 rgba(255,255,255,.25);}
.btn-lg{padding:16px 30px;font-size:16px;}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line);box-shadow:var(--shadow-xs);}
.btn-ghost:hover{border-color:rgba(43,73,112,.25);color:var(--navy-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn-outline{background:transparent;color:var(--navy-dark);border-color:var(--navy-soft);width:100%;}
.btn-outline:hover{background:var(--navy-soft);}
.btn-onDark{background:#FFFFFF;color:var(--navy-dark);box-shadow:0 12px 28px rgba(6,16,35,.24);}
.btn-onDark:hover{background:#BCBDB6;transform:translateY(-2px);}
.btn-ghostOnDark{color:#FFFFFF;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05);}
.btn-ghostOnDark:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.4);}
.btn-customer{background:#BCBDB6;color:#061023;border-color:#FFFFFF;box-shadow:0 16px 36px rgba(6,16,35,.35);}
.btn-customer:hover{background:#FFFFFF;color:#061023;transform:translateY(-2px);}

/* ---------------- floating glass nav ---------------- */
.nav-dock{position:sticky;top:16px;z-index:100;padding:0 16px;}
header.nav{max-width:1160px;margin:0 auto;background:rgba(4,18,47,.92);
  border:1px solid rgba(255,255,255,.13);border-radius:999px;box-shadow:0 1px 1px rgba(6,16,35,.2),0 14px 34px rgba(6,16,35,.34);
  transition:border-radius .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),max-width .4s var(--ease),margin-top .4s var(--ease);}
header.nav.is-scrolled{background:rgba(4,18,47,.78);box-shadow:0 1px 1px rgba(6,16,35,.24),0 18px 40px rgba(6,16,35,.4);}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:18px;padding:0 10px 0 20px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17.5px;color:var(--ink);min-width:0;}
header.nav .brand{color:var(--ink-onDark);}
.brand-wordmark{font-family:var(--font-wordmark);font-style:italic;font-weight:600;font-size:26px;
  letter-spacing:.01em;line-height:1;color:#FFFFFF;direction:ltr;}
header.nav .brand-wordmark{font-size:16px;}
.mobile-sheet-top .brand-wordmark,.footer-brand .brand-wordmark{color:var(--ink-onDark);}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-links{display:flex;align-items:center;gap:24px;font-size:14px;color:var(--muted-onDark);font-weight:650;}
.nav-links a{position:relative;padding:6px 0;}
.nav-links a::after{content:'';position:absolute;bottom:0;right:0;left:0;height:2px;border-radius:2px;background:var(--navy-onDark);
  transform:scaleX(0);transition:transform .3s var(--ease);}
.nav-links a:hover{color:var(--ink-onDark);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-auth{display:flex;align-items:center;gap:14px;}
.nav-auth .link-login{font-size:14px;font-weight:700;color:var(--ink-onDark);}
.nav-auth .btn{padding:10px 19px;font-size:13.5px;}

.nav-toggle{display:none;width:44px;height:44px;border-radius:13px;border:1px solid var(--line);
  background:var(--surface);align-items:center;justify-content:center;flex-shrink:0;padding:0;cursor:pointer;}
/* the header's toggle sits on the dark glass nav; the modal close button
   (same .nav-toggle markup, inside the light .mobile-sheet-panel) keeps
   the base rule above untouched */
header.nav .nav-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);}
header.nav .nav-toggle span::before,header.nav .nav-toggle span::after,header.nav .nav-toggle span i{background:var(--ink-onDark);}
.nav-toggle span{position:relative;width:16px;height:11px;}
.nav-toggle span::before,.nav-toggle span::after,.nav-toggle i{position:absolute;right:0;left:0;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease);}
.nav-toggle span::before{content:'';top:0;}
.nav-toggle span::after{content:'';bottom:0;}
.nav-toggle span i{top:5px;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg);}
.nav-toggle[aria-expanded="true"] span i{opacity:0;}
.nav-close span::before{transform:translateY(5px) rotate(45deg);}
.nav-close span::after{transform:translateY(-5px) rotate(-45deg);}
.nav-close span i{opacity:0;}

/* ---------------- mobile sheet menu ---------------- */
.mobile-sheet{position:fixed;inset:0;z-index:200;display:none;}
.mobile-sheet.is-open{display:block;}
.mobile-sheet-scrim{position:absolute;inset:0;background:rgba(6,16,35,.72);opacity:0;transition:opacity .3s var(--ease);}
.mobile-sheet.is-open .mobile-sheet-scrim{opacity:1;}
.mobile-sheet-panel{position:absolute;top:10px;left:10px;right:10px;background:var(--surface);border-radius:28px;
  padding:calc(var(--safe-t) + 14px) 20px 24px;box-shadow:var(--shadow-lg);
  transform:translateY(-24px) scale(.97);opacity:0;transition:transform .4s var(--ease-spring),opacity .3s var(--ease);}
.mobile-sheet.is-open .mobile-sheet-panel{transform:translateY(0) scale(1);opacity:1;}
.mobile-sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.mobile-sheet-links{display:flex;flex-direction:column;margin-top:14px;}
.mobile-sheet-links a{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-size:16.5px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line-soft);}
.mobile-sheet-links a svg{width:17px;height:17px;color:var(--muted-soft);}
.mobile-sheet-auth{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.mobile-sheet-auth .btn{width:100%;padding:15px;font-size:15.5px;}
body.sheet-open{overflow:hidden;}

/* ---------------- reveal / motion ----------------
   will-change عمداً اینجا (روی حالت پایه) گذاشته نشده. حدود ۶۵ المان
   .reveal/.reveal-scale در کل صفحه هست؛ اگر will-change از همون لود اول
   روی همه‌شون (حتی اونایی که ته صفحه و هنوز دیده نشدن) ست بشه، مرورگر
   مجبوره همزمان ده‌ها لایه‌ی compositor جدا نگه داره — دقیقاً همون چیزی
   که خودش باعث افت فریم در اسکرول می‌شه، مخصوصاً درست همون لحظه‌ای که
   کاربر از hero می‌ره پایین و اولین گروه از این المان‌ها وارد صفحه می‌شن.
   به‌جاش will-change فقط درست قبل از شروع transition (توسط
   IntersectionObserver در پایین صفحه) موقتاً ست و بلافاصله بعد از تمومِ
   transition پاک می‌شه؛ ظاهر و زمان‌بندی reveal دقیقاً همونیه که بود. */
.reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .55s var(--ease),transform .55s var(--ease);}
.reveal.visible{opacity:1;transform:none;will-change:auto;}
.reveal-scale{opacity:0;transform:translate3d(0,22px,0) scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.reveal-scale.visible{opacity:1;transform:none;will-change:auto;}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  .float,.float-slow,.hero-blob,.pulse{animation:none !important;}
}
@media (max-width:767px){
  .reveal{transform:translateY(14px);filter:none;}
  .reveal-scale{transform:translateY(12px) scale(.98);filter:none;}
}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes floatYSlow{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-9px) rotate(.6deg);}}
.float{animation:floatY 5.5s ease-in-out infinite;}
.float-slow{animation:floatYSlow 8s ease-in-out infinite;}

/* ---------------- section shell ---------------- */
section{position:relative;z-index:1;}
[id]{scroll-margin-top:calc(76px + var(--safe-t));}
.sec-pad{padding:104px 0;}
.sec-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.sec-head h2{font-size:40px;line-height:1.22;}
.sec-head p{margin-top:16px;font-size:16.5px;color:var(--muted-onDark);line-height:1.8;}
@media (max-width:1279px){
  .sec-pad{padding:80px 0;}
  .sec-head{margin-bottom:44px;}
  .sec-head h2{font-size:32px;}
}
@media (max-width:767px){
  .sec-pad{padding:32px 0;}
  .sec-head{margin-bottom:22px;text-align:right;max-width:none;}
  .sec-head h2{font-size:23px;line-height:1.32;}
  .sec-head p{font-size:14.5px;margin-top:8px;line-height:1.65;}
}
/* ================================================================
   HERO
   ================================================================ */
.hero{padding:56px 0 40px;overflow:visible;}
.hero-grid{display:grid;grid-template-columns:1fr .92fr;gap:40px;align-items:center;}
.hero h1{font-size:54px;line-height:1.2;color:var(--ink-onDark);}
.hero .lede{margin-top:20px;font-size:18px;color:var(--muted-onDark);max-width:480px;line-height:1.85;}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:34px;}
.hero-note{display:flex;align-items:center;gap:9px;margin-top:26px;font-size:13.5px;color:var(--muted-soft-onDark);font-weight:650;}
.hero-note svg{width:16px;height:16px;color:var(--muted-soft-onDark);}
@media (max-width:1279px){
  .hero-grid{grid-template-columns:1fr;gap:56px;}
  .hero h1{font-size:40px;}
}
@media (max-width:767px){
  .hero{padding:calc(var(--safe-t) + 14px) 0 8px;}
  .hero-grid{gap:38px;text-align:center;}
  .hero h1{font-size:29px;line-height:1.3;}
  .hero .lede{font-size:15.5px;line-height:1.7;max-width:100%;margin-top:12px;}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:10px;margin-top:24px;}
  .hero-ctas .btn{width:100%;}
  .hero-note{justify-content:center;margin-top:18px;font-size:12.5px;}
}

/* ---------------- ambient photo slot (hero + auth pages) ----------------
   PHOTO SLOT: stand-in for a softly blurred, premium salon interior photo.
   Currently a pure-CSS bokeh/gradient wash (no gold — indigo + rose only)
   so the layout already looks intentional. To use a real photo, add:
     background-image: url('/assets/photography/salon-ambient.jpg'), <keep the gradient below as a fallback layer>;
   on .ambient-photo — the blur + dark wash on top will apply automatically. */
.ambient-photo{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;}
.ambient-photo::before{content:'';position:absolute;inset:-10%;
  background:
    radial-gradient(38% 34% at 22% 24%,rgba(43,73,112,.5),transparent 70%),
    radial-gradient(30% 30% at 78% 20%,rgba(43,73,112,.34),transparent 70%),
    radial-gradient(46% 40% at 68% 82%,rgba(4,18,47,.55),transparent 70%),
    radial-gradient(30% 26% at 12% 86%,rgba(43,73,112,.24),transparent 70%),
    linear-gradient(150deg,#04122F 0%,#061023 60%,#061023 100%);
  opacity:.4;transform:scale(1.02);}
.ambient-photo::after{content:'';position:absolute;inset:0;background:rgba(6,16,35,.14);}
.ambient-photo.is-light::before{opacity:.9;}

.hero-stage{position:relative;min-height:540px;}
.hero-blob{display:none;}
.hero-blob.b1{width:360px;height:360px;background:rgba(43,73,112,.3);top:-40px;left:10%;}
.hero-blob.b2{width:300px;height:300px;background:rgba(43,73,112,.2);bottom:-20px;right:0;}
.hero-blob.b3{width:220px;height:220px;background:rgba(43,73,112,.14);top:42%;left:-10px;}

/* ================================================================
   HERO سینمایی + صحنه‌ها — جایگزین hero-aurora قبلی.
   Tokenهای رنگ/فاصله/حرکت از design-system.css می‌آیند؛ رنگ‌های خام
   اینجا تکرار نشده‌اند. از کلاس پایه‌ی .reveal/.reveal-scale موجود در
   همین فایل (خط ۱۸۵) استفاده می‌شود — فقط Duration/Easing برای حس
   سینمایی‌تر Override شده، نه کل قانون.
   ================================================================ */
/* ---- دکمه‌ی ثابتِ شیشه‌ای «ورود مدیر سالن» — جایگزین نوار Nav قبلی ----
   عمداً position:fixed (نه sticky) طبق خواسته: هیچ‌وقت با اسکرول جابه‌جا
   نمی‌شود. پس‌زمینه‌ی تیره‌ی نیمه‌شفاف تا هم روی صحنه‌های عکس‌دار هم روی
   بخش‌های روشن (خدمات/نظرات) خوانا بماند. */
.owner-login-fab{
  position:fixed;top:calc(16px + var(--safe-t));left:16px;z-index:100;
  padding:10px 20px;border-radius:999px;
  background:rgba(6,16,35,.45);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;font-size:var(--fs-small);font-weight:var(--fw-medium);
  text-decoration:none;box-shadow:0 8px 24px rgba(6,16,35,.18);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.owner-login-fab:hover{background:rgba(6,16,35,.6);border-color:rgba(255,255,255,.32);}
/* در حین اسکرول فعال، backdrop-filter این دکمه موقتاً خاموش می‌شود.
   چون position:fixed است، این تنها المان شیشه‌ای است که در تمام طول
   اسکرول (نه فقط یک لحظه‌ی عبور، مثل scene-divider) روی صفحه می‌ماند؛
   یعنی مرورگر باید هر فریمِ اسکرول دوباره از محتوای در حال حرکت زیرش
   (خصوصاً عکس hero که خودش هر فریم transform می‌گیرد) نمونه‌برداری و
   بلور کند — دقیقاً همان هزینه‌ای که باعث افت فریم زیر hero می‌شود.
   جایگزینِ بدون بلور کمی تیره‌تر است تا خوانایی متن سفید حفظ شود؛
   transition:none یعنی این خاموش‌شدن بی‌درنگ است (حتی یک تلق سریع هم
   فوراً سبک می‌شود)، اما با توقف اسکرول، افکت شیشه‌ای طبق transition
   خودِ .owner-login-fab (بالا) نرم به حالت اول برمی‌گردد — ظاهر در حالت
   ثابت دقیقاً همان است، فقط در لحظه‌ی پرهزینه‌ی خودِ اسکرول موقتاً کنار
   می‌رود. */
body.is-scrolling .owner-login-fab{
  transition:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:rgba(6,16,35,.78);
}
@media (max-width:600px){
  .owner-login-fab{top:calc(14px + var(--safe-t));left:14px;padding:9px 16px;font-size:12.5px;}
}

.cinema-hero,.cinema-scene{position:relative;overflow:hidden;isolation:isolate;
  min-height:100svh;padding:0 24px;background:var(--navy-dark);}
.cinema-hero{display:flex;align-items:flex-end;justify-content:center;padding-bottom:80px;}
.cinema-scene{display:flex;align-items:center;padding-block:96px;}

/* خط ظریف جداکننده، هر جا یک صحنه‌ی تمام‌قد (تیره) درست بعد از یک بخش
   روی پس‌زمینه‌ی روشن (نظرات و مانند آن) شروع می‌شه — یه خط ظریف داشته باشه
   به‌جای چسبیدن مستقیم. */
.sec-pad + .cinema-scene{border-top:1px solid var(--line-onDark);}

/* گذر شیشه‌ای بین دو صحنه: نواری باریک و دودی، جزئیاتی کم‌رنگ که در نگاه
   اول تقریباً نامرئی است. پایه‌ی کاملاً مات navy-dark (هم‌رنگ خود
   cinema-hero/cinema-scene) از نشتِ پس‌زمینه‌ی روشن صفحه جلوگیری می‌کند؛
   روی همان پایه، دو بلابِ رنگِ محو + یک لایه‌ی نیمه‌شفاف سوار می‌شوند تا
   فقط ردّی کم‌رنگ از رنگ صحنه‌ی بالا/پایین دیده شود، نه رنگ واضح.
   عمداً از backdrop-filter استفاده نشده: خودِ blob با filter:blur(30px)
   از قبل محو پیکسل شده، پس دیگر نیازی به بلور زنده‌ی پشت شیشه نیست —
   backdrop-filter روی چند ناحیه در طول اسکرول باید هر فریم دوباره
   composite شود که هم لگ ایجاد می‌کند هم در سافاری/موبایل باعث پرش/فلش
   سفید لحظه‌ای می‌شود؛ حذفش همان جلوه را با هزینه‌ی رندر صفر می‌دهد.
   --divider-top/--divider-bottom روی هر نمونه با inline style به رنگ
   واقعیِ لبه‌ی همان دو عکسِ مجاور ست شده‌اند (لبه‌ی پایین عکس بالا / لبه‌ی
   بالای عکس پایین)؛ مقادیر زیر فقط fallback است برای دیوایدری که
   override نشود. */
.scene-divider{position:relative;height:90px;overflow:hidden;isolation:isolate;
  background:var(--navy-dark);
  --divider-top:var(--navy);--divider-bottom:var(--accent-warm);}

.scene-divider-blob{position:absolute;width:240px;height:240px;border-radius:50%;
  filter:blur(30px);opacity:.18;pointer-events:none;z-index:0;}
.scene-divider-blob-top{top:-150px;right:20%;background:var(--divider-top);}
.scene-divider-blob-bottom{bottom:-150px;left:20%;background:var(--divider-bottom);}

.scene-divider-glass{position:absolute;inset:0;z-index:1;
  background:rgba(13,27,46,.6);}

/* برق مورب: فقط یک‌بار، دقیقاً وقتی .scene-divider وارد viewport می‌شود
   (نگاه کن به IntersectionObserver با کلاس in-view در اسکریپت پایین
   صفحه) — نه loop. */
.scene-divider-glare{position:absolute;top:-50%;bottom:-50%;left:-60%;width:38%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.12) 50%,transparent 100%);
  transform:skewX(-20deg);opacity:0;z-index:2;pointer-events:none;}
.scene-divider.in-view .scene-divider-glare{animation:sceneDividerGlare 1.3s var(--ease) forwards;}
@keyframes sceneDividerGlare{
  0%{left:-60%;opacity:0;}
  14%{opacity:1;}
  86%{opacity:1;}
  100%{left:140%;opacity:0;}
}

.scene-divider-line{position:absolute;left:50%;top:50%;width:50%;height:1px;z-index:3;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent 0%,var(--accent-warm) 50%,transparent 100%);}
.scene-divider-diamond{position:absolute;left:50%;top:50%;width:5px;height:5px;z-index:3;
  background:var(--accent-warm);transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 8px var(--accent-warm-glow);
  animation:sceneDividerBreathe 4s ease-in-out infinite;}
@keyframes sceneDividerBreathe{
  0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(.88);opacity:.7;box-shadow:0 0 5px var(--accent-warm-glow);}
  50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.08);opacity:1;box-shadow:0 0 10px var(--accent-warm-glow);}
}

@media (max-width:1279px){
  .scene-divider{height:80px;}
  .scene-divider-blob{width:200px;height:200px;}
}
@media (max-width:767px){
  .scene-divider{height:64px;}
  .scene-divider-line{width:60%;max-width:150px;}
  .scene-divider-blob{width:160px;height:160px;filter:blur(24px);}
}
@media (prefers-reduced-motion:reduce){
  .scene-divider-diamond{animation:none;}
  .scene-divider-glare{display:none;}
}


.cinema-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.cinema-media-img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  transform:scale(var(--scene-scale-min));display:block;}
.cinema-media-img.is-near-viewport{will-change:transform;}
.cinema-media-overlay{position:absolute;inset:0;}
.cinema-media-overlay-hero{background:linear-gradient(to top,
  var(--navy-dark) 0%,rgba(4,18,47,.78) 24%,rgba(4,18,47,.30) 54%,rgba(4,18,47,.55) 100%);}
.cinema-media-overlay-scene{background:linear-gradient(to top,
  rgba(4,18,47,.74) 0%,rgba(4,18,47,.36) 46%,rgba(4,18,47,.52) 100%);}

.cinema-hero-inner{position:relative;z-index:1;width:100%;max-width:720px;margin-inline:auto;
  text-align:center;display:flex;flex-direction:column;align-items:center;}
.cinema-hero-inner .eyebrow{margin-bottom:22px;color:var(--muted-onDark);background:rgba(255,255,255,.08);}
.cinema-hero-inner .eyebrow i{background:var(--accent-warm);}
.cinema-hero-title{font-weight:var(--fw-bold);font-size:var(--fs-display);line-height:var(--lh-tight);
  color:var(--text-onDark);margin:0 0 18px;}
.cinema-line{display:block;}
.cinema-hero-sub{font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--muted-onDark);
  max-width:480px;margin:0 auto 32px;}
.cinema-hero .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:auto;}
.cinema-cta-primary{box-shadow:var(--glow-warm),0 14px 30px rgba(6,16,35,.25);}
.cinema-cta-shop{color:#fff;border-color:rgba(255,255,255,.48);background:rgba(4,18,47,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 30px rgba(6,16,35,.2);backdrop-filter:blur(12px);}
.cinema-cta-shop:hover{color:#061023;background:#fff;border-color:#fff;transform:translateY(-2px);}
/* دکمه‌ی «Home Service»: زیر ردیف اصلی، هم‌اندازه‌ی «رزرو نوبت»/«فروشگاه
   سالن» (همان .btn.btn-lg) و با ظاهر شیشه‌ای طلایی مجزا، بر پایه‌ی همان
   توکن --accent-warm که برای درخشش «رزرو نوبت» هم استفاده می‌شود.
   .btn.btn-lg فقط padding/فونت رو یکی می‌کنه؛ چون متن دکمه‌ها طول متفاوتی
   داره (رزرو نوبت/فروشگاه سالن/Home Service) عرضشون طبیعتاً فرق می‌کرد،
   یک min-width مشترک هر سه رو دقیقاً هم‌عرض می‌کنه. */
.cinema-hero .cinema-cta-primary,
.cinema-hero .cinema-cta-shop,
.cinema-cta-homeservice{min-width:190px;}
/* درخواست: کوچیک‌تر و پایین‌تر شدنِ دکمه‌های «رزرو نوبت» و «Home Service»
   توی هیرو. اسکوپِ .cinema-hero باعث می‌شه دکمه‌ی «رزرو نوبت» توی سکشن
   CTA پایانی (که همون کلاس cinema-cta-primary رو داره ولی بیرون از
   .cinema-hero‌ست) دست‌نخورده بمونه. */
.cinema-hero .cinema-cta-primary,
.cinema-hero .cinema-cta-homeservice{
  padding:16px 22px;
  font-size:13px;
  min-width:152px;
}
.cinema-hero .hero-ctas{margin-top:52px;}
.hero-ctas-home-service{display:flex;justify-content:center;width:auto;margin-top:22px;}

/* ============================================================
   بازطراحی «Book Time» و «Home Service» بر اساس سبک تایپوگرافی
   نمونه‌ی ارسالی: وزن Extralight، حروف بزرگ (uppercase) و
   letter-spacing باز. فونت انگلیسی دکمه‌ها همان Vazirmatn (وریابل،
   وزن ۱۰۰ تا ۹۰۰) است که از قبل لود شده — فقط وزن/حروف/فاصله‌گذاری
   عوض شده. چون تایپ نازک‌تر شد، ظاهر دکمه‌ها هم سبک‌تر و شیشه‌ای‌تر
   شده (خط دورِ نازک به‌جای پرشدگیِ توپر) تا با وزن فونت هماهنگ باشد. */
.cinema-cta-primary,
.cinema-cta-homeservice{
  font-weight:200;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.cinema-final .cinema-cta-primary{letter-spacing:.14em;}

.cinema-cta-primary{
  background:rgba(244,241,234,.07);
  color:#F4F1EA;
  border-color:rgba(244,241,234,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px rgba(6,16,35,.25),var(--glow-warm);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.cinema-cta-primary:hover{
  background:#F4F1EA;color:#061023;border-color:#F4F1EA;
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(6,16,35,.3),var(--glow-warm);
}

.cinema-cta-homeservice{color:#FFF6E6;
  background:linear-gradient(135deg,rgba(200,155,92,.28),rgba(200,155,92,.1));
  border-color:rgba(200,155,92,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px rgba(4,18,47,.22),var(--glow-warm);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.cinema-cta-homeservice:hover{color:#fff;
  background:linear-gradient(135deg,rgba(200,155,92,.5),rgba(200,155,92,.22));
  border-color:rgba(200,155,92,.8);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 36px rgba(4,18,47,.26),var(--glow-warm);}

.cinema-scroll-cue{position:absolute;z-index:1;bottom:28px;left:50%;transform:translateX(-50%);
  width:30px;height:46px;border:2px solid rgba(255,255,255,.5);border-radius:20px;
  display:flex;justify-content:center;padding-top:8px;}
.cinema-scroll-cue span{width:4px;height:8px;border-radius:2px;background:#fff;
  animation:cinemaScrollCue 1.8s ease-in-out infinite;}
@keyframes cinemaScrollCue{0%{opacity:1;transform:translateY(0);}70%{opacity:0;transform:translateY(10px);}100%{opacity:0;transform:translateY(0);}}

.cinema-scene-inner{position:relative;z-index:1;width:100%;max-width:560px;margin-inline:auto;
  text-align:center;color:var(--text-onDark);}
.cinema-scene-eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-medium);
  letter-spacing:.06em;color:var(--accent-warm);margin-bottom:14px;}
.cinema-scene-title{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);
  color:var(--text-onDark);margin:0 0 14px;}
.cinema-scene-text{font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--muted-onDark);margin:0;}
.cinema-scene-cta{display:inline-flex;margin-top:22px;}

/* ---- بخش خدمات: از الگوی موجود dark-panel-box استفاده می‌کند ---- */
.cinema-services-box{padding:64px 40px;max-width:920px;margin-inline:auto;text-align:center;}
.cinema-services-head{margin-bottom:36px;}
.cinema-services-grid{list-style:none;margin:0 0 36px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:start;}
.cinema-services-grid li{background:rgba(255,255,255,.04);border:1px solid var(--line-onDark);border-radius:var(--radius-md);
  padding:22px 22px;font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--text-onDark);
  display:flex;align-items:center;gap:12px;}
.cinema-services-grid li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent-warm);flex:none;}
@media (max-width:600px){
  .cinema-services-box{padding:48px 22px;}
  .cinema-services-grid{grid-template-columns:1fr;}
}

/* ---- بخش نظرات مشتریان: همان الگوی dark-panel-box ---- */
.cinema-reviews-box{padding:64px 40px;max-width:1040px;margin-inline:auto;text-align:center;}
.cinema-reviews-rating{color:var(--muted-onDark);font-size:var(--fs-body);margin:10px 0 0;}
.cinema-reviews-stars{color:var(--accent-warm);letter-spacing:2px;margin-inline-end:6px;}
.cinema-reviews-grid{list-style:none;margin:36px 0 36px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:start;}
.cinema-reviews-grid li{background:rgba(255,255,255,.04);border:1px solid var(--line-onDark);border-radius:var(--radius-md);
  padding:22px 20px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-onDark);}
@media (max-width:760px){
  .cinema-reviews-box{padding:48px 22px;}
  .cinema-reviews-grid{grid-template-columns:1fr;}
}
.cinema-final .hero-ctas{justify-content:center;margin-top:26px;}
.cinema-final .cinema-cta-primary{margin-top:0;}

.landing-portfolio-entry{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px 20px 8px;
  color:var(--muted-onDark);font-size:13px;}
.landing-portfolio-button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 15px;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;color:var(--text-onDark);font-size:13px;font-weight:700;
  background:rgba(255,255,255,.05);transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);}
.landing-portfolio-button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);transform:translateY(-1px);}
@media (max-width:600px){
  .landing-portfolio-entry{flex-direction:column;gap:8px;padding-top:20px;}
}

/* حس سینمایی‌تر برای Reveal همین دو بخش، بدون تعریف دوباره‌ی .reveal پایه */
.cinema-hero .reveal,.cinema-scene .reveal{
  transition-duration:var(--dur-slow);transition-timing-function:var(--ease-cinematic);}
.cinema-hero .reveal:nth-child(2){transition-delay:80ms;}
.cinema-hero .reveal:nth-child(3){transition-delay:160ms;}
.cinema-hero .reveal:nth-child(4){transition-delay:240ms;}

@media (max-width:600px){
  .cinema-hero{padding-bottom:52px;}
  .cinema-scene{min-height:auto;padding-block:120px;}
  .cinema-hero-sub{font-size:var(--fs-body);}
  .cinema-scene-title{font-size:26px;}
}
@media (prefers-reduced-motion:reduce){
  .cinema-scroll-cue span{animation:none;opacity:1;transform:none;}
  .cinema-media-img{transform:none !important;}
}

/* ================================================================
   DARK PANEL BOX — reusable big gradient container for the "important"
   sections (امکانات/صندوق فروش/هیرمان‌کلاب/حسابداری/گزارش‌ها inside the
   showcase, اپلیکیشن موبایل, تعرفه‌ها). The rest of the page stays on the
   light backdrop set on <body>; only these boxes get the dark treatment.

   Re-declaring the *-onDark custom properties here is the key trick: every
   already-existing on-dark-styled rule (headings, .eyebrow.on-dark, .kicker,
   .feature-list, .feature-tab…) keeps working exactly as originally written
   — it just needs to be nested inside one of these boxes to look right again.
   The floating glass nav + mobile tabbar are always dark chrome regardless
   of the page background, so they get the same dark tokens too.
   ================================================================ */
.dark-panel-box, header.nav, .cinema-hero, .cinema-scene{
  --ink-onDark:#BCBDB6; --text-onDark:rgba(188,189,182,.86);
  --muted-onDark:rgba(188,189,182,.70); --muted-soft-onDark:rgba(188,189,182,.42);
  --line-onDark:rgba(255,255,255,.14); --line-soft-onDark:rgba(255,255,255,.08);
  --navy-onDark:#5E7392; --green-onDark:#BCBDB6; --rose-onDark:#5E7392;
}
.dark-panel-box{
  position:relative;overflow:hidden;isolation:isolate;margin:0 22px;
  border-radius:var(--radius-xl);background:var(--dark-panel);
  box-shadow:var(--shadow-lg);
}
.dark-panel-box::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%,rgba(43,73,112,.32),transparent 32%),
    radial-gradient(circle at 92% 18%,rgba(94,115,146,.16),transparent 34%),
    radial-gradient(circle at 45% 108%,rgba(43,73,112,.16),transparent 42%);}
.dark-panel-box > *{position:relative;z-index:1;}
@media (max-width:767px){
  .dark-panel-box{margin:0 14px;border-radius:var(--radius-lg);}
  .dark-panel-box .container{padding-inline:18px;}
}

/* Skip layout and paint work for scenes that are still far below the fold. */
#scene-location,#scene-final,.cinema-reviews,.landing-portfolio-entry,footer{
  content-visibility:auto;
}
#scene-location,#scene-final{contain-intrinsic-size:auto 100svh;}
.cinema-reviews{contain-intrinsic-size:auto 620px;}
.landing-portfolio-entry{contain-intrinsic-size:auto 72px;}
footer{contain-intrinsic-size:auto 360px;}

/* ---------------- footer ---------------- */
footer{padding:60px 0 40px;}
.footer-grid{display:grid;grid-template-columns:1.2fr 0.9fr 0.9fr 1.2fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line-onDark);}
.footer-brand .brand{color:var(--ink-onDark);}
.footer-brand p{margin-top:14px;font-size:14px;color:var(--muted-onDark);max-width:320px;line-height:1.85;}
.footer-col b{display:block;font-size:13px;font-weight:800;margin-bottom:16px;color:var(--ink-onDark);}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{font-size:14px;color:var(--muted-onDark);font-weight:600;transition:color .2s var(--ease);}
.footer-col a:hover{color:var(--ink-onDark);}
.footer-col address{font-style:normal;font-size:14px;color:var(--muted-onDark);font-weight:600;line-height:1.9;max-width:230px;}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  font-size:13px;color:var(--muted-soft-onDark);padding-top:26px;}
.footer-row a{font-weight:700;color:var(--muted-onDark);}
.footer-row a:hover{color:var(--ink-onDark);}
@media (max-width:1279px){ .footer-grid{grid-template-columns:1fr;gap:32px;} }
@media (max-width:767px){
  footer{padding:36px 0 28px;}
  .footer-col ul{gap:0;}
  .footer-col a,.footer-row a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;}
  .footer-row{flex-direction:column;align-items:flex-start;gap:8px;padding-top:20px;}
}

/* ================================================================
   MOBILE APP CHROME — nav bar, sheet menu trigger, sticky action bar
   Only active ≤767px; tablet keeps the standard link nav.
   ================================================================ */
@media (max-width:767px){
  .nav-dock{position:fixed;top:0;left:0;right:0;padding:0;
    -webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;-webkit-backface-visibility:hidden;}
  body{overscroll-behavior-y:none;}
  /* header.nav is transparent at rest (below) and only gets a solid dark
     fill once .is-scrolled is added — so it's meant to visually sit ON the
     hero's ocean background, not on plain body background. body's padding
     above still reserves the header's real height (so nothing else on the
     page ever ends up hidden under it), but the hero itself pulls that
     reserved strip back up and repaints it with its own background, then
     re-adds the same amount as top padding so the eyebrow/logo/CTAs land
     exactly where they did before — only the background moves up to meet
     the header, nothing visible shifts position. */
  .hero-aurora{margin-top:calc(-52px - var(--safe-t));padding-top:calc(140px + var(--safe-t));}
  header.nav{border-radius:0;max-width:none;padding-top:var(--safe-t);
    background:transparent;border:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;}
  header.nav.is-scrolled{border-radius:0 0 22px 22px;
    background:rgba(4,18,47,.92);border:1px solid rgba(255,255,255,.14);
    box-shadow:0 1px 1px rgba(6,16,35,.2),0 14px 34px rgba(6,16,35,.34);
    -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);}
  .nav-row{height:52px;gap:8px;padding:0 14px;}
  .brand{font-size:16px;gap:8px;}
  header.nav .brand-logo{width:100px;}
  .mobile-sheet-top .brand-logo{width:116px;}
  .brand-logo-onDark{display:none;}
  .brand-logo-onLight{display:inline-block;}
  .nav-right{gap:8px;}
  .nav-links{display:none;}
  .nav-auth{gap:8px;}
  .nav-auth .link-login{display:inline-flex;font-size:12.5px;color:#FFFFFF;}
  .nav-auth .btn{padding:8px 13px;font-size:12px;min-height:38px;}
  .signup-full{display:none;}
  header.nav .nav-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);}
  header.nav .nav-toggle span::before,header.nav .nav-toggle span::after,header.nav .nav-toggle span i{background:var(--ink-onDark);}
  .nav-toggle{display:inline-flex;width:38px;height:38px;}
}
@media (max-width:520px){
  /* narrower phones use 72px of the hero's own top padding (not 88px) —
     keep the header-height compensation in sync with that smaller base */
  .hero-aurora{padding-top:calc(124px + var(--safe-t));}
}