/* =========================================================
   RWDA ALASIMA — Glass & Aluminum | Main Stylesheet
   Design tokens: charcoal / deep blue / metallic gold on white
   ========================================================= */

:root{
  --c-charcoal: #1B1F24;
  --c-charcoal-soft: #2B2F36;
  --c-blue: #0C2A47;
  --c-blue-soft: #123A5E;
  --c-gold: #B08D57;
  --c-gold-light: #D8BC8A;
  --c-white: #FFFFFF;
  --c-bg-alt: #F5F6F8;
  --c-text: #262A2F;
  --c-text-muted: #61686F;
  --c-border: #E4E6EA;

  --font-display: 'Almarai', 'Segoe UI', sans-serif;
  --font-body: 'Cairo', 'Segoe UI', sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-soft: 0 10px 40px rgba(12, 42, 71, 0.08);
  --shadow-strong: 0 20px 60px rgba(12, 42, 71, 0.16);

  --grid-line: rgba(184, 141, 87, 0.18);
}

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-white);
  overflow-x: hidden;
}

h1, h2, h3, h4, .display-font{
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--c-charcoal);
}

a{ text-decoration: none; }
:focus-visible{ outline: 3px solid var(--c-gold); outline-offset: 2px; }

.text-gold{ color: var(--c-gold) !important; }
.bg-charcoal{ background: var(--c-charcoal) !important; }
.bg-blue{ background: var(--c-blue) !important; }
.bg-alt{ background: var(--c-bg-alt) !important; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--c-gold);
  background: rgba(176,141,87,.08);
  border: 1px solid rgba(176,141,87,.28);
  padding: .35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background: var(--c-gold);
  display:inline-block;
}

.section-title{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height:1.25; }
.section-lead{ color: var(--c-text-muted); font-size: 1.05rem; max-width: 680px; }

/* =========== Skip link =========== */
.skip-link{
  position:absolute; right:1rem; top:-60px; z-index:2000;
  background:var(--c-charcoal); color:#fff; padding:.6rem 1.2rem; border-radius: var(--radius-sm);
  transition: top .2s ease;
}
.skip-link:focus{ top: 1rem; }

/* =========== Top Utility Bar =========== */
.topbar{
  background: var(--c-charcoal);
  color: rgba(255,255,255,.85);
  font-size:.85rem;
}
.topbar a{ color:#fff; }
.topbar .divider{ opacity:.25; }

/* =========== Navbar =========== */
.navbar-main{
  transition: all .35s ease;
  padding: 1.1rem 0;
  background: transparent;
  position: absolute; inset-inline:0; top: 40px; z-index: 1030;
}
.navbar-main.solid{
  position: fixed; top:0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  padding: .7rem 0;
}
.navbar-main .navbar-brand{ display:flex; align-items:center; gap:.6rem; }
.navbar-main .brand-name{ font-family: var(--font-display); font-weight:800; font-size:1.15rem; color:#fff; line-height:1.1; }
.navbar-main .brand-sub{ font-size:.68rem; color: rgba(255,255,255,.65); letter-spacing:.04em; }
.navbar-main.solid .brand-name{ color: var(--c-charcoal); }
.navbar-main.solid .brand-sub{ color: var(--c-text-muted); }

.navbar-main .nav-link{
  color: rgba(255,255,255,.92) !important;
  font-weight: 700;
  font-size: .95rem;
  padding: .5rem 1rem !important;
  position: relative;
}
.navbar-main.solid .nav-link{ color: var(--c-charcoal) !important; }
.navbar-main .nav-link.active,
.navbar-main .nav-link:hover{ color: var(--c-gold) !important; }

.brand-mark{
  width:44px; height:44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-light));
  display:flex; align-items:center; justify-content:center;
  color: var(--c-charcoal); font-weight:900; font-family: var(--font-display);
  flex-shrink:0;
}

.btn-gold{
  background: linear-gradient(135deg, var(--c-gold), #9C7A46);
  color:#fff !important; border:none; font-weight:700;
  padding:.65rem 1.5rem; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(176,141,87,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(176,141,87,.45); color:#fff; }

.btn-outline-light-gold{
  border:1.5px solid rgba(255,255,255,.5); color:#fff !important; font-weight:700;
  padding:.6rem 1.4rem; border-radius:999px; background: rgba(255,255,255,.06);
  transition: all .25s ease;
}
.btn-outline-light-gold:hover{ background:#fff; color: var(--c-charcoal) !important; border-color:#fff; }

.btn-charcoal{
  background: var(--c-charcoal); color:#fff !important; font-weight:700;
  padding:.65rem 1.5rem; border-radius:999px; border:none;
  transition: all .25s ease;
}
.btn-charcoal:hover{ background: var(--c-blue); color:#fff !important; }

.btn-whatsapp-inline{
  background:#25D366; color:#fff !important; font-weight:700;
  padding:.65rem 1.5rem; border-radius:999px; border:none;
  transition: transform .25s ease;
}
.btn-whatsapp-inline:hover{ transform: translateY(-2px); color:#fff !important; }

/* =========== Hero =========== */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex; align-items:center;
  background: linear-gradient(180deg, #0E1216 0%, var(--c-charcoal) 45%, var(--c-blue) 130%);
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15) 80%);
  opacity:.9;
}
.hero::after{
  content:"";
  position:absolute; left:-10%; top:-20%; width:70%; height:140%;
  background: radial-gradient(closest-side, rgba(184,141,87,.16), transparent 70%);
  pointer-events:none;
}
.hero .hero-content{ position:relative; z-index:2; padding-top: 100px; }
.hero h1{ color:#fff; font-size: clamp(2.2rem, 5vw, 3.7rem); line-height:1.2; }
.hero p.lead{ color: rgba(255,255,255,.78); font-size:1.15rem; max-width:600px; }

.facade-visual{
  position:relative; z-index:2;
  aspect-ratio: 4/5; border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 54px),
    linear-gradient(160deg, rgba(184,141,87,.22), rgba(12,42,71,.55) 60%, rgba(27,31,36,.9));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-strong);
  overflow:hidden;
}
.facade-visual::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 40%);
}
.facade-visual .badge-float{
  position:absolute; bottom:1.25rem; inset-inline:1.25rem;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  color: var(--c-charcoal); border-radius: var(--radius-md);
  padding: 1rem 1.2rem; box-shadow: var(--shadow-soft);
}

.cta-row .btn{ margin-bottom:.5rem; }

.hero-stats{
  position:relative; z-index:3;
  background:#fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  margin-top: -70px;
  padding: 1.75rem 1rem;
}
.hero-stats .stat-num{
  font-family: var(--font-display); font-weight:800; font-size:2.1rem; color: var(--c-blue);
}
.hero-stats .stat-label{ color: var(--c-text-muted); font-size:.9rem; font-weight:700; }

/* =========== Section spacing =========== */
.section{ padding: 5.5rem 0; }
@media (max-width: 767px){ .section{ padding: 3.5rem 0; } }

/* =========== Cards =========== */
.glass-card{
  position:relative;
  background:#fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.75rem;
  height:100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.glass-card::before{
  content:"";
  position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--c-gold), var(--c-blue));
  border-radius: 999px 0 0 999px;
  opacity:0; transition: opacity .3s ease;
}
[dir="rtl"] .glass-card::before{ border-radius: 0 999px 999px 0; }
.glass-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong); }
.glass-card:hover::before{ opacity:1; }

.icon-tile{
  width:56px; height:56px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(184,141,87,.14), rgba(12,42,71,.1));
  color: var(--c-blue);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  margin-bottom: 1.1rem;
}

.why-item{ display:flex; gap: 1rem; align-items:flex-start; }
.why-item .icon-tile{ margin-bottom:0; flex-shrink:0; }

.service-cat-card{
  background: var(--c-charcoal); color:#fff; border-radius: var(--radius-lg);
  padding: 2rem; height:100%;
  box-shadow: var(--shadow-soft);
}
.service-cat-card ul{ list-style:none; padding:0; margin:0; }
.service-cat-card ul li{
  padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:.6rem; font-size:.95rem; color: rgba(255,255,255,.85);
}
.service-cat-card ul li:last-child{ border-bottom:none; }
.service-cat-card ul li i{ color: var(--c-gold); }
.service-cat-card.blue{ background: var(--c-blue); }

/* =========== Projects / Gallery =========== */
.project-card{
  border-radius: var(--radius-lg); overflow:hidden; position:relative;
  box-shadow: var(--shadow-soft); height:100%;
}
.project-thumb{
  aspect-ratio: 4/3; position:relative; overflow:hidden;
  background: linear-gradient(150deg, var(--c-blue), var(--c-charcoal));
}
.project-thumb::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 36px),
                     repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 36px);
}
.project-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 10%, transparent 60%);
  color:#fff; padding:1.25rem; opacity:0; transition: opacity .3s ease;
}
.project-card:hover .project-overlay{ opacity:1; }
.project-card .cat-badge{
  position:absolute; top:1rem; inset-inline-start:1rem; z-index:2;
  background: var(--c-gold); color:#fff; font-size:.75rem; font-weight:700;
  padding:.3rem .8rem; border-radius:999px;
}

/* =========== Testimonials =========== */
.testimonial-card{
  background:#fff; border-radius: var(--radius-lg); padding: 2rem;
  box-shadow: var(--shadow-soft); height:100%; border: 1px solid var(--c-border);
}
.testimonial-card .stars{ color: var(--c-gold); letter-spacing:2px; }
.testimonial-avatar{
  width:48px; height:48px; border-radius:50%;
  background: linear-gradient(135deg, var(--c-blue), var(--c-charcoal));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
}

/* =========== FAQ =========== */
.accordion-item{ border:1px solid var(--c-border) !important; border-radius: var(--radius-md) !important; overflow:hidden; margin-bottom: .75rem; }
.accordion-button{ font-weight:700; font-family: var(--font-display); background:#fff; }
.accordion-button:not(.collapsed){ color: var(--c-blue); background: var(--c-bg-alt); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; }

/* =========== Final CTA =========== */
.final-cta{
  background: linear-gradient(120deg, var(--c-blue), var(--c-charcoal));
  border-radius: var(--radius-lg);
  color:#fff; padding: 3.5rem 2rem; position:relative; overflow:hidden;
}
.final-cta::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 48px),
                     repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 48px);
}

/* =========== Footer =========== */
.site-footer{ background: var(--c-charcoal); color: rgba(255,255,255,.7); }
.site-footer h5{ color:#fff; font-family: var(--font-display); }
.site-footer a{ color: rgba(255,255,255,.65); }
.site-footer a:hover{ color: var(--c-gold); }
.site-footer .footer-divider{ border-color: rgba(255,255,255,.1); }
.social-icon{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition: background .25s ease;
}
.social-icon:hover{ background: var(--c-gold); color:#fff; }

/* =========== Sticky action buttons =========== */
.sticky-actions{
  position:fixed; bottom:1.25rem; inset-inline-end:1.25rem; z-index:1050;
  display:flex; flex-direction:column; gap:.75rem;
}
.sticky-actions .btn-fab{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem; box-shadow: var(--shadow-strong);
  transition: transform .25s ease;
}
.sticky-actions .btn-fab:hover{ transform: scale(1.08); }
.fab-whatsapp{ background:#25D366; }
.fab-call{ background: var(--c-gold); }

/* =========== Breadcrumb / page header =========== */
.page-header{
  background: linear-gradient(160deg, var(--c-charcoal), var(--c-blue));
  color:#fff; padding: 8.5rem 0 3.5rem;
  position:relative; overflow:hidden;
}
.page-header::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 56px),
                     repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 56px);
}
.page-header .breadcrumb{ position:relative; z-index:2; }
.page-header .breadcrumb-item, .page-header .breadcrumb-item a{ color: rgba(255,255,255,.7); }
.page-header .breadcrumb-item.active{ color: var(--c-gold); }
.page-header h1{ color:#fff; position:relative; z-index:2; }

/* =========== Forms =========== */
.form-control, .form-select{
  border-radius: var(--radius-sm); border: 1.5px solid var(--c-border);
  padding: .75rem 1rem; font-size:.95rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--c-gold); box-shadow: 0 0 0 .2rem rgba(176,141,87,.15);
}
.form-label{ font-weight:700; font-size:.9rem; color: var(--c-charcoal); }

.contact-info-card{
  background: var(--c-charcoal); color:#fff; border-radius: var(--radius-lg); padding: 2.25rem;
}
.contact-info-card .item{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.contact-info-card .item:last-child{ margin-bottom:0; }
.map-frame{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); border: none; width:100%; height:100%; min-height:320px; }

/* =========== Utilities =========== */
.divider-gold{ width:60px; height:3px; background: var(--c-gold); border-radius:2px; margin-bottom:1.25rem; }
.badge-soft{
  background: rgba(12,42,71,.06); color: var(--c-blue); font-weight:700;
  padding:.4rem 1rem; border-radius:999px; font-size:.8rem;
}
[data-aos]{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-aos].aos-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-aos]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

.back-to-top{
  position:fixed; bottom:1.25rem; inset-inline-start:1.25rem; z-index:1050;
  width:46px; height:46px; border-radius:50%; background: var(--c-charcoal); color:#fff;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition: all .3s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; }