* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/YekanBakh/YekanBakhFaNum-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/YekanBakh/YekanBakhFaNum-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/YekanBakh/YekanBakhFaNum-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/YekanBakh/YekanBakhFaNum-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/YekanBakh/YekanBakhFaNum-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

:root {
  /* Fonts */

  --font-fa: "Yekan Bakh", sans-serif;
  --font-en-serif: "Cormorant Garamond", serif;

  /* Colors */
  --navy-950: #000410;
  --navy-900: #010510;
  --navy-800: #0b101c;
  --navy-700: #12192c;
  --gold-bright: #d6b78f;
  --gold-champagne: #e7cdad;
  --gold-soft: #d4b48c;
  --cream: #f3eee6;
  --muted: #93a2b8;
  /* --serif: 'Cormorant Garamond', 'Vazirmatn', serif;
    --sans: 'Vazirmatn', 'Iran Sans', sans-serif; */
}

body {
  font-family: var(--font-fa);
  background-color: var(--navy-950);
  min-height: 100vh;
  overflow-x: hidden;
}

.gold-text {
  background: linear-gradient(142deg, #cf7e3c 0%, var(--gold-soft) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
svg {
  width: 16px;
  height: 16px;
}

/* ===== خطوط طلایی محو ===== */
.gold-line {
  width: 100%;
  max-width: 150px;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    #d6b78f 15%,
    #f8e8cc 50%,
    #d6b78f 85%,
    transparent
  );
  margin: 0 auto;
  border-radius: 2px;
}

.gold-line--hero {
  max-width: 150px;
  margin: 0 0 0 0;
}

.gold-line--section {
  max-width: 120px;
  margin: 0 auto;
}

.gold-line--solutions {
  max-width: 100px;
  margin: 0 0 24px 0;
}

.gold-line--why {
  max-width: 100px;
  margin: 0 auto 28px;
}

#maje-hero-gold-line {
  margin-bottom: 12px;
}
/* ========================================================
   هدر اصلی / HERO
   ======================================================== */
.vima-header {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 6%;
  padding-top: 100px;
  background-color: var(--navy-900);
}

.vima-header::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-image: url('../img/bg.png');
    background-size: cover;
    background-position: center 28%;
    background-repeat: no-repeat;
    opacity: 0.55; */
  z-index: 0;
}
#home-header::before {
  background-image: url("../img/bg.png");
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  opacity: 0.55;
}

.vima-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      60% 80% at 18% 30%,
      rgba(10, 22, 40, 0.35) 0%,
      rgba(6, 13, 24, 0.6) 62%,
      rgba(6, 13, 24, 0.75) 100%
    ),
    linear-gradient(180deg, rgba(6, 13, 24, 0.2) 0%, rgba(6, 13, 24, 0.35) 100%);
  z-index: 1;
}

.header-frame {
  position: absolute;
  inset: 0px 22px 22px 22px;
  border: 1px solid rgba(245, 176, 65, 0.18);
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
}

.header-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  color: #fff;
  animation: fadeSlideUp 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.eyebrow-line {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  letter-spacing: 6px;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.brand-name {
  font-family: var(--font-en-serif);
  font-weight: 600;
  font-size: clamp(2.8rem, 7vw, 5rem);
  letter-spacing: 5px;
  line-height: 1.05;
  margin-bottom: 14px;
}

.gold-line--hero {
  margin-bottom: 26px;
}

.main-headline {
  font-family: var(--sans);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.85;
  margin-bottom: 40px;
  color: #dbe2ec;
  max-width: 520px;
}

.main-headline strong {
  font-weight: 800;
  color: var(--gold-champagne);
}
#maje-headline {
  margin-bottom: 4px;
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 40px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease,
    color 0.4s ease, background-color 0.4s ease;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--sans);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 185px;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: right 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  pointer-events: none;
}

.btn:hover::before {
  right: 120%;
}

.btn span,
.btn .icon-arrow {
  position: relative;
  z-index: 2;
}

.btn-primary {
  background: linear-gradient(
    135deg,
    var(--gold-champagne) 0%,
    #c9a06f 55%,
    #b8905e 100%
  );
  color: var(--navy-950);
  border-color: rgba(231, 205, 173, 0.6);
  box-shadow: 0 10px 25px -8px rgba(198, 155, 100, 0.5);
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(198, 155, 100, 0.6);
  border-color: #f6e9d7;
}

.btn-outline {
  background: rgba(255, 255, 255, 0.03);
  color: var(--cream);
  border: 1px solid rgba(231, 205, 173, 0.3);
  backdrop-filter: blur(12px);
}

.btn-outline:hover {
  transform: translateY(-4px);
  border-color: var(--gold-champagne);
  color: #fff;
  background: rgba(231, 205, 173, 0.1);
}

.icon-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover .icon-arrow {
  transform: translateX(-6px);
}

.btn:focus-visible {
  outline: 2px solid var(--gold-champagne);
  outline-offset: 3px;
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .icon-arrow,
  .header-content,
  .reveal {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .vima-header {
    min-height: 480px;
    height: 84vh;
    padding: 0 5%;
  }

  .header-content {
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .gold-line--hero {
    margin: 0 auto 26px;
  }

  .main-headline {
    max-width: 100%;
    text-align: center;
  }

  .btn-group {
    justify-content: center;
    gap: 15px;
  }

  .btn {
    padding: 15px 30px;
    font-size: 0.9rem;
    min-width: 155px;
  }

  .header-frame {
    inset: 12px;
  }
}

@media (max-width: 480px) {
  .vima-header {
    min-height: 430px;
    height: 78vh;
    padding: 0 4%;
  }

  .brand-name {
    font-size: 2.5rem;
    letter-spacing: 3px;
  }

  .eyebrow-line {
    letter-spacing: 4px;
  }

  .main-headline {
    font-size: 1.05rem;
  }

  .btn-group {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .btn {
    width: 100%;
    padding: 16px 22px;
    min-width: unset;
  }
}

/* ========================================================
   بخش OUR BRANDS
   ======================================================== */
.brands-section {
  padding: 50px 6% 50px;
  background: linear-gradient(180deg, var(--navy-950) 0%, #08111f 100%);
  position: relative;
  overflow: hidden;
}

.brands-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 180, 140, 0.35),
    transparent
  );
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--sans);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 20px;
}

.section-title strong {
  font-weight: 800;
}

.gold-line--section {
  margin-bottom: 20px;
}

.section-desc {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.9;
  font-weight: 300;
}

.brands-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.brand-card {
  border-radius: 14px;
  position: relative;
  border: 1px solid rgba(212, 180, 140, 0.25);
  overflow: hidden;
  min-height: 340px;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.brand-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.brand-card--lumiere {
  background-image: url("../img/section-1.png");
}

.brand-card--maje {
  background-image: url("../img/section-2.png");
}

.brand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(6, 13, 24, 0.94) 0%,
    rgba(6, 13, 24, 0.55) 42%,
    rgba(6, 13, 24, 0.35) 100%
  );
  transition: background 0.4s ease;
}

.brand-card:hover::after {
  background: linear-gradient(
    0deg,
    rgba(6, 13, 24, 0.97) 0%,
    rgba(6, 13, 24, 0.68) 42%,
    rgba(6, 13, 24, 0.45) 100%
  );
}

.brand-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 180, 140, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.brand-card.is-visible:hover {
  transform: translateY(-6px);
}

.brand-card-content {
  position: relative;
  z-index: 2;
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
}

.brand-monogram {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-family: var(--font-en-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold-champagne);
  border: 1px solid rgba(212, 180, 140, 0.4);
  background: rgba(212, 180, 140, 0.08);
  transition: all 0.4s ease;
}

.brand-card:hover .brand-monogram {
  border-color: var(--gold-champagne);
  background: rgba(212, 180, 140, 0.16);
}

.brand-subtitle {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.brand-card-title {
  font-family: var(--font-en-serif);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.brand-card-desc {
  width: 226px;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: #d4cdc4;
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 18px;
  max-width: 92%;
}

.brand-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-soft);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: all 0.3s ease;
}

.brand-card-link::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-soft);
  transition: width 0.3s ease;
}

.brand-card-link {
  position: relative;
}

.brand-card-link:hover {
  color: var(--gold-champagne);
}

.brand-card-link:hover::after {
  width: 100%;
}

.link-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.brand-card-link:hover .link-arrow {
  transform: translateX(6px);
}

/* ========================================================
   بخش PROFESSIONAL SOLUTIONS
   ======================================================== */
.solutions-section {
  padding: 80px 6%;
  background: linear-gradient(180deg, #08111f 0%, var(--navy-950) 100%);
  position: relative;
  overflow: hidden;
}

.solutions-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 180, 140, 0.35),
    transparent
  );
}

.solutions-wrapper {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1180px;
  margin: 0 auto;
}

.solutions-content {
  flex: 0 0 50%;
  max-width: 50%;
}

.solutions-eyebrow {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.solutions-title {
  font-family: var(--font-en-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 20px;
}

.gold-line--solutions {
  max-width: 100px;
  margin: 0 0 24px 0;
}

.solutions-desc {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.9;
  font-weight: 300;
  max-width: 480px;
  margin-bottom: 32px;
}

.solutions-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-champagne);
  text-decoration: none;
  padding: 14px 32px;
  border: 1px solid rgba(212, 180, 140, 0.3);
  border-radius: 16px;
  transition: all 0.4s ease;
  background: rgba(212, 180, 140, 0.05);
}

.solutions-btn:hover {
  background: rgba(212, 180, 140, 0.15);
  border-color: var(--gold-champagne);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212, 180, 140, 0.15);
}

.btn-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.solutions-btn:hover .btn-arrow {
  transform: translateX(6px);
}

.solutions-image {
  flex: 0 0 50%;
  max-width: 50%;
}

.solutions-image-wrapper {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212, 180, 140, 0.15);
  position: relative;
}

.solutions-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 13, 24, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

.solutions-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.solutions-image-wrapper:hover img {
  transform: scale(1.03);
}

/* ========================================================
   بخش WHY CHOOSE LUMIÈRE — بازطراحی‌شده
   ======================================================== */
.why-section {
  padding: 90px 6% 10px;
  background: linear-gradient(180deg, var(--navy-950) 0%, #0a1628 100%);
  position: relative;
  overflow: hidden;
}

.why-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 180, 140, 0.35),
    transparent
  );
}

/* درخشش محیطی پشت محتوا برای حس لوکس‌تر */
.why-section::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 120%);
  height: 520px;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 180, 140, 0.09) 0%,
    rgba(212, 180, 140, 0.03) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.why-wrapper {
  display: flex;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.why-content {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
  position: relative;
}

/* گوشه‌های تزئینی هم‌راستا با فریم هدر */
.why-content::before,
.why-content::after {
  content: "";
  position: absolute;
  top: -30px;
  width: 34px;
  height: 34px;
  border-top: 1px solid rgba(212, 180, 140, 0.35);
  pointer-events: none;
}

.why-content::before {
  right: -10px;
  border-right: 1px solid rgba(212, 180, 140, 0.35);
  border-radius: 0 4px 0 0;
}

.why-content::after {
  left: -10px;
  border-left: 1px solid rgba(212, 180, 140, 0.35);
  border-radius: 4px 0 0 0;
}

.why-eyebrow {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.why-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 20px;
}

.why-title strong {
  font-weight: 700;
}

.gold-line--why {
  max-width: 100px;
  margin: 0 auto 44px;
}

/* ===== شبکه ویژگی‌ها به‌صورت کارت ===== */
.why-features {
  list-style: none;
  padding: 0;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 760px;
}

.why-features li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 26px 18px 22px;
  border-radius: 12px;
  border: 1px solid rgba(212, 180, 140, 0.16);
  background: linear-gradient(
    160deg,
    rgba(212, 180, 140, 0.06) 0%,
    rgba(16, 31, 54, 0.35) 100%
  );
  font-family: var(--sans);
  font-size: 0.85rem;
  color: #d4cdc4;
  font-weight: 300;
  line-height: 1.55;
  white-space: normal;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease,
    box-shadow 0.4s ease, background 0.4s ease;
}

.why-features.is-visible li {
  opacity: 1;
  transform: translateY(0);
}

.why-features li:nth-child(1) {
  transition-delay: 0.05s;
}
.why-features li:nth-child(2) {
  transition-delay: 0.14s;
}
.why-features li:nth-child(3) {
  transition-delay: 0.23s;
}
.why-features li:nth-child(4) {
  transition-delay: 0.32s;
}
.why-features li:nth-child(5) {
  transition-delay: 0.41s;
}
.why-features li:nth-child(6) {
  transition-delay: 0.5s;
}

.why-features li:hover {
  border-color: rgba(231, 205, 173, 0.55);
  background: linear-gradient(
    160deg,
    rgba(212, 180, 140, 0.13) 0%,
    rgba(16, 31, 54, 0.45) 100%
  );
  box-shadow: 0 16px 34px -14px rgba(212, 180, 140, 0.35);
  transform: translateY(-5px);
}

.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-950);
  font-size: 0.85rem;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8e8cc 0%, var(--gold-soft) 85%);
  box-shadow: 0 6px 16px -4px rgba(212, 180, 140, 0.5);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

.why-features li:hover .why-icon {
  transform: rotate(180deg) scale(1.08);
  box-shadow: 0 10px 22px -4px rgba(212, 180, 140, 0.6);
}

.why-feature-text {
  position: relative;
  z-index: 1;
}

/* ===== متن پایانی برند ===== */
.why-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 8px;
  margin-top: -20px;
}

.tagline-line {
  flex: 1;
  height: 1px;
  max-width: 46px;
  background: linear-gradient(90deg, transparent, rgba(212, 180, 140, 0.4));
}

.why-tagline .tagline-line:last-child {
  background: linear-gradient(90deg, rgba(212, 180, 140, 0.4), transparent);
}

.tagline-diamond {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold-champagne);
  box-shadow: 0 0 10px rgba(245, 176, 65, 0.55);
  flex-shrink: 0;
}

.tagline-text {
  font-family: var(--font-en-serif);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-soft);
  letter-spacing: 1px;
  white-space: nowrap;
}

.tagline-text span {
  color: var(--gold-champagne);
  font-weight: 500;
}

.why-footer-desc {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 32px;
  letter-spacing: 0.5px;
}

.why-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-champagne);
  text-decoration: none;
  padding: 14px 32px;
  border: 1px solid rgba(212, 180, 140, 0.3);
  border-radius: 16px;
  transition: all 0.4s ease;
  background: rgba(212, 180, 140, 0.05);
}

.why-btn:hover {
  background: rgba(212, 180, 140, 0.15);
  border-color: var(--gold-champagne);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212, 180, 140, 0.15);
}

.why-btn .btn-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.why-btn:hover .btn-arrow {
  transform: translateX(6px);
}

/* ===== ریسپانسیو ===== */
@media (max-width: 1024px) {
  .solutions-wrapper {
    gap: 40px;
  }

  .brands-grid {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .solutions-section {
    padding: 60px 5%;
  }

  .solutions-wrapper {
    flex-direction: column;
    gap: 32px;
  }

  .solutions-content {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  .gold-line--solutions {
    margin: 0 auto 24px;
  }

  .solutions-desc {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .solutions-image {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .solutions-image-wrapper {
    max-height: 320px;
  }

  .why-section {
    padding: 64px 5% 72px;
  }

  .why-content::before,
  .why-content::after {
    display: none;
  }

  .why-features {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .why-tagline {
    gap: 10px;
  }

  .tagline-line {
    max-width: 20px;
  }

  .tagline-text {
    font-size: 0.85rem;
    white-space: normal;
  }

  .why-footer-desc {
    font-size: 0.8rem;
  }

  .brands-grid {
    grid-template-columns: 1fr;
  }

  .brand-card {
    min-height: 280px;
  }

  .brand-card-content {
    padding: 26px 24px;
    min-height: 280px;
  }

  .brand-card-title {
    font-size: 1.7rem;
  }
}

@media (max-width: 480px) {
  .solutions-section {
    padding: 40px 4%;
  }

  .solutions-title {
    font-size: 1.6rem;
  }

  .solutions-desc {
    font-size: 0.9rem;
  }

  .solutions-btn {
    padding: 12px 24px;
    font-size: 0.85rem;
  }

  .solutions-image-wrapper {
    max-height: 240px;
  }

  .why-section {
    padding: 48px 4% 56px;
  }

  .why-title {
    font-size: 1.6rem;
  }

  .why-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .why-features li {
    flex-direction: row;
    text-align: right;
    justify-content: flex-start;
    padding: 16px 18px;
  }

  .why-icon {
    width: 34px;
    height: 34px;
    font-size: 0.7rem;
  }

  .why-btn {
    padding: 12px 24px;
    font-size: 0.85rem;
  }

  .tagline-text {
    font-size: 0.72rem;
  }

  .why-footer-desc {
    font-size: 0.75rem;
  }

  .brands-section {
    padding: 56px 4% 64px;
  }

  .brand-card {
    min-height: 250px;
  }

  .brand-card-content {
    padding: 20px 18px;
    min-height: 250px;
  }

  .brand-monogram {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .section-desc {
    font-size: 0.85rem;
  }

  .brand-card-title {
    font-size: 1.4rem;
  }

  .brand-card-desc {
    font-size: 0.78rem;
  }
}

/* ========================================================
بخش آخرین مقالات (با عکس)
======================================================== */
.articles-section {
  padding: 80px 6%;
  background: linear-gradient(180deg, #0a1628 0%, var(--navy-950) 100%);
  position: relative;
  overflow: hidden;
}

.articles-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 180, 140, 0.35),
    transparent
  );
}

.articles-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto 48px;
}

.articles-title-group {
  text-align: right;
}

.articles-eyebrow {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.articles-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 12px;
}

.articles-title strong {
  font-weight: 700;
}

.gold-line--articles {
  max-width: 80px;
  margin: 0 0 0 0;
}

.articles-view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gold-soft);
  text-decoration: none;
  padding: 10px 24px;
  border: 1px solid rgba(212, 180, 140, 0.2);
  border-radius: 16px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.articles-view-all:hover {
  border-color: var(--gold-champagne);
  color: var(--gold-champagne);
  background: rgba(212, 180, 140, 0.05);
  transform: translateY(-2px);
}

.articles-view-all .btn-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.articles-view-all:hover .btn-arrow {
  transform: translateX(6px);
}

/* ===== گرید مقالات ===== */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.article-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.article-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--gold-soft), transparent);
  transition: height 0.4s ease;
  z-index: 2;
}

.article-card:hover::before {
  height: 100%;
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 180, 140, 0.2);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

/* ===== تصویر مقاله ===== */
.article-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
}

.article-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(6, 13, 24, 0.6) 100%
  );
  z-index: 1;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.article-card:hover .article-image img {
  transform: scale(1.05);
}

/* ===== بدنه مقاله ===== */
.article-body {
  padding: 20px 24px 24px;
  position: relative;
}

.article-number {
  font-family: var(--serif);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold-soft);
  letter-spacing: 1px;
  opacity: 0.6;
  display: inline-block;
  margin-bottom: 6px;
}

.article-title {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.6;
  margin-bottom: 8px;
  min-height: 48px;
}

.article-date {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 12px;
  display: block;
}

.article-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gold-soft);
  text-decoration: none;
  transition: all 0.3s ease;
  width: fit-content;
}

.article-link .link-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.article-link:hover {
  color: var(--gold-champagne);
}

.article-link:hover .link-arrow {
  transform: translateX(6px);
}

/* ===== مقاله ویژه ===== */
.article-card--featured {
  border-color: rgba(212, 180, 140, 0.2);
  background: rgba(212, 180, 140, 0.03);
}

.article-card--featured::before {
  background: linear-gradient(180deg, var(--gold-champagne), transparent);
}

.article-card--featured .article-image {
  height: 200px;
}

/* ===== ریسپانسیو ===== */
@media (max-width: 1024px) {
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .articles-section {
    padding: 60px 5%;
  }

  .articles-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 36px;
  }

  .articles-title-group {
    text-align: center;
  }

  .gold-line--articles {
    margin: 0 auto;
  }

  .articles-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .article-image {
    height: 140px;
  }

  .article-body {
    padding: 16px 18px 18px;
  }

  .article-title {
    font-size: 0.9rem;
    min-height: 40px;
  }

  .article-card--featured .article-image {
    height: 160px;
  }
}

@media (max-width: 480px) {
  .articles-section {
    padding: 40px 4%;
  }

  .articles-title {
    font-size: 1.6rem;
  }

  .articles-view-all {
    font-size: 0.8rem;
    padding: 8px 18px;
  }

  .articles-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .article-image {
    height: 160px;
  }

  .article-body {
    padding: 14px 16px 16px;
  }

  .article-title {
    font-size: 0.85rem;
    min-height: auto;
  }

  .article-number {
    font-size: 0.65rem;
  }

  .article-date {
    font-size: 0.7rem;
  }

  .article-link {
    font-size: 0.75rem;
  }

  .article-card--featured .article-image {
    height: 180px;
  }
}

/* =====================================================
   HEADER
===================================================== */

body {
  padding-top: 0px;
}

/* =====================================================
   MAIN HEADER
===================================================== */

.custom-header {
  position: fixed;
  top: 30px;
  left: 4%;
  right: 4%;

  z-index: 9999;

  height: 70px;

  margin-bottom: 50px;

  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.015),
    rgba(255, 255, 255, 0)
  );

  border: 1px solid rgba(214, 183, 143, 0.22);
  border-radius: 24px;

  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.105),
    inset 0 1px 0 rgba(255, 255, 255, 0.022);

  overflow: hidden;

  transition: top 0.3s ease, height 0.3s ease, background 0.3s ease,
    box-shadow 0.3s ease;
}

/* لایه نویز */

.custom-header::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.09;

  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;
}

/* حالت اسکرول */

.custom-header.scrolled {
  top: 15px;
  height: 70px;

  background: rgba(6, 13, 24, 0.72);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* =====================================================
   CONTAINER
===================================================== */

.custom-header .header-container {
  height: 100%;
  padding: 0px 40px;
}

/* =====================================================
   NAVBAR
===================================================== */

.navbar-custom {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

/* =====================================================
   LOGO
===================================================== */

.logo-wrapper {
  flex-shrink: 0;

  order: 1;
}

.logo {
  display: flex;
  align-items: center;

  text-decoration: none;
}

.logo img {
  width: auto;
  height: 48px;

  display: block;

  transition: height 0.3s ease;
}

.custom-header.scrolled .logo img {
  height: 42px;
}

/* =====================================================
   NAVIGATION
===================================================== */

.menu-wrapper {
  flex: 1;

  display: flex;
  justify-content: center;
  align-items: center;

  order: 2;
}

.nav-menu {
  display: flex;
  align-items: center;

  gap: 12px;

  list-style: none;

  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 9px 17px;

  color: #c8c1b9;

  text-decoration: none;

  font-size: 14px;
  font-weight: 400;

  white-space: nowrap;

  border-radius: 20px;

  border: 1px solid transparent;

  transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

/* Hover */

.nav-link:hover {
  color: var(--gold-champagne);

  background: rgba(214, 183, 143, 0.08);

  border: 1px solid rgba(214, 183, 143, 0.35);
}

/* Active */

.nav-link.active {
  color: var(--gold-champagne);

  background: rgba(214, 183, 143, 0.08);

  border: 1px solid rgba(214, 183, 143, 0.35);
}

/* =====================================================
   LEFT SIDE
===================================================== */

.header-left {
  display: flex;
  align-items: center;

  gap: 22px;

  order: 3;

  flex-shrink: 0;
}

/* =====================================================
   CATALOG BUTTON
===================================================== */

.catalog-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 172px;
  height: 36px;

  padding: 0 24px;

  color: var(--gold-champagne);

  border: 1px solid rgba(214, 183, 143, 0.75);
  border-radius: 16px;

  text-decoration: none;

  font-size: 14px;
  font-weight: 400;

  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease;
}

.catalog-btn:hover {
  color: var(--navy-950);

  background: var(--gold-champagne);

  border-color: var(--gold-champagne);

  transform: translateY(-1px);
}

/* =====================================================
   HEADER TOOLS
===================================================== */

.header-tools {
  display: flex;
  align-items: center;

  gap: 16px;
}

/* دکمه آیکون */

.header-tool {
  position: relative;

  width: 28px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--gold-champagne);

  text-decoration: none;

  transition: color 0.3s ease, transform 0.3s ease;
}

.header-tool:hover {
  color: #ffffff;

  transform: translateY(-2px);
}

/* SVG */

.header-icon {
  width: 23px;
  height: 23px;

  display: block;
}

/* =====================================================
   CART BADGE
===================================================== */

.cart-count {
  position: absolute;

  top: 0;
  right: -7px;

  width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--gold-champagne);

  color: var(--navy-950);

  font-size: 10px;
  font-weight: 700;

  border-radius: 50%;

  line-height: 1;
}

/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.navbar-toggler-custom {
  display: none;

  flex-direction: column;
  justify-content: center;

  gap: 5px;

  width: 42px;
  height: 42px;

  padding: 8px;

  background: transparent;

  border: 1px solid rgba(214, 183, 143, 0.25);
  border-radius: 50%;

  cursor: pointer;
  align-items: center;
}

.navbar-toggler-custom span {
  display: block;

  width: 22px;
  height: 2px;

  background: var(--gold-champagne);

  border-radius: 3px;
}

.navbar-toggler-custom svg {
  width: 40px;
  height: 40px;
}

/* =====================================================
   CLOSE BUTTON
===================================================== */

.menu-close-btn {
  display: none;
}

/* =====================================================
   OVERLAY
===================================================== */

.overlay {
  position: fixed;

  inset: 0;
  background: rgba(6, 13, 24, 0.65);

  z-index: 9998;

  display: none;

  backdrop-filter: blur(5px);
}

.overlay.show {
  display: block;
}

.mobile-menu-tools {
  display: none;
}
/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {
  .nav-menu {
    gap: 4px;
  }

  .nav-link {
    padding: 8px 11px;
    font-size: 13px;
  }

  .catalog-btn {
    min-width: 150px;
  }

  .header-left {
    gap: 15px;
  }
}

/* =====================================================
   TABLET / MOBILE
===================================================== */

@media (max-width: 992px) {
  .custom-header {
    top: 20px;
    left: 20px;
    right: 20px;
    height: 72px;
    overflow: visible;
  }

  /* =========================
       هدر موبایل
    ========================= */

  .navbar-custom {
    gap: 10px;
  }

  /* لوگو */
  .logo-wrapper {
    order: 1;
  }

  .logo img {
    height: 42px;
  }

  /* همبرگر */
  .navbar-toggler-custom {
    display: flex;
    order: 3;

    width: 42px;
    height: 42px;

    padding: 8px;

    background: transparent;
    border: 1px solid rgba(214, 183, 143, 0.25);
    border-radius: 50%;

    cursor: pointer;

    align-items: center;
    justify-content: center;
  }

  /* =================================
       مخفی کردن بخش دسکتاپ
    ================================= */

  .header-left {
    display: none;
  }

  /* =================================
       منوی کشویی موبایل
    ================================= */

  .menu-wrapper {
    position: fixed;

    top: -15px;
    right: -100%;

    width: min(320px, 85vw);
    height: 100vh;

    padding: 75px 25px 30px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    background: rgba(6, 14, 25, 0.95);

    border-left: 1px solid rgba(214, 183, 143, 0.25);

    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition: right 0.45s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 10000;

    order: unset;
  }

  /* منوی باز */
  .menu-wrapper.show {
    right: -12px;
  }

  /* =================================
       لینک‌ها
    ================================= */

  .nav-menu {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 0px;

    margin: 0;
    padding: 0;
  }

  .nav-link {
    width: 100%;

    justify-content: flex-start;

    padding: 14px 16px;

    font-size: 15px;

    border-radius: 14px;
  }

  /* =================================
       دکمه بستن
    ================================= */

  .menu-close-btn {
    display: flex;

    position: absolute;

    top: 25px;
    left: 20px;

    width: 40px;
    height: 40px;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(214, 183, 143, 0.2);

    border-radius: 50%;

    cursor: pointer;

    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  }

  .menu-close-btn:hover {
    color: var(--gold-champagne);

    background: rgba(214, 183, 143, 0.08);

    border-color: rgba(214, 183, 143, 0.35);
  }

  /* =================================
       ابزارهای داخل منوی موبایل
    ================================= */

  .mobile-menu-tools {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 16px;

    margin-top: 20px;

    padding-top: 25px;

    border-top: 1px solid rgba(214, 183, 143, 0.15);
  }

  .mobile-menu-tools .header-tools {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 25px;
  }

  .mobile-menu-tools .header-tool {
    width: 40px;
    height: 40px;

    color: var(--gold-champagne);
  }

  .mobile-menu-tools .header-icon {
    width: 23px;
    height: 23px;
  }

  .mobile-menu-tools .catalog-btn {
    display: flex;

    width: 100%;
    min-width: 0;
    height: 42px;

    margin-top: 5px;

    border-radius: 14px;
  }

  /* =================================
       Overlay
    ================================= */

  .overlay {
    opacity: 0;
    visibility: hidden;

    display: block;

    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  .overlay.show {
    opacity: 1;
    visibility: visible;
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px) {
  body {
    padding-top: 0px;
  }

  .custom-header {
    top: 15px;
    left: 12px;
    right: 12px;

    height: 65px;

    border-radius: 20px;
  }

  .navbar-custom {
    gap: 10px;
  }

  .logo img {
    height: 36px;
  }

  /* در موبایل کاتالوگ حذف شود */

  .header-left {
    gap: 8px;
  }

  .header-tools {
    gap: 8px;
  }

  .header-tool {
    width: 26px;
  }

  .header-icon {
    width: 20px;
    height: 20px;
  }

  .navbar-toggler-custom {
    width: 38px;
    height: 38px;
  }
}

/* ===== OVERLAY ===== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 13, 24, 0.6);
  z-index: 9998;
  display: none;
  backdrop-filter: blur(4px);
}

.overlay.show {
  display: block;
}

/* ========================================================
       فوتر VIMA GLOBAL (هماهنگ با هدر)
       ======================================================== */
.custom-footer {
  background: #020818;
  border-top: 3px solid #d6b78f;
  padding: 60px 0 0;
  margin-top: 60px;
  position: relative;
}

.custom-footer::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    #d6b78f 20%,
    #a9814e 50%,
    #d6b78f 80%,
    transparent
  );
}
.footer-link-icon {
  width: 20px;
  height: 20px;
}

/* ===== بخش بالایی ===== */
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
  gap: 40px 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== ستون برند ===== */
.footer-brand .footer-logo {
  display: inline-block;
  margin-bottom: 12px;
}

.footer-brand .footer-logo img {
  height: 55px;
  width: auto;
  transition: all 0.3s ease;
}

.footer-brand .footer-logo:hover img {
  transform: scale(1.03);
}

.footer-tagline {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: #d6b78f;
  letter-spacing: 3px;
  margin-bottom: 12px;
  font-weight: 300;
}

.footer-desc {
  font-size: 0.9rem;
  color: #8899aa;
  line-height: 1.8;
  max-width: 300px;
  font-weight: 300;
}

/* ===== شبکه‌های اجتماعی ===== */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8899aa;
  font-size: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.social-link:hover {
  background: linear-gradient(135deg, #d6b78f, #e67e22);
  color: #0a1628;
  border-color: #d6b78f;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(245, 176, 65, 0.3);
}

/* ===== ستون‌های لینک ===== */
.footer-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 12px;
}

.footer-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35px;
  height: 2.5px;
  background: linear-gradient(90deg, #d6b78f, #a9814e);
  border-radius: 2px;
  box-shadow: 0 0 15px rgba(245, 176, 65, 0.3);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: 0.85rem;
  color: #8899aa;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-links a i {
  font-size: 10px;
  color: #d6b78f;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.footer-links a:hover {
  color: #ffffff;
  padding-right: 6px;
}

.footer-links a:hover i {
  opacity: 1;
  transform: translateX(-4px);
}

/* ===== ستون تماس ===== */
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: #8899aa;
  margin-bottom: 12px;
  font-weight: 300;
}

.footer-contact-list li a {
  color: #8899aa;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-list li a:hover {
  color: #d6b78f;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(245, 176, 65, 0.08);
  border-radius: 50%;
  color: #d6b78f;
  font-size: 14px;
  transition: all 0.3s ease;
}

.footer-contact-list li:hover .contact-icon {
  background: rgba(245, 176, 65, 0.2);
  transform: scale(1.05);
}

/* ===== بخش پایینی ===== */
.footer-bottom {
  padding: 24px 0;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(136, 153, 170, 0.5);
  font-weight: 300;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-legal a {
  font-size: 0.8rem;
  color: rgba(136, 153, 170, 0.5);
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 300;
}

.footer-legal a:hover {
  color: #d6b78f;
}

.footer-divider {
  color: rgba(136, 153, 170, 0.2);
}

/* ===== ریسپانسیو ===== */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
  }
  .footer-contact {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .custom-footer {
    padding: 40px 0 0;
    margin-top: 40px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    padding-bottom: 30px;
  }

  .footer-brand {
    grid-column: span 2;
    text-align: center;
  }

  .footer-desc {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-title::after {
    right: 50%;
    transform: translateX(50%);
  }

  .footer-title {
    text-align: center;
  }

  .footer-links {
    text-align: center;
  }

  .footer-links a {
    justify-content: center;
  }

  .footer-links a:hover {
    padding-right: 0;
  }

  .footer-contact-list li {
    justify-content: center;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .footer-legal {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .custom-footer {
    padding: 30px 0 0;
    margin-top: 30px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 24px;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-brand .footer-logo img {
    height: 45px;
  }

  .footer-desc {
    font-size: 0.85rem;
  }

  .footer-title {
    font-size: 0.85rem;
  }

  .footer-links a,
  .footer-contact-list li {
    font-size: 0.8rem;
  }

  .footer-copy,
  .footer-legal a {
    font-size: 0.7rem;
  }

  .footer-legal {
    gap: 6px;
  }

  .social-link {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* =========================================================
   MAJE HERO
   ========================================================= */

.maje-hero {
  position: relative;
  width: 100%;
  height: 720px;
  min-height: 680px;

  overflow: hidden;

  display: flex;
  align-items: center;

  padding: 105px 4% 35px;

  background: radial-gradient(
      circle at 50% 48%,
      rgba(123, 76, 37, 0.1),
      transparent 34%
    ),
    var(--navy-950);

  isolation: isolate;
}

/* =========================================================
   BACKGROUND
   ========================================================= */

.maje-hero-bg {
  position: absolute;
  inset: 0;

  z-index: -5;

  background: radial-gradient(
    ellipse at 52% 50%,
    rgba(164, 96, 42, 0.11) 0%,
    rgba(12, 15, 26, 0.12) 34%,
    rgba(0, 4, 16, 0.9) 78%
  );

  pointer-events: none;
}
*/


/* .maje-hero-bg::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 4, 16, 0.82) 0%,
            transparent 32%,
            transparent 68%,
            rgba(0, 4, 16, 0.82) 100%
        );

    pointer-events: none;
}


.maje-hero-bg::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: 5%;
    top: 5%;

    background:
        radial-gradient(
            circle,
            rgba(212, 180, 140, 0.055) 0%,
            transparent 68%
        );

    filter: blur(10px);

    pointer-events: none;
}

/* =========================================================
   GLOW
   ========================================================= */

.maje-hero-glow {
  position: absolute;

  pointer-events: none;

  filter: blur(80px);

  opacity: 0.5;

  z-index: -3;
}

.maje-hero-glow--right {
  width: 400px;
  height: 400px;

  right: 8%;
  top: 30%;

  background: rgba(79, 54, 35, 0.18);
}

.maje-hero-glow--center {
  width: 500px;
  height: 280px;

  left: 35%;
  bottom: 5%;

  background: rgba(117, 71, 31, 0.1);
}

/* =========================================================
   INNER
   ========================================================= */

.maje-hero-inner {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  display: grid;

  grid-template-columns:
    minmax(250px, 0.8fr)
    minmax(500px, 1.7fr)
    minmax(300px, 0.9fr);

  align-items: center;

  gap: 20px;

  direction: ltr;
}

/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.maje-hero-content {
  direction: rtl;

  text-align: right;

  position: relative;

  z-index: 5;

  padding-right: 20px;

  animation: majeContentIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.maje-eyebrow {
  font-family: var(--font-en-serif);

  font-size: 14px;
  font-style: italic;

  font-weight: 500;

  letter-spacing: 1px;

  color: var(--gold-soft);

  margin-bottom: 15px;

  text-transform: uppercase;
}
#maje-eyebrow {
  margin-bottom: 0px;
}

.maje-title {
  font-family: var(--font-en-serif);

  font-size: clamp(5rem, 8vw, 5.7rem);

  line-height: 1.18;

  font-weight: 600;

  letter-spacing: 3px;

  margin: 0 0 20px;

  text-align: right;
}

.maje-title-line {
  margin: 0 0 62px auto;

  max-width: 115px;
}

.maje-description {
  max-width: 380px;

  font-family: var(--font-fa);

  font-size: 15px;

  font-weight: 300;

  line-height: 2.05;

  color: #d6d3d0;
}

/* =========================================================
   PROFESSIONAL MARQUEE
========================================================= */
.maje-professional-marquee {
  position: absolute;

  left: -2%;
  bottom: 12px;

  width: 104%;
  height: 54px;

  display: flex;
  align-items: center;

  overflow: hidden;

  z-index: 20;

  transform: rotate(-1.5deg);

  border-top: 1px solid rgba(214, 183, 143, 0.16);

  border-bottom: 1px solid rgba(214, 183, 143, 0.16);

  background: rgba(5, 8, 18, 0.55);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-top: 5px;
}

.maje-professional-track {
  display: flex;

  width: max-content;

  flex-shrink: 0;

  animation: majeProfessionalMarquee 18s linear infinite;

  will-change: transform;
}

.maje-professional-group {
  display: flex;

  align-items: center;

  flex-shrink: 0;

  /* خیلی مهم */
  width: max-content;
}

.maje-professional-group span {
  flex-shrink: 0;

  white-space: nowrap;

  font-family: var(--font-en-serif);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 2px;

  color: var(--gold-soft);

  opacity: 0.78;

  padding: 0 28px;
}

.maje-professional-group i {
  flex-shrink: 0;

  font-style: normal;

  font-size: 8px;

  color: var(--gold-champagne);

  opacity: 0.65;
}

@keyframes majeProfessionalMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   PRODUCT STAGE
   ========================================================= */

.maje-products-stage {
  position: relative;

  height: 100%;

  min-height: 560px;

  direction: ltr;
}

.maje-hero-visual {
  position: relative;
  width: 103%;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.maje-hero-products {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  /* animation: majeHeroProductFloat 6s ease-in-out infinite; */
}
.maje-hero-products:hover {
  transform: translateY(-6px) scale(1.015);
}

@keyframes majeHeroProductFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}
#majeHero {
  height: 600px;
}
.maje-hero-products img {
  display: block;
  width: 160%;
  max-width: 1200px;
  height: auto;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.maje-hero-products:hover img {
  transform: scale(1.015);
}

/* =========================================================
   LEFT SIDE
   ========================================================= */

.maje-hero-left {
  position: relative;
  direction: rtl;

  align-self: end;

  padding-bottom: 54px;

  z-index: 8;
  margin-right: -200px;
}

/* =========================================================
   VIDEO
   ========================================================= */

.maje-video-box {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 16px;
  margin-left: 70px;

  margin-bottom: 143px;

  padding-right: 8px;

  animation: majeLeftIn 1s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.maje-video-btn {
  width: 52px;
  height: 52px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.015),
    rgba(255, 255, 255, 0)
  );

  border: 1px solid rgba(214, 183, 143, 0.22);
  border-radius: 50%;

  backdrop-filter: blur(2px) saturate(110%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.105),
    inset 0 1px 0 rgba(255, 255, 255, 0.022);

  color: var(--gold-champagne);

  cursor: pointer;

  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.maje-video-btn::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.09;

  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;
  border-radius: 50%;
}

.maje-video-btn:hover {
  transform: scale(1.08);

  border-color: var(--gold-champagne);

  background: rgba(214, 183, 143, 0.1);

  box-shadow: 0 0 0 8px rgba(214, 183, 143, 0.035),
    0 12px 35px rgba(0, 0, 0, 0.35);
}

.maje-video-btn {
  position: relative;
  isolation: isolate;

  animation: majeVideoPulse 3s ease-out infinite;
}

/* حلقه‌ی توجه */
.maje-video-btn::after {
  content: "";

  position: absolute;
  inset: -9px;

  border: 1px solid rgba(214, 183, 143, 0.35);
  border-radius: 50%;

  pointer-events: none;

  opacity: 0;

  animation: majeVideoRing 1.7s ease-out infinite;
}

/* انیمیشن هاله */
@keyframes majeVideoRing {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }

  15% {
    opacity: 0.55;
  }

  65% {
    opacity: 0.15;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* حرکت بسیار ظریف خود دکمه */
@keyframes majeVideoPulse {
  0%,
  70%,
  100% {
    transform: scale(0.9);
  }

  76% {
    transform: scale(1.035);
  }

  82% {
    transform: scale(1);
  }
}
.maje-video-icon {
  display: flex;

  align-items: center;

  justify-content: center;
}

.maje-video-text {
  display: flex;

  flex-direction: column;

  color: #d8d2ca;

  font-size: 13px;

  line-height: 1.55;
}

.maje-video-text strong {
  color: var(--gold-champagne);

  font-weight: 400;
  font-size: 16px;
}
.maje-video-text span {
  font-weight: 300;
}

/* =========================================================
   MAJÉ PRODUCTS CAROUSEL
========================================================= */

.maje-mini-products-carousel {
  position: relative;

  width: 100%;
  max-width: 100%;

  margin-bottom: 51px;
}


/* =========================================================
 VIEWPORT
========================================================= */

.maje-mini-products-carousel .carousel {
  width: 100%;
}


.maje-mini-products-carousel .carousel-inner {
  width: 100%;

  /* overflow: hidden; */
}

.carousel-inner{
  padding: 10px 0px;
}
/* =========================================================
 CAROUSEL ITEM
========================================================= */

.maje-mini-products-carousel .carousel-item {
  width: 100%;
}


/* =========================================================
 TWO CARDS INSIDE EACH SLIDE
========================================================= */

.maje-carousel-pair {

  display: flex;

  flex-direction: row;

  gap: 12px;

  width: 100%;

  direction: ltr;
}


/* =========================================================
 CARD
========================================================= */

.maje-carousel-pair .maje-mini-card {

  /*
   * دو کارت داخل viewport
   *
   * 100% - gap
   * تقسیم بر 2
   */

  flex: 0 0 calc(
      (100% - 12px) / 2
  );

  width: calc(
      (100% - 12px) / 2
  );

  min-width: 0;

  direction: rtl;

  box-sizing: border-box;
}


/* =========================================================
 YOUR ORIGINAL CARD STYLE
========================================================= */

.maje-mini-card {

  min-height: 115px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 12px 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  border:
      1px solid
      rgba(214, 183, 143, 0.14);

  box-shadow:
  0 10px 30px
  rgba(0, 0, 0, 0.12);

  border-radius: 12px;

  background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.01)
        );
  box-sizing: border-box;

  transition:
      transform 0.45s
      cubic-bezier(
          0.16,
          1,
          0.3,
          1
      ),
      border-color 0.35s ease,
      background 0.35s ease,
      box-shadow 0.35s ease;
}


/* =========================================================
 CARD HOVER
========================================================= */

.maje-mini-card:hover {

    transform: translateY(-3px);

    border-color:
        rgba(214, 183, 143, 0.25);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow:
        0 16px 40px
        rgba(0, 0, 0, 0.2);
}


/* =========================================================
 IMAGE
========================================================= */

.maje-mini-card-image {

  width: 90px;

  height: 105px;

  flex: 0 0 90px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.maje-mini-card-image img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  filter:
      drop-shadow(
          0 10px 12px
          rgba(0, 0, 0, 0.45)
      );

  transition:
      transform 0.5s
      cubic-bezier(
          0.16,
          1,
          0.3,
          1
      );
}


.maje-mini-card:hover
.maje-mini-card-image img {

  transform:
      translateY(-5px)
      scale(1.05);
}


/* =========================================================
 CONTENT
========================================================= */

.maje-mini-card-content {

  direction: rtl;

  min-width: 0;

  flex: 1;
}


.maje-mini-card-content h3 {

  color: #eee7df;

  font-family: var(--font-fa);

  font-size: 13px;

  font-weight: 700;

  margin:
      0 0 4px;
}


.maje-mini-card-content p {

  color: #cacaca;

  opacity: 0.7;

  font-family: var(--font-fa);

  font-size: 10px;

  line-height: 1.7;

  margin:
      0 0 9px;
}


.maje-mini-card-content a {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: var(--gold-soft);

  font-family: var(--font-fa);

  font-size: 10px;

  text-decoration: none;
}


.maje-mini-card-content a span {

  font-size: 18px;

  line-height: 0;

  transition:
      transform 0.3s ease;
}


.maje-mini-card-content a:hover {

  color:
      var(--gold-champagne);
}


.maje-mini-card-content a:hover span {

  transform:
      translateX(-4px);
}


/* =========================================================
 BOOTSTRAP CONTROLS
========================================================= */

.maje-mini-products-carousel
.carousel-control-prev,
.maje-mini-products-carousel
.carousel-control-next {

  position: absolute;

  top: auto;
  bottom: -55px;

  width: 35px;
  height: 35px;

  opacity: 1;

  z-index: 5;
}


/* Previous */

.maje-mini-products-carousel
.carousel-control-prev {

  left: 0;

  right: auto;
}


/* Next */

.maje-mini-products-carousel
.carousel-control-next {

  left: 48px;

  right: auto;
}


/* =========================================================
 YOUR BUTTON STYLE
========================================================= */

.maje-slider-btn {

  width: 35px;
  height: 35px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
      1px solid
      rgba(214, 183, 143, 0.4);

  border-radius: 50%;

  background: transparent;

  color:
      var(--gold-soft);

  cursor: pointer;

  transition:
      all 0.3s ease;
}


.maje-slider-btn:hover {

  border-color:
      var(--gold-champagne);

  background:
      rgba(
          214,
          183,
          143,
          0.08
      );

  color:
      var(--gold-champagne);
}


.maje-slider-btn svg {

  width: 20px;
  height: 20px;
}


/* =========================================================
 MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .maje-carousel-pair {

      gap: 10px;
  }


  .maje-carousel-pair
  .maje-mini-card {

      flex-basis:
          calc(
              (100% - 10px) / 2
          );

      width:
          calc(
              (100% - 10px) / 2
          );

  }


  .maje-mini-card {

      min-height: 105px;

      padding:
          10px;
  }


  .maje-mini-card-image {

      width: 70px;

      height: 85px;

      flex-basis: 70px;
  }

}
/* =========================================================
   CONTROLS
   ========================================================= */

.maje-hero-controls {
  position: absolute;

  left: 0%;

  bottom: 51px;

  z-index: 10;

  display: flex;

  align-items: center;

  gap: 12px;

  direction: ltr;
}
.maje-hero-controls svg {
  width: 24px;
  height: 24px;
  opacity: 88%;
}
#maje-slider-btn1 {
  margin-left: 14px;
  margin-right: -6px;
}

.maje-slider-btn {
  width: 35px;
  height: 35px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(214, 183, 143, 0.4);

  border-radius: 50%;

  background: transparent;

  color: var(--gold-soft);

  font-size: 23px;

  line-height: 1;

  cursor: pointer;

  transition: all 0.35s ease;
}

.maje-slider-btn:hover {
  color: var(--navy-950);

  background: var(--gold-champagne);

  border-color: var(--gold-champagne);

  transform: translateY(-2px);
}

.maje-slider-progress {
  width: 380px;

  height: 1px;

  margin-left: 25px;

  background: rgba(214, 183, 143, 0.18);

  position: relative;
}

.maje-slider-progress-line {
  position: absolute;

  left: 0;
  top: 0;

  width: 105px;

  height: 2px;

  background: linear-gradient(90deg, var(--gold-soft), var(--gold-champagne));

  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes majeContentIn {
  from {
    opacity: 0;
    transform: translateX(35px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes majeLeftIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes majeProductIn {
  from {
    opacity: 0;
    transform: translateY(55px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes majeGlowPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(0.96);
  }

  50% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes majeArcFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-9deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(-6deg);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

   @media (max-width: 768px) {

    .maje-mini-products-carousel {
        width: 100%;
        max-width: 600px;

        margin: 0 auto 50px;
    }

    .maje-mini-card {
        min-height: 105px;
    }

}


@media (max-width: 520px) {

    .maje-mini-products-carousel {
        width: 100%;
    }

    .maje-mini-card {
        min-height: 105px;

        padding: 10px 12px;
    }

    .maje-mini-card-image {
        width: 78px;
        height: 90px;

        flex-basis: 78px;
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .maje-hero *,
  .maje-hero *::before,
  .maje-hero *::after {
    animation: none !important;

    transition: none !important;
  }
}

/* =========================================================
   MAJÉ — STORY SECTION
   Luxury / Modern Classic
   ========================================================= */

.maje-story {
  position: relative;
  padding: 120px 0 130px;
  background: #050b17;
  overflow: hidden;
  isolation: isolate;
}

/* subtle ambient light */
.maje-story::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  top: 50%;
  left: -360px;
  transform: translateY(-50%);
  background: radial-gradient(
    circle,
    rgba(212, 180, 140, 0.055) 0%,
    rgba(212, 180, 140, 0.018) 35%,
    transparent 72%
  );
  pointer-events: none;
  z-index: -1;
}

.maje-story::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -300px;
  bottom: -250px;
  background: radial-gradient(
    circle,
    rgba(212, 180, 140, 0.035) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* =========================================================
   CONTAINER / GRID
   ========================================================= */

.maje-story .container {
  position: relative;
  z-index: 2;
}

.maje-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  align-items: center;
  gap: clamp(60px, 8vw, 125px);
}

/* =========================================================
   GALLERY
   ========================================================= */

.maje-story-gallery {
  position: relative;
  min-height: 610px;
  width: 100%;
}
.maje-story-gallery figure {
  border-radius: 6px;
}

/* Individual image frame */

.maje-story-image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--navy-950);
  border: 1px solid rgba(212, 180, 140, 0.15);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.012) inset;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease, box-shadow 0.45s ease;
} /* ========================================================= IMAGE ========================================================= */
.maje-story-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* کمی کاهش نور و اشباع خود تصویر تا قبل از overlay هم عکس چشم‌زن نباشد */
  filter: brightness(0.84) saturate(0.82) contrast(1.03);
  transform: scale(1.001);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.65s ease;
} /* ========================================================= DARK LUXURY OVERLAY ========================================================= */
.maje-story-image::after {
  content: "";
  position: absolute;
  inset: 0; /* گرادیانت بسیار ظریف: بالا کمی شفاف‌تر پایین کمی تیره‌تر */
  background: linear-gradient(
    180deg,
    rgba(5, 14, 27, 0.12) 0%,
    rgba(5, 14, 27, 0.18) 45%,
    rgba(5, 14, 27, 0.38) 100%
  );
  pointer-events: none;
  transition: background 0.6s ease;
} /* یک لایه خیلی ظریف برای هماهنگی رنگ عکس با Navy پروژه */
.maje-story-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(212, 180, 140, 0.035) 0%,
    transparent 45%,
    rgba(3, 12, 24, 0.08) 100%
  );
  z-index: 1;
  pointer-events: none;
} /* ========================================================= NEW COLLAGE LAYOUT ========================================================= */ /* IMAGE 01 تصویر اصلی — بزرگ و dominant */
.maje-story-image-1 {
  top: 0;
  left: 0;
  width: 55%;
  height: 390px;
  z-index: 4;
} /* IMAGE 02 بالا سمت راست */
.maje-story-image-2 {
  top: 35px;
  right: 0;
  width: 36%;
  height: 235px;
  z-index: 3;
} /* IMAGE 03 پایین سمت چپ */
.maje-story-image-3 {
  left: 7%;
  bottom: 0;
  width: 34%;
  height: 235px;
  z-index: 2;
} /* IMAGE 04 تصویر ثانویه بزرگ‌تر کمی روی فضای خالی overlap می‌کند */
.maje-story-image-4 {
  right: 5%;
  bottom: 15px;
  width: 47%;
  height: 305px;
  z-index: 4;
} /* ========================================================= IMAGE DEPTH ========================================================= */ /* تصویر اصلی کمی جلوتر قرار بگیرد */
.maje-story-image-1 {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.015) inset;
} /* تصویر 4 هم کمی برجسته باشد */
.maje-story-image-4 {
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.015) inset;
} /* ========================================================= HOVER ========================================================= */
.maje-story-image:hover {
  border-color: rgba(212, 180, 140, 0.34);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.38),
    0 0 32px rgba(212, 180, 140, 0.035);
}
.maje-story-image:hover img {
  transform: scale(1.045);
  filter: brightness(0.89) saturate(0.88) contrast(1.04);
} /* هنگام Hover overlay کمی بازتر می‌شود ولی عکس همچنان dark باقی می‌ماند */
.maje-story-image:hover::after {
  background: linear-gradient(
    180deg,
    rgba(5, 14, 27, 0.08) 0%,
    rgba(5, 14, 27, 0.14) 50%,
    rgba(5, 14, 27, 0.3) 100%
  );
} /* حرکات متفاوت برای حفظ حس collage */
.maje-story-image-1:hover {
  transform: translateY(-7px);
}
.maje-story-image-2:hover {
  transform: translateY(-6px);
}
.maje-story-image-3:hover {
  transform: translateY(-5px);
}
.maje-story-image-4:hover {
  transform: translateY(-7px);
} /* ========================================================= TABLET ========================================================= */
@media (max-width: 1100px) {
  .maje-story-gallery {
    min-height: 550px;
  }
  .maje-story-image-1 {
    width: 56%;
    height: 345px;
  }
  .maje-story-image-2 {
    width: 37%;
    height: 210px;
    top: 30px;
  }
  .maje-story-image-3 {
    width: 35%;
    height: 210px;
    left: 6%;
  }
  .maje-story-image-4 {
    width: 48%;
    height: 275px;
    right: 4%;
  }
} /* ========================================================= MOBILE ========================================================= */
@media (max-width: 768px) {
  .maje-story-gallery {
    min-height: 480px;
  }
  .maje-story-image-1 {
    top: 0;
    left: 0;
    width: 57%;
    height: 290px;
  }
  .maje-story-image-2 {
    top: 25px;
    right: 0;
    width: 39%;
    height: 190px;
  }
  .maje-story-image-3 {
    left: 3%;
    bottom: 0;
    width: 38%;
    height: 190px;
  }
  .maje-story-image-4 {
    right: 0;
    bottom: 5px;
    width: 54%;
    height: 245px;
  }
} /* ========================================================= SMALL MOBILE ========================================================= */
@media (max-width: 480px) {
  .maje-story-gallery {
    min-height: 375px;
  }
  .maje-story-image-1 {
    width: 58%;
    height: 225px;
  }
  .maje-story-image-2 {
    top: 20px;
    width: 39%;
    height: 150px;
  }
  .maje-story-image-3 {
    left: 3%;
    width: 38%;
    height: 150px;
  }
  .maje-story-image-4 {
    width: 54%;
    height: 195px;
    bottom: 2px;
  }
}

/* =========================================================
   CONTENT
   ========================================================= */

.maje-story-content {
  position: relative;
  direction: rtl;
  text-align: right;
  max-width: 560px;
  margin-right: auto;
}

/* =========================================================
   EYEBROW
   ========================================================= */

.maje-story .maje-section-eyebrow {
  display: inline-block;

  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 4.5px;
  text-transform: uppercase;

  color: var(--gold-soft);

  margin-bottom: 13px;
}

/* =========================================================
   TITLE
   ========================================================= */

.maje-story .maje-section-title {
  margin: 0;

  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.18;

  color: var(--cream);

  letter-spacing: -0.4px;
}

/* MAJÉ inside title */

.maje-story .maje-section-title strong {
  font-family: var(--font-en-serif);
  font-weight: 600;
  font-style: italic;
  color: var(--gold-champagne);

  letter-spacing: 0.5px;
}

/* =========================================================
   GOLD LINE
   ========================================================= */

.maje-story .maje-gold-line {
  position: relative;

  width: 72px;
  height: 1px;

  margin: 20px 0 27px auto;

  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold-champagne) 100%
  );

  opacity: 0.9;
}

/* small light point at the end of line */

.maje-story .maje-gold-line::after {
  content: "";

  position: absolute;
  right: 0;
  top: 50%;

  width: 4px;
  height: 4px;

  transform: translateY(-50%);

  border-radius: 50%;
  background: var(--gold-champagne);

  box-shadow: 0 0 10px rgba(212, 180, 140, 0.3);
}

/* =========================================================
   STORY PARAGRAPHS
   ========================================================= */

.maje-story-content > p {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.9;
  font-weight: 300;
}

/* =========================================================
   STORY POINTS
   ========================================================= */

.maje-story-points {
  display: flex;
  flex-direction: column;

  margin-top: 34px;

  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

/* Individual point */

.maje-story-point {
  position: relative;

  display: flex;
  align-items: flex-start;

  gap: 15px;

  padding: 18px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.055);

  transition: padding-right 0.35s ease, background 0.35s ease;
}

/* gold symbol */

.maje-story-point > span {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  margin-top: 2px;

  font-family: var(--font-en-serif);
  font-size: 0.75rem;

  color: var(--gold-soft);

  border: 1px solid rgba(212, 180, 140, 0.22);
  border-radius: 50%;

  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease,
    background 0.3s ease;
}

/* Text wrapper */

.maje-story-point > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Main point title */

.maje-story-point strong {
  font-family: var(--sans);
  font-size: 0.91rem;
  font-weight: 600;
  line-height: 1.8;

  color: var(--cream);
}

/* Supporting text */

.maje-story-point small {
  font-family: var(--sans);
  font-size: 0.77rem;
  font-weight: 200;
  line-height: 1.8;

  color: var(--muted);
}

/* =========================================================
   STORY POINT HOVER
   ========================================================= */

.maje-story-point:hover {
  padding-right: 8px;
}

.maje-story-point:hover > span {
  color: var(--gold-champagne);
  border-color: rgba(212, 180, 140, 0.5);
  background: rgba(212, 180, 140, 0.045);
  transform: rotate(45deg);
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .maje-story {
    padding: 100px 0 110px;
  }

  .maje-story-grid {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.9fr);
    gap: 60px;
  }

  .maje-story-gallery {
    min-height: 530px;
  }

  .maje-story-image-1 {
    height: 315px;
  }

  .maje-story-image-2 {
    height: 220px;
  }

  .maje-story-image-3 {
    height: 225px;
  }

  .maje-story-image-4 {
    height: 285px;
  }

  .maje-story .maje-section-title {
    font-size: clamp(2rem, 4vw, 3rem);
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .maje-story {
    padding: 80px 0 90px;
  }

  .maje-story-grid {
    display: flex;
    flex-direction: column;
    gap: 55px;
  }

  /* Gallery becomes compact collage */

  .maje-story-gallery {
    width: 100%;
    min-height: 470px;
  }

  .maje-story-image-1 {
    width: 57%;
    height: 285px;
  }

  .maje-story-image-2 {
    width: 39%;
    height: 195px;
    top: 35px;
  }

  .maje-story-image-3 {
    width: 39%;
    height: 195px;
    left: 4%;
    bottom: 0;
  }

  .maje-story-image-4 {
    width: 53%;
    height: 250px;
    right: 0;
    bottom: 5px;
  }

  /* Content */

  .maje-story-content {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }

  .maje-story .maje-section-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 3.5px;
  }

  .maje-story .maje-section-title {
    font-size: clamp(2rem, 8vw, 2.65rem);
  }

  .maje-story-content > p {
    font-size: 0.88rem;
    line-height: 2;
  }

  .maje-story-points {
    margin-top: 28px;
  }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .maje-story {
    padding: 65px 0 75px;
  }

  .maje-story-grid {
    gap: 45px;
  }

  .maje-story-gallery {
    min-height: 365px;
  }

  .maje-story-image-1 {
    width: 58%;
    height: 220px;
  }

  .maje-story-image-2 {
    width: 39%;
    height: 155px;
    top: 25px;
  }

  .maje-story-image-3 {
    width: 39%;
    height: 155px;
  }

  .maje-story-image-4 {
    width: 53%;
    height: 195px;
    bottom: 2px;
  }

  .maje-story .maje-section-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 2.8px;
    margin-bottom: 10px;
  }

  .maje-story .maje-section-title {
    font-size: 1.9rem;
  }

  .maje-story .maje-gold-line {
    width: 58px;
    margin: 17px 0 22px auto;
  }

  .maje-story-content > p {
    font-size: 0.82rem;
    line-height: 2;
    margin-bottom: 14px;
  }

  .maje-story-points {
    margin-top: 24px;
  }

  .maje-story-point {
    gap: 12px;
    padding: 15px 0;
  }

  .maje-story-point > span {
    width: 22px;
    height: 22px;
    font-size: 0.68rem;
  }

  .maje-story-point strong {
    font-size: 0.82rem;
  }

  .maje-story-point small {
    font-size: 0.7rem;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .maje-story-image,
  .maje-story-image img,
  .maje-story-point,
  .maje-story-point > span {
    transition: none;
  }
}

/* =========================================================
   MAJÉ — WHY / PROFESSIONAL CHOICE
   Luxury Editorial Benefit Section
   ========================================================= */

.maje-why {
  position: relative;

  padding: 125px 0 135px;

  background: linear-gradient(
    180deg,
    var(--navy-950) 0%,
    rgba(8, 19, 34, 0.98) 100%
  );

  overflow: hidden;
  isolation: isolate;
}

/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

.maje-why::before {
  content: "";

  position: absolute;

  width: 650px;
  height: 650px;

  top: 50%;
  right: -420px;

  transform: translateY(-50%);

  background: radial-gradient(
    circle,
    rgba(212, 180, 140, 0.045) 0%,
    rgba(212, 180, 140, 0.015) 38%,
    transparent 72%
  );

  pointer-events: none;

  z-index: -1;
}

.maje-why::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  bottom: -360px;
  left: -300px;

  background: radial-gradient(
    circle,
    rgba(212, 180, 140, 0.028) 0%,
    transparent 70%
  );

  pointer-events: none;

  z-index: -1;
}

/* =========================================================
   SECTION HEADER
   ========================================================= */

.maje-why .maje-section-header {
  position: relative;

  max-width: 760px;

  margin: 0 auto 72px;

  text-align: center;
  direction: rtl;
}

/* Eyebrow */

.maje-why .maje-section-eyebrow {
  display: inline-block;

  margin-bottom: 13px;

  font-family: var(--font-en-serif);
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 500;

  letter-spacing: 4.5px;
  text-transform: uppercase;

  color: var(--gold-soft);
}

/* Main title */

.maje-why .maje-section-title {
  margin: 0;

  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3.45rem);

  font-weight: 500;
  line-height: 1.25;

  letter-spacing: -0.35px;

  color: var(--cream);
}

/* MAJÉ */

.maje-why .maje-section-title strong {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-weight: 600;

  color: var(--gold-champagne);

  letter-spacing: 0.5px;
}

/* =========================================================
   HEADER LINE
   ========================================================= */

.maje-why .maje-section-line {
  position: relative;

  width: 72px;
  height: 1px;

  margin: 23px auto 0;

  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold-champagne) 50%,
    transparent 100%
  );

  opacity: 0.9;
}

/* tiny center detail */

.maje-why .maje-section-line::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 4px;
  height: 4px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: var(--gold-champagne);

  box-shadow: 0 0 12px rgba(212, 180, 140, 0.3);
}

/* =========================================================
   BENEFITS GRID
   ========================================================= */

.maje-benefits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(
    6,
    minmax(0, 1fr)
  ); /* فاصله واقعی بین کارت‌ها باعث می‌شود باکس‌ها به هم نچسبند */
  column-gap: 22px;
  row-gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ========================================================= CARD POSITIONING ========================================================= */ /* ردیف اول — سه کارت */
.maje-benefit:nth-child(1) {
  grid-column: 1 / span 2;
}
.maje-benefit:nth-child(2) {
  grid-column: 3 / span 2;
}
.maje-benefit:nth-child(3) {
  grid-column: 5 / span 2;
} /* ردیف دوم — دو کارت، کاملاً متعادل */
.maje-benefit:nth-child(4) {
  grid-column: 2 / span 2;
}
.maje-benefit:nth-child(5) {
  grid-column: 4 / span 2;
} /* ========================================================= CARD ========================================================= */
.maje-benefit {
  position: relative;
  min-height: 255px;
  padding: 30px 30px 28px;
  direction: rtl;
  text-align: right; /* گوشه‌های نرم ولی نه خیلی گرد مناسب فضای Luxury / Classic */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.027) 0%,
    rgba(255, 255, 255, 0.008) 100%
  );
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.13);
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
} /* ========================================================= SUBTLE INNER BORDER ========================================================= */
.maje-benefit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.012);
  pointer-events: none;
} /* ========================================================= GOLD TOP ACCENT ========================================================= */
.maje-benefit::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-champagne));
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
} /* ========================================================= HOVER ========================================================= */
.maje-benefit:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 180, 140, 0.25);
  background: linear-gradient(
    145deg,
    rgba(212, 180, 140, 0.042) 0%,
    rgba(255, 255, 255, 0.012) 100%
  );
  box-shadow: 0 25px 58px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(212, 180, 140, 0.025);
}
.maje-benefit:hover::before {
  width: 58%;
} /* ========================================================= TABLET ========================================================= */
@media (max-width: 1000px) {
  .maje-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 18px;
    max-width: 780px;
  }
  .maje-benefit:nth-child(1),
  .maje-benefit:nth-child(2),
  .maje-benefit:nth-child(3),
  .maje-benefit:nth-child(4),
  .maje-benefit:nth-child(5) {
    grid-column: auto;
  }
  .maje-benefit:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 375px;
    width: 100%;
    justify-self: center;
  }
} /* ========================================================= MOBILE ========================================================= */
@media (max-width: 768px) {
  .maje-benefits {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 570px;
  }
  .maje-benefit:nth-child(1),
  .maje-benefit:nth-child(2),
  .maje-benefit:nth-child(3),
  .maje-benefit:nth-child(4),
  .maje-benefit:nth-child(5) {
    grid-column: auto;
    max-width: none;
    width: auto;
  }
  .maje-benefit {
    min-height: auto;
    padding: 25px 24px;
    border-radius: 9px;
  }
} /* ========================================================= SMALL MOBILE ========================================================= */
@media (max-width: 480px) {
  .maje-benefits {
    gap: 12px;
  }
  .maje-benefit {
    padding: 21px 19px;
    border-radius: 8px;
  }
}

/* =========================================================
   NUMBER
   ========================================================= */

.maje-benefit-number {
  display: block;

  margin-bottom: 24px;

  direction: ltr;
  text-align: left;

  font-family: var(--font-en-serif);

  font-size: 0.72rem;
  font-weight: 500;

  letter-spacing: 3px;

  color: rgba(212, 180, 140, 0.58);
}

/* =========================================================
   ICON
   ========================================================= */

.maje-benefit-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin-bottom: 22px;

  border: 1px solid rgba(212, 180, 140, 0.2);

  border-radius: 50%;

  font-family: var(--font-en-serif);

  font-size: 1rem;

  color: var(--gold-soft);

  background: rgba(212, 180, 140, 0.025);

  box-shadow: 0 0 0 5px rgba(212, 180, 140, 0.012);

  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease, background 0.4s ease, color 0.4s ease;
}

/* =========================================================
   TITLE
   ========================================================= */

.maje-benefit h3 {
  position: relative;

  margin: 0 0 10px;

  font-family: var(--sans);

  font-size: 1rem;
  font-weight: 600;

  line-height: 1.8;

  color: var(--cream);
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

.maje-benefit p {
  margin: 0;

  max-width: 245px;

  font-family: var(--sans);

  font-size: 0.78rem;
  font-weight: 400;

  line-height: 2;

  color: var(--muted);
}

/* =========================================================
   HOVER
   ========================================================= */

.maje-benefit:hover {
  transform: translateY(-7px);

  border-color: rgba(212, 180, 140, 0.26);

  background: linear-gradient(
    145deg,
    rgba(212, 180, 140, 0.045) 0%,
    rgba(255, 255, 255, 0.012) 100%
  );

  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(212, 180, 140, 0.025);
}

.maje-benefit:hover::before {
  width: 68%;
}

.maje-benefit:hover::after {
  opacity: 1;
}

.maje-benefit:hover .maje-benefit-icon {
  color: var(--gold-champagne);

  border-color: rgba(212, 180, 140, 0.42);

  background: rgba(212, 180, 140, 0.055);

  transform: rotate(45deg);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {
  .maje-why {
    padding: 105px 0 115px;
  }

  .maje-why .maje-section-header {
    margin-bottom: 60px;
  }

  .maje-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    max-width: 760px;
  }

  .maje-benefit:nth-child(1),
  .maje-benefit:nth-child(2),
  .maje-benefit:nth-child(3),
  .maje-benefit:nth-child(4),
  .maje-benefit:nth-child(5) {
    grid-column: auto;
  }

  .maje-benefit:nth-child(5) {
    grid-column: 1 / -1;

    max-width: 365px;

    width: 100%;

    justify-self: center;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .maje-why {
    padding: 85px 0 90px;
  }

  .maje-why .maje-section-header {
    margin-bottom: 48px;
  }

  .maje-why .maje-section-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 3.5px;
  }

  .maje-why .maje-section-title {
    font-size: clamp(2rem, 8vw, 2.65rem);
    line-height: 1.35;
  }

  .maje-benefits {
    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

    max-width: 570px;
  }

  .maje-benefit:nth-child(1),
  .maje-benefit:nth-child(2),
  .maje-benefit:nth-child(3),
  .maje-benefit:nth-child(4),
  .maje-benefit:nth-child(5) {
    grid-column: auto;

    max-width: none;

    width: auto;
  }

  .maje-benefit {
    min-height: auto;

    padding: 25px 24px;

    display: grid;

    grid-template-columns: auto 1fr;

    column-gap: 18px;

    align-items: center;
  }

  .maje-benefit-number {
    grid-column: 1 / -1;

    margin-bottom: 15px;
  }

  .maje-benefit-icon {
    grid-column: 1;

    grid-row: 2 / span 2;

    margin: 0;
  }

  .maje-benefit h3 {
    grid-column: 2;

    margin: 0 0 4px;
  }

  .maje-benefit p {
    grid-column: 2;

    max-width: none;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .maje-why {
    padding: 70px 0 75px;
  }

  .maje-why .maje-section-header {
    margin-bottom: 40px;
  }

  .maje-why .maje-section-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 2.7px;
  }

  .maje-why .maje-section-title {
    font-size: 1.9rem;
  }

  .maje-why .maje-section-line {
    width: 58px;

    margin-top: 19px;
  }

  .maje-benefit {
    padding: 22px 20px;

    column-gap: 14px;
  }

  .maje-benefit-number {
    font-size: 0.65rem;
    letter-spacing: 2.5px;

    margin-bottom: 13px;
  }

  .maje-benefit-icon {
    width: 38px;
    height: 38px;

    font-size: 0.9rem;
  }

  .maje-benefit h3 {
    font-size: 0.88rem;
  }

  .maje-benefit p {
    font-size: 0.72rem;
    line-height: 1.9;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .maje-benefit,
  .maje-benefit::before,
  .maje-benefit::after,
  .maje-benefit-icon {
    transition: none;
  }
}


/* =========================================================
   MAJÉ — TECHNOLOGY & BEAUTY
   Image Editorial Layout
   ========================================================= */

.maje-technology {
    position: relative;

    min-height: 560px;

    padding: 105px 0 110px;

    background: var(--navy-950);

    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.maje-tech-bg {
    position: absolute;
    inset: 0;

    z-index: -2;

    background-image:
        url("../images/technology-bg.jpg");

    background-size: cover;
    background-position: center center;

    transform: scale(1.02);
}


/* =========================================================
   DARK OVERLAY
   ========================================================= */

.maje-tech-bg::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 15, 27, 0.97) 0%,
            rgba(5, 15, 27, 0.88) 34%,
            rgba(5, 15, 27, 0.58) 58%,
            rgba(5, 15, 27, 0.82) 100%
        );
}


/* subtle vertical cinematic gradient */

.maje-tech-bg::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 12, 22, 0.18) 0%,
            transparent 35%,
            rgba(4, 12, 22, 0.35) 100%
        );
}


/* =========================================================
   CONTAINER
   ========================================================= */

.maje-technology .container {
    position: relative;

    z-index: 2;
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.maje-tech-wrapper {
    display: grid;

    grid-template-columns:
        minmax(380px, 0.9fr)
        minmax(420px, 1fr);

    align-items: center;

    gap: clamp(70px, 9vw, 140px);

    direction: ltr;

    min-height: 340px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.maje-tech-content {
    position: relative;

    direction: rtl;

    text-align: right;

    max-width: 520px;

    margin-left: auto;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.maje-technology .maje-section-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    font-family: var(--font-en-serif);

    font-size: 0.76rem;
    font-style: italic;
    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: var(--gold-soft);
}


/* =========================================================
   TITLE
   ========================================================= */

.maje-technology .maje-section-title {
    margin: 0;

    font-family: var(--font-fa);

    font-size: clamp(2.25rem, 4vw, 3.35rem);

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: -0.4px;

    color: var(--cream);
}


/* highlighted title */

.maje-technology .maje-section-title strong {
    font-family: var(--font-fa);

    font-weight: 700;

    color: var(--gold-champagne);
}


/* =========================================================
   GOLD LINE
   ========================================================= */

.maje-technology .maje-gold-line {
    position: relative;

    width: 78px;
    height: 1px;

    margin: 20px 0 25px auto;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--gold-champagne) 100%
        );

    opacity: 0.9;
}


/* center dot */

.maje-technology .maje-gold-line::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 4px;
    height: 4px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--gold-champagne);

    box-shadow:
        0 0 12px rgba(212, 180, 140, 0.35);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.maje-tech-content > p {
    max-width: 490px;

    margin: 0;

    font-family: var(--font-fa);

    font-size: 0.9rem;

    font-weight: 300;

    line-height: 2.15;

    color: var(--muted);

    text-align: right;
}


/* =========================================================
   FEATURES
   ========================================================= */

.maje-tech-features {
    display: flex;

    flex-direction: column;

    width: 100%;

    direction: rtl;
}


/* =========================================================
   FEATURE
   ========================================================= */

.maje-tech-feature {
    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    min-height: 105px;

    padding: 18px 20px;

    direction: rtl;

    text-align: right;

    border-bottom:
        1px solid rgba(212, 180, 140, 0.16);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(4, 12, 22, 0.12)
        );

    transition:
        background 0.45s ease,
        padding-right 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease;
}


/* first line */

.maje-tech-feature:first-child {
    border-top:
        1px solid rgba(212, 180, 140, 0.16);
}


/* =========================================================
   NUMBER
   ========================================================= */

.maje-tech-feature > span {
    position: relative;

    flex: 0 0 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    direction: ltr;

    border:
        1px solid rgba(212, 180, 140, 0.30);

    border-radius: 50%;

    font-family: var(--font-en-serif);

    font-size: 0.78rem;
    font-weight: 500;

    letter-spacing: 1px;

    color: var(--gold-soft);

    background:
        rgba(5, 15, 27, 0.28);

    box-shadow:
        0 0 0 5px rgba(212, 180, 140, 0.025);

    transition:
        color 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   FEATURE CONTENT
   ========================================================= */

.maje-tech-feature > div {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 3px;

    min-width: 0;

    text-align: right;
}


.maje-tech-feature strong {
    display: block;

    font-family: var(--font-fa);

    font-size: 0.98rem;

    font-weight: 600;

    line-height: 1.8;

    color: var(--cream);

    transition:
        color 0.35s ease;
}


.maje-tech-feature small {
    display: block;

    font-family: var(--font-fa);

    font-size: 0.75rem;

    font-weight: 300;

    line-height: 1.9;

    color: var(--muted);
}


/* =========================================================
   GOLD ACCENT
   ========================================================= */

.maje-tech-feature::before {
    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-champagne)
        );

    transition:
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* little indicator */

.maje-tech-feature::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 3px;
    height: 3px;

    transform:
        translateY(-50%)
        scale(0);

    border-radius: 50%;

    background: var(--gold-champagne);

    box-shadow:
        0 0 10px rgba(212, 180, 140, 0.5);

    transition:
        transform 0.4s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.maje-tech-feature:hover {
    padding-right: 28px;

    background:
        linear-gradient(
            90deg,
            rgba(212, 180, 140, 0.025),
            rgba(212, 180, 140, 0.075)
        );

    border-bottom-color:
        rgba(212, 180, 140, 0.28);
}


.maje-tech-feature:hover::before {
    width: 70%;
}


.maje-tech-feature:hover::after {
    transform:
        translateY(-50%)
        scale(1);
}


.maje-tech-feature:hover > span {
    color: var(--gold-champagne);

    border-color:
        rgba(212, 180, 140, 0.55);

    background:
        rgba(212, 180, 140, 0.045);

    transform: rotate(45deg);
}


.maje-tech-feature:hover strong {
    color: var(--gold-champagne);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .maje-technology {
        padding: 100px 0 110px;
    }

    .maje-tech-wrapper {
        grid-template-columns: 1fr;

        gap: 60px;

        max-width: 720px;

        margin: 0 auto;
    }

    .maje-tech-content {
        max-width: 650px;

        margin: 0 auto;

        text-align: center;
    }

    .maje-technology .maje-section-eyebrow {
        margin-bottom: 11px;
    }

    .maje-technology .maje-gold-line {
        margin-left: auto;
        margin-right: auto;
    }

    .maje-tech-content > p {
        max-width: 620px;

        margin: 0 auto;

        text-align: center;
    }

    .maje-tech-features {
        max-width: 650px;

        margin: 0 auto;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .maje-technology {
        min-height: auto;

        padding: 80px 0 85px;
    }

    .maje-tech-bg {
        background-position: center;
    }

    .maje-tech-bg::before {
        background:
            linear-gradient(
                180deg,
                rgba(5, 15, 27, 0.92),
                rgba(5, 15, 27, 0.82)
            );
    }

    .maje-tech-wrapper {
        gap: 48px;
    }

    .maje-technology .maje-section-eyebrow {
        font-size: 0.72rem;

        letter-spacing: 3.5px;
    }

    .maje-technology .maje-section-title {
        font-size: clamp(2rem, 8vw, 2.6rem);

        line-height: 1.4;
    }

    .maje-technology .maje-gold-line {
        width: 62px;

        margin-top: 17px;
        margin-bottom: 21px;
    }

    .maje-tech-content > p {
        font-size: 0.86rem;

        line-height: 2.1;
    }

    .maje-tech-feature {
        min-height: 96px;

        gap: 16px;

        padding: 15px 12px;
    }

    .maje-tech-feature:hover {
        padding-right: 18px;
    }

    .maje-tech-feature > span {
        flex-basis: 43px;

        width: 43px;
        height: 43px;

        font-size: 0.72rem;
    }

    .maje-tech-feature strong {
        font-size: 0.88rem;
    }

    .maje-tech-feature small {
        font-size: 0.7rem;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .maje-technology {
        padding: 70px 0 75px;
    }

    .maje-tech-wrapper {
        gap: 40px;
    }

    .maje-technology .maje-section-eyebrow {
        font-size: 0.66rem;

        letter-spacing: 2.7px;
    }

    .maje-technology .maje-section-title {
        font-size: 1.9rem;
    }

    .maje-tech-content > p {
        font-size: 0.8rem;

        line-height: 2;
    }

    .maje-tech-feature {
        min-height: 88px;

        gap: 13px;

        padding: 14px 8px;
    }

    .maje-tech-feature:hover {
        padding-right: 13px;
    }

    .maje-tech-feature > span {
        flex-basis: 38px;

        width: 38px;
        height: 38px;

        font-size: 0.66rem;
    }

    .maje-tech-feature strong {
        font-size: 0.82rem;
    }

    .maje-tech-feature small {
        font-size: 0.66rem;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .maje-tech-feature,
    .maje-tech-feature::before,
    .maje-tech-feature::after,
    .maje-tech-feature > span,
    .maje-tech-feature strong {
        transition: none !important;
    }
}



/* =========================================================
   MAJÉ — PRODUCTS COLLECTION
   Luxury E-Commerce Section
   ========================================================= */

   .maje-products-section {
    position: relative;

    padding: 125px 0 135px;

    background:
        linear-gradient(
            180deg,
            var(--navy-950) 0%,
            rgba(8, 19, 34, 0.98) 100%
        );

    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

.maje-products-section::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: -430px;
    top: 35%;

    transform: translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(212, 180, 140, 0.045),
            rgba(212, 180, 140, 0.012) 40%,
            transparent 72%
        );

    pointer-events: none;

    z-index: -1;
}


.maje-products-section::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -300px;
    bottom: -280px;

    background:
        radial-gradient(
            circle,
            rgba(212, 180, 140, 0.035),
            transparent 70%
        );

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.maje-products-section .maje-section-header {
    position: relative;

    max-width: 760px;

    margin: 0 auto 48px;

    text-align: center;

    direction: rtl;
}


/* Eyebrow */

.maje-products-section .maje-section-eyebrow {
    display: inline-block;

    margin-bottom: 13px;

    font-family: var(--font-en-serif);

    font-size: 0.8rem;
    font-style: italic;
    font-weight: 500;

    letter-spacing: 4.5px;

    text-transform: uppercase;

    color: var(--gold-soft);
}


/* Title */

.maje-products-section .maje-section-title {
    margin: 0;

    font-family: var(--font-fa);

    font-size: clamp(2.25rem, 4vw, 3.4rem);

    font-weight: 500;

    line-height: 1.35;

    letter-spacing: -0.35px;

    color: var(--cream);
}


.maje-products-section .maje-section-title strong {
    font-family: var(--font-en-serif);

    font-style: italic;

    font-weight: 600;

    color: var(--gold-champagne);

    letter-spacing: 0.5px;
}


/* Header line */

.maje-products-section .maje-section-line {
    position: relative;

    width: 72px;
    height: 1px;

    margin: 22px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-champagne),
            transparent
        );

    opacity: 0.9;
}


.maje-products-section .maje-section-line::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 4px;
    height: 4px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: var(--gold-champagne);

    box-shadow:
        0 0 12px rgba(212, 180, 140, 0.3);
}


/* =========================================================
   PRODUCT TABS
   ========================================================= */

.maje-product-tabs {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0 auto 58px;

    direction: rtl;
}


/* Tab */

.maje-product-tab {
    position: relative;

    padding: 10px 20px;

    border: 0;

    background: transparent;

    font-family: var(--font-fa);

    font-size: 0.82rem;

    font-weight: 400;

    color: var(--muted);

    cursor: pointer;

    transition:
        color 0.35s ease,
        background 0.35s ease;
}


/* Underline */

.maje-product-tab::after {
    content: "";

    position: absolute;

    right: 50%;
    bottom: 1px;

    width: 0;
    height: 1px;

    transform: translateX(50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-champagne),
            transparent
        );

    transition:
        width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Hover */

.maje-product-tab:hover {
    color: var(--gold-soft);
}


.maje-product-tab:hover::after {
    width: 55%;
}


/* Active */

.maje-product-tab.active {
    color: var(--gold-champagne);
}


.maje-product-tab.active::after {
    width: 75%;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.maje-products-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.maje-product-card {
    position: relative;

    min-width: 0;

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.027),
            rgba(255, 255, 255, 0.007)
        );

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.15);

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        background 0.4s ease,
        box-shadow 0.5s ease;
}

/* ========================= PRODUCT FILTER ========================= */ .maje-product-card.is-hidden { display: none; }
/* Top gold accent */

.maje-product-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 0;
    height: 1px;

    z-index: 3;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-champagne)
        );

    transition:
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Card link */

.maje-product-card > a {
    display: block;

    height: 100%;

    color: inherit;

    text-decoration: none;
}


/* Hover */

.maje-product-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(212, 180, 140, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(212, 180, 140, 0.045),
            rgba(255, 255, 255, 0.008)
        );

    box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.27),
        0 0 35px rgba(212, 180, 140, 0.025);
}


.maje-product-card:hover::before {
    width: 70%;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.maje-product-image {
    position: relative;

    height: 330px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(212, 180, 140, 0.075),
            rgba(8, 19, 34, 0.15) 45%,
            rgba(4, 12, 22, 0.5) 100%
        );

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);
}


/* Image glow */

.maje-product-image::before {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 180, 140, 0.12),
            transparent 68%
        );

    opacity: 0.45;

    transition:
        transform 0.6s ease,
        opacity 0.5s ease;
}


.maje-product-card:hover .maje-product-image::before {
    transform:
        translate(-50%, -50%)
        scale(1.15);

    opacity: 0.7;
}


/* Product image */

.maje-product-image img {
    position: relative;

    z-index: 1;

    display: block;

    width: auto;
    height: auto;

    max-width: 78%;
    max-height: 82%;

    object-fit: contain;

    filter:
        drop-shadow(0 18px 24px rgba(0, 0, 0, 0.38));

    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}


.maje-product-card:hover .maje-product-image img {
    transform:
        translateY(-7px)
        scale(1.055);

    filter:
        drop-shadow(0 25px 32px rgba(0, 0, 0, 0.48));
}


/* =========================================================
   BADGE
   ========================================================= */

.maje-product-badge {
    position: absolute;

    top: 17px;
    right: 17px;

    z-index: 4;

    padding: 5px 10px;

    border:
        1px solid rgba(212, 180, 140, 0.3);

    background:
        rgba(5, 15, 27, 0.58);

    color: var(--gold-soft);

    font-family: var(--font-en-serif);

    font-size: 0.61rem;

    font-weight: 600;

    letter-spacing: 1.8px;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   PRODUCT CONTENT
   ========================================================= */

.maje-product-content {
    display: flex;

    flex-direction: column;

    min-height: 185px;

    padding: 22px 22px 20px;

    direction: rtl;

    text-align: right;
}


/* Category */

.maje-product-category {
    display: block;

    margin-bottom: 7px;

    font-family: var(--font-en-serif);

    font-size: 0.66rem;

    font-style: italic;

    font-weight: 500;

    letter-spacing: 2px;

    color: var(--gold-soft);

    text-transform: uppercase;
}


/* Title */

.maje-product-title {
    margin: 0 0 6px;

    font-family: var(--font-fa);

    font-size: 1rem;

    font-weight: 600;

    line-height: 1.8;

    color: var(--cream);
}


/* Description */

.maje-product-description {
    margin: 0;

    font-family: var(--font-fa);

    font-size: 0.72rem;

    font-weight: 300;

    line-height: 1.8;

    color: var(--muted);
}


/* =========================================================
   PRODUCT FOOTER
   ========================================================= */

.maje-product-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: auto;

    padding-top: 20px;
}


/* Price */

.maje-product-footer strong {
    font-family: var(--font-fa);

    font-size: 0.86rem;

    font-weight: 600;

    color: var(--gold-champagne);

    white-space: nowrap;
}


/* =========================================================
   NEW BUY BUTTON
   ========================================================= */

.maje-product-cart {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 105px;

    height: 38px;

    padding: 0 14px;

    border:
        1px solid rgba(212, 180, 140, 0.28);

    border-radius: 4px;

    background:
        rgba(212, 180, 140, 0.035);

    color: var(--gold-soft);

    font-family: var(--font-fa);

    font-size: 0;

    cursor: pointer;

    overflow: hidden;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}


/* Cart icon */




/* Button text */

.maje-product-cart::after {
    content: "مشاهده جزئیات و خرید";

    font-family: var(--font-fa);

    font-size: 0.68rem;

    font-weight: 400;

    white-space: nowrap;
}


/* Hover */

.maje-product-card:hover .maje-product-cart {
    color: var(--navy-950);

    background:
        var(--gold-champagne);

    border-color:
        var(--gold-champagne);

    box-shadow:
        0 8px 22px rgba(212, 180, 140, 0.18);
}


.maje-product-card:hover .maje-product-cart::before {
    transform: translateX(-2px);

    opacity: 1;

    filter: grayscale(0);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .maje-products-section {
        padding: 105px 0 115px;
    }

    .maje-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        max-width: 760px;

        gap: 18px;
    }

    .maje-product-image {
        height: 300px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .maje-products-section {
        padding: 85px 0 90px;
    }

    .maje-products-section .maje-section-header {
        margin-bottom: 38px;
    }

    .maje-products-section .maje-section-eyebrow {
        font-size: 0.72rem;

        letter-spacing: 3.5px;
    }

    .maje-products-section .maje-section-title {
        font-size: clamp(2rem, 8vw, 2.65rem);
    }

    .maje-product-tabs {
        gap: 3px;

        margin-bottom: 42px;
    }

    .maje-product-tab {
        padding: 8px 11px;

        font-size: 0.72rem;
    }

    .maje-products-grid {
        grid-template-columns: 1fr;

        max-width: 470px;
    }

    .maje-product-image {
        height: 330px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .maje-products-section {
        padding: 70px 0 75px;
    }

    .maje-products-section .maje-section-eyebrow {
        font-size: 0.66rem;

        letter-spacing: 2.7px;
    }

    .maje-products-section .maje-section-title {
        font-size: 1.9rem;
    }

    .maje-product-tabs {
        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 7px;

        scrollbar-width: none;
    }

    .maje-product-tabs::-webkit-scrollbar {
        display: none;
    }

    .maje-product-tab {
        flex: 0 0 auto;

        padding: 8px 12px;
    }

    .maje-products-grid {
        gap: 14px;
    }

    .maje-product-image {
        height: 285px;
    }

    .maje-product-content {
        min-height: 175px;

        padding: 19px 17px 17px;
    }

    .maje-product-title {
        font-size: 0.9rem;
    }

    .maje-product-cart {
        min-width: 95px;

        height: 36px;

        padding: 0 11px;
    }

    .maje-product-cart::after {
        font-size: 0.63rem;
    }
}



/* =========================================================
   MAJÉ — REAL RESULTS
   Editorial Results Gallery
   ========================================================= */

   .maje-results {
    position: relative;

    padding: 125px 0 135px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 19, 34, 0.98),
            var(--navy-950)
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

.maje-results::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -360px;
    top: 50%;

    transform: translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(212, 180, 140, 0.045),
            transparent 70%
        );

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   HEADER
   ========================================================= */

.maje-results .maje-section-header {
    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;

    direction: rtl;
}


.maje-results .maje-section-eyebrow {
    display: inline-block;

    margin-bottom: 13px;

    font-family: var(--font-en-serif);

    font-size: 0.8rem;

    font-style: italic;

    font-weight: 500;

    letter-spacing: 4.5px;

    color: var(--gold-soft);

    text-transform: uppercase;
}


.maje-results .maje-section-title {
    margin: 0;

    font-family: var(--font-fa);

    font-size: clamp(2.25rem, 4vw, 3.4rem);

    font-weight: 500;

    line-height: 1.35;

    color: var(--cream);
}


.maje-results .maje-section-title strong {
    font-weight: 700;

    color: var(--gold-champagne);
}


.maje-results .maje-section-line {
    position: relative;

    width: 72px;
    height: 1px;

    margin: 22px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-champagne),
            transparent
        );
}


.maje-results .maje-section-line::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 4px;
    height: 4px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: var(--gold-champagne);

    box-shadow:
        0 0 12px rgba(212, 180, 140, 0.3);
}


/* =========================================================
   RESULTS GRID
   ========================================================= */

.maje-results-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;

    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   RESULT CARD
   ========================================================= */

.maje-result-card {
    position: relative;

    height: 203px;

    margin: 0;

    overflow: hidden;

    background: var(--navy-950);

    border:
        1px solid rgba(212, 180, 140, 0.14);

    border-radius: 6px;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        box-shadow 0.5s ease;
}


/* Gold top line */

.maje-result-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 0;
    height: 1px;

    z-index: 3;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-champagne)
        );

    transition:
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Image */

.maje-result-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease;

    filter: brightness(0.84) saturate(0.82) contrast(1.03);
}


/* Dark overlay */

.maje-result-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 12, 22, 0.02) 35%,
            rgba(4, 12, 22, 0.42) 100%
        );

    pointer-events: none;

    transition:
        opacity 0.5s ease;
}


/* Hover */

.maje-result-card:hover {
    transform: translateY(-9px);

    border-color:
        rgba(212, 180, 140, 0.3);

    box-shadow:
        0 32px 70px rgba(0, 0, 0, 0.3);
}


.maje-result-card:hover::before {
    width: 70%;
}


.maje-result-card:hover::after {
    opacity: 0.65;
}


.maje-result-card:hover img {
    transform: scale(1.055);

    filter:
        brightness(1.04)
        saturate(1.03);
}


/* =========================================================
   MIDDLE CARD — EDITORIAL EMPHASIS
   ========================================================= */

.maje-result-card:nth-child(2) {
    transform: translateY(-18px);
}


.maje-result-card:nth-child(2):hover {
    transform: translateY(-27px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .maje-results {
        padding: 105px 0 115px;
    }

    .maje-results-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        max-width: 760px;
    }

    .maje-result-card {
        height: 420px;
    }

    .maje-result-card:nth-child(2) {
        transform: none;
    }

    .maje-result-card:nth-child(2):hover {
        transform: translateY(-9px);
    }

    .maje-result-card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 11px);

        justify-self: center;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .maje-results {
        padding: 85px 0 90px;
    }

    .maje-results .maje-section-header {
        margin-bottom: 45px;
    }

    .maje-results .maje-section-eyebrow {
        font-size: 0.72rem;

        letter-spacing: 3.5px;
    }

    .maje-results .maje-section-title {
        font-size: clamp(2rem, 8vw, 2.65rem);
    }

    .maje-results-grid {
        grid-template-columns: 1fr;

        max-width: 500px;

        gap: 16px;
    }

    .maje-result-card,
    .maje-result-card:last-child {
        grid-column: auto;

        width: 100%;

        height: 430px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .maje-results {
        padding: 70px 0 75px;
    }

    .maje-results .maje-section-eyebrow {
        font-size: 0.66rem;

        letter-spacing: 2.7px;
    }

    .maje-results .maje-section-title {
        font-size: 1.9rem;
    }

    .maje-result-card,
    .maje-result-card:last-child {
        height: 360px;
    }
}


/* =========================================================
   MAJÉ — PROFESSIONAL COLLABORATION
   Editorial CTA Section
   ========================================================= */

   .maje-collaboration {
    position: relative;

    padding: 120px 0 130px;
    margin-bottom: -60px;

    background:
        linear-gradient(
            180deg,
            var(--navy-950) 0%,
            rgba(5, 14, 26, 1) 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

.maje-collaboration::before {
    content: "";

    position: absolute;

    width: 720px;
    height: 720px;

    left: -430px;
    top: 50%;

    transform: translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(212, 180, 140, 0.055),
            rgba(212, 180, 140, 0.012) 40%,
            transparent 72%
        );

    pointer-events: none;

    z-index: -1;
}


.maje-collaboration::after {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -330px;
    bottom: -300px;

    background:
        radial-gradient(
            circle,
            rgba(212, 180, 140, 0.035),
            transparent 70%
        );

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.maje-collaboration-bg {
    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;
}


.maje-collaboration-bg::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(212, 180, 140, 0.018),
            transparent 40%,
            transparent 60%,
            rgba(212, 180, 140, 0.015)
        );
}


/* =========================================================
   WRAPPER
   ========================================================= */

.maje-collaboration-wrapper {
    display: grid;

    grid-template-columns:
        minmax(420px, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(70px, 9vw, 130px);

    direction: ltr;

    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   IMAGE
   ========================================================= */

.maje-collaboration-image {
    position: relative;

    min-height: 470px;

    direction: ltr;

    overflow: visible;
}


/* Image frame */

.maje-collaboration-image::before {
    content: "";

    position: absolute;

    inset: 22px -22px -22px 22px;

    border:
        1px solid rgba(212, 180, 140, 0.15);

    z-index: -1;

    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease;

        filter: brightness(0.84) saturate(0.82) contrast(1.03);
}


/* Gold corner */

.maje-collaboration-image::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 65px;
    height: 65px;

    border-top:
        1px solid var(--gold-champagne);

    border-left:
        1px solid var(--gold-champagne);

    opacity: 0.6;

    pointer-events: none;

    transition:
        width 0.5s ease,
        height 0.5s ease;
}


.maje-collaboration-image img {
    display: block;

    width: 100%;
    height: 470px;

    object-fit: cover;

    border:
        1px solid rgba(212, 180, 140, 0.16);

    border-radius: 5px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.3);

    filter:
        saturate(0.88)
        brightness(0.9);

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease,
        box-shadow 0.5s ease;
}


/* Image hover */

.maje-collaboration-image:hover::before {
    transform: translate(-8px, 8px);

    border-color:
        rgba(212, 180, 140, 0.28);
}


.maje-collaboration-image:hover::after {
    width: 85px;
    height: 85px;

    opacity: 0.85;
}


.maje-collaboration-image:hover img {
    transform: translateY(-7px);

    filter:
        saturate(1)
        brightness(0.98);

    box-shadow:
        0 38px 80px rgba(0, 0, 0, 0.4);
}


/* =========================================================
   CONTENT
   ========================================================= */

.maje-collaboration-content {
    direction: rtl;

    text-align: right;

    max-width: 520px;

    margin-right: auto;
}


/* Eyebrow */

.maje-collaboration .maje-section-eyebrow {
    display: inline-block;

    margin-bottom: 14px;

    font-family: var(--font-en-serif);

    font-size: 0.8rem;

    font-style: italic;

    font-weight: 500;

    letter-spacing: 4.5px;

    text-transform: uppercase;

    color: var(--gold-soft);
}


/* Title */

.maje-collaboration .maje-section-title {
    margin: 0;

    font-family: var(--font-fa);

    font-size: clamp(2.25rem, 4vw, 3.45rem);

    font-weight: 500;

    line-height: 1.4;

    color: var(--cream);
}


.maje-collaboration .maje-section-title strong {
    font-weight: 700;

    color: var(--gold-champagne);
}


/* Gold line */

.maje-collaboration .maje-gold-line {
    position: relative;

    width: 72px;
    height: 1px;

    margin: 22px 0 27px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-champagne)
        );
}


.maje-collaboration .maje-gold-line::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 4px;
    height: 4px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--gold-champagne);

    box-shadow:
        0 0 10px rgba(212, 180, 140, 0.3);
}


/* Description */

.maje-collaboration-content > p {
    max-width: 490px;

    margin: 0 0 30px auto;

    font-family: var(--font-fa);

    font-size: 0.92rem;

    font-weight: 300;

    line-height: 2.1;

    color: var(--muted);

    text-align: right;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .maje-collaboration {
        padding: 105px 0 115px;
    }

    .maje-collaboration-wrapper {
        grid-template-columns:
            minmax(320px, 1fr)
            minmax(0, 1fr);

        gap: 60px;

        max-width: 800px;
    }

    .maje-collaboration-image {
        min-height: 400px;
    }

    .maje-collaboration-image img {
        height: 400px;
    }

    .maje-collaboration .maje-section-title {
        font-size: clamp(2rem, 4vw, 3rem);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .maje-collaboration {
        padding: 85px 0 90px;
    }

    .maje-collaboration-wrapper {
        display: flex;

        flex-direction: column;

        gap: 55px;

        max-width: 600px;
    }

    .maje-collaboration-image {
        width: 100%;

        min-height: 390px;
    }

    .maje-collaboration-image img {
        width: 100%;
        height: 390px;
    }

    .maje-collaboration-content {
        width: 100%;

        max-width: 600px;

        margin: 0 auto;

        text-align: right;
    }

    .maje-collaboration .maje-section-eyebrow {
        font-size: 0.72rem;

        letter-spacing: 3.5px;
    }

    .maje-collaboration .maje-section-title {
        font-size: clamp(2rem, 8vw, 2.65rem);
    }

    .maje-collaboration-content > p {
        font-size: 0.86rem;

        line-height: 2;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .maje-collaboration {
        padding: 70px 0 75px;
    }

    .maje-collaboration-wrapper {
        gap: 43px;
    }

    .maje-collaboration-image {
        min-height: 320px;
    }

    .maje-collaboration-image img {
        height: 320px;
    }

    .maje-collaboration-image::before {
        inset: 14px -14px -14px 14px;
    }

    .maje-collaboration-image::after {
        width: 45px;
        height: 45px;
    }

    .maje-collaboration .maje-section-eyebrow {
        font-size: 0.66rem;

        letter-spacing: 2.7px;
    }

    .maje-collaboration .maje-section-title {
        font-size: 1.9rem;
    }

    .maje-collaboration-content > p {
        font-size: 0.8rem;

        line-height: 2;
    }

    .maje-collaboration .solutions-btn {
        min-height: 46px;

        padding: 0 18px 0 13px;

        font-size: 0.76rem;
    }

    .maje-collaboration .btn-arrow {
        width: 28px;
        height: 28px;
    }
}


/* =========================================================
   MAJÉ FLOATING CALL BUTTON
========================================================= */

.maje-call-float {

  position: fixed;

  left: 24px;
  bottom: 24px;

  z-index: 9999;

  width: 285px;
  height: 76px;

  display: flex;
  align-items: center;

  padding: 6px;

  box-sizing: border-box;

  border: 1px solid
      rgba(255, 255, 255, 0.22);

  border-radius: 50px;

  background:
      rgba(5, 5, 5, 0.72);

  backdrop-filter:
      blur(16px);

  -webkit-backdrop-filter:
      blur(16px);

  color: #fff;

  text-decoration: none;

  overflow: hidden;

  /*
   * در شروع خارج از صفحه
   */
  opacity: 0;

  visibility: hidden;

  transform:
      translateX(-120%);

  transition:
      opacity 0.55s ease,
      transform 0.65s
      cubic-bezier(
          0.16,
          1,
          0.3,
          1
      ),
      visibility 0.55s ease;

}


/* =========================================================
 AFTER FIRST SCROLL
========================================================= */

.maje-call-float.is-visible {
  width: 200px;
  height: 40px;
background-color: #000410;
  opacity: 0.8;

  visibility: visible;

  transform:
      translateX(0);
  
      padding: 0px;
    

}


/* =========================================================
 PHONE NUMBER
========================================================= */

.maje-call-number {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;

  padding-left: 10px;

  direction: ltr;

  color: #f5f2ee;

  font-family: var(--font-fa);

  font-size: 14px;

  font-weight: 300;

  letter-spacing: 1px;

  white-space: nowrap;

}


/* =========================================================
 GOLD CIRCLE
========================================================= */

.maje-call-icon {

  width: 64px;
  height: 59px;

  flex: 0 0 64px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
      linear-gradient(
          145deg,
          #08111f,
          #28251b
      );

  color:
      #f4eee2;

  border:
      1px solid
      rgba(214, 183, 143, 0.28);

  box-shadow:
      0 4px 15px
      rgba(0, 0, 0, 0.3);

  transition:
      transform 0.35s
      cubic-bezier(
          0.16,
          1,
          0.3,
          1
      ),
      background 0.35s ease;

}


/* =========================================================
 ICON
========================================================= */

.maje-call-icon svg {

  width: 25px;
  height: 25px;

  transition:
      transform 0.35s ease;

      opacity: 0.8;

}


/* =========================================================
 HOVER
========================================================= */

.maje-call-float:hover {

  color: #fff;

  border-color:
      rgba(214, 183, 143, 0.38);

  box-shadow:
      0 10px 35px
      rgba(0, 0, 0, 0.35);

}


.maje-call-float:hover
.maje-call-icon {

  background:
      linear-gradient(
          145deg,
          #51492e,
          #302c20
      );

  transform:
      scale(1.04);

}


.maje-call-float:hover
.maje-call-icon svg {

  transform:
      rotate(-10deg);

}


/* =========================================================
 MOBILE
========================================================= */

@media (max-width: 576px) {

  .maje-call-float {

      left: 15px;
      bottom: 15px;

      width: 245px;
      height: 64px;

      padding: 5px;

  }


  .maje-call-number {

      font-size: 16px;

      letter-spacing: 0.5px;

  }


  .maje-call-icon {

      width: 54px;
      height: 54px;

      flex-basis: 54px;

  }


  .maje-call-icon svg {

      width: 26px;
      height: 26px;

  }

}


/* =====================================================
   MAJÉ — LUXURY CUSTOM CURSOR
   ===================================================== */

/* فقط دسکتاپ */
@media (min-width: 769px) {

  /* نشانگر اصلی */
  body {
      cursor: none;
  }

  a,
  button,
  input,
  textarea,
  select,
  [role="button"] {
      cursor: none;
  }


  /* حلقه اصلی */
  .maje-cursor {
      position: fixed;

      width: 34px;
      height: 34px;

      border: 1px solid rgba(214, 183, 143, 0.65);

      border-radius: 50%;

      pointer-events: none;

      z-index: 999999;

      transform: translate3d(-50%, -50%, 0);

      transition:
          width 0.35s cubic-bezier(.22,1,.36,1),
          height 0.35s cubic-bezier(.22,1,.36,1),
          border-color 0.35s ease,
          background 0.35s ease,
          opacity 0.3s ease;

      mix-blend-mode: normal;
  }


  /* نقطه وسط */
  .maje-cursor-dot {
    position: absolute;

    width: 5px;
    height: 5px;

    top: 50%;
    left: 50%;

    background: #e7cdad;

    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(231, 205, 173, 0.6),
        0 0 18px rgba(214, 183, 143, 0.25);

    transition:
        width 0.3s ease,
        height 0.3s ease;

    /* مهم */
    will-change: transform;
}


  /* وقتی موس روی لینک / دکمه است */
  .maje-cursor.is-hover {
      width: 54px;
      height: 54px;

      border-color: rgba(231, 205, 173, 0.9);

      background: rgba(214, 183, 143, 0.045);

      box-shadow:
          0 0 30px rgba(214, 183, 143, 0.08);
  }


  .maje-cursor.is-hover .maje-cursor-dot {
      width: 7px;
      height: 7px;

      transform: translate(-50%, -50%) scale(1.15);
  }


  /* وقتی روی input هست */
  .maje-cursor.is-input {
      width: 24px;
      height: 24px;

      border-color: rgba(231, 205, 173, 0.8);
  }


  /* وقتی موس از صفحه خارج می‌شود */
  .maje-cursor.is-hidden {
      opacity: 0;
  }
}
@media (max-width: 480px){
  .maje-cursor{
    display: none;
  }
}
/* =========================================================
   MAJÉ HERO — FINAL RESPONSIVE OVERRIDES
   ========================================================= */

/* جلوگیری از اسکرول افقی ناشی از تصویر 160% و عناصر absolute */
#majeHero {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#majeHero .maje-hero-inner {
  box-sizing: border-box;
}

/* ---------- TABLET ---------- */
@media (max-width: 1100px) and (min-width: 769px) {
  #majeHero {
    height: 640px;
    padding-left: 3%;
    padding-right: 3%;
  }

  #majeHero .maje-hero-inner {
    grid-template-columns: minmax(190px, .75fr) minmax(0, 1.55fr) minmax(230px, .95fr);
    gap: 10px;
  }

  #majeHero .maje-hero-content {
    padding-right: 8px;
  }

  #majeHero .maje-title {
    font-size: clamp(4rem, 7vw, 5.8rem);
  }

  #majeHero .maje-title-line {
    margin-bottom: 35px;
  }

  #majeHero .maje-description {
    max-width: 330px;
    font-size: 14px;
  }

  #majeHero .maje-hero-products img {
    width: 125%;
    max-width: 760px;
  }

  #majeHero .maje-hero-left {
    margin-right: 0;
    padding-bottom: 35px;
  }

  #majeHero .maje-video-box {
    margin-left: 0;
    margin-bottom: 70px;
  }

  #majeHero .maje-slider-progress {
    width: 180px;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  #majeHero {
    height: auto !important;
    min-height: 0 !important;
    padding: 88px 18px 72px !important;
    display: block;
  }

  /* تبدیل سه ستون دسکتاپ به یک ستون واقعی */
  #majeHero .maje-hero-inner {
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    direction: ltr;
  }

  /* ترتیب موبایل:
     1) متن
     2) تصویر اصلی
     3) ویدیو + مینی کاروسل
     4) کنترل‌های کاروسل
  */
  #majeHero .maje-hero-content {
    order: 1;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 0 28px;
    text-align: center;
    direction: rtl;
    box-sizing: border-box;
  }

  #majeHero .maje-eyebrow {
    font-size: 12px;
    letter-spacing: .8px;
    margin-bottom: 3px;
  }

  #majeHero .maje-title {
    width: 100%;
    margin: 0 0 8px;
    font-size: clamp(3.7rem, 17vw, 5.8rem);
    line-height: .95;
    letter-spacing: 1px;
    text-align: center;
  }

  #majeHero .maje-title-line {
    width: 85px;
    max-width: 85px;
    margin: 0 auto 16px;
  }

  #majeHero .main-headline {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 8px;
    padding: 0;
    font-size: clamp(1.05rem, 4.6vw, 1.45rem);
    line-height: 1.7;
    text-align: center;
  }

  #majeHero .maje-description {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    padding: 0 4px;
    box-sizing: border-box;
    font-size: clamp(.78rem, 3.1vw, .92rem);
    line-height: 1.95;
    text-align: center;
  }

  /* تصویر اصلی */
  #majeHero .maje-products-stage {
    order: 2;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    direction: ltr;
    box-sizing: border-box;
  }

  #majeHero .maje-hero-visual {
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #majeHero .maje-hero-products {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    transform: none;
  }

  #majeHero .maje-hero-products img {
    display: block;
    width: 100%;
    max-width: 540px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
  }

  /* سمت چپ شامل ویدیو و مینی کاروسل است */
  #majeHero .maje-hero-left {
    order: 3;
    width: 100%;
    max-width: 540px;
    margin: 24px auto 0;
    padding: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  #majeHero .maje-video-box {
    order: 1;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    justify-content: center;
    box-sizing: border-box;
  }

  #majeHero .maje-mini-products-carousel {
    order: 2;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  /* دو کارت همیشه داخل عرض صفحه جا می‌شوند */
  #majeHero .maje-carousel-pair {
    width: 100%;
    gap: 10px;
  }

  #majeHero .maje-carousel-pair .maje-mini-card {
    flex: 0 0 calc((100% - 10px) / 2);
    width: calc((100% - 10px) / 2);
    min-width: 0;
    min-height: 100px;
    padding: 9px 10px;
    gap: 8px;
    box-sizing: border-box;
  }

  #majeHero .maje-mini-card-content {
    min-width: 0;
  }

  #majeHero .maje-mini-card-content h3 {
    font-size: 12px;
    line-height: 1.5;
  }

  #majeHero .maje-mini-card-content p {
    font-size: 9px;
    line-height: 1.6;
  }

  #majeHero .maje-mini-card-content a {
    font-size: 9px;
    white-space: nowrap;
  }

  #majeHero .maje-mini-card-image {
    width: 58px;
    height: 70px;
    flex: 0 0 58px;
  }

  /* =======================================================
     IMPORTANT:
     کنترل‌ها قبلاً absolute بودند و بالای Hero می‌افتادند.
     حالا یک آیتم واقعی در انتهای Hero هستند و دقیقاً
     بعد از مینی‌کاروسل قرار می‌گیرند.
     ======================================================= */
  #majeHero .maje-hero-inner > .maje-hero-controls {
    order: 4;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 35px;
    margin: 14px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    direction: ltr;
    z-index: 10;
    box-sizing: border-box;
  }

  #majeHero .maje-hero-controls .maje-slider-btn {
    position: relative;
    flex: 0 0 35px;
  }

  #majeHero .maje-slider-progress {
    width: min(170px, 42vw);
    margin-left: 8px;
    margin-right: 0;
  }

  /* جلوگیری از اینکه کنترل‌های Bootstrap روی کارت‌ها بیفتند */
  #majeHero .maje-mini-products-carousel .carousel-control-prev,
  #majeHero .maje-mini-products-carousel .carousel-control-next {
    top: auto;
    bottom: -50px;
  }

  /* مارکوی پایین */
  #majeHero .maje-professional-marquee {
    position: relative;
    left: 0;
    bottom: auto;
    width: 110%;
    margin: 34px -5% 0;
    transform: rotate(-1deg);
  }
}

/* ---------- SMALL MOBILE ---------- */
@media (max-width: 480px) {
  #majeHero {
    padding: 78px 14px 64px !important;
  }

  #majeHero .maje-hero-content {
    margin-bottom: 20px;
  }

  #majeHero .maje-title {
    font-size: clamp(3.35rem, 18vw, 4.6rem);
  }

  #majeHero .maje-title-line {
    margin-bottom: 12px;
  }

  #majeHero .main-headline {
    font-size: 1rem;
  }

  #majeHero .maje-description {
    font-size: .76rem;
    line-height: 1.9;
  }

  #majeHero .maje-hero-left {
    margin-top: 18px;
  }

  #majeHero .maje-video-box {
    margin-bottom: 16px;
  }

  #majeHero .maje-carousel-pair {
    gap: 8px;
  }

  #majeHero .maje-carousel-pair .maje-mini-card {
    flex-basis: calc((100% - 8px) / 2);
    width: calc((100% - 8px) / 2);
    min-height: 92px;
    padding: 8px;
  }

  #majeHero .maje-mini-card-image {
    width: 50px;
    height: 62px;
    flex-basis: 50px;
  }

  #majeHero .maje-mini-card-content h3 {
    font-size: 10px;
  }

  #majeHero .maje-mini-card-content p,
  #majeHero .maje-mini-card-content a {
    font-size: 8px;
  }

  #majeHero .maje-hero-controls {
    margin-top: 12px;
  }

  #majeHero .maje-slider-progress {
    width: min(125px, 34vw);
  }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 360px) {
  #majeHero {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #majeHero .maje-title {
    font-size: 3.15rem;
  }

  #majeHero .maje-slider-progress {
    width: 95px;
  }
}


/* =====================================================
   MAJÉ AUTH PAGES
   Login / Register
   Designed to inherit the existing VIMA / MAJÉ system.
   ===================================================== */

   .auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 30%, rgba(212, 180, 140, 0.07), transparent 32%),
        radial-gradient(circle at 82% 70%, rgba(16, 30, 52, 0.55), transparent 38%),
        var(--navy-950);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 5% 70px;
    position: relative;
}

.auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 49.9%, rgba(214, 183, 143, 0.035) 50%, transparent 50.1%);
    opacity: .7;
}

.auth-shell {
    width: min(1120px, 100%);
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: rgba(7, 14, 27, .82);
    border: 1px solid rgba(212, 180, 140, .24);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
    backdrop-filter: blur(18px);
}

.auth-frame {
    position: absolute;
    /* inset: 14px; */
    border: 1px solid rgba(231, 205, 173, .08);
    border-radius: 17px;
    pointer-events: none;
    z-index: 3;
}

.auth-visual {
    position: relative;
    min-height: 650px;
    padding: 90px 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(212, 180, 140, .13), transparent 28%),
        linear-gradient(145deg, rgba(17, 27, 45, .98), rgba(3, 7, 17, .98));
}

.auth-visual::before,
.auth-visual::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(214, 183, 143, .12);
    border-radius: 50%;
    pointer-events: none;
}

.auth-visual::before {
    width: 460px;
    height: 460px;
    left: -190px;
    top: 80px;
}

.auth-visual::after {
    width: 300px;
    height: 300px;
    right: -130px;
    bottom: -100px;
}

.auth-eyebrow,
.auth-section-label {
    font-family: var(--font-en-serif);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--gold-soft);
}

.auth-eyebrow {
    font-size: .82rem;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.auth-brand {
    font-family: var(--font-en-serif);
    font-weight: 600;
    font-size: clamp(4rem, 8vw, 6.8rem);
    letter-spacing: 8px;
    line-height: 1;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

.auth-line {
    margin: 0 0 28px;
    max-width: 115px;
    position: relative;
    z-index: 1;
}

.auth-visual h1 {
    font-family: var(--font-fa);
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
    font-weight: 400;
    line-height: 1.7;
    margin: 0 0 16px;
    position: relative;
    z-index: 1;
}

.auth-visual h1 strong {
    color: var(--gold-champagne);
    font-weight: 800;
}

.auth-visual > p {
    max-width: 480px;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 300;
    line-height: 2;
    margin: 0;
    position: relative;
    z-index: 1;
}

.auth-quote {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
    color: rgba(231, 205, 173, .62);
    font-family: var(--font-en-serif);
    font-size: .72rem;
    letter-spacing: 3px;
    position: relative;
    z-index: 1;
}

.auth-quote span:first-child {
    color: var(--gold-champagne);
    font-size: 1rem;
}

.auth-feature-list {
    display: grid;
    gap: 13px;
    margin-top: 42px;
    position: relative;
    z-index: 1;
}

.auth-feature-list > div {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #d8d0c8;
}

.auth-feature-list span {
    font-family: var(--font-en-serif);
    color: var(--gold-soft);
    font-size: .8rem;
    letter-spacing: 2px;
}

.auth-feature-list strong {
    font-size: .88rem;
    font-weight: 400;
}

.auth-card {
    align-self: center;
    margin: 48px;
    padding: 48px 42px;
    background: rgba(243, 238, 230, .035);
    border: 1px solid rgba(231, 205, 173, .16);
    border-radius: 20px;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    position: relative;
    z-index: 4;
}

.auth-card-head {
    text-align: right;
    margin-bottom: 32px;
}

.auth-section-label {
    display: block;
    font-size: .72rem;
    margin-bottom: 8px;
}

.auth-card h2 {
    color: var(--cream);
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0 0 8px;
}

.auth-card-head p {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 300;
    margin: 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-field label,
.auth-label-row label {
    color: #d9d1c8;
    font-size: .78rem;
    font-weight: 400;
}

.auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.auth-small-link,
.auth-switch a,
.auth-terms a {
    color: var(--gold-soft);
    text-decoration: none;
    transition: color .3s ease;
}

.auth-small-link {
    font-size: .72rem;
}

.auth-small-link:hover,
.auth-switch a:hover,
.auth-terms a:hover {
    color: var(--gold-champagne);
}

.auth-field input {
    width: 100%;
    height: 50px;
    border: 1px solid rgba(214, 183, 143, .18);
    border-radius: 12px;
    background: rgba(0, 4, 16, .48);
    color: var(--cream);
    outline: none;
    padding: 0 15px;
    font-family: var(--font-fa);
    font-size: .82rem;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.auth-field input::placeholder {
    color: rgba(147, 162, 184, .65);
}

.auth-field input:focus {
    border-color: rgba(231, 205, 173, .72);
    background: rgba(0, 4, 16, .65);
    box-shadow: 0 0 0 3px rgba(231, 205, 173, .06);
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-left: 48px;
}

.password-toggle {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 9px;
}

.password-toggle:hover {
    color: var(--gold-champagne);
    background: rgba(214, 183, 143, .06);
}

.password-toggle svg {
    width: 19px;
    height: 19px;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: .76rem;
    cursor: pointer;
    user-select: none;
}

.auth-check input {
    appearance: none;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(214, 183, 143, .35);
    border-radius: 5px;
    background: rgba(0, 4, 16, .35);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 17px;
}

.auth-check input::after {
    content: "✓";
    font-size: .65rem;
    color: var(--navy-950);
    transform: scale(0);
    transition: transform .2s ease;
}

.auth-check input:checked {
    background: var(--gold-champagne);
    border-color: var(--gold-champagne);
}

.auth-check input:checked::after {
    transform: scale(1);
}

.auth-terms {
    line-height: 1.8;
}

.auth-submit {
    width: 100%;
    height: 52px;
    border: 1px solid rgba(231, 205, 173, .65);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold-champagne), #b8905e);
    color: var(--navy-950);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-fa);
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.auth-submit::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -40%;
    width: 35%;
    background: rgba(255,255,255,.32);
    transform: skewX(-18deg);
    transition: left .7s ease;
}

.auth-submit:hover::before {
    left: 120%;
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(198, 155, 100, .25);
    border-color: #f6e9d7;
}

.auth-submit span {
    position: relative;
    z-index: 1;
}

.auth-arrow {
    font-size: 1.1rem;
    transition: transform .3s ease;
}

.auth-submit:hover .auth-arrow {
    transform: translateX(-5px);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 20px;
    color: rgba(147, 162, 184, .65);
    font-size: .72rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(214, 183, 143, .12);
}

.auth-switch {
    text-align: center;
    color: var(--muted);
    font-size: .78rem;
    margin: 0;
}

.auth-switch a {
    font-weight: 600;
    margin-right: 4px;
}

@media (max-width: 900px) {
    .auth-page {
        padding: 110px 20px 50px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .auth-visual {
        min-height: auto;
        padding: 55px 45px 42px;
    }

    .auth-card {
        margin: 0 30px 30px;
    }

    .auth-feature-list {
        margin-top: 28px;
    }
}

@media (max-width: 576px) {
    .auth-page {
        padding: 95px 12px 28px;
    }

    .auth-shell {
        border-radius: 19px;
    }

    .auth-visual {
        padding: 42px 25px 35px;
        text-align: center;
        align-items: center;
    }

    .auth-brand {
        font-size: 4rem;
        letter-spacing: 5px;
    }

    .auth-line {
        margin: 0 auto 22px;
    }

    .auth-visual > p {
        font-size: .86rem;
    }

    .auth-quote {
        justify-content: center;
        margin-top: 28px;
    }

    .auth-card {
        margin: 0 12px 12px;
        padding: 32px 20px;
        border-radius: 16px;
    }

    .auth-grid {
        grid-template-columns: 1fr;
    }

    .auth-card h2 {
        font-size: 1.55rem;
    }

    .auth-field input {
        height: 48px;
    }

    .auth-frame {
        inset: 9px;
    }
}

img{
    width: 65%;
}


/* =========================================================
   MAJÉ PREMIUM PAGE LOADER
   Added for initial page loading
========================================================= */

.maje-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
      radial-gradient(
          circle at center,
          rgba(212, 180, 140, 0.06) 0%,
          rgba(212, 180, 140, 0.025) 28%,
          transparent 65%
      ),
      var(--navy-950);

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
      opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.9s ease;
}

.maje-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.maje-loader-frame {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(212, 180, 140, 0.14);
  pointer-events: none;
}

.maje-loader-frame::before,
.maje-loader-frame::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  border-color: rgba(231, 205, 173, 0.45);
  border-style: solid;
  animation: majeLoaderCorners 1.8s ease-in-out infinite;
}

.maje-loader-frame::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.maje-loader-frame::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}

.maje-loader-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: majeLoaderContent 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.maje-loader-eyebrow {
  margin-bottom: 18px;
  font-family: var(--font-en-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 5px;
  color: var(--gold-soft);
  opacity: 0;
  animation: majeLoaderFadeUp 0.8s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.maje-loader-logo {
  font-family: var(--font-en-serif);
  font-size: clamp(3.8rem, 8vw, 6rem);
  font-weight: 600;
  letter-spacing: 8px;
  line-height: 1;

  background: linear-gradient(
      135deg,
      var(--gold-soft) 0%,
      var(--gold-champagne) 45%,
      var(--gold-bright) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 0 35px rgba(212, 180, 140, 0.08);

  opacity: 0;
  animation: majeLoaderLogo 1.2s 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.maje-loader-line {
  position: relative;
  width: 150px;
  height: 1px;
  margin-top: 25px;
  background: rgba(212, 180, 140, 0.12);
  overflow: hidden;
  opacity: 0;
  animation: majeLoaderFade 0.6s 0.55s ease forwards;
}

.maje-loader-line span {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;

  background: linear-gradient(
      90deg,
      transparent,
      var(--gold-champagne),
      var(--gold-soft),
      transparent
  );

  animation: majeLoaderLine 1.8s 0.65s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.maje-loader-subtitle {
  margin-top: 17px;
  font-family: var(--font-en-serif);
  font-size: 0.65rem;
  letter-spacing: 3px;
  color: rgba(231, 205, 173, 0.55);
  opacity: 0;
  animation: majeLoaderFadeUp 0.8s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.maje-loader-progress {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  align-items: baseline;
  gap: 2px;

  font-family: var(--font-en-serif);
  color: var(--gold-soft);
  letter-spacing: 2px;
}

.maje-loader-progress span {
  min-width: 28px;
  font-size: 0.75rem;
  text-align: right;
}

.maje-loader-progress small {
  font-size: 0.55rem;
  opacity: 0.6;
}

@keyframes majeLoaderContent {
  from {
      opacity: 0;
      transform: translateY(12px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes majeLoaderLogo {
  from {
      opacity: 0;
      transform: translateY(15px);
      letter-spacing: 15px;
  }
  to {
      opacity: 1;
      transform: translateY(0);
      letter-spacing: 8px;
  }
}

@keyframes majeLoaderFadeUp {
  from {
      opacity: 0;
      transform: translateY(8px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes majeLoaderFade {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes majeLoaderLine {
  0% {
      left: -45%;
  }
  50% {
      left: 100%;
  }
  100% {
      left: 100%;
  }
}

@keyframes majeLoaderCorners {
  0%,
  100% {
      opacity: 0.35;
  }
  50% {
      opacity: 1;
  }
}

@media (max-width: 600px) {
  .maje-loader-frame {
      inset: 12px;
  }

  .maje-loader-logo {
      font-size: 3.3rem;
      letter-spacing: 6px;
  }

  .maje-loader-eyebrow {
      font-size: 0.62rem;
      letter-spacing: 4px;
  }

  .maje-loader-subtitle {
      font-size: 0.58rem;
      letter-spacing: 2px;
  }

  .maje-loader-progress {
      bottom: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .maje-loader *,
  .maje-loader {
      animation: none !important;
      transition: none !important;
  }
}



/* =========================================================
   PRODUCT PAGE ROOT
========================================================= */

.maje-product-page {

  position: relative;

  min-height: 100vh;

  background:
      linear-gradient(
          180deg,
          var(--navy-950) 0%,
          var(--navy-900) 42%,
          #08111f 100%
      );

  color: var(--cream);

  overflow-x: hidden;

}


/*
 Ambient luxury light
*/

.maje-product-page::before {

  content: "";

  position: fixed;

  width: 700px;
  height: 700px;

  top: -360px;
  left: 50%;

  transform: translateX(-50%);

  background:
      radial-gradient(
          circle,
          rgba(212, 180, 140, 0.055) 0%,
          rgba(212, 180, 140, 0.018) 38%,
          transparent 72%
      );

  pointer-events: none;

  z-index: 0;

}


/*
 Subtle side glow
*/

.maje-product-page::after {

  content: "";

  position: fixed;

  width: 520px;
  height: 520px;

  right: -340px;
  bottom: 10%;

  background:
      radial-gradient(
          circle,
          rgba(212, 180, 140, 0.035),
          transparent 70%
      );

  pointer-events: none;

  z-index: 0;

}


/* =========================================================
 PAGE FRAME
 هماهنگ با header-frame اصلی
========================================================= */

.maje-product-page .product-page-frame {

  position: fixed;

  inset: 0 22px 0px 22px;

  border:
      1px solid rgba(245, 176, 65, 0.10);

 
  pointer-events: none;

  z-index: 100;

}


/* =========================================================
 PRODUCT HEADER
 هماهنگ با custom-header اصلی
========================================================= */

.maje-product-page .product-header {

  position: relative;

  z-index: 20;

  width: calc(100% - 48px);

  height: 94px;

  margin: 24px auto 0;

  border:
      1px solid rgba(212, 180, 140, 0.22);

  border-radius: 24px;

  background:
      rgba(6, 13, 24, 0.62);

  backdrop-filter:
      blur(18px)
      saturate(140%);

  -webkit-backdrop-filter:
      blur(18px)
      saturate(140%);

  box-shadow:
      0 12px 35px rgba(0, 0, 0, 0.105),
      inset 0 1px 0 rgba(255, 255, 255, 0.022);

}


.maje-product-page .product-header-inner {

  width: 100%;

  max-width: 1180px;

  height: 100%;

  margin: 0 auto;

  padding: 0 40px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}


/* =========================================================
 LOGO
========================================================= */

.maje-product-page .product-logo {

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0;

  color: var(--cream);

  text-decoration: none;

}


.maje-product-page .product-logo span {

  font-family: var(--font-en-serif);

  font-size: 2rem;

  font-weight: 600;

  line-height: .9;

  letter-spacing: 5px;

  color: var(--gold-champagne);

}


.maje-product-page .product-logo small {

  margin-top: 7px;

  font-family: var(--font-en-serif);

  font-size: .48rem;

  letter-spacing: 3px;

  color: var(--muted);

}


/* =========================================================
 NAVIGATION
========================================================= */

.maje-product-page .product-nav {

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;

}


.maje-product-page .product-nav a {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 9px 17px;

  color: #c6ccd6;

  text-decoration: none;

  font-family: var(--font-fa);

  font-size: .76rem;

  font-weight: 400;

  transition:
      color .35s ease;

}


.maje-product-page .product-nav a::after {

  content: "";

  position: absolute;

  right: 50%;

  bottom: 2px;

  width: 0;

  height: 1px;

  transform: translateX(50%);

  background:
      linear-gradient(
          90deg,
          transparent,
          var(--gold-champagne),
          transparent
      );

  transition:
      width .4s cubic-bezier(.22,1,.36,1);

}


.maje-product-page .product-nav a:hover {

  color: var(--gold-champagne);

}


.maje-product-page .product-nav a:hover::after {

  width: 55%;

}


/* =========================================================
 HEADER ACTIONS
========================================================= */

.maje-product-page .product-header-actions {

  flex-shrink: 0;

  display: flex;

  align-items: center;

  gap: 10px;

}


.maje-product-page .header-icon-btn {

  position: relative;

  width: 40px;
  height: 40px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
      1px solid rgba(212, 180, 140, 0.22);

  border-radius: 50%;

  background:
      rgba(212, 180, 140, 0.035);

  color: var(--gold-soft);

  cursor: pointer;

  transition:
      background .35s ease,
      border-color .35s ease,
      color .35s ease,
      transform .4s cubic-bezier(.22,1,.36,1),
      box-shadow .35s ease;

}


.maje-product-page .header-icon-btn svg {

  width: 17px;
  height: 17px;

}


.maje-product-page .header-icon-btn:hover {

  color: var(--navy-950);

  background:
      var(--gold-champagne);

  border-color:
      var(--gold-champagne);

  transform:
      translateY(-2px);

  box-shadow:
      0 8px 22px
      rgba(212, 180, 140, .18);

}


.maje-product-page .cart-count {

  position: absolute;

  top: -3px;
  right: -3px;

  width: 15px;
  height: 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
      var(--gold-champagne);

  color:
      var(--navy-950);

  font-family:
      var(--font-fa);

  font-size:
      .52rem;

  line-height: 1;

}


/* =========================================================
 BREADCRUMB
========================================================= */

.maje-product-page .product-breadcrumb-section {

  position: relative;

  z-index: 2;

  padding:
      28px 6% 0;

}


.maje-product-page .product-breadcrumb {

  max-width: 1180px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 12px;

  color: #657287;

  font-family:
      var(--font-fa);

  font-size:
      .68rem;

}


.maje-product-page .product-breadcrumb a {

  color:
      #8490a2;

  text-decoration:
      none;

  transition:
      color .3s ease;

}


.maje-product-page .product-breadcrumb a:hover {

  color:
      var(--gold-champagne);

}


.maje-product-page .product-breadcrumb span:not(:last-child) {

  color:
      rgba(212, 180, 140, .35);

}


/* =========================================================
 PRODUCT HERO
========================================================= */

.maje-product-page .single-product-hero {

  position: relative;

  z-index: 2;

  padding:
      55px 6%
      105px;

}


.maje-product-page .single-product-grid {

  max-width: 1180px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
      minmax(0, 1.05fr)
      minmax(0, .95fr);

  gap: 72px;

  align-items: center;

}


/* =========================================================
 PRODUCT GALLERY
========================================================= */

.maje-product-page .single-product-gallery {

  position: relative;

  direction: ltr;

}


/* Main image */

.maje-product-page .product-gallery-main {

  position: relative;

  width: 100%;

  height: 456px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border:
      1px solid rgba(212, 180, 140, .16);

  border-radius: 8px;

  background:
      radial-gradient(
          circle at 50% 45%,
          rgba(212, 180, 140, .075),
          rgba(8, 19, 34, .65) 48%,
          rgba(0, 4, 16, .25) 100%
      );

  box-shadow:
      0 18px 45px rgba(0, 0, 0, .15);

}


/*
 Product image decorative circles
*/

.maje-product-page .product-gallery-main::before {

  content: "";

  position: absolute;

  width: 390px;
  height: 390px;

  border:
      1px solid rgba(212, 180, 140, .08);

  border-radius: 50%;

}


.maje-product-page .product-gallery-main::after {

  content: "";

  position: absolute;

  width: 285px;
  height: 285px;

  border:
      1px solid rgba(212, 180, 140, .055);

  border-radius: 50%;

}


/* Main image */

.maje-product-page .product-gallery-main img {

  position: relative;

  z-index: 2;

  width: 78%;
  height: 78%;

  object-fit: contain;

  filter:
      drop-shadow(
          0 28px 38px rgba(0, 0, 0, .45)
      );

  transition:
      opacity .22s ease,
      transform .7s cubic-bezier(.22,1,.36,1);

}


.maje-product-page .product-gallery-main:hover img {

  transform:
      scale(1.045);

}


/* =========================================================
 PRODUCT BADGE
========================================================= */

.maje-product-page .product-gallery-badge {

  position: absolute;

  top: 24px;
  right: 24px;

  z-index: 5;

  padding:
      6px 14px;

  border:
      1px solid rgba(212, 180, 140, .30);

  background:
      rgba(6, 13, 24, .58);

  color:
      var(--gold-champagne);

  font-family:
      var(--font-en-serif);

  font-size:
      .65rem;

  letter-spacing:
      3px;

  backdrop-filter:
      blur(10px);

}


/* =========================================================
 GALLERY ARROWS
========================================================= */

.maje-product-page .gallery-arrow {

  position: absolute;

  top: 50%;

  z-index: 5;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
      1px solid rgba(212, 180, 140, .20);

  border-radius: 50%;

  background:
      rgba(6, 13, 24, .50);

  color:
      var(--gold-champagne);

  font-family:
      var(--font-en-serif);

  font-size:
      1.4rem;

  line-height: 1;

  cursor: pointer;

  opacity: 0;

  transition:
      opacity .35s ease,
      background .35s ease,
      border-color .35s ease,
      transform .35s ease;

}


.maje-product-page .gallery-prev {

  right: 20px;

  transform:
      translateY(-50%);

}


.maje-product-page .gallery-next {

  left: 20px;

  transform:
      translateY(-50%);

}


.maje-product-page .product-gallery-main:hover
.gallery-arrow {

  opacity: 1;

}


.maje-product-page .gallery-prev:hover {

  transform:
      translateY(-50%)
      translateX(-3px);

  background:
      var(--gold-champagne);

  color:
      var(--navy-950);

}


.maje-product-page .gallery-next:hover {

  transform:
      translateY(-50%)
      translateX(3px);

  background:
      var(--gold-champagne);

  color:
      var(--navy-950);

}


/* =========================================================
 GALLERY ZOOM
========================================================= */

.maje-product-page .gallery-zoom {

  position: absolute;

  left: 24px;
  bottom: 24px;

  z-index: 5;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
      1px solid rgba(212, 180, 140, .22);

  border-radius: 50%;

  background:
      rgba(6, 13, 24, .55);

  color:
      var(--gold-champagne);

  cursor: pointer;

  transition:
      background .35s ease,
      color .35s ease,
      border-color .35s ease,
      transform .35s ease;

}


.maje-product-page .gallery-zoom svg {

  width: 17px;
  height: 17px;

}


.maje-product-page .gallery-zoom:hover {

  background:
      var(--gold-champagne);

  color:
      var(--navy-950);

  border-color:
      var(--gold-champagne);

  transform:
      translateY(-2px);

}


/* =========================================================
 THUMBNAILS
========================================================= */

.maje-product-page .product-gallery-thumbs {

  display: grid;

  grid-template-columns:
      repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-top: 15px;

}


.maje-product-page .product-thumb {

  position: relative;

  width: 100%;
  height: 92px;

  padding: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
      1px solid rgba(255, 255, 255, .065);

  border-radius: 7px;

  background:
      linear-gradient(
          145deg,
          rgba(255,255,255,.027),
          rgba(255,255,255,.007)
      );

  cursor: pointer;

  overflow: hidden;

  transition:
      border-color .35s ease,
      background .35s ease,
      transform .35s ease;

}


.maje-product-page .product-thumb img {

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition:
      transform .4s cubic-bezier(.22,1,.36,1);

}


.maje-product-page .product-thumb:hover {

  border-color:
      rgba(212, 180, 140, .35);

  transform:
      translateY(-2px);

}


.maje-product-page .product-thumb:hover img {

  transform:
      scale(1.05);

}


.maje-product-page .product-thumb.active {

  border-color:
      var(--gold-soft);

  background:
      rgba(212, 180, 140, .055);

  box-shadow:
      inset 0 0 0 1px
      rgba(212, 180, 140, .05);

}


/* =========================================================
 GALLERY COUNTER
========================================================= */

.maje-product-page .gallery-counter {

  margin-top: 11px;

  display: flex;

  align-items: center;

  gap: 8px;

  direction: ltr;

  color:
      #657287;

  font-family:
      var(--font-en-serif);

  font-size:
      .78rem;

}


.maje-product-page .gallery-counter span:first-child {

  color:
      var(--gold-champagne);

}


.maje-product-page .gallery-counter i {

  width: 34px;
  height: 1px;

  background:
      rgba(212, 180, 140, .25);

}


/* =========================================================
 PRODUCT INFORMATION
========================================================= */

.maje-product-page .single-product-info {

  direction: rtl;

}


.maje-product-page .product-info-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;

}


.maje-product-page .single-product-eyebrow {

  display: inline-block;

  font-family:
      var(--font-en-serif);

  font-style: italic;

  font-size:
      .78rem;

  font-weight:
      500;

  letter-spacing:
      4px;

  color:
      var(--gold-soft);

  text-transform:
      uppercase;

}


.maje-product-page .product-stock {

  display: flex;

  align-items: center;

  gap: 7px;

  color:
      #7f8b9d;

  font-size:
      .66rem;

}


.maje-product-page .product-stock i {

  width: 6px;
  height: 6px;

  flex-shrink: 0;

  border-radius: 50%;

  background:
      #9cb59c;

  box-shadow:
      0 0 10px
      rgba(156,181,156,.35);

}


/* =========================================================
 PRODUCT TITLE
========================================================= */

.maje-product-page .single-product-title {

  margin: 0;

  color:
      var(--cream);

  font-family:
      var(--font-fa);

  font-size:
      clamp(2.25rem, 4vw, 2.75rem);

  font-weight:
      400;

  line-height:
      1;

}


.maje-product-page .single-product-title strong {

  font-family:
      var(--font-en-serif);

  font-size:
      1.15em;

  font-weight:
      600;

  color:
      var(--gold-champagne);

}


.maje-product-page .product-title-line {

  width: 100px;
  height: 1.5px;

  margin:
      21px 0 25px;

  background:
      linear-gradient(
          90deg,
          var(--gold-soft),
          transparent
      );

}


/* =========================================================
 PRODUCT INTRO
========================================================= */

.maje-product-page .single-product-intro {

  max-width:
      520px;

  margin: 0;

  color:
      var(--muted);

  font-family:
      var(--font-fa);

  font-size:
      .88rem;

  font-weight:
      300;

  line-height:
      2.15;

}


/* =========================================================
 RATING
========================================================= */


.product-ratingandproduct-price{
  display:flex ;
  justify-content: space-between;
}
.maje-product-page .product-rating {

  margin-top:
      22px;

  display:
      flex;

  align-items:
      center;

  flex-wrap:
      wrap;

  gap:
      11px;

  font-size:
      .68rem;

}


.maje-product-page .rating-stars {

  color:
      var(--gold-soft);

  letter-spacing:
      2px;

  font-size:
      .78rem;

}


.maje-product-page .rating-number {

  color:
      #d7dde5;

}


.maje-product-page .product-rating a {

  color:
      #707d90;

  text-decoration:
      none;

  border-bottom:
      1px solid
      rgba(212,180,140,.18);

  transition:
      color .3s ease;

}


.maje-product-page .product-rating a:hover {

  color:
      var(--gold-champagne);

}


/* =========================================================
 PRICE
========================================================= */

.maje-product-page .single-product-price {

  display:
      flex;

  align-items:
      baseline;

  gap:
      8px;

  margin:
      28px 0 25px;

}


.maje-product-page .single-product-price strong {

  color:
      var(--gold-champagne);

  font-size:
      30px;

  font-weight:
      500;

}


.maje-product-page .single-product-price span {

  color:
      #7e8a9d;

  font-size:
      .70rem;

}


/* =========================================================
 PRODUCT OPTIONS
========================================================= */

.maje-product-page .product-options {

  border-top:
      1px solid rgba(255,255,255,.06);

  border-bottom:
      1px solid rgba(255,255,255,.06);

}


.maje-product-page .product-option {

  padding:
      19px 0;

}


.maje-product-page .product-option + .product-option {

  border-top:
      1px solid rgba(255,255,255,.04);

}


.maje-product-page .option-label {

  display:
      flex;

  align-items:
      center;

  justify-content:
      space-between;

  gap:
      20px;

  margin-bottom:
      12px;

}


.maje-product-page .option-label strong {

  color:
      #dce2e8;

  font-size:
      .73rem;

  font-weight:
      500;

}


.maje-product-page .option-label span {

  color:
      var(--gold-soft);

  font-family:
      var(--font-en-serif);

  font-size:
      .75rem;

  direction:
      ltr;

}


/* =========================================================
 OPTION BUTTONS
========================================================= */

.maje-product-page .option-buttons {

  display:
      flex;

  align-items:
      center;

  gap:
      8px;

}


.maje-product-page .option-btn {

  min-width:
      62px;

  height:
      36px;

  padding:
      0 13px;

  border:
      1px solid rgba(212,180,140,.15);

  border-radius:
      5px;

  background:
      rgba(255,255,255,.018);

  color:
      #8995a7;

  font-family:
      var(--font-fa);

  font-size:
      .68rem;

  cursor:
      pointer;

  transition:
      border-color .35s ease,
      background .35s ease,
      color .35s ease,
      transform .35s ease;

}


.maje-product-page .option-btn:hover {

  color:
      var(--gold-champagne);

  border-color:
      rgba(212,180,140,.42);

  transform:
      translateY(-1px);

}


.maje-product-page .option-btn.active {

  color:
      var(--gold-champagne);

  border-color:
      var(--gold-soft);

  background:
      rgba(212,180,140,.065);

}


/* =========================================================
 LENGTH RANGE
========================================================= */

.maje-product-page .length-range {

  display:
      flex;

  align-items:
      center;

  gap:
      12px;

  color:
      #758195;

  font-family:
      var(--font-en-serif);

  font-size:
      .78rem;

  direction:
      ltr;

}


.maje-product-page .range-line {

  position:
      relative;

  flex:
      1;

  height:
      1px;

  background:
      rgba(212,180,140,.18);

}


.maje-product-page .range-line i {

  position:
      absolute;

  top:
      50%;

  right:
      0;

  width:
      62%;

  height:
      1px;

  background:
      var(--gold-soft);

  transform:
      translateY(-50%);

}


/* =========================================================
 BUY ROW
========================================================= */

.maje-product-page .buy-row {

  display:
      grid;

  grid-template-columns:
      105px minmax(0,1fr) 52px;

  gap:
      9px;

  margin-top:
      24px;

}


/* =========================================================
 QUANTITY
========================================================= */

.maje-product-page .quantity {

  height:
      54px;

  display:
      flex;

  align-items:
      center;

  overflow:
      hidden;

  border:
      1px solid rgba(212,180,140,.18);

  border-radius:
      6px;

  background:
      rgba(255,255,255,.015);

}


.maje-product-page .quantity button {

  width:
      31px;

  height:
      100%;

  border:
      0;

  background:
      transparent;

  color:
      var(--gold-soft);

  font-family:
      var(--font-fa);

  font-size:
      1rem;

  cursor:
      pointer;

  transition:
      background .3s ease,
      color .3s ease;

}


.maje-product-page .quantity button:hover {

  background:
      rgba(212,180,140,.08);

  color:
      var(--gold-champagne);

}


.maje-product-page .quantity input {

  flex:
      1;

  min-width:
      0;

  height:
      100%;

  padding:
      0;

  border:
      0;

  outline:
      0;

  background:
      transparent;

  color:
      var(--cream);

  text-align:
      center;

  font-family:
      var(--font-fa);

  font-size:
      .75rem;

}


/* remove number arrows */

.maje-product-page .quantity input::-webkit-inner-spin-button,
.maje-product-page .quantity input::-webkit-outer-spin-button {

  -webkit-appearance:
      none;

  margin:
      0;

}


.maje-product-page .quantity input[type="number"] {

  -moz-appearance:
      textfield;

}


/* =========================================================
 ADD TO CART
 استفاده از همان gradient دکمه‌های اصلی
========================================================= */

.maje-product-page .add-to-cart {

  position:
      relative;

  isolation:
      isolate;

  height:
      54px;

  display:
      flex;

  align-items:
      center;

  justify-content:
      center;

  gap:
      10px;

  overflow:
      hidden;

  border:
      1px solid
      rgba(231,205,173,.60);

  border-radius:
      6px;

  background:
      linear-gradient(
          135deg,
          var(--gold-champagne) 0%,
          #c9a06f 55%,
          #b8905e 100%
      );

  color:
      var(--navy-950);

  font-family:
      var(--font-fa);

  font-size:
      .77rem;

  font-weight:
      700;

  cursor:
      pointer;

  transition:
      transform .45s cubic-bezier(.16,1,.3,1),
      box-shadow .45s cubic-bezier(.16,1,.3,1),
      border-color .4s ease;

}


.maje-product-page .add-to-cart::before {

  content:
      "";

  position:
      absolute;

  top:
      0;

  right:
      -60%;

  width:
      45%;

  height:
      100%;

  background:
      linear-gradient(
          115deg,
          transparent 0%,
          rgba(255,255,255,.30) 50%,
          transparent 100%
      );

  transform:
      skewX(-18deg);

  transition:
      right .75s cubic-bezier(.16,1,.3,1);

  z-index:
      -1;

}


.maje-product-page .add-to-cart:hover::before {

  right:
      120%;

}


.maje-product-page .add-to-cart:hover {

  transform:
      translateY(-3px);

  border-color:
      #f6e9d7;

  box-shadow:
      0 18px 35px -12px
      rgba(198,155,100,.50);

}


.maje-product-page .add-to-cart svg {

  width:
      19px;

  height:
      19px;

}


/* =========================================================
 WISHLIST
========================================================= */

.maje-product-page .wishlist-btn {

  height:
      54px;

  display:
      flex;

  align-items:
      center;

  justify-content:
      center;

  border:
      1px solid rgba(212,180,140,.20);

  border-radius:
      6px;

  background:
      rgba(255,255,255,.018);

  color:
      var(--gold-champagne);

  font-family:
      var(--font-en-serif);

  font-size:
      1.35rem;

  cursor:
      pointer;

  transition:
      background .35s ease,
      border-color .35s ease,
      color .35s ease,
      transform .35s ease;

}


.maje-product-page .wishlist-btn:hover {

  border-color:
      var(--gold-soft);

  background:
      rgba(212,180,140,.08);

  transform:
      translateY(-2px);

}


.maje-product-page .wishlist-btn.active {

  color:
      var(--gold-champagne);

  background:
      rgba(212,180,140,.10);

  border-color:
      var(--gold-champagne);

}


/* =========================================================
 PRODUCT TRUST ITEMS
========================================================= */

.maje-product-page .product-trust-grid {

  display:
      grid;

  grid-template-columns:
      repeat(3,minmax(0,1fr));

  gap:
      9px;

  margin-top:
      26px;

}


.maje-product-page .product-trust-item {

  min-height:
      72px;

  display:
      flex;

  align-items:
      center;

  gap:
      9px;

  padding:
      11px;

  border:
      1px solid rgba(255,255,255,.055);

  background:
      linear-gradient(
          145deg,
          rgba(255,255,255,.027),
          rgba(255,255,255,.007)
      );

  transition:
      border-color .35s ease,
      background .35s ease;

}


.maje-product-page .product-trust-item:hover {

  border-color:
      rgba(212,180,140,.18);

  background:
      rgba(212,180,140,.035);

}


.maje-product-page .trust-icon {

  flex-shrink:
      0;

  width:
      28px;

  height:
      28px;

  display:
      flex;

  align-items:
      center;

  justify-content:
      center;

  border:
      1px solid rgba(212,180,140,.15);

  border-radius:
      50%;

  color:
      var(--gold-soft);

  font-family:
      var(--font-en-serif);

  font-size:
      .85rem;

}


.maje-product-page .product-trust-item strong {

  display:
      block;

  margin-bottom:
      3px;

  color:
      #d8dfe7;

  font-family:
      var(--font-fa);

  font-size:
      .62rem;

  font-weight:
      500;

}


.maje-product-page .product-trust-item small {

  display:
      block;

  color:
      #657287;

  font-size:
      .54rem;

}


/* =========================================================
 PRODUCT META
========================================================= */

.maje-product-page .product-meta {

  display:
      flex;

  align-items:
      center;

  justify-content:
      space-between;

  gap:
      20px;

  margin-top:
      23px;

  padding-top:
      17px;

  border-top:
      1px solid rgba(255,255,255,.045);

  color:
      #657287;

  font-family:
      var(--font-fa);

  font-size:
      .60rem;

}


.maje-product-page .product-meta strong,
.maje-product-page .product-meta a {

  color:
      #9da9b9;

  text-decoration:
      none;

}


.maje-product-page .product-meta a:hover {

  color:
      var(--gold-champagne);

}


/* =========================================================
 PROFESSIONAL STRIP
========================================================= */

.maje-product-page .professional-strip {

  position:
      relative;

  z-index:
      2;

  border-top:
      1px solid rgba(212,180,140,.12);

  border-bottom:
      1px solid rgba(212,180,140,.12);

  background:
      rgba(212,180,140,.025);

}


.maje-product-page .professional-strip-grid {

  max-width:
      1180px;

  min-height:
      112px;

  margin:
      0 auto;

  display:
      grid;

  grid-template-columns:
      repeat(4,minmax(0,1fr));

}


.maje-product-page .professional-strip-grid > div {

  display:
      flex;

  align-items:
      center;

  justify-content:
      center;

  gap:
      13px;

  padding:
      15px;

  border-left:
      1px solid rgba(255,255,255,.05);

}


.maje-product-page .professional-strip-grid > div:last-child {

  border-left:
      0;

}


.maje-product-page .professional-strip-grid > div > span {

  color:
      var(--gold-soft);

  font-family:
      var(--font-en-serif);

  font-size:
      1.3rem;

}


.maje-product-page .professional-strip-grid strong {

  display:
      block;

  margin-bottom:
      3px;

  color:
      #dbe0e6;

  font-size:
      .68rem;

  font-weight:
      500;

}


.maje-product-page .professional-strip-grid small {

  color:
      #697689;

  font-size:
      .56rem;

}


/* =========================================================
 SHARED PRODUCT SECTION HEADER
========================================================= */

.maje-product-page .detail-heading,
.maje-product-page .how-to-header,
.maje-product-page .related-header,
.maje-product-page .reviews-header {

  text-align:
      center;

  margin-bottom:
      55px;

}


.maje-product-page .detail-heading > span,
.maje-product-page .how-to-header > span,
.maje-product-page .related-header > span,
.maje-product-page .reviews-header > span,
.maje-product-page .specifications-header > span {

  display:
      block;

  margin-bottom:
      14px;

  color:
      var(--gold-soft);

  font-family:
      var(--font-en-serif);

  font-style:
      italic;

  font-size:
      .78rem;

  font-weight:
      500;

  letter-spacing:
      4px;

  text-transform:
      uppercase;

}


.maje-product-page .detail-heading h2,
.maje-product-page .how-to-header h2,
.maje-product-page .related-header h2,
.maje-product-page .reviews-header h2,
.maje-product-page .specifications-header h2 {

  margin:
      0 0 18px;

  color:
      var(--cream);

  font-family:
      var(--font-fa);

  font-size:
      clamp(1.8rem,3vw,2.55rem);

  font-weight:
      400;

  line-height:
      1.4;

}


.maje-product-page .detail-heading h2 strong,
.maje-product-page .how-to-header h2 strong,
.maje-product-page .related-header h2 strong,
.maje-product-page .reviews-header h2 strong,
.maje-product-page .specifications-header h2 strong {

  color:
      var(--gold-champagne);

  font-weight:
      700;

}


/*
 Scoped version of existing gold-line
*/

.maje-product-page .gold-line {

  width:
      120px;

  max-width:
      120px;

  height:
      1.5px;

  margin:
      0 auto;

  background:
      linear-gradient(
          90deg,
          transparent,
          var(--gold-bright) 15%,
          #f8e8cc 50%,
          var(--gold-bright) 85%,
          transparent
      );

  border-radius:
      2px;

}


/* =========================================================
 PRODUCT DESCRIPTION
========================================================= */

.maje-product-page .product-detail-section {

  position:
      relative;

  z-index:
      2;

  padding:
      115px 6%;

  background:
      linear-gradient(
          180deg,
          var(--navy-900) 0%,
          #08111f 100%
      );

}


.maje-product-page .detail-grid {

  max-width:
      1000px;

  margin:
      0 auto;

  display:
      grid;

  grid-template-columns:
      minmax(0,1.4fr)
      minmax(280px,.8fr);

  gap:
      70px;

  align-items:
      center;

}


.maje-product-page .detail-text p {

  margin:
      0 0 20px;

  color:
      var(--muted);

  font-family:
      var(--font-fa);

  font-size:
      .88rem;

  font-weight:
      300;

  line-height:
      2.2;

}


.maje-product-page .detail-text p:last-child {

  margin-bottom:
      0;

}


/* =========================================================
 QUOTE
========================================================= */

.maje-product-page .detail-quote {

  position:
      relative;

  padding:
      40px 30px;

  border:
      1px solid rgba(212,180,140,.16);

  border-radius:
      8px;

  background:
      linear-gradient(
          145deg,
          rgba(255,255,255,.027),
          rgba(255,255,255,.007)
      );

  text-align:
      center;

  box-shadow:
      0 18px 45px rgba(0,0,0,.12);

}


.maje-product-page .detail-quote > span {

  display:
      block;

  color:
      var(--gold-soft);

  font-family:
      var(--font-en-serif);

  font-size:
      4rem;

  line-height:
      .5;

}


.maje-product-page .detail-quote p {

  margin:
      20px 0;

  color:
      #e5d9c9;

  font-family:
      var(--font-en-serif);

  font-size:
      1.45rem;

}


.maje-product-page .detail-quote small {

  color:
      #687589;

  font-family:
      var(--font-en-serif);

  font-size:
      .60rem;

  letter-spacing:
      3px;

}


/* =========================================================
 SPECIFICATIONS
========================================================= */

.maje-product-page .specifications-section {

  position:
      relative;

  z-index:
      2;

  padding:
      105px 6%;

  background:
      var(--navy-800);

}


.maje-product-page .specifications-header {

  max-width:
      900px;

  margin:
      0 auto 32px;

}


.maje-product-page .specifications-table {

  max-width:
      900px;

  margin:
      0 auto;

  border-top:
      1px solid rgba(212,180,140,.15);

}


.maje-product-page .spec-row {

  min-height:
      64px;

  display:
      flex;

  align-items:
      center;

  justify-content:
      space-between;

  gap:
      30px;

  padding:
      0 18px;

  border-bottom:
      1px solid rgba(255,255,255,.05);

  transition:
      background .3s ease;

}


.maje-product-page .spec-row:hover {

  background:
      rgba(212,180,140,.025);

}


.maje-product-page .spec-row span {

  color:
      #748095;

  font-family:
      var(--font-fa);

  font-size:
      .70rem;

}


.maje-product-page .spec-row strong {

  color:
      #dce2e8;

  font-family:
      var(--font-fa);

  font-size:
      .70rem;

  font-weight:
      400;

  direction:
      ltr;

}


/* =========================================================
 HOW TO USE
========================================================= */

.maje-product-page .how-to-section {

  position:
      relative;

  z-index:
      2;

  padding:
      115px 6%;

  background:
      linear-gradient(
          180deg,
          var(--navy-800),
          var(--navy-950)
      );

}


.maje-product-page .how-to-grid {

  max-width:
      1000px;

  margin:
      0 auto;

  display:
      grid;

  grid-template-columns:
      repeat(3,minmax(0,1fr));

  gap:
      18px;

}


.maje-product-page .how-to-grid article {

  position:
      relative;

  min-height:
      220px;

  padding:
      32px 28px;

  overflow:
      hidden;

  border:
      1px solid rgba(255,255,255,.06);

  border-radius:
      8px;

  background:
      linear-gradient(
          145deg,
          rgba(255,255,255,.027),
          rgba(255,255,255,.007)
      );

  transition:
      transform .55s cubic-bezier(.22,1,.36,1),
      border-color .4s ease,
      background .4s ease,
      box-shadow .45s ease;

}


.maje-product-page .how-to-grid article::before {

  content:
      "";

  position:
      absolute;

  top:
      0;

  right:
      0;

  width:
      0;

  height:
      1px;

  background:
      linear-gradient(
          90deg,
          transparent,
          var(--gold-champagne)
      );

  transition:
      width .55s cubic-bezier(.22,1,.36,1);

}


.maje-product-page .how-to-grid article:hover {

  transform:
      translateY(-7px);

  border-color:
      rgba(212,180,140,.25);

  background:
      linear-gradient(
          145deg,
          rgba(212,180,140,.045),
          rgba(255,255,255,.008)
      );

  box-shadow:
      0 30px 65px rgba(0,0,0,.25);

}


.maje-product-page .how-to-grid article:hover::before {

  width:
      70%;

}


.maje-product-page .how-to-grid article > span {

  color:
      var(--gold-soft);

  font-family:
      var(--font-en-serif);

  font-size:
      2.1rem;

  line-height:
      1;

}


.maje-product-page .how-to-grid h3 {

  margin:
      25px 0 10px;

  color:
      #e3e7eb;

  font-family:
      var(--font-fa);

  font-size:
      .90rem;

  font-weight:
      500;

}


.maje-product-page .how-to-grid p {

  margin:
      0;

  color:
      #748094;

  font-family:
      var(--font-fa);

  font-size:
      .72rem;

  line-height:
      1.95;

  font-weight:
      300;

}


/* =========================================================
 REVIEWS
========================================================= */

.maje-product-page .reviews-section {

  position:
      relative;

  z-index:
      2;

  padding:
      115px 6%;

  background:
      linear-gradient(
          180deg,
          var(--navy-950),
          #07101d
      );

}


.maje-product-page .reviews-layout {

  max-width:
      1000px;

  margin:
      0 auto;

  display:
      grid;

  grid-template-columns:
      230px minmax(0,1fr);

  gap:
      60px;

}


.maje-product-page .review-score {

  height:
      max-content;

  padding:
      30px 20px;

  border:
      1px solid rgba(212,180,140,.15);

  border-radius:
      8px;

  background:
      linear-gradient(
          145deg,
          rgba(255,255,255,.027),
          rgba(255,255,255,.007)
      );

  text-align:
      center;

}


.maje-product-page .review-score > strong {

  display:
      block;

  color:
      var(--gold-champagne);

  font-family:
      var(--font-en-serif);

  font-size:
      4rem;

  font-weight:
      500;

  line-height:
      1;

}


.maje-product-page .review-score > div {

  margin:
      16px 0;

  color:
      var(--gold-soft);

  letter-spacing:
      3px;

}


.maje-product-page .review-score small {

  color:
      #6e7a8e;

  font-family:
      var(--font-fa);

  font-size:
      .62rem;

}


.maje-product-page .review-list {

  display:
      flex;

  flex-direction:
      column;

}


.maje-product-page .review {

  padding:
      22px 0;

  border-bottom:
      1px solid rgba(255,255,255,.06);

}


.maje-product-page .review:first-child {

  padding-top:
      20;

}


.maje-product-page .review-top {

  display:
      flex;

  align-items:
      center;

  justify-content:
      space-between;

  gap:
      20px;

  margin-bottom:
      10px;

}


.maje-product-page .review-top strong {

  color:
      #dce2e8;

  font-size:
      .72rem;

  font-weight:
      500;

}


.maje-product-page .review-top span {

  color:
      var(--gold-soft);

  letter-spacing:
      2px;

  font-size:
      .72rem;

}


.maje-product-page .review p {

  margin:
      0;

  color:
      #8490a2;

  font-size:
      .72rem;

  font-weight:
      300;

  line-height:
      1.9;

}


/* =========================================================
 RELATED PRODUCTS
 دقیقاً در زبان بصری کارت‌های فعلی MAJÉ
========================================================= */

.maje-product-page .related-products-section {

  position:
      relative;

  z-index:
      2;

  padding:
      115px 6%;
  padding-top: 30px !important;
  
  background:
      linear-gradient(
          180deg,
          #08111f,
          var(--navy-950)
      );

}


.maje-product-page .related-products-grid {

  max-width:
      1180px;

  margin:
      0 auto;

  display:
      grid;

  grid-template-columns:
      repeat(3,minmax(0,1fr));

  gap:
      24px;

}


/* =========================================================
 RELATED PRODUCT CARD
========================================================= */

.maje-product-page .related-product {

  position:
      relative;

  min-width:
      0;

  direction:
      rtl;

  overflow:
      hidden;

  border:
      1px solid rgba(255,255,255,.065);

  border-radius:
      8px;

  background:
      linear-gradient(
          145deg,
          rgba(255,255,255,.027),
          rgba(255,255,255,.007)
      );

  box-shadow:
      0 18px 45px rgba(0,0,0,.15);

  transition:
      transform .55s cubic-bezier(.22,1,.36,1),
      border-color .4s ease,
      background .4s ease,
      box-shadow .5s ease;

}


.maje-product-page .related-product::before {

  content:
      "";

  position:
      absolute;

  top:
      0;

  right:
      0;

  width:
      0;

  height:
      1px;

  z-index:
      4;

  background:
      linear-gradient(
          90deg,
          transparent,
          var(--gold-champagne)
      );

  transition:
      width .55s cubic-bezier(.22,1,.36,1);

}


.maje-product-page .related-product:hover {

  transform:
      translateY(-8px);

  border-color:
      rgba(212,180,140,.25);

  background:
      linear-gradient(
          145deg,
          rgba(212,180,140,.045),
          rgba(255,255,255,.008)
      );

  box-shadow:
      0 30px 65px rgba(0,0,0,.27),
      0 0 35px rgba(212,180,140,.025);

}


.maje-product-page .related-product:hover::before {

  width:
      70%;

}


.maje-product-page .related-product a {

  display:
      block;

  height:
      100%;

  color:
      inherit;

  text-decoration:
      none;

}


/* =========================================================
 RELATED IMAGE
========================================================= */

.maje-product-page .related-image {

  position:
      relative;

  height:
      330px;

  display:
      flex;

  align-items:
      center;

  justify-content:
      center;

  overflow:
      hidden;

  border-bottom:
      1px solid rgba(255,255,255,.045);

  background:
      radial-gradient(
          circle at 50% 42%,
          rgba(212,180,140,.075),
          rgba(8,19,34,.55) 55%,
          transparent 100%
      );

}


.maje-product-page .related-image img {

  width:
      85%;

  height:
      85%;

  object-fit:
      contain;

  filter:
      drop-shadow(
          0 22px 30px rgba(0,0,0,.35)
      );

  transition:
      transform .55s cubic-bezier(.22,1,.36,1);

}


.maje-product-page .related-product:hover
.related-image img {

  transform:
      scale(1.06);

}


.maje-product-page .related-image > span {

  position:
      absolute;

  top:
      17px;

  right:
      17px;

  z-index:
      2;

  padding:
      5px 11px;

  border:
      1px solid rgba(212,180,140,.24);

  color:
      var(--gold-champagne);

  background:
      rgba(6,13,24,.45);

  font-family:
      var(--font-en-serif);

  font-size:
      .56rem;

  letter-spacing:
      2px;

}


/* =========================================================
 RELATED CONTENT
========================================================= */

.maje-product-page .related-content {

  padding:
      22px;

}


.maje-product-page .related-content small {

  color:
      var(--gold-soft);

  font-family:
      var(--font-en-serif);

  font-size:
      .64rem;

  letter-spacing:
      3px;

}


.maje-product-page .related-content h3 {

  margin:
      8px 0 20px;

  color:
      #e0e5ea;

  font-family:
      var(--font-fa);

  font-size:
      .92rem;

  font-weight:
      400;

}


.maje-product-page .related-content > div {

  display:
      flex;

  align-items:
      center;

  justify-content:
      space-between;

  gap:
      15px;

}


.maje-product-page .related-content strong {

  color:
      var(--gold-champagne);

  font-family:
      var(--font-fa);

  font-size:
      .70rem;

  font-weight:
      400;

}


.maje-product-page .related-content > div span {

  color:
      var(--gold-soft);

  font-family:
      var(--font-en-serif);

  font-size:
      1.2rem;

  transition:
      transform .35s ease;

}


.maje-product-page .related-product:hover
.related-content > div span {

  transform:
      translateX(-5px);

}


/* =========================================================
 FINAL CTA
========================================================= */

.maje-product-page .product-final-cta {

  position:
      relative;

  z-index:
      2;

  padding:
      120px 6%;

  overflow:
      hidden;

  text-align:
      center;

  background:
      var(--navy-950);

}


.maje-product-page .product-final-cta::before {

  content:
      "";

  position:
      absolute;

  width:
      700px;

  height:
      360px;

  top:
      50%;

  left:
      50%;

  transform:
      translate(-50%,-50%);

  background:
      radial-gradient(
          ellipse,
          rgba(212,180,140,.07),
          transparent 70%
      );

  pointer-events:
      none;

}


.maje-product-page .product-final-cta > .container {

  position:
      relative;

  z-index:
      2;

}


.maje-product-page .product-final-cta > span {

  display:
      block;

  color:
      var(--gold-soft);

  font-family:
      var(--font-en-serif);

  font-style:
      italic;

  font-size:
      .78rem;

  letter-spacing:
      5px;

}


.maje-product-page .product-final-cta h2 {

  margin:
      17px 0;

  color:
      var(--cream);

  font-family:
      var(--font-en-serif);

  font-size:
      clamp(2.6rem,5vw,4.4rem);

  font-weight:
      500;

  line-height:
      1.15;

}


.maje-product-page .product-final-cta h2 strong {

  color:
      var(--gold-champagne);

  font-weight:
      500;

}


.maje-product-page .product-final-cta p {

  max-width:
      460px;

  margin:
      0 auto 30px;

  color:
      #7d899b;

  font-family:
      var(--font-fa);

  font-size:
      .76rem;

  line-height:
      2;

  font-weight:
      300;

}


/*
 Reuse visual language of existing .btn-primary
*/

.maje-product-page .cta-button {

  position:
      relative;

  isolation:
      isolate;

  display:
      inline-flex;

  align-items:
      center;

  justify-content:
      center;

  min-width:
      185px;

  padding:
      15px 32px;

  border:
      1px solid rgba(231,205,173,.60);

  border-radius:
      16px;

  background:
      linear-gradient(
          135deg,
          var(--gold-champagne) 0%,
          #c9a06f 55%,
          #b8905e 100%
      );

  color:
      var(--navy-950);

  font-family:
      var(--font-fa);

  font-size:
      .76rem;

  font-weight:
      600;

  text-decoration:
      none;

  overflow:
      hidden;

  transition:
      transform .45s cubic-bezier(.16,1,.3,1),
      box-shadow .45s cubic-bezier(.16,1,.3,1),
      border-color .4s ease;

}


.maje-product-page .cta-button::before {

  content:
      "";

  position:
      absolute;

  top:
      0;

  right:
      -60%;

  width:
      45%;

  height:
      100%;

  background:
      linear-gradient(
          115deg,
          transparent,
          rgba(255,255,255,.3),
          transparent
      );

  transform:
      skewX(-18deg);

  transition:
      right .75s cubic-bezier(.16,1,.3,1);

  z-index:
      -1;

}


.maje-product-page .cta-button:hover::before {

  right:
      120%;

}


.maje-product-page .cta-button:hover {

  transform:
      translateY(-4px);

  border-color:
      #f6e9d7;

  box-shadow:
      0 20px 40px -12px
      rgba(198,155,100,.50);

}


/* =========================================================
 LIGHTBOX
========================================================= */

.maje-product-page .product-lightbox {

  position:
      fixed;

  inset:
      0;

  z-index:
      9999;

  display:
      flex;

  align-items:
      center;

  justify-content:
      center;

  padding:
      50px;

  background:
      rgba(0,4,16,.94);

  backdrop-filter:
      blur(18px);

  -webkit-backdrop-filter:
      blur(18px);

  opacity:
      0;

  visibility:
      hidden;

  transition:
      opacity .4s ease,
      visibility .4s ease;

}


.maje-product-page .product-lightbox.active {

  opacity:
      1;

  visibility:
      visible;

}


.maje-product-page .product-lightbox img {

  max-width:
      85vw;

  max-height:
      85vh;

  object-fit:
      contain;

  filter:
      drop-shadow(
          0 35px 60px rgba(0,0,0,.45)
      );

}


.maje-product-page .lightbox-close {

  position:
      absolute;

  top:
      30px;

  left:
      30px;

  width:
      45px;

  height:
      45px;

  display:
      flex;

  align-items:
      center;

  justify-content:
      center;

  border:
      1px solid rgba(212,180,140,.25);

  border-radius:
      50%;

  background:
      rgba(255,255,255,.025);

  color:
      var(--gold-champagne);

  font-family:
      var(--font-en-serif);

  font-size:
      1.7rem;

  line-height:
      1;

  cursor:
      pointer;

  transition:
      background .35s ease,
      color .35s ease,
      border-color .35s ease;

}


.maje-product-page .lightbox-close:hover {

  background:
      var(--gold-champagne);

  color:
      var(--navy-950);

  border-color:
      var(--gold-champagne);

}


/* =========================================================
 PRODUCT FOCUS STATES
========================================================= */

.maje-product-page button:focus-visible,
.maje-product-page a:focus-visible {

  outline:
      2px solid
      var(--gold-champagne);

  outline-offset:
      3px;

}


/* =========================================================
 TABLET
 مطابق breakpointهای فعلی MAJÉ
========================================================= */

@media (max-width: 1000px) {

  .maje-product-page .single-product-grid {

      grid-template-columns:
          1fr;

      gap:
          55px;

      max-width:
          760px;

  }


  .maje-product-page .product-gallery-main {

      height:
          520px;

  }


  .maje-product-page .single-product-info {

      max-width:
          760px;

      width:
          100%;

      margin:
          0 auto;

  }


  .maje-product-page .related-products-grid {

      grid-template-columns:
          repeat(2,minmax(0,1fr));

      max-width:
          760px;

  }


  .maje-product-page .professional-strip-grid {

      grid-template-columns:
          repeat(2,minmax(0,1fr));

  }


  .maje-product-page
  .professional-strip-grid > div:nth-child(3),
  .maje-product-page
  .professional-strip-grid > div:nth-child(4) {

      border-top:
          1px solid rgba(255,255,255,.05);

  }


  .maje-product-page
  .professional-strip-grid > div:nth-child(2) {

      border-left:
          0;

  }


  .maje-product-page .product-trust-grid {

      max-width:
          760px;

  }

}


/* =========================================================
 TABLET NAV
========================================================= */

@media (max-width: 900px) {

  .maje-product-page .product-header {

      width:
          calc(100% - 30px);

      height:
          82px;

  }


  .maje-product-page .product-header-inner {

      padding:
          0 25px;

  }


  .maje-product-page .product-nav {

      gap:
          0;

  }


  .maje-product-page .product-nav a {

      padding:
          8px 11px;

      font-size:
          .70rem;

  }

}


/* =========================================================
 MOBILE
========================================================= */

@media (max-width: 768px) {

  .maje-product-page .product-page-frame {

      inset:
          10px;

  }


  .maje-product-page .product-header {

      width:
          calc(100% - 24px);

      height:
          76px;

      margin-top:
          12px;

      border-radius:
          18px;

  }


  .maje-product-page .product-header-inner {

      padding:
          0 17px;

  }


  .maje-product-page .product-nav {

      display:
          none;

  }


  .maje-product-page .product-logo span {

      font-size:
          1.65rem;

      letter-spacing:
          4px;

  }


  .maje-product-page .product-logo small {

      font-size:
          .42rem;

      letter-spacing:
          2.4px;

  }


  .maje-product-page .header-icon-btn {

      width:
          37px;

      height:
          37px;

  }


  .maje-product-page .product-breadcrumb-section {

      padding:
          23px 5% 0;

  }


  .maje-product-page .product-breadcrumb {

      overflow:
          hidden;

      white-space:
          nowrap;

      font-size:
          .62rem;

  }


  .maje-product-page .single-product-hero {

      padding:
          38px 5%
          80px;

  }


  .maje-product-page .single-product-grid {

      gap:
          45px;

  }


  .maje-product-page .product-gallery-main {

      height:
          430px;

  }


  .maje-product-page .product-gallery-main::before {

      width:
          300px;

      height:
          300px;

  }


  .maje-product-page .product-gallery-main::after {

      width:
          220px;

      height:
          220px;

  }


  .maje-product-page .gallery-arrow {

      opacity:
          1;

  }


  .maje-product-page .product-thumb {

      height:
          78px;

  }


  .maje-product-page .single-product-title {

      font-size:
          clamp(2rem,8vw,2.65rem);

  }


  .maje-product-page .single-product-intro {

      font-size:
          .82rem;

  }


  .maje-product-page .product-trust-grid {

      grid-template-columns:
          1fr;

  }


  .maje-product-page .product-detail-section,
  .maje-product-page .specifications-section,
  .maje-product-page .how-to-section,
  .maje-product-page .reviews-section,
  .maje-product-page .related-products-section {

      padding:
          85px 5%;

  }


  .maje-product-page .detail-grid {

      grid-template-columns:
          1fr;

      gap:
          35px;

  }


  .maje-product-page .how-to-grid {

      grid-template-columns:
          1fr;

      max-width:
          470px;

  }


  .maje-product-page .reviews-layout {

      grid-template-columns:
          1fr;

      gap:
          35px;

      max-width:
          470px;

  }


  .maje-product-page .review-score {

      max-width:
          250px;

      margin:
          0 auto;

  }


  .maje-product-page .related-products-grid {

      grid-template-columns:
          1fr;

      max-width:
          470px;

  }


  .maje-product-page .related-image {

      height:
          330px;

  }


  .maje-product-page .professional-strip-grid {

      grid-template-columns:
          1fr 1fr;

  }


  .maje-product-page
  .professional-strip-grid > div {

      min-height:
          90px;

  }


  .maje-product-page .product-final-cta {

      padding:
          95px 5%;

  }


  .maje-product-page .product-final-cta h2 {

      font-size:
          clamp(2.5rem,10vw,3.6rem);

  }

}


/* =========================================================
 SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .maje-product-page .product-header {

      border-radius:
          16px;

  }


  .maje-product-page .product-header-actions {

      gap:
          6px;

  }


  .maje-product-page .header-icon-btn {

      width:
          34px;

      height:
          34px;

  }


  .maje-product-page .header-icon-btn svg {

      width:
          15px;

      height:
          15px;

  }


  .maje-product-page .product-logo span {

      font-size:
          1.45rem;

  }


  .maje-product-page .product-logo small {

      display:
          none;

  }


  .maje-product-page .single-product-hero {

      padding:
          30px 4%
          70px;

  }


  .maje-product-page .product-gallery-main {

      height:
          350px;

  }


  .maje-product-page .product-gallery-main::before {

      width:
          240px;

      height:
          240px;

  }


  .maje-product-page .product-gallery-main::after {

      width:
          175px;

      height:
          175px;

  }


  .maje-product-page .product-gallery-badge {

      top:
          15px;

      right:
          15px;

      padding:
          5px 10px;

      font-size:
          .57rem;

  }


  .maje-product-page .gallery-zoom {

      left:
          15px;

      bottom:
          15px;

      width:
          36px;

      height:
          36px;

  }


  .maje-product-page .gallery-arrow {

      width:
          34px;

      height:
          34px;

  }


  .maje-product-page .gallery-prev {

      right:
          12px;

  }


  .maje-product-page .gallery-next {

      left:
          12px;

  }


  .maje-product-page .product-gallery-thumbs {

      gap:
          8px;

  }


  .maje-product-page .product-thumb {

      height:
          66px;

      padding:
          5px;

  }


  .maje-product-page .product-info-top {

      align-items:
          flex-start;

      flex-direction:
          column;

      gap:
          8px;

  }


  .maje-product-page .single-product-title {

      font-size:
          2rem;

  }


  .maje-product-page .product-title-line {

      margin:
          17px 0 20px;

  }


  .maje-product-page .single-product-intro {

      font-size:
          .78rem;

      line-height:
          2;

  }


  .maje-product-page .single-product-price {

      margin:
          24px 0 21px;

  }


  .maje-product-page .single-product-price strong {

      font-size:
          1.45rem;

  }


  .maje-product-page .buy-row {

      grid-template-columns:
          86px minmax(0,1fr);

      gap:
          8px;

  }


  .maje-product-page .wishlist-btn {

      grid-column:
          1 / -1;

  }


  .maje-product-page .add-to-cart {

      font-size:
          .70rem;

  }


  .maje-product-page .product-meta {

      align-items:
          flex-start;

      flex-direction:
          column;

      gap:
          8px;

  }


  .maje-product-page .professional-strip-grid {

      grid-template-columns:
          1fr;

  }


  .maje-product-page
  .professional-strip-grid > div {

      border-left:
          0;

      border-bottom:
          1px solid rgba(255,255,255,.05);

  }


  .maje-product-page
  .professional-strip-grid > div:last-child {

      border-bottom:
          0;

  }


  .maje-product-page .detail-heading,
  .maje-product-page .how-to-header,
  .maje-product-page .related-header,
  .maje-product-page .reviews-header {

      margin-bottom:
          40px;

  }


  .maje-product-page .detail-heading > span,
  .maje-product-page .how-to-header > span,
  .maje-product-page .related-header > span,
  .maje-product-page .reviews-header > span,
  .maje-product-page .specifications-header > span {

      font-size:
          .66rem;

      letter-spacing:
          2.8px;

  }


  .maje-product-page .detail-heading h2,
  .maje-product-page .how-to-header h2,
  .maje-product-page .related-header h2,
  .maje-product-page .reviews-header h2,
  .maje-product-page .specifications-header h2 {

      font-size:
          1.85rem;

  }


  .maje-product-page .detail-text p {

      font-size:
          .78rem;

      line-height:
          2;

  }


  .maje-product-page .detail-quote {

      padding:
          35px 22px;

  }


  .maje-product-page .detail-quote p {

      font-size:
          1.25rem;

  }


  .maje-product-page .spec-row {

      min-height:
          58px;

      padding:
          0 12px;

  }


  .maje-product-page .spec-row span,
  .maje-product-page .spec-row strong {

      font-size:
          .64rem;

  }


  .maje-product-page .how-to-grid article {

      min-height:
          190px;

      padding:
          28px 22px;

  }


  .maje-product-page .related-image {

      height:
          285px;

  }


  .maje-product-page .related-content {

      padding:
          19px 17px 17px;

  }


  .maje-product-page .product-lightbox {

      padding:
          25px;

  }


  .maje-product-page .lightbox-close {

      top:
          20px;

      left:
          20px;

      width:
          40px;

      height:
          40px;

  }

}


/* =========================================================
 VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .maje-product-page .product-gallery-main {

      height:
          320px;

  }


  .maje-product-page .product-gallery-thumbs {

      gap:
          6px;

  }


  .maje-product-page .product-thumb {

      height:
          58px;

  }


  .maje-product-page .buy-row {

      grid-template-columns:
          80px minmax(0,1fr);

  }


  .maje-product-page .add-to-cart {

      font-size:
          .64rem;

      gap:
          6px;

  }


  .maje-product-page .add-to-cart svg {

      width:
          16px;

      height:
          16px;

  }

}


/* =========================================================
 REDUCED MOTION
 هماهنگ با CSS اصلی MAJÉ
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .maje-product-page *,
  .maje-product-page *::before,
  .maje-product-page *::after {

      animation:
          none !important;

      transition:
          none !important;

      scroll-behavior:
          auto !important;

  }

}
.product-page-main{
  padding-top: 110px;
  margin-bottom: -60px;
}/* =========================================================   MAJÉ PRODUCT PAGE — FINAL CORRECTED VERSION   Base = original product stylesheet========================================================= *//* Keep the original hero structure and make the first-view hierarchy clearer. */.maje-product-page .single-product-hero {    padding-top: 30px;    padding-bottom: 58px;}.maje-product-page .single-product-grid {    gap: 48px;    align-items: center;}.maje-product-page .single-product-price {    margin-top: 18px;    margin-bottom: 18px;}.maje-product-page .single-product-price strong {    font-size: clamp(2rem, 3.4vw, 2.55rem);    line-height: 1;}.maje-product-page .single-product-price span {    font-size: .72rem;}.maje-product-page .buy-row {    grid-template-columns: 96px minmax(0,1fr) 54px;    gap: 9px;    margin-top: 16px;}.maje-product-page .quantity,.maje-product-page .add-to-cart,.maje-product-page .wishlist-btn {    min-height: 54px;}.maje-product-page .add-to-cart {    font-size: .80rem;}.maje-product-page .wishlist-btn {    font-size: 1.45rem;}/* Professional strip: original position, immediately after hero. */.maje-product-page .professional-strip {    position: relative;    z-index: 2;    display: block;    border-top: 1px solid rgba(212,180,140,.12);    border-bottom: 1px solid rgba(212,180,140,.12);    background: rgba(212,180,140,.025);}.maje-product-page .professional-strip-grid {    max-width: 1180px;    min-height: 112px;    margin: 0 auto;    display: grid;    grid-template-columns: repeat(4,minmax(0,1fr));}.maje-product-page .professional-strip-grid > div {    display: flex;    align-items: center;    justify-content: center;    gap: 13px;    padding: 15px;    border-left: 1px solid rgba(255,255,255,.05);}.maje-product-page .professional-strip-grid > div:last-child {    border-left: 0;}.maje-product-page .professional-strip-grid > div > span {    color: var(--gold-soft);    font-family: var(--font-en-serif);    font-size: 1.3rem;    flex: 0 0 auto;}.maje-product-page .professional-strip-grid strong {    display: block;    margin-bottom: 3px;    color: #dbe0e6;    font-size: .68rem;    font-weight: 500;}.maje-product-page .professional-strip-grid small {    color: #697689;    font-size: .56rem;}/* =========================================================   TABS========================================================= */.maje-product-page .product-tabs-section {    padding: 88px 6% 96px;    background: linear-gradient(180deg, var(--navy-900) 0%, #08111f 100%);}.maje-product-page .product-tabs-header {    text-align: center;    margin-bottom: 28px;}.maje-product-page .product-tabs-header > span {    display: block;    margin-bottom: 12px;    color: var(--gold-soft);    font-family: var(--font-en-serif);    font-style: italic;    font-size: .76rem;    letter-spacing: 3px;}.maje-product-page .product-tabs-header h2 {    margin: 0 0 16px;    color: var(--cream);    font-family: var(--font-fa);    font-size: clamp(1.8rem,3vw,2.5rem);    font-weight: 400;}.maje-product-page .product-tabs-header h2 strong {    color: var(--gold-champagne);}.maje-product-page .product-tabs-header .gold-line {    width: 100px;    height: 1px;    margin: 0 auto;    background: linear-gradient(90deg,transparent,var(--gold-bright),transparent);}.maje-product-page .product-tabs {    max-width: 1050px;    margin: 0 auto;    display: flex;    align-items: stretch;    justify-content: center;    direction: rtl;    border-bottom: 1px solid rgba(212,180,140,.15);    overflow-x: auto;    scrollbar-width: none;}.maje-product-page .product-tabs::-webkit-scrollbar { display:none; }.maje-product-page .product-tab {    position: relative;    flex: 1 0 190px;    min-height: 66px;    padding: 10px 20px 13px;    display: flex;    align-items: center;    justify-content: center;    gap: 11px;    border: 0;    background: transparent;    color: #7e8a9b;    font-family: var(--font-fa);    cursor: pointer;    transition: color .3s ease, background .3s ease;}.maje-product-page .product-tab span {    color: #7b8798;    font-family: var(--font-en-serif);    font-size: .82rem;    line-height: 1;    letter-spacing: 1px;    opacity: .95;}.maje-product-page .product-tab strong {    color: inherit;    font-size: .82rem;    font-weight: 500;    white-space: nowrap;}.maje-product-page .product-tab::after {    content: "";    position: absolute;    right: 22%;    left: 22%;    bottom: -1px;    height: 2px;    background: transparent;    transform: scaleX(.25);    transition: transform .35s ease, background .35s ease;}.maje-product-page .product-tab:hover {    color: #cfc6bb;}.maje-product-page .product-tab.active {    color: var(--gold-champagne);    background: linear-gradient(180deg,rgba(212,180,140,.035),transparent);}.maje-product-page .product-tab.active span {    color: var(--gold-soft);}.maje-product-page .product-tab.active::after {    background: var(--gold-champagne);    transform: scaleX(1);}.maje-product-page .product-tab-panels {    max-width: 1050px;    margin: 28px auto 0;}.maje-product-page .product-tab-panel {    padding: 42px 46px;    border: 1px solid rgba(212,180,140,.11);    border-radius: 10px;    background: rgba(255,255,255,.014);    box-shadow: 0 22px 60px rgba(0,0,0,.12);}.maje-product-page .product-tab-panel[hidden] {    display: none !important;}/* Details */.maje-product-page .detail-grid {    max-width: none;}.maje-product-page .detail-text p {    max-width: 720px;}.maje-product-page .detail-highlight {    display:flex;    align-items:center;    gap:12px;    width:max-content;    margin-top:18px;    padding:10px 14px;    border:1px solid rgba(212,180,140,.13);    border-radius:6px;    background:rgba(212,180,140,.025);}.maje-product-page .detail-highlight span { color:#697689; font-size:.65rem; }.maje-product-page .detail-highlight strong { color:#d8c4aa; font-size:.68rem; }.maje-product-page .detail-highlight i { width:1px; height:15px; background:rgba(255,255,255,.12); }/* Technical */.maje-product-page .spec-panel-intro { margin-bottom: 22px; }.maje-product-page .spec-panel-intro > span,.maje-product-page .guide-panel-head > div > span,.maje-product-page .reviews-panel-head > div > span {    color:var(--gold-soft);    font-family:var(--font-en-serif);    font-size:.64rem;    letter-spacing:2.5px;}.maje-product-page .spec-panel-intro h3,.maje-product-page .guide-panel-head h3,.maje-product-page .reviews-panel-head h3 {    margin:9px 0 12px;    color:#e4ddd3;    font-size:1.18rem;    font-weight:500;}.maje-product-page .spec-panel-intro p,.maje-product-page .guide-panel-head > p {    max-width:720px;    margin:0;    color:#8290a3;    font-size:.76rem;    line-height:2;}/* How to use */.maje-product-page .guide-panel-head {    display:grid;    grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);    gap:45px;    align-items:end;    margin-bottom:28px;}.maje-product-page .guide-panel-head h3 { margin-bottom:0; }.maje-product-page .how-to-grid {    max-width:none;    display:grid;    grid-template-columns:repeat(3,minmax(0,1fr));    gap:14px;}.maje-product-page .guide-card {    position:relative;    min-height:255px;    padding:23px 22px 20px;    border:1px solid rgba(212,180,140,.11);    border-radius:8px;    background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.008));}.maje-product-page .guide-number {    display:block;    color:var(--gold-soft);    font-family:var(--font-en-serif);    font-size:2.78rem;}.maje-product-page .guide-icon {    margin:21px 0 12px;    color:#d6b88d;    font-size:1.15rem;}.maje-product-page .guide-card h4 {    margin:0 0 9px;    color:#e0d8ce;    font-size:.92rem;    font-weight:500;}.maje-product-page .guide-card p {    margin:0;    color:#8491a3;    font-size:.72rem;    line-height:2;}.maje-product-page .guide-card small {    display:block;    margin-top:17px;    color:#566375;    font-family:var(--font-en-serif);    font-size:.55rem;    letter-spacing:2px;}.maje-product-page .guide-note {    display:flex;    align-items:flex-start;    gap:15px;    margin-top:15px;    padding:13px 16px;    border-right:2px solid rgba(212,180,140,.4);    background:rgba(212,180,140,.022);}.maje-product-page .guide-note span {    flex:0 0 auto;    color:var(--gold-soft);    font-size:.67rem;    font-weight:500;}.maje-product-page .guide-note p {    margin:0;    color:#8290a3;    font-size:.68rem;    line-height:1.95;}/* Reviews */.maje-product-page .reviews-panel-head {    display:flex;    align-items:center;    justify-content:space-between;    gap:30px;    margin-bottom:25px;}.maje-product-page .reviews-panel-head h3 { margin-bottom:0; }.maje-product-page .review-score.compact {    flex:0 0 180px;    padding:14px 17px;    text-align:center;    border:1px solid rgba(212,180,140,.11);    border-radius:8px;    background:rgba(212,180,140,.022);}.maje-product-page .review-score.compact strong { font-size:1.9rem; }.maje-product-page .review-list {    display:grid;    grid-template-columns:repeat(3,minmax(0,1fr));    gap:13px;}.maje-product-page .review {    min-height:190px;    padding:25px;    border:1px solid rgba(255,255,255,.055);   border-radius:8px;    background:rgba(255,255,255,.012);}.maje-product-page .review-avatar {    width:34px; height:34px;    margin-bottom:12px;    display:flex; align-items:center; justify-content:center;    border-radius:50%;    border:1px solid rgba(212,180,140,.18);    color:var(--gold-soft);    font-size:.72rem;}.maje-product-page .review-top {    display:flex;    align-items:center;    justify-content:space-between;    gap:10px;    margin-bottom:4px;}.maje-product-page .review-top strong { color:#d8dfe7; font-size:.76rem; }.maje-product-page .review-top span { color:var(--gold-soft); font-size:.63rem; letter-spacing:1px; }.maje-product-page .review-body > small { color:#596678; font-size:.56rem; }.maje-product-page .review-body p { margin:13px 0 0; color:#8491a3; font-size:.70rem; line-height:2; }/* Desktop first-view balance */@media (min-width:1101px) {    .maje-product-page .single-product-hero {        min-height: 610px;        display:flex;        align-items:center;    }    .maje-product-page .single-product-grid { width:100%; }}@media (max-width:900px) {    .maje-product-page .professional-strip-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }    .maje-product-page .professional-strip-grid > div:nth-child(2) { border-left:0; }    .maje-product-page .professional-strip-grid > div:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.05); }    .maje-product-page .guide-panel-head { grid-template-columns:1fr; gap:10px; align-items:start; }    .maje-product-page .how-to-grid,    .maje-product-page .review-list { grid-template-columns:1fr; }}@media (max-width:700px) {    .maje-product-page .product-tabs { justify-content:flex-start; }    .maje-product-page .product-tab { flex:0 0 160px; min-height:62px; padding-inline:14px; }    .maje-product-page .product-tab-panel { padding:28px 20px; }    .maje-product-page .reviews-panel-head { display:block; }    .maje-product-page .review-score.compact { margin-top:16px; max-width:180px; }}@media (max-width:520px) {    .maje-product-page .single-product-hero { padding-bottom:50px; }    .maje-product-page .single-product-price strong { font-size:1.75rem; }    .maje-product-page .buy-row { grid-template-columns:82px minmax(0,1fr); }    .maje-product-page .wishlist-btn { grid-column:1/-1; }    .maje-product-page .professional-strip-grid { grid-template-columns:1fr; }    .maje-product-page .professional-strip-grid > div { border-left:0; border-top:0; border-bottom:1px solid rgba(255,255,255,.05); min-height:74px; }    .maje-product-page .professional-strip-grid > div:last-child { border-bottom:0; }    .maje-product-page .product-tabs-section { padding:65px 5% 70px; }    .maje-product-page .product-tabs-header { margin-bottom:20px; }    .maje-product-page .product-tab-panel { padding:24px 16px; }    .maje-product-page .detail-highlight { width:100%; justify-content:center; }    .maje-product-page .guide-card { min-height:0; padding:21px 18px; }    .maje-product-page .guide-note { display:block; }    .maje-product-page .guide-note p { margin-top:7px; }}
#tab-reviews{
  display: flex;
  gap: 18px;
}



.length-filter {
  width: 100%;
  max-width: 660px;
  box-sizing: border-box;

  color: #fff;

  direction: rtl;
}


/* =========================
   HEADER
========================= */

.length-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 12px;
}

.length-title {
  font-size: 0.73rem;
  font-weight: 500;
  color: #e8e8e8;
}

.length-value {
  font-family: var(--font-en-serif);
  direction: ltr;

  display: flex;
  align-items: center;
  gap: 5px;

  font-size: 14px;
  color: #bca77a;
}


/* =========================
   RANGE CONTAINER
========================= */

.range-container {
  position: relative;

  width: 100%;
  height: 55px;

  display: flex;
  align-items: flex-start;
}


/* =========================
   SLIDER
========================= */

.range-slider {
  position: relative;

  width: calc(100% - 45px);
  height: 30px;

  margin: 0 auto;
}


/* خط اصلی */

.range-track {
  position: absolute;

  top: 8px;
  left: 0;
  right: 0;

  height: 1px;

  background: #292b31;

  border-radius: 10px;
}


/* خط انتخاب شده */

.range-fill {
  position: absolute;

  top: 8px;
  right: 0;

  height: 1.5px;

  width: 0%;

  background: var(--gold-soft);
  opacity: 80%;

  border-radius: 10px;

  pointer-events: none;
}


/* =========================
   NATIVE RANGE
========================= */

#lengthRange {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 30px;

  margin: 0;

  opacity: 0;

  cursor: pointer;

  z-index: 5;

  appearance: none;
  -webkit-appearance: none;
}


/* =========================
   CUSTOM HANDLE
========================= */

.custom-handle {
  position: absolute;

  top: -3px;

  width: 20px;
  height: 20px;

  border-radius: 50%;

  border: 1px solid rgba(169, 141, 89, 0.65);

  background: #070a11;

  box-sizing: border-box;

  pointer-events: none;

  z-index: 4;

  transform: translateX(-50%);

  transition:
    transform 0.12s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


/* نقطه وسط */

.custom-handle span {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--gold-soft);

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  box-shadow:
    0 0 4px rgba(217, 189, 136, 0.45);
}


/* هنگام Drag */

.range-slider:has(#lengthRange:active) .custom-handle {
  border-color: var(--gold-soft);

  box-shadow:
    0 0 0 3px rgba(169, 141, 89, 0.08);

  transform: translateX(-50%) scale(1.05);
}


/* =========================
   LABELS
========================= */

.range-label {
  font-family: var(--font-en-serif);
  position: absolute;

  top: 5px;

  font-size: 12px;

  color: #646b78;

  direction: ltr;

  user-select: none;
}


/* 14 سمت چپ */

.range-max {
  left: 0;
}


/* 8 سمت راست */

.range-min {
  right: 0;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

  .length-filter {
    padding: 0 12px;
  }

  .length-header {
    margin-bottom: 22px;
  }

  .length-title {
    font-size: 14px;
  }

  .length-value {
    font-size: 12px;
  }

  .custom-handle {
    width: 18px;
    height: 18px;
  }

  .custom-handle span {
    width: 4px;
    height: 4px;
  }
}

/* =========================================================
   JILONG — BRAND PAGE
   Shared VIMA / MAJÉ design language
   Isolated with .jilong-* classes so MAJÉ remains untouched.
   ========================================================= */

.jilong-page,
.jilong-page * {
  box-sizing: border-box;
}

.jilong-page {
  --jilong-bg: #030712;
  --jilong-bg-2: #07111e;
  --jilong-panel: rgba(14, 24, 39, .62);
  --jilong-panel-strong: #0a1422;
  --jilong-line: rgba(214, 183, 143, .18);
  --jilong-line-strong: rgba(231, 205, 173, .48);
  --jilong-gold: #d6b78f;
  --jilong-champagne: #e7cdad;
  --jilong-text: #f3eee6;
  --jilong-muted: #91a0b4;
  --jilong-cool: #a9b8c9;
  position: relative;
  background: var(--jilong-bg);
  color: var(--jilong-text);
  overflow: hidden;
}

.jilong-page a {
  color: inherit;
}

.jilong-page img {
  max-width: 100%;
}

/* ---------- loader ---------- */

.jilong-loader {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(214,183,143,.08), transparent 35%),
    #02050d;
  transition: opacity .65s ease, visibility .65s ease;
}

.jilong-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.jilong-loader-frame {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(231,205,173,.16);
}

.jilong-loader-content {
  position: relative;
  width: min(420px, 86vw);
  text-align: center;
}

.jilong-loader-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--jilong-gold);
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: .82rem;
  letter-spacing: 5px;
}

.jilong-loader-logo {
  color: var(--jilong-champagne);
  font-family: var(--font-en-serif);
  font-size: clamp(3rem, 8vw, 5.4rem);
  font-weight: 600;
  letter-spacing: 8px;
  line-height: 1;
}

.jilong-loader-line {
  width: min(220px, 55vw);
  height: 1px;
  margin: 22px auto 14px;
  overflow: hidden;
  background: rgba(231,205,173,.12);
}

.jilong-loader-line span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--jilong-champagne), transparent);
  animation: jilongLoaderLine 1.2s ease forwards;
}

.jilong-loader-subtitle {
  color: #7f8ca0;
  font-family: var(--font-en-serif);
  font-size: .68rem;
  letter-spacing: 4px;
}

.jilong-loader-progress {
  position: absolute;
  right: 34px;
  bottom: 28px;
  color: var(--jilong-gold);
  font-family: var(--font-en-serif);
  font-size: .85rem;
  letter-spacing: 2px;
}

@keyframes jilongLoaderLine {
  from { width: 0; }
  to { width: 100%; }
}

/* ---------- custom cursor ---------- */

.jilong-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(231,205,173,.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999997;
  transform: translate3d(-50%, -50%, 0);
  transition:
    width .3s cubic-bezier(.22,1,.36,1),
    height .3s cubic-bezier(.22,1,.36,1),
    border-color .3s ease,
    background .3s ease,
    opacity .3s ease;
}

.jilong-cursor-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--jilong-champagne);
  box-shadow: 0 0 12px rgba(231,205,173,.5);
}

.jilong-cursor.is-hover {
  width: 54px;
  height: 54px;
  border-color: rgba(231,205,173,.9);
  background: rgba(231,205,173,.04);
}

.jilong-cursor.is-hover .jilong-cursor-dot {
  width: 7px;
  height: 7px;
}

.jilong-cursor.is-hidden {
  opacity: 0;
}

@media (max-width: 768px) {
  .jilong-cursor {
    display: none;
  }
}

/* ---------- common ---------- */

.jilong-container {
  width: min(1180px, 88%);
  margin-inline: auto;
}

.jilong-section {
  position: relative;
  padding: 118px 0;
  overflow: hidden;
}

.jilong-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--jilong-gold);
  font-family: var(--font-en-serif);
  font-size: .8rem;
  font-style: italic;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.jilong-section-title {
  margin: 0 0 18px;
  color: var(--jilong-text);
  font-family: var(--font-fa);
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 400;
  line-height: 1.35;
}

.jilong-section-title strong {
  color: var(--jilong-champagne);
  font-weight: 800;
}

.jilong-gold-line {
  width: 105px;
  height: 1px;
  margin: 0 0 28px;
  background: linear-gradient(90deg, transparent, var(--jilong-champagne), transparent);
}

.jilong-section-header {
  margin-bottom: 48px;
  text-align: center;
}

.jilong-section-header .jilong-gold-line {
  margin-inline: auto;
}

.jilong-section-header .jilong-section-title {
  margin-bottom: 14px;
}

.jilong-section-copy {
  max-width: 650px;
  margin: 0 auto;
  color: var(--jilong-muted);
  font-size: .95rem;
  font-weight: 300;
  line-height: 2;
}

.jilong-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1);
}

.jilong-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- hero ---------- */

.jilong-hero {
  position: relative;
  min-height: 720px;
  height: 100vh;
  padding: 100px 5% 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(42% 70% at 50% 45%, rgba(214,183,143,.08), transparent 70%),
    linear-gradient(135deg, #020611 0%, #07101d 48%, #020611 100%);
}

.jilong-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(231,205,173,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(231,205,173,.025) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  pointer-events: none;
  opacity: .35;
}

.jilong-hero-frame {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(231,205,173,.16);
  pointer-events: none;
}

.jilong-hero-frame::before,
.jilong-hero-frame::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  border-color: rgba(231,205,173,.42);
}

.jilong-hero-frame::before {
  top: -1px;
  right: -1px;
  border-top: 1px solid;
  border-right: 1px solid;
}

.jilong-hero-frame::after {
  bottom: -1px;
  left: -1px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.jilong-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(230px, .78fr) minmax(360px, 1.3fr) minmax(300px, .92fr);
  align-items: center;
  gap: 34px;
  direction: ltr;
}

.jilong-hero-side,
.jilong-hero-content,
.jilong-hero-stage {
  direction: rtl;
}

.jilong-hero-side {
  align-self: end;
  padding-bottom: 28px;
}

.jilong-focus-card {
  position: relative;
  padding: 20px;
  border: 1px solid var(--jilong-line);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(7,16,29,.68));
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.jilong-focus-card::before {
  content: "01";
  position: absolute;
  top: 14px;
  left: 18px;
  color: rgba(231,205,173,.22);
  font-family: var(--font-en-serif);
  font-size: 1.8rem;
}

.jilong-focus-label {
  display: block;
  margin-bottom: 9px;
  color: var(--jilong-gold);
  font-family: var(--font-en-serif);
  font-size: .72rem;
  letter-spacing: 3px;
}

.jilong-focus-card h3 {
  margin: 0 0 9px;
  color: #f0e9df;
  font-size: 1.15rem;
  font-weight: 500;
}

.jilong-focus-card p {
  margin: 0 0 15px;
  color: var(--jilong-muted);
  font-size: .78rem;
  line-height: 1.9;
}

.jilong-focus-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--jilong-champagne);
  font-size: .75rem;
  text-decoration: none;
}

.jilong-focus-link span {
  transition: transform .3s ease;
}

.jilong-focus-link:hover span {
  transform: translateX(-5px);
}

.jilong-hero-content {
  align-self: center;
}

.jilong-hero-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--jilong-gold);
  font-family: var(--font-en-serif);
  font-size: .78rem;
  font-style: italic;
  letter-spacing: 5px;
}

.jilong-hero-title {
  margin: 0;
  background: linear-gradient(135deg, #f2d9b5 0%, #c9a97c 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-en-serif);
  font-size: clamp(5rem, 10vw, 8.5rem);
  font-weight: 600;
  letter-spacing: 7px;
  line-height: .88;
}

.jilong-hero-line {
  width: 145px;
  height: 1px;
  margin: 22px 0 18px;
  background: linear-gradient(90deg, transparent, var(--jilong-champagne));
}

.jilong-hero-headline {
  max-width: 480px;
  margin: 0 0 16px;
  color: #dbe2ec;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  font-weight: 400;
  line-height: 1.8;
}

.jilong-hero-headline strong {
  color: var(--jilong-champagne);
  font-weight: 800;
}

.jilong-hero-description {
  max-width: 470px;
  margin: 0;
  color: var(--jilong-muted);
  font-size: .92rem;
  font-weight: 300;
  line-height: 2;
}

.jilong-hero-stage {
  position: relative;
  min-height: 590px;
  display: grid;
  place-items: center;
}

.jilong-stage-ring {
  position: absolute;
  width: min(500px, 42vw);
  aspect-ratio: 1;
  border: 1px solid rgba(231,205,173,.14);
  border-radius: 50%;
}

.jilong-stage-ring::before,
.jilong-stage-ring::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px dashed rgba(231,205,173,.09);
  border-radius: 50%;
}

.jilong-stage-ring::after {
  inset: 26%;
  border-style: solid;
  border-color: rgba(231,205,173,.12);
}

.jilong-stage-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,183,143,.15), transparent 65%);
  filter: blur(4px);
}

.jilong-stage-image {
  position: relative;
  z-index: 2;
  width: min(620px, 125%);
  max-height: 620px;
  object-fit: contain;
  filter: drop-shadow(0 35px 55px rgba(0,0,0,.55));
  animation: jilongFloat 6s ease-in-out infinite;
}

@keyframes jilongFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(.5deg); }
}

.jilong-stage-meta {
  position: absolute;
  right: 0;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #758398;
  font-family: var(--font-en-serif);
  font-size: .7rem;
  letter-spacing: 2px;
}

.jilong-stage-meta::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--jilong-gold);
}

/* ---------- marquee ---------- */

.jilong-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(231,205,173,.08);
  border-bottom: 1px solid rgba(231,205,173,.08);
  background: #050b16;
}

.jilong-marquee-track {
  width: max-content;
  display: flex;
  animation: jilongMarquee 26s linear infinite;
}

.jilong-marquee-group {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 18px 26px;
  white-space: nowrap;
  color: #9aa7b8;
  font-family: var(--font-en-serif);
  font-size: .74rem;
  letter-spacing: 4px;
}

.jilong-marquee-group i {
  color: var(--jilong-gold);
  font-style: normal;
}

@keyframes jilongMarquee {
  to { transform: translateX(-50%); }
}

/* ---------- philosophy ---------- */

.jilong-philosophy {
  background:
    radial-gradient(ellipse at 10% 50%, rgba(214,183,143,.055), transparent 35%),
    #040914;
}

.jilong-philosophy-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 80px;
  align-items: center;
  direction: ltr;
}

.jilong-philosophy-gallery,
.jilong-philosophy-content {
  direction: rtl;
}

.jilong-philosophy-gallery {
  position: relative;
  min-height: 550px;
}

.jilong-photo {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(231,205,173,.15);
  background: #0a1422;
}

.jilong-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}

.jilong-photo:hover img {
  transform: scale(1.045);
}

.jilong-photo-1 {
  top: 0;
  left: 0;
  width: 63%;
  height: 370px;
}

.jilong-photo-2 {
  right: 0;
  top: 85px;
  width: 46%;
  height: 285px;
}

.jilong-photo-3 {
  left: 12%;
  bottom: 0;
  width: 48%;
  height: 235px;
}

.jilong-photo-4 {
  right: 4%;
  bottom: 0;
  width: 32%;
  height: 170px;
}

.jilong-philosophy-content p {
  margin: 0 0 18px;
  color: var(--jilong-muted);
  font-size: .92rem;
  line-height: 2.05;
  font-weight: 300;
}

.jilong-story-points {
  display: grid;
  gap: 0;
  margin-top: 34px;
}

.jilong-story-point {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid rgba(231,205,173,.09);
}

.jilong-story-point:last-child {
  border-bottom: 1px solid rgba(231,205,173,.09);
}

.jilong-story-point > span {
  color: var(--jilong-gold);
  font-size: 1rem;
}

.jilong-story-point strong {
  display: block;
  margin-bottom: 4px;
  color: #e9e4dc;
  font-size: .86rem;
  font-weight: 500;
}

.jilong-story-point small {
  color: #738096;
  font-size: .68rem;
  line-height: 1.7;
}

/* ---------- product system ---------- */

.jilong-system {
  background: linear-gradient(180deg, #07101c 0%, #030712 100%);
}

.jilong-system-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.jilong-system-card {
  position: relative;
  min-height: 255px;
  padding: 30px 24px;
  border: 1px solid rgba(231,205,173,.13);
  background:
    linear-gradient(145deg, rgba(231,205,173,.045), rgba(8,18,32,.7));
  overflow: hidden;
  transition: transform .45s ease, border-color .45s ease, background .45s ease;
}

.jilong-system-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 1px;
  background: var(--jilong-champagne);
  transition: width .5s ease;
}

.jilong-system-card:hover {
  transform: translateY(-7px);
  border-color: var(--jilong-line-strong);
  background: linear-gradient(145deg, rgba(231,205,173,.09), rgba(8,18,32,.75));
}

.jilong-system-card:hover::before {
  width: 100%;
}

.jilong-system-number {
  display: block;
  margin-bottom: 44px;
  color: rgba(231,205,173,.38);
  font-family: var(--font-en-serif);
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.jilong-system-card h3 {
  margin: 0 0 9px;
  color: #eee8df;
  font-size: 1.05rem;
  font-weight: 500;
}

.jilong-system-card p {
  margin: 0;
  color: #77869b;
  font-size: .75rem;
  line-height: 1.9;
}

/* ---------- why ---------- */

.jilong-why {
  background: #040914;
}

.jilong-benefits {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(231,205,173,.13);
  border-bottom: 1px solid rgba(231,205,173,.13);
}

.jilong-benefit {
  min-height: 260px;
  padding: 28px 22px;
  border-left: 1px solid rgba(231,205,173,.1);
  transition: background .4s ease, transform .4s ease;
}

.jilong-benefit:first-child {
  border-left: 0;
}

.jilong-benefit:hover {
  background: rgba(231,205,173,.035);
}

.jilong-benefit-number {
  display: block;
  margin-bottom: 18px;
  color: rgba(231,205,173,.4);
  font-family: var(--font-en-serif);
  font-size: 1rem;
}

.jilong-benefit-icon {
  display: block;
  margin-bottom: 42px;
  color: var(--jilong-gold);
  font-size: 1.05rem;
}

.jilong-benefit h3 {
  margin: 0 0 9px;
  color: #ece6dd;
  font-size: .94rem;
  font-weight: 500;
}

.jilong-benefit p {
  margin: 0;
  color: #748197;
  font-size: .71rem;
  line-height: 1.9;
}

/* ---------- technology ---------- */

.jilong-technology {
  background:
    radial-gradient(circle at 80% 50%, rgba(214,183,143,.07), transparent 35%),
    linear-gradient(135deg, #07111e, #030711);
}

.jilong-tech-wrapper {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
  align-items: center;
  direction: ltr;
}

.jilong-tech-content,
.jilong-tech-features {
  direction: rtl;
}

.jilong-tech-content p {
  max-width: 530px;
  margin: 0;
  color: var(--jilong-muted);
  font-size: .9rem;
  line-height: 2.1;
  font-weight: 300;
}

.jilong-tech-features {
  display: grid;
  gap: 0;
}

.jilong-tech-feature {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: center;
  min-height: 115px;
  padding: 20px 0;
  border-top: 1px solid rgba(231,205,173,.1);
}

.jilong-tech-feature:last-child {
  border-bottom: 1px solid rgba(231,205,173,.1);
}

.jilong-tech-feature > span {
  color: var(--jilong-gold);
  font-family: var(--font-en-serif);
  font-size: .85rem;
  letter-spacing: 2px;
}

.jilong-tech-feature strong {
  display: block;
  margin-bottom: 5px;
  color: #eee8df;
  font-size: .95rem;
  font-weight: 500;
}

.jilong-tech-feature small {
  color: #718095;
  font-size: .7rem;
}

/* ---------- products ---------- */

.jilong-products {
  background: #030711;
}

.jilong-product-tabs {
  max-width: 950px;
  margin: 0 auto 44px;
  display: flex;
  justify-content: center;
  gap: 4px;
  direction: rtl;
  border-bottom: 1px solid rgba(231,205,173,.12);
  overflow-x: auto;
  scrollbar-width: none;
}

.jilong-product-tabs::-webkit-scrollbar {
  display: none;
}

.jilong-product-tab {
  position: relative;
  min-width: 145px;
  padding: 15px 18px 16px;
  border: 0;
  background: transparent;
  color: #748197;
  font-family: var(--font-fa);
  font-size: .76rem;
  cursor: pointer;
  transition: color .3s ease, background .3s ease;
  white-space: nowrap;
}

.jilong-product-tab::after {
  content: "";
  position: absolute;
  right: 20%;
  left: 20%;
  bottom: -1px;
  height: 2px;
  background: transparent;
  transform: scaleX(.2);
  transition: transform .35s ease, background .35s ease;
}

.jilong-product-tab:hover,
.jilong-product-tab.active {
  color: var(--jilong-champagne);
}

.jilong-product-tab.active::after {
  background: var(--jilong-champagne);
  transform: scaleX(1);
}

.jilong-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.jilong-product-card {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(231,205,173,.12);
  background: linear-gradient(160deg, rgba(231,205,173,.045), rgba(5,12,22,.82));
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: border-color .4s ease, transform .4s ease, opacity .25s ease;
}

.jilong-product-card.is-hidden {
  display: none;
}

.jilong-product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(231,205,173,.38);
}

.jilong-product-image {
  position: relative;
  height: 300px;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(231,205,173,.09), transparent 62%),
    #08121f;
  overflow: hidden;
}

.jilong-product-image::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(231,205,173,.06);
  pointer-events: none;
}

.jilong-product-image img {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 88%;
  object-fit: contain;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}

.jilong-product-card:hover .jilong-product-image img {
  transform: scale(1.05);
}

.jilong-product-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  padding: 5px 9px;
  border: 1px solid rgba(231,205,173,.35);
  color: var(--jilong-champagne);
  font-family: var(--font-en-serif);
  font-size: .62rem;
  letter-spacing: 1.5px;
  background: rgba(3,7,17,.72);
}

.jilong-product-content {
  padding: 22px 20px 20px;
  direction: rtl;
}

.jilong-product-category {
  display: block;
  margin-bottom: 8px;
  color: var(--jilong-gold);
  font-family: var(--font-en-serif);
  font-size: .68rem;
  letter-spacing: 2px;
}

.jilong-product-title {
  margin: 0 0 8px;
  color: #eee8df;
  font-size: 1rem;
  font-weight: 500;
}

.jilong-product-description {
  min-height: 42px;
  margin: 0 0 17px;
  color: #738197;
  font-size: .7rem;
  line-height: 1.8;
}

.jilong-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(231,205,173,.08);
}

.jilong-product-footer strong {
  color: var(--jilong-champagne);
  font-family: var(--font-fa);
  font-size: .8rem;
  font-weight: 500;
}

.jilong-product-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8190a3;
  font-size: .68rem;
  text-decoration: none;
  transition: color .3s ease;
}

.jilong-product-link:hover {
  color: var(--jilong-champagne);
}

/* ---------- results ---------- */

.jilong-results {
  background: linear-gradient(180deg, #07101c 0%, #030711 100%);
}

.jilong-results-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  gap: 15px;
}

.jilong-result-card {
  position: relative;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(231,205,173,.12);
  background: #091321;
}

.jilong-result-card:first-child {
  min-height: 470px;
}

.jilong-result-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}

.jilong-result-card:hover img {
  transform: scale(1.045);
}

.jilong-result-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(2,6,15,.45));
  pointer-events: none;
}

/* ---------- collaboration ---------- */

.jilong-collaboration {
  background:
    radial-gradient(circle at 70% 50%, rgba(214,183,143,.08), transparent 36%),
    #040914;
}

.jilong-collaboration-wrapper {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 80px;
  direction: ltr;
}

.jilong-collaboration-image,
.jilong-collaboration-content {
  direction: rtl;
}

.jilong-collaboration-image {
  position: relative;
  min-height: 430px;
  border: 1px solid rgba(231,205,173,.14);
  overflow: hidden;
}

.jilong-collaboration-image::before {
  content: "JILONG PROFESSIONAL";
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 2;
  color: rgba(231,205,173,.62);
  font-family: var(--font-en-serif);
  font-size: .65rem;
  letter-spacing: 3px;
}

.jilong-collaboration-image img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: block;
  object-fit: cover;
}

.jilong-collaboration-content p {
  max-width: 500px;
  margin: 0 0 28px;
  color: var(--jilong-muted);
  font-size: .9rem;
  line-height: 2;
  font-weight: 300;
}

.jilong-collaboration-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 25px;
  border: 1px solid rgba(231,205,173,.3);
  color: var(--jilong-champagne);
  background: rgba(231,205,173,.035);
  font-size: .78rem;
  text-decoration: none;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.jilong-collaboration-btn:hover {
  transform: translateY(-3px);
  border-color: var(--jilong-champagne);
  background: rgba(231,205,173,.09);
}

.jilong-collaboration-btn span {
  transition: transform .3s ease;
}

.jilong-collaboration-btn:hover span {
  transform: translateX(-5px);
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .jilong-hero {
    min-height: 660px;
  }

  .jilong-hero-inner {
    grid-template-columns: minmax(190px,.7fr) minmax(300px,1.1fr) minmax(250px,.85fr);
    gap: 18px;
  }

  .jilong-stage-image {
    width: 125%;
  }

  .jilong-system-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .jilong-benefits {
    grid-template-columns: repeat(3, 1fr);
  }

  .jilong-benefit:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(231,205,173,.1);
  }

  .jilong-benefit:nth-child(5) {
    border-top: 1px solid rgba(231,205,173,.1);
  }

  .jilong-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .jilong-section {
    padding: 86px 0;
  }

  .jilong-hero {
    height: auto;
    min-height: 0;
    padding: 110px 5% 70px;
  }

  .jilong-hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .jilong-hero-content {
    order: 1;
    text-align: center;
  }

  .jilong-hero-stage {
    order: 2;
    min-height: 390px;
  }

  .jilong-hero-side {
    order: 3;
    width: min(540px,100%);
    margin: 0 auto;
    padding: 0;
  }

  .jilong-hero-line {
    margin: 20px auto 17px;
  }

  .jilong-hero-headline,
  .jilong-hero-description {
    margin-inline: auto;
  }

  .jilong-stage-ring {
    width: min(420px,80vw);
  }

  .jilong-stage-image {
    width: min(540px,110%);
  }

  .jilong-stage-meta {
    right: 10%;
    bottom: 4px;
  }

  .jilong-philosophy-grid,
  .jilong-tech-wrapper,
  .jilong-collaboration-wrapper {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .jilong-philosophy-gallery {
    min-height: 500px;
  }

  .jilong-tech-content {
    text-align: center;
  }

  .jilong-tech-content .jilong-gold-line {
    margin-inline: auto;
  }

  .jilong-tech-content p {
    margin-inline: auto;
  }

  .jilong-results-grid {
    grid-template-columns: 1fr 1fr;
  }

  .jilong-result-card:first-child {
    grid-column: 1 / -1;
  }

  .jilong-collaboration-image {
    min-height: 350px;
  }

  .jilong-collaboration-image img {
    min-height: 350px;
  }
}

@media (max-width: 600px) {
  .jilong-container {
    width: min(92%, 520px);
  }

  .jilong-hero-frame {
    inset: 12px;
  }

  .jilong-hero-title {
    font-size: clamp(4rem, 21vw, 6rem);
    letter-spacing: 4px;
  }

  .jilong-hero-stage {
    min-height: 320px;
  }

  .jilong-stage-ring {
    width: 82vw;
  }

  .jilong-stage-image {
    width: 115%;
  }

  .jilong-section {
    padding: 72px 0;
  }

  .jilong-system-grid,
  .jilong-products-grid {
    grid-template-columns: 1fr;
  }

  .jilong-benefits {
    grid-template-columns: 1fr 1fr;
  }

  .jilong-benefit {
    min-height: 230px;
  }

  .jilong-benefit:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(231,205,173,.1);
  }

  .jilong-benefit:nth-child(4) {
    border-left: 1px solid rgba(231,205,173,.1);
  }

  .jilong-benefit:nth-child(5) {
    grid-column: 1 / -1;
    border-left: 0;
  }

  .jilong-philosophy-gallery {
    min-height: 390px;
  }

  .jilong-photo-1 {
    width: 62%;
    height: 270px;
  }

  .jilong-photo-2 {
    width: 45%;
    height: 220px;
    top: 60px;
  }

  .jilong-photo-3 {
    height: 165px;
  }

  .jilong-photo-4 {
    height: 125px;
  }

  .jilong-results-grid {
    grid-template-columns: 1fr;
  }

  .jilong-result-card,
  .jilong-result-card:first-child {
    min-height: 320px;
    grid-column: auto;
  }

  .jilong-product-image {
    height: 280px;
  }
}

@media (max-width: 420px) {
  .jilong-benefits {
    grid-template-columns: 1fr;
  }

  .jilong-benefit,
  .jilong-benefit:nth-child(3),
  .jilong-benefit:nth-child(4),
  .jilong-benefit:nth-child(5) {
    border-left: 0;
    border-top: 1px solid rgba(231,205,173,.1);
  }

  .jilong-benefit:first-child {
    border-top: 0;
  }

  .jilong-product-tabs {
    justify-content: flex-start;
  }

  .jilong-product-tab {
    min-width: 128px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jilong-page *,
  .jilong-page *::before,
  .jilong-page *::after {
    animation: none !important;
    transition: none !important;
  }
}




/* =========================================================
   VIMA STORY PAGE
   IMPORTANT:
   All selectors are isolated under .vima-story-page / .vima-*
   so this block does not intentionally modify MAJÉ/JILONG.
========================================================= */

.vima-story-page {
    --vima-bg: #020611;
    --vima-bg-2: #07111f;
    --vima-panel: rgba(11, 20, 35, 0.72);
    --vima-gold: #d6b78f;
    --vima-gold-light: #f0dfc4;
    --vima-muted: #94a2b5;
    --vima-text: #f2eee7;
    --vima-line: rgba(214, 183, 143, 0.18);
    position: relative;
    overflow: hidden;
    background: var(--vima-bg);
    color: var(--vima-text);
    font-family: var(--font-fa);
}

.vima-story-page *,
.vima-story-page *::before,
.vima-story-page *::after {
    box-sizing: border-box;
}

.vima-container {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.vima-kicker {
    display: inline-block;
    color: var(--vima-gold);
    font-family: var(--font-en-serif);
    font-size: .78rem;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.vima-gold-rule {
    width: 118px;
    height: 1px;
    margin: 22px 0;
    background: linear-gradient(90deg, transparent, var(--vima-gold), transparent);
}

.vima-gold-rule--center {
    margin-inline: auto;
}

.vima-story-page img {
    max-width: 100%;
}

.vima-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity .9s cubic-bezier(.16,1,.3,1),
        transform .9s cubic-bezier(.16,1,.3,1);
}

.vima-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   HERO
========================================================= */

.vima-story-hero {
    min-height: 92vh;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    padding: 130px 6% 80px;
    background:
        radial-gradient(circle at 75% 40%, rgba(214,183,143,.12), transparent 27%),
        radial-gradient(circle at 15% 80%, rgba(28,65,105,.24), transparent 32%),
        linear-gradient(135deg, #020611 0%, #07111f 58%, #020611 100%);
}

.vima-story-hero::before {
    content: "";
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(214,183,143,.13);
    pointer-events: none;
}

.vima-story-hero-grid {
    width: min(1220px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
    position: relative;
    z-index: 2;
}

.vima-story-hero-copy {
    max-width: 570px;
    direction: rtl;
}

.vima-story-hero-copy h1 {
    margin: 18px 0 0;
    font-size: clamp(2.7rem, 5.8vw, 5.7rem);
    line-height: 1.15;
    font-weight: 300;
    letter-spacing: -1px;
}

.vima-story-hero-copy h1 strong {
    display: block;
    color: var(--vima-gold-light);
    font-weight: 800;
}

.vima-story-hero-copy p {
    max-width: 560px;
    margin: 26px 0 0;
    color: #b7c0cd;
    font-size: 1rem;
    line-height: 2.1;
}

.vima-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.vima-story-btn {
    min-width: 160px;
    min-height: 52px;
    padding: 12px 22px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: .4s ease;
}

.vima-story-btn--gold {
    color: #08101b;
    background: linear-gradient(135deg, #f0dfc4, #c8a16f);
    box-shadow: 0 14px 40px rgba(214,183,143,.18);
}

.vima-story-btn--ghost {
    color: var(--vima-gold-light);
    border: 1px solid rgba(214,183,143,.28);
    background: rgba(255,255,255,.025);
}

.vima-story-btn:hover {
    transform: translateY(-4px);
}

.vima-story-btn--ghost:hover {
    border-color: var(--vima-gold);
    background: rgba(214,183,143,.08);
}

.vima-story-hero-visual {
    min-height: 580px;
    position: relative;
}

.vima-hero-frame {
    position: relative;
    width: min(610px, 100%);
    height: 610px;
    margin-inline: auto;
}

.vima-hero-frame::before,
.vima-hero-frame::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(214,183,143,.18);
    pointer-events: none;
}

.vima-hero-frame::before {
    inset: 5%;
}

.vima-hero-frame::after {
    inset: 12%;
    border-color: rgba(214,183,143,.07);
}

.vima-hero-image-main {
    position: absolute;
    width: 78%;
    height: 78%;
    left: 10%;
    top: 12%;
    overflow: hidden;
    border: 1px solid rgba(214,183,143,.25);
    background: #08111e;
    box-shadow: 0 40px 100px rgba(0,0,0,.55);
}

.vima-hero-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.86) contrast(1.04);
}

.vima-hero-image-small {
    position: absolute;
    width: 38%;
    height: 38%;
    right: 0;
    bottom: 3%;
    z-index: 3;
    overflow: hidden;
    border: 4px solid #020611;
    outline: 1px solid rgba(214,183,143,.35);
    box-shadow: 0 25px 60px rgba(0,0,0,.55);
}

.vima-hero-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vima-hero-image-small--top {
    top: 2%;
    right: -2%;
    bottom: auto;
    width: 27%;
    height: 27%;
    border-radius: 50%;
}

.vima-hero-stamp {
    position: absolute;
    left: 2%;
    bottom: 5%;
    width: 115px;
    height: 115px;
    border: 1px solid rgba(214,183,143,.45);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(2,6,17,.76);
    backdrop-filter: blur(10px);
    z-index: 4;
}

.vima-hero-stamp span {
    font-family: var(--font-en-serif);
    color: var(--vima-gold-light);
    font-size: 2rem;
    line-height: .8;
}

.vima-hero-stamp small,
.vima-hero-stamp b {
    font-family: var(--font-en-serif);
    letter-spacing: 2px;
    font-size: .55rem;
    color: var(--vima-muted);
}

.vima-hero-stamp b {
    color: var(--vima-gold);
}

.vima-story-hero-orbit {
    position: absolute;
    border: 1px solid rgba(214,183,143,.09);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.vima-orbit-1 {
    width: 680px;
    height: 680px;
    right: -280px;
    top: -100px;
}

.vima-orbit-2 {
    width: 340px;
    height: 340px;
    left: -160px;
    bottom: -120px;
}

.vima-story-hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    right: 12%;
    top: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214,183,143,.09), transparent 68%);
    filter: blur(10px);
    pointer-events: none;
}

.vima-hero-bottom {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    color: #758396;
    font-family: var(--font-en-serif);
    font-size: .68rem;
    letter-spacing: 3px;
}

.vima-hero-bottom i {
    width: 42px;
    height: 1px;
    background: var(--vima-gold);
}

/* =========================================================
   MANIFESTO
========================================================= */

.vima-manifesto {
    padding: 150px 0;
    background:
        linear-gradient(180deg, #020611 0%, #07111e 100%);
}

.vima-manifesto-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 55px;
    max-width: 1000px;
    margin: auto;
    direction: ltr;
}

.vima-manifesto-number {
    font-family: var(--font-en-serif);
    color: rgba(214,183,143,.22);
    font-size: 6rem;
    line-height: 1;
    font-weight: 600;
}

.vima-manifesto-content {
    direction: rtl;
}

.vima-manifesto-content h2 {
    max-width: 850px;
    margin: 15px 0 28px;
    color: var(--vima-text);
    font-size: clamp(2rem, 4vw, 3.7rem);
    line-height: 1.35;
    font-weight: 300;
}

.vima-manifesto-content h2 strong {
    color: var(--vima-gold-light);
    font-weight: 800;
}

.vima-manifesto-content p {
    max-width: 780px;
    color: #9daabd;
    font-size: 1rem;
    line-height: 2.2;
    margin: 0 0 18px;
}

.vima-manifesto-sign {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--vima-line);
    display: flex;
    align-items: baseline;
    gap: 18px;
}

.vima-manifesto-sign span {
    font-family: var(--font-en-serif);
    color: var(--vima-gold-light);
    font-size: 2rem;
    letter-spacing: 5px;
}

.vima-manifesto-sign small {
    color: #69788c;
    font-size: .65rem;
    letter-spacing: 2px;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.vima-section-heading {
    max-width: 720px;
    margin: 0 auto 85px;
    text-align: center;
    direction: rtl;
}

.vima-section-heading h2 {
    margin: 16px 0;
    color: var(--vima-text);
    font-size: clamp(2.2rem, 4.4vw, 4rem);
    line-height: 1.3;
    font-weight: 300;
}

.vima-section-heading h2 strong {
    color: var(--vima-gold-light);
    font-weight: 800;
}

.vima-section-heading p {
    max-width: 650px;
    margin: auto;
    color: #8695a9;
    font-size: .98rem;
    line-height: 2;
}

/* =========================================================
   STORYLINE
========================================================= */

.vima-timeline-section {
    position: relative;
    padding: 150px 0 170px;
    background: #050b16;
    overflow: hidden;
}

.vima-timeline-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(214,183,143,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214,183,143,.025) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    pointer-events: none;
}

.vima-storyline {
    position: relative;
    max-width: 1050px;
    margin: auto;
}

.vima-storyline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(214,183,143,.12);
    transform: translateX(-50%);
}

.vima-storyline-progress {
    display: block;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, var(--vima-gold-light), #8e6d45);
    transition: height .15s linear;
}

.vima-story-step {
    min-height: 430px;
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 35px;
    align-items: center;
    direction: ltr;
}

.vima-story-step + .vima-story-step {
    margin-top: 70px;
}

.vima-step-marker {
    grid-column: 2;
    grid-row: 1;
    width: 54px;
    height: 54px;
    justify-self: center;
    border-radius: 50%;
    border: 1px solid rgba(214,183,143,.45);
    background: #050b16;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    transition: .45s ease;
}

.vima-story-step.is-active .vima-step-marker {
    background: var(--vima-gold);
    border-color: var(--vima-gold);
    box-shadow: 0 0 0 10px rgba(214,183,143,.05), 0 0 35px rgba(214,183,143,.25);
}

.vima-step-marker span {
    font-family: var(--font-en-serif);
    color: var(--vima-gold-light);
    font-size: .82rem;
}

.vima-story-step.is-active .vima-step-marker span {
    color: #07101b;
}

.vima-step-copy {
    grid-row: 1;
    direction: rtl;
}

.vima-story-step:nth-child(odd) .vima-step-copy {
    grid-column: 1;
    text-align: right;
}

.vima-story-step:nth-child(even) .vima-step-copy {
    grid-column: 3;
    text-align: right;
}

.vima-step-label {
    color: #738398;
    font-family: var(--font-en-serif);
    font-size: .72rem;
    letter-spacing: 3px;
}

.vima-step-copy h3 {
    margin: 12px 0 16px;
    color: var(--vima-text);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.3;
}

.vima-step-copy p {
    color: #8796aa;
    font-size: .96rem;
    line-height: 2;
}

.vima-inline-link {
    display: inline-flex;
    gap: 10px;
    margin-top: 20px;
    color: var(--vima-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(214,183,143,.2);
    padding-bottom: 5px;
    transition: .3s ease;
}

.vima-inline-link:hover {
    color: #fff;
    border-color: var(--vima-gold);
}

.vima-step-visual {
    grid-row: 1;
}

.vima-story-step:nth-child(odd) .vima-step-visual {
    grid-column: 3;
}

.vima-story-step:nth-child(even) .vima-step-visual {
    grid-column: 1;
    grid-row: 1;
}

.vima-step-card,
.vima-future-card {
    min-height: 270px;
    padding: 34px;
    border: 1px solid rgba(214,183,143,.16);
    background:
        radial-gradient(circle at 80% 20%, rgba(214,183,143,.08), transparent 40%),
        linear-gradient(145deg, rgba(15,28,46,.8), rgba(3,8,18,.92));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    direction: rtl;
    position: relative;
    overflow: hidden;
}

.vima-step-card::after,
.vima-future-card::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(214,183,143,.08);
    border-radius: 50%;
    left: -55px;
    bottom: -55px;
}

.vima-step-card span,
.vima-future-card span {
    color: var(--vima-gold);
    font-family: var(--font-en-serif);
    letter-spacing: 3px;
    font-size: .72rem;
}

.vima-step-card b,
.vima-future-card strong {
    color: var(--vima-text);
    font-size: 2rem;
    line-height: 1.35;
    font-weight: 500;
}

.vima-step-card i {
    color: var(--vima-gold);
    font-size: 1.7rem;
    font-style: normal;
}

.vima-step-card--outline {
    background: transparent;
    border-color: rgba(214,183,143,.28);
}

.vima-step-image {
    height: 310px;
    overflow: hidden;
    border: 1px solid rgba(214,183,143,.18);
    background: #08111d;
}

.vima-step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s cubic-bezier(.16,1,.3,1), filter .5s ease;
    filter: saturate(.82);
}

.vima-story-step:hover .vima-step-image img {
    transform: scale(1.045);
    filter: saturate(1);
}

.vima-future-card {
    min-height: 310px;
    justify-content: center;
    gap: 22px;
}

.vima-future-card strong {
    font-family: var(--font-en-serif);
    font-size: 3rem;
    color: var(--vima-gold-light);
}

.vima-future-line {
    width: 80px;
    height: 1px;
    background: var(--vima-gold);
}

/* =========================================================
   BRANDS
========================================================= */

.vima-brands {
    padding: 150px 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(214,183,143,.045), transparent 25%),
        #020611;
}

.vima-brand-architecture {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.vima-brand-panel {
    min-height: 670px;
    border: 1px solid rgba(214,183,143,.14);
    background: #07101d;
    position: relative;
    overflow: hidden;
    transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}

.vima-brand-panel:hover {
    transform: translateY(-8px);
    border-color: rgba(214,183,143,.35);
}

.vima-brand-panel-image {
    height: 370px;
    position: relative;
    overflow: hidden;
    background: #0a1422;
}

.vima-brand-panel-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, #07101d 100%);
}

.vima-brand-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(.16,1,.3,1);
}

.vima-brand-panel:hover .vima-brand-panel-image img {
    transform: scale(1.05);
}

.vima-brand-index {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(214,183,143,.35);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--vima-gold-light);
    font-family: var(--font-en-serif);
}

.vima-brand-panel-content {
    padding: 0 40px 42px;
    margin-top: -35px;
    position: relative;
    z-index: 2;
    direction: rtl;
}

.vima-brand-overline {
    color: #78869a;
    font-family: var(--font-en-serif);
    font-size: .68rem;
    letter-spacing: 3px;
}

.vima-brand-panel-content h3 {
    margin: 6px 0 0;
    font-family: var(--font-en-serif);
    font-size: 3.3rem;
    letter-spacing: 4px;
    color: var(--vima-gold-light);
}

.vima-brand-panel-content .vima-gold-rule {
    margin: 15px 0;
}

.vima-brand-panel-content p {
    max-width: 500px;
    color: #8c9aad;
    line-height: 2;
    font-size: .92rem;
}

.vima-brand-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
}

.vima-brand-tags span {
    padding: 7px 10px;
    border: 1px solid rgba(214,183,143,.13);
    color: #77869a;
    font-family: var(--font-en-serif);
    font-size: .6rem;
    letter-spacing: 1.5px;
}

.vima-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--vima-gold);
    text-decoration: none;
    font-weight: 700;
    transition: .3s ease;
}

.vima-brand-link:hover {
    color: #fff;
    gap: 15px;
}

/* =========================================================
   UNIVERSE
========================================================= */

.vima-universe {
    padding: 150px 0;
    background: #06101c;
    position: relative;
}

.vima-universe-intro {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 80px;
    align-items: end;
    direction: rtl;
}

.vima-universe-intro h2 {
    margin: 15px 0 0;
    color: var(--vima-text);
    font-size: clamp(2.1rem, 4vw, 3.7rem);
    font-weight: 300;
    line-height: 1.3;
}

.vima-universe-intro h2 strong {
    color: var(--vima-gold-light);
    font-weight: 800;
}

.vima-universe-intro p {
    color: #8796aa;
    line-height: 2;
}

.vima-universe-map {
    height: 620px;
    margin-top: 80px;
    position: relative;
    border: 1px solid rgba(214,183,143,.08);
    background:
        radial-gradient(circle at center, rgba(214,183,143,.08), transparent 28%),
        radial-gradient(circle at 20% 20%, rgba(32,70,110,.12), transparent 30%);
    overflow: hidden;
}

.vima-universe-map::before,
.vima-universe-map::after {
    content: "";
    position: absolute;
    inset: 13%;
    border: 1px solid rgba(214,183,143,.06);
    border-radius: 50%;
}

.vima-universe-map::after {
    inset: 27%;
}

.vima-universe-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    height: 190px;
    border: 1px solid rgba(214,183,143,.4);
    border-radius: 50%;
    background: rgba(2,6,17,.88);
    box-shadow: 0 0 70px rgba(214,183,143,.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.vima-universe-center span {
    font-family: var(--font-en-serif);
    color: var(--vima-gold-light);
    font-size: 3.2rem;
    line-height: .8;
}

.vima-universe-center strong {
    margin-top: 10px;
    color: var(--vima-gold);
    font-family: var(--font-en-serif);
    font-size: 1.25rem;
    letter-spacing: 5px;
}

.vima-universe-center small {
    margin-top: 8px;
    color: #6f7e92;
    font-size: .48rem;
    letter-spacing: 1.7px;
}

.vima-universe-node {
    position: absolute;
    width: 170px;
    min-height: 100px;
    padding: 18px;
    border: 1px solid rgba(214,183,143,.14);
    background: rgba(5,11,22,.82);
    backdrop-filter: blur(10px);
    direction: rtl;
    z-index: 2;
    transition: .45s ease;
}

.vima-universe-node:hover {
    transform: translateY(-5px);
    border-color: rgba(214,183,143,.4);
}

.vima-universe-node::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 130px;
    background: rgba(214,183,143,.18);
    top: 50%;
}

.vima-node-1 { top: 11%; left: 12%; }
.vima-node-2 { top: 13%; right: 12%; }
.vima-node-3 { bottom: 12%; left: 14%; }
.vima-node-4 { bottom: 11%; right: 13%; }
.vima-node-5 { left: 50%; bottom: 4%; transform: translateX(-50%); }

.vima-node-1::before,
.vima-node-3::before { right: -130px; }

.vima-node-2::before,
.vima-node-4::before { left: -130px; }

.vima-node-5::before {
    width: 1px;
    height: 65px;
    left: 50%;
    top: -65px;
}

.vima-universe-node span {
    display: block;
    color: var(--vima-gold);
    font-family: var(--font-en-serif);
    font-size: .65rem;
    letter-spacing: 2px;
}

.vima-universe-node strong {
    display: block;
    margin: 6px 0;
    color: #dfe4eb;
    font-family: var(--font-en-serif);
    font-size: 1rem;
    letter-spacing: 1px;
}

.vima-universe-node small {
    color: #738196;
    font-size: .75rem;
}

/* =========================================================
   VALUES
========================================================= */

.vima-values {
    padding: 150px 0;
    background: #020611;
}

.vima-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.vima-value-card {
    min-height: 330px;
    padding: 32px 26px;
    border: 1px solid rgba(214,183,143,.12);
    background: linear-gradient(145deg, rgba(12,23,40,.8), rgba(2,6,17,.95));
    position: relative;
    overflow: hidden;
    direction: rtl;
    transition: .45s ease;
}

.vima-value-card:hover {
    transform: translateY(-7px);
    border-color: rgba(214,183,143,.35);
    background: linear-gradient(145deg, rgba(25,40,61,.8), rgba(2,6,17,.95));
}

.vima-value-number {
    position: absolute;
    top: 16px;
    left: 18px;
    color: rgba(214,183,143,.16);
    font-family: var(--font-en-serif);
    font-size: 2.2rem;
}

.vima-value-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(214,183,143,.25);
    display: grid;
    place-items: center;
    color: var(--vima-gold);
    font-size: 1.2rem;
    margin-bottom: 35px;
}

.vima-value-card h3 {
    color: var(--vima-text);
    font-size: 1.35rem;
    margin-bottom: 14px;
}

.vima-value-card p {
    color: #7f8ea2;
    font-size: .88rem;
    line-height: 2;
}

/* =========================================================
   LETTER
========================================================= */

.vima-letter {
    padding: 150px 0;
    position: relative;
    background:
        radial-gradient(circle at center, rgba(214,183,143,.08), transparent 35%),
        #050b15;
}

.vima-letter-frame {
    max-width: 880px;
    margin: auto;
    padding: 75px 80px;
    text-align: center;
    direction: rtl;
    border: 1px solid rgba(214,183,143,.18);
    position: relative;
    background: rgba(3,8,18,.55);
}

.vima-letter-frame::before,
.vima-letter-frame::after {
    content: "";
    position: absolute;
    width: 55px;
    height: 55px;
    border-color: rgba(214,183,143,.4);
}

.vima-letter-frame::before {
    right: -1px;
    top: -1px;
    border-right: 1px solid;
    border-top: 1px solid;
}

.vima-letter-frame::after {
    left: -1px;
    bottom: -1px;
    border-left: 1px solid;
    border-bottom: 1px solid;
}

.vima-letter-mark {
    width: 74px;
    height: 74px;
    margin: 0 auto 25px;
    border: 1px solid rgba(214,183,143,.35);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.vima-letter-mark span {
    font-family: var(--font-en-serif);
    color: var(--vima-gold-light);
    font-size: 2rem;
}

.vima-letter-frame h2 {
    margin: 18px 0;
    color: var(--vima-text);
    font-size: clamp(2.1rem, 4vw, 3.8rem);
    font-weight: 300;
    line-height: 1.4;
}

.vima-letter-frame h2 strong {
    color: var(--vima-gold-light);
    font-weight: 800;
}

.vima-letter-copy {
    max-width: 690px;
    margin: 35px auto 0;
}

.vima-letter-copy p {
    margin-bottom: 22px;
    color: #8997aa;
    font-size: .98rem;
    line-height: 2.2;
}

.vima-letter-copy .vima-letter-final {
    color: #b5c0cd;
}

.vima-letter-final strong {
    color: var(--vima-gold-light);
}

.vima-letter-signature {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(214,183,143,.1);
}

.vima-letter-signature span {
    display: block;
    color: var(--vima-gold-light);
    font-family: var(--font-en-serif);
    font-size: 1.9rem;
    letter-spacing: 5px;
}

.vima-letter-signature small {
    color: #647287;
    font-family: var(--font-en-serif);
    font-size: .58rem;
    letter-spacing: 2px;
}

/* =========================================================
   FINAL CTA
========================================================= */

.vima-final-cta {
    padding: 110px 0 140px;
    background: #020611;
}

.vima-final-cta-inner {
    padding: 80px 30px;
    text-align: center;
    direction: rtl;
    border-top: 1px solid rgba(214,183,143,.12);
    border-bottom: 1px solid rgba(214,183,143,.12);
}

.vima-final-cta h2 {
    margin: 15px 0;
    color: var(--vima-text);
    font-size: clamp(2.1rem, 4vw, 3.6rem);
    font-weight: 300;
}

.vima-final-cta h2 strong {
    color: var(--vima-gold-light);
    font-weight: 800;
}

.vima-final-cta p {
    color: #7d8ca0;
    margin: 0 auto 30px;
    line-height: 2;
}

.vima-final-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.vima-story-text-link {
    color: #7e8da1;
    padding: 15px;
    text-decoration: none;
    transition: .3s ease;
}

.vima-story-text-link:hover {
    color: var(--vima-gold-light);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .vima-story-hero-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .vima-story-hero-copy {
        max-width: 720px;
        margin-inline: auto;
        text-align: center;
    }

    .vima-story-hero-copy p {
        margin-inline: auto;
    }

    .vima-hero-actions {
        justify-content: center;
    }

    .vima-story-hero-visual {
        min-height: 480px;
    }

    .vima-hero-frame {
        height: 500px;
    }

    .vima-universe-intro {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .vima-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .vima-container {
        width: min(100% - 30px, 680px);
    }

    .vima-story-hero {
        min-height: auto;
        padding: 125px 20px 90px;
    }

    .vima-story-hero::before {
        inset: 10px;
    }

    .vima-story-hero-copy h1 {
        font-size: clamp(2.4rem, 11vw, 4rem);
    }

    .vima-story-hero-visual {
        min-height: 390px;
    }

    .vima-hero-frame {
        height: 390px;
    }

    .vima-hero-stamp {
        width: 86px;
        height: 86px;
    }

    .vima-hero-stamp span {
        font-size: 1.5rem;
    }

    .vima-manifesto,
    .vima-timeline-section,
    .vima-brands,
    .vima-universe,
    .vima-values,
    .vima-letter {
        padding: 100px 0;
    }

    .vima-manifesto-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .vima-manifesto-number {
        font-size: 4rem;
    }

    .vima-storyline-track {
        left: 24px;
        transform: none;
    }

    .vima-story-step,
    .vima-story-step:nth-child(even),
    .vima-story-step:nth-child(odd) {
        min-height: auto;
        grid-template-columns: 48px 1fr;
        gap: 20px;
        align-items: start;
        direction: ltr;
    }

    .vima-story-step + .vima-story-step {
        margin-top: 65px;
    }

    .vima-step-marker {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 48px;
        height: 48px;
    }

    .vima-step-copy,
    .vima-story-step:nth-child(even) .vima-step-copy,
    .vima-story-step:nth-child(odd) .vima-step-copy {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: right;
        direction: rtl;
    }

    .vima-step-visual,
    .vima-story-step:nth-child(even) .vima-step-visual,
    .vima-story-step:nth-child(odd) .vima-step-visual {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin-top: 20px;
    }

    .vima-step-card,
    .vima-future-card {
        min-height: 220px;
    }

    .vima-step-image {
        height: 240px;
    }

    .vima-brand-architecture {
        grid-template-columns: 1fr;
    }

    .vima-brand-panel {
        min-height: 620px;
    }

    .vima-universe-map {
        height: 570px;
        margin-top: 50px;
    }

    .vima-universe-node {
        width: 145px;
    }

    .vima-node-1 { left: 3%; }
    .vima-node-2 { right: 3%; }
    .vima-node-3 { left: 3%; }
    .vima-node-4 { right: 3%; }
    .vima-node-5 { bottom: 2%; }
}

@media (max-width: 560px) {
    .vima-story-hero {
        padding-inline: 15px;
    }

    .vima-story-hero-copy p {
        font-size: .88rem;
    }

    .vima-hero-actions,
    .vima-final-actions {
        flex-direction: column;
        width: 100%;
    }

    .vima-story-btn {
        width: 100%;
    }

    .vima-hero-frame {
        height: 320px;
    }

    .vima-hero-image-main {
        width: 84%;
        height: 82%;
        left: 4%;
        top: 9%;
    }

    .vima-hero-image-small--top {
        width: 31%;
        height: 31%;
    }

    .vima-hero-image-small {
        width: 42%;
        height: 42%;
    }

    .vima-manifesto-sign {
        flex-direction: column;
        gap: 5px;
    }

    .vima-section-heading {
        margin-bottom: 55px;
    }

    .vima-brand-panel-image {
        height: 300px;
    }

    .vima-brand-panel-content {
        padding: 0 24px 35px;
    }

    .vima-values-grid {
        grid-template-columns: 1fr;
    }

    .vima-universe-map {
        height: 620px;
    }

    .vima-universe-center {
        width: 145px;
        height: 145px;
    }

    .vima-universe-center span {
        font-size: 2.4rem;
    }

    .vima-universe-node {
        width: 125px;
        min-height: 90px;
        padding: 12px;
    }

    .vima-universe-node::before {
        display: none;
    }

    .vima-node-1 { top: 5%; left: 3%; }
    .vima-node-2 { top: 5%; right: 3%; }
    .vima-node-3 { bottom: 12%; left: 3%; }
    .vima-node-4 { bottom: 12%; right: 3%; }
    .vima-node-5 { bottom: 3%; }

    .vima-letter-frame {
        padding: 50px 22px;
    }

    .vima-letter-frame::before,
    .vima-letter-frame::after {
        width: 35px;
        height: 35px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vima-reveal,
    .vima-story-btn,
    .vima-brand-panel,
    .vima-brand-panel-image img,
    .vima-step-image img,
    .vima-value-card,
    .vima-inline-link,
    .vima-brand-link {
        transition: none !important;
    }
}

/* =========================================================
   VIMA STORY — REFINEMENTS / TYPOGRAPHY / HERO BRANDS
   Requested visual adjustments
========================================================= */

/* Smaller, calmer typography across the VIMA story page. */
.vima-story-page .vima-story-hero-copy h1 {
    font-size: clamp(2.15rem, 4.1vw, 4.15rem);
    line-height: 1.22;
    letter-spacing: -.6px;
}

.vima-story-page .vima-story-hero-copy p {
    max-width: 520px;
    margin-top: 21px;
    font-size: .90rem;
    line-height: 2;
}

.vima-story-page .vima-section-heading h2 {
    font-size: clamp(1.75rem, 3.15vw, 3rem);
    line-height: 1.38;
}

.vima-story-page .vima-section-heading p {
    font-size: .86rem;
}

.vima-story-page .vima-manifesto-content h2,
.vima-story-page .vima-letter-frame h2 {
    font-size: clamp(1.85rem, 3.3vw, 3.15rem);
    line-height: 1.42;
}

.vima-story-page .vima-story-step .vima-step-copy h3 {
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.vima-story-page .vima-value-card h3 {
    font-size: 1.15rem;
}

.vima-story-page .vima-final-cta h2 {
    font-size: clamp(1.8rem, 3.15vw, 2.9rem);
    line-height: 1.42;
}

.vima-story-page .vima-final-cta p {
    max-width: 720px;
    font-size: .88rem;
}

/* Two elegant brand seals around the hero image. */
.vima-hero-brand-circle {
    position: absolute;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    z-index: 5;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.08), transparent 42%),
        rgba(2, 6, 17, .84);
    border: 1px solid rgba(214,183,143,.58);
    box-shadow:
        0 18px 45px rgba(0,0,0,.38),
        inset 0 0 0 6px rgba(214,183,143,.035);
    backdrop-filter: blur(10px);
}

.vima-hero-brand-circle::before,
.vima-hero-brand-circle::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.vima-hero-brand-circle::before {
    inset: 7px;
    border: 1px solid rgba(214,183,143,.17);
}

.vima-hero-brand-circle::after {
    width: 5px;
    height: 5px;
    background: var(--vima-gold-light);
    box-shadow: 0 0 12px rgba(214,183,143,.75);
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.vima-hero-brand-circle span {
    position: relative;
    z-index: 2;
    color: var(--vima-gold-light);
    font-family: var(--font-en-serif);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
}

.vima-hero-brand-circle small {
    position: relative;
    z-index: 2;
    margin-top: 9px;
    color: #77869a;
    font-family: var(--font-en-serif);
    font-size: .42rem;
    letter-spacing: 1.5px;
    line-height: 1.25;
    white-space: nowrap;
}

.vima-hero-brand-circle--maje {
    left: -1%;
    bottom: 9%;
}

.vima-hero-brand-circle--jilong {
    right: -3%;
    top: 10%;
}

/* Fine decorative connector lines from each seal toward the hero composition. */
.vima-hero-brand-circle--maje + .vima-hero-brand-circle--jilong {
    /* Keeps both circles independent while allowing the pseudo-elements above to stay clean. */
}

.vima-hero-brand-circle--maje::after {
    top: 50%;
    left: auto;
    right: -74px;
    width: 74px;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(214,183,143,.55), transparent);
    box-shadow: none;
    transform: translateY(-50%);
}

.vima-hero-brand-circle--jilong::after {
    top: 50%;
    left: -74px;
    width: 74px;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(214,183,143,.55));
    box-shadow: none;
    transform: translateY(-50%);
}

/* The old discovery strip is intentionally removed. */
.vima-story-page .vima-hero-bottom {
    display: none !important;
}

/* Cooperation CTA gets a slightly more editorial treatment. */
.vima-final-cta-inner {
    max-width: 1080px;
    margin-inline: auto;
}

.vima-final-cta-inner .vima-kicker {
    font-size: .62rem;
    letter-spacing: 2.6px;
}

.vima-final-cta .vima-story-btn {
    min-height: 49px;
    padding: 10px 20px;
    font-size: .76rem;
}

.vima-final-cta .vima-story-text-link {
    font-size: .76rem;
}

@media (max-width: 900px) {
    .vima-hero-brand-circle {
        width: 102px;
        height: 102px;
    }

    .vima-hero-brand-circle span {
        font-size: .98rem;
    }

    .vima-hero-brand-circle small {
        font-size: .36rem;
    }

    .vima-hero-brand-circle--maje {
        left: 0;
        bottom: 5%;
    }

    .vima-hero-brand-circle--jilong {
        right: 0;
        top: 7%;
    }

    .vima-hero-brand-circle--maje::after {
        right: -42px;
        width: 42px;
    }

    .vima-hero-brand-circle--jilong::after {
        left: -42px;
        width: 42px;
    }
}

@media (max-width: 560px) {
    .vima-story-page .vima-story-hero-copy h1 {
        font-size: 2.05rem;
    }

    .vima-story-page .vima-section-heading h2 {
        font-size: 1.75rem;
    }

    .vima-hero-brand-circle {
        width: 82px;
        height: 82px;
        padding: 10px;
    }

    .vima-hero-brand-circle span {
        font-size: .78rem;
        letter-spacing: 1.2px;
    }

    .vima-hero-brand-circle small {
        display: none;
    }

    .vima-hero-brand-circle--maje {
        left: -1%;
        bottom: 4%;
    }

    .vima-hero-brand-circle--jilong {
        right: -1%;
        top: 5%;
    }

    .vima-hero-brand-circle--maje::after {
        right: -25px;
        width: 25px;
    }

    .vima-hero-brand-circle--jilong::after {
        left: -25px;
        width: 25px;
    }

    .vima-story-page .vima-final-cta h2 {
        font-size: 1.8rem;
    }
}

/* =========================================================
   VIMA CONTACT / CONSULTATION PAGE
   Scoped with .vima-contact-page so it can live beside MAJÉ/JILONG.
   ========================================================= */
.vima-contact-page{--contact-card:rgba(255,255,255,.035);--contact-border:rgba(231,205,173,.14);background:radial-gradient(circle at 12% 8%,rgba(214,183,143,.08),transparent 28%),radial-gradient(circle at 88% 22%,rgba(74,105,146,.08),transparent 30%),var(--navy-950);color:var(--cream);overflow:hidden}
.vima-contact-page *{box-sizing:border-box}
.vima-contact-page a{color:inherit;text-decoration:none}
.vima-contact-container{width:min(1180px,90%);margin:0 auto}
.vima-contact-hero{position:relative;min-height:76vh;padding:130px 0 90px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.vima-contact-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,4,16,.98) 0%,rgba(0,4,16,.78) 48%,rgba(0,4,16,.35) 100%);z-index:1}
.vima-contact-hero-art{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(0,4,16,.96),rgba(0,4,16,.56),rgba(0,4,16,.15)),url('../img/jilong-collaboration.png');background-size:cover;background-position:center;filter:saturate(.65);opacity:.62;transform:scale(1.03)}
.vima-contact-hero::after{content:"";position:absolute;inset:18px;border:1px solid rgba(231,205,173,.12);pointer-events:none;z-index:2}
.vima-contact-hero-content{position:relative;z-index:3;max-width:760px;direction:rtl;text-align:right}
.vima-contact-kicker,.vima-contact-section-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--gold-soft);font:italic 500 .78rem/1 var(--font-en-serif);letter-spacing:3.5px;text-transform:uppercase}
.vima-contact-kicker::before,.vima-contact-section-kicker::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold-bright),transparent)}
.vima-contact-hero h1{margin:22px 0 20px;font-family:var(--font-fa);font-size:clamp(2.6rem,5.2vw,5rem);font-weight:400;line-height:1.22;letter-spacing:-1px}
.vima-contact-hero h1 strong{display:block;color:var(--gold-champagne);font-weight:500}
.vima-contact-hero p{max-width:650px;color:#aeb9c9;font-size:1rem;line-height:2.15;margin:0 0 30px}
.vima-contact-hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
.vima-contact-btn{min-height:48px;padding:0 22px;border:1px solid var(--contact-border);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-fa);font-size:.82rem;transition:.3s ease;cursor:pointer}
.vima-contact-btn--gold{background:linear-gradient(135deg,#d9bc96,#b89569);color:#101522!important;border-color:transparent;box-shadow:0 12px 35px rgba(214,183,143,.13)}
.vima-contact-btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(214,183,143,.2)}
.vima-contact-btn--ghost{background:rgba(255,255,255,.025);color:var(--cream)}
.vima-contact-btn--ghost:hover{background:rgba(231,205,173,.07);border-color:rgba(231,205,173,.35)}
.vima-contact-quick{position:relative;z-index:4;margin-top:-55px;padding-bottom:80px}
.vima-contact-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.vima-contact-quick-card{min-height:150px;padding:25px 22px;background:rgba(8,14,27,.9);border:1px solid var(--contact-border);backdrop-filter:blur(14px);direction:rtl;text-align:right;transition:.3s ease;position:relative;overflow:hidden}
.vima-contact-quick-card::before{content:"";position:absolute;inset:auto -30px -45px auto;width:110px;height:110px;border:1px solid rgba(231,205,173,.12);border-radius:50%}
.vima-contact-quick-card:hover{transform:translateY(-5px);border-color:rgba(231,205,173,.32);background:rgba(12,19,34,.96)}
.vima-contact-quick-icon{width:38px;height:38px;border:1px solid rgba(231,205,173,.25);border-radius:50%;display:grid;place-items:center;color:var(--gold-soft);margin-bottom:17px}
.vima-contact-quick-icon svg{width:17px;height:17px}
.vima-contact-quick-card strong{display:block;font-size:.86rem;font-weight:500;margin-bottom:6px;color:#eee7dc}
.vima-contact-quick-card span{display:block;color:#77869a;font-size:.68rem;line-height:1.9}
.vima-contact-quick-card b{display:block;color:var(--gold-champagne);font:500 .8rem/1.7 var(--font-en-serif);direction:ltr;text-align:right;margin-top:7px}
.vima-contact-section{padding:105px 0}
.vima-contact-section--dark{background:linear-gradient(180deg,#050a15,#080e1b)}
.vima-contact-section-heading{text-align:center;max-width:700px;margin:0 auto 52px;direction:rtl}
.vima-contact-section-heading h2{font-size:clamp(1.9rem,3.4vw,3.05rem);font-weight:400;line-height:1.35;margin:16px 0 14px}
.vima-contact-section-heading h2 strong{color:var(--gold-champagne);font-weight:500}
.vima-contact-section-heading p{color:#8290a3;font-size:.86rem;line-height:2.1}
.vima-contact-rule{width:90px;height:1px;margin:0 auto 18px;background:linear-gradient(90deg,transparent,var(--gold-bright),transparent)}
.vima-contact-main-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:55px;align-items:start;direction:ltr}
.vima-contact-form-card,.vima-contact-info-card{background:var(--contact-card);border:1px solid var(--contact-border);border-radius:24px;padding:34px;direction:rtl}
.vima-contact-form-card{box-shadow:0 30px 80px rgba(0,0,0,.16)}
.vima-contact-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:27px}
.vima-contact-form-head h3{font-size:1.25rem;font-weight:500;margin:0 0 7px}
.vima-contact-form-head p{font-size:.72rem;color:#78869a;line-height:1.9;margin:0}
.vima-contact-form-badge{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(231,205,173,.16);border-radius:999px;color:var(--gold-soft);font:500 .62rem/1 var(--font-en-serif);letter-spacing:1.4px}
.vima-contact-form{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.vima-contact-field{display:flex;flex-direction:column;gap:8px}
.vima-contact-field--full{grid-column:1/-1}
.vima-contact-field label{font-size:.72rem;color:#bdc7d4;font-weight:400}
.vima-contact-field label span{color:var(--gold-soft);margin-right:3px}
.vima-contact-field input,.vima-contact-field select,.vima-contact-field textarea{width:100%;border:1px solid rgba(255,255,255,.09);background:rgba(0,4,16,.48);color:var(--cream);border-radius:12px;outline:0;padding:13px 14px;font-family:var(--font-fa);font-size:.76rem;transition:border-color .25s,box-shadow .25s,background .25s}
.vima-contact-field input,.vima-contact-field select{height:47px}
.vima-contact-field textarea{min-height:145px;resize:vertical;line-height:2}
.vima-contact-field input::placeholder,.vima-contact-field textarea::placeholder{color:#566477}
.vima-contact-field select{appearance:auto}
.vima-contact-field input:focus,.vima-contact-field select:focus,.vima-contact-field textarea:focus{border-color:rgba(231,205,173,.5);box-shadow:0 0 0 3px rgba(231,205,173,.07);background:rgba(0,4,16,.68)}
.vima-contact-field.is-invalid input,.vima-contact-field.is-invalid select,.vima-contact-field.is-invalid textarea{border-color:#b97878}
.vima-contact-error{display:none;color:#e6aaaa;font-size:.64rem;line-height:1.6}
.vima-contact-field.is-invalid .vima-contact-error{display:block}
.vima-contact-form-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:4px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}
.vima-contact-consent{display:flex;align-items:flex-start;gap:9px;color:#69788c;font-size:.62rem;line-height:1.8;cursor:pointer;max-width:500px}
.vima-contact-consent input{margin-top:4px;accent-color:#d6b78f}
.vima-contact-submit{border:0;min-width:180px}
.vima-contact-status{grid-column:1/-1;display:none;padding:13px 15px;border-radius:12px;font-size:.7rem;line-height:1.8;background:rgba(117,166,133,.08);border:1px solid rgba(117,166,133,.2);color:#b7d5bd}
.vima-contact-status.is-visible{display:block}
.vima-contact-info-stack{display:grid;gap:12px}
.vima-contact-info-item{padding:20px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:rgba(255,255,255,.018);direction:rtl;text-align:right}
.vima-contact-info-item-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.vima-contact-info-item-top span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(231,205,173,.18);color:var(--gold-soft)}
.vima-contact-info-item-top svg{width:15px;height:15px}
.vima-contact-info-item strong{font-size:.78rem;font-weight:500}
.vima-contact-info-item p,.vima-contact-info-item a{font-size:.68rem;line-height:1.9;color:#78869a}
.vima-contact-info-item a:hover{color:var(--gold-champagne)}
.vima-contact-info-note{padding:18px 20px;border-right:2px solid var(--gold-soft);background:linear-gradient(90deg,rgba(231,205,173,.035),transparent);color:#8a97a8;font-size:.67rem;line-height:2;text-align:right;direction:rtl}
.vima-contact-social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.vima-contact-social{min-height:130px;padding:23px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.018);border-radius:18px;display:flex;flex-direction:column;justify-content:space-between;direction:rtl;text-align:right;transition:.3s ease}
.vima-contact-social:hover{transform:translateY(-4px);border-color:rgba(231,205,173,.3);background:rgba(231,205,173,.035)}
.vima-contact-social-icon{color:var(--gold-soft);font:500 1.05rem/1 var(--font-en-serif);letter-spacing:1px}
.vima-contact-social strong{font-size:.78rem;font-weight:500}
.vima-contact-social small{font-size:.62rem;color:#65748a}
.vima-contact-social .arrow{color:#718095;align-self:flex-end;transition:.3s}
.vima-contact-social:hover .arrow{color:var(--gold-champagne);transform:translateX(-4px)}
.vima-contact-faq-grid{max-width:900px;margin:0 auto;display:grid;gap:9px}
.vima-contact-faq{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.018);border-radius:15px;overflow:hidden;direction:rtl}
.vima-contact-faq button{width:100%;min-height:62px;padding:14px 20px;background:transparent;color:var(--cream);border:0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--font-fa);font-size:.78rem;text-align:right;cursor:pointer}
.vima-contact-faq button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:-2px}
.vima-contact-faq-icon{color:var(--gold-soft);font-size:1.1rem;transition:transform .3s}
.vima-contact-faq[open] .vima-contact-faq-icon{transform:rotate(45deg)}
.vima-contact-faq-answer{padding:0 20px 18px;color:#78869a;font-size:.7rem;line-height:2;max-width:800px}
.vima-contact-final{position:relative;padding:100px 0 120px;text-align:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.05)}
.vima-contact-final::before{content:"VIMA";position:absolute;inset:0;display:grid;place-items:center;color:rgba(231,205,173,.025);font:600 clamp(8rem,24vw,20rem)/1 var(--font-en-serif);pointer-events:none}
.vima-contact-final-inner{position:relative;z-index:1;max-width:700px;margin:auto;direction:rtl}
.vima-contact-final h2{font-size:clamp(2rem,4vw,3.4rem);font-weight:400;margin:15px 0}
.vima-contact-final p{color:#7d8b9f;font-size:.82rem;line-height:2.1;margin-bottom:28px}
.vima-contact-final-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.vima-contact-final-note{margin-top:20px;color:#536174;font-size:.61rem}
.vima-contact-page .vima-reveal-contact{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.vima-contact-page .vima-reveal-contact.is-visible{opacity:1;transform:none}
.vima-contact-skip{position:fixed;top:10px;right:10px;z-index:9999;transform:translateY(-150%);padding:10px 15px;border-radius:8px;background:#fff;color:#000;font-family:var(--font-fa);font-size:.72rem}
.vima-contact-skip:focus{transform:none}
.vima-contact-page .vima-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:1050px){.vima-contact-quick-grid{grid-template-columns:repeat(2,1fr)}.vima-contact-main-grid{grid-template-columns:1fr}.vima-contact-info-stack{grid-template-columns:repeat(2,1fr)}.vima-contact-info-note{grid-column:1/-1}.vima-contact-social-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.vima-contact-hero{min-height:650px;padding:115px 0 70px}.vima-contact-hero::after{inset:10px}.vima-contact-hero-content{max-width:100%}.vima-contact-hero p{font-size:.82rem}.vima-contact-hero-actions{justify-content:flex-start}.vima-contact-quick{margin-top:-30px;padding-bottom:55px}.vima-contact-quick-grid{grid-template-columns:1fr 1fr}.vima-contact-section{padding:75px 0}.vima-contact-form-card,.vima-contact-info-card{padding:22px;border-radius:18px}.vima-contact-form{grid-template-columns:1fr}.vima-contact-field--full,.vima-contact-form-footer,.vima-contact-status{grid-column:1}.vima-contact-form-footer{align-items:stretch;flex-direction:column}.vima-contact-submit{width:100%}.vima-contact-info-stack{grid-template-columns:1fr}.vima-contact-social-grid{grid-template-columns:1fr 1fr}.vima-contact-section-heading{margin-bottom:34px}}
@media(max-width:430px){.vima-contact-container{width:92%}.vima-contact-hero h1{font-size:2.25rem}.vima-contact-hero-actions{display:grid;grid-template-columns:1fr}.vima-contact-btn{width:100%}.vima-contact-quick-grid{grid-template-columns:1fr}.vima-contact-social-grid{grid-template-columns:1fr}.vima-contact-final{padding:80px 0 95px}}
@media(prefers-reduced-motion:reduce){.vima-contact-page *, .vima-contact-page *::before,.vima-contact-page *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}.vima-contact-page .vima-reveal-contact{opacity:1;transform:none}}