/* ============================================================
   AMPLE DREAMS EDUCOM — PREMIUM ED-TECH v5
   Clean · Minimal · Professional
   ============================================================ */

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#ffffff;
  color:#1a1a2e;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit}

/* ── DESIGN TOKENS ── */
:root{
  /* Purple brand */
  --purple-deep:#3b1fa8;
  --purple-main:#4f2fd4;
  --purple-mid:#6b46e0;
  --purple-light:#8b6ef5;
  --purple-pale:#f0ebff;
  --purple-bg:#faf8ff;

  /* Gold / Yellow accent */
  --gold:#f5c518;
  --gold-warm:#fbbf24;
  --gold-deep:#d97706;

  /* Neutrals */
  --white:#ffffff;
  --off-white:#fafafa;
  --gray-50:#f8f9fa;
  --gray-100:#f1f3f5;
  --gray-200:#e9ecef;
  --gray-300:#dee2e6;
  --gray-400:#ced4da;
  --gray-500:#adb5bd;
  --gray-600:#6c757d;
  --gray-700:#495057;
  --gray-800:#343a40;
  --gray-900:#212529;
  --ink:#1a1a2e;

  /* Gradients */
  --grad-hero:linear-gradient(135deg,#2d1b8e 0%,#4f2fd4 40%,#7c3aed 100%);
  --grad-purple:linear-gradient(135deg,#4f2fd4,#7c3aed);
  --grad-gold:linear-gradient(135deg,#f5c518,#fbbf24,#f59e0b);
  --grad-card:linear-gradient(145deg,#ffffff,#faf8ff);

  /* Shadows */
  --shadow-xs:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.07),0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:0 4px 20px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.05);
  --shadow-lg:0 10px 40px rgba(0,0,0,0.1),0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:0 20px 60px rgba(0,0,0,0.12),0 8px 20px rgba(0,0,0,0.07);
  --shadow-purple:0 8px 32px rgba(79,47,212,0.25);
  --shadow-gold:0 8px 28px rgba(245,197,24,0.35);

  /* Radii */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-full:9999px;

  /* Transitions */
  --ease:cubic-bezier(0.23,1,0.32,1);
  --t-fast:all 0.2s var(--ease);
  --t:all 0.35s var(--ease);
  --t-slow:all 0.55s var(--ease);
}

/* ── LAYOUT ── */
.container{max-width:1160px;margin:0 auto;padding:0 32px}
.section{padding:96px 0}
.section-center{text-align:center}

/* ── SCROLL REVEAL ── */
[data-animate]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);
}
[data-animate].visible{opacity:1;transform:translateY(0)}

/* ── SECTION LABELS ── */
.section-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.68rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--purple-main);
  background:var(--purple-pale);
  border:1px solid rgba(79,47,212,0.15);
  padding:5px 14px;border-radius:var(--r-full);
  margin-bottom:12px;
}
.section-label.light{
  color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.2);
}
.section-title{
  font-size:clamp(1.75rem,3.5vw,2.6rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:12px;
}
.section-title.light{color:#fff}
.section-sub{
  font-size:1rem;
  color:var(--gray-600);
  line-height:1.75;
  max-width:520px;
  margin-bottom:48px;
}
.section-sub.center{margin-left:auto;margin-right:auto}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 32px;
  border-radius:var(--r-full);
  font-family:'Poppins',sans-serif;
  font-size:0.9rem;font-weight:700;
  letter-spacing:0.02em;
  transition:var(--t);
  cursor:pointer;border:none;
  white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn-primary{
  background:var(--grad-gold);
  color:#1a1a2e;
  box-shadow:var(--shadow-gold);
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 36px rgba(245,197,24,0.45);
  filter:brightness(1.06);
}
.btn-purple{
  background:var(--grad-purple);
  color:#fff;
  box-shadow:var(--shadow-purple);
}
.btn-purple:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 36px rgba(79,47,212,0.4);
}
.btn-outline{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,0.5);
}
.btn-outline:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.9);
  transform:translateY(-3px) scale(1.03);
}
.btn-outline-dark{
  background:transparent;
  color:var(--purple-main);
  border:2px solid var(--purple-main);
}
.btn-outline-dark:hover{
  background:var(--purple-main);
  color:#fff;
  transform:translateY(-3px) scale(1.03);
}

/* ============================================================
   TOP ANNOUNCEMENT BAR
   ============================================================ */
.top-bar{
  background:var(--purple-main);
  color:#fff;
  text-align:center;
  padding:8px 20px;
  font-size:0.8rem;
  font-weight:500;
  letter-spacing:0.01em;
  line-height:1.4;
  position:fixed;
  top:0;left:0;right:0;
  z-index:1002;
  transition:transform 0.35s var(--ease);
  white-space:nowrap;          /* prevent wrapping on desktop */
  overflow:hidden;
}

/* Inner text wrapper */
.top-bar-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  margin:0;
}

/* Desktop label — hidden on mobile */
.top-bar-desktop{
  color:rgba(255,255,255,0.88);
  font-weight:400;
}

/* Mobile label — hidden on desktop */
.top-bar-mobile{
  display:none;
  color:rgba(255,255,255,0.88);
  font-weight:400;
}

/* Clickable phone number */
.top-bar-phone{
  color:#fde68a;
  font-weight:800;
  font-size:0.88rem;
  letter-spacing:0.04em;
  text-decoration:none;
  white-space:nowrap;
  padding:2px 8px;
  border-radius:5px;
  transition:background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color:transparent;
}
.top-bar-phone:hover{
  background:rgba(255,255,255,0.15);
}
.top-bar-phone:active{
  transform:scale(0.95);
  background:rgba(255,255,255,0.22);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:#ffffff;
  border-bottom:1px solid var(--gray-200);
  box-shadow:var(--shadow-sm);
  transition:top 0.35s var(--ease),box-shadow 0.35s ease,background 0.35s ease;
  /* header sits below the top-bar; JS updates this dynamically */
}
.header.scrolled{
  top:0;
  box-shadow:var(--shadow-md);
}
.navbar{
  display:flex;align-items:center;
  justify-content:space-between;
  height:68px;
}
/* Logo */
.logo-wrap{
  display:inline-flex;align-items:center;
  transition:var(--t-fast);
}
.logo-wrap img{height:42px;width:auto;object-fit:contain;display:block}
.logo:hover .logo-wrap{transform:scale(1.04)}

/* Hamburger — 3 bars to X */
.menu-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  z-index: 1000001;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.menu-toggle:hover { background: var(--gray-100); }
.menu-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  left: 50%;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.25s ease, width 0.3s ease, top 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.menu-toggle span:nth-child(1){width:24px;top:15px;transform:translateX(-50%)}
.menu-toggle span:nth-child(2){width:18px;top:22px;transform:translateX(-50%)}
.menu-toggle span:nth-child(3){width:24px;top:29px;transform:translateX(-50%)}
.menu-toggle.open span:nth-child(1){width:24px;top:22px;transform:translateX(-50%) rotate(-45deg)}
.menu-toggle.open span:nth-child(2){opacity:0;width:0}
.menu-toggle.open span:nth-child(3){width:24px;top:22px;transform:translateX(-50%) rotate(45deg)}

/* ============================================================
   HAMBURGER MENU - SIDE PANEL
   ============================================================ */

.nav-menu { display: none !important; }
body.menu-open { overflow: hidden; }

/* Dark backdrop */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(10,5,30,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.25,0.46,0.45,0.94), visibility 0.4s ease;
}
.menu-overlay.active { opacity: 1; visibility: visible; }

/* White panel slides from right */
.menu-overlay-content {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 85vw;
  height: 100vh;
  background: #ffffff;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0 40px;
  border-radius: 8px 0 0 8px;
  box-shadow: -8px 0 48px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  overflow-y: auto;
}
.menu-overlay.active .menu-overlay-content { transform: translateX(0); }

/* Close button */
.menu-overlay-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #f5f5f5;
  color: #2d2d2d;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.menu-overlay-close:hover { background: #e5e5e5; transform: scale(1.08); }

/* Nav list */
.menu-overlay-content ul { list-style:none; padding:0; margin:0; width:100%; }
.menu-overlay-content ul li {
  position: relative;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.menu-overlay.active li:nth-child(1){opacity:1;transform:translateX(0);transition-delay:0.08s}
.menu-overlay.active li:nth-child(2){opacity:1;transform:translateX(0);transition-delay:0.13s}
.menu-overlay.active li:nth-child(3){opacity:1;transform:translateX(0);transition-delay:0.18s}
.menu-overlay.active li:nth-child(4){opacity:1;transform:translateX(0);transition-delay:0.23s}
.menu-overlay.active li:nth-child(5){opacity:1;transform:translateX(0);transition-delay:0.28s}
.menu-overlay.active li:nth-child(6){opacity:1;transform:translateX(0);transition-delay:0.33s}
.menu-overlay.active li:nth-child(7){opacity:1;transform:translateX(0);transition-delay:0.38s}
.menu-overlay.active li:nth-child(8){opacity:1;transform:translateX(0);transition-delay:0.43s}
.menu-overlay.active li:nth-child(9){opacity:1;transform:translateX(0);transition-delay:0.48s}

/* Left accent bar on hover */
.menu-overlay-content ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 4px; height: 60%;
  background: #4f2fd4;
  border-radius: 0 2px 2px 0;
  transition: transform 0.2s ease;
}
.menu-overlay-content ul li:hover::before { transform: translateY(-50%) scaleY(1); }

/* Links */
.menu-overlay-content ul li a {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 32px 0 28px;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.menu-overlay-content ul li a:hover { background:#f5f5f5; color:#4f2fd4; transform:scale(1.02); }
.menu-terms-link { color: #d97706 !important; }
.menu-terms-link:hover { background: #fffbeb !important; color: #b45309 !important; }

@media (max-width: 768px) {
  .menu-overlay-content { width:100vw; max-width:100vw; border-radius:0; }
}

body.menu-open .wa-fab,
body.menu-open .call-fab { display: none !important; }


/* Background slider */
.hero-slider{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-slider .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  will-change:opacity,transform;
}
.hero-slider .slide.active{
  opacity:1;
  animation:heroZoom 10s ease-in-out forwards;
}
@keyframes heroZoom{
  from{transform:scale(1)}
  to{transform:scale(1.07)}
}

/* Mobile: fix zoom/crop issue */
@media(max-width:768px){
  .hero-slider{height:70vh}
  .hero-slider .slide{object-position:center top}
}

/* Gradient overlay — purple + subtle bottom dark for text legibility */
.hero-overlay{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 40%),
    linear-gradient(
      110deg,
      rgba(45,27,142,0.78) 0%,
      rgba(79,47,212,0.60) 50%,
      rgba(124,58,237,0.40) 100%
    );
}

/* Orbs */
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:3}
.orb1{width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,0.3) 0%,transparent 70%);top:-150px;right:-100px}
.orb2{width:360px;height:360px;background:radial-gradient(circle,rgba(245,197,24,0.12) 0%,transparent 70%);bottom:-60px;left:-60px}
.orb3{width:240px;height:240px;background:radial-gradient(circle,rgba(139,110,245,0.2) 0%,transparent 70%);top:40%;left:55%}

/* Hero content — left aligned */
.hero-content{
  position:relative;z-index:4;
  max-width:680px;
  padding:0 32px;
  animation:heroIn 0.9s var(--ease) both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* Badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  color:rgba(255,255,255,0.92);
  font-size:0.73rem;font-weight:600;letter-spacing:0.1em;
  padding:7px 18px;border-radius:var(--r-full);
  margin-bottom:24px;
  backdrop-filter:blur(8px);
}

/* H1 */
.hero-title{
  font-size:clamp(2rem,5.5vw,4rem);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-0.025em;
  margin-bottom:14px;
}
.hero-welcome{
  display:block;
  color:rgba(255,255,255,0.92);
  font-size:0.55em;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:6px;
  text-shadow:0 1px 8px rgba(0,0,0,0.3);
}
.hero-accent{
  display:block;
  background:linear-gradient(135deg,#fde68a,#f5c518,#fbbf24);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
  filter:drop-shadow(0 2px 12px rgba(245,197,24,0.4));
}

/* Tagline */
.hero-tagline{
  font-size:clamp(0.95rem,2vw,1.2rem);
  font-weight:600;
  color:rgba(255,255,255,0.88);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:18px;
  text-shadow:0 1px 6px rgba(0,0,0,0.3);
}

/* Description */
.hero-sub{
  font-size:clamp(0.85rem,1.5vw,1rem);
  color:rgba(255,255,255,0.78);
  line-height:1.85;
  margin-bottom:32px;
  max-width:560px;
  text-shadow:0 1px 4px rgba(0,0,0,0.25);
}

/* Tag pills */
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.hero-tag{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  color:rgba(255,255,255,0.9);
  font-size:0.72rem;font-weight:600;
  padding:6px 14px;border-radius:var(--r-full);
  letter-spacing:0.04em;
  backdrop-filter:blur(4px);
}

/* Buttons */
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}

/* Stats */
.hero-stats{
  display:inline-flex;align-items:center;gap:24px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(16px);
  border-radius:var(--r-lg);
  padding:16px 32px;
  flex-wrap:wrap;
}
.stat{text-align:center}
.stat-num{
  display:block;font-size:1.55rem;font-weight:800;
  color:#fff;line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,0.2);
}
.stat-label{
  display:block;font-size:0.62rem;font-weight:500;
  color:rgba(255,255,255,0.6);
  letter-spacing:0.12em;text-transform:uppercase;margin-top:3px;
}
.stat-div{width:1px;height:30px;background:rgba(255,255,255,0.18)}

/* Scroll hint */
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:4}
.scroll-hint span{
  display:block;width:1.5px;height:38px;
  background:linear-gradient(to bottom,rgba(255,255,255,0.6),transparent);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%,100%{opacity:0.2;transform:scaleY(0.5) translateY(-6px)}
  50%{opacity:0.8;transform:scaleY(1) translateY(0)}
}

/* ============================================================
   SOCIAL BAR
   ============================================================ */
.social-bar{
  background:var(--gray-900);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:12px 28px;
  display:flex;align-items:center;justify-content:center;
  gap:18px;flex-wrap:wrap;
}
.social-bar-label{
  font-size:0.65rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(255,255,255,0.4);
  white-space:nowrap;
}
.social-bar-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.social-bar-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 16px;border-radius:var(--r-full);
  font-size:0.76rem;font-weight:700;color:#fff;
  transition:var(--t);white-space:nowrap;
}
.sbb-yt{background:#ff0000;box-shadow:0 2px 10px rgba(255,0,0,0.22)}
.sbb-yt:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(255,0,0,0.38)}
.sbb-ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);box-shadow:0 2px 10px rgba(253,29,29,0.22)}
.sbb-ig:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(253,29,29,0.38)}
.sbb-fb{background:#1877f2;box-shadow:0 2px 10px rgba(24,119,242,0.22)}
.sbb-fb:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(24,119,242,0.38)}
.sbb-google{background:#fff;color:#3c4043;box-shadow:0 2px 10px rgba(0,0,0,0.12)}
.sbb-google:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(66,133,244,0.32)}

/* ============================================================
   GALLERY SLIDER
   ============================================================ */
.slider-section{padding:80px 0 96px;background:var(--gray-50);text-align:center}
.slider-section .section-title{color:var(--ink)}
.slider-wrap{
  max-width:900px;margin:36px auto 28px;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-xl);
  aspect-ratio:900/460;        /* exact image ratio — no fixed px */
  width:100%;
}
.slider-track{display:flex;height:100%;transition:transform 0.85s cubic-bezier(0.25,0.46,0.45,0.94);will-change:transform}
.slider-track img,.gallery-slide{
  min-width:100%;flex-shrink:0;
  width:100%;height:100%;
  object-fit:contain;          /* full image always visible */
  object-position:center;
  background:#ffffff;          /* white fill for any letterbox */
  display:block;
}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--gray-300);border:none;cursor:pointer;
  transition:var(--t);padding:0;
}
.dot.active{
  background:var(--purple-main);width:24px;
  border-radius:4px;box-shadow:0 0 0 3px rgba(79,47,212,0.18);
}

/* ============================================================
   ABOUT US SECTION
   ============================================================ */
.about-section{
  padding:72px 0;
  background:linear-gradient(160deg,#faf8ff 0%,#f0ebff 50%,#faf8ff 100%);
}
.about-card{
  background:#fff;
  border-radius:var(--r-xl);
  padding:48px 52px;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(79,47,212,0.08);
  position:relative;
  overflow:hidden;
}
.about-bg-pattern{
  position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(circle,rgba(79,47,212,0.06) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.about-header,.about-timeline,.about-preview,.about-expand,.about-btn-wrap{
  position:relative;z-index:1;
}
.about-header{margin-bottom:32px}
.about-title{
  font-size:clamp(1.7rem,3vw,2.4rem);
  font-weight:800;color:var(--ink);
  letter-spacing:-0.02em;margin-bottom:6px;
}
.about-subtitle{font-size:1rem;color:var(--gray-600);font-weight:400;line-height:1.6}
.about-subtitle strong{color:var(--purple-main)}

/* Timeline */
.about-timeline{
  display:flex;align-items:center;gap:0;
  margin-bottom:36px;overflow-x:auto;
  scrollbar-width:none;padding-bottom:4px;
}
.about-timeline::-webkit-scrollbar{display:none}
.atl-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.atl-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--gray-300);border:2px solid #fff;
  box-shadow:0 0 0 2px var(--gray-300);transition:var(--t);
}
.atl-item-active .atl-dot{
  background:var(--purple-main);
  box-shadow:0 0 0 3px rgba(79,47,212,0.25);
}
.atl-year{font-size:0.82rem;font-weight:800;color:var(--ink);letter-spacing:0.02em}
.atl-item-active .atl-year{color:var(--purple-main)}
.atl-label{
  font-size:0.65rem;font-weight:600;color:var(--gray-500);
  letter-spacing:0.06em;text-transform:uppercase;
  text-align:center;max-width:80px;line-height:1.3;
}
.atl-item-active .atl-label{color:var(--purple-mid)}
.atl-line{
  flex:1;min-width:40px;height:2px;
  background:linear-gradient(90deg,var(--gray-200),var(--purple-pale));
  margin-bottom:28px;
}

/* Preview */
.about-preview p{font-size:1rem;color:var(--gray-700);line-height:1.85}
.about-preview strong{color:var(--ink)}

/* Expandable */
.about-expand{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 0.45s cubic-bezier(0.23,1,0.32,1);
  overflow:hidden;
}
.about-expand.open{grid-template-rows:1fr}
.about-expand-inner{overflow:hidden;padding-top:0;transition:padding-top 0.45s ease}
.about-expand.open .about-expand-inner{padding-top:20px}
.about-expand-inner p{
  font-size:0.96rem;color:var(--gray-700);
  line-height:1.85;margin-bottom:16px;
}
.about-expand-inner p:last-child{margin-bottom:0}
.about-expand-inner strong{color:var(--purple-deep);font-weight:700}

/* Button */
.about-btn-wrap{margin-top:28px;display:flex;justify-content:center}
.about-toggle-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 30px;border-radius:var(--r-full);
  background:var(--grad-purple);color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:0.88rem;font-weight:700;letter-spacing:0.04em;
  border:none;cursor:pointer;
  box-shadow:var(--shadow-purple);transition:var(--t);
}
.about-toggle-btn:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 12px 32px rgba(79,47,212,0.4);
}
.btn-arrow{transition:transform 0.4s cubic-bezier(0.23,1,0.32,1);flex-shrink:0}
.about-toggle-btn.expanded .btn-arrow{transform:rotate(180deg)}

@media(max-width:768px){
  .about-card{padding:32px 24px}
  .atl-line{min-width:24px}
}
@media(max-width:480px){
  .about-card{padding:24px 18px;border-radius:var(--r-lg)}
  .about-title{font-size:1.5rem}
  .about-preview p,.about-expand-inner p{font-size:0.9rem}
  .atl-label{font-size:0.6rem;max-width:60px}
}

/* ============================================================
   COURSES SECTION — Premium Card Grid
   ============================================================ */

/* Keyframes */
@keyframes cs-float{
  0%,100%{transform:translateY(0) scale(1);opacity:0.15}
  50%{transform:translateY(-18px) scale(1.1);opacity:0.28}
}
@keyframes cs-blob{
  0%,100%{border-radius:60% 40% 55% 45%/50% 60% 40% 50%;transform:scale(1)}
  50%{border-radius:40% 60% 45% 55%/60% 40% 60% 40%;transform:scale(1.06)}
}
@keyframes cs-shimmer{
  0%{transform:translateX(-120%) skewX(-12deg)}
  100%{transform:translateX(280%) skewX(-12deg)}
}

/* Section wrapper */
.cs-section{
  position:relative;
  padding:96px 0 104px;
  overflow:hidden;
  background:linear-gradient(145deg,#2a0d8f 0%,#4f2fd4 35%,#6b3de8 65%,#3b1fa8 100%);
  background-size:200% 200%;
}

/* Background layers */
.cs-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cs-bg-glow{
  position:absolute;border-radius:50%;
  filter:blur(90px);
}
.cs-bg-glow-1{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(139,92,246,0.4) 0%,transparent 70%);
  top:-200px;right:-150px;
}
.cs-bg-glow-2{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(245,197,24,0.12) 0%,transparent 70%);
  bottom:-150px;left:-100px;
}
.cs-bg-glow-3{
  width:350px;height:350px;
  background:radial-gradient(circle,rgba(79,47,212,0.5) 0%,transparent 70%);
  top:40%;left:40%;
}

/* Animated blobs */
.cs-bg-shapes{position:absolute;inset:0;overflow:hidden}
.cs-shape{
  position:absolute;
  background:rgba(255,255,255,0.04);
  animation:cs-blob 8s ease-in-out infinite;
}
.cs-shape-1{width:320px;height:320px;top:5%;left:5%;animation-delay:0s}
.cs-shape-2{width:240px;height:240px;top:55%;right:8%;animation-delay:2.5s}
.cs-shape-3{width:180px;height:180px;bottom:10%;left:45%;animation-delay:5s}

/* Floating particles */
.cs-particles{position:absolute;inset:0;overflow:hidden}
.cs-particles span{
  position:absolute;
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,0.5);
  animation:cs-float 5s ease-in-out infinite;
}
.cs-particles span:nth-child(1){top:12%;left:8%;animation-delay:0s}
.cs-particles span:nth-child(2){top:28%;left:22%;animation-delay:0.7s;width:2px;height:2px}
.cs-particles span:nth-child(3){top:65%;left:15%;animation-delay:1.4s;width:4px;height:4px}
.cs-particles span:nth-child(4){top:80%;left:40%;animation-delay:2.1s}
.cs-particles span:nth-child(5){top:18%;right:12%;animation-delay:2.8s;width:2px;height:2px}
.cs-particles span:nth-child(6){top:45%;right:6%;animation-delay:3.5s;width:4px;height:4px}
.cs-particles span:nth-child(7){top:72%;right:20%;animation-delay:4.2s}
.cs-particles span:nth-child(8){top:38%;left:50%;animation-delay:1s;width:2px;height:2px}

/* Container */
.cs-container{position:relative;z-index:1}

/* Header */
.cs-header{
  text-align:center;
  margin-bottom:60px;
}
.cs-heading{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:900;
  color:#fff;
  letter-spacing:-0.025em;
  line-height:1.1;
  margin-bottom:16px;
  text-shadow:0 2px 20px rgba(0,0,0,0.2);
}
.cs-subheading{
  font-size:clamp(0.9rem,1.6vw,1.05rem);
  color:rgba(255,255,255,0.72);
  line-height:1.8;
  max-width:620px;
  margin:0 auto;
}

/* Grid */
.cs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

/* ── Card base ── */
.cs-card{
  position:relative;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:20px;
  padding:32px 28px;
  display:flex;flex-direction:column;gap:0;
  transition:transform 0.38s cubic-bezier(0.23,1,0.32,1),
             box-shadow 0.38s cubic-bezier(0.23,1,0.32,1),
             border-color 0.3s ease,
             background 0.3s ease;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1);
}
.cs-card:hover{
  transform:translateY(-8px) scale(1.02);
  background:rgba(255,255,255,0.13);
  border-color:rgba(255,255,255,0.28);
  box-shadow:0 20px 60px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Shimmer on hover */
.cs-card::after{
  content:'';
  position:absolute;top:0;left:0;
  width:35%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  transform:translateX(-120%) skewX(-12deg);
  pointer-events:none;
}
.cs-card:hover::after{animation:cs-shimmer 0.65s ease forwards}

/* Glow blob per card */
.cs-card-glow{
  position:absolute;
  width:200px;height:200px;
  border-radius:50%;
  filter:blur(60px);
  top:-60px;right:-60px;
  pointer-events:none;
  opacity:0.35;
  transition:opacity 0.4s ease;
}
.cs-card:hover .cs-card-glow{opacity:0.55}

/* Card accent glows */
.cs-card-pink .cs-card-glow{background:radial-gradient(circle,#f472b6,transparent)}
.cs-card-blue .cs-card-glow{background:radial-gradient(circle,#60a5fa,transparent)}
.cs-card-yellow .cs-card-glow{background:radial-gradient(circle,#fbbf24,transparent)}
.cs-card-purple .cs-card-glow{background:radial-gradient(circle,#a78bfa,transparent)}
.cs-card-green .cs-card-glow{background:radial-gradient(circle,#34d399,transparent)}
.cs-card-cyan .cs-card-glow{background:radial-gradient(circle,#22d3ee,transparent)}

/* Card top row */
.cs-card-top{
  display:flex;align-items:center;gap:12px;
  margin-bottom:18px;
}
.cs-icon-wrap{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;
}
.cs-icon-pink{background:rgba(244,114,182,0.2);border:1px solid rgba(244,114,182,0.3)}
.cs-icon-blue{background:rgba(96,165,250,0.2);border:1px solid rgba(96,165,250,0.3)}
.cs-icon-yellow{background:rgba(251,191,36,0.2);border:1px solid rgba(251,191,36,0.3)}
.cs-icon-purple{background:rgba(167,139,250,0.2);border:1px solid rgba(167,139,250,0.3)}
.cs-icon-green{background:rgba(52,211,153,0.2);border:1px solid rgba(52,211,153,0.3)}
.cs-icon-cyan{background:rgba(34,211,238,0.2);border:1px solid rgba(34,211,238,0.3)}

.cs-cat{
  font-size:0.65rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}

/* Card content */
.cs-title{
  font-size:1.15rem;font-weight:800;
  color:#fff;line-height:1.25;
  margin-bottom:4px;
  text-shadow:0 1px 6px rgba(0,0,0,0.2);
}
.cs-subtitle{
  font-size:0.78rem;font-weight:600;
  color:rgba(255,255,255,0.55);
  letter-spacing:0.04em;
  margin-bottom:14px;
}
.cs-desc{
  font-size:0.86rem;
  color:rgba(255,255,255,0.72);
  line-height:1.78;
  margin-bottom:18px;
  flex:1;
}

/* Subject tags */
.cs-subjects{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:22px;
}
.cs-subjects span{
  font-size:0.67rem;font-weight:600;
  color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  padding:4px 11px;border-radius:var(--r-full);
  letter-spacing:0.02em;
  transition:background 0.25s ease,border-color 0.25s ease;
}
.cs-card:hover .cs-subjects span{
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,0.28);
}

/* Enroll button */
.cs-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 26px;
  border-radius:var(--r-full);
  background:linear-gradient(135deg,#f5c518,#fbbf24,#f59e0b);
  color:#1a1a2e;
  font-family:'Poppins',sans-serif;
  font-size:0.82rem;font-weight:800;
  letter-spacing:0.04em;
  transition:var(--t);
  box-shadow:0 4px 16px rgba(245,197,24,0.35);
  align-self:flex-start;
  white-space:nowrap;
}
.cs-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 28px rgba(245,197,24,0.55);
  filter:brightness(1.06);
}

/* Responsive */
@media(max-width:1024px){
  .cs-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .cs-section{padding:72px 0 80px}
  .cs-grid{grid-template-columns:1fr;gap:18px}
  .cs-card{padding:26px 22px}
  .cs-heading{font-size:1.8rem}
}

/* ── Keep old .courses-grid for any fallback ── */
.courses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:48px}
.course-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-md);padding:32px 26px;transition:var(--t);position:relative;overflow:hidden;box-shadow:var(--shadow-xs)}
.course-icon{font-size:2rem;margin-bottom:14px}
.course-level{display:inline-block;font-size:0.6rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-deep);background:rgba(245,197,24,0.1);border:1px solid rgba(245,197,24,0.25);padding:3px 10px;border-radius:var(--r-full);margin-bottom:10px}
.course-card h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:12px}
.course-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.course-tags span{font-size:0.68rem;font-weight:600;color:var(--purple-main);background:var(--purple-pale);border:1px solid rgba(79,47,212,0.15);padding:3px 10px;border-radius:var(--r-full)}
.course-card p{font-size:0.84rem;color:var(--gray-600);line-height:1.7}

/* ============================================================
   RESULTS
   ============================================================ */
.results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;margin-top:8px;
}
.result-card{
  background:#fff;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--gray-200);
  transition:var(--t);box-shadow:var(--shadow-xs);
}
.result-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:rgba(79,47,212,0.2)}
.result-img{
  height:230px;background:var(--gray-50);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.result-img img{
  width:100%;height:100%;object-fit:contain;
  object-position:center top;padding:10px;transition:var(--t);
}
.result-card:hover .result-img img{transform:scale(1.04)}
.result-caption{
  padding:16px 20px;
  background:linear-gradient(135deg,var(--purple-deep),var(--purple-main));
  border-top:1px solid rgba(79,47,212,0.15);
}
.result-score{display:block;font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:3px}
.result-exam{
  display:block;font-size:0.68rem;font-weight:500;
  color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.09em;
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.bg-purple-soft{background:var(--purple-bg)}
.grid-4{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;margin-top:12px;
}
.why-card{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--r-md);
  padding:34px 24px;text-align:center;
  transition:var(--t);box-shadow:var(--shadow-xs);
}
.why-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(79,47,212,0.15);
}
.why-icon{font-size:2rem;margin-bottom:14px;display:block}
.why-card h3{font-size:0.97rem;font-weight:700;color:var(--ink);margin-bottom:8px}
.why-card p{font-size:0.84rem;color:var(--gray-600);line-height:1.75}

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;margin-top:12px;
}
.benefit-item{
  display:flex;align-items:flex-start;gap:16px;
  background:#fff;border-radius:var(--r-md);
  padding:24px 20px;
  border:1px solid var(--gray-200);
  transition:var(--t);box-shadow:var(--shadow-xs);
}
.benefit-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(79,47,212,0.15);
}
.benefit-icon{
  font-size:1.5rem;flex-shrink:0;
  width:48px;height:48px;
  background:var(--purple-pale);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
}
.benefit-text h3{font-size:0.95rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.benefit-text p{font-size:0.83rem;color:var(--gray-600);line-height:1.7}

/* ============================================================
   BRANCHES — Premium Location Cards
   ============================================================ */
.br-section{
  position:relative;
  padding:88px 0 96px;
  background:linear-gradient(160deg,#faf8ff 0%,#f0ebff 50%,#faf8ff 100%);
  overflow:hidden;
}

/* Subtle dot-grid background */
.br-bg-pattern{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(79,47,212,0.07) 1px,transparent 1px);
  background-size:32px 32px;
}

.br-section .container{position:relative;z-index:1}

/* Header */
.br-header{text-align:center;margin-bottom:56px}
.br-heading{
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-weight:800;color:var(--ink);
  letter-spacing:-0.02em;margin-bottom:10px;
}
.br-subheading{
  font-size:0.97rem;color:var(--gray-600);
  line-height:1.7;max-width:480px;margin:0 auto;
}

/* Grid */
.br-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

/* Card */
.br-card{
  background:#fff;
  border-radius:20px;
  border:1px solid var(--gray-200);
  box-shadow:0 4px 24px rgba(0,0,0,0.07),0 1px 4px rgba(0,0,0,0.04);
  overflow:hidden;
  transition:transform 0.35s cubic-bezier(0.23,1,0.32,1),
             box-shadow 0.35s cubic-bezier(0.23,1,0.32,1);
  display:flex;flex-direction:column;
}
.br-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(79,47,212,0.14),0 4px 12px rgba(0,0,0,0.06);
}

/* Top accent bar */
.br-card-accent{height:4px;width:100%;flex-shrink:0}
.br-accent-purple{background:linear-gradient(90deg,#4f2fd4,#8b6ef5)}
.br-accent-gold{background:linear-gradient(90deg,#d97706,#fbbf24)}

/* Card header */
.br-card-header{padding:24px 28px 0}
.br-badge{
  display:inline-block;
  font-size:0.6rem;font-weight:800;letter-spacing:0.18em;
  text-transform:uppercase;padding:4px 12px;
  border-radius:var(--r-full);margin-bottom:8px;
}
.br-badge-purple{background:var(--purple-pale);color:var(--purple-main);border:1px solid rgba(79,47,212,0.2)}
.br-badge-gold{background:rgba(245,197,24,0.12);color:var(--gold-deep);border:1px solid rgba(245,197,24,0.25)}
.br-name{
  font-size:1.25rem;font-weight:800;
  color:var(--ink);letter-spacing:-0.01em;
}

/* Detail rows */
.br-details{padding:20px 28px;flex:1;display:flex;flex-direction:column;gap:16px}

.br-row{display:flex;align-items:flex-start;gap:14px}
.br-icon-box{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;margin-top:1px;
}
.br-icon-purple{background:var(--purple-pale)}
.br-icon-blue{background:#eff6ff}
.br-icon-green{background:#f0fdf4}

.br-row-content{display:flex;flex-direction:column;gap:2px}
.br-row-label{
  font-size:0.65rem;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gray-500);
}
.br-row-text{
  font-size:0.88rem;color:var(--gray-700);
  line-height:1.65;font-weight:500;
}
.br-phone{
  font-size:1rem;font-weight:800;
  color:var(--purple-main);
  transition:color 0.2s ease;
  text-decoration:none;
}
.br-phone:hover{color:var(--purple-deep)}

/* Timing box — highlighted */
.br-timing-box{
  background:linear-gradient(135deg,#f0ebff,#faf8ff);
  border:1px solid rgba(79,47,212,0.12);
  border-radius:14px;
  padding:16px 18px;
  margin-top:4px;
}
.br-timing-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:12px;
}
.br-timing-icon{font-size:1.1rem}
.br-timing-title{
  font-size:0.75rem;font-weight:800;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--purple-main);
}
.br-timing-rows{display:flex;flex-direction:column;gap:8px}
.br-timing-row{
  display:flex;align-items:center;
  justify-content:space-between;gap:12px;
}
.br-day{
  font-size:0.85rem;font-weight:600;color:var(--gray-700);
}
.br-time{
  font-size:0.85rem;font-weight:700;
  padding:3px 10px;border-radius:var(--r-full);
}
.br-time-open{
  background:rgba(22,163,74,0.1);
  color:#15803d;
  border:1px solid rgba(22,163,74,0.2);
}
.br-time-closed{
  background:rgba(239,68,68,0.08);
  color:#dc2626;
  border:1px solid rgba(239,68,68,0.15);
}

/* Card footer buttons */
.br-card-footer{
  padding:20px 28px 24px;
  display:flex;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--gray-100);
  margin-top:4px;
}
.br-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 22px;border-radius:var(--r-full);
  background:linear-gradient(135deg,#4f2fd4,#7c3aed);
  color:#fff;font-family:'Poppins',sans-serif;
  font-size:0.83rem;font-weight:700;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(79,47,212,0.3);
  transition:var(--t);
}
.br-btn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 8px 28px rgba(79,47,212,0.45);
}
.br-btn-outline{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 22px;border-radius:var(--r-full);
  background:transparent;
  color:var(--purple-main);
  border:2px solid rgba(79,47,212,0.25);
  font-family:'Poppins',sans-serif;
  font-size:0.83rem;font-weight:700;
  text-decoration:none;
  transition:var(--t);
}
.br-btn-outline:hover{
  background:var(--purple-pale);
  border-color:var(--purple-main);
  transform:translateY(-2px) scale(1.03);
}

/* Responsive */
@media(max-width:768px){
  .br-grid{grid-template-columns:1fr}
  .br-section{padding:64px 0 72px}
}
@media(max-width:480px){
  .br-card-header,.br-details,.br-card-footer{padding-left:20px;padding-right:20px}
  .br-name{font-size:1.1rem}
  .br-timing-row{flex-direction:column;align-items:flex-start;gap:4px}
  .br-card-footer{flex-direction:column}
  .br-btn,.br-btn-outline{justify-content:center;width:100%}
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-slider-wrap{overflow:hidden;position:relative;margin-top:8px}
.testi-track{
  display:flex;gap:20px;
  transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change:transform;cursor:grab;
}
.testi-track:active{cursor:grabbing}
.testi-card{
  flex:0 0 calc(33.333% - 14px);
  min-width:calc(33.333% - 14px);
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  padding:30px 26px;text-align:left;
  transition:var(--t);
  box-shadow:var(--shadow-sm);
}
.testi-card:hover{
  box-shadow:var(--shadow-lg);
  border-color:rgba(79,47,212,0.15);
  transform:translateY(-4px);
}
.testi-stars{font-size:0.9rem;margin-bottom:12px;letter-spacing:2px}
.testi-text{
  font-size:0.87rem;color:var(--gray-700);
  line-height:1.8;margin-bottom:20px;font-style:italic;
}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--grad-purple);
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:700;color:#fff;
  flex-shrink:0;box-shadow:var(--shadow-purple);
}
.testi-name{font-size:0.88rem;font-weight:700;color:var(--ink);margin-bottom:2px}
.testi-course{font-size:0.7rem;color:var(--purple-main);font-weight:500;letter-spacing:0.04em}
.testi-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.testi-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--gray-300);border:none;cursor:pointer;
  transition:var(--t);padding:0;
}
.testi-dot.active{background:var(--gold-warm);width:22px;border-radius:4px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-inner{text-align:center}
.contact-cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.contact-card{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:#fff;border-radius:var(--r-md);
  padding:28px 32px;
  border:1px solid var(--gray-200);
  transition:var(--t);min-width:240px;
  box-shadow:var(--shadow-xs);
}
.contact-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(79,47,212,0.15);
}
.contact-icon{font-size:1.8rem}
.contact-detail{font-size:0.93rem;font-weight:700;color:var(--ink);word-break:break-all}
.contact-type{
  font-size:0.67rem;font-weight:500;
  color:var(--gray-500);text-transform:uppercase;letter-spacing:0.1em;
}

/* ============================================================
   TERMS & CONDITIONS (inline section)
   ============================================================ */
.terms-section .section-sub{margin-bottom:36px}
.terms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;margin-top:8px;
}
.terms-card{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--r-md);
  padding:24px 22px;
  transition:var(--t);
  box-shadow:var(--shadow-xs);
}
.terms-card:hover{
  box-shadow:var(--shadow-md);
  border-color:rgba(79,47,212,0.15);
  transform:translateY(-2px);
}
.terms-num{
  font-size:0.6rem;font-weight:800;letter-spacing:0.15em;
  color:var(--gold-deep);background:rgba(245,197,24,0.1);
  border:1px solid rgba(245,197,24,0.22);
  padding:3px 9px;border-radius:var(--r-full);
  display:inline-block;margin-bottom:10px;
}
.terms-card h3{font-size:0.93rem;font-weight:700;color:var(--ink);margin-bottom:7px}
.terms-card p{font-size:0.82rem;color:var(--gray-600);line-height:1.75}
.terms-email{color:var(--purple-main);transition:var(--t-fast)}
.terms-email:hover{color:var(--purple-deep)}

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */
.bg-dark{background:var(--gray-50)}
.bg-mid{background:#fff}
.bg-purple{background:var(--grad-hero)}
.bg-purple .section-title{color:#fff}
.bg-purple .section-sub{color:rgba(255,255,255,0.7)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--gray-900);
  color:rgba(255,255,255,0.45);
  text-align:center;
  padding:52px 24px 36px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.footer-logo{
  height:48px;width:auto;object-fit:contain;
  display:block;
  margin:0 auto 24px;
  padding:10px 20px;
  background:rgba(0,0,0,0.5);
  border-radius:10px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.5)) drop-shadow(0 0 6px rgba(255,255,255,0.15));
  opacity:1;
}
.footer p{font-size:0.82rem;line-height:2}
.footer-social-title{
  font-size:0.65rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(255,255,255,0.4);
  margin-bottom:14px;
}
.footer-social-btns{
  display:flex;gap:10px;justify-content:center;
  flex-wrap:wrap;margin-bottom:22px;
}
.footer-social-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--r-full);
  font-size:0.8rem;font-weight:700;color:#fff;
  transition:var(--t);white-space:nowrap;
}
.fsb-yt{background:#ff0000;box-shadow:0 3px 12px rgba(255,0,0,0.25)}
.fsb-yt:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 22px rgba(255,0,0,0.4)}
.fsb-ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);box-shadow:0 3px 12px rgba(253,29,29,0.25)}
.fsb-ig:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 22px rgba(253,29,29,0.4)}
.fsb-fb{background:#1877f2;box-shadow:0 3px 12px rgba(24,119,242,0.25)}
.fsb-fb:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 22px rgba(24,119,242,0.4)}
.fsb-google{background:#fff;color:#3c4043;box-shadow:0 3px 12px rgba(0,0,0,0.15)}
.fsb-google:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 22px rgba(66,133,244,0.35)}
.footer-links{
  display:flex;align-items:center;justify-content:center;
  gap:12px;margin-top:14px;flex-wrap:wrap;
}
.footer-link{
  font-size:0.77rem;font-weight:500;
  color:rgba(255,255,255,0.4);transition:var(--t-fast);
}
.footer-link:hover{color:rgba(255,255,255,0.8)}
.footer-sep{color:rgba(255,255,255,0.15)}
.footer-info{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px 10px;
  margin-bottom:10px;
  font-size:0.72rem;
  color:rgba(255,255,255,0.3);
  letter-spacing:0.02em;
}
.footer-info-sep{color:rgba(255,255,255,0.15);font-size:0.65rem}

/* ============================================================
   FLOATING CALL BUTTON
   ============================================================ */
.call-fab{
  position:fixed;bottom:80px;right:24px;
  width:54px;height:54px;border-radius:50%;
  background:var(--grad-purple);
  display:flex;align-items:center;justify-content:center;
  font-size:0;
  box-shadow:0 4px 16px rgba(79,47,212,0.45),0 10px 36px rgba(79,47,212,0.28);
  z-index:2000;transition:var(--t);
  border:2px solid rgba(255,255,255,0.18);
  overflow:visible;
}
.call-fab::after{
  content:'';display:block;width:22px;height:22px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.01 1.18 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.01 1.18 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.call-fab:hover{transform:scale(1.1) translateY(-4px);box-shadow:0 8px 24px rgba(79,47,212,0.55),0 18px 50px rgba(79,47,212,0.32)}
.call-fab-ring{
  position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid rgba(79,47,212,0.35);
  animation:fabPulse 3s ease-in-out infinite;pointer-events:none;
}
@keyframes fabPulse{
  0%,100%{transform:scale(1);opacity:0.45}
  50%{transform:scale(1.22);opacity:0}
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(79,47,212,0.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(79,47,212,0.55)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .testi-card{flex:0 0 calc(50% - 10px);min-width:calc(50% - 10px)}
}

@media(max-width:768px){
  .section{padding:64px 0}
  .container{padding:0 20px}
  .hero{padding:120px 0 64px}
  .hero-content{padding:0 20px}
  .hero-stats{gap:14px;padding:14px 20px}
  .stat-div{display:none}
  .slider-section{padding:56px 0 72px}
  /* no fixed height — aspect-ratio:16/9 handles it */
  .courses-grid{grid-template-columns:1fr 1fr}
  .results-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .benefits-grid{grid-template-columns:1fr}
  .branches-wrap{flex-direction:column;align-items:center}
  .branch-card{max-width:100%;width:100%}
  .testi-card{flex:0 0 calc(80% - 10px);min-width:calc(80% - 10px)}
  .call-fab{width:50px;height:50px;bottom:72px;right:16px}
  .call-fab::after{width:20px;height:20px}
  /* top-bar handled in premium block */
}

@media(max-width:480px){
  .container{padding:0 16px}
  .hero{padding:110px 0 56px}
  .hero-content{padding:0 16px}
  .hero-title{font-size:1.85rem}
  .hero-welcome{font-size:0.9rem}
  .hero-tagline{font-size:0.88rem}
  .hero-sub{font-size:0.82rem}
  .hero-badge{font-size:0.67rem;padding:6px 13px}
  .hero-tags{gap:6px;margin-bottom:24px}
  .hero-tag{font-size:0.66rem;padding:5px 11px}
  .hero-btns{flex-direction:column;align-items:flex-start;gap:11px;margin-bottom:30px}
  .btn{padding:13px 28px;font-size:0.87rem}
  .hero-stats{flex-direction:column;gap:10px;padding:14px 22px}
  .courses-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .results-grid{grid-template-columns:1fr 1fr}
  .contact-card{min-width:unset;width:100%}
  .testi-card{flex:0 0 calc(92% - 10px);min-width:calc(92% - 10px);padding:22px 18px}
  .terms-grid{grid-template-columns:1fr}
  /* top-bar handled in premium block */
  .social-bar-btn span{display:none}
  .social-bar-btn{padding:9px 11px;border-radius:50%}
  .footer-social-btn span{display:none}
  .footer-social-btn{padding:10px 12px;border-radius:50%}
}

@media(max-width:360px){
  .results-grid{grid-template-columns:1fr}
  .hero-title{font-size:1.6rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
  }
}

/* ============================================================
   RESULTS SECTION — Premium Tab Layout
   ============================================================ */

.res-section {
  position: relative;
  background: linear-gradient(145deg, #0a0414 0%, #130a2e 45%, #1a0a3e 75%, #0f0f0f 100%);
  padding: 96px 0 104px;
  overflow: hidden;
}

/* Background glows */
.res-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.res-glow-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(75, 46, 255, 0.22) 0%, transparent 70%);
  top: -160px; left: -120px;
}
.res-glow-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(230, 194, 0, 0.1) 0%, transparent 70%);
  bottom: -100px; right: -80px;
}

.res-section .container { position: relative; z-index: 1; }

/* Heading */
.res-header {
  text-align: center;
  margin-bottom: 48px;
}
.res-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* Tab buttons */
.res-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.res-tab {
  position: relative;
  padding: 12px 32px;
  border-radius: 9999px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.65);
  
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  outline: none;
}
.res-tab:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.res-tab.active {
  background: linear-gradient(135deg, #4B2EFF 0%, #7c3aed 50%, #E6C200 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 28px rgba(75, 46, 255, 0.45), 0 2px 8px rgba(230, 194, 0, 0.2);
  transform: translateY(-2px);
}

/* Panels */
.res-panels { position: relative; }

.res-panel {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.res-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
/* Animate-in class applied by JS */
.res-panel.fade-in {
  animation: resFadeIn 0.42s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes resFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Image grid */
.res-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.res-img-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.res-img-wrap:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 20px 56px rgba(75, 46, 255, 0.3), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.res-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

/* Responsive */
@media (max-width: 900px) {
  .res-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 520px) {
  .res-grid { grid-template-columns: 1fr; gap: 14px; }
  .res-tab { padding: 10px 22px; font-size: 0.82rem; }
  .res-heading { font-size: 1.8rem; }
}


/* ============================================================
   HERO SLIDER — 1080×600 (16:9) Perfect Fit
   ============================================================ */

/* aspect-ratio:16/9 means height = width ÷ 1.778
   At 1440px wide → 810px tall → image fills perfectly, zero crop
   At 375px phone → 211px tall → same perfect fit */
.hs-section {
  position: relative;
  width: 100%;
  /* aspect-ratio tracks 1080x600 (16:9) exactly — no fixed height, no zoom */
  aspect-ratio: 16 / 9;
  max-height: 520px;          /* cap on large desktops so it stays compact */
  overflow: hidden;
  background: #0d0d14;
  transform: translateZ(0);
  will-change: transform;
}

/* Tighter cap on very large screens */
@media (min-width: 1440px) { .hs-section { max-height: 480px; } }
@media (min-width: 1920px) { .hs-section { max-height: 520px; } }

/* Mobile — natural 16:9, no cap needed */
@media (max-width: 768px) {
  .hs-section { max-height: none; }
}

.hs-viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Slides — stacked, fade in/out */
.hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hs-slide.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* Blurred background fill — covers any letterbox gaps */
.hs-bg-blur {
  position: absolute;
  top: -28px; left: -28px;
  width: calc(100% + 56px);
  height: calc(100% + 56px);
  object-fit: cover;
  object-position: center;
  filter: blur(36px) brightness(0.45) saturate(1.4);
  transform: scale(1.05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Foreground image — contain so FULL image always visible, no crop */
.hs-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;         /* full image, no zoom, no crop */
  object-position: center center;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Subtle parallax on desktop hover only */
@media (hover: hover) and (min-width: 992px) {
  .hs-section:hover .hs-slide.active .hs-img {
    transform: scale(1.015);
  }
}

/* Navigation dots */
.hs-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 4px;
  align-items: center;
}
.hs-dot {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  padding: 0;
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.hs-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  display: block;
}
.hs-dot.active::after {
  width: 26px;
  background: #f5c518;
  box-shadow: 0 0 10px rgba(245, 197, 24, 0.7);
  border-radius: 9999px;
}
@media (max-width: 768px) { .hs-dots { bottom: 8px; } }
.hero-info {
  background: linear-gradient(160deg, #faf8ff 0%, #f0ebff 100%);
  padding: 48px 24px 40px;
  text-align: center;
  border-bottom: 1px solid rgba(79, 47, 212, 0.08);
}
.hero-info-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hi-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(79, 47, 212, 0.08);
  border: 1px solid rgba(79, 47, 212, 0.18);
  color: #4f2fd4;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 9999px;
}
.hi-title {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(135deg, #3b1fa8, #4f2fd4, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
.hi-sub {
  font-size: clamp(0.88rem, 2vw, 1.05rem);
  font-weight: 500;
  color: #6c757d;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.hi-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 14px 40px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #f5c518, #fbbf24, #f59e0b);
  color: #1a1a2e;
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 28px rgba(245, 197, 24, 0.4);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}
.hi-cta:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 40px rgba(245, 197, 24, 0.55);
}

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip {
  background: #ffffff;
  border-bottom: 1px solid rgba(79, 47, 212, 0.08);
  padding: 0 24px;
}
.stats-strip-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 0;
}
.ss-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ss-num {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #4f2fd4, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
  line-height: 1;
}
.ss-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6c757d;
}
.ss-divider {
  width: 1px;
  height: 40px;
  background: rgba(79, 47, 212, 0.12);
  flex-shrink: 0;
  margin: 0 16px;
}

/* ── Stats strip mobile ── */
@media (max-width: 768px) {
  .hero-info { padding: 32px 20px 28px; }
  .hi-cta { padding: 13px 32px; font-size: 0.86rem; }
}

@media (max-width: 480px) {
  .hi-badge { font-size: 0.6rem; padding: 6px 14px; }
  .stats-strip-inner {
    flex-direction: column;
    gap: 20px;
    padding: 24px 0;
  }
  .ss-divider { width: 60px; height: 1px; margin: 0; }
}

/* Nullify any leftover old hero classes */
.hs-track, .hs-overlay, .hs-content,
.hs-title, .hs-sub, .hs-cta, .hs-scroll-hint { display: none !important; }


/* ============================================================
   ULTRA PREMIUM UPGRADE — v6
   Pure CSS override layer — no HTML changes
   ============================================================ */

/* ── ENHANCED DESIGN TOKENS ── */
:root {
  --purple-deep: #2d1580;
  --purple-main: #4f2fd4;
  --purple-mid:  #6b46e0;
  --purple-light:#9b7ef8;
  --purple-pale: #ede8ff;
  --purple-bg:   #f7f4ff;
  --gold:        #f5c518;
  --gold-warm:   #fbbf24;
  --gold-deep:   #d97706;
  --ink:         #12102a;
  --grad-purple: linear-gradient(135deg,#4f2fd4 0%,#7c3aed 100%);
  --grad-gold:   linear-gradient(135deg,#f5c518 0%,#fbbf24 60%,#f59e0b 100%);
  --shadow-purple: 0 8px 32px rgba(79,47,212,0.28);
  --shadow-gold:   0 8px 28px rgba(245,197,24,0.38);
  --ease: cubic-bezier(0.23,1,0.32,1);
  --t:    all 0.35s var(--ease);
}

/* ── BODY ── */
body { background: #f7f4ff; }

/* ── TOP BAR ── */
.top-bar {
  background: linear-gradient(90deg,#2d1580 0%,#4f2fd4 50%,#6b46e0 100%);
  padding: 8px 20px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Mobile: swap label text, allow slight wrap only if needed */
@media (max-width: 768px) {
  .top-bar { padding: 8px 16px; font-size: 0.78rem; white-space: normal; }
  .top-bar-desktop { display: none; }
  .top-bar-mobile  { display: inline; }
  .top-bar-phone   { font-size: 1rem; padding: 3px 10px; }
}
@media (max-width: 480px) {
  .top-bar { padding: 7px 12px; font-size: 0.75rem; }
  .top-bar-phone { font-size: 1.05rem; }
}

/* ── NAVBAR ── */
.header {
  background: rgba(255,255,255,0.92);
  ackdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(79,47,212,0.1);
  box-shadow: 0 2px 24px rgba(79,47,212,0.08);
}
.header.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 4px 32px rgba(79,47,212,0.12);
}
.navbar { height: 72px; }
.logo-wrap img { height: 46px; }

/* ── SECTION GLOBAL ── */
.section { padding: 108px 0; }
.container { max-width: 1200px; padding: 0 36px; }

/* ── SECTION LABELS ── */
.section-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  padding: 6px 16px;
  background: linear-gradient(135deg,rgba(79,47,212,0.1),rgba(139,110,245,0.08));
  border: 1px solid rgba(79,47,212,0.18);
  box-shadow: 0 2px 12px rgba(79,47,212,0.08);
}

/* ── SECTION TITLES ── */
.section-title {
  font-size: clamp(1.9rem,3.8vw,2.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

/* ── SCROLL REVEAL ── */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
[data-animate].visible { opacity: 1; transform: translateY(0); }

/* ── HERO INFO (below slider) ── */
.hero-info {
  background: linear-gradient(160deg,#f7f4ff 0%,#ede8ff 50%,#f7f4ff 100%);
  padding: 64px 24px 56px;
  position: relative;
  overflow: hidden;
}
.hero-info::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(79,47,212,0.08) 0%,transparent 70%);
  top: -200px; right: -150px;
  pointer-events: none;
}
.hero-info::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(245,197,24,0.07) 0%,transparent 70%);
  bottom: -120px; left: -80px;
  pointer-events: none;
}
.hero-info-inner { gap: 18px; position: relative; z-index: 1; }
.hi-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 8px 22px;
  background: linear-gradient(135deg,rgba(79,47,212,0.1),rgba(139,110,245,0.08));
  border: 1px solid rgba(79,47,212,0.2);
  box-shadow: 0 4px 16px rgba(79,47,212,0.1);
}
.hi-title {
  font-size: clamp(2rem,5.5vw,3.4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  background: linear-gradient(135deg,#2d1580 0%,#4f2fd4 45%,#7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 20px rgba(79,47,212,0.2));
}
.hi-sub {
  font-size: clamp(0.9rem,2vw,1.1rem);
  font-weight: 600;
  color: #6b46e0;
  letter-spacing: 0.1em;
}
.hi-cta {
  padding: 16px 48px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg,#f5c518 0%,#fbbf24 50%,#f59e0b 100%);
  box-shadow: 0 8px 32px rgba(245,197,24,0.45), 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}
.hi-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,0.3),transparent 60%);
  border-radius: inherit;
}
.hi-cta:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 16px 48px rgba(245,197,24,0.6), 0 4px 16px rgba(0,0,0,0.15);
}

/* ── STATS STRIP ── */
.stats-strip {
  background: #fff;
  border-top: none;
  border-bottom: 1px solid rgba(79,47,212,0.08);
  box-shadow: none;
}
.stats-strip-inner { padding: 36px 0; }
.ss-item { gap: 6px; }
.ss-num {
  font-size: clamp(1.8rem,4vw,2.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg,#2d1580,#4f2fd4,#7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
}
.ss-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6b46e0;
}
.ss-divider {
  width: 1px;
  height: 40px;
  background: rgba(79,47,212,0.12);
  flex-shrink: 0;
  margin: 0 16px;
}

/* ── SOCIAL BAR ── */
.social-bar {
  background: linear-gradient(90deg,#12102a 0%,#1e1540 100%);
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.social-bar-label { color: rgba(255,255,255,0.35); }

/* ── ABOUT SECTION ── */
.about-section {
  padding: 108px 0;
  background: linear-gradient(160deg,#f7f4ff 0%,#ede8ff 40%,#f7f4ff 100%);
  position: relative;
  overflow: hidden;
}
.about-section::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(79,47,212,0.06) 0%,transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
}
.about-card {
  border-radius: 28px;
  padding: 56px 60px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(79,47,212,0.1);
  box-shadow:
    0 4px 24px rgba(79,47,212,0.08),
    0 24px 64px rgba(79,47,212,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.about-title {
  font-size: clamp(1.8rem,3.2vw,2.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg,#2d1580,#4f2fd4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-subtitle { font-size: 1.05rem; line-height: 1.7; }
.about-preview p { font-size: 1.02rem; line-height: 1.9; color: #3d3560; }
.about-expand-inner p { font-size: 0.98rem; line-height: 1.9; color: #3d3560; }
.atl-dot { width: 16px; height: 16px; }
.atl-item-active .atl-dot {
  background: var(--purple-main);
  box-shadow: 0 0 0 4px rgba(79,47,212,0.2), 0 0 16px rgba(79,47,212,0.3);
}
.about-toggle-btn {
  padding: 14px 36px;
  font-size: 0.9rem;
  background: linear-gradient(135deg,#4f2fd4,#7c3aed);
  box-shadow: 0 8px 28px rgba(79,47,212,0.35);
}
.about-toggle-btn:hover {
  box-shadow: 0 16px 48px rgba(79,47,212,0.5);
  transform: translateY(-4px) scale(1.04);
}
@media(max-width:768px) {
  .about-card { padding: 36px 28px; border-radius: 20px; }
}
@media(max-width:480px) {
  .about-card { padding: 28px 20px; }
}

/* ── GALLERY SLIDER SECTION ── */
.slider-section {
  padding: 100px 0 112px;
  background: linear-gradient(160deg,#f7f4ff 0%,#ede8ff 50%,#f7f4ff 100%);
  position: relative;
  overflow: hidden;
}
.slider-section::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(79,47,212,0.07) 0%,transparent 70%);
  bottom: -150px; left: -100px;
  pointer-events: none;
}
.slider-section .section-title {
  color: var(--ink);
  font-size: clamp(1.9rem,3.8vw,2.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}
.slider-wrap {
  border-radius: 24px;
  box-shadow:
    0 8px 40px rgba(79,47,212,0.15),
    0 32px 80px rgba(79,47,212,0.08),
    0 0 0 1px rgba(79,47,212,0.08);
  overflow: hidden;
  aspect-ratio: 900 / 460;     /* exact 900×460 image ratio */
  width: 100%;
  max-width: 900px;
  margin: 36px auto 28px;
}
.slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.85s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: transform;
}
.slider-track img, .gallery-slide {
  min-width: 100%;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: contain;         /* full image, no crop */
  object-position: center;
  background: #ffffff;         /* white letterbox fill */
  display: block;
}
.dot.active {
  background: var(--purple-main);
  box-shadow: 0 0 0 4px rgba(79,47,212,0.2);
}
/* Mobile — same aspect-ratio, same contain — no override needed */
@media (max-width: 768px) {
  .slider-wrap { border-radius: 16px; }
}

/* ── COURSES SECTION ── */
.cs-section {
  padding: 112px 0 120px;
  background: linear-gradient(145deg,#1a0845 0%,#2d1580 25%,#4f2fd4 55%,#6b3de8 75%,#2d1580 100%);
  background-size: 300% 300%;
  animation: csGradShift 12s ease infinite;
}
@keyframes csGradShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.cs-heading {
  font-size: clamp(2.2rem,4.5vw,3.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 32px rgba(0,0,0,0.25);
}
.cs-subheading { font-size: clamp(0.92rem,1.7vw,1.08rem); line-height: 1.85; }
.cs-header { margin-bottom: 72px; }
.cs-grid { gap: 28px; }
.cs-card {
  border-radius: 24px;
  padding: 36px 32px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              background 0.3s ease, border-color 0.3s ease;
}
.cs-card:hover {
  transform: translateY(-10px) scale(1.025);
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.25);
  box-shadow:
    0 24px 72px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.cs-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  font-size: 1.5rem;
}
.cs-title { font-size: 1.2rem; font-weight: 900; line-height: 1.2; }
.cs-desc { font-size: 0.88rem; line-height: 1.82; }
.cs-btn {
  padding: 13px 30px;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(245,197,24,0.4);
}
.cs-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 36px rgba(245,197,24,0.6);
}

/* ── WHY CHOOSE US ── */
.bg-dark {
  background: linear-gradient(160deg,#f7f4ff 0%,#ede8ff 50%,#f7f4ff 100%) !important;
}
.why-card {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 40px 28px;
  border: 1px solid rgba(79,47,212,0.1);
  box-shadow:
    0 4px 20px rgba(79,47,212,0.07),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
}
.why-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 20px 56px rgba(79,47,212,0.16),
    0 4px 16px rgba(79,47,212,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(79,47,212,0.2);
}
.why-icon {
  font-size: 2.4rem;
  margin-bottom: 18px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(79,47,212,0.2));
}
.why-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.why-card p { font-size: 0.87rem; line-height: 1.8; color: #5a5280; }

/* ── BENEFITS ── */
.bg-mid {
  background: #fff !important;
}
.benefit-item {
  background: rgba(255,255,255,0.95);
  border-radius: 20px;
  padding: 28px 24px;
  border: 1px solid rgba(79,47,212,0.08);
  box-shadow: 0 4px 20px rgba(79,47,212,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  gap: 20px;
}
.benefit-item:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 48px rgba(79,47,212,0.14), inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(79,47,212,0.15);
}
.benefit-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  font-size: 1.6rem;
  background: linear-gradient(135deg,rgba(79,47,212,0.1),rgba(139,110,245,0.08));
  border: 1px solid rgba(79,47,212,0.12);
  box-shadow: 0 4px 12px rgba(79,47,212,0.1);
}
.benefit-text h3 { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.benefit-text p { font-size: 0.86rem; line-height: 1.8; color: #5a5280; }

/* ── BRANCHES ── */
.br-section {
  padding: 108px 0 116px;
  background: linear-gradient(160deg,#f7f4ff 0%,#ede8ff 40%,#f7f4ff 100%);
}
.br-heading {
  font-size: clamp(1.9rem,3.8vw,2.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg,#2d1580,#4f2fd4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.br-subheading { font-size: 1rem; line-height: 1.8; }
.br-card {
  border-radius: 24px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(79,47,212,0.1);
  box-shadow:
    0 4px 24px rgba(79,47,212,0.08),
    0 16px 48px rgba(79,47,212,0.05),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.br-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 24px 72px rgba(79,47,212,0.18),
    0 8px 24px rgba(79,47,212,0.1),
    inset 0 1px 0 rgba(255,255,255,0.95);
}
.br-card-accent { height: 5px; }
.br-accent-purple { background: linear-gradient(90deg,#2d1580,#4f2fd4,#9b7ef8); }
.br-accent-gold   { background: linear-gradient(90deg,#b45309,#d97706,#fbbf24,#f5c518); }
.br-name { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; }
.br-timing-box {
  background: linear-gradient(135deg,rgba(79,47,212,0.06),rgba(139,110,245,0.04));
  border: 1px solid rgba(79,47,212,0.1);
  border-radius: 16px;
}
.br-btn {
  background: linear-gradient(135deg,#2d1580,#4f2fd4,#7c3aed);
  box-shadow: 0 6px 24px rgba(79,47,212,0.35);
  padding: 13px 26px;
  font-size: 0.85rem;
}
.br-btn:hover {
  box-shadow: 0 12px 40px rgba(79,47,212,0.5);
  transform: translateY(-3px) scale(1.04);
}
.br-btn-outline {
  border-color: rgba(79,47,212,0.3);
  padding: 13px 26px;
  font-size: 0.85rem;
}
.br-btn-outline:hover {
  background: linear-gradient(135deg,rgba(79,47,212,0.08),rgba(139,110,245,0.06));
  border-color: var(--purple-main);
}

/* ── TESTIMONIALS ── */
.testi-card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 34px 28px;
  border: 1px solid rgba(79,47,212,0.08);
  box-shadow: 0 4px 20px rgba(79,47,212,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.testi-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 56px rgba(79,47,212,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(79,47,212,0.15);
}
.testi-text {
  font-size: 0.9rem;
  line-height: 1.85;
  color: #3d3560;
  font-style: italic;
}
.testi-name { font-size: 0.92rem; font-weight: 800; color: var(--ink); }
.testi-course { font-size: 0.72rem; color: var(--purple-main); font-weight: 600; }
.testi-avatar {
  width: 46px; height: 46px;
  background: linear-gradient(135deg,#4f2fd4,#7c3aed);
  box-shadow: 0 4px 16px rgba(79,47,212,0.35);
}
.testi-dot.active {
  background: linear-gradient(135deg,#f5c518,#fbbf24);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.25);
}

/* ── CONTACT ── */
.contact-card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 36px 36px;
  border: 1px solid rgba(79,47,212,0.08);
  box-shadow: 0 4px 20px rgba(79,47,212,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.contact-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 56px rgba(79,47,212,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(79,47,212,0.18);
}
.contact-icon { font-size: 2.2rem; filter: drop-shadow(0 4px 12px rgba(79,47,212,0.2)); }
.contact-detail { font-size: 1rem; font-weight: 800; color: var(--ink); }
.contact-type { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; color: var(--purple-main); }

/* ── RESULTS SECTION ── */
.res-section {
  background: linear-gradient(145deg,#0c0520 0%,#1a0845 35%,#2d1580 65%,#0c0520 100%);
  padding: 108px 0 116px;
}
.res-heading {
  font-size: clamp(2.2rem,4.5vw,3.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg,#fff 0%,#e8d5ff 60%,#fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.res-tab {
  padding: 13px 36px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.35s var(--ease);
}
.res-tab:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}
.res-tab.active {
  background: linear-gradient(135deg,#4f2fd4 0%,#7c3aed 50%,#f5c518 100%);
  border-color: transparent;
  box-shadow: 0 8px 32px rgba(79,47,212,0.5), 0 2px 8px rgba(245,197,24,0.2);
  transform: translateY(-3px);
}
.res-img-wrap {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 36px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.res-img-wrap:hover {
  transform: scale(1.06) translateY(-6px);
  box-shadow: 0 24px 64px rgba(79,47,212,0.4), 0 8px 20px rgba(0,0,0,0.4);
}

/* ── FOOTER ── */
.footer {
  background: linear-gradient(160deg,#0c0520 0%,#12102a 60%,#0c0520 100%);
  padding: 64px 24px 44px;
  border-top: 1px solid rgba(79,47,212,0.2);
}
.footer p { font-size: 0.84rem; line-height: 2.1; }
.footer-logo { height: 48px; opacity: 1; padding: 10px 20px; background: rgba(0,0,0,0.5); border-radius: 10px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)) drop-shadow(0 0 6px rgba(255,255,255,0.15)); }
.footer-link:hover { color: rgba(255,255,255,0.9); }

/* ── CALL FAB ── */
.call-fab {
  background: linear-gradient(135deg,#4f2fd4,#7c3aed);
  box-shadow: 0 6px 24px rgba(79,47,212,0.5), 0 12px 48px rgba(79,47,212,0.3);
  border: 2px solid rgba(255,255,255,0.2);
}
.call-fab:hover {
  transform: scale(1.12) translateY(-5px);
  box-shadow: 0 12px 40px rgba(79,47,212,0.65), 0 24px 64px rgba(79,47,212,0.35);
}

/* ── GLOBAL BUTTON UPGRADES ── */
.btn-primary {
  background: linear-gradient(135deg,#f5c518 0%,#fbbf24 50%,#f59e0b 100%);
  box-shadow: 0 8px 28px rgba(245,197,24,0.42);
  font-weight: 800;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,0.28),transparent 60%);
  border-radius: inherit;
}
.btn-primary:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 48px rgba(245,197,24,0.58);
}
.btn-purple {
  background: linear-gradient(135deg,#2d1580,#4f2fd4,#7c3aed);
  box-shadow: 0 8px 28px rgba(79,47,212,0.38);
  font-weight: 800;
}
.btn-purple:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 48px rgba(79,47,212,0.55);
}

/* ── SECTION LABEL LIGHT VARIANT ── */
.section-label.light {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}
ackdrop-filter: blur(12px);

/* ── MOBILE RESPONSIVE UPGRADES ── */
@media(max-width:768px) {
  .section { padding: 72px 0; }
  .about-section, .br-section, .slider-section, .hero-info { padding: 72px 0; }
  .cs-section { padding: 80px 0 88px; }
  .res-section { padding: 80px 0 88px; }
  .container { padding: 0 20px; }
  .hi-title { font-size: clamp(1.8rem,7vw,2.6rem); }
  .hi-cta { padding: 14px 36px; }
  .stats-strip-inner { padding: 28px 0; }
}
@media(max-width:480px) {
  .section { padding: 56px 0; }
  .about-section, .br-section, .slider-section, .hero-info { padding: 56px 0; }
  .container { padding: 0 16px; }
  .why-card { padding: 28px 20px; }
  .benefit-item { padding: 22px 18px; }
  .contact-card { padding: 28px 24px; }
}

/* ============================================================
   WHATSAPP FLOATING BUTTON — Premium
   ============================================================ */

/* Entry animation */
@keyframes fabSlideIn {
  from { opacity: 0; transform: translateY(24px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pulse ring */
@keyframes waPulse {
  0%,100% { transform: scale(1);   opacity: 0.5; }
  50%      { transform: scale(1.3); opacity: 0; }
}

.wa-fab {
  position: fixed;
  bottom: 148px;          /* sits above the call-fab (80px + 54px + 14px gap) */
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 30px rgba(37, 211, 102, 0.42),
    0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 2000;
  border: 2px solid rgba(255, 255, 255, 0.22);
  overflow: visible;
  text-decoration: none;
  transition: transform 0.32s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.32s ease;
  animation: fabSlideIn 0.55s cubic-bezier(0.23,1,0.32,1) 0.3s both;
}

.wa-fab svg {
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}

.wa-fab:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow:
    0 18px 48px rgba(37, 211, 102, 0.58),
    0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Pulse ring element */
.wa-fab-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid rgba(37, 211, 102, 0.45);
  animation: waPulse 3s ease-in-out infinite;
  pointer-events: none;
}

/* Keep call-fab entry animation in sync */
.call-fab {
  animation: fabSlideIn 0.55s cubic-bezier(0.23,1,0.32,1) 0.15s both;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .wa-fab {
    width: 52px;
    height: 52px;
    bottom: 136px;
    right: 16px;
  }
  .wa-fab svg { width: 25px; height: 25px; }
}

@media (max-width: 480px) {
  .wa-fab {
    width: 50px;
    height: 50px;
    bottom: 130px;
    right: 14px;
  }
  .wa-fab svg { width: 24px; height: 24px; }
}

/* ============================================================
   HEADER / TOP-BAR OVERLAP FIX
   ============================================================ */

/* Both top-bar and header are now fixed — body needs offset
   so page content doesn't hide behind them.
   top-bar ≈ 38px + header ≈ 72px = ~110px total */
body {
  padding-top: 110px;
}

/* When scrolled, top-bar slides away — header is 72px only */
body.header-scrolled {
  padding-top: 72px;
}

/* Ensure top-bar always above header */
.top-bar  { z-index: 1002; }
.header   { z-index: 1001; }

/* Smooth transition on body padding (matches header transition) */
body {
  transition: padding-top 0.35s cubic-bezier(0.23,1,0.32,1);
}

/* ── Mobile: top-bar wraps to 2 lines — JS handles exact px,
   but set a safe fallback for very small screens ── */
@media (max-width: 480px) {
  body { padding-top: 130px; }
  /* top-bar handled in premium block */
}

@media (max-width: 360px) {
  body { padding-top: 140px; }
}