/* ===== Global Header & Footer Styles ===== */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --blue: #00577d;
      --sky: #58a0ff;
      --pink: #fecddc;
      --teal: #77aec5;
      --yellow: #ffd200;
      --text: #526275;
      --ink: #17324d;
      --line: #dcebf6;
      --soft: #f4faff;
      --white: #ffffff;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: #ffffff;
      color: #101828;
      font-family: "Poppins", sans-serif;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* ================= HEADER ================= */

    .site-header {
      width: 100%;
      background: rgba(255, 255, 255, 0.90);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(220, 235, 246, 0.86);
      position: sticky;
      top: 0;
      z-index: 999;
    }

    .header-container {
      width: min(1180px, calc(100% - 32px));
      min-height: 82px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .brand-logo {
      display: block;
      width: 155px;
      height: auto;
      object-fit: contain;
    }

    .nav-area {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .main-nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-link,
    .dropdown-button {
      border: 0;
      background: transparent;
      color: #34495e;
      min-height: 42px;
      padding: 0 13px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: "Poppins", sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    .nav-link:hover,
    .dropdown:hover .dropdown-button {
      color: var(--blue);
      background: #eef7ff;
      transform: translateY(-2px);
    }

    .dropdown {
      position: relative;
    }

    .chevron {
      width: 7px;
      height: 7px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      transition: transform .2s ease;
    }

    .dropdown:hover .chevron {
      transform: rotate(225deg) translateY(-1px);
    }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      width: 560px;
      padding: 18px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(220, 235, 246, 0.95);
      box-shadow: 0 24px 54px rgba(0, 44, 92, 0.12);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    }

    .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .dropdown-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .course-link {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 12px;
      border-radius: 18px;
      color: var(--ink);
      background: #ffffff;
      border: 1px solid rgba(220, 235, 246, 0.75);
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }

    .course-link:hover {
      transform: translateY(-3px);
      background: #f7fbff;
      border-color: rgba(88, 160, 255, 0.28);
    }

    .course-icon {
      width: 34px;
      height: 34px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: #eef7ff;
      font-size: 17px;
      flex: 0 0 34px;
    }

    .course-link span:last-child {
      font-size: 13px;
      font-weight: 600;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .whatsapp-link {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: #f4faff;
      border: 1px solid rgba(220, 235, 246, 0.95);
      color: var(--blue);
      font-size: 18px;
      transition: transform .2s ease, background .2s ease;
    }

    .whatsapp-link:hover {
      transform: translateY(-3px) rotate(-4deg);
      background: #e8f5ff;
    }

    .demo-btn {
      height: 44px;
      padding: 0 20px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--blue);
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 16px 32px rgba(0, 87, 125, 0.18);
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
      white-space: nowrap;
    }

    .demo-btn:hover {
      transform: translateY(-3px);
      background: var(--sky);
      box-shadow: 0 20px 42px rgba(88, 160, 255, 0.24);
    }

    .mobile-toggle {
      display: none;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 16px;
      background: #eef7ff;
      cursor: pointer;
      position: relative;
    }

    .mobile-toggle span {
      position: absolute;
      left: 13px;
      width: 20px;
      height: 2px;
      border-radius: 999px;
      background: var(--blue);
      transition: transform .2s ease, top .2s ease, opacity .2s ease;
    }

    .mobile-toggle span:nth-child(1) { top: 15px; }
    .mobile-toggle span:nth-child(2) { top: 22px; }
    .mobile-toggle span:nth-child(3) { top: 29px; }

    .mobile-toggle.active span:nth-child(1) {
      top: 22px;
      transform: rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2) {
      opacity: 0;
    }

    .mobile-toggle.active span:nth-child(3) {
      top: 22px;
      transform: rotate(-45deg);
    }

    .mobile-panel {
      display: none;
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto 16px;
      padding: 14px;
      border-radius: 26px;
      background: #ffffff;
      border: 1px solid rgba(220, 235, 246, 0.95);
      box-shadow: 0 18px 40px rgba(0, 44, 92, 0.08);
    }

    .mobile-panel.open {
      display: block;
      animation: openMenu .22s ease forwards;
    }

    .mobile-link {
      display: block;
      padding: 13px 14px;
      border-radius: 16px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
    }

    .mobile-link:hover {
      background: #f4faff;
      color: var(--blue);
    }

    .mobile-courses {
      margin: 8px 0;
      padding: 10px;
      border-radius: 18px;
      background: #f7fbff;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .mobile-course {
      padding: 10px;
      border-radius: 14px;
      background: #ffffff;
      color: var(--ink);
      font-size: 12px;
      font-weight: 600;
      border: 1px solid rgba(220, 235, 246, 0.9);
    }

    @keyframes openMenu {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .preview-space {
      min-height: 360px;
      display: grid;
      place-items: center;
      color: #9aa6b4;
      background:
        radial-gradient(circle at 20% 20%, rgba(254, 205, 220, 0.22), transparent 26%),
        radial-gradient(circle at 80% 30%, rgba(88, 160, 255, 0.10), transparent 26%),
        #ffffff;
      text-align: center;
      padding: 40px 20px;
    }

    .preview-space h1 {
      font-family: "Fredoka", sans-serif;
      color: var(--blue);
      font-size: clamp(34px, 4vw, 56px);
      margin-bottom: 10px;
    }

    /* ================= FOOTER ================= */

    .site-footer {
      width: 100%;
      background: #ffffff;
      padding: 0 0 28px;
      overflow: hidden;
      position: relative;
    }

    .footer-wave {
      height: 64px;
      background: #eef7ff;
      border-radius: 100% 100% 0 0 / 70% 70% 0 0;
      margin-bottom: -1px;
    }

    .footer-main {
      background:
        radial-gradient(circle at 12% 18%, rgba(254, 205, 220, 0.22), transparent 22%),
        radial-gradient(circle at 86% 20%, rgba(255, 210, 0, 0.13), transparent 20%),
        linear-gradient(135deg, #eef7ff 0%, #f7fbff 52%, #ffffff 100%);
      border-top: 1px solid rgba(220, 235, 246, 0.95);
      position: relative;
      isolation: isolate;
    }

    .footer-main::before {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      left: -90px;
      bottom: -90px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.10);
      z-index: -1;
    }

    .footer-main::after {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      right: -50px;
      top: 30px;
      border-radius: 34px;
      background: rgba(255, 255, 255, 0.52);
      transform: rotate(18deg);
      z-index: -1;
    }

    .footer-container {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 54px 0 24px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr 0.85fr 0.85fr 1.05fr;
      gap: 34px;
      align-items: start;
    }

    .footer-brand {
      max-width: 360px;
    }

    .footer-brand-title {
      font-family: "Fredoka", sans-serif;
      color: var(--blue);
      font-size: 30px;
      line-height: 1.05;
      font-weight: 600;
      letter-spacing: -0.4px;
      margin-bottom: 16px;
    }

    .footer-brand p {
      color: var(--text);
      font-size: 14.5px;
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .footer-socials {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .social-link {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: #ffffff;
      border: 1px solid rgba(220, 235, 246, 0.95);
      color: var(--blue);
      font-size: 14px;
      font-weight: 800;
      box-shadow: 0 10px 20px rgba(0, 44, 92, 0.05);
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }

    .social-link:hover {
      transform: translateY(-4px) rotate(-4deg);
      background: var(--blue);
      color: #ffffff;
    }

    .footer-col h3 {
      font-family: "Fredoka", sans-serif;
      color: var(--blue);
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .footer-links {
      display: grid;
      gap: 11px;
    }

    .footer-links a,
    .contact-line {
      color: #536879;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.55;
      transition: color .2s ease, transform .2s ease;
    }

    .footer-links a:hover {
      color: var(--blue);
      transform: translateX(4px);
    }

    .newsletter {
      padding: 18px;
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(220, 235, 246, 0.95);
      box-shadow: 0 16px 32px rgba(0, 44, 92, 0.06);
    }

    .newsletter p {
      color: var(--text);
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 14px;
    }

    .newsletter-form {
      display: grid;
      gap: 10px;
    }

    .newsletter-form input {
      width: 100%;
      height: 44px;
      border: 1px solid rgba(205, 222, 236, 0.96);
      border-radius: 999px;
      background: #ffffff;
      padding: 0 15px;
      outline: none;
      color: var(--ink);
      font-family: "Poppins", sans-serif;
      font-size: 13px;
    }

    .newsletter-form button {
      height: 44px;
      border: 0;
      border-radius: 999px;
      background: var(--blue);
      color: #ffffff;
      font-family: "Poppins", sans-serif;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease;
    }

    .newsletter-form button:hover {
      transform: translateY(-2px);
      background: var(--sky);
    }

    .footer-bottom {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding-top: 20px;
      border-top: 1px solid rgba(188, 214, 232, 0.7);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      color: #6b7d8e;
      font-size: 13px;
      font-weight: 500;
    }

    .bottom-links {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .bottom-links a:hover {
      color: var(--blue);
    }

    @media (max-width: 1080px) {
      .brand-logo {
        width: 145px;
      }

      .main-nav,
      .header-actions {
        display: none;
      }

      .mobile-toggle {
        display: block;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      .header-container {
        min-height: 74px;
      }

      .brand-logo {
        width: 132px;
      }

      .mobile-courses {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-container {
        padding-top: 40px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  

/* ===== Final page polish ===== */
body {
  margin: 0;
  overflow-x: hidden;
}
main {
  overflow: hidden;
}
.homepage-block {
  width: 100%;
  overflow: hidden;
}


/* ===== Hero section ===== */

    #sec-hero{
      --blue: #58a0ff;
      --deep-blue: #00577d;
      --pink: #fecddc;
      --teal: #77aec5;
      --yellow: #ffd200;
      --text: #101828;
      --muted: #667085;
      --white: #ffffff;
      --field: #f8fbff;
      --form: #e8f0ff;
      --border: #d7e2f0;
    }

    #sec-hero *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-hero{
      font-family: "Poppins", sans-serif;
      background: #ffffff;
      color: var(--text);
      overflow-x: hidden;
    }

    #sec-hero button, #sec-hero input, #sec-hero select{
      font-family: inherit;
    }

    #sec-hero .hero-page{
      min-height: 100vh;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 34px 20px;
    }

    #sec-hero .hero{
      width: min(1180px, 100%);
      min-height: 620px;
      display: grid;
      grid-template-columns: 47% 53%;
      align-items: center;
      gap: 26px;
      background: #ffffff;
    }

    #sec-hero .hero-left{
      width: 100%;
      max-width: 560px;
      padding: 10px 0;
    }

    #sec-hero .mini-tag{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 15px;
      border-radius: 10px;
      background: #eef6ff;
      color: var(--blue);
      font-size: 12.5px;
      font-weight: 400;
      margin-bottom: 20px;
      animation: popIn_sec_hero 0.45s ease both;
    }

    #sec-hero .mini-tag::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--yellow);
      box-shadow: 0 0 0 5px rgba(255, 210, 0, 0.18);
    }

    #sec-hero h1{
      max-width: 555px;
      font-size: clamp(32px, 3.45vw, 46px);
      line-height: 1.1;
      letter-spacing: -1.1px;
      color: var(--text);
      font-weight: 600;
      margin-bottom: 12px;
      animation: slideUp_sec_hero 0.55s ease 0.05s both;
    }

    #sec-hero .typing-area{
      min-height: 56px;
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 24px;
      animation: slideUp_sec_hero 0.55s ease 0.12s both;
    }

    #sec-hero .typing-course{
      font-size: clamp(30px, 3.15vw, 44px);
      line-height: 1;
      letter-spacing: -0.8px;
      font-weight: 600;
      color: var(--deep-blue);
      transition: color 0.25s ease;
    }

    #sec-hero .cursor{
      width: 4px;
      height: clamp(31px, 3vw, 45px);
      border-radius: 20px;
      background: var(--yellow);
      animation: blink_sec_hero 0.78s steps(1) infinite;
    }

    #sec-hero .hero-desc{
      max-width: 525px;
      color: var(--muted);
      font-size: 15.5px;
      line-height: 1.75;
      margin-bottom: 24px;
      animation: slideUp_sec_hero 0.55s ease 0.18s both;
    }

    #sec-hero .lead-form{
      width: min(100%, 535px);
      padding: 15px;
      border-radius: 16px;
      background: var(--form);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px;
      box-shadow: 0 18px 40px rgba(0, 44, 92, 0.09);
      animation: slideUp_sec_hero 0.55s ease 0.24s both;
    }

    #sec-hero .field.full{
      grid-column: 1 / -1;
    }

    #sec-hero .lead-form input, #sec-hero .lead-form select{
      width: 100%;
      height: 44px;
      border: 1px solid #b9c7d9;
      border-radius: 9px;
      background: #ffffff;
      outline: none;
      padding: 0 14px;
      font-size: 12.5px;
      font-weight: 400;
      color: var(--text);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    #sec-hero .lead-form input::placeholder{
      color: #98a2b3;
    }

    #sec-hero .lead-form input:focus, #sec-hero .lead-form select:focus{
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(88, 160, 255, 0.15);
      transform: translateY(-1px);
    }

    #sec-hero .other-field{
      grid-column: 1 / -1;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease;
    }

    #sec-hero .other-field.show{
      max-height: 50px;
      opacity: 1;
      transform: translateY(0);
    }

    #sec-hero .submit-btn{
      grid-column: 1 / -1;
      width: min(250px, 100%);
      height: 44px;
      justify-self: center;
      border: 0;
      border-radius: 10px;
      background: #0b8fd0;
      color: #ffffff;
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(11, 143, 208, 0.18);
      transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    #sec-hero .submit-btn:hover{
      background: var(--deep-blue);
      transform: translateY(-2px);
      box-shadow: 0 16px 32px rgba(0, 87, 125, 0.20);
    }

    #sec-hero .form-msg{
      display: none;
      grid-column: 1 / -1;
      background: #ffffff;
      color: var(--deep-blue);
      border-radius: 9px;
      padding: 10px 12px;
      text-align: center;
      font-size: 12.5px;
      font-weight: 400;
    }

    #sec-hero .form-msg.show{
      display: block;
      animation: popIn_sec_hero 0.25s ease both;
    }

    #sec-hero .hero-right{
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-width: 0;
    }

    #sec-hero .visual-stage{
      width: min(100%, 690px);
      aspect-ratio: 1498 / 1050;
      position: relative;
      isolation: isolate;
      transform: translateZ(0);
    }

    #sec-hero .layer{
      position: absolute;
      display: block;
      height: auto;
      object-fit: contain;
      user-select: none;
      pointer-events: none;
      filter: drop-shadow(0 14px 24px rgba(0, 39, 76, 0.05));
      opacity: 0;
      transform: translateY(16px) scale(0.985);
      animation: layerIn_sec_hero 0.55s ease forwards, floatLayer_sec_hero 5.5s ease-in-out infinite;
    }

    #sec-hero .main-layer{
      left: 26.17%;
      top: 3.81%;
      width: 66.96%;
      z-index: 1;
      animation-delay: 0.05s, 0.75s;
    }

    #sec-hero .goal-layer{
      left: 3.60%;
      top: 19.52%;
      width: 26.84%;
      z-index: 3;
      animation-delay: 0.18s, 0.95s;
    }

    #sec-hero .score-layer{
      left: 5.01%;
      top: 48.76%;
      width: 23.96%;
      z-index: 2;
      animation-delay: 0.30s, 1.1s;
    }

    #sec-hero .live-layer{
      left: 31.11%;
      top: 52.00%;
      width: 29.77%;
      z-index: 2;
      animation-delay: 0.42s, 1.2s;
    }

    #sec-hero .practice-layer{
      left: 62.48%;
      top: 52.00%;
      width: 29.97%;
      z-index: 2;
      animation-delay: 0.52s, 1.35s;
    }

    #sec-hero .study-layer{
      left: 31.11%;
      top: 72.19%;
      width: 29.77%;
      z-index: 2;
      animation-delay: 0.62s, 1.5s;
    }

    #sec-hero .improve-layer{
      left: 62.48%;
      top: 72.19%;
      width: 29.97%;
      z-index: 2;
      animation-delay: 0.72s, 1.65s;
    }

    #sec-hero .main-anim{
      position: absolute;
      left: 26.17%;
      top: 3.81%;
      width: 66.96%;
      aspect-ratio: 1003 / 464;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      animation: showOverlay_sec_hero 0.35s ease forwards 0.65s;
    }

    #sec-hero .counter-cover{
      position: absolute;
      left: 5.6%;
      top: 9.3%;
      width: 34%;
      height: 18%;
      background: rgba(255,255,255,0.94);
      border-radius: 10px;
      display: flex;
      align-items: center;
      color: var(--deep-blue);
      font-size: clamp(22px, 3.2vw, 47px);
      line-height: 1;
      font-weight: 600;
      letter-spacing: -1.5px;
    }

    #sec-hero .grow-bar{
      position: absolute;
      bottom: 19.4%;
      width: 7.8%;
      border-radius: 6px;
      background: linear-gradient(180deg, #58a0ff, #00577d);
      transform: scaleY(0);
      transform-origin: bottom;
      opacity: 0.98;
      animation: growBar_sec_hero 0.75s cubic-bezier(.2,.9,.3,1.15) forwards;
    }

    #sec-hero .b1{ left: 14.2%; height: 13.5%; background: linear-gradient(180deg, #98d1ff, #58a0ff); animation-delay: 0.75s; }
    #sec-hero .b2{ left: 28.5%; height: 19%; background: linear-gradient(180deg, #7fc1ff, #58a0ff); animation-delay: 0.88s; }
    #sec-hero .b3{ left: 43.0%; height: 26.5%; background: linear-gradient(180deg, #58a0ff, #217ee9); animation-delay: 1.01s; }
    #sec-hero .b4{ left: 57.4%; height: 34.7%; background: linear-gradient(180deg, #58a0ff, #106fc9); animation-delay: 1.14s; }
    #sec-hero .b5{ left: 71.7%; height: 44.3%; background: linear-gradient(180deg, #0b75ad, #00577d); animation-delay: 1.27s; }
    #sec-hero .b6{ left: 85.7%; height: 57.1%; background: linear-gradient(180deg, #006d9c, #00577d); animation-delay: 1.40s; }

    #sec-hero .pulse_sec_hero-dot{
      position: absolute;
      z-index: 5;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--yellow);
      right: 5.8%;
      top: 7.9%;
      box-shadow: 0 0 0 8px rgba(255, 210, 0, 0.18);
      animation: pulse_sec_hero 1.7s ease-in-out infinite;
    }

    @keyframes blink_sec_hero {
      50% { opacity: 0; }
    }

    @keyframes slideUp_sec_hero {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes popIn_sec_hero {
      from { opacity: 0; transform: scale(0.96); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes layerIn_sec_hero {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes floatLayer_sec_hero {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -9px; }
    }

    @keyframes showOverlay_sec_hero {
      to { opacity: 1; }
    }

    @keyframes growBar_sec_hero {
      to { transform: scaleY(1); }
    }

    @keyframes pulse_sec_hero {
      0%, 100% { transform: scale(1); opacity: 0.85; }
      50% { transform: scale(1.18); opacity: 1; }
    }

    @media (max-width: 1050px){
      #sec-hero .hero-page{
        align-items: flex-start;
      }

      #sec-hero .hero{
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 32px;
      }

      #sec-hero .hero-left{
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
      }

      #sec-hero h1, #sec-hero .hero-desc{
        margin-left: auto;
        margin-right: auto;
      }

      #sec-hero .typing-area{
        justify-content: center;
      }

      #sec-hero .lead-form{
        margin: 0 auto;
      }

      #sec-hero .hero-right{
        justify-content: center;
      }

      #sec-hero .visual-stage{
        width: min(100%, 760px);
      }
    }

    @media (max-width: 620px){
      #sec-hero .hero-page{
        padding: 24px 14px;
      }

      #sec-hero .hero{
        width: 100%;
      }

      #sec-hero .mini-tag{
        font-size: 12px;
        margin-bottom: 16px;
      }

      #sec-hero .hero-desc{
        font-size: 14px;
      }

      #sec-hero .lead-form{
        grid-template-columns: 1fr;
        padding: 13px;
      }

      #sec-hero .submit-btn{
        width: 100%;
      }

      #sec-hero .visual-stage{
        width: 100%;
      }

      #sec-hero .layer{
        animation-name: layerIn_sec_hero;
      }

      #sec-hero .main-anim{
        display: none;
      }

      #sec-hero .pulse_sec_hero-dot{
        display: none;
      }
    }
  


/* ===== Logo slider ===== */

    #sec-logo-slider *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-logo-slider{
      font-family: "Poppins", sans-serif;
      background: #ffffff;
      color: #101828;
    }

    #sec-logo-slider .logo-section{
      width: 100%;
      padding: 64px 0 72px;
      background: #ffffff;
      overflow: hidden;
    }

    #sec-logo-slider .logo-container{
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    #sec-logo-slider .logo-heading{
      text-align: center;
      margin-bottom: 30px;
    }

    #sec-logo-slider .logo-heading h2{
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.15;
      letter-spacing: -0.7px;
      color: #00577d;
      font-weight: 600;
      margin-bottom: 10px;
    }

    #sec-logo-slider .logo-heading p{
      max-width: 620px;
      margin: 0 auto;
      font-size: 15px;
      line-height: 1.7;
      color: #667085;
      font-weight: 400;
    }

    #sec-logo-slider .logo-slider{
      width: 100%;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    #sec-logo-slider .logo-track{
      display: flex;
      align-items: center;
      gap: 24px;
      width: max-content;
      animation: slideLogos_sec_logo_slider 42s linear infinite;
    }

    #sec-logo-slider .logo-slider:hover .logo-track{
      animation-play-state: paused;
    }

    #sec-logo-slider .logo-card{
      width: 240px;
      height: 118px;
      flex: 0 0 auto;
      border-radius: 18px;
      background: #ffffff;
      border: 1px solid rgba(215, 226, 240, 0.95);
      box-shadow: 0 14px 32px rgba(0, 44, 92, 0.08);
      display: grid;
      place-items: center;
      padding: 14px 18px;
      transition: transform .22s ease, box-shadow .22s ease;
    }

    #sec-logo-slider .logo-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 20px 42px rgba(0, 44, 92, 0.12);
    }

    #sec-logo-slider .logo-card img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }


    #sec-logo-slider .logo-card img[alt="British Council logo"]{
      width: 82%;
      height: 82%;
      object-fit: contain;
    }

    #sec-logo-slider .logo-card img[alt="IDP logo"]{
      width: 80%;
      height: 80%;
      object-fit: contain;
    }

    #sec-logo-slider .logo-card img[alt="AEO logo"]{
      width: 78%;
      height: 78%;
      object-fit: contain;
    }

    @media (max-width: 760px){
      #sec-logo-slider .logo-card img[alt="British Council logo"]{
        width: 80%;
        height: 80%;
      }

      #sec-logo-slider .logo-card img[alt="IDP logo"]{
        width: 78%;
        height: 78%;
      }

      #sec-logo-slider .logo-card img[alt="AEO logo"]{
        width: 76%;
        height: 76%;
      }
    }


    @keyframes slideLogos_sec_logo_slider {
      from { transform: translateX(0); }
      to { transform: translateX(calc(-50% - 12px)); }
    }

    @media (max-width: 760px){
      #sec-logo-slider .logo-section{
        padding: 54px 0 60px;
      }

      #sec-logo-slider .logo-heading{
        margin-bottom: 22px;
      }

      #sec-logo-slider .logo-heading p{
        font-size: 13.5px;
      }

      #sec-logo-slider .logo-track{
        gap: 16px;
        animation-duration: 34s;
      }

      #sec-logo-slider .logo-card{
        width: 180px;
        height: 92px;
        border-radius: 14px;
        padding: 12px 14px;
      }
    }
  


/* ===== Courses ===== */

    #sec-courses *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-courses{
      background: #ffffff;
      color: #101828;
      font-family: "Poppins", sans-serif;
    }

    #sec-courses .courses-section{
      width: 100%;
      padding: 74px 0 84px;
      background: #ffffff;
      overflow: hidden;
      position: relative;
    }

    #sec-courses .courses-section::before{
      content: "";
      position: absolute;
      width: 210px;
      height: 210px;
      border-radius: 50%;
      background: rgba(254, 205, 220, 0.28);
      left: -90px;
      top: 40px;
      filter: blur(6px);
      pointer-events: none;
    }

    #sec-courses .courses-section::after{
      content: "";
      position: absolute;
      width: 230px;
      height: 230px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.14);
      right: -100px;
      bottom: 40px;
      filter: blur(6px);
      pointer-events: none;
    }

    #sec-courses .courses-container{
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    #sec-courses .courses-title{
      font-family: "Fredoka", sans-serif;
      font-size: clamp(34px, 3.6vw, 48px);
      line-height: 1;
      font-weight: 600;
      color: #0b8fd0;
      letter-spacing: -0.5px;
      margin-bottom: 38px;
    }

    #sec-courses .courses-grid{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    #sec-courses .course-card{
      height: 182px;
      border-radius: 30px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.86);
      box-shadow: 0 16px 36px rgba(0, 44, 92, 0.08);
      transition: transform .24s ease, box-shadow .24s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 22px;
      isolation: isolate;
    }

    #sec-courses .course-card::before{
      content: "";
      position: absolute;
      width: 92px;
      height: 92px;
      right: -18px;
      top: -18px;
      border-radius: 26px;
      background: rgba(255,255,255,0.32);
      transform: rotate(18deg);
      z-index: -1;
      transition: transform .28s ease;
    }

    #sec-courses .course-card::after{
      content: "";
      position: absolute;
      width: 74px;
      height: 74px;
      left: -20px;
      bottom: -20px;
      border-radius: 50%;
      background: rgba(255,255,255,0.26);
      z-index: -1;
      transition: transform .28s ease;
    }

    #sec-courses .course-card:hover{
      transform: translateY(-9px) rotate(-1deg);
      box-shadow: 0 24px 54px rgba(0, 44, 92, 0.14);
    }

    #sec-courses .course-card:nth-child(even):hover{
      transform: translateY(-9px) rotate(1deg);
    }

    #sec-courses .course-card:hover::before{
      transform: rotate(28deg) scale(1.12);
    }

    #sec-courses .course-card:hover::after{
      transform: scale(1.15);
    }

    #sec-courses .card-content{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    #sec-courses .course-emoji{
      width: 64px;
      height: 64px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.45);
      box-shadow: 0 10px 20px rgba(0, 44, 92, 0.05);
      font-size: 34px;
      line-height: 1;
      transition: transform .24s ease;
    }

    #sec-courses .course-card:hover .course-emoji{
      transform: translateY(-3px) scale(1.05);
    }

    #sec-courses .course-name{
      font-family: "Fredoka", sans-serif;
      font-size: 24px;
      line-height: 1.15;
      font-weight: 600;
      letter-spacing: -0.2px;
      color: #17324d;
      max-width: 100%;
    }

    #sec-courses .course-name.small{
      font-size: 22px;
    }

    #sec-courses .course-name.dark-purple{
      color: #6b3a83;
    }

    #sec-courses .course-name.deep-blue{
      color: #1d3760;
    }

    #sec-courses .course-card.ielts{ background: linear-gradient(135deg, #ead8ff, #f7ecff); }
    #sec-courses .course-card.pte{ background: linear-gradient(135deg, #cdeeff, #ebf8ff); }
    #sec-courses .course-card.duolingo{ background: linear-gradient(135deg, #cbffa6, #edffde); }
    #sec-courses .course-card.spoken{ background: linear-gradient(135deg, #ffd9b0, #fff0df); }
    #sec-courses .course-card.languagecert{ background: linear-gradient(135deg, #ffe5bf, #fff2e0); }
    #sec-courses .course-card.toefl{ background: linear-gradient(135deg, #bfd9d4, #e8f5f2); }
    #sec-courses .course-card.oxford{ background: linear-gradient(135deg, #fff5a8, #fffbd8); }
    #sec-courses .course-card.pre{ background: linear-gradient(135deg, #ced7ff, #eef2ff); }

    #sec-courses .course-actions{
      display: flex;
      justify-content: center;
      margin-top: 34px;
    }

    #sec-courses .more-courses{
      border: 0;
      height: 48px;
      padding: 0 30px;
      border-radius: 999px;
      background: #0b8fd0;
      color: #ffffff;
      font-family: "Poppins", sans-serif;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(11, 143, 208, 0.20);
      transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
    }

    #sec-courses .more-courses:hover{
      transform: translateY(-3px);
      background: #00577d;
      box-shadow: 0 22px 44px rgba(0, 87, 125, 0.22);
    }

    @media (max-width: 1020px){
      #sec-courses .courses-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 560px){
      #sec-courses .courses-section{
        padding: 56px 0 64px;
      }

      #sec-courses .courses-title{
        text-align: center;
        margin-bottom: 28px;
      }

      #sec-courses .courses-grid{
        grid-template-columns: 1fr;
        gap: 16px;
      }

      #sec-courses .course-card{
        height: 164px;
        border-radius: 24px;
      }

      #sec-courses .course-name{
        font-size: 23px;
      }

      #sec-courses .course-name.small{
        font-size: 21px;
      }

      #sec-courses .course-emoji{
        width: 58px;
        height: 58px;
        font-size: 31px;
        border-radius: 18px;
      }
    }
  


/* ===== Night classes ===== */

    #sec-night *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-night{
      font-family: "Poppins", sans-serif;
      background: #ffffff;
      color: #ffffff;
    }

    #sec-night .night-section{
      width: 100%;
      padding: 72px 0;
      background: #ffffff;
      overflow: hidden;
    }

    #sec-night .night-container{
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    #sec-night .night-panel{
      position: relative;
      min-height: 470px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
      align-items: center;
      gap: 34px;
      padding: 60px 68px;
      background:
        radial-gradient(circle at 14% 14%, rgba(88, 160, 255, 0.15), transparent 24%),
        radial-gradient(circle at 84% 16%, rgba(255, 210, 0, 0.10), transparent 20%),
        linear-gradient(135deg, #031530 0%, #031a3c 45%, #011126 100%);
      box-shadow: 0 26px 60px rgba(0, 26, 60, 0.18);
      overflow: hidden;
      isolation: isolate;
    }

    /* star field */
    #sec-night .night-panel::before, #sec-night .night-panel::after{
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.92) 0 1.2px, transparent 1.8px),
        radial-gradient(circle, rgba(255,255,255,.46) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(104, 162, 255, .45) 0 1.1px, transparent 1.8px);
      background-size: 118px 118px, 76px 76px, 146px 146px;
      background-position: 12px 18px, 48px 56px, 90px 24px;
      opacity: .40;
      animation: driftStars_sec_night 30s linear infinite;
    }

    #sec-night .night-panel::after{
      opacity: .18;
      filter: blur(.8px);
      animation-duration: 42s;
      animation-direction: reverse;
    }

    #sec-night .night-copy{
      max-width: 610px;
      position: relative;
      z-index: 2;
    }

    #sec-night .night-copy h2{
      font-family: "Fredoka", sans-serif;
      font-size: clamp(34px, 4.1vw, 52px);
      line-height: 1.08;
      letter-spacing: -0.7px;
      font-weight: 600;
      color: #ffd857;
      margin-bottom: 24px;
    }

    #sec-night .night-copy p{
      max-width: 600px;
      color: rgba(255,255,255,.94);
      font-size: 16px;
      line-height: 1.85;
      font-weight: 400;
      text-wrap: pretty;
    }

    #sec-night .night-cta{
      margin-top: 36px;
      height: 48px;
      padding: 0 28px;
      border: 0;
      border-radius: 10px;
      background: #0b8fd0;
      color: #ffffff;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(11, 143, 208, 0.24);
      transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
    }

    #sec-night .night-cta:hover{
      transform: translateY(-3px);
      background: #58a0ff;
      box-shadow: 0 20px 42px rgba(88, 160, 255, 0.26);
    }

    #sec-night .night-art-area{
      position: relative;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    /* creates a natural background behind the art so it feels integrated, not pasted */
    #sec-night .art-backdrop{
      position: absolute;
      right: 8px;
      bottom: 10px;
      width: 430px;
      height: 310px;
      border-radius: 44% 48% 24% 28%;
      background: linear-gradient(180deg, rgba(79, 107, 168, .96), rgba(58, 89, 149, .94));
      filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .14));
      z-index: 0;
    }

    #sec-night .art-glow{
      position: absolute;
      width: 340px;
      height: 220px;
      right: 48px;
      bottom: 8px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.10);
      filter: blur(26px);
      z-index: -1;
    }

    #sec-night .night-art{
      position: relative;
      z-index: 2;
      width: min(100%, 560px);
      height: auto;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .12));
      animation: floatArt_sec_night 6.2s ease-in-out infinite;
    }

    #sec-night .mini-stars{
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }

    #sec-night .mini-stars span{
      position: absolute;
      color: rgba(255, 255, 255, .72);
      font-size: 14px;
      animation: twinkle_sec_night 2.4s ease-in-out infinite;
    }

    #sec-night .mini-stars span:nth-child(1){ left: 38px; top: 42px; }
    #sec-night .mini-stars span:nth-child(2){ right: 28px; top: 70px; animation-delay: .35s; }
    #sec-night .mini-stars span:nth-child(3){ left: 88px; bottom: 44px; animation-delay: .7s; }
    #sec-night .mini-stars span:nth-child(4){ right: 110px; top: 18px; animation-delay: 1s; }

    @keyframes driftStars_sec_night {
      from { background-position: 12px 18px, 48px 56px, 90px 24px; }
      to   { background-position: 126px 132px, 126px 132px, 232px 164px; }
    }

    @keyframes floatArt_sec_night {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes twinkle_sec_night {
      0%, 100% { opacity: .35; transform: scale(.92); }
      50% { opacity: 1; transform: scale(1.1); }
    }

    @media (max-width: 980px){
      #sec-night .night-panel{
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 46px 34px 36px;
      }

      #sec-night .night-copy{
        max-width: 760px;
      }

      #sec-night .night-art-area{
        min-height: 310px;
      }

      #sec-night .art-backdrop{
        width: 380px;
        height: 274px;
        right: 50%;
        transform: translateX(50%);
      }

      #sec-night .art-glow{
        right: 50%;
        transform: translateX(50%);
      }
    }

    @media (max-width: 560px){
      #sec-night .night-section{
        padding: 54px 0;
      }

      #sec-night .night-container{
        width: min(100% - 24px, 560px);
      }

      #sec-night .night-panel{
        padding: 34px 20px 28px;
      }

      #sec-night .night-copy h2{
        font-size: 32px;
      }

      #sec-night .night-copy p{
        font-size: 14px;
        line-height: 1.75;
      }

      #sec-night .night-cta{
        width: 100%;
      }

      #sec-night .night-art-area{
        min-height: 240px;
      }

      #sec-night .art-backdrop{
        width: 280px;
        height: 204px;
      }

      #sec-night .art-glow{
        width: 250px;
        height: 170px;
      }

      #sec-night .night-art{
        width: 100%;
        max-width: 390px;
      }
    }
  


/* ===== Result cards slider ===== */

  #sec-results *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  #sec-results{
    font-family: "Poppins", sans-serif;
    background: #ffffff;
    color: #101828;
  }

  #sec-results .results-section{
    width: 100%;
    padding: 76px 0 82px;
    background: #ffffff;
    overflow: hidden;
  }

  #sec-results .results-container{
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
  }

  #sec-results .results-heading{
    text-align: center;
    margin-bottom: 36px;
  }

  #sec-results .results-heading h2{
    font-size: clamp(30px, 3.2vw, 42px);
    line-height: 1.15;
    font-weight: 600;
    color: #00577d;
    letter-spacing: -0.8px;
    margin-bottom: 12px;
  }

  #sec-results .results-heading p{
    max-width: 680px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: #667085;
    font-weight: 400;
  }

  #sec-results .slider-wrap{
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  #sec-results .report-track{
    display: flex;
    width: max-content;
    gap: 22px;
  }

  #sec-results .track-left{
    animation: slideLeft_sec_results 46s linear infinite;
  }

  #sec-results .slider-wrap:hover .report-track{
    animation-play-state: paused;
  }

  #sec-results .report-card{
    width: 248px;
    height: 336px;
    flex: 0 0 auto;
    background: #ffffff;
    border: 1px solid rgba(215, 226, 240, 0.9);
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(0, 44, 92, 0.10);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
  }

  #sec-results .report-card:hover{
    transform: translateY(-7px);
    box-shadow: 0 24px 54px rgba(0, 44, 92, 0.15);
  }

  #sec-results .report-img-wrap{
    height: 286px;
    padding: 8px;
    background: #ffffff;
  }

  #sec-results .report-card img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
    background: #ffffff;
    display: block;
  }

  #sec-results .report-caption{
    height: 50px;
    display: grid;
    place-items: center;
    border-top: 1px solid rgba(215, 226, 240, 0.8);
    background: #f8fbff;
    color: #00577d;
    font-size: 13px;
    font-weight: 600;
  }

  @keyframes slideLeft_sec_results {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 11px)); }
  }
  @media (max-width: 760px){
    #sec-results .results-section{
      padding: 60px 0 68px;
    }

    #sec-results .results-heading{
      margin-bottom: 30px;
    }

    #sec-results .results-heading p{
      font-size: 13.5px;
    }

    #sec-results .report-track{
      gap: 16px;
    }

    #sec-results .report-card{
      width: 205px;
      height: 290px;
      border-radius: 15px;
    }

    #sec-results .report-img-wrap{
      height: 246px;
    }

    #sec-results .report-caption{
      height: 44px;
      font-size: 12px;
    }

    #sec-results .track-left{
      animation-duration: 36s;
    }

    #sec-results .track-right{
      animation-duration: 40s;
    }
  }



/* ===== Stats ===== */

    #sec-stats *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-stats{
      background: #ffffff;
      font-family: "Poppins", sans-serif;
      color: #101828;
    }

    #sec-stats .stats-section{
      width: 100%;
      background: #ffffff;
      padding: 32px 0 38px;
      overflow: hidden;
    }

    #sec-stats .stats-container{
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
    }

    #sec-stats .stats-stage{
      position: relative;
      padding: 28px 16px 8px;
      border-radius: 38px;
      background:
        radial-gradient(circle at 12% 12%, rgba(254, 205, 220, 0.28), transparent 24%),
        radial-gradient(circle at 90% 20%, rgba(255, 210, 0, 0.16), transparent 22%),
        linear-gradient(135deg, #fbfdff 0%, #f7fbff 45%, #ffffff 100%);
      border: 1px solid rgba(220, 230, 241, 0.95);
      box-shadow: 0 22px 48px rgba(0, 44, 92, 0.07);
      isolation: isolate;
      overflow: hidden;
    }

    #sec-stats .stats-stage::before{
      content: "";
      position: absolute;
      left: 42px;
      right: 42px;
      top: 50%;
      height: 0;
      border-top: 3px dashed rgba(88, 160, 255, 0.28);
      transform: translateY(-50%);
      z-index: -1;
    }

    #sec-stats .stats-stage::after{
      content: "";
      position: absolute;
      width: 230px;
      height: 230px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.08);
      bottom: -120px;
      left: -70px;
      z-index: -1;
    }

    #sec-stats .floating-shape{
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
      animation: drift_sec_stats 6s ease-in-out infinite;
    }

    #sec-stats .shape-a{
      width: 18px;
      height: 18px;
      background: rgba(88, 160, 255, 0.26);
      top: 20px;
      left: 22%;
    }

    #sec-stats .shape-b{
      width: 12px;
      height: 12px;
      background: rgba(255, 210, 0, 0.34);
      top: 30px;
      right: 30%;
      animation-delay: .6s;
    }

    #sec-stats .shape-c{
      width: 16px;
      height: 16px;
      background: rgba(254, 205, 220, 0.34);
      bottom: 20px;
      left: 48%;
      animation-delay: 1.1s;
    }

    #sec-stats .shape-d{
      width: 20px;
      height: 20px;
      background: rgba(119, 174, 197, 0.28);
      bottom: 36px;
      right: 8%;
      animation-delay: .3s;
    }

    #sec-stats .stats-grid{
      display: flex;
      flex-wrap: nowrap;
      gap: 18px;
      align-items: stretch;
    }

    #sec-stats .stat-card{
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      min-height: 142px;
      border-radius: 30px;
      padding: 18px 18px 16px;
      box-shadow: 0 18px 38px rgba(0, 44, 92, 0.10);
      border: 1px solid rgba(255,255,255,0.88);
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease;
      animation: floatCard_sec_stats 5.4s ease-in-out infinite;
    }

    #sec-stats .stat-card:nth-child(2){
      transform: translateY(18px);
      animation-delay: .4s;
    }

    #sec-stats .stat-card:nth-child(3){
      transform: translateY(-8px);
      animation-delay: .8s;
    }

    #sec-stats .stat-card:nth-child(4){
      transform: translateY(14px);
      animation-delay: 1.2s;
    }

    #sec-stats .stat-card:hover{
      transform: translateY(-8px) rotate(-1deg) !important;
      box-shadow: 0 26px 48px rgba(0, 44, 92, 0.14);
    }

    #sec-stats .stat-card::before{
      content: "";
      position: absolute;
      width: 88px;
      height: 88px;
      border-radius: 28px;
      right: -22px;
      top: -20px;
      background: rgba(255,255,255,0.34);
      transform: rotate(22deg);
    }

    #sec-stats .stat-card::after{
      content: "";
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      left: -16px;
      bottom: -14px;
      background: rgba(255,255,255,0.26);
    }

    #sec-stats .stat-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      position: relative;
      z-index: 2;
    }

    #sec-stats .icon-bubble{
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.56);
      box-shadow: 0 10px 22px rgba(0, 44, 92, 0.07);
      color: #7f6300;
      font-size: 21px;
      line-height: 1;
    }

    #sec-stats .mini-spark{
      color: rgba(0, 87, 125, 0.32);
      font-size: 18px;
      line-height: 1;
      animation: sparkle_sec_stats 1.7s ease-in-out infinite;
    }

    #sec-stats .stat-number{
      display: block;
      font-family: "Fredoka", sans-serif;
      font-size: clamp(32px, 3vw, 42px);
      line-height: 1;
      letter-spacing: -0.5px;
      font-weight: 600;
      color: #00577d;
      margin-bottom: 10px;
      position: relative;
      z-index: 2;
      white-space: nowrap;
    }

    #sec-stats .stat-label{
      display: block;
      max-width: 100%;
      font-size: 13.5px;
      line-height: 1.45;
      font-weight: 500;
      color: rgba(22, 37, 57, 0.78);
      position: relative;
      z-index: 2;
    }

    #sec-stats .card-blue{
      background: linear-gradient(135deg, #dff2ff 0%, #f5fbff 100%);
    }

    #sec-stats .card-pink{
      background: linear-gradient(135deg, #ffe2ec 0%, #fff8fb 100%);
    }

    #sec-stats .card-yellow{
      background: linear-gradient(135deg, #fff4be 0%, #fffbee 100%);
    }

    #sec-stats .card-teal{
      background: linear-gradient(135deg, #dff1f8 0%, #f8fcff 100%);
    }

    @keyframes floatCard_sec_stats {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -8px; }
    }

    @keyframes drift_sec_stats {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes sparkle_sec_stats {
      0%, 100% { transform: scale(.9); opacity: .45; }
      50% { transform: scale(1.16); opacity: 1; }
    }

    @media (max-width: 980px){
      #sec-stats .stats-stage::before{
        display: none;
      }

      #sec-stats .stats-grid{
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
      }

      #sec-stats .stats-grid::-webkit-scrollbar{
        display: none;
      }

      #sec-stats .stat-card{
        flex: 0 0 250px;
      }

      #sec-stats .stat-card, #sec-stats .stat-card:nth-child(2), #sec-stats .stat-card:nth-child(3), #sec-stats .stat-card:nth-child(4){
        transform: none;
      }
    }

    @media (max-width: 560px){
      #sec-stats .stats-section{
        padding: 22px 0 28px;
      }

      #sec-stats .stats-container{
        width: min(100% - 24px, 560px);
      }

      #sec-stats .stats-stage{
        padding: 14px;
        border-radius: 26px;
      }

      #sec-stats .stats-grid{
        gap: 12px;
      }

      #sec-stats .stat-card{
        flex: 0 0 225px;
        min-height: 126px;
        border-radius: 24px;
        padding: 15px 15px 14px;
      }

      #sec-stats .icon-bubble{
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 19px;
      }

      #sec-stats .stat-number{
        font-size: 34px;
        margin-bottom: 8px;
      }

      #sec-stats .stat-label{
        max-width: 100%;
        font-size: 13.5px;
      }
    }
  


/* ===== Why students love section ===== */

    #sec-quality *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-quality{
      background: #ffffff;
      font-family: "Poppins", sans-serif;
      color: #101828;
    }

    #sec-quality .quality-section{
      width: 100%;
      padding: 70px 0;
      background: #ffffff;
      overflow: hidden;
    }

    #sec-quality .quality-panel{
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      min-height: 360px;
      border-radius: 34px;
      padding: 48px 54px 44px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 10% 18%, rgba(254, 205, 220, 0.24), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(255, 210, 0, 0.16), transparent 22%),
        linear-gradient(135deg, #cfe1ff 0%, #dcebff 48%, #edf6ff 100%);
      border: 1px solid rgba(255,255,255,0.82);
      box-shadow: 0 24px 54px rgba(0, 44, 92, 0.10);
      isolation: isolate;
    }

    #sec-quality .quality-panel::before{
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.65) 0 2px, transparent 2.7px),
        radial-gradient(circle, rgba(0,87,125,.12) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(255,210,0,.22) 0 2px, transparent 2.8px);
      background-size: 150px 150px, 220px 220px, 190px 190px;
      background-position: 28px 30px, 86% 52px, 48% 88%;
      opacity: .55;
      z-index: -2;
    }

    #sec-quality .quality-panel::after{
      content: "";
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background: rgba(255,255,255,.28);
      right: -92px;
      bottom: -120px;
      z-index: -1;
    }

    #sec-quality .quality-head{
      text-align: center;
      max-width: 860px;
      margin: 0 auto 42px;
      position: relative;
      z-index: 2;
    }

    #sec-quality .quality-head h2{
      font-family: "Fredoka", sans-serif;
      font-size: clamp(32px, 3.5vw, 46px);
      line-height: 1.1;
      letter-spacing: -0.5px;
      color: #008bd1;
      font-weight: 600;
      margin-bottom: 12px;
    }

    #sec-quality .quality-head p{
      color: #56657d;
      font-size: 15px;
      line-height: 1.7;
      font-weight: 400;
      max-width: 760px;
      margin: 0 auto;
    }

    #sec-quality .quality-icons{
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
      align-items: start;
      z-index: 2;
    }

    #sec-quality .quality-icons::before{
      content: "";
      position: absolute;
      left: 9%;
      right: 9%;
      top: 52px;
      height: 3px;
      background: repeating-linear-gradient(
        90deg,
        rgba(0, 139, 209, 0.28) 0 10px,
        transparent 10px 18px
      );
      border-radius: 999px;
      z-index: -1;
    }

    #sec-quality .quality-item{
      text-align: center;
      position: relative;
      min-width: 0;
    }

    #sec-quality .icon-circle{
      width: 104px;
      height: 104px;
      margin: 0 auto 16px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: relative;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(255,255,255,0.92);
      box-shadow: 0 18px 32px rgba(0, 44, 92, 0.10);
      animation: softFloat_sec_quality 5.4s ease-in-out infinite;
      transition: transform .22s ease, box-shadow .22s ease;
    }

    #sec-quality .quality-item:nth-child(2) .icon-circle{ animation-delay: .28s; }
    #sec-quality .quality-item:nth-child(3) .icon-circle{ animation-delay: .56s; }
    #sec-quality .quality-item:nth-child(4) .icon-circle{ animation-delay: .84s; }
    #sec-quality .quality-item:nth-child(5) .icon-circle{ animation-delay: 1.12s; }

    #sec-quality .icon-circle::before{
      content: "";
      position: absolute;
      inset: 8px;
      border-radius: 50%;
      background: var(--orb);
      z-index: -1;
    }

    #sec-quality .icon-circle::after{
      content: "";
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      right: 6px;
      top: 8px;
      background: #ffd200;
      box-shadow: 0 0 0 7px rgba(255, 210, 0, 0.14);
      transform: scale(.85);
      transition: transform .22s ease;
    }

    #sec-quality .quality-item:hover .icon-circle{
      transform: translateY(-9px) scale(1.04);
      box-shadow: 0 26px 46px rgba(0, 44, 92, 0.15);
    }

    #sec-quality .quality-item:hover .icon-circle::after{
      transform: scale(1);
    }

    #sec-quality .icon-circle svg{
      width: 48px;
      height: 48px;
      stroke: var(--stroke);
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #sec-quality .quality-item h3{
      font-family: "Fredoka", sans-serif;
      font-size: 20px;
      line-height: 1.2;
      font-weight: 500;
      color: #00577d;
      letter-spacing: -0.2px;
    }

    #sec-quality .item-practice{ --orb: #dff2ff; --stroke: #00577d; }
    #sec-quality .item-mock{ --orb: #ffe2ec; --stroke: #9a446d; }
    #sec-quality .item-feedback{ --orb: #fff3bd; --stroke: #8b6a00; }
    #sec-quality .item-time{ --orb: #ddf4f8; --stroke: #0f6d78; }
    #sec-quality .item-trainer{ --orb: #efe3ff; --stroke: #63409a; }

    #sec-quality .spark{
      position: absolute;
      color: rgba(0, 87, 125, .30);
      font-family: "Fredoka", sans-serif;
      font-size: 18px;
      z-index: 1;
      animation: sparkle_sec_quality 1.9s ease-in-out infinite;
      pointer-events: none;
    }

    #sec-quality .spark.one{ left: 12%; top: 42px; }
    #sec-quality .spark.two{ right: 16%; top: 68px; color: rgba(255, 210, 0, .60); animation-delay: .5s; }
    #sec-quality .spark.three{ left: 48%; bottom: 26px; color: rgba(254, 205, 220, .85); animation-delay: .9s; }

    @keyframes softFloat_sec_quality {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -8px; }
    }

    @keyframes sparkle_sec_quality {
      0%, 100% { opacity: .38; transform: scale(.9); }
      50% { opacity: 1; transform: scale(1.12); }
    }

    @media (max-width: 900px){
      #sec-quality .quality-panel{
        padding: 42px 24px 36px;
      }

      #sec-quality .quality-icons{
        grid-template-columns: repeat(5, 150px);
        overflow-x: auto;
        gap: 18px;
        padding: 0 6px 10px;
        scrollbar-width: none;
      }

      #sec-quality .quality-icons::-webkit-scrollbar{
        display: none;
      }

      #sec-quality .quality-icons::before{
        left: 70px;
        right: auto;
        width: 710px;
      }

      #sec-quality .icon-circle{
        width: 94px;
        height: 94px;
      }

      #sec-quality .quality-item h3{
        font-size: 18px;
      }
    }

    @media (max-width: 560px){
      #sec-quality .quality-section{
        padding: 54px 0;
      }

      #sec-quality .quality-panel{
        width: min(100% - 24px, 560px);
        border-radius: 28px;
        padding: 34px 18px 28px;
      }

      #sec-quality .quality-head{
        margin-bottom: 30px;
      }

      #sec-quality .quality-head p{
        font-size: 13.5px;
      }

      #sec-quality .quality-icons{
        grid-template-columns: repeat(5, 132px);
      }

      #sec-quality .quality-icons::before{
        top: 46px;
        left: 62px;
        width: 625px;
      }

      #sec-quality .icon-circle{
        width: 86px;
        height: 86px;
        margin-bottom: 13px;
      }

      #sec-quality .icon-circle svg{
        width: 40px;
        height: 40px;
      }

      #sec-quality .quality-item h3{
        font-size: 17px;
      }
    }
  


/* ===== Learning/fun section ===== */

    #sec-fun-learning *{margin:0;padding:0;box-sizing:border-box}

    #sec-fun-learning{
      --blue:#00577d;
      --sky:#58a0ff;
      --pink:#fecddc;
      --teal:#77aec5;
      --yellow:#ffd200;
      --text:#526275;
      --navy:#153b64;
      --book1:#ef7a58;
      --book2:#f4c96f;
      --book3:#4f7bca;
      --book4:#65d2b0;
      --leaf1:#54c59f;
      --leaf2:#44b38f;
      --leaf3:#3d91a9;
      --leaf4:#365fcc;
      --paper:#f7fbff;
    }

    #sec-fun-learning{
      background:#fff;
      color:#101828;
      font-family:"Poppins",sans-serif;
    }

    #sec-fun-learning .fun-section{
      width:100%;
      padding:84px 0 96px;
      background:#fff;
      position:relative;
      overflow:hidden;
    }

    #sec-fun-learning .fun-section::before{
      content:"";
      position:absolute;
      left:-80px;
      top:48px;
      width:220px;
      height:220px;
      border-radius:50%;
      background:rgba(254,205,220,.28);
      filter:blur(8px);
    }

    #sec-fun-learning .fun-section::after{
      content:"";
      position:absolute;
      right:-90px;
      bottom:20px;
      width:250px;
      height:250px;
      border-radius:50%;
      background:rgba(88,160,255,.13);
      filter:blur(8px);
    }

    #sec-fun-learning .fun-container{
      width:min(1180px, calc(100% - 32px));
      margin:0 auto;
      position:relative;
      z-index:2;
    }

    #sec-fun-learning .fun-wrap{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(430px,.96fr);
      gap:56px;
      align-items:center;
    }

    #sec-fun-learning .fun-copy{
      max-width:620px;
    }

    #sec-fun-learning .fun-copy h2{
      font-family:"Fredoka",sans-serif;
      color:var(--blue);
      font-size:clamp(35px,4vw,52px);
      line-height:1.08;
      font-weight:600;
      letter-spacing:-.6px;
      margin-bottom:18px;
    }

    #sec-fun-learning .fun-copy p{
      color:var(--text);
      font-size:16px;
      line-height:1.9;
      font-weight:400;
      text-wrap:pretty;
    }

    #sec-fun-learning .fun-copy p + p{
      margin-top:14px;
    }

    #sec-fun-learning .art-stage{
      position:relative;
      min-height:450px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      isolation:isolate;
    }

    #sec-fun-learning .backdrop{
      position:absolute;
      width:440px;
      height:332px;
      bottom:34px;
      border-radius:44% 56% 52% 34%;
      background:linear-gradient(160deg,#eef7ff 0%, #fafcff 100%);
      border:1px solid rgba(220,231,242,.92);
      box-shadow:0 22px 54px rgba(0,44,92,.08);
      animation:blobFloat_sec_fun_learning 7s ease-in-out infinite;
      z-index:0;
    }

    #sec-fun-learning .backdrop::before{
      content:"";
      position:absolute;
      width:120px;
      height:120px;
      left:-10px;
      bottom:16px;
      border-radius:50%;
      background:rgba(88,160,255,.10);
    }

    #sec-fun-learning .backdrop::after{
      content:"";
      position:absolute;
      width:84px;
      height:84px;
      right:22px;
      top:18px;
      border-radius:26px;
      background:rgba(254,205,220,.24);
      transform:rotate(18deg);
    }

    #sec-fun-learning .base-line{
      position:absolute;
      bottom:18px;
      width:372px;
      height:4px;
      border-radius:999px;
      background:#2e597f;
      opacity:.92;
      z-index:0;
    }

    #sec-fun-learning .plant{
      position:absolute;
      left:66px;
      bottom:20px;
      width:142px;
      height:126px;
      z-index:1;
      opacity:0;
      animation:fadeRise_sec_fun_learning .7s ease forwards 1.5s;
    }

    #sec-fun-learning .leaf{
      position:absolute;
      bottom:0;
      transform-origin:bottom center;
      animation:leafSway_sec_fun_learning 4.6s ease-in-out infinite;
    }

    #sec-fun-learning .leaf.l1{
      left:12px;width:28px;height:96px;background:var(--leaf1);
      border-radius:90px 90px 8px 90px;transform:rotate(-42deg);
    }
    #sec-fun-learning .leaf.l2{
      left:36px;width:34px;height:118px;background:var(--leaf2);
      border-radius:90px 90px 12px 90px;transform:rotate(-15deg);animation-delay:.35s;
    }
    #sec-fun-learning .leaf.l3{
      left:66px;width:31px;height:90px;background:var(--leaf3);
      border-radius:90px 90px 90px 12px;transform:rotate(16deg);animation-delay:.7s;
    }
    #sec-fun-learning .leaf.l4{
      left:88px;width:27px;height:80px;background:var(--leaf4);
      border-radius:90px 90px 90px 10px;transform:rotate(40deg);animation-delay:1s;
    }

    #sec-fun-learning .books{
      position:absolute;
      left:155px;
      bottom:19px;
      width:208px;
      height:164px;
      z-index:2;
    }

    #sec-fun-learning .book{
      position:absolute;
      height:28px;
      border-radius:14px;
      box-shadow:0 12px 18px rgba(0,44,92,.08);
      opacity:0;
      transform:translateY(26px) scale(.86);
      overflow:hidden;
    }

    #sec-fun-learning .book::before{
      content:"";
      position:absolute;
      top:8px;
      left:18px;
      width:58%;
      height:4px;
      border-radius:999px;
      background:rgba(255,255,255,.5);
    }

    #sec-fun-learning .book::after{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      right:14px;
      width:4px;
      background:rgba(255,255,255,.4);
    }

    #sec-fun-learning .b1{left:8px;bottom:2px;width:122px;background:var(--book1);animation:bookIn_sec_fun_learning .55s cubic-bezier(.22,.9,.26,1) forwards .18s}
    #sec-fun-learning .b2{left:24px;bottom:29px;width:150px;background:var(--book2);animation:bookIn_sec_fun_learning .55s cubic-bezier(.22,.9,.26,1) forwards .42s}
    #sec-fun-learning .b3{left:2px;bottom:57px;width:128px;background:var(--book3);animation:bookIn_sec_fun_learning .55s cubic-bezier(.22,.9,.26,1) forwards .66s}
    #sec-fun-learning .b4{left:21px;bottom:85px;width:160px;background:var(--book1);animation:bookIn_sec_fun_learning .55s cubic-bezier(.22,.9,.26,1) forwards .90s}
    #sec-fun-learning .b5{left:12px;bottom:112px;width:136px;background:var(--book2);animation:bookIn_sec_fun_learning .55s cubic-bezier(.22,.9,.26,1) forwards 1.14s}

    #sec-fun-learning .girl{
      position:absolute;
      left:210px;
      bottom:94px;
      width:176px;
      height:232px;
      z-index:4;
      opacity:0;
      transform:translateY(28px);
      animation:girlEnter_sec_fun_learning .85s cubic-bezier(.2,.9,.2,1) forwards 1.45s;
    }

    #sec-fun-learning .hair{
      position:absolute;
      left:33px;
      top:17px;
      width:80px;
      height:110px;
      border-radius:52px 52px 58px 58px;
      background:#103b66;
      z-index:1;
      transform:rotate(-10deg);
    }

    #sec-fun-learning .face{
      position:absolute;
      left:76px;
      top:28px;
      width:34px;
      height:42px;
      border-radius:45% 45% 48% 48%;
      background:#ffb293;
      z-index:2;
    }

    #sec-fun-learning .neck{
      position:absolute;
      left:87px;
      top:62px;
      width:12px;height:16px;border-radius:6px;background:#ffb293;z-index:1;
    }

    #sec-fun-learning .torso{
      position:absolute;
      left:57px;
      top:73px;
      width:62px;
      height:82px;
      background:#63d2af;
      border-radius:24px 24px 18px 18px;
      transform:skewX(-8deg);
      z-index:2;
    }

    #sec-fun-learning .arm-left, #sec-fun-learning .arm-right{
      position:absolute;
      height:14px;
      background:#ffb293;
      border-radius:999px;
      z-index:3;
      transform-origin:left center;
    }

    #sec-fun-learning .arm-left{
      left:42px; top:93px; width:55px;
      animation:typeLeft_sec_fun_learning 1.9s ease-in-out infinite 2.35s;
    }

    #sec-fun-learning .arm-right{
      left:86px; top:99px; width:60px; transform:rotate(-10deg);
      animation:typeRight_sec_fun_learning 1.9s ease-in-out infinite 2.35s;
    }

    #sec-fun-learning .skirt{
      position:absolute;
      left:66px;
      top:134px;
      width:70px;
      height:24px;
      background:#ff9a61;
      border-radius:16px;
      z-index:2;
    }

    #sec-fun-learning .leg-left{
      position:absolute;
      left:68px;
      top:146px;
      width:74px;
      height:18px;
      background:#486fca;
      border-radius:999px;
      transform:rotate(49deg);
      transform-origin:left center;
      z-index:1;
    }

    #sec-fun-learning .leg-right{
      position:absolute;
      left:97px;
      top:166px;
      width:66px;
      height:18px;
      background:#486fca;
      border-radius:999px;
      transform:rotate(92deg);
      transform-origin:left center;
      z-index:1;
    }

    #sec-fun-learning .shoe-left{
      position:absolute;
      left:123px; top:196px; width:26px; height:10px; border-radius:999px;
      background:#fff; transform:rotate(42deg); z-index:2;
    }

    #sec-fun-learning .shoe-right{
      position:absolute;
      left:92px; top:222px; width:26px; height:10px; border-radius:999px;
      background:#fff; z-index:2;
    }

    #sec-fun-learning .laptop{
      position:absolute;
      left:112px;
      top:76px;
      width:56px;
      height:76px;
      background:#f5c763;
      border-radius:6px 6px 2px 2px;
      transform:skewY(-8deg);
      transform-origin:bottom left;
      z-index:4;
      box-shadow:0 6px 16px rgba(0,44,92,.10);
      animation:laptopNod_sec_fun_learning 2.1s ease-in-out infinite 2.2s;
    }

    #sec-fun-learning .laptop::before{
      content:"";
      position:absolute;
      top:18px;
      left:14px;
      width:10px;
      height:10px;
      border-radius:50%;
      background:rgba(255,255,255,.6);
    }

    #sec-fun-learning .laptop::after{
      content:"";
      position:absolute;
      left:-8px;
      bottom:-8px;
      width:70px;
      height:10px;
      border-radius:999px;
      background:#2f5d84;
      transform:skewX(22deg);
    }

    #sec-fun-learning .floaters{
      position:absolute;
      inset:0;
      z-index:5;
      pointer-events:none;
    }

    #sec-fun-learning .badge{
      position:absolute;
      left:22px;
      top:18px;
      padding:10px 88px 10px 18px;
      border-radius:999px;
      background:#fff;
      color:var(--sky);
      box-shadow:0 12px 24px rgba(0,44,92,.07);
      font-size:12px;
      font-weight:600;
      opacity:0;
      animation:fadeRise_sec_fun_learning .7s ease forwards 3.25s, hoverUp_sec_fun_learning 5s ease-in-out infinite 4s;
    }

    #sec-fun-learning .floater{
      position:absolute;
      opacity:0;
      transform:translateY(18px) scale(.82);
      animation:popIn_sec_fun_learning .55s cubic-bezier(.22,.9,.26,1) forwards, hoverUp_sec_fun_learning 4.6s ease-in-out infinite;
      filter:drop-shadow(0 8px 14px rgba(0,44,92,.08));
    }

    #sec-fun-learning .floater svg{
      display:block;
      width:100%;
      height:100%;
    }

    #sec-fun-learning .f1{width:56px;height:40px;left:270px;top:28px;animation-delay:2.15s,2.8s}
    #sec-fun-learning .f2{width:42px;height:42px;left:256px;top:4px;animation-delay:2.32s,3s}
    #sec-fun-learning .f3{width:42px;height:42px;right:74px;top:22px;animation-delay:2.5s,3.2s}
    #sec-fun-learning .f4{width:46px;height:34px;right:32px;top:86px;animation-delay:2.68s,3.42s}
    #sec-fun-learning .f5{width:42px;height:42px;right:8px;bottom:120px;animation-delay:2.86s,3.64s}
    #sec-fun-learning .f6{width:36px;height:36px;left:168px;bottom:106px;animation-delay:3.04s,3.82s}
    #sec-fun-learning .f7{width:34px;height:34px;right:92px;bottom:58px;animation-delay:3.22s,4.02s}

    #sec-fun-learning .squiggle{
      position:absolute;
      font-family:"Fredoka",sans-serif;
      font-size:24px;
      font-weight:600;
      line-height:1;
    }

    #sec-fun-learning .yellow{color:#f0c345}
    #sec-fun-learning .pink{color:#ff8fac}
    #sec-fun-learning .blue{color:#58a0ff}

    #sec-fun-learning .x1{left:150px;top:68px;background:none;box-shadow:none;width:auto;height:auto}
    #sec-fun-learning .x2{right:138px;top:122px;background:none;box-shadow:none;width:auto;height:auto}
    #sec-fun-learning .x3{right:58px;bottom:76px;background:none;box-shadow:none;width:auto;height:auto}

    @keyframes bookIn_sec_fun_learning{
      0%{opacity:0;transform:translateY(26px) scale(.86)}
      100%{opacity:1;transform:translateY(0) scale(1)}
    }

    @keyframes girlEnter_sec_fun_learning{
      0%{opacity:0;transform:translateY(28px)}
      100%{opacity:1;transform:translateY(0)}
    }

    @keyframes popIn_sec_fun_learning{
      0%{opacity:0;transform:translateY(18px) scale(.82)}
      100%{opacity:1;transform:translateY(0) scale(1)}
    }

    @keyframes hoverUp_sec_fun_learning{
      0%,100%{translate:0 0}
      50%{translate:0 -8px}
    }

    @keyframes fadeRise_sec_fun_learning{
      0%{opacity:0;transform:translateY(16px)}
      100%{opacity:1;transform:translateY(0)}
    }

    @keyframes blobFloat_sec_fun_learning{
      0%,100%{transform:translateY(0) rotate(0)}
      50%{transform:translateY(-8px) rotate(2deg)}
    }

    @keyframes leafSway_sec_fun_learning{
      0%,100%{margin-bottom:0;rotate:0deg}
      50%{margin-bottom:2px;rotate:4deg}
    }

    @keyframes typeLeft_sec_fun_learning{
      0%,100%{transform:rotate(8deg)}
      50%{transform:rotate(1deg)}
    }

    @keyframes typeRight_sec_fun_learning{
      0%,100%{transform:rotate(-10deg)}
      50%{transform:rotate(-2deg)}
    }

    @keyframes laptopNod_sec_fun_learning{
      0%,100%{transform:skewY(-8deg) rotate(0deg)}
      50%{transform:skewY(-8deg) rotate(-2deg)}
    }

    @media (max-width:980px){
      #sec-fun-learning .fun-wrap{
        grid-template-columns:1fr;
        gap:32px;
      }

      #sec-fun-learning .fun-copy{
        max-width:760px;
      }

      #sec-fun-learning .art-stage{
        min-height:400px;
      }
    }

    @media (max-width:560px){
      #sec-fun-learning .fun-section{
        padding:58px 0 68px;
      }

      #sec-fun-learning .fun-container{
        width:min(100% - 24px, 560px);
      }

      #sec-fun-learning .fun-copy h2{
        font-size:34px;
      }

      #sec-fun-learning .fun-copy p{
        font-size:14px;
        line-height:1.78;
      }

      #sec-fun-learning .art-stage{
        min-height:320px;
        transform:scale(.82);
        transform-origin:center top;
      }
    }
  


/* ===== Flexible options section ===== */

    #sec-options *{margin:0;padding:0;box-sizing:border-box}

    #sec-options{
      --blue:#00577d;
      --sky:#58a0ff;
      --pink:#fecddc;
      --teal:#77aec5;
      --yellow:#ffd200;
      --ink:#17324d;
      --text:#526275;
      --panel:#f8fbff;
      --line:#dbe9f5;
      --green:#66d2b0;
      --purple:#cdb7ff;
      --orange:#ffb36c;
      --shadow:0 20px 50px rgba(0,44,92,.08);
    }

    #sec-options{
      background:#fff;
      font-family:"Poppins",sans-serif;
      color:#101828;
    }

    #sec-options .options-section{
      width:100%;
      padding:82px 0 92px;
      background:#fff;
      overflow:hidden;
      position:relative;
    }

    #sec-options .options-section::before{
      content:"";
      position:absolute;
      width:220px;
      height:220px;
      left:-85px;
      top:42px;
      border-radius:50%;
      background:rgba(254,205,220,.28);
      filter:blur(8px);
    }

    #sec-options .options-section::after{
      content:"";
      position:absolute;
      width:250px;
      height:250px;
      right:-95px;
      bottom:18px;
      border-radius:50%;
      background:rgba(88,160,255,.14);
      filter:blur(8px);
    }

    #sec-options .options-container{
      width:min(1180px, calc(100% - 32px));
      margin:0 auto;
      position:relative;
      z-index:2;
    }

    #sec-options .options-wrap{
      display:grid;
      grid-template-columns:minmax(420px,.95fr) minmax(0,1fr);
      gap:56px;
      align-items:center;
    }

    #sec-options .options-copy{
      max-width:620px;
      order:2;
    }

    #sec-options .options-copy h2{
      font-family:"Fredoka",sans-serif;
      font-size:clamp(35px,4vw,52px);
      line-height:1.08;
      font-weight:600;
      letter-spacing:-.6px;
      color:var(--blue);
      margin-bottom:16px;
    }

    #sec-options .options-copy p{
      color:var(--text);
      font-size:16px;
      line-height:1.9;
      font-weight:400;
    }

    #sec-options .options-copy p + p{
      margin-top:10px;
    }

    #sec-options .plan-list{
      list-style:none;
      margin-top:18px;
      display:grid;
      gap:10px;
    }

    #sec-options .plan-list li{
      color:var(--ink);
      font-size:15px;
      line-height:1.7;
      display:flex;
      gap:12px;
      align-items:flex-start;
    }

    #sec-options .plan-list li::before{
      content:"";
      width:9px;
      height:9px;
      margin-top:9px;
      flex:0 0 9px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--sky),var(--teal));
      box-shadow:0 0 0 5px rgba(88,160,255,.12);
    }

    #sec-options .art-zone{
      position:relative;
      min-height:430px;
      display:grid;
      place-items:center;
      isolation:isolate;
      order:1;
    }

    #sec-options .art-blob{
      position:absolute;
      width:440px;
      height:330px;
      border-radius:45% 55% 50% 36%;
      background:linear-gradient(160deg,#eef7ff 0%,#fbfdff 100%);
      border:1px solid rgba(220,231,242,.92);
      box-shadow:var(--shadow);
      animation:floatBlob_sec_options 7s ease-in-out infinite;
      z-index:0;
    }

    #sec-options .art-blob::before{
      content:"";
      position:absolute;
      width:120px;
      height:120px;
      left:-18px;
      bottom:12px;
      border-radius:50%;
      background:rgba(88,160,255,.10);
    }

    #sec-options .art-blob::after{
      content:"";
      position:absolute;
      width:86px;
      height:86px;
      right:18px;
      top:18px;
      border-radius:26px;
      background:rgba(254,205,220,.24);
      transform:rotate(18deg);
    }

    #sec-options .schedule-board{
      position:relative;
      width:290px;
      min-height:240px;
      border-radius:30px;
      background:#ffffff;
      border:1px solid rgba(226,236,244,.96);
      box-shadow:0 18px 40px rgba(0,44,92,.10);
      padding:18px 18px 16px;
      z-index:2;
      opacity:0;
      transform:translateY(18px) scale(.96);
      animation:boardIn_sec_options .7s cubic-bezier(.22,.9,.26,1) forwards .15s;
    }

    #sec-options .board-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:14px;
    }

    #sec-options .board-tag{
      padding:9px 12px;
      border-radius:999px;
      background:#eef7ff;
      color:var(--sky);
      font-size:12px;
      font-weight:600;
      white-space:nowrap;
    }

    #sec-options .toggle{
      display:flex;
      gap:8px;
      align-items:center;
    }

    #sec-options .sun, #sec-options .moon{
      width:36px;
      height:36px;
      border-radius:50%;
      display:grid;
      place-items:center;
      box-shadow:0 10px 22px rgba(0,44,92,.08);
      opacity:0;
      transform:translateY(16px) scale(.85);
    }

    #sec-options .sun{
      background:#fff5bf;
      animation:popIn_sec_options .45s cubic-bezier(.22,.9,.26,1) forwards .7s, hoverUp_sec_options 4.8s ease-in-out infinite 1.5s;
    }

    #sec-options .sun::before{
      content:"";
      width:14px;
      height:14px;
      border-radius:50%;
      background:#ffbf00;
      box-shadow:0 0 0 8px rgba(255,210,0,.20);
    }

    #sec-options .moon{
      background:#eaf1ff;
      animation:popIn_sec_options .45s cubic-bezier(.22,.9,.26,1) forwards .95s, hoverUp_sec_options 5.2s ease-in-out infinite 1.8s;
    }

    #sec-options .moon::before{
      content:"";
      width:14px;
      height:14px;
      border-radius:50%;
      background:#6b88d7;
      box-shadow:-4px 0 0 0 #eaf1ff;
      transform:translateX(3px);
    }

    #sec-options .week-strip{
      display:grid;
      gap:10px;
    }

    #sec-options .day-row{
      display:grid;
      grid-template-columns:52px 1fr 34px;
      align-items:center;
      gap:10px;
      padding:8px 0;
      opacity:0;
      transform:translateX(-14px);
      animation:slideRow_sec_options .45s ease forwards;
    }

    #sec-options .day-row:nth-child(1){animation-delay:1.15s}
    #sec-options .day-row:nth-child(2){animation-delay:1.28s}
    #sec-options .day-row:nth-child(3){animation-delay:1.41s}
    #sec-options .day-row:nth-child(4){animation-delay:1.54s}
    #sec-options .day-row:nth-child(5){animation-delay:1.67s}

    #sec-options .day-row span{
      font-size:13px;
      font-weight:600;
      color:#5d6d80;
    }

    #sec-options .bar{
      height:12px;
      border-radius:999px;
      background:#edf4fa;
      overflow:hidden;
      position:relative;
    }

    #sec-options .fill{
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:0;
      border-radius:999px;
      animation:growBar_sec_options .6s ease forwards;
    }

    #sec-options .day-row:nth-child(1) .fill{width:78%; background:linear-gradient(90deg,var(--yellow),#ffe483); animation-delay:1.28s}
    #sec-options .day-row:nth-child(2) .fill{width:56%; background:linear-gradient(90deg,var(--sky),#8dc0ff); animation-delay:1.41s}
    #sec-options .day-row:nth-child(3) .fill{width:66%; background:linear-gradient(90deg,var(--green),#9ce6cf); animation-delay:1.54s}
    #sec-options .day-row:nth-child(4) .fill{width:84%; background:linear-gradient(90deg,var(--purple),#e2d9ff); animation-delay:1.67s}
    #sec-options .day-row:nth-child(5) .fill{width:70%; background:linear-gradient(90deg,var(--orange),#ffd4a5); animation-delay:1.8s}

    #sec-options .tick{
      width:20px;
      height:20px;
      border-radius:50%;
      background:#f6fbff;
      border:1px solid #dfeaf4;
      position:relative;
    }

    #sec-options .tick::before{
      content:"";
      position:absolute;
      left:5px;
      top:5px;
      width:8px;
      height:4px;
      border-left:2px solid #58a0ff;
      border-bottom:2px solid #58a0ff;
      transform:rotate(-45deg);
    }

    #sec-options .option-pill{
      position:absolute;
      min-width:126px;
      padding:12px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.94);
      border:1px solid rgba(255,255,255,.96);
      box-shadow:0 16px 34px rgba(0,44,92,.09);
      display:flex;
      gap:10px;
      align-items:center;
      color:var(--ink);
      font-size:14px;
      font-weight:600;
      z-index:3;
      opacity:0;
      transform:translateY(18px) scale(.86);
      animation:popIn_sec_options .55s cubic-bezier(.22,.9,.26,1) forwards, hoverUp_sec_options 5.2s ease-in-out infinite;
    }

    #sec-options .option-pill .mini{
      width:34px;
      height:34px;
      border-radius:12px;
      display:grid;
      place-items:center;
      flex:0 0 34px;
    }

    #sec-options .option-pill svg{
      width:18px;
      height:18px;
      display:block;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
      fill:none;
    }

    #sec-options .pill-fast{
      left:20px;
      top:40px;
      animation-delay:1.95s,2.8s;
    }
    #sec-options .pill-day{
      right:18px;
      top:72px;
      animation-delay:2.15s,3s;
    }
    #sec-options .pill-night{
      right:8px;
      bottom:72px;
      animation-delay:2.35s,3.2s;
    }
    #sec-options .pill-weekday{
      left:4px;
      bottom:94px;
      animation-delay:2.55s,3.4s;
    }
    #sec-options .pill-weekend{
      left:50%;
      bottom:22px;
      transform:translateX(-50%) translateY(18px) scale(.86);
      min-width:146px;
      animation-delay:2.75s,3.6s;
    }

    #sec-options .pill-fast .mini{background:#fff4bf}
    #sec-options .pill-fast svg{stroke:#8b6a00}
    #sec-options .pill-day .mini{background:#eaf3ff}
    #sec-options .pill-day svg{stroke:#3f6dd0}
    #sec-options .pill-night .mini{background:#eee8ff}
    #sec-options .pill-night svg{stroke:#6f58c9}
    #sec-options .pill-weekday .mini{background:#e3f8f1}
    #sec-options .pill-weekday svg{stroke:#2f9a7b}
    #sec-options .pill-weekend .mini{background:#ffe7ef}
    #sec-options .pill-weekend svg{stroke:#b54f78}

    #sec-options .spark{
      position:absolute;
      font-family:"Fredoka",sans-serif;
      font-size:22px;
      line-height:1;
      z-index:1;
      pointer-events:none;
      opacity:0;
      transform:translateY(10px);
      animation:fadeRise_sec_options .55s ease forwards, hoverUp_sec_options 4.5s ease-in-out infinite;
    }

    #sec-options .spark.s1{left:38px;top:52px;color:#ffd200;animation-delay:2.9s,3.8s}
    #sec-options .spark.s2{right:44px;top:34px;color:#58a0ff;animation-delay:3.05s,4s}
    #sec-options .spark.s3{left:78px;bottom:36px;color:#ff8fad;animation-delay:3.2s,4.2s}

    @keyframes boardIn_sec_options{
      0%{opacity:0;transform:translateY(18px) scale(.96)}
      100%{opacity:1;transform:translateY(0) scale(1)}
    }

    @keyframes popIn_sec_options{
      0%{opacity:0;transform:translateY(18px) scale(.86)}
      100%{opacity:1;transform:translateY(0) scale(1)}
    }

    @keyframes slideRow_sec_options{
      0%{opacity:0;transform:translateX(-14px)}
      100%{opacity:1;transform:translateX(0)}
    }

    @keyframes growBar_sec_options{
      from{width:0}
    }

    @keyframes hoverUp_sec_options{
      0%,100%{translate:0 0}
      50%{translate:0 -8px}
    }

    @keyframes fadeRise_sec_options{
      0%{opacity:0;transform:translateY(10px)}
      100%{opacity:1;transform:translateY(0)}
    }

    @keyframes floatBlob_sec_options{
      0%,100%{transform:translateY(0) rotate(0deg)}
      50%{transform:translateY(-8px) rotate(2deg)}
    }

    @media (max-width:980px){
      #sec-options .options-wrap{
        grid-template-columns:1fr;
        gap:34px;
      }

      #sec-options .options-copy{
        max-width:760px;
        order:2;
      }

      #sec-options .art-zone{
        min-height:420px;
        order:1;
      }
    }

    @media (max-width:560px){
      #sec-options .options-section{
        padding:58px 0 68px;
      }

      #sec-options .options-container{
        width:min(100% - 24px, 560px);
      }

      #sec-options .options-copy h2{
        font-size:34px;
      }

      #sec-options .options-copy p, #sec-options .plan-list li{
        font-size:14px;
        line-height:1.78;
      }

      #sec-options .art-zone{
        min-height:330px;
        transform:scale(.84);
        transform-origin:center top;
      }
    }
  


/* ===== International globe section ===== */

    #sec-world *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-world{
      background: #ffffff;
      font-family: "Poppins", sans-serif;
      color: #101828;
    }

    #sec-world .world-section{
      width: 100%;
      padding: 82px 0;
      background: #ffffff;
    }

    #sec-world .world-container{
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    #sec-world .world-panel{
      background: #eaf6fb;
      min-height: 635px;
      border-radius: 0;
      position: relative;
      overflow: hidden;
      padding: 34px 34px 0;
    }

    #sec-world .world-head{
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 2;
    }

    #sec-world .world-head h2{
      font-family: "Fredoka", sans-serif;
      color: #0a82cf;
      font-size: clamp(34px, 4vw, 54px);
      line-height: 1.08;
      font-weight: 600;
      letter-spacing: -0.6px;
      margin-bottom: 16px;
    }

    #sec-world .world-head p{
      color: #5f707f;
      font-size: 16px;
      line-height: 1.85;
      font-weight: 400;
      max-width: 920px;
      margin: 0 auto;
      text-wrap: pretty;
    }

    #sec-world .globe-area{
      position: relative;
      margin-top: 18px;
      height: 390px;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    #sec-world .globe-figure{
      position: relative;
      width: min(760px, 100%);
      display: flex;
      justify-content: center;
      align-items: flex-end;
      animation: floatGlobe_sec_world 6s ease-in-out infinite;
      transform-origin: center bottom;
    }

    #sec-world .globe-inner{
      position: relative;
      width: 695px;
      max-width: 100%;
      overflow: visible;
      animation: rotateLike_sec_world 10s ease-in-out infinite;
      transform-origin: center 78%;
      will-change: transform;
    }

    #sec-world .globe-inner img{
      width: 100%;
      height: auto;
      display: block;
      user-select: none;
      pointer-events: none;
    }

    #sec-world .soft-shadow{
      position: absolute;
      left: 50%;
      bottom: 6px;
      transform: translateX(-50%);
      width: 540px;
      height: 28px;
      border-radius: 50%;
      background: rgba(0, 87, 125, 0.08);
      filter: blur(10px);
    }

    @keyframes rotateLike_sec_world {
      0%   { transform: translateX(0) rotate(0deg) scale(1); }
      25%  { transform: translateX(-10px) rotate(-1deg) scale(1.01); }
      50%  { transform: translateX(-18px) rotate(0deg) scale(1.02); }
      75%  { transform: translateX(-10px) rotate(1deg) scale(1.01); }
      100% { transform: translateX(0) rotate(0deg) scale(1); }
    }

    @keyframes floatGlobe_sec_world {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    @media (max-width: 900px){
      #sec-world .world-panel{
        min-height: 560px;
        padding: 28px 18px 0;
      }

      #sec-world .world-head p{
        font-size: 14px;
        line-height: 1.78;
      }

      #sec-world .globe-area{
        height: 305px;
      }

      #sec-world .soft-shadow{
        width: 420px;
      }
    }

    @media (max-width: 560px){
      #sec-world .world-section{
        padding: 58px 0;
      }

      #sec-world .world-container{
        width: min(100% - 24px, 560px);
      }

      #sec-world .world-panel{
        min-height: 450px;
        padding: 24px 14px 0;
      }

      #sec-world .world-head h2{
        font-size: 34px;
      }

      #sec-world .world-head p{
        font-size: 13.5px;
        line-height: 1.72;
      }

      #sec-world .globe-area{
        height: 220px;
      }

      #sec-world .soft-shadow{
        width: 280px;
        bottom: 2px;
      }
    }
  


/* ===== Testimonials ===== */

    #sec-testimonials *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-testimonials{
      --blue: #00577d;
      --sky: #58a0ff;
      --pink: #fecddc;
      --teal: #77aec5;
      --yellow: #ffd200;
      --text: #526275;
    }

    #sec-testimonials{
      background: #ffffff;
      color: #101828;
      font-family: "Poppins", sans-serif;
    }

    #sec-testimonials .testimonials-section{
      width: 100%;
      padding: 82px 0 94px;
      background: #ffffff;
      overflow: hidden;
      position: relative;
    }

    #sec-testimonials .testimonials-section::before{
      content: "";
      position: absolute;
      width: 230px;
      height: 230px;
      left: -90px;
      top: 44px;
      border-radius: 50%;
      background: rgba(254, 205, 220, 0.28);
      filter: blur(8px);
      pointer-events: none;
    }

    #sec-testimonials .testimonials-section::after{
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -110px;
      bottom: 28px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.13);
      filter: blur(10px);
      pointer-events: none;
    }

    #sec-testimonials .testimonials-container{
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    #sec-testimonials .testimonials-grid{
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      gap: 52px;
      align-items: center;
    }

    #sec-testimonials .testimonials-copy{
      max-width: 500px;
    }

    #sec-testimonials .mini-label{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 15px;
      border-radius: 999px;
      background: #eef7ff;
      color: var(--sky);
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 16px;
      box-shadow: 0 12px 24px rgba(0, 44, 92, 0.05);
    }

    #sec-testimonials .mini-label::before{
      content: "✦";
      color: var(--yellow);
      font-size: 16px;
    }

    #sec-testimonials .testimonials-copy h2{
      font-family: "Fredoka", sans-serif;
      font-size: clamp(36px, 4.1vw, 54px);
      line-height: 1.06;
      font-weight: 600;
      letter-spacing: -0.7px;
      color: var(--blue);
      margin-bottom: 18px;
    }

    #sec-testimonials .testimonials-copy p{
      color: var(--text);
      font-size: 16px;
      line-height: 1.85;
      font-weight: 400;
      text-wrap: pretty;
    }

    #sec-testimonials .mini-stats{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
      margin-bottom: 22px;
    }

    #sec-testimonials .mini-stat{
      padding: 10px 13px;
      border-radius: 999px;
      background: #ffffff;
      border: 1px solid rgba(220, 233, 245, 0.95);
      color: #00577d;
      font-size: 12.5px;
      font-weight: 600;
      box-shadow: 0 10px 22px rgba(0, 44, 92, 0.05);
    }

    #sec-testimonials .student-photo-wrap{
      position: relative;
      border-radius: 34px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid rgba(220, 233, 245, 0.95);
      box-shadow: 0 18px 38px rgba(0, 44, 92, 0.08);
    }

    #sec-testimonials .student-photo-wrap::after{
      content: "";
      position: absolute;
      inset: auto 18px 18px 18px;
      height: 38px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.08) 100%);
      opacity: .18;
      pointer-events: none;
    }

    #sec-testimonials .student-photo{
      width: 100%;
      display: block;
      aspect-ratio: 1 / 1.1;
      object-fit: cover;
    }

    #sec-testimonials .photo-tag{
      position: absolute;
      left: 18px;
      top: 18px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      color: #58a0ff;
      font-size: 12px;
      font-weight: 600;
      box-shadow: 0 12px 24px rgba(0,44,92,.08);
    }

    #sec-testimonials .testimonial-stage{
      position: relative;
      min-height: 470px;
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    #sec-testimonials .stage-bg{
      position: absolute;
      width: 520px;
      height: 372px;
      border-radius: 42px;
      background:
        radial-gradient(circle at 16% 14%, rgba(254, 205, 220, 0.32), transparent 26%),
        radial-gradient(circle at 90% 20%, rgba(255, 210, 0, 0.18), transparent 22%),
        linear-gradient(135deg, #f2f9ff 0%, #ffffff 100%);
      border: 1px solid rgba(220, 233, 245, 0.95);
      box-shadow: 0 22px 54px rgba(0, 44, 92, 0.08);
      z-index: -2;
    }

    #sec-testimonials .stage-bg::before{
      content: "";
      position: absolute;
      width: 130px;
      height: 130px;
      left: -34px;
      bottom: -28px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.10);
    }

    #sec-testimonials .stage-bg::after{
      content: "";
      position: absolute;
      width: 94px;
      height: 94px;
      right: -28px;
      top: -24px;
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.68);
      transform: rotate(18deg);
    }

    #sec-testimonials .testimonial-card{
      position: absolute;
      width: min(100%, 490px);
      min-height: 332px;
      padding: 28px 28px 24px;
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(255,255,255,0.96);
      box-shadow: 0 18px 42px rgba(0, 44, 92, 0.08);
      backdrop-filter: blur(10px);
      opacity: 0;
      transform: translateX(70px) scale(0.88) rotate(4deg);
      pointer-events: none;
      transition: opacity .55s ease, transform .55s ease, filter .55s ease;
      overflow: hidden;
    }

    #sec-testimonials .testimonial-card.prev{
      opacity: .44;
      transform: translateX(-105px) scale(.82) rotate(-7deg);
      filter: blur(.3px);
      z-index: 1;
    }

    #sec-testimonials .testimonial-card.next{
      opacity: .44;
      transform: translateX(105px) scale(.82) rotate(7deg);
      filter: blur(.3px);
      z-index: 1;
    }

    #sec-testimonials .testimonial-card.active{
      opacity: 1;
      transform: translateX(0) scale(1) rotate(0deg);
      pointer-events: auto;
      z-index: 4;
      animation: activeFloat_sec_testimonials 5.8s ease-in-out infinite;
    }

    #sec-testimonials .testimonial-card::before{
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      right: -28px;
      top: -30px;
      border-radius: 28px;
      background: rgba(88, 160, 255, 0.10);
      transform: rotate(22deg);
    }

    #sec-testimonials .quote-mark{
      position: absolute;
      right: 24px;
      top: 10px;
      font-family: "Fredoka", sans-serif;
      color: rgba(88, 160, 255, 0.18);
      font-size: 90px;
      line-height: 1;
      font-weight: 600;
    }

    #sec-testimonials .student-row{
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
      position: relative;
      z-index: 2;
    }

    #sec-testimonials .avatar{
      width: 58px;
      height: 58px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #58a0ff, #77aec5);
      color: #ffffff;
      font-family: "Fredoka", sans-serif;
      font-size: 22px;
      font-weight: 600;
      box-shadow: 0 14px 24px rgba(88, 160, 255, 0.22);
      flex: 0 0 58px;
    }

    #sec-testimonials .student-row h3{
      font-family: "Fredoka", sans-serif;
      font-size: 24px;
      line-height: 1.1;
      font-weight: 600;
      color: #17324d;
      margin-bottom: 7px;
    }

    #sec-testimonials .meta-row{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    #sec-testimonials .country-pill, #sec-testimonials .course-tag{
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 600;
      padding: 7px 10px;
      line-height: 1;
    }

    #sec-testimonials .country-pill{
      background: #fff3bf;
      color: #8b6a00;
    }

    #sec-testimonials .course-tag{
      background: #eef7ff;
      color: #58a0ff;
    }

    #sec-testimonials .testimonial-card p{
      position: relative;
      z-index: 2;
      color: #526275;
      font-size: 15px;
      line-height: 1.75;
      font-weight: 400;
      text-wrap: pretty;
    }

    #sec-testimonials .card-bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 18px;
      position: relative;
      z-index: 2;
    }

    #sec-testimonials .score-pill{
      padding: 9px 13px;
      border-radius: 999px;
      background: #eef7ff;
      color: #00577d;
      font-size: 12px;
      font-weight: 600;
    }

    #sec-testimonials .stars{
      color: #ffd200;
      letter-spacing: 1px;
      font-size: 15px;
      filter: drop-shadow(0 4px 10px rgba(255, 210, 0, 0.22));
    }

    #sec-testimonials .controls{
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 5;
    }

    #sec-testimonials .dot{
      width: 9px;
      height: 9px;
      border: 0;
      border-radius: 999px;
      background: #d6e5f1;
      cursor: pointer;
      transition: width .22s ease, background .22s ease;
    }

    #sec-testimonials .dot.active{
      width: 28px;
      background: #58a0ff;
    }

    #sec-testimonials .float-icon{
      position: absolute;
      z-index: 3;
      padding: 11px 13px;
      border-radius: 18px;
      background: #ffffff;
      border: 1px solid rgba(220, 233, 245, 0.9);
      box-shadow: 0 14px 28px rgba(0, 44, 92, 0.08);
      font-size: 22px;
      animation: iconFloat_sec_testimonials 5s ease-in-out infinite;
    }

    #sec-testimonials .icon-a{ left: 20px; top: 54px; }
    #sec-testimonials .icon-b{ right: 10px; bottom: 88px; animation-delay: .7s; }
    #sec-testimonials .icon-c{ right: 70px; top: 18px; animation-delay: 1.2s; }

    @keyframes activeFloat_sec_testimonials {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -7px; }
    }

    @keyframes iconFloat_sec_testimonials {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-8px) rotate(5deg); }
    }

    @media (max-width: 980px){
      #sec-testimonials .testimonials-grid{
        grid-template-columns: 1fr;
        gap: 34px;
      }

      #sec-testimonials .testimonials-copy{
        max-width: 760px;
        text-align: center;
        margin: 0 auto;
      }

      #sec-testimonials .mini-stats{
        justify-content: center;
      }

      #sec-testimonials .student-photo-wrap{
        max-width: 580px;
        margin: 0 auto;
      }

      #sec-testimonials .testimonial-stage{
        min-height: 430px;
      }
    }

    @media (max-width: 560px){
      #sec-testimonials .testimonials-section{
        padding: 58px 0 68px;
      }

      #sec-testimonials .testimonials-container{
        width: min(100% - 24px, 560px);
      }

      #sec-testimonials .testimonials-copy h2{
        font-size: 34px;
      }

      #sec-testimonials .testimonials-copy p{
        font-size: 14px;
        line-height: 1.78;
      }

      #sec-testimonials .student-photo-wrap{
        border-radius: 24px;
      }

      #sec-testimonials .testimonial-stage{
        min-height: 520px;
      }

      #sec-testimonials .stage-bg{
        width: 100%;
        height: 430px;
        border-radius: 30px;
      }

      #sec-testimonials .testimonial-card{
        min-height: 420px;
        padding: 24px 20px 22px;
        border-radius: 24px;
      }

      #sec-testimonials .testimonial-card.prev, #sec-testimonials .testimonial-card.next{
        display: none;
      }

      #sec-testimonials .student-row h3{
        font-size: 22px;
      }

      #sec-testimonials .testimonial-card p{
        font-size: 13.5px;
        line-height: 1.7;
      }

      #sec-testimonials .float-icon{
        display: none;
      }
    }
  


/* ===== FAQs ===== */

    #sec-faq *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-faq{
      --blue: #00577d;
      --sky: #58a0ff;
      --pink: #fecddc;
      --teal: #77aec5;
      --yellow: #ffd200;
      --text: #526275;
      --light: #f4faff;
      --line: #dcebf6;
    }

    #sec-faq{
      background: #ffffff;
      color: #101828;
      font-family: "Poppins", sans-serif;
    }

    #sec-faq .faq-section{
      width: 100%;
      padding: 82px 0 94px;
      background: #ffffff;
      overflow: hidden;
      position: relative;
    }

    #sec-faq .faq-section::before{
      content: "";
      position: absolute;
      width: 230px;
      height: 230px;
      left: -90px;
      top: 42px;
      border-radius: 50%;
      background: rgba(254, 205, 220, 0.28);
      filter: blur(8px);
      pointer-events: none;
    }

    #sec-faq .faq-section::after{
      content: "";
      position: absolute;
      width: 270px;
      height: 270px;
      right: -120px;
      bottom: 28px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.13);
      filter: blur(10px);
      pointer-events: none;
    }

    #sec-faq .faq-container{
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    #sec-faq .faq-wrap{
      display: grid;
      grid-template-columns: 0.86fr 1.14fr;
      gap: 54px;
      align-items: start;
    }

    #sec-faq .faq-intro{
      position: sticky;
      top: 28px;
      min-height: 520px;
      border-radius: 42px;
      padding: 38px 34px;
      background:
        radial-gradient(circle at 16% 14%, rgba(254, 205, 220, 0.34), transparent 26%),
        radial-gradient(circle at 84% 20%, rgba(255, 210, 0, 0.16), transparent 22%),
        linear-gradient(135deg, #f2f9ff 0%, #ffffff 100%);
      border: 1px solid rgba(220, 233, 245, 0.95);
      box-shadow: 0 22px 52px rgba(0, 44, 92, 0.08);
      overflow: hidden;
      isolation: isolate;
    }

    #sec-faq .faq-intro::before{
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      left: -42px;
      bottom: -38px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.10);
      z-index: -1;
    }

    #sec-faq .faq-intro::after{
      content: "";
      position: absolute;
      width: 92px;
      height: 92px;
      right: -24px;
      top: -22px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.68);
      transform: rotate(18deg);
      z-index: -1;
    }

    #sec-faq .mini-label{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 15px;
      border-radius: 999px;
      background: #ffffff;
      color: var(--sky);
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 16px;
      box-shadow: 0 12px 24px rgba(0, 44, 92, 0.05);
    }

    #sec-faq .mini-label::before{
      content: "✦";
      color: var(--yellow);
      font-size: 16px;
    }

    #sec-faq .faq-intro h2{
      font-family: "Fredoka", sans-serif;
      font-size: clamp(36px, 4vw, 54px);
      line-height: 1.05;
      font-weight: 600;
      letter-spacing: -0.7px;
      color: var(--blue);
      margin-bottom: 16px;
      max-width: 430px;
    }

    #sec-faq .faq-intro p{
      color: var(--text);
      font-size: 16px;
      line-height: 1.82;
      font-weight: 400;
      max-width: 420px;
    }

    #sec-faq .faq-visual{
      position: relative;
      height: 245px;
      margin-top: 36px;
    }

    #sec-faq .big-bubble{
      position: absolute;
      left: 50%;
      top: 52%;
      transform: translate(-50%, -50%);
      width: 210px;
      height: 158px;
      border-radius: 42px;
      background: linear-gradient(135deg, #58a0ff, #77aec5);
      box-shadow: 0 22px 38px rgba(88, 160, 255, 0.24);
      animation: bubbleFloat_sec_faq 5.6s ease-in-out infinite;
    }

    #sec-faq .big-bubble::after{
      content: "";
      position: absolute;
      left: 34px;
      bottom: -20px;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #77aec5;
      transform: rotate(24deg);
    }

    #sec-faq .big-bubble span{
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #ffffff;
      font-family: "Fredoka", sans-serif;
      font-size: 68px;
      font-weight: 600;
      z-index: 2;
    }

    #sec-faq .mini-bubble{
      position: absolute;
      padding: 11px 14px;
      border-radius: 999px;
      background: #ffffff;
      color: var(--blue);
      font-size: 12px;
      font-weight: 600;
      box-shadow: 0 14px 26px rgba(0, 44, 92, 0.08);
      animation: miniFloat_sec_faq 4.8s ease-in-out infinite;
      white-space: nowrap;
    }

    #sec-faq .mini-bubble.one{
      left: 0;
      top: 24px;
    }

    #sec-faq .mini-bubble.two{
      right: 4px;
      top: 60px;
      animation-delay: .6s;
    }

    #sec-faq .mini-bubble.three{
      left: 34px;
      bottom: 20px;
      animation-delay: 1.1s;
    }

    #sec-faq .spark{
      position: absolute;
      font-family: "Fredoka", sans-serif;
      font-size: 22px;
      line-height: 1;
      animation: sparkle_sec_faq 2.1s ease-in-out infinite;
      pointer-events: none;
    }

    #sec-faq .spark.s1{ color: var(--yellow); left: 58px; top: 10px; }
    #sec-faq .spark.s2{ color: var(--pink); right: 82px; bottom: 28px; animation-delay: .4s; }
    #sec-faq .spark.s3{ color: var(--sky); right: 20px; top: 12px; animation-delay: .8s; }

    #sec-faq .faq-list{
      display: grid;
      gap: 14px;
      position: relative;
    }

    #sec-faq .faq-list::before{
      content: "";
      position: absolute;
      left: 29px;
      top: 24px;
      bottom: 24px;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(88,160,255,.22), rgba(254,205,220,.28), rgba(255,210,0,.22));
    }

    #sec-faq .faq-item{
      position: relative;
      border-radius: 26px;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(220, 233, 245, 0.95);
      box-shadow: 0 14px 32px rgba(0, 44, 92, 0.06);
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    #sec-faq .faq-item:hover{
      transform: translateY(-4px);
      box-shadow: 0 20px 42px rgba(0, 44, 92, 0.10);
      border-color: rgba(88, 160, 255, 0.30);
    }

    #sec-faq .faq-item.open{
      background:
        radial-gradient(circle at 96% 12%, rgba(255, 210, 0, 0.13), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
      border-color: rgba(88, 160, 255, 0.28);
    }

    #sec-faq .faq-question{
      width: 100%;
      border: 0;
      background: transparent;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 18px 20px;
      cursor: pointer;
      text-align: left;
      font-family: "Poppins", sans-serif;
    }

    #sec-faq .faq-number{
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: #eef7ff;
      color: var(--sky);
      font-family: "Fredoka", sans-serif;
      font-size: 16px;
      font-weight: 600;
      box-shadow: 0 10px 18px rgba(88, 160, 255, 0.10);
      transition: background .22s ease, color .22s ease, transform .22s ease;
    }

    #sec-faq .faq-item.open .faq-number{
      background: linear-gradient(135deg, var(--sky), var(--teal));
      color: #ffffff;
      transform: rotate(-4deg);
    }

    #sec-faq .question-text{
      color: #17324d;
      font-size: 16px;
      line-height: 1.45;
      font-weight: 600;
      transition: color .22s ease;
    }

    #sec-faq .faq-item.open .question-text{
      color: var(--blue);
    }

    #sec-faq .faq-plus{
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #f4faff;
      border: 1px solid rgba(220, 233, 245, 0.95);
      position: relative;
      transition: transform .22s ease, background .22s ease;
      flex: 0 0 34px;
    }

    #sec-faq .faq-plus::before, #sec-faq .faq-plus::after{
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 14px;
      height: 2px;
      border-radius: 999px;
      background: var(--blue);
      transform: translate(-50%, -50%);
      transition: transform .22s ease;
    }

    #sec-faq .faq-plus::after{
      transform: translate(-50%, -50%) rotate(90deg);
    }

    #sec-faq .faq-item.open .faq-plus{
      background: #fff4bf;
      transform: rotate(180deg);
    }

    #sec-faq .faq-item.open .faq-plus::after{
      transform: translate(-50%, -50%) rotate(0deg);
    }

    #sec-faq .faq-answer{
      max-height: 0;
      overflow: hidden;
      transition: max-height .34s ease;
    }

    #sec-faq .faq-answer p{
      padding: 0 22px 20px 78px;
      color: #5b6a7a;
      font-size: 14.5px;
      line-height: 1.8;
      font-weight: 400;
    }

    @keyframes bubbleFloat_sec_faq {
      0%, 100% { transform: translate(-50%, -50%); }
      50% { transform: translate(-50%, calc(-50% - 9px)); }
    }

    @keyframes miniFloat_sec_faq {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes sparkle_sec_faq {
      0%, 100% { opacity: .45; transform: scale(.92); }
      50% { opacity: 1; transform: scale(1.14); }
    }

    @media (max-width: 980px){
      #sec-faq .faq-wrap{
        grid-template-columns: 1fr;
        gap: 32px;
      }

      #sec-faq .faq-intro{
        position: relative;
        top: auto;
        min-height: auto;
      }

      #sec-faq .faq-intro h2, #sec-faq .faq-intro p{
        max-width: 760px;
      }

      #sec-faq .faq-visual{
        max-width: 460px;
        margin: 34px auto 0;
      }
    }

    @media (max-width: 560px){
      #sec-faq .faq-section{
        padding: 58px 0 68px;
      }

      #sec-faq .faq-container{
        width: min(100% - 24px, 560px);
      }

      #sec-faq .faq-intro{
        border-radius: 30px;
        padding: 30px 20px;
      }

      #sec-faq .faq-intro h2{
        font-size: 34px;
      }

      #sec-faq .faq-intro p{
        font-size: 14px;
        line-height: 1.76;
      }

      #sec-faq .faq-visual{
        height: 210px;
      }

      #sec-faq .big-bubble{
        width: 178px;
        height: 132px;
        border-radius: 34px;
      }

      #sec-faq .big-bubble span{
        font-size: 56px;
      }

      #sec-faq .mini-bubble{
        font-size: 11px;
      }

      #sec-faq .faq-list::before{
        display: none;
      }

      #sec-faq .faq-question{
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 15px 14px;
      }

      #sec-faq .faq-number{
        width: 36px;
        height: 36px;
        border-radius: 13px;
        font-size: 14px;
      }

      #sec-faq .question-text{
        font-size: 14.5px;
      }

      #sec-faq .faq-plus{
        width: 30px;
        height: 30px;
      }

      #sec-faq .faq-answer p{
        padding: 0 16px 18px 62px;
        font-size: 13.5px;
        line-height: 1.72;
      }
    }
  


/* ===== Blog section ===== */

    #sec-blog *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-blog{
      --blue: #00577d;
      --sky: #58a0ff;
      --pink: #fecddc;
      --teal: #77aec5;
      --yellow: #ffd200;
      --text: #526275;
      --line: #dcebf6;
    }

    #sec-blog{
      background: #ffffff;
      color: #101828;
      font-family: "Poppins", sans-serif;
    }

    #sec-blog .blog-section{
      width: 100%;
      padding: 82px 0 94px;
      background: #ffffff;
      overflow: hidden;
      position: relative;
    }

    #sec-blog .blog-section::before{
      content: "";
      position: absolute;
      width: 230px;
      height: 230px;
      left: -90px;
      top: 46px;
      border-radius: 50%;
      background: rgba(254, 205, 220, 0.28);
      filter: blur(8px);
      pointer-events: none;
    }

    #sec-blog .blog-section::after{
      content: "";
      position: absolute;
      width: 270px;
      height: 270px;
      right: -120px;
      bottom: 24px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.13);
      filter: blur(10px);
      pointer-events: none;
    }

    #sec-blog .blog-container{
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    #sec-blog .blog-head{
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 26px;
      margin-bottom: 38px;
    }

    #sec-blog .blog-title{
      max-width: 700px;
    }

    #sec-blog .mini-label{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 15px;
      border-radius: 999px;
      background: #eef7ff;
      color: var(--sky);
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 14px;
      box-shadow: 0 12px 24px rgba(0, 44, 92, 0.05);
    }

    #sec-blog .mini-label::before{
      content: "✦";
      color: var(--yellow);
      font-size: 16px;
    }

    #sec-blog .blog-title h2{
      font-family: "Fredoka", sans-serif;
      font-size: clamp(36px, 4.1vw, 54px);
      line-height: 1.06;
      font-weight: 600;
      letter-spacing: -0.7px;
      color: var(--blue);
      margin-bottom: 12px;
    }

    #sec-blog .blog-title p{
      color: var(--text);
      font-size: 16px;
      line-height: 1.75;
      max-width: 640px;
    }

    #sec-blog .all-blogs-btn{
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      background: var(--blue);
      color: #ffffff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 16px 32px rgba(0, 87, 125, 0.18);
      transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
    }

    #sec-blog .all-blogs-btn:hover{
      transform: translateY(-3px);
      background: var(--sky);
      box-shadow: 0 20px 42px rgba(88, 160, 255, 0.22);
    }

    #sec-blog .blog-board{
      position: relative;
      border-radius: 42px;
      padding: 28px;
      background:
        radial-gradient(circle at 12% 12%, rgba(254, 205, 220, 0.30), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(255, 210, 0, 0.16), transparent 20%),
        linear-gradient(135deg, #f7fbff 0%, #ffffff 100%);
      border: 1px solid rgba(220, 233, 245, 0.95);
      box-shadow: 0 24px 54px rgba(0, 44, 92, 0.08);
      overflow: hidden;
      isolation: isolate;
    }

    #sec-blog .blog-board::before{
      content: "";
      position: absolute;
      left: -46px;
      bottom: -42px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(88, 160, 255, 0.10);
      z-index: -1;
    }

    #sec-blog .blog-board::after{
      content: "";
      position: absolute;
      right: -28px;
      top: -26px;
      width: 100px;
      height: 100px;
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.68);
      transform: rotate(18deg);
      z-index: -1;
    }

    #sec-blog .blog-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      position: relative;
      z-index: 2;
    }

    #sec-blog .blog-card{
      min-width: 0;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      border-radius: 30px;
      background: #ffffff;
      border: 1px solid rgba(220, 233, 245, 0.95);
      box-shadow: 0 16px 34px rgba(0, 44, 92, 0.07);
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      position: relative;
    }

    #sec-blog .blog-card:hover{
      transform: translateY(-10px) rotate(-1deg);
      box-shadow: 0 26px 54px rgba(0, 44, 92, 0.12);
      border-color: rgba(88, 160, 255, 0.34);
    }

    #sec-blog .blog-card:nth-child(even):hover{
      transform: translateY(-10px) rotate(1deg);
    }

    #sec-blog .blog-image-wrap{
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #eaf7ff;
    }

    #sec-blog .blog-image-wrap img{
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform .35s ease;
    }

    #sec-blog .blog-card:hover .blog-image-wrap img{
      transform: scale(1.06);
    }

    #sec-blog .blog-chip{
      position: absolute;
      left: 14px;
      top: 14px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      color: var(--blue);
      font-size: 11.5px;
      font-weight: 700;
      box-shadow: 0 10px 20px rgba(0, 44, 92, 0.08);
      backdrop-filter: blur(8px);
    }

    #sec-blog .blog-info{
      padding: 20px 20px 18px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    #sec-blog .blog-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    #sec-blog .blog-meta span{
      display: inline-flex;
      align-items: center;
      padding: 7px 10px;
      border-radius: 999px;
      background: #f4faff;
      color: #597086;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
    }

    #sec-blog .blog-info h3{
      font-family: "Fredoka", sans-serif;
      color: #17324d;
      font-size: 24px;
      line-height: 1.16;
      letter-spacing: -0.2px;
      font-weight: 600;
      margin-bottom: 18px;
      min-height: 84px;
    }

    #sec-blog .read-btn{
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      min-height: 46px;
      padding: 0 15px 0 17px;
      border-radius: 999px;
      background: #eef7ff;
      color: var(--blue);
      font-size: 14px;
      font-weight: 700;
      transition: background .22s ease, color .22s ease;
    }

    #sec-blog .arrow{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #ffffff;
      color: var(--sky);
      transition: transform .22s ease, background .22s ease, color .22s ease;
    }

    #sec-blog .blog-card:hover .read-btn{
      background: var(--blue);
      color: #ffffff;
    }

    #sec-blog .blog-card:hover .arrow{
      transform: translateX(4px);
      background: var(--yellow);
      color: var(--blue);
    }

    #sec-blog .floating-note{
      position: absolute;
      z-index: 3;
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: #ffffff;
      color: var(--sky);
      box-shadow: 0 14px 26px rgba(0, 44, 92, 0.08);
      animation: floatNote_sec_blog 5s ease-in-out infinite;
      pointer-events: none;
    }

    #sec-blog .note-a{
      left: 10px;
      top: 44px;
    }

    #sec-blog .note-b{
      right: 18px;
      bottom: 54px;
      animation-delay: .7s;
      color: #ff8fad;
    }

    #sec-blog .note-c{
      right: 34%;
      top: 10px;
      animation-delay: 1.2s;
      color: var(--yellow);
    }

    @keyframes floatNote_sec_blog {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-8px) rotate(6deg); }
    }

    @media (max-width: 980px){
      #sec-blog .blog-head{
        align-items: start;
        flex-direction: column;
      }

      #sec-blog .blog-grid{
        grid-template-columns: 1fr;
      }

      #sec-blog .blog-info h3{
        min-height: auto;
      }

      #sec-blog .blog-card{
        max-width: 640px;
        margin: 0 auto;
        width: 100%;
      }
    }

    @media (max-width: 560px){
      #sec-blog .blog-section{
        padding: 58px 0 68px;
      }

      #sec-blog .blog-container{
        width: min(100% - 24px, 560px);
      }

      #sec-blog .blog-title h2{
        font-size: 34px;
      }

      #sec-blog .blog-title p{
        font-size: 14px;
        line-height: 1.76;
      }

      #sec-blog .blog-board{
        border-radius: 30px;
        padding: 16px;
      }

      #sec-blog .blog-card{
        border-radius: 24px;
      }

      #sec-blog .blog-info{
        padding: 18px;
      }

      #sec-blog .blog-info h3{
        font-size: 21px;
      }

      #sec-blog .floating-note{
        display: none;
      }
    }
  


/* ===== Contact section ===== */

    #sec-contact *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #sec-contact{
      --blue: #00577d;
      --sky: #0b8fd0;
      --soft-purple: #e6e3ff;
      --text: #526275;
    }

    #sec-contact{
      background: #ffffff;
      color: #101828;
      font-family: "Poppins", sans-serif;
    }

    #sec-contact .contact-section{
      width: 100%;
      padding: 64px 0 72px;
      background: #ffffff;
      overflow: hidden;
    }

    #sec-contact .contact-container{
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
    }

    #sec-contact .contact-wrap{
      display: grid;
      grid-template-columns: 1fr 0.95fr;
      gap: 44px;
      align-items: center;
    }

    #sec-contact .contact-copy{
      max-width: 560px;
    }

    #sec-contact .contact-copy h2{
      font-family: "Fredoka", sans-serif;
      font-size: clamp(34px, 3.5vw, 46px);
      line-height: 1.05;
      font-weight: 600;
      color: var(--sky);
      margin-bottom: 18px;
    }

    #sec-contact .contact-copy p{
      color: var(--text);
      font-size: 15px;
      line-height: 1.78;
      max-width: 540px;
      margin-bottom: 22px;
    }

    #sec-contact .contact-form{
      width: min(100%, 520px);
      background: var(--soft-purple);
      border-radius: 16px;
      padding: 12px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      box-shadow: 0 12px 26px rgba(0, 44, 92, 0.06);
    }

    #sec-contact .contact-form input, #sec-contact .contact-form select{
      width: 100%;
      height: 42px;
      border: 1px solid rgba(100, 112, 132, 0.34);
      border-radius: 9px;
      background: #ffffff;
      color: #17324d;
      padding: 0 12px;
      font-family: "Poppins", sans-serif;
      font-size: 13px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    #sec-contact .contact-form input:focus, #sec-contact .contact-form select:focus{
      border-color: rgba(88, 160, 255, 0.85);
      box-shadow: 0 0 0 4px rgba(88, 160, 255, 0.12);
    }

    #sec-contact .contact-form input::placeholder{
      color: #9aa6b4;
    }

    #sec-contact .send-btn{
      height: 42px;
      border: 0;
      border-radius: 9px;
      background: var(--sky);
      color: #ffffff;
      font-family: "Poppins", sans-serif;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease;
    }

    #sec-contact .send-btn:hover{
      background: var(--blue);
      transform: translateY(-2px);
    }

    #sec-contact .contact-art{
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #sec-contact .contact-art img{
      width: min(100%, 430px);
      height: auto;
      display: block;
      object-fit: contain;
    }

    #sec-contact .success-msg{
      grid-column: 1 / -1;
      display: none;
      background: #ffffff;
      color: var(--blue);
      font-size: 12.5px;
      font-weight: 600;
      padding: 10px 12px;
      border-radius: 9px;
    }

    #sec-contact .success-msg.show{
      display: block;
    }

    @media (max-width: 900px){
      #sec-contact .contact-wrap{
        grid-template-columns: 1fr;
        gap: 30px;
      }

      #sec-contact .contact-art{
        order: -1;
      }

      #sec-contact .contact-copy{
        max-width: 760px;
      }
    }

    @media (max-width: 560px){
      #sec-contact .contact-section{
        padding: 52px 0 62px;
      }

      #sec-contact .contact-container{
        width: min(100% - 24px, 560px);
      }

      #sec-contact .contact-copy h2{
        font-size: 34px;
      }

      #sec-contact .contact-copy p{
        font-size: 14px;
        line-height: 1.72;
      }

      #sec-contact .contact-form{
        grid-template-columns: 1fr;
      }

      #sec-contact .contact-art img{
        width: min(100%, 360px);
      }
    }
  

  
/* ===== Final visual refinements ===== */

/* Header logo: lighter, cleaner, and proportionate */
.site-header .brand-logo{
  width: 142px !important;
  height: auto !important;
  display: block !important;
}

@media (max-width: 1080px){
  .site-header .brand-logo{
    width: 136px !important;
  }
}

@media (max-width: 640px){
  .site-header .brand-logo{
    width: 122px !important;
  }
}

/* Standardize heading scale across the homepage */
#sec-hero h1{
  font-size: clamp(31px, 3.1vw, 42px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.7px !important;
}

#sec-hero .typing-course{
  font-size: clamp(26px, 2.5vw, 34px) !important;
  line-height: 1.1 !important;
}

#sec-logo-slider h2,
#sec-courses h2,
#sec-night h2,
#sec-results h2,
#sec-stats h2,
#sec-quality h2,
#sec-fun-learning h2,
#sec-options h2,
#sec-world h2,
#sec-testimonials h2,
#sec-faq h2,
#sec-blog h2,
#sec-contact h2{
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.4px !important;
}

#sec-courses h3,
#sec-quality h3,
#sec-fun-learning h3,
#sec-options h3,
#sec-world h3,
#sec-testimonials h3,
#sec-blog h3{
  font-size: clamp(18px, 1.55vw, 22px) !important;
  line-height: 1.3 !important;
}

/* Standard paragraph sizing */
#sec-hero p,
#sec-logo-slider p,
#sec-courses p,
#sec-night p,
#sec-results p,
#sec-stats p,
#sec-quality p,
#sec-fun-learning p,
#sec-options p,
#sec-world p,
#sec-testimonials p,
#sec-faq p,
#sec-blog p,
#sec-contact p{
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* Make the night classes section match the softer site mood */
#sec-night .night-section{
  padding: 68px 0 !important;
  background: #ffffff !important;
}

#sec-night .night-panel{
  min-height: 440px !important;
  background:
    radial-gradient(circle at 14% 14%, rgba(254, 205, 220, 0.28), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(255, 210, 0, 0.14), transparent 20%),
    linear-gradient(135deg, #f7fbff 0%, #eef7ff 52%, #ffffff 100%) !important;
  border: 1px solid rgba(220, 235, 246, 0.95) !important;
  box-shadow: 0 22px 48px rgba(0, 44, 92, 0.08) !important;
}

#sec-night .night-copy h2{
  color: var(--blue) !important;
  margin-bottom: 16px !important;
}

#sec-night .night-copy p{
  color: var(--text) !important;
}

#sec-night .night-cta{
  border-radius: 999px !important;
  background: var(--blue) !important;
  box-shadow: 0 14px 28px rgba(0, 87, 125, 0.16) !important;
}

#sec-night .night-cta:hover{
  background: var(--sky) !important;
}

#sec-night .art-backdrop{
  background: rgba(88, 160, 255, 0.08) !important;
  border: 1px solid rgba(220, 235, 246, 0.95) !important;
}

#sec-night .art-glow{
  background: rgba(88, 160, 255, 0.12) !important;
  filter: blur(22px) !important;
}

#sec-night .mini-stars span{
  color: var(--sky) !important;
  opacity: .55 !important;
}

#sec-night .night-art{
  filter: drop-shadow(0 12px 22px rgba(0, 44, 92, 0.10)) !important;
}

@media (max-width: 768px){
  #sec-logo-slider h2,
  #sec-courses h2,
  #sec-night h2,
  #sec-results h2,
  #sec-stats h2,
  #sec-quality h2,
  #sec-fun-learning h2,
  #sec-options h2,
  #sec-world h2,
  #sec-testimonials h2,
  #sec-faq h2,
  #sec-blog h2,
  #sec-contact h2{
    font-size: 32px !important;
  }

  #sec-hero h1{
    font-size: 34px !important;
  }

  #sec-night .night-panel{
    padding: 34px 24px !important;
  }
}


/* =========================================================
   HOMEPAGE DESKTOP HERO SPACING — FINAL OVERRIDE
   Only affects desktop. Mobile/tablet rules remain unchanged.
   ========================================================= */
@media screen and (min-width: 1051px) {
  html body #sec-hero#sec-hero .hero-page {
    min-height: auto !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 12px !important;
    padding-bottom: 32px !important;
    margin-top: 0 !important;
  }

  html body #sec-hero#sec-hero .hero {
    min-height: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: center !important;
  }

  html body #sec-hero#sec-hero .hero-left,
  html body #sec-hero#sec-hero .hero-right {
    margin-top: 0 !important;
  }
}