/* ---------------------------------------------------------------
   Ensure Academy — custom styles (animations, gradients, helpers)
   --------------------------------------------------------------- */

* { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
    body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; overflow-x: hidden; }
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    .font-serif { font-optical-sizing: auto; }

    @media (max-width: 767px) {
      body { padding-bottom: 5rem; }
      ::-webkit-scrollbar { display: none; }

      /* ── Mobile hero: all text pure white ── */
      section#about p,
      section#about h1,
      section#about h1 span,
      section#about .service-pill span,
      section#about .hero-badge span {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
      }

      /* Primary CTA — white bg, keep dark text visible */
      section#about a.bg-white {
        background: #ffffff !important;
        color: #0B2A4A !important;
        -webkit-text-fill-color: #0B2A4A !important;
      }
      section#about a.bg-white span,
      section#about a.bg-white svg {
        color: #0B2A4A !important;
        -webkit-text-fill-color: #0B2A4A !important;
      }

      /* Secondary CTA — glass button */
      section#about a.bg-white\/10 {
        background: rgba(255,255,255,0.15) !important;
        border: 1.5px solid rgba(255,255,255,0.50) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
      }
      section#about a.bg-white\/10 span {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
      }

      /* ── Mobile hero: branded SVG illustration ── */
      section#about.hero-gradient {
        background:
          linear-gradient(to bottom,
            rgba(8,20,40,0.82)   0%,
            rgba(11,42,74,0.75) 25%,
            rgba(14,60,120,0.60) 50%,
            rgba(80,20,100,0.50) 72%,
            rgba(8,20,40,0.70)  100%),
          url('../assets/hero1.png') center top / cover no-repeat !important;
      }
    }

    @keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
    @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
    @keyframes spin-slow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
    @keyframes breathe { 0%,100% { transform:scale(1); opacity:0.5; } 50% { transform:scale(1.1); opacity:0.8; } }
    @keyframes glow-pulse { 0%,100% { box-shadow:0 0 20px rgba(142,45,168,0.15); } 50% { box-shadow:0 0 40px rgba(142,45,168,0.30); } }

    .animate-fadeInUp { animation: fadeInUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards; opacity:0; }
    .animate-float { animation: float 5s ease-in-out infinite; }
    .animate-spin-slow { animation: spin-slow 20s linear infinite; }
    .animate-breathe { animation: breathe 4s ease-in-out infinite; }
    .animate-glow { animation: glow-pulse 3s ease-in-out infinite; }

    .delay-100 { animation-delay:100ms; }
    .delay-200 { animation-delay:200ms; }
    .delay-300 { animation-delay:300ms; }
    .delay-400 { animation-delay:400ms; }
    .delay-500 { animation-delay:500ms; }
    .delay-600 { animation-delay:600ms; }

    .glass { background:rgba(255,255,255,0.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
    
    .hero-gradient { background: linear-gradient(135deg, #0B2A4A 0%, #0E6FB4 22%, #1389DA 40%, #6E2A9A 62%, #8E2DA8 80%, #C0298C 100%); }

    /* Hero section: photo + gradient overlay */
    section#about.hero-gradient {
      background:
        linear-gradient(135deg,
          rgba(11,42,74,0.90)  0%,
          rgba(14,111,180,0.78) 25%,
          rgba(19,137,218,0.65) 45%,
          rgba(110,42,154,0.75) 65%,
          rgba(142,45,168,0.85) 82%,
          rgba(192,41,140,0.92) 100%),
        url('assets/hero-bg.jpg') center center / cover no-repeat;
    }
    .hero-mesh {
      background-image: radial-gradient(at 10% 90%, rgba(245,130,32,0.16) 0%, transparent 50%),
                         radial-gradient(at 90% 10%, rgba(192,41,140,0.22) 0%, transparent 50%),
                         radial-gradient(at 50% 50%, rgba(19,137,218,0.10) 0%, transparent 60%);
    }

    .warm-gradient-bg { background: linear-gradient(135deg, #FDF8F0 0%, #FAF0E0 30%, #F6ECFA 70%, #ECD6F4 100%); }
    .inclusive-gradient-bg { background: linear-gradient(135deg, #ECFBFA 0%, #F6ECFA 40%, #ECF6FD 70%, #FDECF4 100%); }
    .careers-gradient { background: linear-gradient(135deg, #EEF6FF 0%, #F8FAFC 55%, #F3EEFF 100%); }

    .card-hover { transition: all 0.3s cubic-bezier(0.16,1,0.3,1); }
    .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(122,36,145,0.18); }

    .text-gradient { background: linear-gradient(135deg, #1389DA, #8E2DA8, #C0298C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .text-gradient-lavender { background: linear-gradient(135deg, #8E2DA8, #AD57CB, #C0298C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

    .scroll-hidden { opacity:0; transform:translateY(30px); transition:all 0.8s cubic-bezier(0.16,1,0.3,1); }
    .scroll-visible { opacity:1; transform:translateY(0); }

    .service-tab-active-edu { background:linear-gradient(135deg,#0E6FB4,#1389DA); color:#fff; box-shadow:0 4px 15px rgba(19,137,218,0.3); }
    .service-tab-active-well { background:linear-gradient(135deg,#7A2491,#8E2DA8); color:#fff; box-shadow:0 4px 15px rgba(142,45,168,0.3); }

    .toast { transform:translateY(100px); opacity:0; transition:all 0.4s cubic-bezier(0.16,1,0.3,1); }
    .toast.show { transform:translateY(0); opacity:1; }

    .service-panel { display: none; }
    .service-panel.active { display: block; }

    .wellness-card { position: relative; overflow: hidden; }
    .wellness-card::before { content:''; position:absolute; top:-50%; right:-50%; width:100%; height:100%; background:radial-gradient(circle, rgba(142,45,168,0.07) 0%, transparent 70%); pointer-events:none; transition:all 0.5s; }
    .wellness-card:hover::before { transform:scale(1.5); background:radial-gradient(circle, rgba(142,45,168,0.12) 0%, transparent 70%); }

    .rainbow-border { background: linear-gradient(135deg, #1389DA, #8E2DA8, #C0298C, #F58220, #1389DA); background-size: 300% 300%; animation: rainbow-shift 6s ease infinite; }
    @keyframes rainbow-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

    .service-pill { transition: all 0.3s cubic-bezier(0.16,1,0.3,1); }
    .service-pill:hover { transform: translateY(-2px); }

    /* ─────────────────────────────────────────────────────
       Uniform section headings — one colour per section,
       no word-level splits inside any heading.
    ───────────────────────────────────────────────────── */

    /* shared reset: strip gradient text & enforce font */
    #mission h2, #mission h2 *,
    #services h2, #services h2 *,
    #psychology h2, #psychology h2 *,
    #inclusive-learning h2, #inclusive-learning h2 *,
    #team h2, #team h2 *,
    #how-it-works h2, #how-it-works h2 *,
    #testimonials h2, #testimonials h2 *,
    #blog h2, #blog h2 *,
    .section-title, .section-title * {
      background: none !important;
      -webkit-background-clip: unset !important;
      background-clip: unset !important;
      font-weight: 700;
    }
    /* all heading words: same font, no serif/italic splits */
    #mission h2 *, #services h2 *,
    #psychology h2 *, #inclusive-learning h2 *,
    #team h2 *, #how-it-works h2 *,
    #testimonials h2 *, #blog h2 *,
    .section-title * {
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
      font-style: normal !important;
      font-weight: 700 !important;
    }

    /* #mission — slate bg → brand navy */
    #mission h2, #mission h2 * {
      color: #0B2A4A !important;
      -webkit-text-fill-color: #0B2A4A !important;
    }
    /* #services — white bg → brand blue */
    #services h2, #services h2 * {
      color: #0E6FB4 !important;
      -webkit-text-fill-color: #0E6FB4 !important;
    }
    /* #psychology — warm lavender bg → deep purple */
    #psychology h2, #psychology h2 * {
      color: #6E2A9A !important;
      -webkit-text-fill-color: #6E2A9A !important;
    }
    /* #inclusive-learning — teal/mint bg → brand blue */
    #inclusive-learning h2, #inclusive-learning h2 * {
      color: #0E6FB4 !important;
      -webkit-text-fill-color: #0E6FB4 !important;
    }
    /* #team — slate bg → lavender */
    #team h2, #team h2 * {
      color: #7A2491 !important;
      -webkit-text-fill-color: #7A2491 !important;
    }
    /* #how-it-works — white bg → brand navy */
    #how-it-works h2, #how-it-works h2 * {
      color: #0B2A4A !important;
      -webkit-text-fill-color: #0B2A4A !important;
    }
    /* #testimonials — slate bg → purple */
    #testimonials h2, #testimonials h2 * {
      color: #8E2DA8 !important;
      -webkit-text-fill-color: #8E2DA8 !important;
    }
    /* #blog — white bg → brand blue */
    #blog h2, #blog h2 * {
      color: #0E6FB4 !important;
      -webkit-text-fill-color: #0E6FB4 !important;
    }
    /* #join-team — light bg → brand navy */
    #join-team h2, #join-team h2 * {
      color: #0B2A4A !important;
      -webkit-text-fill-color: #0B2A4A !important;
      background: none !important;
    }
    #join-team h2 .font-serif {
      color: #7A2491 !important;
      -webkit-text-fill-color: #7A2491 !important;
    }
    /* #faq — slate bg → brand navy */
    #faq h2, #faq h2 * {
      color: #0B2A4A !important;
      -webkit-text-fill-color: #0B2A4A !important;
      background: none !important;
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
      font-style: normal !important;
      font-weight: 700 !important;
    }
    /* #cta — light bg → brand navy */
    #cta h2, #cta h2 * {
      color: #0B2A4A !important;
      -webkit-text-fill-color: #0B2A4A !important;
      background: none !important;
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
      font-style: normal !important;
      font-weight: 700 !important;
    }
    #cta h2 .font-serif {
      color: #7A2491 !important;
      -webkit-text-fill-color: #7A2491 !important;
    }

    .modal-overlay { transition: opacity 0.3s ease; }
    .modal-content { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; }

    /* ── WhatsApp FAB (mobile only) ── */
    .whatsapp-fab {
      position: fixed;
      bottom: 5.5rem;        /* sits above the 64px bottom nav + 8px gap */
      right: 1.25rem;
      z-index: 45;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #25D366;
      box-shadow:
        0 4px 12px rgba(37,211,102,0.45),
        0 1px 3px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.2s ease;
    }
    .whatsapp-fab:hover,
    .whatsapp-fab:active {
      transform: scale(1.12);
      box-shadow:
        0 8px 24px rgba(37,211,102,0.55),
        0 2px 6px rgba(0,0,0,0.18);
    }

    /* ── Testimonials Carousel ─────────────────────── */
    .carousel-track {
      display: flex !important;
      gap: 1.5rem;
      transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: transform;
      align-items: stretch;
    }
    /* Each card: full width on mobile, 1/3 on desktop */
    .carousel-track > div {
      flex-shrink: 0 !important;
      width: calc(85vw) !important;
      max-width: 420px;
    }
    @media (min-width: 768px) {
      .carousel-track > div {
        width: calc(33.333% - 1rem) !important;
        max-width: none;
      }
    }
    /* Arrow buttons */
    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 1.5px solid #e2e8f0;
      background: #ffffff;
      box-shadow: 0 4px 16px rgba(0,0,0,0.10);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      z-index: 10;
      color: #7A2491;
      transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
    }
    .carousel-arrow:hover { background: #f3e8ff; border-color: #c084fc; transform: translateY(-50%) scale(1.08); }
    .carousel-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
    .carousel-arrow-left  { left: -4px; }
    .carousel-arrow-right { right: -4px; }
    .carousel-arrow { display: none !important; }
    /* Dot indicators */
    .carousel-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #CBD5E1;
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
      border: none;
      padding: 0;
      flex-shrink: 0;
    }
    .carousel-dot.active {
      width: 28px;
      border-radius: 4px;
      background: #7A2491;
    }

    /* CTA custom dropdown panel */
    #service-menu li + li button { border-top: 1px solid #f1f5f9; }

    /* Nav is fixed on all screen sizes so it always overlays the hero gradient */
    .app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; }
    @media (max-width: 767px) {
      .app-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; }
      .section-title { font-size: 1.75rem; line-height: 1.2; }
      .hero-badge { font-size: 0.75rem; }
    }

    /* Navbar: links are light over the dark hero, switch to dark when the bar turns white on scroll */
    #navbar .nav-link { color: rgba(255,255,255,0.85); }
    #navbar .nav-link:hover { color: #fff; }
    #navbar.nav-scrolled .nav-link { color: #475569; }
    #navbar.nav-scrolled .nav-link:hover { color: #0E6FB4; }
    /* Brand wordmark beside the mark: light over the hero, dark when the bar turns white */
    #navbar .nav-brandtext { color: #ffffff; }
    #navbar .nav-brandaccent { color: #ffffff; }
    #navbar.nav-scrolled .nav-brandtext { color: #143F64; }
    #navbar.nav-scrolled .nav-brandaccent { color: #143F64; }

    /* Push hero content below the fixed navbar (mobile 4rem / desktop 4.5rem) */
    section#about { padding-top: 4rem; }
    @media (min-width: 768px) { section#about { padding-top: 4.5rem; } }

    /* Footer responsive layout */
    .footer-nav-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    @media (max-width: 767px) {
      .footer-top { flex-direction: column !important; }
      .footer-brand { width: 100% !important; }
      .footer-nav-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    }