/* ==========================================================
   HARMIN — ULTRA VIP PRO White / Black / Gold (DEBUGGED)
   ✅ Fixed broken CSS token, broken comment, duplicated blocks,
   ✅ Prevented .gallery grid rules from hijacking .vip-gallery sliders
   ✅ No HTML change required
========================================================== */

/* ===========================
   TOKENS / THEME
=========================== */
:root{
  /* Surfaces */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#fbfbfd;
  --surface-3:#f7f7fa;
  --surface-4:#f3f3f8;

  /* Text */
  --text:#070709;
  --text-2:#0f0f12;
  --muted:rgba(7,7,9,.76);
  --muted2:rgba(7,7,9,.62);
  --line:rgba(7,7,9,.10);
  --hairline:rgba(7,7,9,.08);

  /* Blacks */
  --black:#060607;
  --black2:#0c0c10;
  --black3:#14141b;

  /* Gold */
  --gold:#d4af37;
  --gold2:#f4dc93;
  --gold3:#b88713;
  --gold4:#7a5607;
  --gold-soft:rgba(212,175,55,.18);
  --gold-soft2:rgba(212,175,55,.10);
  --gold-soft3:rgba(212,175,55,.06);

  /* Radius */
  --r-2xl:28px;
  --r-xl:22px;
  --r-lg:18px;
  --r-md:14px;

  /* Shadows */
  --shadow-xxs:0 6px 14px rgba(0,0,0,.05);
  --shadow-xs:0 8px 18px rgba(0,0,0,.06);
  --shadow-sm:0 14px 36px rgba(0,0,0,.10);
  --shadow-md:0 22px 70px rgba(0,0,0,.16);
  --shadow-lg:0 40px 120px rgba(0,0,0,.22);
  --shadow-xl:0 70px 180px rgba(0,0,0,.26);

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease2:cubic-bezier(.22,.8,.18,1);
  --dur:.22s;
  --dur2:.5s;
  --dur3:.85s;

  /* Focus */
  --focus:0 0 0 .25rem rgba(212,175,55,.24);

  /* Layout */
  --container-pad:16px;

  /* Glass */
  --glass: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  --glass2: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.34));
  --glass-dark: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  --glass-dark2: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));

  /* Text rhythm */
  --lh:1.95;
  --lh-tight:1.22;
}

/* ===========================
   BASE RESET & TYPOGRAPHY
=========================== */
*{
  font-family:"Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

html,body{ height:100%; }

body{
  background: var(--bg);
  color: var(--text);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
  line-height: var(--lh);
  letter-spacing: .05px;
}

/* Default text behavior */
p, li, span, small, div{ color: inherit; }
p{ line-height: var(--lh); font-size: 1.02rem; }

.text-soft{ color: var(--text-2) !important; opacity: .92; }
.text-soft2{ color: var(--text) !important; opacity: .74; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

::selection{
  background: rgba(212,175,55,.28);
  color: var(--text);
}

h1,h2,h3,h4{
  color: var(--text);
  font-weight: 950;
  letter-spacing: -.25px;
  line-height: var(--lh-tight);
}

strong{ font-weight: 950; }

/* ===========================
   LUX BACKGROUND (GLOW + GRAIN)
=========================== */
body::before{
  content:"";
  position: fixed;
  inset: -120px;
  background:
    radial-gradient(circle at 16% 10%, rgba(212,175,55,.22), transparent 52%),
    radial-gradient(circle at 88% 14%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(circle at 52% 92%, rgba(0,0,0,.045), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.985));
  pointer-events:none;
  z-index:-2;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:-1;
  opacity:.06;
  background-image: radial-gradient(rgba(0,0,0,.35) 1px, transparent 1px);
  background-size: 9px 9px;
  mix-blend-mode: soft-light;
}

.lux-bg{ position: relative; }

/* ===========================
   SCROLLBAR
=========================== */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width: 10px; height: 10px; }
  ::-webkit-scrollbar-track{ background: rgba(0,0,0,.05); }
  ::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.7);
  }
  ::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, rgba(212,175,55,.55), rgba(0,0,0,.25));
  }
}

/* ===========================
   NAVBAR (CINEMATIC)
=========================== */
.nav-dark{
  background:
    radial-gradient(circle at 30% 0%, rgba(212,175,55,.12), transparent 55%),
    radial-gradient(circle at 92% 0%, rgba(212,175,55,.08), transparent 55%),
    linear-gradient(180deg, #050506, var(--black)) !important;
  border-bottom: 1px solid rgba(212,175,55,.22);
  box-shadow: 0 20px 90px rgba(0,0,0,.34);
  position: sticky;
  top:0;
  z-index: 1000;
  will-change: transform, box-shadow, backdrop-filter;
}

.nav-dark.is-scrolled{
  backdrop-filter: blur(14px);
  box-shadow: 0 34px 160px rgba(0,0,0,.52);
}

.nav-shell{
  min-height: 92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.nav-gold-line{
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,175,55,.20),
    rgba(212,175,55,.95),
    rgba(212,175,55,.20),
    transparent
  );
  filter: drop-shadow(0 10px 22px rgba(212,175,55,.18));
}

.brand-wrap{ text-decoration:none; }
.brand-title{
  color:#fff;
  font-weight: 950;
  font-size: 1.15rem;
  letter-spacing: .2px;
}
.brand-sub{
  color: rgba(255,255,255,.72);
  font-size:.78rem;
  margin-top:2px;
}

.site-logo{
  width: 110px;
  height: 110px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter:
    drop-shadow(0 0 14px rgba(212,175,55,.70))
    drop-shadow(0 30px 90px rgba(212,175,55,.15));
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.site-logo:hover{
  transform: translateY(-2px) scale(1.035);
  filter:
    drop-shadow(0 0 20px rgba(212,175,55,.85))
    drop-shadow(0 42px 120px rgba(212,175,55,.18));
}

.nav-items-gap{ gap: 12px; }
.nav-cta-space{ margin-right: 26px; }
@media (max-width: 991.98px){
  .nav-cta-space{ margin-right: 0; }
}

.navlink{
  font-weight: 900;
  border-radius: 999px;
  padding: .70rem 1.08rem !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--glass-dark);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  will-change: transform;
}
.navlink:hover{
  background:
    linear-gradient(180deg, rgba(212,175,55,.18), rgba(255,255,255,.03));
  border-color: rgba(212,175,55,.45);
  transform: translateY(-1px);
  box-shadow: 0 16px 50px rgba(0,0,0,.32);
}
.navlink.is-active{
  background:
    linear-gradient(180deg, rgba(212,175,55,.24), rgba(255,255,255,.03));
  border-color: rgba(212,175,55,.80);
  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    0 0 0 1px rgba(212,175,55,.35) inset;
}

/* CTA button */
.btn-gold{
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color:#111 !important;
  font-weight: 950;
  border: 0;
  border-radius: 999px;
  padding: .80rem 1.42rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 22px 70px rgba(212,175,55,.28),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(0,0,0,.12);
  transition:
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn-gold::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.70), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(0,0,0,.10), transparent 55%),
    linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  opacity:.55;
  mix-blend-mode: soft-light;
}
.btn-gold::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-40%;
  width: 40%;
  height: 180%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.34), transparent);
  transform: rotate(18deg);
  transition: left .55s ease;
  opacity:.85;
}
.btn-gold:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 30px 100px rgba(212,175,55,.34),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(0,0,0,.14);
}
.btn-gold:hover::after{ left: 120%; }
.btn-gold:active{
  transform: translateY(0px) scale(.99);
  filter: brightness(1.01);
  box-shadow:
    0 18px 55px rgba(212,175,55,.22),
    inset 0 2px 8px rgba(0,0,0,.18);
}

/* Focus ring */
.navlink:focus, .btn-gold:focus, .nav-toggle:focus, .navbar-toggler:focus{
  outline: none;
  box-shadow: var(--focus), 0 22px 70px rgba(0,0,0,.40);
}

/* Hamburger */
.nav-toggle{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.55) !important;
  background: var(--glass-dark2);
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav-toggle:hover{
  background:
    linear-gradient(180deg, rgba(212,175,55,.12), rgba(255,255,255,.03));
  transform: translateY(-1px);
  box-shadow: 0 30px 110px rgba(0,0,0,.44);
}
.burger{
  width: 24px;
  height: 18px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
.burger-line{
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 14px rgba(212,175,55,.18);
  transition: transform var(--dur) var(--ease), opacity .18s ease;
}
.nav-open .burger-line:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-open .burger-line:nth-child(2){ opacity: 0; }
.nav-open .burger-line:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu */
.nav-collapse-dark{ background: transparent; }

@media (max-width: 991.98px){
  .nav-collapse-dark{
    margin-top: 14px;
    background:
      radial-gradient(circle at 20% 0%, rgba(212,175,55,.10), transparent 55%),
      linear-gradient(180deg, rgba(14,14,18,.94), rgba(10,10,12,.92));
    border: 1px solid rgba(212,175,55,.22);
    border-radius: 22px;
    padding: 14px 12px;
    box-shadow: 0 40px 140px rgba(0,0,0,.60);
    backdrop-filter: blur(12px);
    position: relative;
    text-align: center;
    overflow: hidden;
  }
  .nav-collapse-dark::before{
    content:"";
    position:absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.95), transparent);
    border-radius:999px;
    pointer-events:none;
  }

  /* ✅ Keep Bootstrap working */
  #navMain{
    transition: height .35s ease, opacity .35s ease;
    opacity: 0;
  }
  #navMain.show{ opacity: 1; }
  #navMain.collapsing{ opacity: 1; }

  .nav-collapse-dark .navbar-nav{
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 12px;
    padding-top: 12px;
  }
  .nav-collapse-dark .nav-item{
    width: 100%;
    display:flex;
    justify-content:center;
  }
  .nav-collapse-dark .navlink{
    width: min(380px, 92%);
    justify-content: center;
    text-align: center;
  }
  .nav-cta{
    width: 100%;
    justify-content: center;
    margin-top: 16px !important;
  }
  .nav-cta .btn-gold{
    width: min(380px, 92%);
  }
}

/* ✅ Bootstrap toggler matches nav-toggle */
.navbar-toggler{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.55) !important;
  background: var(--glass-dark2);
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  position: relative;
  z-index: 2005;
  cursor: pointer;
  touch-action: manipulation;
}
.navbar-toggler-icon{ filter: brightness(1.2); opacity: .95; }

/* ===========================
   TITLES / UNDERLINES
=========================== */
.page-title, .section-title, .gold-title{
  color: var(--text);
  font-weight: 950;
  position: relative;
  letter-spacing: -.15px;
}
.page-title::after,
.section-title::after,
.gold-title::after{
  content:"";
  display:block;
  width: 180px;
  height: 3px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,1), transparent);
  filter: drop-shadow(0 12px 22px rgba(212,175,55,.14));
}

/* ===========================
   HERO / KICKER
=========================== */
.hero{
  border-radius: var(--r-2xl);
  border: 1px solid rgba(212,175,55,.28);
  background:
    radial-gradient(circle at 18% 10%, rgba(212,175,55,.18), transparent 46%),
    radial-gradient(circle at 92% 20%, rgba(0,0,0,.030), transparent 55%),
    linear-gradient(135deg, #ffffff, #fbfbfd);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--r-2xl) - 10px);
  border: 1px solid rgba(0,0,0,.06);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.62), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(212,175,55,.12), transparent 55%);
  mix-blend-mode: soft-light;
  opacity:.72;
}
.kicker{
  display:inline-flex;
  padding:.46rem 1.02rem;
  border-radius:999px;
  font-size:.90rem;
  font-weight:950;
  color:#111;
  border: 1px solid rgba(212,175,55,.92);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.60), transparent 45%),
    linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10));
  box-shadow:
    0 14px 34px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.72);
}

/* ===========================
   SECTIONS / CARDS
=========================== */
.section, .card-lux{
  border-radius: var(--r-2xl);
  border: 1px solid rgba(212,175,55,.18);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.section::before, .card-lux::before{
  content:"";
  position:absolute;
  inset:-80px;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.70), transparent 46%),
    radial-gradient(circle at 80% 78%, rgba(212,175,55,.10), transparent 55%);
  mix-blend-mode: soft-light;
  opacity:.58;
}
.section:hover, .card-lux:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.52) !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.14);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.card-mini{
  border-radius: var(--r-xl);
  border: 1px solid rgba(0,0,0,.08);
  background:
    linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.card-mini::before{
  content:"";
  position:absolute;
  inset:-60px;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 10%, rgba(255,255,255,.70), transparent 46%),
    radial-gradient(circle at 90% 80%, rgba(212,175,55,.08), transparent 56%);
  mix-blend-mode: soft-light;
  opacity:.55;
}
.card-mini:hover{
  transform: translateY(-6px);
  border-color: rgba(212,175,55,.60) !important;
  box-shadow: 0 30px 95px rgba(0,0,0,.16);
}
.card-mini .fw-bold{
  letter-spacing: -.12px;
}
.card-mini .fw-bold::after{
  content:"";
  display:block;
  width: 58px;
  height: 2px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212,175,55,1), transparent);
  opacity: .78;
}

/* ===========================
   GALLERY (Desktop grid + Mobile snap scroll)
   ✅ Portfolio grid only (NOT vip-gallery)
=========================== */

/* Portfolio / Normal grid */
.gallery:not(.is-marquee):not(.vip-gallery){
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  align-items: start;
  align-content: start;
}

/* Card */
.gallery:not(.is-marquee):not(.vip-gallery) .g-item{
  grid-column: auto !important;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  border: 1px solid rgba(0,0,0,.08);
  background: #000;
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}

/* Fixed frame 4:5 */
.gallery:not(.is-marquee):not(.vip-gallery) .g-item::before{
  content: "";
  display: block;
  padding-top: 125%;
}

/* Overlay */
.gallery:not(.is-marquee):not(.vip-gallery) .g-item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.60;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.58));
  z-index: 2;
}

/* Media fills */
.gallery:not(.is-marquee):not(.vip-gallery) .g-item > img,
.gallery:not(.is-marquee):not(.vip-gallery) .g-item > video,
.gallery:not(.is-marquee):not(.vip-gallery) .g-item .g-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  margin: 0;
  padding: 0;
  border: 0;
  transform: scale(1.02);
  transition: transform .55s var(--ease), filter .55s var(--ease);
  filter: contrast(1.02) saturate(1.02);
}

/* Hover */
.gallery:not(.is-marquee):not(.vip-gallery) .g-item:hover{
  transform: translateY(-8px);
  box-shadow: 0 42px 120px rgba(0,0,0,.22);
  border-color: rgba(212,175,55,.68);
}
.gallery:not(.is-marquee):not(.vip-gallery) .g-item:hover > img,
.gallery:not(.is-marquee):not(.vip-gallery) .g-item:hover > video,
.gallery:not(.is-marquee):not(.vip-gallery) .g-item:hover .g-media{
  transform: scale(1.07);
  filter: contrast(1.08) saturate(1.08) brightness(1.02);
}

/* Caption (✅ FIXED broken token) */
.gallery:not(.is-marquee):not(.vip-gallery) .g-cap{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: .98rem;
  line-height: 1.35;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  background: rgba(0,0,0,.50);
  border-top: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 3;
}

/* Mobile: portfolio snap scroll only */
@media (max-width: 991.98px){
  .gallery:not(.is-marquee):not(.vip-gallery){
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .gallery:not(.is-marquee):not(.vip-gallery) .g-item{
    flex: 0 0 auto;
    width: clamp(220px, 72vw, 360px);
    scroll-snap-align: center;
  }
}

/* ===========================
   HOME MARQUEE (REELS)
=========================== */
.gallery.is-marquee{
  display:block !important;
  position: relative;
  overflow: hidden;
  padding: 6px 2px;
  isolation: isolate;
  max-width: 1100px;
  margin-inline: auto;
}
.gallery.is-marquee .marquee-track{
  display:flex;
  flex-wrap: nowrap;
  gap: 14px;
  will-change: transform;
  align-items: stretch;
}
.gallery.is-marquee .marquee-track .g-item{
  flex: 0 0 auto;
  width: clamp(150px, 16vw, 210px);
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  background: #000;
}
.gallery.is-marquee .g-item::before{
  content: none !important;
  padding-top: 0 !important;
}
.gallery.is-marquee .home-media{
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  display: block;
  border: 0;
  background:#000;
}
.gallery.is-marquee::before,
.gallery.is-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 80px;
  pointer-events:none;
  z-index: 5;
}
.gallery.is-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,0));
}
.gallery.is-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,.98), rgba(255,255,255,0));
}
@keyframes harminMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(var(--marquee-to, -50%)); }
}
@media (max-width: 576px){
  .gallery.is-marquee .marquee-track .g-item{
    width: 72vw;
    border-radius: 24px;
  }
}
@media (hover:hover){
  .gallery.is-marquee:hover .marquee-track{
    animation-play-state: paused !important;
  }
}
.gallery.is-marquee .marquee-track{
  width: max-content;
  transform: translate3d(0,0,0);
}

/* ==========================================================
   ✅ VIP GALLERY (Home + Portfolio) + VIP MODAL
========================================================== */

/* Gallery Wrapper */
.vip-gallery{
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
  overflow: hidden;
  padding: 6px 2px;
  isolation: isolate;

  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* Track (JS builds it) */
.vip-gallery .vip-track{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Card */
.vip-gallery .g-item{
  flex: 0 0 auto;
  width: clamp(170px, 18vw, 240px);
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
  isolation: isolate;
}

/* Aspect Reels / Stories */
.vip-gallery .g-item::before{
  content:"";
  display:block;
  padding-top: 177.78%;
}

/* Media */
.vip-gallery .g-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  background:#000;
  transform: scale(1.01);
}

/* preview video should not hijack controls */
.vip-gallery video.g-preview{ pointer-events: none; }

/* Overlay gradient */
.vip-gallery .g-item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.62) 100%);
  opacity: .85;
}

/* caption */
.vip-gallery .g-cap{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 10px 12px;
  color: #fff;
  font-weight: 900;
  font-size: .95rem;
  text-align: center;
  text-shadow: 0 10px 22px rgba(0,0,0,.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* clickable layer */
.vip-gallery .g-open{
  position:absolute;
  inset:0;
  z-index: 4;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* play badge */
.vip-gallery .g-badge{
  position:absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight: 950;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

/* hover desktop */
@media (hover:hover){
  .vip-gallery .g-item{
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .vip-gallery .g-item:hover{
    transform: translateY(-6px);
    border-color: rgba(212,175,55,.55);
    box-shadow: 0 32px 110px rgba(0,0,0,.22);
  }
}

/* Mobile: bigger cards */
@media (max-width: 576px){
  .vip-gallery .g-item{
    width: 72vw;
    border-radius: 24px;
  }
}

/* ==========================================================
   ✅ VIP MODAL (Professional)
========================================================== */
.vip-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.vip-modal.is-open{ display:block; }

.vip-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.vip-modal__panel{
  position: relative;
  width: min(980px, 94vw);
  margin: 5vh auto 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(10,10,12,.92);
  border: 1px solid rgba(212,175,55,.22);
  box-shadow: 0 50px 180px rgba(0,0,0,.60);
}

.vip-modal__close{
  position:absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-weight: 950;
}

.vip-modal__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 60px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: #fff;
  font-weight: 950;
  font-size: 28px;
}
.vip-modal__nav--prev{ right: 12px; }
.vip-modal__nav--next{ left: 12px; }

.vip-modal__body{
  padding: 56px 12px 10px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.vip-modal__media{
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 16px;
  background: #000;
}

.vip-modal__title{
  padding: 10px 14px 14px;
  color: rgba(255,255,255,.92);
  text-align: center;
  font-weight: 900;
  border-top: 1px solid rgba(255,255,255,.08);
}
/* ===========================
   NAVBAR (FULL-BLEED + CINEMATIC) ✅ REPLACE ENTIRE NAVBAR + FIX BLOCKS
   ✅ Makes navbar stick to site edges (100vw) even inside .container
=========================== */

/* 0) Remove any default page gaps (important) */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

/* 1) Main navbar wrapper */
.nav-dark{
  position: sticky;
  top: 0;
  z-index: 1000;

  /* keep element full width in normal flow */
  width: 100%;

  /* important for full-bleed background layer */
  isolation: isolate;
}

/* 2) Full-bleed background layer (100vw) */
.nav-dark::before{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;

  /* full viewport width even if parent is inside .container */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);

  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(circle at 30% 0%, rgba(212,175,55,.12), transparent 55%),
    radial-gradient(circle at 92% 0%, rgba(212,175,55,.08), transparent 55%),
    linear-gradient(180deg, #050506, var(--black)) !important;

  border-bottom: 1px solid rgba(212,175,55,.22);
  box-shadow: 0 20px 90px rgba(0,0,0,.34);
}

/* 3) Scrolled state */
.nav-dark.is-scrolled::before{
  box-shadow: 0 34px 160px rgba(0,0,0,.52);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* 4) Navbar inner layout */
.nav-shell{
  min-height: 92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* 5) Optional gold line */
.nav-gold-line{
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,175,55,.20),
    rgba(212,175,55,.95),
    rgba(212,175,55,.20),
    transparent
  );
  filter: drop-shadow(0 10px 22px rgba(212,175,55,.18));
}

/* 6) Keep content padded even if full-bleed background */
.nav-dark .container,
.nav-dark .container-fluid,
.nav-dark .container-lg,
.nav-dark .container-md,
.nav-dark .container-sm,
.nav-dark .container-xl,
.nav-dark .container-xxl{
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
}

/* Brand */
.brand-wrap{ text-decoration:none; }
.brand-title{
  color:#fff;
  font-weight: 950;
  font-size: 1.15rem;
  letter-spacing: .2px;
}
.brand-sub{
  color: rgba(255,255,255,.72);
  font-size:.78rem;
  margin-top:2px;
}

/* Logo */
.site-logo{
  width: 110px;
  height: 110px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter:
    drop-shadow(0 0 14px rgba(212,175,55,.70))
    drop-shadow(0 30px 90px rgba(212,175,55,.15));
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.site-logo:hover{
  transform: translateY(-2px) scale(1.035);
  filter:
    drop-shadow(0 0 20px rgba(212,175,55,.85))
    drop-shadow(0 42px 120px rgba(212,175,55,.18));
}

.nav-items-gap{ gap: 12px; }
.nav-cta-space{ margin-right: 26px; }
@media (max-width: 991.98px){
  .nav-cta-space{ margin-right: 0; }
}

/* Links */
.navlink{
  font-weight: 900;
  border-radius: 999px;
  padding: .70rem 1.08rem !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--glass-dark);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  will-change: transform;
}
.navlink:hover{
  background:
    linear-gradient(180deg, rgba(212,175,55,.18), rgba(255,255,255,.03));
  border-color: rgba(212,175,55,.45);
  transform: translateY(-1px);
  box-shadow: 0 16px 50px rgba(0,0,0,.32);
}
.navlink.is-active{
  background:
    linear-gradient(180deg, rgba(212,175,55,.24), rgba(255,255,255,.03));
  border-color: rgba(212,175,55,.80);
  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    0 0 0 1px rgba(212,175,55,.35) inset;
}

/* CTA */
.btn-gold{
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color:#111 !important;
  font-weight: 950;
  border: 0;
  border-radius: 999px;
  padding: .80rem 1.42rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 22px 70px rgba(212,175,55,.28),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(0,0,0,.12);
  transition:
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn-gold::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.70), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(0,0,0,.10), transparent 55%),
    linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  opacity:.55;
  mix-blend-mode: soft-light;
}
.btn-gold::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-40%;
  width: 40%;
  height: 180%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.34), transparent);
  transform: rotate(18deg);
  transition: left .55s ease;
  opacity:.85;
}
.btn-gold:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 30px 100px rgba(212,175,55,.34),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(0,0,0,.14);
}
.btn-gold:hover::after{ left: 120%; }
.btn-gold:active{
  transform: translateY(0px) scale(.99);
  filter: brightness(1.01);
  box-shadow:
    0 18px 55px rgba(212,175,55,.22),
    inset 0 2px 8px rgba(0,0,0,.18);
}

/* Focus ring */
.navlink:focus, .btn-gold:focus, .nav-toggle:focus, .navbar-toggler:focus{
  outline: none;
  box-shadow: var(--focus), 0 22px 70px rgba(0,0,0,.40);
}

/* Bootstrap toggler */
.navbar-toggler{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.55) !important;
  background: var(--glass-dark2);
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  position: relative;
  z-index: 2005;
  cursor: pointer;
  touch-action: manipulation;
}
.navbar-toggler-icon{ filter: brightness(1.2); opacity: .95; }

/* Mobile menu panel */
.nav-collapse-dark{ background: transparent; }

@media (max-width: 991.98px){
  .nav-collapse-dark{
    margin-top: 14px;
    background:
      radial-gradient(circle at 20% 0%, rgba(212,175,55,.10), transparent 55%),
      linear-gradient(180deg, rgba(14,14,18,.94), rgba(10,10,12,.92));
    border: 1px solid rgba(212,175,55,.22);
    border-radius: 22px;
    padding: 14px 12px;
    box-shadow: 0 40px 140px rgba(0,0,0,.60);
    backdrop-filter: blur(12px);
    position: relative;
    text-align: center;
    overflow: hidden;
  }
  .nav-collapse-dark::before{
    content:"";
    position:absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.95), transparent);
    border-radius:999px;
    pointer-events:none;
  }

  /* ✅ Keep Bootstrap collapse working */
  #navMain{
    transition: height .35s ease, opacity .35s ease;
    opacity: 0;
  }
  #navMain.show{ opacity: 1; }
  #navMain.collapsing{ opacity: 1; }

  .nav-collapse-dark .navbar-nav{
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 12px;
    padding-top: 12px;
  }
  .nav-collapse-dark .nav-item{
    width: 100%;
    display:flex;
    justify-content:center;
  }
  .nav-collapse-dark .navlink{
    width: min(380px, 92%);
    justify-content: center;
    text-align: center;
  }
  .nav-cta{
    width: 100%;
    justify-content: center;
    margin-top: 16px !important;
  }
  .nav-cta .btn-gold{
    width: min(380px, 92%);
  }
}
/* ===========================
   NAVBAR — FINAL (Mobile + Desktop)
=========================== */

html, body{
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: clip;
}

/* Navbar wrapper */
.nav-dark{
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;

  background:
    radial-gradient(circle at 30% 0%, rgba(212,175,55,.12), transparent 55%),
    radial-gradient(circle at 92% 0%, rgba(212,175,55,.08), transparent 55%),
    linear-gradient(180deg, #050506, #060607);

  border-bottom: 1px solid rgba(212,175,55,.22);
  box-shadow: 0 20px 90px rgba(0,0,0,.34);
  will-change: backdrop-filter, box-shadow;
}

.nav-dark.is-scrolled{
  backdrop-filter: blur(14px);
  box-shadow: 0 34px 160px rgba(0,0,0,.52);
}

/* Inner */
.nav-shell{
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Brand */
.brand-wrap{ text-decoration: none; }
.brand-title{
  color:#fff;
  font-weight: 950;
  font-size: 1.15rem;
}
.brand-sub{
  color: rgba(255,255,255,.72);
  font-size:.78rem;
}

/* Logo */
.site-logo{
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 14px rgba(212,175,55,.7))
    drop-shadow(0 30px 90px rgba(212,175,55,.15));
}

/* Links */
.nav-items-gap{ gap: 12px; }

.navlink{
  font-weight: 900;
  border-radius: 999px;
  padding: .7rem 1.1rem;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.navlink.is-active{
  border-color: rgba(212,175,55,.85);
  background: linear-gradient(180deg, rgba(212,175,55,.25), rgba(255,255,255,.03));
}

/* CTA */
.btn-gold{
  background: linear-gradient(135deg, #f4dc93, #d4af37);
  color:#111 !important;
  font-weight: 950;
  border-radius: 999px;
  padding: .8rem 1.4rem;
  border: 0;
}

/* Toggler */
.navbar-toggler{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.55);
  background: rgba(255,255,255,.08);
}

/* Burger */
.burger{
  width: 24px;
  height: 18px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
.burger-line{
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transition: .25s;
}

body.nav-open .burger-line:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
body.nav-open .burger-line:nth-child(2){
  opacity: 0;
}
body.nav-open .burger-line:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile menu */
@media (max-width: 991px){
  .site-logo{
    width: 64px;
    height: 64px;
  }

  .nav-collapse-dark{
    margin-top: 12px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(10,10,12,.94);
    border: 1px solid rgba(212,175,55,.22);
    box-shadow: 0 40px 140px rgba(0,0,0,.6);
    text-align: center;
  }

  .nav-collapse-dark .navlink{
    width: 100%;
    text-align: center;
  }

  .nav-cta{
    margin-top: 12px;
  }
}

/* Gold line */
.nav-gold-line{
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,175,55,.95),
    transparent
  );
}
/* ===========================
   FOOTER — BLACK & WHITE
=========================== */

.footer-lux{
  background: #050506; /* مشکی عمیق */
  color: #ffffff;
  border-top: 1px solid rgba(212,175,55,.25);
}

/* همه متن‌ها */
.footer-lux,
.footer-lux p,
.footer-lux span,
.footer-lux li,
.footer-lux small,
.footer-lux div{
  color: rgba(255,255,255,.88);
}

/* تیترهای فوتر */
.footer-lux .footer-title,
.footer-lux .footer-head{
  color: #ffffff;
  font-weight: 900;
}

/* لینک‌ها */
.footer-lux a{
  color: rgba(255,255,255,.92);
  transition: color .2s ease, opacity .2s ease;
}
.footer-lux a:hover{
  color: var(--gold);
  opacity: 1;
}

/* متن‌های کم‌رنگ */
.footer-lux .footer-muted,
.footer-lux .footer-note,
.footer-lux .small{
  color: rgba(255,255,255,.65);
}

/* لیست‌ها */
.footer-lux ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

/* خط جداکننده */
.footer-lux .footer-line{
  border-color: rgba(255,255,255,.12);
}

/* دکمه‌ها داخل فوتر */
.footer-lux .btn-gold{
  color: #111 !important;
}
.footer-lux .btn-outline-gold{
  color: #ffffff !important;
  border-color: var(--gold);
}
.footer-lux .btn-outline-gold:hover{
  background: var(--gold);
  color: #111 !important;
}

/* لوگوی فوتر (اگه همونه که هدره) */
.footer-lux .site-logo{
  filter:
    drop-shadow(0 0 10px rgba(212,175,55,.6))
    drop-shadow(0 20px 60px rgba(212,175,55,.2));
}

/* موبایل */
@media (max-width: 576px){
  .footer-lux{
    text-align: center;
  }
}
.skip-link{
  position:absolute;
  top:-40px;
  right:12px;
  background:#fff;
  color:#000;
  padding:10px 12px;
  border-radius:10px;
  z-index:9999;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }
.contact-card--top{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.contact-card--mid{
  border-radius:0;
}
.contact-card--bottom{
  border-top-left-radius:0;
  border-top-right-radius:0;
}

.contact-links{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}

.contact-link{
  color:var(--text);
  font-weight:950;
  text-decoration:none;
}

.contact-ig{
  color:var(--gold);
  font-weight:950;
  text-decoration:none;
}

.contact-address{
  color:var(--text);
  text-decoration:none;
  font-weight:900;
}

.contact-mapbox{
  overflow:hidden;
  border-radius:18px;
}

.contact-maplink{
  color:var(--gold);
  font-weight:950;
  text-decoration:none;
}
/* ===== Contact Box (like screenshot) ===== */

/* ===== Contact Section – exact match to screenshot ===== */

.contact-wrap{
  margin-top: 8px;
}

.contact-page-title{
  text-align: right;
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 10px;
}

/* main phone card */
.contact-card{
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 40px rgba(0,0,0,.06);
}

.contact-card__inner{
  padding: 18px 22px 20px;
}

/* header */
.contact-card__head{
  position: relative;
  display: block;
  text-align: right;
  margin-bottom: 6px;
}

.contact-card__title{
  font-size: 20px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* gold line – RIGHT aligned under title */
.contact-card__accent{
  display: block;
  margin-top: 6px;
  margin-right: auto;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    to left,
    rgba(210,170,70,.95),
    rgba(210,170,70,0)
  );
}

/* phone numbers */
.contact-card__nums{
  margin-top: 14px;
  text-align: left;          /* دقیقا مثل عکس */
  font-size: 17px;
  font-weight: 800;
  color: #222;
  justify-content: flex-start;
}

.contact-num{
  color: #222;
  font-weight: 900;
  letter-spacing: .5px;
}

.contact-sep{
  opacity: .35;
}

/* buttons */
.contact-card__actions{
  margin-top: 14px;
  justify-content: flex-start;
}

.btn-gold-soft{
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 14px;
}

.btn-ghost{
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 14px;
}

/* mini cards (instagram / address) */
.contact-mini .card-mini{
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 30px rgba(0,0,0,.05);
}

.contact-ig{
  font-size: 16px;
  font-weight: 900;
}

/* spacing fix between cards */
.contact-grid{
  gap: 12px;
}

/* mobile fine-tune */
@media (max-width: 576px){
  .contact-card__nums{
    font-size: 16px;
  }
}