/* =========================================================
   Custom site styles (shared across all pages)
   navy #182B49 · gold #AA7F42 (light #CCB28E / dark #7F5F32)
   ========================================================= */

:root{
  --ease: cubic-bezier(.22,1,.36,1);
}

* { scroll-behavior: smooth; }
body{ font-family:'Cairo', sans-serif; color:#16202B; background:#F2E8DB; }
h1,h2,h3,h4,.font-display{ font-family:'Cairo', sans-serif; }

::selection{ background:#CCB28E; color:#182B49; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid #AA7F42; outline-offset:3px;
}

/* ---------------- Eyebrow (section label) ---------------- */
.scan-eyebrow{ position:relative; display:inline-flex; align-items:center; gap:10px; }
.scan-eyebrow::before{ content:''; width:34px; height:1px; background:linear-gradient(90deg,#AA7F42,transparent); }
.scan-eyebrow::after{ content:''; width:34px; height:1px; background:linear-gradient(270deg,#AA7F42,transparent); }

/* ---------------- Scan-reveal image effect (signature motif) ---------------- */
.scan-reveal{ position:relative; overflow:hidden; }
.scan-reveal img{ display:block; width:100%; height:100%; object-fit:cover; }
.scan-reveal .scan-mask{
  position:absolute; inset:0; background:#F8F5EF; transform-origin:right center;
  transform:scaleX(1); transition:transform 1.1s var(--ease); z-index:2;
}
.scan-reveal .scan-beam{
  position:absolute; top:0; bottom:0; width:2px; right:100%;
  background:linear-gradient(180deg, transparent, #AA7F42 20%, #CCB28E 50%, #AA7F42 80%, transparent);
  box-shadow:0 0 18px 2px rgba(181,141,89,.7); z-index:3; opacity:0; transition:opacity .3s;
}
.scan-reveal.is-visible .scan-mask{ transform:scaleX(0); }
.scan-reveal.is-visible .scan-beam{ opacity:1; right:0%; transition:right 1.1s var(--ease), opacity .3s; }
@media (prefers-reduced-motion: reduce){ .scan-reveal .scan-mask, .scan-reveal .scan-beam{ transition:none !important; } }

/* ---------------- Buttons ---------------- */
.btn-gold{ background:#AA7F42; color:#fff; transition:.3s var(--ease); }
.btn-gold:hover{ background:#7F5F32; }
.btn-navy{ background:#182B49; color:#fff; transition:.3s var(--ease); }
.btn-navy:hover{ background:#0F233E; }
.btn-ghost{ border:1px solid rgba(255,255,255,.55); color:#fff; transition:.3s var(--ease); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-outline-navy{ border:1px solid #182B49; color:#182B49; transition:.3s var(--ease); }
.btn-outline-navy:hover{ background:#182B49; color:#fff; }

/* ---------------- Cards / reveal ---------------- */
.card-lift{ transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.card-lift:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(17,42,73,.25); }
.fade-up{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.fade-up.is-visible{ opacity:1; transform:translateY(0); }

.num{ font-variant-numeric: tabular-nums; }

/* ---------------- Nav ---------------- */
.nav-link{ position:relative; }
.nav-link::after{ content:''; position:absolute; right:0; bottom:-6px; width:0; height:1px; background:#AA7F42; transition:width .3s var(--ease); }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:#182B49; font-weight:600; }

/* ---------------- Image fallback (defensive against broken hotlinks) ---------------- */
.img-fallback{ background:linear-gradient(135deg,#8C95A4,#34445F); }
.img-fallback::after{
  content:''; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='18' stroke='white' stroke-width='1' fill='none'/><circle cx='20' cy='20' r='12' stroke='white' stroke-width='1' fill='none'/><circle cx='20' cy='20' r='3' fill='white'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:44px; opacity:.4;
}

/* ---------------- Hero carousel ---------------- */
.hero-carousel{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease);
}
.hero-slide.active{ opacity:1; z-index:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-dots{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:20; }
.hero-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.6); cursor:pointer; transition:.3s; padding:0; }
.hero-dot.active{ background:#CCB28E; border-color:#CCB28E; width:22px; border-radius:5px; }

.hero-scan{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }

.from-navy-900{ --tw-gradient-from:#111E32 var(--tw-gradient-from-position);--tw-gradient-to:rgba(17,30,50,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to); }
.via-navy-900\/70{ --tw-gradient-to:rgba(17,30,50,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(17,30,50,.7) var(--tw-gradient-via-position),var(--tw-gradient-to); }
.to-navy-900\/20{ --tw-gradient-to:rgba(17,30,50,.2) var(--tw-gradient-to-position); }
.to-navy-900\/40{ --tw-gradient-to:rgba(17,30,50,.4) var(--tw-gradient-to-position); }

.hero-scan::after{
  content:''; position:absolute; top:0; bottom:0; width:1px; left:0;
  background:linear-gradient(180deg, transparent, rgba(181,141,89,.9) 30%, rgba(225,182,122,.9) 55%, rgba(181,141,89,.9) 80%, transparent);
  box-shadow:0 0 24px 3px rgba(181,141,89,.55);
  animation: sweep 6s ease-in-out infinite;
}
@keyframes sweep{
  0%{ left:0%; opacity:0; } 8%{ opacity:1; } 50%{ left:100%; opacity:1; } 58%{ opacity:0; } 100%{ left:100%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .hero-scan::after{ animation:none; display:none; } }

/* ---------------- WhatsApp floating button ---------------- */
.wa-float{
  position:fixed; left:20px; bottom:20px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -6px rgba(0,0,0,.35);
  transition:transform .3s var(--ease);
}
@media (min-width: 768px){
  .wa-float{ display:flex; }
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(37,211,102,.5); animation:wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(.85); opacity:.8; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ opacity:0; }
}
.wa-tooltip{
  position:absolute; right:70px; bottom:14px; background:#182B49; color:#fff;
  font-size:12.5px; padding:8px 14px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transform:translateX(6px); transition:.3s var(--ease);
}
.wa-float:hover .wa-tooltip{ opacity:1; transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .wa-float::before{ animation:none; } }

/* ---------------- Page loader (logo draws itself in, like a scan) ---------------- */
#pageLoader{
  position:fixed; inset:0; z-index:9999;
  background:#F2E8DB;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
#pageLoader.is-loaded{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-logo-wrap{ position:relative; width:160px; height:160px; }
.loader-logo-img{
  width:160px; height:160px; object-fit:contain;
  clip-path: inset(0 100% 0 0);
  animation: loaderDraw 2s cubic-bezier(.65,0,.35,1) infinite;
}
.loader-beam{
  position:absolute; top:2px; bottom:2px; width:3px; right:100%;
  background:linear-gradient(180deg, transparent, #AA7F42 20%, #CCB28E 50%, #AA7F42 80%, transparent);
  box-shadow:0 0 12px 2px rgba(170,127,66,.7);
  animation: loaderBeam 2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes loaderDraw{
  0%{ clip-path: inset(0 100% 0 0); }
  50%{ clip-path: inset(0 0% 0 0); }
  80%{ clip-path: inset(0 0% 0 0); }
  100%{ clip-path: inset(0 100% 0 0); }
}
@keyframes loaderBeam{
  0%{ right:100%; opacity:0; }
  6%{ opacity:1; }
  50%{ right:0%; opacity:1; }
  56%{ opacity:0; }
  80%{ opacity:0; right:0%; }
  100%{ right:100%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .loader-logo-img{ animation:none; clip-path:none; }
  .loader-beam{ display:none; }
}

/* ---------------- Divider ---------------- */
.divider-v{ width:1px; background:linear-gradient(180deg, transparent, #DCDFE4, transparent); }

/* ---------------- Misc ---------------- */
.chip{ border:1px solid #DCDFE4; border-radius:20px; padding:6px 14px; font-size:12.5px; color:#5D6B80; transition:.25s var(--ease); cursor:pointer; }
.chip.active, .chip:hover{ background:#182B49; border-color:#182B49; color:#fff; }