:root{
  --primary:#0F6A67;
  --secondary:#CFC7A4;
  --bg:#F8F5EA;
  --ink:#232323;
  --gold:#B89B5E;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Tajawal', sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}

.font-cairo{ font-family:'Cairo', sans-serif; }
.font-tajawal{ font-family:'Tajawal', sans-serif; }

.text-primary{ color:var(--primary); }
.text-secondary{ color:var(--secondary); }
.text-ink{ color:var(--ink); }
.bg-bg{ background:var(--bg); }
.bg-primary{ background-color:var(--primary); }

/* ===== Header ===== */
#site-header{ background:transparent; }
#site-header.scrolled{
  background:rgba(248,245,234,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(15,106,103,0.08);
}
.nav-link{
  position:relative; color:var(--ink); transition:color .25s;
}
.nav-link::after{
  content:''; position:absolute; right:0; bottom:-6px; width:0; height:2px;
  background:var(--primary); transition:width .3s ease;
}
.nav-link:hover{ color:var(--primary); }
.nav-link:hover::after{ width:100%; }
.nav-link-mobile{ color:var(--ink); padding:.4rem 0; }

.btn-primary-sm{
  background:var(--primary); color:#fff; font-family:'Tajawal',sans-serif; font-weight:600;
  padding:.6rem 1.6rem; border-radius:999px; font-size:.9rem; transition:transform .25s, box-shadow .25s;
}
.btn-primary-sm:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,106,103,.3); }

/* ===== Hero ===== */
.hero-bg{
  background:
    radial-gradient(circle at 80% 20%, rgba(207,199,164,.35), transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(15,106,103,.12), transparent 50%),
    var(--bg);
}
.hero-eyebrow{ border:1px solid rgba(15,106,103,.18); }
.btn-primary{
  background:var(--primary); color:#fff; font-family:'Tajawal',sans-serif; font-weight:700;
  padding:.95rem 2.2rem; border-radius:999px; transition:transform .3s, box-shadow .3s; display:inline-block;
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(15,106,103,.35); }
.btn-outline{
  border:1.5px solid var(--primary); color:var(--primary); font-family:'Tajawal',sans-serif; font-weight:700;
  padding:.95rem 2.2rem; border-radius:999px; transition:all .3s; display:inline-block;
}
.btn-outline:hover{ background:var(--primary); color:#fff; transform:translateY(-3px); }

.glass-shadow{ box-shadow:0 30px 60px -10px rgba(15,106,103,.45); }
.glass-card{
  background:rgba(255,255,255,.65); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.5); border-radius:1.25rem;
  box-shadow:0 12px 30px rgba(15,106,103,.12);
}

.scroll-cue{ opacity:.8; }

/* ===== Sections shared ===== */
.section-eyebrow{
  display:inline-block; font-family:'Tajawal',sans-serif; font-weight:600; font-size:.85rem;
  color:var(--primary); background:rgba(15,106,103,.08); padding:.4rem 1.1rem; border-radius:999px; margin-bottom:1rem;
}
.section-title{
  font-family:'Cairo',sans-serif; font-weight:800; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.4;
}

/* ===== Programs ===== */
.program-card{
  background:#fff; border-radius:1.5rem; padding:2rem; border:1px solid rgba(15,106,103,.08);
  transition:transform .35s ease, box-shadow .35s ease;
}
.program-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(15,106,103,.15); }
.program-visual{
  width:100%; height:140px; border-radius:1.1rem; display:flex; align-items:center; justify-content:center;
}
.program-link{
  font-family:'Tajawal',sans-serif; font-weight:700; color:var(--primary); font-size:.92rem; transition:gap .2s;
}
.program-link:hover{ text-decoration:underline; }

/* ===== Features ===== */
.feature-card{
  background:#fff; border-radius:1.25rem; padding:2rem; border:1px solid rgba(15,106,103,.06);
  transition:transform .3s;
}
.feature-card:hover{ transform:translateY(-5px); }
.feature-icon{
  width:54px; height:54px; border-radius:1rem; background:rgba(15,106,103,.08); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;
}
.feature-icon svg{ width:26px; height:26px; }

/* ===== Stats ===== */
.stat-item{ position:relative; }

/* ===== Packages ===== */
.package-card{
  background:#fff; border-radius:1.5rem; padding:2.5rem 2rem; border:1px solid rgba(15,106,103,.08);
  position:relative; transition:transform .3s, box-shadow .3s;
}
.package-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(15,106,103,.12); }
.package-featured{
  background:linear-gradient(160deg,var(--primary),#0A4A47); color:#fff; transform:scale(1.03);
}
.featured-badge{
  position:absolute; top:-14px; right:50%; transform:translateX(50%);
  background:var(--gold); color:#fff; font-family:'Tajawal',sans-serif; font-weight:700; font-size:.8rem;
  padding:.35rem 1.1rem; border-radius:999px;
}
.package-list{ list-style:none; padding:0; margin:0 0 2rem; font-family:'Tajawal',sans-serif; }
.package-list li{
  padding:.55rem 0; border-top:1px solid rgba(0,0,0,.06); display:flex; align-items:center; gap:.6rem; font-size:.95rem;
}
.package-featured .package-list li{ border-top:1px solid rgba(255,255,255,.15); }
.package-list li::before{
  content:'✓'; color:var(--primary); font-weight:700;
}
.package-featured .package-list li::before{ color:var(--secondary); }
.btn-package{
  width:100%; padding:.85rem; border-radius:999px; background:var(--primary); color:#fff;
  font-family:'Tajawal',sans-serif; font-weight:700; transition:transform .25s, opacity .25s;
}
.btn-package:hover{ transform:translateY(-2px); opacity:.92; }
.btn-package-light{ background:#fff; color:var(--primary); }

/* ===== Testimonials ===== */
.testimonial-track{ display:flex; overflow:hidden; }
.testimonial-slide{
  flex:0 0 100%; text-align:center; background:#fff; border-radius:1.5rem; padding:3rem 2rem;
}
#testimonial-dots span{
  width:9px; height:9px; border-radius:50%; background:rgba(15,106,103,.25); cursor:pointer; transition:background .3s,width .3s;
  display:inline-block;
}
#testimonial-dots span.active{ background:var(--primary); width:24px; border-radius:999px; }

/* ===== FAQ ===== */
.faq-item{ border-bottom:1px solid rgba(15,106,103,.12); }
.faq-question{
  width:100%; text-align:right; display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 0; font-family:'Cairo',sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink);
  background:none; border:none; cursor:pointer;
}
.faq-icon{ width:20px; height:20px; color:var(--primary); transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-icon{ transform:rotate(180deg); }
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease;
}
.faq-item.open .faq-answer{ max-height:200px; padding-bottom:1.3rem; }
.faq-answer p{ font-family:'Tajawal',sans-serif; color:rgba(35,35,35,.65); line-height:1.9; font-size:.95rem; }

/* ===== CTA ===== */
.btn-cta-light{
  background:#fff; color:var(--primary); font-family:'Tajawal',sans-serif; font-weight:800;
  padding:1rem 2.6rem; border-radius:999px; display:inline-block; transition:transform .3s, box-shadow .3s;
}
.btn-cta-light:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.2); }

/* ===== Footer ===== */
.footer-link{ transition:color .25s; }
.footer-link:hover{ color:var(--secondary); }

/* ===== Floating WhatsApp ===== */
.floating-whatsapp{
  position:fixed; bottom:24px; left:24px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:#1FAA59; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(31,170,89,.45);
  animation:wa-pulse 2.6s infinite;
}
@keyframes wa-pulse{
  0%{ box-shadow:0 10px 28px rgba(31,170,89,.45); }
  50%{ box-shadow:0 10px 28px rgba(31,170,89,.45), 0 0 0 10px rgba(31,170,89,.12); }
  100%{ box-shadow:0 10px 28px rgba(31,170,89,.45); }
}

/* ===== Reveal animation base state (GSAP controls play-in) ===== */
.reveal-up{ opacity:0; transform:translateY(28px); }

@media (max-width:1024px){
  .package-featured{ transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1 !important; transform:none !important; }
  .floating-whatsapp{ animation:none; }
}