/* ============================================================
   Al-Naeim Construction Co. Ltd — Reusable Components
   ============================================================ */

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding: 1rem 1.9rem; border-radius: 999px;
  font-size:.85rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  overflow:hidden; isolation:isolate;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active{ transform: scale(.96); }

.btn--primary{
  background: var(--g-orange); color:#181005;
  box-shadow: 0 8px 30px -8px rgba(255,106,26,.6);
}
.btn--primary::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(135deg, var(--c-orange-light), var(--c-orange));
  opacity:0; transition: opacity var(--dur-fast) var(--ease-out);
}
.btn--primary:hover::before{ opacity:1; }
.btn--primary:hover{ box-shadow: 0 12px 38px -6px rgba(255,106,26,.75); }

.btn--ghost{
  background: rgba(255,255,255,.04); color: var(--c-white);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
}
.btn--ghost:hover{ border-color: var(--c-orange); background: rgba(255,106,26,.08); }

.btn--sm{ padding:.7rem 1.3rem; font-size:.72rem; }

/* Magnetic wrapper target (JS adds transform via GSAP quickTo) */
[data-cursor="magnetic"]{ will-change: transform; }

/* ---------- Glass Card ---------- */
.glass-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.7);
}

/* ---------- Neumorphic surface (used for equipment/spec panels) ---------- */
.neu-panel{
  background: linear-gradient(145deg, #17181b, #101113);
  border-radius: var(--radius-md);
  box-shadow: 8px 8px 20px rgba(0,0,0,.55), -6px -6px 18px rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
}

/* ---------- Badge / Pill ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .8rem; border-radius:999px;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color: var(--c-orange-light); background: rgba(255,106,26,.1); border:1px solid rgba(255,106,26,.25);
}

/* ---------- Section heading kit ---------- */
.section-head{ max-width: 720px; margin-bottom: 3.5rem; }
.section-head .pill{ margin-bottom: 1rem; }
.section-head h2{ font-size: clamp(2.4rem, 5vw, 4.2rem); }
.section-head p{ color: var(--c-muted); margin-top:1rem; max-width: 540px; }