/* ============================================================
   SINGAPORE MATH ACADEMY — Main Stylesheet
   style.css
   
   TABLE OF CONTENTS
   1.  CSS Variables (Brand Colours & Tokens)
   2.  Reset & Base
   3.  Navbar
   4.  Hero Section
   5.  Trust Strip
   6.  Section Shared Styles
   7.  Why SMA Section
   8.  Programmes Section
   9.  How It Works Section
   10. Testimonials Section
   11. Branches Section
   12. FAQ Section
   13. CTA Banner
   14. Footer
   15. WhatsApp Float Button
   16. Animations & Scroll Reveal
   17. Responsive (Tablet → Mobile)
   ============================================================ */


/* ─── 1. CSS VARIABLES ─── */
:root {
  --blue:       #1B5EA6;
  --blue-dark:  #144a85;
  --blue-light: #E8F2FC;
  --teal:       #5BBFBF;
  --teal-dark:  #3fa0a0;
  --teal-light: #E6F7F7;
  --green:      #4CAF50;
  --orange:     #F5A623;
  --red:        #E8382E;
  --cream:      #FAFBFF;
  --white:      #FFFFFF;
  --text:       #1A2744;
  --muted:      #5A6B8A;
  --border:     #DDE8F5;
  --shadow:     rgba(27,94,166,0.10);
}


/* ─── 2. RESET & BASE ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Lato', sans-serif;
  background:var(--cream);
  color:var(--text);
  overflow-x:hidden;
}


/* ─── 3. NAVBAR ─── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:68px;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--teal-light);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5vw;
  transition:box-shadow .3s;
}
nav.scrolled { box-shadow:0 4px 24px var(--shadow); }

.nav-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.nav-logo-icon {
  width:40px; height:40px;
  background:var(--teal);
  border-radius:10px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:3px; padding:6px;
}
.logo-dot {
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:900; color:#fff;
}
.ld-blue   { background:var(--blue); }
.ld-green  { background:var(--green); }
.ld-orange { background:var(--orange); }
.ld-red    { background:var(--red); }

.nav-logo-text { line-height:1.15; }
.nav-logo-text span:first-child {
  display:block;
  font-family:'Nunito', sans-serif;
  font-size:.92rem; font-weight:900;
  color:var(--blue);
  letter-spacing:.01em;
}
.nav-logo-text span:last-child {
  display:block;
  font-family:'Nunito', sans-serif;
  font-size:.78rem; font-weight:700;
  color:var(--teal);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.nav-links { display:flex; align-items:center; gap:1.8rem; list-style:none; }
.nav-links a {
  font-size:.88rem; font-weight:700;
  text-decoration:none; color:var(--muted);
  transition:color .2s;
  letter-spacing:.02em;
}
.nav-links a:hover { color:var(--blue); }
.nav-cta {
  background:var(--orange) !important;
  color:var(--white) !important;
  padding:.52rem 1.3rem;
  border-radius:50px;
  font-size:.85rem !important;
  box-shadow:0 3px 12px rgba(245,166,35,.35);
  transition:transform .2s, box-shadow .2s !important;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,166,35,.45) !important; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:24px; height:2.5px; background:var(--blue); border-radius:2px; transition:.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }


/* ─── 4. HERO ─── */
.hero {
  padding-top:68px;
  background:linear-gradient(160deg, var(--blue-light) 0%, var(--teal-light) 60%, #fff 100%);
  position:relative; overflow:hidden;
}
.hero-bubbles {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.bubble {
  position:absolute; border-radius:50%; opacity:.12;
  animation:float 8s ease-in-out infinite;
}
.b1 { width:320px;height:320px;background:var(--teal);top:-80px;right:5%;animation-delay:0s; }
.b2 { width:180px;height:180px;background:var(--orange);top:40%;left:-60px;animation-delay:2s; }
.b3 { width:120px;height:120px;background:var(--green);bottom:10%;right:15%;animation-delay:4s; }
@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-22px); }
}

.hero-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center;
  padding:5rem 5vw 5rem;
  position:relative; z-index:2;
}

.hero-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--white);
  border:1.5px solid var(--orange);
  border-radius:50px;
  padding:.35rem 1rem;
  font-size:.75rem; font-weight:700;
  color:var(--orange);
  letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:1.3rem;
  animation:fadeUp .7s ease both;
}
.hero-tag-dot { width:7px;height:7px;border-radius:50%;background:var(--orange);animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

.hero h1 {
  font-family:'Nunito', sans-serif;
  font-size:clamp(2.2rem,4vw,3.4rem);
  font-weight:900; line-height:1.05;
  color:var(--blue);
  margin-bottom:1.2rem;
  animation:fadeUp .7s .1s ease both;
}
.hero h1 em { font-style:italic; color:var(--teal-dark); }
.hero h1 .highlight {
  position:relative; display:inline-block;
  color:var(--blue);
}
.hero h1 .highlight::after {
  content:'';
  position:absolute; bottom:2px; left:0; right:0; height:3px;
  background:var(--orange); border-radius:2px;
  width:100%;
}

.hero-desc {
  font-size:1.05rem; line-height:1.8;
  color:var(--muted); margin-bottom:2rem;
  animation:fadeUp .7s .2s ease both;
}

.hero-actions {
  display:flex; gap:1rem; flex-wrap:wrap;
  animation:fadeUp .7s .3s ease both;
}

.hero-stats {
  display:flex; gap:2rem; margin-top:2.5rem; flex-wrap:wrap;
  animation:fadeUp .7s .4s ease both;
}
.hero-stat { text-align:left; }
.hero-stat-num {
  font-family:'Nunito', sans-serif;
  font-size:1.9rem; font-weight:900; color:var(--blue); line-height:1;
}
.hero-stat-num sup { font-size:1rem; color:var(--orange); }
.hero-stat-label { font-size:.75rem; font-weight:700; color:var(--muted); margin-top:.2rem; text-transform:uppercase; letter-spacing:.04em; }

/* Hero right — assessment card */
.hero-card {
  background:var(--white);
  border-radius:24px;
  box-shadow:0 20px 60px var(--shadow);
  padding:2.2rem;
  position:relative;
  animation:fadeUp .7s .15s ease both;
  border:2px solid var(--border);
}
.hero-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,var(--blue),var(--teal),var(--green));
  border-radius:22px 22px 0 0;
}
.hero-card-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--green); color:#fff;
  font-size:.72rem; font-weight:800;
  padding:.3rem .9rem; border-radius:50px;
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:1.1rem;
}
.hero-card h3 {
  font-family:'Nunito', sans-serif;
  font-size:1.4rem; font-weight:900; color:var(--blue);
  margin-bottom:.6rem; line-height:1.3;
}
.hero-card p {
  font-size:.85rem; color:var(--muted); line-height:1.65; margin-bottom:1.4rem;
}
.checklist { list-style:none; display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.6rem; }
.checklist li {
  display:flex; align-items:center; gap:.7rem;
  font-size:.85rem; color:var(--text); font-weight:600;
}
.check-icon {
  width:22px; height:22px; flex-shrink:0;
  background:var(--teal-light);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; color:var(--teal-dark); font-weight:900;
}
.hero-card-cta {
  display:block; text-align:center;
  background:var(--orange); color:#fff;
  padding:.9rem; border-radius:50px;
  font-size:.9rem; font-weight:800;
  text-decoration:none; letter-spacing:.03em;
  box-shadow:0 4px 16px rgba(245,166,35,.35);
  transition:transform .2s, box-shadow .2s;
}
.hero-card-cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,166,35,.45); }
.hero-card-note {
  text-align:center; font-size:.72rem; color:var(--muted);
  margin-top:.7rem;
}


/* ─── 5. TRUST STRIP ─── */
.trust-strip {
  background:var(--blue);
  padding:.9rem 5vw;
  display:flex; align-items:center; justify-content:center;
  gap:3rem; flex-wrap:wrap;
}
.trust-item {
  display:flex; align-items:center; gap:.55rem;
  color:rgba(255,255,255,.9);
  font-size:.8rem; font-weight:700; letter-spacing:.03em;
}
.trust-icon {
  width:28px; height:28px;
  background:rgba(255,255,255,.15);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}


/* ─── 6. SECTION SHARED STYLES ─── */
.section-label {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:800;
  color:var(--teal-dark); letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:.9rem;
}
.section-label-dot { width:8px;height:8px;border-radius:50%;background:var(--teal); }
.section-title {
  font-family:'Nunito', sans-serif;
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:900; color:var(--blue);
  line-height:1.2; letter-spacing:-.01em;
}
.section-title em { font-style:italic; color:var(--teal-dark); }
.section-title .u-orange { color:var(--orange); }

/* Shared buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--blue); color:var(--white);
  padding:.85rem 1.8rem;
  border-radius:50px;
  font-size:.9rem; font-weight:700;
  text-decoration:none; letter-spacing:.02em;
  box-shadow:0 4px 18px rgba(27,94,166,.3);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-primary:hover {
  background:var(--blue-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(27,94,166,.4);
}
.btn-teal {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--teal); color:var(--white);
  padding:.85rem 1.8rem;
  border-radius:50px;
  font-size:.9rem; font-weight:700;
  text-decoration:none; letter-spacing:.02em;
  box-shadow:0 4px 18px rgba(91,191,191,.3);
  transition:transform .2s, box-shadow .2s;
}
.btn-teal:hover { background:var(--teal-dark); transform:translateY(-2px); box-shadow:0 8px 28px rgba(91,191,191,.4); }


/* ─── 7. WHY SMA ─── */
.why {
  padding:6rem 5vw;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:center;
}
.why-subtitle {
  font-size:1rem; line-height:1.8; color:var(--muted);
  margin:1.2rem 0 2rem;
}
.pillars { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.pillar {
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:16px; padding:1.3rem;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  cursor:default;
}
.pillar:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 30px var(--shadow);
  border-color:var(--teal);
}
.pillar-icon { font-size:1.6rem; margin-bottom:.6rem; display:block; }
.pillar h4 {
  font-family:'Nunito', sans-serif;
  font-size:.9rem; font-weight:900; color:var(--blue); margin-bottom:.35rem;
}
.pillar p { font-size:.78rem; line-height:1.6; color:var(--muted); }

.cert-box {
  background:var(--blue);
  border-radius:24px; padding:2.5rem;
  color:#fff; position:relative; overflow:hidden;
}
.cert-box::after {
  content:'';
  position:absolute; bottom:-40px; right:-40px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(91,191,191,.15);
  pointer-events:none;
}
.cert-box-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.15);
  border-radius:50px; padding:.3rem .9rem;
  font-size:.72rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.9); margin-bottom:1rem;
}
.cert-box h3 {
  font-family:'Nunito', sans-serif;
  font-size:1.5rem; font-weight:900; margin-bottom:.8rem; line-height:1.3;
}
.cert-box p { font-size:.88rem; line-height:1.75; color:rgba(255,255,255,.75); margin-bottom:1.5rem; }
.cert-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.cert-tag {
  font-size:.72rem; font-weight:700;
  border:1.5px solid rgba(91,191,191,.5);
  color:var(--teal); padding:.28rem .75rem;
  border-radius:50px;
}
.rank-badge {
  margin-top:1.5rem;
  background:var(--orange);
  border-radius:12px; padding:1rem 1.2rem;
  display:flex; align-items:center; gap:1rem;
}
.rank-badge-num {
  font-family:'Nunito', sans-serif;
  font-size:2rem; font-weight:900; color:#fff; line-height:1;
}
.rank-badge-text { font-size:.78rem; color:rgba(255,255,255,.9); font-weight:600; line-height:1.45; }


/* ─── 8. PROGRAMMES ─── */
.programmes {
  background:var(--teal-light);
  padding:6rem 5vw;
}
.programmes-inner { max-width:1200px; margin:0 auto; }
.programmes-head {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3rem; flex-wrap:wrap; gap:1rem;
}
.programmes-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.prog-card {
  background:var(--white);
  border-radius:20px; padding:2rem;
  border:2px solid transparent;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.prog-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 50px var(--shadow);
  border-color:var(--teal);
}
.prog-icon-wrap {
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:1.2rem;
}
.prog-level {
  font-size:.7rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:.5rem;
}
.prog-card h3 {
  font-family:'Nunito', sans-serif;
  font-size:1.3rem; font-weight:900; color:var(--blue);
  margin-bottom:.7rem;
}
.prog-card p { font-size:.83rem; line-height:1.7; color:var(--muted); margin-bottom:1.3rem; flex:1; }
.prog-years {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; font-weight:700; color:var(--blue);
  background:var(--blue-light); padding:.3rem .85rem; border-radius:50px;
  align-self:flex-start; margin-top:auto;
}


/* ─── 9. HOW IT WORKS ─── */
.how {
  padding:6rem 5vw;
  max-width:1200px; margin:0 auto;
  text-align:center;
}
.how-head { margin-bottom:3.5rem; }
.steps {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem; position:relative;
}
.steps::before {
  content:'';
  position:absolute; top:36px; left:15%; right:15%; height:2px;
  background:repeating-linear-gradient(90deg,var(--teal) 0,var(--teal) 8px,transparent 8px,transparent 16px);
  z-index:0;
}
.step { position:relative; z-index:1; }
.step-num {
  width:72px; height:72px; margin:0 auto 1.2rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Nunito', sans-serif; font-size:1.5rem; font-weight:900; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.step h4 {
  font-family:'Nunito', sans-serif;
  font-size:1rem; font-weight:900; color:var(--blue); margin-bottom:.4rem;
}
.step p { font-size:.82rem; line-height:1.65; color:var(--muted); }


/* ─── 10. TESTIMONIALS ─── */
.testimonials {
  background:var(--blue);
  padding:6rem 5vw;
  position:relative; overflow:hidden;
}
.testimonials::before {
  content:'"';
  position:absolute; top:-2rem; left:4vw;
  font-family:'Nunito', sans-serif; font-size:22rem; font-weight:900;
  color:rgba(255,255,255,.04); line-height:1; pointer-events:none;
}
.testimonials-inner { max-width:1200px; margin:0 auto; }
.testimonials .section-title { color:#fff; }
.testimonials .section-label { color:rgba(255,255,255,.65); }
.testimonials .section-label-dot { background:var(--orange); }
.testi-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-top:3rem;
}
.testi-card {
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:20px; padding:1.8rem;
  transition:background .25s, border-color .25s;
}
.testi-card:hover {
  background:rgba(255,255,255,.1);
  border-color:rgba(91,191,191,.45);
}
.stars { color:var(--orange); font-size:.9rem; letter-spacing:2px; margin-bottom:1rem; }
.testi-text {
  font-size:.87rem; line-height:1.8;
  color:rgba(255,255,255,.8); font-style:italic; margin-bottom:1.5rem;
}
.testi-author {
  display:flex; align-items:center; gap:.8rem;
  border-top:1px solid rgba(255,255,255,.1); padding-top:1.1rem;
}
.testi-avatar {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Nunito', sans-serif; font-size:1rem; font-weight:900; color:#fff;
  flex-shrink:0;
}
.testi-name { font-size:.84rem; font-weight:700; color:#fff; }
.testi-detail { font-size:.72rem; color:rgba(255,255,255,.5); margin-top:.15rem; }


/* ─── 11. BRANCHES ─── */
.branches {
  padding:6rem 5vw;
  max-width:1200px; margin:0 auto;
}
.branches-head { margin-bottom:3rem; }
.branches-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
}
.branch-card {
  border:2px solid var(--border);
  border-radius:18px; padding:1.6rem;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  background:var(--white);
}
.branch-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 35px var(--shadow);
  border-color:var(--teal);
}
.branch-top {
  display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem;
}
.branch-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}
.branch-name {
  font-family:'Nunito', sans-serif;
  font-size:1rem; font-weight:900; color:var(--blue);
}
.branch-hq {
  font-size:.62rem; font-weight:800; background:var(--orange); color:#fff;
  padding:.15rem .5rem; border-radius:50px; letter-spacing:.05em; text-transform:uppercase;
  margin-left:auto; flex-shrink:0;
}
.branch-address {
  font-size:.8rem; line-height:1.65; color:var(--muted); margin-bottom:1rem;
}
.branch-links { display:flex; flex-direction:column; gap:.4rem; }
.branch-link {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; color:var(--blue);
  text-decoration:none; transition:color .2s;
}
.branch-link:hover { color:var(--teal-dark); }
.branch-link-icon {
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; flex-shrink:0;
}
.branch-hours {
  margin-top:.9rem; padding-top:.8rem;
  border-top:1px solid var(--border);
  font-size:.72rem; font-weight:700; color:var(--teal-dark);
  text-transform:uppercase; letter-spacing:.04em;
}


/* ─── 12. FAQ ─── */
.faq {
  background:var(--blue-light);
  padding:6rem 5vw;
}
.faq-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.6fr; gap:5rem; align-items:start;
}
.faq-left { position:sticky; top:88px; }
.faq-left p { font-size:.95rem; line-height:1.8; color:var(--muted); margin:1.2rem 0 2rem; }
.faq-list { display:flex; flex-direction:column; gap:0; }
.faq-item { border-bottom:1.5px solid var(--border); background:var(--white); border-radius:0; }
.faq-item:first-child { border-radius:16px 16px 0 0; }
.faq-item:last-child { border-radius:0 0 16px 16px; border-bottom:none; }
.faq-q {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.2rem 1.5rem; cursor:pointer;
  font-size:.9rem; font-weight:700; color:var(--text);
  transition:color .2s; user-select:none;
  border-radius:inherit;
}
.faq-q:hover { color:var(--blue); }
.faq-toggle {
  width:28px; height:28px; flex-shrink:0; border-radius:50%;
  background:var(--blue-light);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; color:var(--blue);
  transition:background .2s, transform .3s; line-height:1;
}
.faq-item.open .faq-toggle { background:var(--blue); color:#fff; transform:rotate(45deg); }
.faq-a {
  font-size:.85rem; line-height:1.75; color:var(--muted);
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .35s;
  padding:0 1.5rem;
}
.faq-item.open .faq-a { max-height:300px; padding:0 1.5rem 1.3rem; }


/* ─── 13. CTA BANNER ─── */
.cta-banner {
  background:linear-gradient(135deg, var(--teal) 0%, var(--blue) 100%);
  padding:5rem 5vw;
  text-align:center;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:'';
  position:absolute; top:-100px; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:rgba(255,255,255,.05); pointer-events:none;
}
.cta-banner-label {
  font-size:.75rem; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:.8rem;
}
.cta-banner h2 {
  font-family:'Nunito', sans-serif;
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:900; color:#fff;
  line-height:1.2; margin-bottom:1rem;
}
.cta-banner p { font-size:1rem; color:rgba(255,255,255,.75); margin-bottom:2.5rem; max-width:540px; margin-left:auto; margin-right:auto; }
.cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-orange {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--orange); color:#fff;
  padding:.9rem 2.2rem; border-radius:50px;
  font-size:.9rem; font-weight:800;
  text-decoration:none; letter-spacing:.03em;
  box-shadow:0 4px 18px rgba(245,166,35,.4);
  transition:transform .2s, box-shadow .2s;
}
.btn-orange:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,166,35,.55); }
.btn-white-outline {
  display:inline-flex; align-items:center; gap:.5rem;
  border:2px solid rgba(255,255,255,.55); color:#fff;
  padding:.9rem 2.2rem; border-radius:50px;
  font-size:.9rem; font-weight:700;
  text-decoration:none; letter-spacing:.03em;
  transition:border-color .2s, background .2s;
}
.btn-white-outline:hover { border-color:#fff; background:rgba(255,255,255,.1); }


/* ─── 14. FOOTER ─── */
footer {
  background:var(--text);
  color:rgba(255,255,255,.6);
  padding:4rem 5vw 2rem;
}
.footer-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:3rem; padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:2rem;
}
.footer-brand-logo {
  display:flex; align-items:center; gap:.7rem; margin-bottom:1rem;
}
.footer-logo-icon {
  width:38px; height:38px; background:var(--teal);
  border-radius:10px; display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:5px;
}
.footer-logo-text {
  font-family:'Nunito', sans-serif;
  font-size:1rem; font-weight:900; color:#fff; line-height:1.2;
}
.footer-brand p { font-size:.82rem; line-height:1.75; max-width:250px; margin-bottom:1.4rem; }
.footer-socials { display:flex; gap:.6rem; }
.social-btn {
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:rgba(255,255,255,.55);
  font-size:.72rem; font-weight:800;
  transition:border-color .2s, color .2s, background .2s;
}
.social-btn:hover { border-color:var(--teal); color:var(--teal); background:rgba(91,191,191,.1); }
.footer-col h5 {
  font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; margin-bottom:1.1rem;
}
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.footer-links a {
  font-size:.82rem; color:rgba(255,255,255,.5);
  text-decoration:none; transition:color .2s;
}
.footer-links a:hover { color:var(--teal); }
.footer-bottom {
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.footer-copy { font-size:.75rem; }
.footer-badges { display:flex; gap:.5rem; }
.footer-badge {
  font-size:.65rem; font-weight:700;
  border:1px solid rgba(255,255,255,.15);
  padding:.25rem .65rem; border-radius:50px;
  color:rgba(255,255,255,.4); letter-spacing:.05em; text-transform:uppercase;
}


/* ─── 15. WHATSAPP FLOAT ─── */
.wa-btn {
  position:fixed; bottom:1.8rem; right:1.8rem; z-index:999;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  transition:transform .2s, box-shadow .2s;
  animation:wa-pulse 2.5s ease infinite;
}
.wa-btn:hover { transform:scale(1.1); box-shadow:0 8px 30px rgba(37,211,102,.6); animation:none; }
@keyframes wa-pulse {
  0%,100% { box-shadow:0 4px 20px rgba(37,211,102,.45); }
  50% { box-shadow:0 4px 32px rgba(37,211,102,.7), 0 0 0 8px rgba(37,211,102,.1); }
}
.wa-tooltip {
  position:absolute; right:68px; top:50%; transform:translateY(-50%);
  background:var(--text); color:#fff;
  font-size:.75rem; font-weight:700;
  padding:.4rem .9rem; border-radius:50px;
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .2s;
}
.wa-btn:hover .wa-tooltip { opacity:1; }


.hero-card-urgency {
  text-align:center;
  font-size:.76rem; font-weight:700;
  color:var(--red);
  margin-top:.75rem;
  letter-spacing:.01em;
  line-height:1.5;
}

/* ─── HERO REASSURANCE LINE ─── */
.hero-reassurance {
  font-size:.8rem; font-weight:700;
  color:var(--teal-dark);
  margin-top:1rem;
  letter-spacing:.02em;
  animation:fadeUp .7s .35s ease both;
}


/* ─── AWARD PHOTO ─── */
.award-photo-wrap {
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 16px 48px rgba(27,94,166,.2);
}
.award-photo {
  width:100%; display:block;
  border-radius:20px;
  transition:transform .4s ease;
}
.award-photo-wrap:hover .award-photo {
  transform:scale(1.02);
}
.award-photo-caption {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(27,35,68,.92) 0%, rgba(27,35,68,.5) 70%, transparent 100%);
  padding:2rem 1.4rem 1.2rem;
  color:#fff;
  font-size:.8rem; line-height:1.6;
}
.award-caption-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--orange);
  border-radius:50px; padding:.2rem .75rem;
  font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:.5rem; display:block; width:fit-content;
}


/* ─── WHATSAPP MOBILE LABEL ─── */
/* Hidden on desktop (tooltip handles it), visible on touch screens */
.wa-mobile-label {
  display:none;
  font-size:.72rem; font-weight:800;
  color:#fff; white-space:nowrap;
  letter-spacing:.02em;
}


/* ─── MEET THE TEAM ─── */
.team {
  padding:6rem 5vw;
  background:var(--white);
}
.team-inner {
  max-width:1200px; margin:0 auto;
}
.team-head {
  display:flex; justify-content:space-between;
  align-items:flex-end; margin-bottom:3rem;
  flex-wrap:wrap; gap:1rem;
}
.team-head-text p {
  font-size:.95rem; line-height:1.8;
  color:var(--muted); margin-top:.8rem;
  max-width:520px;
}
.team-photos {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
.team-photo-card {
  border-radius:20px; overflow:hidden;
  position:relative;
  box-shadow:0 12px 40px var(--shadow);
  border:2px solid var(--border);
  transition:transform .3s, box-shadow .3s;
}
.team-photo-card:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 56px rgba(27,94,166,.18);
}
.team-photo-card img {
  width:100%; display:block;
  transition:transform .4s ease;
}
.team-photo-card:hover img {
  transform:scale(1.03);
}
.team-photo-label {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(27,35,68,.9) 0%, rgba(27,35,68,.5) 60%, transparent 100%);
  padding:2.5rem 1.4rem 1.2rem;
  color:#fff;
}
.team-photo-label h4 {
  font-family:'Nunito', sans-serif;
  font-size:1rem; font-weight:900;
  margin-bottom:.25rem;
}
.team-photo-label p {
  font-size:.75rem;
  color:rgba(255,255,255,.7);
  line-height:1.5;
}
.team-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--teal);
  border-radius:50px; padding:.18rem .7rem;
  font-size:.65rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
  color:#fff; margin-bottom:.45rem;
}

/* Responsive */
@media (max-width:640px) {
  .team-photos { grid-template-columns:1fr; }
  .team-head { flex-direction:column; align-items:flex-start; }
}


/* ─── 16. ANIMATIONS & SCROLL REVEAL ─── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }


/* ─── 17. RESPONSIVE ─── */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; padding:4rem 5vw; gap:3rem; }
  .why { grid-template-columns:1fr; gap:3rem; }
  .programmes-grid { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .steps::before { display:none; }
  .testi-grid { grid-template-columns:1fr 1fr; }
  .branches-grid { grid-template-columns:1fr 1fr; }
  .faq-inner { grid-template-columns:1fr; gap:2.5rem; }
  .faq-left { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; top:68px; left:0; right:0;
    background:#fff; padding:1.5rem 5vw;
    gap:1.2rem; z-index:199;
    border-bottom:2px solid var(--teal-light);
    box-shadow:0 8px 30px var(--shadow);
  }
  .hamburger { display:flex; }
  .programmes-grid { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .branches-grid { grid-template-columns:1fr; }
  .pillars { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .trust-strip { gap:1.2rem; }
  .cta-buttons { flex-direction:column; align-items:center; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .hero h1 { font-size:2rem; }

  /* WhatsApp button expands to show label on mobile */
  .wa-btn {
    width:auto;
    border-radius:50px;
    padding:0 1.2rem 0 .9rem;
    gap:.55rem;
  }
  .wa-mobile-label { display:block; }
  .wa-tooltip { display:none; }

  /* Award photo caption smaller on mobile */
  .award-photo-caption { font-size:.72rem; padding:1.5rem 1rem .9rem; }
}