:root {
  --gold: #c9a84c;
  --gold-light: #e8cc7a;
  --gold-pale: #f5e6b8;
  --black: #080808;
  --dark: #0e0e0e;
  --card: #141414;
  --border: rgba(201,168,76,0.2);
  --text: #d8d0c0;
  --text-dim: rgba(216,208,192,0.62);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Tajawal','Arial',sans-serif;
  background:var(--black);
  color:var(--text);
  overflow-x:hidden;
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("../images/logo.jpeg");
  background-repeat:repeat;
  background-size:280px;
  opacity:.03;
  pointer-events:none;
  z-index:0;
  mix-blend-mode:screen;
}
body::after {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:999;
  opacity:.4;
}
header, main, footer, section { position:relative; z-index:2; }
header {
  position:fixed;
  top:0; left:0; right:0;
  height:82px;
  padding:0 58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(8,8,8,.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border-bottom:1px solid transparent;
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index:100;
}
header.scrolled {
  background:rgba(8,8,8,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,168,76,0.35);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--gold-light);
  text-decoration:none;
  font-weight:700;
}
.brand img {
  width:46px;
  height:46px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid var(--border);
}
.logo-text {
  font-family:'Playfair Display',serif;
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--gold);
  text-transform:uppercase;
}
nav {
  display:flex;
  gap:30px;
  align-items:center;
}
nav a {
  color:var(--text-dim);
  text-decoration:none;
  font-size:.92rem;
  letter-spacing:.02em;
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position:relative;
}
nav a::after {
  content:'';
  position:absolute;
  bottom:-6px; right:0;
  width:0; height:1px;
  background:var(--gold);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
nav a:hover, nav a.active { color:var(--gold); }
nav a:hover::after, nav a.active::after { width:100%; }
.menu-toggle { display:none; background:none; border:1px solid var(--border); color:var(--gold); padding:9px 12px; font-size:1.1rem; }

.hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:145px 24px 90px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,.08) 0%, transparent 70%),
    linear-gradient(180deg,#0e0e0e 0%,#080808 100%);
}
.hero::before, .page-hero::before {
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:720px; height:720px;
  border:1px solid rgba(201,168,76,.08);
  border-radius:50%;
}
.hero::after, .page-hero::after {
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:500px; height:500px;
  border:1px solid rgba(201,168,76,.12);
  border-radius:50%;
}
.hero-content, .page-hero-content { position:relative; z-index:3; max-width:960px; }
.hero-logo {
  width:240px;
  max-width:78vw;
  margin-bottom:34px;
  border-radius:22px;
  filter:drop-shadow(0 0 22px rgba(201,168,76,.24));
}
.eyebrow {
  font-size:.78rem;
  letter-spacing:.12em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:18px;
}
h1 {
  font-size:clamp(2.7rem,6vw,5.6rem);
  color:white;
  line-height:1.08;
  margin-bottom:16px;
}
h1 span, h2 span { color:var(--gold); }
.hero-subtitle {
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  letter-spacing:.15em;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-bottom:26px;
}
.divider {
  width:86px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0 auto 28px;
}
.hero-desc, .lead {
  font-size:1.12rem;
  line-height:2;
  color:var(--text-dim);
  max-width:760px;
  margin:0 auto 38px;
}
.hero-actions {
  display:inline-flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 34px;
  border:1px solid var(--gold);
  color:var(--gold);
  text-decoration:none;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background:transparent;
  cursor:pointer;
}
.btn:hover {
  background:var(--gold);
  color:#000;
  transform:translateY(-4px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.25);
}
.btn-filled {
  background:var(--gold);
  color:#000;
}
.btn-filled:hover { background:var(--gold-light); }
section { padding:110px 60px; }
.container { max-width:1280px; margin:0 auto; }
.section-label {
  color:var(--gold);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.72rem;
  display:block;
  margin-bottom:16px;
}
.section-title {
  font-size:clamp(2rem,4vw,3.3rem);
  color:#fff;
  line-height:1.2;
  margin-bottom:22px;
}
.section-line {
  width:62px;
  height:2px;
  background:var(--gold);
  margin-bottom:30px;
}
.center { text-align:center; }
.center .section-line { margin:0 auto 30px; }

.stats-bar {
  background:var(--card);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:48px 60px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat-item { text-align:center; padding:20px; border-left:1px solid var(--border); }
.stat-item:last-child { border-right:1px solid var(--border); }
.stat-number {
  font-family:'Playfair Display',serif;
  font-size:3rem;
  color:var(--gold);
  font-weight:700;
}
.stat-label { color:var(--text-dim); font-size:.88rem; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); }
.card {
  background:rgba(20,20,20,.72);
  border-left:1px solid var(--border);
  padding:42px 32px;
  position:relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card {
  cursor: pointer;
}
.card:hover {
  background:rgba(201,168,76,.07);
  transform:translateY(-8px);
  box-shadow: 0 16px 36px rgba(201, 168, 76, 0.22);
}
.card h3 { color:#fff; font-size:1.22rem; margin-bottom:13px; }
.card p { color:var(--text-dim); line-height:1.9; font-size:.94rem; }
.card .num {
  font-family:'Playfair Display',serif;
  color:rgba(201,168,76,.08);
  position:absolute;
  top:20px; left:25px;
  font-size:4rem;
  font-weight:900;
}
.icon {
  color:var(--gold);
  font-size:2rem;
  margin-bottom:24px;
}
.visual-frame {
  min-height:420px;
  border:1px solid var(--border);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(201,168,76,.12) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(201,168,76,.06) 0%, transparent 50%),
    var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
}
.visual-frame img {
  width:300px;
  max-width:90%;
  border-radius:24px;
  filter:drop-shadow(0 0 24px rgba(201,168,76,.22));
}
.values {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:32px;
}
.value {
  display:flex;
  gap:12px;
  color:var(--text-dim);
}
.value::before {
  content:'';
  width:7px; height:7px;
  margin-top:10px;
  border-radius:50%;
  background:var(--gold);
  flex:0 0 auto;
}
.page-hero {
  min-height:55vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:150px 24px 80px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,.08) 0%, transparent 70%),
    linear-gradient(180deg,#0e0e0e 0%,#080808 100%);
  overflow:hidden;
}
.list-box {
  border:1px solid var(--border);
}
.list-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 28px;
  border-bottom:1px solid var(--border);
  color:var(--text);
}
.list-item:last-child { border-bottom:0; }
.list-item:hover { background:rgba(201,168,76,.045); }
.contact-detail {
  display:flex;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid var(--border);
}
.contact-detail:first-of-type { border-top:1px solid var(--border); }
.contact-icon {
  width:42px; height:42px;
  border:1px solid var(--border);
  color:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-label {
  color:var(--text-dim);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:5px;
}
.contact-value { color:var(--text); }
.contact-form { display:flex; flex-direction:column; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label { color:var(--text-dim); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
input, textarea {
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  padding:14px 18px;
  font-family:'Tajawal',sans-serif;
  outline:none;
  resize:none;
}
input:focus, textarea:focus { border-color:var(--gold); }
.social-strip, .footer-social {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.social-strip a, .footer-social a {
  width:42px; height:42px;
  border:1px solid var(--border);
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:.35s;
}
.social-strip a:hover, .footer-social a:hover {
  background:var(--gold);
  color:#000;
  transform:translateY(-4px);
}
.floating-whatsapp {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:150;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--gold);
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:1.7rem;
  box-shadow:0 18px 45px rgba(201,168,76,.28);
  animation:floatPulse 2.6s ease-in-out infinite;
}
@keyframes floatPulse {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-7px) scale(1.04); }
}
.reveal { opacity:0; transform:translateY(34px); transition:.85s; }
.reveal.active { opacity:1; transform:translateY(0); }

footer {
  background:#050505;
  border-top:1px solid var(--border);
  padding:58px 60px 38px;
}
.footer-inner {
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.footer-logo { color:var(--gold); font-size:1.35rem; font-weight:700; }
.footer-logo span {
  display:block;
  font-family:'Playfair Display',serif;
  font-size:.72rem;
  letter-spacing:.26em;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-top:4px;
}
.footer-center { text-align:center; color:var(--text-dim); font-size:.85rem; }
.footer-copy { color:rgba(216,208,192,.38); margin-top:7px; font-size:.76rem; }
.footer-links { display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a { color:var(--text-dim); text-decoration:none; font-size:.85rem; }
.footer-links a:hover { color:var(--gold); }

@media (max-width:1024px) {
  .grid-2 { grid-template-columns:1fr; gap:55px; }
  .cards-grid { grid-template-columns:repeat(2,1fr); }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  header { padding:0 20px; height:78px; }
  .logo-text { display:none; }
  .menu-toggle { display:block; }
  nav {
    position:absolute;
    top:78px; left:18px; right:18px;
    background:rgba(8,8,8,.97);
    border:1px solid var(--border);
    display:none;
    flex-direction:column;
    padding:18px;
    gap:18px;
  }
  nav.open { display:flex; }
  section { padding:82px 22px; }
  .cards-grid { grid-template-columns:1fr; }
  .stats-bar { grid-template-columns:repeat(2,1fr); padding:36px 20px; }
  .hero-actions, .btn { width:100%; }
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-links, .footer-social, .social-strip { justify-content:center; }
}

/* Arabic RTL polish */
body { direction: rtl; }
.logo-text { letter-spacing: .03em; }
nav a, .btn, .eyebrow, .section-label, .contact-label { letter-spacing: .03em; }
.card { border-left: none; border-right: 1px solid var(--border); }
.card .num { left: auto; right: 25px; }
.stat-item { border-left: none; border-right: 1px solid var(--border); }
.stat-item:last-child { border-left: 1px solid var(--border); }

/* Interactive Product Modal styling */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.product-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.4s ease;
}
.modal-wrapper {
  position: relative;
  z-index: 1001;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 90%;
  max-width: 650px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  box-shadow: 0 25px 50px -12px rgba(201, 168, 76, 0.15);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s;
}
.product-modal.open .modal-wrapper {
  transform: scale(1) translateY(0);
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(201, 168, 76, 0.25);
}
.modal-close {
  position: absolute;
  top: 20px;
  left: 20px; /* RTL placement */
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
}
.modal-close:hover {
  color: var(--gold-light);
  transform: rotate(90deg);
}
.modal-header-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.modal-icon {
  font-size: 2.2rem;
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
  width: 68px;
  height: 68px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 168, 76, 0.25);
  flex-shrink: 0;
}
.modal-title {
  font-size: 1.8rem;
  color: #fff;
  font-weight: 700;
  margin: 0;
}
.modal-desc {
  color: var(--text-dim);
  line-height: 1.8;
  font-size: 1rem;
  margin-bottom: 30px;
}
.specs-section {
  margin-bottom: 35px;
}
.specs-title {
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  padding-bottom: 8px;
  text-transform: uppercase;
  font-weight: 700;
}
.table-container {
  overflow-x: auto;
}
.specs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  direction: rtl;
}
.specs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
  font-size: 0.92rem;
  line-height: 1.6;
}
.specs-table tr td:first-child {
  color: var(--gold-light);
  font-weight: 500;
  width: 30%;
  border-left: 1px solid rgba(201, 168, 76, 0.1);
}
.specs-table tr td:last-child {
  color: var(--text);
}
.specs-table tr:nth-child(even) {
  background: rgba(201, 168, 76, 0.02);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(201, 168, 76, 0.15);
  padding-top: 24px;
}
.modal-actions .btn {
  width: auto;
}

@media (max-width: 760px) {
  .modal-wrapper {
    padding: 30px 20px;
    width: 95%;
  }
  .modal-header-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .specs-table tr td:first-child {
    width: 40%;
  }
}

/* Projects Gallery Custom Layout */
.projects-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}
.project-card-v2 {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card-v2:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 16px 36px rgba(201, 168, 76, 0.18);
}
.project-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card-v2:hover .project-image img {
  transform: scale(1.08);
}
.project-badge {
  position: absolute;
  top: 15px;
  right: 15px; /* RTL right aligned */
  background: var(--gold);
  color: #000;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.project-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.project-info h3 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
}
.project-client {
  color: var(--gold-light);
  font-size: 0.82rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
}
.project-desc {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 20px;
  flex-grow: 1;
  text-align: right;
}
.project-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
  padding-top: 16px;
  justify-content: flex-start;
}
.meta-tag {
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
  color: var(--text);
  padding: 3px 10px;
  font-size: 0.76rem;
  border-radius: 4px;
}
@media (max-width: 1024px) {
  .projects-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .projects-gallery {
    grid-template-columns: 1fr;
  }
}

/* Google Maps Dark-Mode Embed */
.map-container {
  margin-top: 32px;
}
.map-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.map-wrapper {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  filter: grayscale(0.4) brightness(0.72) contrast(1.05) sepia(0.2) hue-rotate(5deg);
  transition: filter 0.45s ease, box-shadow 0.45s ease;
}
.map-wrapper:hover {
  filter: grayscale(0.1) brightness(0.82) contrast(1.02) sepia(0.1);
  box-shadow: 0 12px 40px rgba(201, 168, 76, 0.18);
  border-color: var(--gold);
}
.map-wrapper iframe {
  display: block;
  width: 100%;
}