/* =========================================================
       01) Variables / Base
    ========================================================= */
    :root {
      --bg: #050607;
      --text: #f5eee4;
      --muted: #a99f91;
      --gold: #c99a53;
      --gold2: #f2cb82;
      --btn-brass: #b8793c;
      --btn-brass-hover: #c98f4a;
      --btn-brass-active: #8e5f31;
      --btn-ink: #130e09;
      --line: rgba(201, 154, 83, .22);
      --shadow: 0 28px 90px rgba(0, 0, 0, .46);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: 'IRANYekan', 'IRYekan', Tahoma, Arial, sans-serif !important;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      text-align: right;
    }

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

    img {
      display: block;
      max-width: 100%;
    }

    button, input, select, textarea { font-family: inherit !important; }

    /* =========================================================
       02) Buttons
    ========================================================= */
    .btn-gold,
    .btn-ghost {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 18px;
      border-radius: 10px;
      font-weight: 850;
      white-space: nowrap;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
    }

    .btn-gold {
      color: var(--btn-ink);
      border-color: rgba(242, 203, 130, .26);
      background: var(--btn-brass);
      box-shadow: 0 12px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .btn-ghost {
      color: #f0d4aa;
      border-color: rgba(184, 121, 60, .45);
      background: rgba(184, 121, 60, .08);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .026);
    }

    .btn-gold:hover,
    .btn-ghost:hover {
      transform: translateY(-1px);
    }

    .btn-gold:hover {
      color: var(--btn-ink);
      border-color: rgba(242, 203, 130, .42);
      background: var(--btn-brass-hover);
      box-shadow: 0 16px 34px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .24);
    }

    .btn-ghost:hover {
      color: #ffe2b2;
      border-color: rgba(201, 143, 74, .68);
      background: rgba(184, 121, 60, .16);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .20), inset 0 0 0 1px rgba(242, 203, 130, .06);
    }

    .btn-gold:active,
    .btn-ghost:active {
      transform: translateY(1px);
    }

    .btn-gold:active {
      background: var(--btn-brass-active);
      box-shadow: inset 0 2px 8px rgba(0, 0, 0, .22);
    }

    .btn-ghost:active {
      background: rgba(142, 95, 49, .22);
      border-color: rgba(201, 143, 74, .75);
    }

    .btn-gold:focus-visible,
    .btn-ghost:focus-visible {
      outline: 2px solid rgba(242, 203, 130, .72);
      outline-offset: 3px;
    }

    .btn-gold:disabled,
    .btn-ghost:disabled,
    .btn-gold.disabled,
    .btn-ghost.disabled,
    .btn-gold[aria-disabled="true"],
    .btn-ghost[aria-disabled="true"] {
      opacity: .48;
      pointer-events: none;
      transform: none;
      box-shadow: none;
    }

    .header-actions {
      gap: 10px;
    }

    .header-contact {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 13px;
      direction: ltr;
      color: #f6e2bd;
      border: 1px solid rgba(201, 154, 83, .28);
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      font-size: .9rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .header-contact span {
      color: var(--muted);
      direction: rtl;
      font-size: .74rem;
      font-weight: 700;
    }

    .header-icon-link {
      width: 42px;
      height: 42px;
      display: inline-grid;
      place-items: center;
      color: var(--gold2);
      border: 1px solid rgba(201, 154, 83, .3);
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }

    .header-icon-link:hover {
      color: #fff;
      transform: translateY(-2px);
      border-color: rgba(242, 203, 130, .72);
      background: rgba(201, 154, 83, .12);
      box-shadow: 0 16px 38px rgba(201, 154, 83, .13);
    }

    .header-icon-link svg {
      width: 19px;
      height: 19px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .header-icon-link.instagram svg {
      stroke-width: 1.9;
    }

    @media (max-width: 1199.98px) {
      .header-actions {
        flex-wrap: wrap;
      }
    }

    /* =========================================================
       03) Header / Navbar
    ========================================================= */
    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1030;
      background: linear-gradient(180deg, rgba(5, 6, 7, .34), rgba(5, 6, 7, .08));
      border-bottom: 1px solid rgba(201, 154, 83, .08);
      backdrop-filter: blur(10px);
      transition:
        background .42s ease,
        border-color .42s ease,
        box-shadow .42s ease,
        transform .32s ease,
        backdrop-filter .42s ease;
    }

    .site-header.is-scrolled {
      background: linear-gradient(180deg, rgba(5, 6, 7, .96), rgba(10, 13, 15, .82));
      border-bottom-color: rgba(201, 154, 83, .24);
      box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
      backdrop-filter: blur(20px);
    }

    .site-header.is-hidden { transform: translateY(-105%); }

    .site-header.theme-hero { background: linear-gradient(180deg, rgba(5, 6, 7, .34), rgba(5, 6, 7, .08)); }
    .site-header.theme-about { background: linear-gradient(180deg, rgba(12, 15, 16, .94), rgba(16, 20, 22, .74)); }
    .site-header.theme-products { background: linear-gradient(180deg, rgba(12, 15, 18, .96), rgba(10, 13, 15, .8)); }
    .site-header.theme-catalog { background: linear-gradient(180deg, rgba(26, 21, 15, .95), rgba(15, 13, 10, .8)); }
    .site-header.theme-gallery { background: linear-gradient(180deg, rgba(12, 14, 17, .96), rgba(18, 22, 25, .78)); }
    .site-header.theme-digital { background: linear-gradient(180deg, rgba(8, 13, 16, .96), rgba(10, 17, 20, .78)); }
    .site-header.theme-footer { background: linear-gradient(180deg, rgba(5, 6, 7, .98), rgba(5, 6, 7, .88)); }

    .navbar {
      min-height: 82px;
      transition: min-height .32s ease, padding .32s ease;
    }

    .site-header.is-scrolled .navbar { min-height: 68px; }

    .navbar-brand {
      gap: 12px;
      margin: 0;
      color: var(--text) !important;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: #111;
      font-weight: 950;
      background: linear-gradient(135deg, var(--gold2), var(--gold));
      box-shadow: 0 0 34px rgba(201, 154, 83, .25);
      transition: .32s ease;
    }

    .brand-title {
      font-size: 1rem;
      font-weight: 950;
      line-height: 1.4;
      transition: .32s ease;
    }

    .brand-sub {
      display: block;
      direction: ltr;
      text-align: right;
      color: var(--muted);
      font-size: .68rem;
      letter-spacing: .7px;
      transition: .32s ease;
    }

    .site-header.is-scrolled .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 13px;
    }

    .site-header.is-scrolled .brand-title { font-size: .92rem; }

    .site-header.is-scrolled .brand-sub {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
    }

    .navbar .nav-link {
      color: #d7cfbf !important;
      border-radius: 999px;
      padding: .68rem .82rem !important;
      font-size: .9rem;
      transition: .22s ease;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
      color: var(--gold2) !important;
      background: rgba(201, 154, 83, .12);
    }

    .site-header.is-scrolled .navbar .nav-link {
      padding: .55rem .74rem !important;
      font-size: .86rem;
    }

    .navbar-toggler {
      border: 1px solid rgba(201, 154, 83, .34);
      box-shadow: none !important;
    }

    .navbar-toggler-icon { filter: invert(1) sepia(.75); }

    /* =========================================================
       04) Dropdown / Mega Menu / Search Modal
    ========================================================= */
    .dropdown-menu {
      padding: 0;
      overflow: hidden;
      color: var(--text);
      border: 1px solid rgba(201, 154, 83, .25);
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(9, 12, 14, .98), rgba(19, 24, 28, .97));
      box-shadow: 0 34px 92px rgba(0, 0, 0, .56);
    }

    .dropdown-item {
      padding: .85rem 1rem;
      color: #ddd4c7;
      text-align: right;
      font-size: .9rem;
    }

    .dropdown-item:hover {
      color: var(--gold2);
      background: rgba(201, 154, 83, .1);
    }

    .dropdown-item small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: .72rem;
      line-height: 1.65;
    }

    .flag {
      display: inline-block;
      width: 30px;
      height: 21px;
      margin-left: 8px;
      overflow: hidden;
      vertical-align: middle;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 5px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
    }

    .flag-ir { background: linear-gradient(#239f40 0 33.33%, #fff 33.33% 66.66%, #da0000 66.66%); }
    .flag-gb { background: linear-gradient(135deg, #012169 0 42%, #fff 42% 48%, #c8102e 48% 54%, #fff 54% 60%, #012169 60%); }
    .flag-ru { background: linear-gradient(#fff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66%); }

    .flag-sa {
      position: relative;
      background: #006c35;
    }

    .flag-sa::after {
      content: "";
      position: absolute;
      top: 10px;
      right: 6px;
      left: 6px;
      height: 2px;
      background: #fff;
    }

    .mega-menu {
      width: min(1080px, calc(100vw - 32px));
      right: 50% !important;
      left: auto !important;
      margin-top: 18px !important;
      transform: translateX(50%) !important;
    }

    .mega-panel { padding: 22px; }

    .mega-title {
      margin-bottom: 14px;
      color: var(--gold2);
      text-align: right;
      font-size: 1rem;
      font-weight: 950;
    }

    .mega-link {
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      color: #e6ddce;
      border: 1px solid rgba(201, 154, 83, .16);
      border-radius: 16px;
      background: rgba(255, 255, 255, .035);
      transition: .22s ease;
    }

    .mega-link:hover {
      color: var(--gold2);
      border-color: rgba(242, 203, 130, .55);
      background: rgba(201, 154, 83, .09);
      transform: translateY(-2px);
    }

    .mega-link small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: .72rem;
      line-height: 1.6;
    }

    .mega-link i {
      color: var(--gold2);
      font-style: normal;
    }

    .search-modal .modal-content {
      color: var(--text);
      border: 1px solid rgba(201, 154, 83, .28);
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(9, 12, 14, .98), rgba(20, 25, 29, .98));
      box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
    }

    .search-input {
      height: 54px;
      padding: 0 16px;
      color: var(--text);
      text-align: right;
      border: 1px solid rgba(201, 154, 83, .28);
      border-radius: 16px;
      background: rgba(255, 255, 255, .055);
    }

    .search-input:focus {
      outline: 0;
      border-color: rgba(242, 203, 130, .65);
      box-shadow: 0 0 0 4px rgba(201, 154, 83, .1);
    }

    .search-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 4px;
      padding: 8px 13px;
      color: #ddd4c7;
      border: 1px solid rgba(201, 154, 83, .2);
      border-radius: 999px;
      background: rgba(255, 255, 255, .04);
      font-size: .84rem;
      transition: .22s;
    }

    .search-chip:hover {
      color: var(--gold2);
      border-color: rgba(242, 203, 130, .5);
      background: rgba(201, 154, 83, .1);
    }

    /* =========================================================
       05) Tile Size Comparator
    ========================================================= */
    .size-comparator {
      height: 100%;
      padding: 18px;
      border: 1px solid rgba(201, 154, 83, .18);
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
    }

    .compare-title {
      margin-bottom: 14px;
      text-align: right;
    }

    .compare-title strong {
      display: block;
      margin-bottom: 4px;
      color: var(--gold2);
      font-weight: 950;
    }

    .compare-title span {
      display: block;
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.8;
    }

    .compare-stage {
      direction: ltr;
      min-height: 235px;
      display: grid;
      grid-template-columns: 82px .8fr 1.1fr;
      gap: 18px;
      align-items: end;
    }

    .size-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-self: center;
    }

    .size-buttons button {
      height: 34px;
      color: #ead7bb;
      text-align: center;
      border: 1px solid rgba(184, 121, 60, .34);
      border-radius: 10px;
      background: rgba(184, 121, 60, .08);
      font-size: .75rem;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .size-buttons button:hover,
    .size-buttons button.active {
      color: var(--btn-ink);
      border-color: rgba(242, 203, 130, .32);
      background: var(--btn-brass);
      transform: translateX(-2px);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
    }

    .size-buttons button:active {
      transform: translateX(-1px);
      background: var(--btn-brass-active);
    }

    .size-buttons button:focus-visible {
      outline: 2px solid rgba(242, 203, 130, .72);
      outline-offset: 2px;
    }

    .size-buttons button:disabled,
    .size-buttons button[aria-disabled="true"] {
      opacity: .46;
      pointer-events: none;
      transform: none;
      box-shadow: none;
    }

    .human-box,
    .tile-box {
      height: 205px;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      text-align: center;
    }

    .human-photo {
      position: relative;
      width: 76px;
      height: 184px;
      filter: drop-shadow(0 0 22px rgba(255, 255, 255, .08));
    }

    .human-photo img {
      width: 76px;
      height: 184px;
      object-fit: cover;
      object-position: center top;
      opacity: .88;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 999px 999px 16px 16px;
      filter: grayscale(.12) contrast(1.08);
    }

    .human-photo .ruler {
      position: absolute;
      right: -14px;
      bottom: 0;
      width: 1px;
      height: 184px;
      background: rgba(255, 255, 255, .28);
    }

    .human-photo .ruler span {
      position: absolute;
      top: 45%;
      right: -54px;
      color: #ded7cd;
      font-size: .65rem;
      white-space: nowrap;
      direction: rtl;
    }

    .label-mini {
      position: absolute;
      bottom: -20px;
      left: 50%;
      color: #bfb5a7;
      font-size: .65rem;
      white-space: nowrap;
      text-align: center;
      direction: rtl;
      transform: translateX(-50%);
    }

    .tile-sample {
      width: var(--tile-w, 135px);
      height: var(--tile-h, 135px);
      max-width: 100%;
      max-height: 184px;
      border: 1px solid rgba(255, 255, 255, .38);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .02)),
        url('https://images.unsplash.com/photo-1600566753376-12c8ab7fb75b?auto=format&fit=crop&w=500&q=75') center / cover;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        0 24px 54px rgba(0, 0, 0, .34);
      transition: width .34s ease, height .34s ease, background .34s ease;
    }

    .tile-ruler-x,
    .tile-ruler-y {
      position: absolute;
      background: rgba(255, 255, 255, .28);
    }

    .tile-ruler-x {
      bottom: -10px;
      left: 50%;
      width: var(--tile-w, 135px);
      max-width: 100%;
      height: 1px;
      transform: translateX(-50%);
    }

    .tile-ruler-y {
      right: 0;
      bottom: 0;
      width: 1px;
      height: var(--tile-h, 135px);
      max-height: 184px;
    }

    .tile-ruler-x span,
    .tile-ruler-y span {
      position: absolute;
      padding: 2px 6px;
      color: #ded7cd;
      text-align: center;
      white-space: nowrap;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      background: rgba(5, 6, 7, .68);
      font-size: .65rem;
    }

    .tile-ruler-x span {
      top: 7px;
      left: 50%;
      transform: translateX(-50%);
    }

    .tile-ruler-y span {
      top: 50%;
      right: 7px;
      transform: translateY(-50%);
    }

    /* =========================================================
       06) Section Backgrounds / Shared Section Styles
    ========================================================= */
    .section {
      position: relative;
      overflow: hidden;
      padding: 92px 0;
      border-top: 1px solid rgba(201, 154, 83, .12);
      isolation: isolate;
    }

    .section::before,
    .section::after {
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
    }

    .section::before { inset: 0; }

    .section::after {
      inset: -30%;
      opacity: .15;
      background: repeating-radial-gradient(circle at 70% 30%, transparent 0 14px, rgba(201, 154, 83, .16) 15px, transparent 16px);
      transform: translateY(var(--parallax, 0));
    }

    .bg-hero::before {
      background:
        linear-gradient(90deg, rgba(5, 6, 7, .2), rgba(5, 6, 7, .8) 45%, rgba(5, 6, 7, .96) 78%),
        linear-gradient(180deg, rgba(5, 6, 7, .24), rgba(5, 6, 7, .8)),
        url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1800&q=75') center / cover;
    }

    .bg-about::before {
      background:
        radial-gradient(circle at 78% 20%, rgba(201, 154, 83, .12), transparent 25%),
        radial-gradient(circle at 16% 80%, rgba(80, 91, 96, .18), transparent 26%),
        linear-gradient(145deg, #080a0b, #14191d 54%, #070809);
    }

    .bg-products::before {
      background:
        radial-gradient(circle at 18% 20%, rgba(201, 154, 83, .13), transparent 28%),
        linear-gradient(135deg, #090d0f 0%, #15191c 48%, #080a0b 100%);
    }

    .bg-catalog::before {
      background:
        radial-gradient(circle at 18% 18%, rgba(201, 154, 83, .12), transparent 24%),
        linear-gradient(135deg, #0b0e10 0%, #171b1f 54%, #080a0b 100%);
    }

    .bg-gallery::before {
      background:
        radial-gradient(circle at 22% 26%, rgba(201, 154, 83, .12), transparent 27%),
        radial-gradient(circle at 82% 74%, rgba(80, 91, 96, .22), transparent 30%),
        linear-gradient(145deg, #080a0b, #161b1e 50%, #070809);
    }

    .bg-factory::before {
      background:
        linear-gradient(90deg, rgba(8, 10, 11, .25), rgba(8, 10, 11, .45)),
        url('../../moarefi-gallery.png') center / cover;
    }

    .bg-digital::before {
      background:
        radial-gradient(circle at 26% 42%, rgba(64, 81, 88, .24), transparent 30%),
        radial-gradient(circle at 80% 22%, rgba(201, 154, 83, .12), transparent 24%),
        linear-gradient(145deg, #07090a, #11171a 52%, #070809);
    }

    .bg-brands::before {
      background:
        linear-gradient(90deg, rgba(201, 154, 83, .06), transparent 26%, rgba(201, 154, 83, .07) 76%, transparent),
        linear-gradient(180deg, #101315, #07090a);
    }

    .bg-news::before {
      background:
        radial-gradient(circle at 70% 78%, rgba(201, 154, 83, .14), transparent 28%),
        linear-gradient(160deg, #090b0c, #151a1e 55%, #08090a);
    }

    .section-head {
      margin-bottom: 38px;
      text-align: center;
    }

    .section-kicker {
      display: block;
      margin-bottom: 8px;
      color: var(--gold2);
      text-align: center;
      font-weight: 800;
    }

    .section-title {
      margin: 0;
      text-align: center;
      font-size: clamp(1.55rem, 3vw, 2.2rem);
      font-weight: 950;
    }

    .section-desc {
      max-width: 680px;
      margin: 14px auto 0;
      color: var(--muted);
      text-align: center;
      line-height: 1.9;
    }

    /* =========================================================
       07) Hero Video
    ========================================================= */
    .hero-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 92px;
      overflow: hidden;
      background: #050607;
    }

    .hero-video-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .62;
      z-index: 0;
      transform: scale(1.02);
    }

    .hero-video-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(5, 6, 7, .3), rgba(5, 6, 7, .82)),
        radial-gradient(circle at 50% 45%, rgba(201, 154, 83, .16), transparent 34%);
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }

    .hero-title {
      margin: 0;
      color: #fff;
      text-align: center;
      font-size: clamp(3rem, 8vw, 7rem);
      font-weight: 950;
      line-height: 1.18;
      letter-spacing: 0;
      text-shadow: 0 20px 70px rgba(0, 0, 0, .72);
    }

    @media (max-width: 767.98px) {
      .hero-section {
        min-height: 76vh;
        padding-top: 84px;
      }

      .hero-title {
        font-size: clamp(2.4rem, 13vw, 4.2rem);
      }
    }

    /* =========================================================
       08) About Factory
    ========================================================= */
    .about-factory-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(201, 154, 83, .22);
      border-radius: 34px;
      background: linear-gradient(145deg, rgba(17, 22, 25, .88), rgba(8, 10, 11, .92));
      box-shadow: var(--shadow);
    }

    .about-factory-img {
      position: relative;
      height: 100%;
      min-height: 470px;
      overflow: hidden;
      background: #080a0b;
      clip-path: inset(0);
      transform: translateZ(0);
    }

    .about-factory-img img {
      width: 100%;
      height: 100%;
      min-height: 470px;
      object-fit: cover;
      opacity: .86;
      transition: opacity .22s ease;
      backface-visibility: hidden;
      transform: translateZ(0);
    }

    .about-factory-card:hover .about-factory-img img { transform: translateZ(0); }

    .about-factory-img::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(5, 6, 7, .16), rgba(5, 6, 7, .66));
    }

    .about-factory-content {
      position: relative;
      z-index: 2;
      padding: 54px;
      text-align: right;
    }

    .about-factory-content .section-kicker { text-align: right; }

    .about-factory-content h2 {
      margin: 0 0 16px;
      text-align: right;
      font-size: clamp(1.6rem, 3vw, 2.35rem);
      font-weight: 950;
      line-height: 1.55;
    }

    .about-factory-content p {
      max-width: 620px;
      color: #d4cabe;
      text-align: right;
      line-height: 2.05;
    }

    .factory-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 24px 0;
    }

    .factory-stat {
      padding: 16px;
      text-align: center;
      border: 1px solid rgba(201, 154, 83, .18);
      border-radius: 18px;
      background: rgba(255, 255, 255, .04);
    }

    .factory-stat strong {
      display: block;
      color: var(--gold2);
      text-align: center;
      font-size: 1.35rem;
      font-weight: 950;
    }

    .factory-stat span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      text-align: center;
      font-size: .8rem;
    }

    /* =========================================================
       09) Products
    ========================================================= */
    .product-card {
      position: relative;
      display: block;
      height: 100%;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(201, 154, 83, .22);
      border-radius: 22px;
      background: linear-gradient(160deg, rgba(22, 27, 30, .78), rgba(8, 10, 11, .9));
      box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
      transition: .28s ease;
    }

    .product-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 45%);
      transition: .3s ease;
    }

    .product-card:hover {
      border-color: rgba(242, 203, 130, .62);
      box-shadow: 0 30px 75px rgba(0, 0, 0, .38);
      transform: translateY(-8px);
    }

    .product-card:hover::before { opacity: 1; }

    .product-img {
      position: relative;
      height: 210px;
      overflow: hidden;
      background: var(--img) center / cover no-repeat;
    }

    .product-card:hover .dynamic-product-image { transform: scale(1.06); }

    .badge-gold {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      padding: .22rem .55rem;
      color: var(--gold2);
      text-align: center;
      border: 1px solid rgba(201, 154, 83, .55);
      border-radius: 10px;
      background: rgba(0, 0, 0, .55);
      font-size: .72rem;
    }

    .product-body {
      position: relative;
      z-index: 2;
      padding: 1rem;
      text-align: center;
    }

    .product-body h3 {
      margin: 0 0 .55rem;
      text-align: center;
      font-size: .98rem;
      font-weight: 800;
    }

    .product-body p {
      margin: 0;
      color: var(--muted);
      text-align: center;
      font-size: .86rem;
    }

    /* =========================================================
       10) Catalog
    ========================================================= */
    .catalog-showcase {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(201, 154, 83, .24);
      border-radius: 34px;
      background: linear-gradient(145deg, rgba(17, 22, 25, .96), rgba(8, 10, 11, .96));
      box-shadow: var(--shadow);
    }

    .catalog-showcase::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 18%, rgba(242, 203, 130, .18), transparent 25%),
        radial-gradient(circle at 84% 80%, rgba(255, 255, 255, .06), transparent 26%);
    }

    .catalog-copy {
      position: relative;
      z-index: 2;
      padding: 56px;
      text-align: right;
    }

    .catalog-copy .section-kicker { text-align: right; }

    .catalog-copy h3 {
      margin-bottom: 1rem;
      text-align: right;
      font-size: 2.05rem;
      font-weight: 950;
    }

    .catalog-copy p {
      max-width: 560px;
      color: #cfc5b8;
      text-align: right;
      line-height: 2;
    }

    .catalog-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 22px 0 26px;
    }

    .catalog-pills span {
      padding: 9px 14px;
      color: #e7dece;
      border: 1px solid rgba(201, 154, 83, .22);
      border-radius: 999px;
      background: rgba(255, 255, 255, .04);
      font-size: .84rem;
    }

    .catalog-visual {
      position: relative;
      min-height: 470px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 44px;
    }

    .catalog-book {
      position: relative;
      width: min(330px, 88%);
      aspect-ratio: 3 / 4;
      overflow: hidden;
      border: 1px solid rgba(201, 154, 83, .28);
      border-radius: 24px;
      background: #111;
      box-shadow: 0 38px 110px rgba(0, 0, 0, .58);
      transform: rotate(-4deg) translateY(0);
      transition:
        transform .48s cubic-bezier(.2, .8, .2, 1),
        box-shadow .48s ease,
        border-color .48s ease;
    }

    .catalog-showcase:hover .catalog-book {
      border-color: rgba(242, 203, 130, .58);
      box-shadow: 0 54px 130px rgba(0, 0, 0, .72), 0 0 54px rgba(201, 154, 83, .2);
      transform: rotate(-1.5deg) translateY(-16px) scale(1.035);
    }

    .catalog-book::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(242, 203, 130, .26), transparent 44%),
        url('https://images.unsplash.com/photo-1600566752355-35792bedcfea?auto=format&fit=crop&w=900&q=75') center / cover;
      transition: transform .58s ease, opacity .48s ease;
    }

    .catalog-showcase:hover .catalog-book::before {
      opacity: .96;
      transform: scale(1.08);
    }

    .catalog-book::after {
      content: "Naeen Tile Product Catalog";
      position: absolute;
      right: 26px;
      bottom: 28px;
      color: var(--gold2);
      font-family: inherit;
      font-size: 1.05rem;
      letter-spacing: 3px;
      line-height: 1.6;
    }

    .catalog-book .shine {
      position: absolute;
      inset: -45%;
      z-index: 2;
      opacity: 0;
      background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .24) 49%, transparent 56%);
      transform: translateX(60%) rotate(8deg);
      transition: .58s ease;
    }

    .catalog-showcase:hover .catalog-book .shine {
      opacity: 1;
      transform: translateX(-55%) rotate(8deg);
    }

    .catalog-shadow-card {
      position: absolute;
      width: 240px;
      height: 320px;
      border: 1px solid rgba(201, 154, 83, .14);
      border-radius: 24px;
      background: rgba(255, 255, 255, .035);
      filter: blur(.1px);
      transform: rotate(8deg) translate(-30px, 22px);
    }

    /* =========================================================
       11) Gallery / Factory Video
    ========================================================= */
    .media-card {
      position: relative;
      min-height: 250px;
      height: 100%;
      display: block;
      overflow: hidden;
      border: 1px solid rgba(201, 154, 83, .22);
      border-radius: 24px;
      background: #111;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
      transition: .24s ease;
    }

    .media-card:hover {
      border-color: rgba(242, 203, 130, .6);
      transform: translateY(-6px);
    }

    .media-card img {
      width: 100%;
      height: 100%;
      min-height: 250px;
      object-fit: cover;
      opacity: .86;
      transition: .35s ease;
    }

    .media-card:hover img {
      opacity: .98;
      transform: scale(1.05);
    }

    .media-card .overlay {
      position: absolute;
      right: 16px;
      bottom: 16px;
      left: 16px;
      padding: 14px 16px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      background: rgba(5, 6, 7, .64);
      backdrop-filter: blur(12px);
    }

    .media-card .overlay strong,
    .media-card .overlay span {
      display: block;
      text-align: right;
    }

    .media-card .overlay span {
      margin-top: 4px;
      color: #cfc5b8;
      font-size: .8rem;
    }

    .media-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      padding: 7px 12px;
      color: var(--gold2);
      border: 1px solid rgba(201, 154, 83, .35);
      border-radius: 999px;
      background: rgba(0, 0, 0, .54);
      font-size: .75rem;
      font-weight: 800;
    }

    .play-mini {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 66px;
      height: 66px;
      display: grid;
      place-items: center;
      color: var(--gold2);
      border: 2px solid rgba(242, 203, 130, .92);
      border-radius: 50%;
      background: rgba(0, 0, 0, .38);
      font-size: 1.25rem;
      backdrop-filter: blur(6px);
      transform: translate(-50%, -50%);
    }

    .factory-intro-card {
      position: relative;
      min-height: 560px;
      overflow: hidden;
      border: 1px solid rgba(201, 154, 83, .24);
      border-radius: 34px;
     
      box-shadow: var(--shadow);
    }

    .factory-bg-video,
    .factory-intro-card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .76;
      filter: contrast(1.08) saturate(1.08);
    }

    .factory-intro-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(5, 6, 7, .88), rgba(5, 6, 7, .46) 50%, rgba(5, 6, 7, .72)),
        linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55));
    }

    .factory-content {
      position: relative;
      z-index: 1;
      min-height: 560px;
      display: grid;
      align-items: center;
      padding: 54px;
    }

    .factory-content-inner {
      max-width: 610px;
      text-align: right;
    }

    .factory-content h3 {
      margin-bottom: 1rem;
      text-align: right;
      font-size: 2.35rem;
      font-weight: 950;
    }

    .factory-content p {
      max-width: 620px;
      margin-bottom: 1.5rem;
      color: #d7ccbf;
      text-align: right;
      line-height: 2;
    }

    .play-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
    }

    .play-btn {
      width: 78px;
      height: 78px;
      display: grid;
      place-items: center;
      padding: 0;
      color: var(--gold2);
      border: 2px solid rgba(201, 143, 74, .76);
      border-radius: 50%;
      background: rgba(184, 121, 60, .13);
      line-height: 1;
      animation: pulse 2.4s infinite;
      transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
      cursor: pointer;
    }

    .play-btn:hover {
      color: #ffe2b2;
      border-color: rgba(242, 203, 130, .8);
      background: rgba(184, 121, 60, .22);
      transform: scale(1.03);
    }

    .play-btn:active {
      transform: scale(.98);
      background: rgba(142, 95, 49, .28);
    }

    .play-btn:focus-visible {
      outline: 2px solid rgba(242, 203, 130, .72);
      outline-offset: 4px;
    }

    .play-btn span {
      display: block;
      font-size: 1.58rem;
      line-height: 1;
      transform: translateX(-2px);
    }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(201, 154, 83, .28); }
      50% { box-shadow: 0 0 0 18px rgba(201, 154, 83, 0); }
    }

    /* =========================================================
       12) Digital / Brands / News / Footer
    ========================================================= */
    .digital-board {
      position: relative;
      overflow: hidden;
      padding: 26px;
      border: 1px solid rgba(201, 154, 83, .2);
      border-radius: 32px;
      background: linear-gradient(145deg, rgba(17, 22, 25, .8), rgba(8, 10, 11, .86));
      box-shadow: var(--shadow);
    }

    .digital-board::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 20%, rgba(201, 154, 83, .12), transparent 24%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, .05), transparent 26%);
    }

    .digital-feature {
      position: relative;
      z-index: 1;
      min-height: 360px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 30px;
      overflow: hidden;
      border: 1px solid rgba(201, 154, 83, .18);
      border-radius: 26px;
      background:
        linear-gradient(180deg, rgba(5, 6, 7, .2), rgba(5, 6, 7, .82)),
        url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=900&q=75') center / cover;
    }

    .digital-feature h3 {
      text-align: right;
      font-size: 1.55rem;
      font-weight: 950;
    }

    .digital-feature p {
      color: #d5cabd;
      text-align: right;
      line-height: 1.9;
    }

    .digital-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .digital-card {
      min-height: 166px;
      padding: 20px;
      text-align: right;
      border: 1px solid rgba(201, 154, 83, .2);
      border-radius: 22px;
      background: rgba(255, 255, 255, .045);
      transition: .24s;
    }

    .digital-card:hover {
      border-color: rgba(242, 203, 130, .55);
      background: rgba(201, 154, 83, .075);
      transform: translateY(-5px);
    }

    .digital-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      color: var(--gold2);
      border: 1px solid rgba(201, 154, 83, .28);
      border-radius: 16px;
      background: rgba(201, 154, 83, .06);
      font-size: 1.35rem;
    }

    .digital-icon i {
      display: block;
      line-height: 1;
      transition: transform .24s ease;
    }

    .digital-card:hover .digital-icon i { transform: scale(1.1); }

    .digital-card h4 {
      margin-bottom: .42rem;
      text-align: right;
      font-size: .98rem;
      font-weight: 900;
    }

    .digital-card p {
      margin-bottom: .55rem;
      color: var(--muted);
      text-align: right;
      font-size: .82rem;
      line-height: 1.75;
    }

    .digital-card a {
      color: var(--gold2);
      font-size: .84rem;
      font-weight: 800;
    }

    .logo-strip {
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }

    .logo-track {
      display: flex;
      align-items: center;
      gap: 56px;
      animation: marquee 30s linear infinite;
    }

    .logo-word {
      min-width: 128px;
      color: #d6d0c6;
      text-align: center;
      font-family: inherit;
      letter-spacing: 2px;
      opacity: .72;
    }

    .logo-word small {
      display: block;
      color: var(--muted);
      text-align: center;
      font-size: .65rem;
      letter-spacing: 1px;
    }

    @keyframes marquee {
      to { transform: translateX(50%); }
    }

    .news-card {
      height: 100%;
      overflow: hidden;
      border: 1px solid rgba(201, 154, 83, .2);
      border-radius: 22px;
      background: rgba(255, 255, 255, .035);
      transition: .24s;
    }

    .news-card:hover {
      border-color: rgba(242, 203, 130, .55);
      transform: translateY(-6px);
    }

    .news-img {
      height: 150px;
      background: var(--img) center / cover;
    }

    .news-body {
      padding: 18px;
      text-align: right;
    }

    .news-body h3 {
      text-align: right;
      font-size: .98rem;
      font-weight: 800;
      line-height: 1.9;
    }

    .news-body time {
      color: var(--muted);
      font-size: .8rem;
    }

    footer {
      padding: 60px 0 28px;
      border-top: 1px solid rgba(201, 154, 83, .18);
      background: #060707;
    }

    .footer-title {
      margin-bottom: 1rem;
      color: var(--gold2);
      text-align: right;
      font-weight: 900;
    }

    .footer-text,
    .footer-link {
      display: block;
      color: var(--muted);
      text-align: right;
      font-size: .92rem;
      line-height: 2.05;
    }

    .footer-link:hover { color: var(--gold2); }

    .socials {
      display: flex;
      justify-content: flex-start;
      gap: 10px;
      margin-top: 1rem;
    }

    .socials a {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      color: var(--gold2);
      border: 1px solid rgba(201, 154, 83, .25);
      border-radius: 12px;
    }

    .footer-download-card {
      margin-top: 18px;
      padding: 18px;
      border: 1px solid rgba(201, 154, 83, .24);
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(201, 154, 83, .11), rgba(255, 255, 255, .035));
      box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    }

    .footer-download-card strong {
      display: block;
      margin-bottom: 6px;
      color: var(--gold2);
      font-weight: 900;
    }

    .footer-download-card p {
      margin: 0 0 12px;
      color: var(--muted);
      text-align: right;
      font-size: .84rem;
      line-height: 1.8;
    }

    .copyright {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 18px;
      margin-top: 36px;
      padding-top: 22px;
      color: #837b70;
      border-top: 1px solid rgba(255, 255, 255, .08);
      font-size: .8rem;
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .65s ease, transform .65s ease;
    }

    .reveal.show {
      opacity: 1;
      transform: none;
    }

    /* =========================================================
       13) Responsive
    ========================================================= */
    @media (max-width: 991.98px) {
      .mega-menu {
        width: 100%;
        max-height: 75vh;
        margin-top: 0 !important;
        overflow-y: auto;
        transform: none !important;
      }

      .dropdown-menu {
        position: static !important;
        box-shadow: none;
      }

      .navbar-collapse { padding: 1rem 0; }

      .hero-section {
        min-height: auto;
        padding-top: 120px;
      }

      .hero-showcase img { height: 300px; }
      .section { padding: 66px 0; }

      .compare-stage { grid-template-columns: 1fr; }
      .human-box { display: none; }

      .size-buttons {
        position: sticky;
        top: 0;
        z-index: 3;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 6px;
        padding-bottom: 10px;
        background: rgba(8, 10, 12, .92);
      }

      .size-buttons button { flex: 1 1 80px; }
      .tile-box { height: 220px; }

      .about-factory-content,
      .catalog-copy { padding: 34px; }

      .about-factory-img,
      .about-factory-img img { min-height: 320px; }

      .factory-stats,
      .digital-grid { grid-template-columns: 1fr; }

      .catalog-visual {
        min-height: 360px;
        padding: 24px;
      }

      .catalog-book { width: min(260px, 80%); }

      .factory-intro-card,
      .factory-content { min-height: 460px; }

      .factory-content { padding: 32px; }
      .digital-feature { min-height: 280px; }

      .copyright { display: block; }
      .copyright span {
        display: block;
        margin-bottom: .5rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }

/* Dynamic product images use the original card geometry. */
.dynamic-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  backface-visibility: hidden;
  transition: transform .42s ease;
  will-change: transform;
}

/* Inline declarations migrated from index.html. */
.u-homepage-1 { --img:url('https://images.unsplash.com/photo-1600566753376-12c8ab7fb75b?auto=format&fit=crop&w=700&q=75'); }
.u-homepage-2 { --img:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=700&q=75'); }
.u-homepage-3 { --img:url('https://images.unsplash.com/photo-1615874959474-d609969a20ed?auto=format&fit=crop&w=700&q=75'); }
.u-homepage-4 { --img:url('https://images.unsplash.com/photo-1616047006789-b7af5afb8c20?auto=format&fit=crop&w=700&q=75'); }
.u-homepage-5 { --img:url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=700&q=75'); }
.u-homepage-6 { text-align:right; }
.u-homepage-7 { --img:url('https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=600&q=75'); }
.u-homepage-8 { --img:url('https://images.unsplash.com/photo-1600607687644-aac4c3eac7f4?auto=format&fit=crop&w=600&q=75'); }
.u-homepage-9 { --img:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=600&q=75'); }
.u-homepage-10 { --img:url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=600&q=75'); }
.u-homepage-11 { color:var(--gold2);font-weight:900; }