:root {
      --red:    #ae7a26;
      --dark:   #f7f3ec;
      --dark2:  #fffdfa;
      --dark3:  #f1ebe2;
      --border: #ddd2c0;
      --text:   #4c4134;
      --muted:  #8a7b67;
      --white:  #17140f;
    }

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

    body {
      background: var(--dark);
      color: var(--text);
      font-family: 'Cairo', sans-serif;
      font-weight: 400;
      overflow-x: hidden;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--dark3); }
    ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }
/* ===== NAVBAR ===== */
    #navbar {
      background: rgba(255,255,255,0.97);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 1000;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 24px rgba(15, 16, 21, 0.06);
    }
    .navbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
    }
    .navbar-brand-wrap { display: flex; align-items: center; gap: 12px; }
    .brand-text {
      font-family: 'Cairo', sans-serif;
      font-size: 1.4rem;
      font-weight: 900;
      letter-spacing: 1px;
      color: var(--white);
      line-height: 1;
    }
    .brand-sub {
      font-size: 0.65rem;
      color: var(--muted);
      letter-spacing: 2px;
    }
    .brand-icon {
      width: 48px; height: 48px;
      background: var(--red);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      color: white;
    }
    .nav-links { display: flex; align-items: center; gap: 4px; }
    .nav-link-custom {
      font-family: 'Cairo', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text) !important;
      padding: 6px 14px !important;
      border-radius: 3px;
      transition: all .2s;
      cursor: pointer;
      border-bottom: 2px solid transparent;
    }
    .nav-link-custom:hover, .nav-link-custom.active {
      color: var(--red) !important;
      border-bottom-color: var(--red);
    }
    .hamburger { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; cursor: pointer; }
    .hamburger span { display: block; width: 20px; height: 2px; background: var(--text); margin: 4px 0; }
    .mobile-menu {
      display: none;
      background: var(--dark2);
      border-top: 1px solid var(--border);
      padding: 10px 20px 20px;
    }
    .mobile-menu.open { display: block; }
    .mobile-nav-link {
      display: block;
      font-family: 'Cairo', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      color: var(--text);
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
    }
    .mobile-nav-link:last-child { border-bottom: none; }
    .mobile-nav-link:hover, .mobile-nav-link.active { color: var(--red); }

    /* ===== ACCENTS ===== */
    .red-line { width: 48px; height: 3px; background: var(--red); margin-bottom: 12px; }
    .red-line.center { margin: 0 auto 12px; }
    .section-label {
      font-family: 'Cairo', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 4px;
    }
    .section-title {
      font-family: 'Cairo', sans-serif;
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 900;
      color: var(--white);
      line-height: 1.1;
    }

    /* ===== HERO ===== */
    .hero {
      min-height: 90vh;
      background:
        linear-gradient(135deg, rgba(255, 253, 250, 0.96) 0%, rgba(248, 243, 234, 0.78) 50%, rgba(174, 122, 38, 0.08) 100%),
        url('../images/hero-pattern.svg') center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 120px;
      background: linear-gradient(transparent, var(--dark));
    }
    .hero-eyebrow {
      font-family: 'Cairo', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 3px;
      color: var(--red);
      margin-bottom: 16px;
      font-weight: 600;
    }
    .hero-title {
      font-family: 'Cairo', sans-serif;
      font-size: clamp(2.8rem, 8vw, 5.5rem);
      font-weight: 900;
      line-height: 1.05;
      color: var(--white);
      margin-bottom: 20px;
    }
    .hero-title span { color: var(--red); }
    .hero-desc {
      font-size: 1.05rem;
      color: var(--text);
      max-width: 520px;
      line-height: 1.8;
      margin-bottom: 32px;
    }
    .btn-red {
      background: var(--red);
      color: #fff;
      font-family: 'Cairo', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      border: none;
      padding: 12px 28px;
      border-radius: 3px;
      cursor: pointer;
      transition: all .2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .btn-red:hover { background: #8d621d; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(174, 122, 38, 0.26); }
    .btn-outline-red {
      background: transparent;
      color: var(--text);
      font-family: 'Cairo', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      border: 1px solid var(--border);
      padding: 12px 28px;
      border-radius: 3px;
      cursor: pointer;
      transition: all .2s;
    }
    .btn-outline-red:hover { border-color: var(--red); color: var(--red); }

    /* ===== STATS BAR ===== */
    .stats-bar {
      background: var(--dark2);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 28px 0;
    }
    .stat-item { text-align: center; }
    .stat-num {
      font-family: 'Cairo', sans-serif;
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--red);
    }
    .stat-label {
      font-size: 0.82rem;
      color: var(--muted);
      font-weight: 500;
    }

    /* ===== BRANDS STRIP ===== */
    .brands-strip { padding: 50px 0; background: var(--dark); }
    .brand-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 20px;
      border: 1px solid var(--border);
      border-radius: 40px;
      font-family: 'Cairo', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      transition: all .2s;
      margin: 5px;
    }
    .brand-pill:hover, .brand-pill.active {
      border-color: var(--red);
      color: var(--red);
      background: rgba(174, 122, 38, 0.08);
    }

    /* ===== PRODUCTS ===== */
    .products-section { padding: 70px 0; background: var(--dark); }
    .product-card {
      background: var(--dark2);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      transition: all .3s;
      height: 100%;
      cursor: pointer;
    }
    .product-card:hover {
      border-color: var(--red);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(15, 16, 21, 0.12);
    }
    .product-card:hover .product-img { transform: scale(1.05); }
    .product-img-wrap { overflow: hidden; aspect-ratio: 4/3; background: var(--dark3); }
    .product-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .product-body { padding: 18px; }
    .cat-tag {
      font-size: 0.68rem;
      color: var(--muted);
      border: 1px solid var(--border);
      padding: 2px 8px;
      border-radius: 20px;
      display: inline-block;
      margin: 2px;
    }
    .product-name {
      font-family: 'Cairo', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--white);
      margin-top: 8px;
    }
    .product-desc {
      font-size: 0.85rem;
      color: var(--muted);
      margin-top: 6px;
      line-height: 1.6;
    }
    .product-arrow {
      color: var(--red);
      font-size: 0.85rem;
      margin-top: 12px;
      opacity: 0;
      transition: opacity .2s;
      font-weight: 600;
    }
    .product-card:hover .product-arrow { opacity: 1; }

    /* ===== WHY US ===== */
    .why-us {
      background: var(--dark2);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 70px 0;
    }
    .feature-box {
      background: var(--dark3);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 28px 24px;
      height: 100%;
      transition: border-color .2s;
    }
    .feature-box:hover { border-color: var(--red); }
    .feature-icon { font-size: 2rem; color: var(--red); margin-bottom: 14px; }
    .feature-title {
      font-family: 'Cairo', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 8px;
    }
    .feature-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }

    /* ===== HOME CATS ===== */
    .home-cats { padding: 70px 0; background: var(--dark3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .hcat-card {
      background: var(--dark2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 22px 18px;
      text-align: center;
      cursor: pointer;
      transition: all .25s;
      height: 100%;
    }
    .hcat-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(15, 16, 21, 0.08); }
    .hcat-icon { font-size: 2.4rem; color: var(--red); margin-bottom: 10px; }
    .hcat-name { font-family: 'Cairo', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
    .hcat-models { font-size: 0.78rem; color: var(--muted); }

    /* ===== ABOUT PAGE ===== */
    .about-hero {
      background:
        linear-gradient(135deg, rgba(255, 253, 250, 0.98) 60%, rgba(174, 122, 38, 0.08) 100%),
        url('../images/hero-pattern.svg') center/cover no-repeat;
      padding: 100px 0 60px;
      border-bottom: 1px solid var(--border);
    }
    .about-body { padding: 70px 0; }
    .about-story,
    .about-sidebar {
      text-align: right;
    }
    .about-story {
      padding-inline-start: 10px;
    }
    .about-sidebar {
      padding-inline-end: 10px;
    }
    .about-text { font-size: 1rem; color: var(--text); line-height: 1.9; text-align: right; }
    .about-highlight {
      background: var(--dark2);
      border: 1px solid rgba(174, 122, 38, 0.2);
      padding: 20px 24px;
      border-radius: 18px;
      font-size: 1.05rem;
      color: var(--white);
      font-style: normal;
      font-weight: 500;
      margin: 28px 0;
      text-align: right;
    }
    .timeline-wrap {
      margin-top: 12px;
    }
    .timeline-item { display: flex; gap: 16px; margin-bottom: 28px; flex-direction: row-reverse; text-align: right; align-items: flex-start; }
    .timeline-dot { width: 14px; height: 14px; min-width: 14px; background: var(--red); border-radius: 50%; margin-top: 4px; }
    .timeline-content {
      flex: 1;
    }
    .timeline-title { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 1rem; color: var(--white); margin-bottom: 4px; }
    .timeline-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }
    .info-card {
      background: var(--dark2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 22px;
      margin-bottom: 16px;
      text-align: right;
    }
    .info-card i { font-size: 1.3rem; color: var(--red); margin-bottom: 10px; display: block; }
    .info-card-title { font-family: 'Cairo', sans-serif; font-size: 0.78rem; letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
    .info-card-val { font-size: 1rem; color: var(--white); font-weight: 600; line-height: 1.7; }
    .about-pillars {
      margin-top: 18px;
    }
    .about-pillar-card {
      height: 100%;
      padding: 22px 20px;
      border-radius: 20px;
      background: rgba(255, 253, 250, 0.96);
      border: 1px solid rgba(174, 122, 38, 0.1);
      box-shadow: 0 14px 32px rgba(15, 16, 21, 0.06);
      text-align: right;
    }
    .about-pillar-icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(174, 122, 38, 0.1);
      color: var(--red);
      font-size: 1.3rem;
      margin-bottom: 12px;
    }
    .about-pillar-title {
      font-family: 'Cairo', sans-serif;
      font-size: 1.04rem;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 6px;
    }
    .about-pillar-text {
      font-size: 0.88rem;
      color: var(--muted);
      line-height: 1.8;
      margin: 0;
    }
    .about-contact-lines {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .info-card-val .ltr-text {
      font-weight: 800;
    }

    /* ===== CATEGORIES PAGE ===== */
    .categories-hero {
      background: linear-gradient(135deg, rgba(255, 253, 250, 0.98) 60%, rgba(174, 122, 38, 0.08) 100%);
      padding: 80px 0 50px;
      border-bottom: 1px solid var(--border);
    }
    .categories-body { padding: 60px 0 80px; }
    .brand-cat-card {
      background: var(--dark2);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      transition: all .3s;
      cursor: pointer;
      height: 100%;
      position: relative;
    }
    .brand-cat-card::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: var(--red);
      transform: scaleX(0);
      transition: transform .3s;
    }
    .brand-cat-card:hover::before { transform: scaleX(1); }
    .brand-cat-card:hover { border-color: var(--red); transform: translateY(-5px); box-shadow: 0 16px 48px rgba(15, 16, 21, 0.1); }
    .brand-cat-header {
      background: var(--dark3);
      border-bottom: 1px solid var(--border);
      padding: 22px 20px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-direction: row-reverse;
      text-align: right;
    }
    .brand-cat-icon {
      width: 52px; height: 52px;
      background: rgba(174, 122, 38, 0.12);
      border: 1px solid rgba(174, 122, 38, 0.25);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      color: var(--red);
      flex-shrink: 0;
    }
    .brand-cat-name { font-family: 'Cairo', sans-serif; font-size: 1.3rem; font-weight: 900; color: var(--white); }
    .brand-cat-count { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
    .brand-cat-body { padding: 16px 18px 18px; }
    .brand-part-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--dark3);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 0.78rem;
      padding: 4px 10px;
      border-radius: 3px;
      margin: 3px;
      transition: all .2s;
      font-family: 'Cairo', sans-serif;
    }
    .brand-cat-footer {
      padding: 12px 18px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .brand-explore {
      font-family: 'Cairo', sans-serif;
      font-size: 0.82rem;
      color: var(--red);
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
    }
    .parttype-card {
      background: var(--dark2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 26px 22px;
      height: 100%;
      cursor: pointer;
      transition: all .3s;
      text-align: right;
    }
    .parttype-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(15, 16, 21, 0.08); }
    .parttype-icon { font-size: 2.2rem; color: var(--red); margin-bottom: 14px; display: block; }
    .parttype-name { font-family: 'Cairo', sans-serif; font-size: 1.1rem; font-weight: 900; color: var(--white); margin-bottom: 6px; }
    .parttype-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
    .ptbrand {
      font-size: 0.68rem;
      color: var(--muted);
      border: 1px solid var(--border);
      padding: 2px 8px;
      border-radius: 2px;
      display: inline-block;
      margin: 2px;
    }

    /* ===== CATALOG PAGE ===== */
    .catalog-hero {
      background: linear-gradient(135deg, rgba(255, 253, 250, 0.98) 60%, rgba(174, 122, 38, 0.08) 100%);
      padding: 80px 0 50px;
      border-bottom: 1px solid var(--border);
    }
    .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; align-items: center; }
    .filter-label { font-family: 'Cairo', sans-serif; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
    .filter-btn {
      background: var(--dark2);
      border: 1px solid var(--border);
      color: var(--muted);
      font-family: 'Cairo', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 3px;
      cursor: pointer;
      transition: all .2s;
    }
    .filter-btn:hover, .filter-btn.active { background: var(--red); border-color: var(--red); color: #fff; }
    .catalog-item {
      background: var(--dark2);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      transition: all .3s;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .catalog-item:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(15, 16, 21, 0.08); }
    .catalog-img-wrap { overflow: hidden; aspect-ratio: 1; background: var(--dark3); }
    .catalog-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .catalog-item:hover .catalog-img { transform: scale(1.06); }
    .catalog-body-inner { padding: 16px; flex: 1; display: flex; flex-direction: column; }
    .catalog-name { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 1rem; color: var(--white); margin-bottom: 6px; }
    .catalog-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.6; margin-bottom: 8px; flex: 1; }
    .catalog-brand-tag {
      display: inline-block;
      font-size: 0.65rem;
      color: var(--muted);
      border: 1px solid var(--border);
      padding: 2px 7px;
      border-radius: 2px;
      margin: 2px;
    }
    .catalog-footer {
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .catalog-inquiry {
      font-family: 'Cairo', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--red);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* ===== CONTACT PAGE ===== */
    .contact-hero {
      background: linear-gradient(135deg, rgba(255, 253, 250, 0.98) 60%, rgba(174, 122, 38, 0.08) 100%);
      padding: 80px 0 50px;
      border-bottom: 1px solid var(--border);
    }
    .contact-section { padding: 70px 0; }
    .contact-form-wrap {
      background: var(--dark2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 36px;
    }
    .form-label-custom { font-family: 'Cairo', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 6px; display: block; }
    .form-control-custom {
      background: var(--dark3);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 10px 14px;
      font-family: 'Cairo', sans-serif;
      font-size: 0.9rem;
      color: var(--white);
      width: 100%;
      transition: border-color .2s;
    }
    .form-control-custom:focus { outline: none; border-color: var(--red); }
    .contact-side-card {
      background: var(--dark2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 22px;
      margin-bottom: 16px;
    }
    .contact-side-card i { font-size: 1.4rem; color: var(--red); margin-bottom: 10px; display: block; }
    .contact-side-title { font-family: 'Cairo', sans-serif; font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-bottom: 8px; letter-spacing: 1px; }
    .contact-side-val { font-size: 1rem; color: var(--white); font-weight: 600; line-height: 1.8; }
    .whatsapp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(135deg, #1fa855 0%, #169347 100%);
      color: #fff;
      font-family: 'Cairo', sans-serif;
      font-weight: 700;
      font-size: 0.88rem;
      padding: 12px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 14px 28px rgba(20, 115, 52, 0.24);
      text-decoration: none;
      margin-top: 12px;
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .whatsapp-btn i {
      font-size: 1rem;
      margin: 0;
      display: inline-flex;
      color: inherit;
    }
    .whatsapp-btn:hover {
      color: #fff;
      filter: saturate(1.05);
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(20, 115, 52, 0.3);
    }
    .form-success {
      display: none;
      background: rgba(34,197,94,0.1);
      border: 1px solid #22c55e;
      border-radius: 4px;
      padding: 14px 18px;
      color: #16a34a;
      font-family: 'Cairo', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      margin-top: 16px;
    }

    /* ===== FOOTER ===== */
    footer {
      background: #0f1015;
      border-top: 1px solid rgba(174, 122, 38, 0.12);
      padding: 50px 0 24px;
    }
    .footer-brand { font-family: 'Cairo', sans-serif; font-size: 1.6rem; font-weight: 900; color: #f6ede0; }
    .footer-tagline { font-size: 0.82rem; color: #8f816c; margin-bottom: 14px; }
    .footer-nav-link { display: block; font-family: 'Cairo', sans-serif; font-size: 0.85rem; color: #8f816c; margin-bottom: 10px; cursor: pointer; transition: color .2s; }
    .footer-nav-link:hover { color: var(--red); }
    .footer-sec-title { font-family: 'Cairo', sans-serif; font-size: 0.75rem; letter-spacing: 2px; color: var(--red); margin-bottom: 16px; font-weight: 700; }
    .footer-bottom { border-top: 1px solid rgba(174, 122, 38, 0.12); padding-top: 20px; margin-top: 36px; font-size: 0.82rem; color: #8f816c; }
    .social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px; height: 36px;
      border: 1px solid rgba(174, 122, 38, 0.12);
      border-radius: 4px;
      color: #8f816c;
      font-size: 1rem;
      margin-left: 8px;
      cursor: pointer;
      transition: all .2s;
      text-decoration: none;
    }
    .social-btn:hover { border-color: var(--red); color: var(--red); }

    /* ===== ANIMATIONS ===== */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    .fade-up { animation: fadeUp .6s ease forwards; }
    .delay-1 { animation-delay: .15s; opacity: 0; }
    .delay-2 { animation-delay: .3s; opacity: 0; }
    .delay-3 { animation-delay: .45s; opacity: 0; }

    /* ===== BREADCRUMB ===== */
    .page-breadcrumb { color: var(--muted); font-size: 0.88rem; margin-top: 8px; }

    /* ===== CTA STRIP ===== */
    .cta-strip {
      background: linear-gradient(135deg, #ae7a26 0%, #8d621d 100%);
      padding: 50px 0;
      text-align: center;
    }
    .cta-strip h2 { font-family: 'Cairo', sans-serif; font-size: 2rem; font-weight: 900; color: #fff; margin-bottom: 10px; }
    .cta-strip p { color: rgba(255,255,255,0.85); font-size: 1rem; margin-bottom: 24px; }
    .btn-white {
      background: var(--dark2);
      color: var(--red);
      font-family: 'Cairo', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      border: none;
      padding: 12px 28px;
      border-radius: 3px;
      cursor: pointer;
      transition: all .2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }
    .btn-white:hover { background: #f0f0f0; color: var(--red); transform: translateY(-2px); }

    @media (max-width: 768px) {
      .hero { min-height: 70vh; }
      .hero-title { font-size: 2.5rem; }
      .nav-links { display: none; }
      .contact-form-wrap { padding: 22px; }
    }
    @media (min-width: 769px) {
      .hamburger { display: none; }
    }

body { min-height: 100vh; }
a { text-decoration: none; }
.nav-link-custom,
.mobile-nav-link,
.footer-nav-link,
.btn-red,
.btn-outline-red,
.btn-white {
  text-decoration: none;
}
.nav-link-custom {
  display: inline-flex;
  align-items: center;
}
.site-main {
  min-height: calc(100vh - 320px);
}
.subpage-hero {
  position: relative;
  padding: 68px 0 60px;
  background:
    radial-gradient(circle at top left, rgba(174, 122, 38, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(255, 253, 250, 0.99), rgba(248, 243, 234, 0.97) 46%, rgba(243, 235, 223, 0.98));
  border-bottom: 1px solid rgba(174, 122, 38, 0.1);
  overflow: hidden;
}
.subpage-hero::after {
  content: '';
  position: absolute;
  inset: auto 8% -80px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(174, 122, 38, 0.08);
  filter: blur(6px);
}
.subpage-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.95fr);
  gap: 28px;
  align-items: end;
}
.subpage-hero-copy {
  max-width: 62ch;
}
.subpage-hero-text {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.95;
  margin: 0 0 18px;
}
.subpage-identity-card {
  position: relative;
  padding: 26px 24px 24px;
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.99), rgba(247, 241, 231, 0.98));
  border: 1px solid rgba(174, 122, 38, 0.14);
  border-radius: 24px;
  box-shadow: 0 22px 48px rgba(15, 16, 21, 0.08);
}
.subpage-identity-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, var(--red), rgba(174, 122, 38, 0.16));
}
.subpage-identity-kicker {
  font-size: 0.76rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.subpage-identity-title {
  color: var(--white);
  font-size: 1.18rem;
  line-height: 1.8;
  font-weight: 800;
  margin-bottom: 16px;
}
.subpage-identity-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.subpage-identity-list li {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
}
.catalog-shell {
  padding: 50px 0 80px;
}
@media (max-width: 991px) {
  .subpage-hero-grid {
    grid-template-columns: 1fr;
  }
}


/* === 2026 REFINEMENT START === */
:root {
  --navy: #0f1015;
  --ink: #292117;
  --surface-soft: #faf7f1;
  --surface-strong: #fffdfa;
  --shadow-soft: 0 22px 50px rgba(15, 16, 21, 0.08);
  --shadow-red: 0 20px 50px rgba(174, 122, 38, 0.18);
  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-md: 0.98rem;
  --fs-lg: 1.08rem;
  --fs-xl: 1.18rem;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top right, rgba(174, 122, 38, 0.08), transparent 22%),
    linear-gradient(180deg, #fbf8f2 0%, #f1ebe2 100%);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.8;
}

#navbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(174, 122, 38, 0.08);
  box-shadow: none;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: rgba(174, 122, 38, 0.12);
  box-shadow: 0 18px 40px rgba(15, 16, 21, 0.08);
}

.navbar-inner {
  gap: 20px;
  padding: 16px 0;
}

.navbar-brand-wrap {
  gap: 14px;
  text-decoration: none;
  min-width: 0;
}

.brand-logo-shell {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(247, 242, 233, 0.98));
  border: 1px solid rgba(15, 16, 21, 0.08);
  box-shadow: 0 18px 40px rgba(15, 16, 21, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brand-text {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--navy);
}

.brand-sub {
  font-size: var(--fs-sm);
  color: #766650;
  letter-spacing: 0;
  line-height: 1.7;
  max-width: 30rem;
}

.nav-links {
  gap: 18px;
  flex: 1;
  justify-content: space-between;
}

.nav-links-cluster,
.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-link-custom {
  padding: 10px 14px !important;
  border-radius: 999px;
  border-bottom: none;
  color: #564938 !important;
}

.nav-link-custom:hover,
.nav-link-custom.active {
  color: var(--navy) !important;
  background: rgba(174, 122, 38, 0.12);
}

.nav-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(15, 16, 21, 0.08);
  border-radius: 999px;
  color: #5b4b36;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.75);
}

.nav-contact-pill i {
  color: var(--red);
}

.nav-cta {
  padding-inline: 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-red);
}

.mobile-menu {
  background: rgba(255, 255, 255, 0.98);
  padding: 18px 0 24px;
}

.mobile-menu-inner {
  display: grid;
  gap: 4px;
}

.mobile-brand-brief {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(174, 122, 38, 0.08);
}

.mobile-brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255, 253, 250, 0.98);
  border: 1px solid rgba(174, 122, 38, 0.08);
}

.mobile-brand-title {
  font-weight: 900;
  color: var(--navy);
}

.mobile-brand-sub {
  font-size: var(--fs-xs);
  color: #857662;
}

.mobile-nav-link {
  border-bottom-color: rgba(174, 122, 38, 0.08);
}

.mobile-menu-cta {
  justify-content: center;
  margin-top: 12px;
  border-radius: 999px;
}

.hero {
  min-height: 72vh;
  padding: 82px 0 116px;
  background:
    linear-gradient(125deg, #0d0e12 0%, #16120f 54%, #251d14 100%);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 130px;
  background: linear-gradient(180deg, rgba(238, 241, 245, 0), rgba(238, 241, 245, 1));
}

.hero-simple {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.88fr);
  align-items: center;
  gap: 44px;
}

.hero-copy {
  position: relative;
  width: min(100%, 46rem);
  max-width: 46rem;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: #ffffff;
}

.hero-kicker-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(255, 255, 255, 0.24));
}

.hero-title {
  max-width: 14.5ch;
  font-size: clamp(2.1rem, 4vw, 3.35rem);
  line-height: 1.14;
  color: #ffffff;
  margin-bottom: 16px;
}

.hero-title span {
  display: block;
  color: var(--red);
}

.hero-desc {
  max-width: 39rem;
  font-size: 1rem;
  line-height: 1.95;
  color: rgba(238, 231, 219, 0.84);
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.btn-red,
.btn-outline-red,
.btn-white {
  border-radius: 999px;
  padding: 13px 28px;
}

.btn-outline-red {
  border-color: rgba(15, 16, 21, 0.12);
  background: rgba(255, 253, 250, 0.92);
  color: var(--navy);
}

.btn-outline-red:hover {
  border-color: var(--red);
  background: rgba(174, 122, 38, 0.08);
  color: var(--red);
}

.hero .btn-outline-red {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.hero .btn-outline-red:hover {
  border-color: var(--red);
  background: rgba(174, 122, 38, 0.16);
  color: #ffffff;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-points span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 239, 229, 0.92);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.hero-points i {
  color: #d1a257;
}

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 420px;
  justify-self: end;
  padding: 28px;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 28px 64px rgba(5, 8, 20, 0.34);
  overflow: hidden;
}

.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(174, 122, 38, 0.24), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 64px);
  pointer-events: none;
}

.hero-visual > * {
  position: relative;
  z-index: 1;
}

.hero-visual-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.hero-visual-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(174, 122, 38, 0.2);
  color: #f2dfbf;
  font-size: var(--fs-xs);
  font-weight: 800;
}

.hero-visual-note {
  color: rgba(229, 219, 202, 0.72);
  font-size: var(--fs-xs);
}

.hero-brand-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
}

.hero-brand-mark {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: rgba(255, 253, 250, 0.98);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.hero-brand-mark img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.hero-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-brand-copy strong {
  color: #ffffff;
  font-size: 1.18rem;
  font-weight: 900;
}

.hero-brand-copy span {
  color: rgba(229, 220, 205, 0.76);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.hero-service-list {
  display: grid;
  gap: 14px;
}

.hero-service-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 16px 15px;
  border-radius: 22px;
  background: rgba(11, 15, 31, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-service-card i {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(174, 122, 38, 0.14);
  color: #e1bb7f;
  font-size: 1.25rem;
}

.hero-service-card h3 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.hero-service-card p {
  color: rgba(226, 219, 206, 0.74);
  font-size: var(--fs-sm);
  line-height: 1.8;
  margin: 0;
}

.section-label,
.info-card-title,
.contact-side-title,
.footer-sec-title {
  font-size: var(--fs-xs);
  letter-spacing: 1.6px;
}

.section-title {
  font-size: clamp(2.1rem, 4.8vw, 3.3rem);
  line-height: 1.16;
}

.page-breadcrumb,
.footer-tagline,
.footer-bottom,
.brand-cat-count,
.hcat-models,
.filter-label,
.filter-btn,
.catalog-desc,
.catalog-inquiry,
.product-desc,
.parttype-desc,
.feature-desc,
.timeline-desc,
.form-label-custom,
.footer-contact-list,
.footer-nav-link {
  font-size: var(--fs-sm);
}

.product-name,
.feature-title,
.hcat-name,
.parttype-name,
.catalog-name,
.timeline-title,
.info-card-val,
.contact-side-val {
  font-size: var(--fs-lg);
}

.about-text,
.about-highlight,
.subpage-hero-text,
.cta-strip p,
.form-control-custom {
  font-size: var(--fs-md);
}

.brand-cat-name {
  font-size: var(--fs-xl);
}

.stat-label {
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.stat-num,
.cta-strip h2 {
  line-height: 1.15;
}

.product-desc,
.feature-desc,
.parttype-desc,
.catalog-desc,
.timeline-desc,
.footer-about-text,
.contact-side-val,
.about-text,
.about-highlight,
.subpage-hero-text {
  line-height: 1.85;
}

.stats-bar {
  position: relative;
  z-index: 2;
  margin: -42px auto 0;
  width: min(1120px, calc(100% - 24px));
  border: 1px solid rgba(174, 122, 38, 0.08);
  border-radius: 30px;
  background: rgba(255, 253, 250, 0.96);
  box-shadow: 0 24px 56px rgba(15, 16, 21, 0.08);
  padding: 30px 0;
}

.brands-strip,
.products-section,
.home-cats,
.why-us,
.contact-section,
.catalog-shell {
  background: transparent;
}

.brands-strip {
  padding-top: 74px;
}

.brand-pill,
.cat-tag,
.catalog-brand-tag,
.subpage-identity-list li {
  border-radius: 999px;
}

.product-card,
.catalog-item,
.hcat-card,
.feature-box,
.brand-cat-card,
.parts-cat-card,
.contact-form-wrap,
.contact-side-card {
  border-radius: 24px;
  border-color: rgba(174, 122, 38, 0.08);
  box-shadow: 0 16px 38px rgba(15, 16, 21, 0.04);
}

.product-card:hover,
.catalog-item:hover,
.hcat-card:hover,
.feature-box:hover,
.brand-cat-card:hover,
.parts-cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 52px rgba(15, 16, 21, 0.1);
}

.section-title {
  color: var(--navy);
}

.feature-box,
.hcat-card,
.brand-cat-card,
.parts-cat-card,
.contact-side-card {
  background: rgba(255, 255, 255, 0.92);
}

.subpage-hero {
  background:
    radial-gradient(circle at top left, rgba(174, 122, 38, 0.13), transparent 28%),
    radial-gradient(circle at 88% 24%, rgba(15, 16, 21, 0.08), transparent 24%),
    linear-gradient(135deg, rgba(255, 253, 250, 0.98), rgba(248, 243, 235, 0.96) 48%, rgba(241, 235, 226, 0.98));
  padding: 74px 0 64px;
}

.subpage-identity-card {
  overflow: hidden;
}

.subpage-identity-card::after {
  content: '';
  position: absolute;
  inset: auto -18px -24px auto;
  width: 155px;
  height: 110px;
  background: url('../images/logo.jpeg') center/contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

.contact-side-card i,
.footer-contact-list i {
  color: var(--red);
}

footer {
  position: relative;
  background:
    radial-gradient(circle at top right, rgba(174, 122, 38, 0.12), transparent 22%),
    linear-gradient(180deg, #0d0e12 0%, #19140f 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 64px 0 28px;
}

.footer-grid-shell {
  position: relative;
  z-index: 1;
}

.footer-brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.footer-logo {
  width: 82px;
  height: 82px;
  border-radius: 24px;
  object-fit: contain;
  background: rgba(255, 250, 244, 0.98);
  padding: 6px;
  box-shadow: 0 16px 38px rgba(15, 16, 21, 0.14);
}

.footer-about-text {
  max-width: 34ch;
  color: rgba(228, 233, 246, 0.76);
  font-size: 0.92rem;
  line-height: 1.95;
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-brand {
  color: #f5f7fb;
}

.footer-tagline,
.footer-nav-link,
.footer-bottom {
  color: rgba(214, 220, 235, 0.72);
}

.footer-nav-link:hover {
  color: #ffffff;
}

.footer-contact-list {
  display: grid;
  gap: 10px;
  color: rgba(214, 220, 235, 0.78);
  font-size: 0.88rem;
}

.footer-contact-list div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.footer-bottom-note {
  color: #ffffff;
}

.social-btn {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.08);
  color: #dbe2f0;
}

.social-btn:hover {
  border-color: rgba(174, 122, 38, 0.82);
  color: #fff;
  background: rgba(174, 122, 38, 0.14);
}

.ltr-text {
  direction: ltr;
  unicode-bidi: isolate;
}

span.ltr-text,
a.ltr-text,
input.ltr-text {
  display: inline-block;
}

@media (max-width: 1199px) {
  .nav-contact-pill span {
    display: none;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(300px, 0.86fr);
    gap: 30px;
  }

  .hero-copy {
    max-width: 42rem;
  }

  .hero-title {
    max-width: 15ch;
    font-size: clamp(1.95rem, 3.8vw, 2.8rem);
  }

  .hero-desc {
    max-width: 36rem;
  }

  .hero-visual {
    max-width: 372px;
    padding: 24px;
  }
}

@media (max-width: 991px) {
  .brand-logo-shell {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .brand-sub {
    max-width: 22rem;
  }

  .hero {
    min-height: 68vh;
    padding: 72px 0 96px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 28px;
  }

  .hero-copy,
  .hero-visual {
    max-width: none;
    width: 100%;
  }

  .hero-title {
    font-size: clamp(1.9rem, 5vw, 2.55rem);
    max-width: 16ch;
  }

  .hero-desc {
    max-width: 100%;
  }

  .hero-visual {
    justify-self: stretch;
  }

  .stats-bar {
    width: calc(100% - 24px);
    margin-top: -28px;
  }

  .about-story,
  .about-sidebar {
    padding-inline: 0;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 0.95rem;
  }

  .navbar-inner {
    padding: 12px 0;
  }

  .brand-logo-shell {
    width: 56px;
    height: 56px;
  }

  .brand-text {
    font-size: 1.2rem;
  }

  .brand-sub {
    font-size: 0.72rem;
  }

  .section-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn-red,
  .hero-actions .btn-outline-red {
    justify-content: center;
    width: 100%;
  }

  .hero-visual {
    padding: 22px;
    border-radius: 26px;
  }

  .hero-brand-panel {
    padding: 14px;
  }

  .hero-brand-mark {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2rem);
    max-width: none;
  }

  .hero-desc {
    font-size: 0.93rem;
  }

  .hero-points {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-points span {
    justify-content: center;
  }

  .stats-bar {
    border-radius: 24px;
    padding: 22px 0;
  }

  .contact-form-wrap {
    padding: 24px;
  }

  footer {
    padding-top: 52px;
  }
}

.hero::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(174, 122, 38, 0.18), transparent 18%),
    radial-gradient(circle at 76% 74%, rgba(255, 255, 255, 0.05), transparent 20%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 144px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 74px);
  background-size: auto, auto, 144px 100%, 100% 74px;
  pointer-events: none;
}

.hero-refined .hero-copy::after {
  content: '';
  position: absolute;
  inset: auto auto -26px -6px;
  width: 112px;
  height: 112px;
  background: url('../images/logo.jpeg') center/contain no-repeat;
  opacity: 0.05;
  filter: saturate(0);
  pointer-events: none;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 30px;
}

.section-head-copy {
  max-width: 42rem;
}

.section-head-text {
  color: #5f677a;
  font-size: var(--fs-md);
  line-height: 1.9;
  margin: 12px 0 0;
}

.section-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.slider-shell {
  position: relative;
}

.slider-viewport {
  overflow: hidden;
}

.slider-track {
  display: flex;
  direction: ltr;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.slider-slide {
  direction: rtl;
  flex: 0 0 100%;
  min-width: 100%;
}

.slider-grid {
  display: grid;
  gap: 20px;
}

.slider-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.slider-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slider-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.slider-btn {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(174, 122, 38, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.slider-btn:hover {
  border-color: rgba(174, 122, 38, 0.35);
  background: rgba(174, 122, 38, 0.08);
  transform: translateY(-2px);
}

.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.slider-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 16, 21, 0.16);
  transition: width .25s ease, background-color .25s ease;
}

.slider-dot.active {
  width: 34px;
  background: var(--red);
}

.brand-slider-card,
.flow-card {
  position: relative;
  min-height: 220px;
  padding: 22px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(247, 241, 231, 0.96));
  border: 1px solid rgba(174, 122, 38, 0.08);
  box-shadow: 0 18px 40px rgba(15, 16, 21, 0.06);
}

.brand-slider-card::before,
.flow-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--red), rgba(15, 16, 21, 0.2));
}

.brand-slider-card::after,
.flow-card::after {
  content: '';
  position: absolute;
  inset: auto -18px -16px auto;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  background: rgba(15, 16, 21, 0.05);
  transform: rotate(16deg);
}

.brand-slider-meta,
.flow-card-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--red);
  font-weight: 800;
  margin-bottom: 16px;
}

.brand-slider-title,
.flow-card-title {
  color: var(--navy);
  font-size: 1.22rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.brand-slider-text,
.flow-card-text {
  color: #5f677a;
  font-size: var(--fs-sm);
  line-height: 1.85;
  margin-bottom: 16px;
}

.brand-slider-tags,
.flow-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-slider-tags span,
.flow-card-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15, 16, 21, 0.05);
  color: #4c4134;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.brand-slider-number {
  position: absolute;
  left: 22px;
  bottom: 20px;
  color: rgba(15, 16, 21, 0.12);
  font-size: 2.7rem;
  font-weight: 900;
  line-height: 1;
}

.slider-section-soft {
  padding: 74px 0 10px;
}

.slider-section-strong {
  padding: 74px 0;
}

.slider-section-band {
  padding: 74px 0;
  background:
    radial-gradient(circle at top left, rgba(174, 122, 38, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 253, 250, 0.76), rgba(247, 241, 231, 0.98));
  border-top: 1px solid rgba(174, 122, 38, 0.08);
  border-bottom: 1px solid rgba(174, 122, 38, 0.08);
}

.products-section .slider-slide {
  padding-bottom: 4px;
}

.product-card {
  min-height: 100%;
}

.product-img-wrap,
.catalog-img-wrap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(174, 122, 38, 0.18), transparent 28%),
    linear-gradient(145deg, #fbf8f2, #f1e9dc);
}

.product-visual,
.catalog-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 220px;
  padding: 20px 22px;
}

.catalog-visual {
  min-height: 100%;
}

.product-visual::before,
.catalog-visual::before {
  content: '';
  position: absolute;
  inset: 16px 16px auto auto;
  width: 82px;
  height: 82px;
  border-radius: 24px;
  background: rgba(15, 16, 21, 0.06);
}

.product-visual::after,
.catalog-visual::after {
  content: '';
  position: absolute;
  inset: auto -22px -28px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(174, 122, 38, 0.14);
}

.product-visual-code,
.catalog-visual-code {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.86);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .4px;
}

.product-visual-icon,
.catalog-visual-icon {
  position: relative;
  z-index: 1;
  font-size: 4rem;
  color: var(--navy);
  opacity: 0.92;
}

.product-visual-label,
.catalog-visual-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.product-visual[data-tone="navy"],
.catalog-visual[data-tone="navy"] {
  background:
    radial-gradient(circle at top right, rgba(15, 16, 21, 0.22), transparent 28%),
    linear-gradient(145deg, #f6f1e8, #ebe1d1);
}

.product-visual[data-tone="red"],
.catalog-visual[data-tone="red"] {
  background:
    radial-gradient(circle at top right, rgba(174, 122, 38, 0.24), transparent 28%),
    linear-gradient(145deg, #fffaf0, #f4ead8);
}

.product-visual[data-tone="steel"],
.catalog-visual[data-tone="steel"] {
  background:
    radial-gradient(circle at top right, rgba(110, 123, 154, 0.18), transparent 28%),
    linear-gradient(145deg, #f8fafc, #edf1f6);
}

.mini-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
}

.mini-kpi {
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}

.mini-kpi-value {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 6px;
}

.mini-kpi-label {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.cta-strip {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 24%),
    linear-gradient(135deg, #ae7a26 0%, #8d621d 100%);
}

.cta-strip .btn-red {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.82);
  color: #fff;
}

.cta-strip .btn-red:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1199px) {
  .slider-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .slider-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .section-head-actions {
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .slider-grid-4,
  .slider-grid-3,
  .mini-kpis {
    grid-template-columns: 1fr;
  }

  .slider-btn {
    width: 42px;
    height: 42px;
  }

  .brand-slider-card,
  .flow-card {
    min-height: auto;
  }

  .mini-kpis {
    margin-top: 26px;
  }

  .product-visual,
  .catalog-visual {
    min-height: 190px;
  }
}

/* ============================================
   Responsive overflow fixes (appended 2026-05-15)
   ============================================ */

/* Guard against horizontal overflow on small viewports.
   Root cause: Bootstrap .row uses negative margins (-gutter/2 each side)
   to align with .container padding, but nested .row inside a .col-* with
   its own padding overshoots. Especially with g-5 (48px gutter → -24px
   margins) on /about + /contact + checkout. */
@media (max-width: 767.98px) {
  html, body { overflow-x: hidden; }

  /* Trim large gutters that overflow on tiny screens */
  .row.g-5 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .row.g-4 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }

  /* Subpage hero stacks; identity card next to copy creates squeeze */
  .subpage-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  /* About story sidebar pinning that adds rogue padding on RTL */
  .about-story { padding-inline-start: 0 !important; padding-inline-end: 0 !important; }
  .about-sidebar { padding-inline: 0 !important; }

  /* Stats bar tighter spacing */
  .stats-bar .stat-num { font-size: 1.5rem; }
  .stats-bar .stat-label { font-size: .72rem; line-height: 1.4; }

  /* Hero copy spacing */
  .hero-title { font-size: 2rem !important; line-height: 1.25; }
  .hero-desc { font-size: .95rem !important; }
  .hero-points { gap: .5rem; }
  .hero-points span { font-size: .82rem; }

  /* Section titles a hair smaller */
  .section-title { font-size: 1.6rem !important; line-height: 1.3; }
  .section-head-text { font-size: .9rem; }

  /* Filter bar wraps cleanly */
  .filter-bar { gap: .35rem; padding: .75rem; }
  .filter-btn { font-size: .8rem; padding: .35rem .7rem; }

  /* Footer sections breathing room */
  footer .footer-grid-shell { padding-inline: 1rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .35rem; font-size: .78rem; }

  /* Catalog cards a touch tighter */
  .catalog-img-wrap img { height: 180px !important; }
}

/* Even narrower viewport (Galaxy Fold etc.) */
@media (max-width: 360px) {
  .hero-title { font-size: 1.75rem !important; }
  .section-title { font-size: 1.4rem !important; }
  .stats-bar .stat-num { font-size: 1.3rem; }
}

/* ============================================
   Auth-aware nav layout fix
   ============================================ */

/* The base .nav-links rule (line ~957) doesn't set display:flex; that was
   only set inside an unrelated media query. When @auth adds extra items
   (طلباتي + logout form) the row collapses to block stacking on desktop. */
@media (min-width: 769px) {
  .nav-links { display: flex !important; align-items: center; gap: 18px; }
  .nav-links-cluster,
  .nav-cta-group { display: flex !important; align-items: center; gap: 10px; flex-wrap: nowrap; }
  /* The logout form was breaking flex because <form> is block by default */
  .nav-cta-group form { display: inline-flex !important; align-items: center; margin: 0; }
  .nav-cta-group form button { padding: 8px 14px !important; }
}