/* ===================================================================
   AURORA GENESIS — Premium Tutoring (Final Production Build)
   =================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

   :root {
     /* Genomic / Modern Tech Palette */
     --clr-brand-orange: #FF5A00;
     --clr-brand-orange-light: #FF7A33;
     --clr-brand-blue: #0A66C2;
     --clr-brand-blue-light: #1D8EF5;
     --clr-black: #050505;
     --clr-white: #FFFFFF;
     --clr-bg: #F8F9FA;
     --clr-surface: #FFFFFF;
     
     --clr-gray-100: #F3F4F6;
     --clr-gray-200: #E5E7EB;
     --clr-gray-300: #D1D5DB;
     --clr-gray-500: #6B7280;
     --clr-gray-800: #1F2937;
     --clr-gray-900: #111827;
   
     /* Typography */
     --ff-display: 'Outfit', sans-serif;
     --ff-body: 'Inter', sans-serif;
     --ff-zh: 'Noto Sans SC', sans-serif;
   
     /* Spacing & Layout */
     --max-w: 1400px;
     --max-w-narrow: 1000px;
     --section-pad: 120px;
     
     /* Borders & Shadows */
     --pill-radius: 9999px;
     --card-radius: 24px;
     --blur-bg: blur(20px);
     --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.04);
     --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.08);
     --shadow-glow: 0 0 40px rgba(255, 90, 0, 0.15);
     
     /* Transitions */
     --ease: cubic-bezier(0.16, 1, 0.3, 1);
     --transition-fast: 0.2s var(--ease);
     --transition: 0.5s var(--ease);
   }
   
   /* ===================================================================
      RESET & BASE
      =================================================================== */
   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; font-size: 16px; }
   body {
     font-family: var(--ff-body);
     color: var(--clr-gray-900);
     background: var(--clr-bg);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overflow-x: hidden;
   }
   
   /* Bilingual overrides */
   [data-lang="zh"] body,
   [data-lang="zh"] h1, [data-lang="zh"] h2, [data-lang="zh"] h3,
   [data-lang="zh"] h4, [data-lang="zh"] p, [data-lang="zh"] span,
   [data-lang="zh"] a, [data-lang="zh"] button {
     font-family: var(--ff-zh), var(--ff-body), sans-serif;
   }
   [data-lang="en"] .zh { display: none !important; }
   [data-lang="zh"] .en { display: none !important; }
   
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--ff-display);
     font-weight: 800;
     line-height: 1.1;
     color: var(--clr-black);
     letter-spacing: -0.02em;
   }
   a { color: inherit; text-decoration: none; transition: var(--transition-fast); }
   ul { list-style: none; }
   img { max-width: 100%; height: auto; display: block; }
   
   /* ===================================================================
      LAYOUT UTILITIES
      =================================================================== */
   .container { max-width: var(--max-w); margin: 0 auto; padding: 0 5%; }
   .container-narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 5%; }
   
   .section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
   .section--white { background: var(--clr-white); }
   .section--bg { background: var(--clr-bg); }
   .section--dark { background: var(--clr-black); color: var(--clr-white); }
   .section--dark h2, .section--dark h3 { color: var(--clr-white); }
   
   .section__header { text-align: center; margin-bottom: 80px; }
   .section__header h2 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 24px; }
   .section__header p {
     font-size: 1.25rem;
     color: var(--clr-gray-500);
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.6;
   }
   .section--dark .section__header p { color: var(--clr-gray-300); }
   
   /* Pill shaped accent tag */
   .tag-pill {
     display: inline-flex;
     align-items: center;
     background: var(--clr-black);
     color: var(--clr-white);
     padding: 4px 24px;
     border-radius: var(--pill-radius);
     font-family: var(--ff-display);
     font-size: clamp(1.2rem, 3vw, 2rem);
     font-weight: 700;
     margin: 0 8px;
     vertical-align: middle;
     line-height: 1.3;
   }
   .tag-pill--outline {
     background: transparent;
     color: var(--clr-black);
     border: 2px solid var(--clr-black);
   }
   
   /* ===================================================================
      BUTTONS (Sleek, rounded)
      =================================================================== */
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     padding: 16px 36px;
     border-radius: var(--pill-radius);
     font-family: var(--ff-display);
     font-weight: 600;
     font-size: 1.1rem;
     cursor: pointer;
     border: none;
     transition: var(--transition);
     text-decoration: none;
     position: relative;
     overflow: hidden;
   }
   .btn--primary {
     background: var(--clr-black);
     color: var(--clr-white);
   }
   .btn--primary:hover {
     background: var(--clr-brand-orange);
     transform: translateY(-2px);
     box-shadow: var(--shadow-hover);
   }
   .btn--outline {
     background: transparent;
     color: var(--clr-black);
     border: 2px solid var(--clr-black);
   }
   .btn--outline:hover {
     background: var(--clr-black);
     color: var(--clr-white);
   }
   .btn--outline.active {
     background: var(--clr-black);
     color: var(--clr-white);
   }
   
   /* ===================================================================
      TOP CONTACT BAR
      =================================================================== */
   .top-contact-bar {
     background: var(--clr-black);
     color: var(--clr-white);
     padding: 8px 0;
     font-size: 0.85rem;
     position: fixed;
     top: 0; left: 0; width: 100%;
     z-index: 1001;
   }
   .top-contact-bar__inner {
     display: flex; justify-content: space-between; align-items: center;
   }
   .top-contact-bar__left {
     display: flex; align-items: center; gap: 6px;
   }
   .top-contact-bar__left i { color: var(--clr-brand-orange); }
   .top-contact-bar a { color: var(--clr-white); display: inline-flex; align-items: center; gap: 6px; }
   .top-contact-bar a:hover { color: var(--clr-brand-orange); }
   .top-contact-bar__right {
     display: flex; gap: 20px; align-items: center;
   }
   .wechat-badge { display: inline-flex; align-items: center; gap: 6px; color: #07c160; }

   /* ===================================================================
      NAVIGATION & BILINGUAL TOGGLE
      =================================================================== */
   .navbar {
     position: fixed;
     top: 36px; left: 0; width: 100%;
     z-index: 1000;
     padding: 20px 0;
     transition: var(--transition);
     background: rgba(248, 249, 250, 0.85);
     backdrop-filter: var(--blur-bg);
     -webkit-backdrop-filter: var(--blur-bg);
   }
   .navbar.scrolled {
     padding: 12px 0;
     background: rgba(255, 255, 255, 0.97);
     box-shadow: 0 2px 20px rgba(0,0,0,0.04);
   }
   .nav__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   /* Logo overrides */
   .logo {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     font-family: var(--ff-display);
     font-weight: 800;
     font-size: 1.2rem;
     color: var(--clr-black);
   }
   .logo img {
     height: 60px;
     width: auto;
     transition: transform var(--transition-fast);
   }
   .logo:hover img {
     transform: scale(1.05);
   }
   
   /* Nav Links */
   .nav__links {
     display: flex;
     align-items: center;
     gap: 32px;
   }
   .nav__links a {
     font-weight: 500;
     font-size: 1rem;
     color: var(--clr-gray-500);
     position: relative;
     padding: 4px 0;
   }
   .nav__links a::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 50%;
     width: 0;
     height: 2px;
     background: var(--clr-brand-orange);
     transition: var(--transition);
     transform: translateX(-50%);
   }
   .nav__links a:hover::after,
   .nav__links a.active::after {
     width: 100%;
   }
   .nav__links a:hover, .nav__links a.active {
     color: var(--clr-black);
   }
   
   /* Modern Bilingual Toggle */
   .lang-switcher {
     background: var(--clr-gray-100);
     border-radius: var(--pill-radius);
     padding: 4px;
     display: flex;
     align-items: center;
     border: 1px solid var(--clr-gray-200);
     cursor: pointer;
   }
   .lang-switcher button {
     background: none; border: none;
     padding: 8px 16px;
     border-radius: var(--pill-radius);
     font-family: var(--ff-body);
     font-weight: 600;
     font-size: 0.9rem;
     color: var(--clr-gray-500);
     cursor: pointer;
     transition: var(--transition-fast);
   }
   .lang-switcher button.active {
     background: var(--clr-white);
     color: var(--clr-black);
     box-shadow: var(--shadow-soft);
   }
   
   /* Mobile Nav btn */
   .nav__mobile-btn {
     display: none;
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
     color: var(--clr-black);
     padding: 8px;
   }

   /* Mobile menu (CSS class driven) */
   .nav__links.mobile-open {
     display: flex !important;
     flex-direction: column;
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: rgba(255,255,255,0.98);
     backdrop-filter: var(--blur-bg);
     -webkit-backdrop-filter: var(--blur-bg);
     padding: 24px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.1);
     gap: 20px;
     border-radius: 0 0 var(--card-radius) var(--card-radius);
     animation: slideDown 0.3s var(--ease);
   }
   @keyframes slideDown {
     from { opacity: 0; transform: translateY(-10px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   /* ===================================================================
      HERO SECTION (Genomic Style)
      =================================================================== */
   .hero {
     min-height: 100vh;
     padding: 180px 0 100px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     text-align: center;
   }
   
   /* Dynamic abstract mesh backgrounds using CSS */
   .hero__mesh {
     position: absolute;
     top: 0; left: 0; width: 100%; height: 100%;
     z-index: 0;
     overflow: hidden;
     background: radial-gradient(circle at 15% 50%, rgba(10, 102, 194, 0.1), transparent 40%),
                 radial-gradient(circle at 85% 30%, rgba(255, 90, 0, 0.08), transparent 40%);
     filter: blur(40px);
   }
   .hero__mesh-orb {
     position: absolute;
     width: 50vw; height: 50vw;
     border-radius: 50%;
     background: linear-gradient(135deg, rgba(10,102,194,0.15) 0%, rgba(255,90,0,0.1) 100%);
     top: -10vw; left: 25vw;
     animation: float 20s ease-in-out infinite alternate;
     z-index: -1;
   }
   @keyframes float {
     0% { transform: translateY(0) scale(1) rotate(0deg); }
     100% { transform: translateY(50px) scale(1.05) rotate(5deg); }
   }
   
   .hero__content {
     position: relative;
     z-index: 2;
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0 5%;
   }
   
   .hero h1 {
     font-size: clamp(3rem, 7vw, 6.5rem);
     line-height: 1.05;
     margin-bottom: 32px;
   }
   .hero p {
     font-size: clamp(1.1rem, 2vw, 1.4rem);
     color: var(--clr-gray-500);
     max-width: 800px;
     line-height: 1.6;
     margin-bottom: 48px;
   }
   
   .hero__actions {
     position: relative;
     z-index: 10;
     margin-bottom: 30px;
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     justify-content: center;
   }
   
   /* Staten Island badge floating */
   .location-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255,255,255,0.8);
     backdrop-filter: var(--blur-bg);
     -webkit-backdrop-filter: var(--blur-bg);
     padding: 8px 20px;
     border-radius: var(--pill-radius);
     font-weight: 600;
     color: var(--clr-gray-800);
     border: 1px solid var(--clr-gray-200);
     margin-bottom: 32px;
     box-shadow: var(--shadow-soft);
     animation: pulse-badge 3s ease-in-out infinite;
   }
   @keyframes pulse-badge {
     0%, 100% { box-shadow: var(--shadow-soft); }
     50% { box-shadow: 0 10px 40px rgba(255, 90, 0, 0.12); }
   }
   .location-badge i { color: var(--clr-brand-orange); }
   
   /* Floating 3D graphic under text */
   .hero__graphic {
     margin-top: -20px;
     position: relative;
     z-index: 5;
     width: 100%;
     max-width: 900px;
     perspective: 1000px;
   }
   .hero__graphic img {
     width: 100%;
     border-radius: 32px;
     box-shadow: 0 40px 100px rgba(0,0,0,0.15);
     transform: rotateX(5deg) scale(0.95);
     transition: transform 1s var(--ease);
   }
   .hero__graphic:hover img {
     transform: rotateX(0) scale(1);
   }
   
   /* ===================================================================
      CLASSES GRID (Ultra modern feature cards)
      =================================================================== */
   .classes-flex {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 32px;
   }
   .class-feature {
     background: var(--clr-white);
     border: 1px solid var(--clr-gray-200);
     border-radius: var(--card-radius);
     padding: 48px;
     transition: var(--transition);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     box-shadow: var(--shadow-soft);
     position: relative;
     overflow: hidden;
   }
   .class-feature:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-hover);
     border-color: transparent;
   }
   /* Dynamic hover gradient border effect */
   .class-feature::before {
     content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
     border-radius: inherit; padding: 2px;
     background: linear-gradient(135deg, var(--clr-brand-blue), var(--clr-brand-orange));
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor; mask-composite: exclude;
     opacity: 0; transition: var(--transition);
     pointer-events: none;
   }
   .class-feature:hover::before { opacity: 1; }
   
   .class-feature__icon {
     width: 64px; height: 64px;
     background: var(--clr-gray-100);
     border-radius: 20px;
     display: flex; align-items: center; justify-content: center;
     font-size: 1.8rem; color: var(--clr-black);
     margin-bottom: 24px;
     transition: var(--transition);
   }
   .class-feature:hover .class-feature__icon {
     background: var(--clr-black); color: var(--clr-white);
   }
   
   .class-feature h3 { font-size: 1.8rem; margin-bottom: 12px; }
   .class-feature p { color: var(--clr-gray-500); font-size: 1.05rem; margin-bottom: 24px; flex-grow: 1; }
   
   .class-feature__tags {
     display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto;
   }
   .class-feature__tags span {
     background: var(--clr-bg);
     color: var(--clr-gray-800);
     padding: 6px 14px;
     border-radius: var(--pill-radius);
     font-size: 0.85rem; font-weight: 500;
   }
   
   /* ===================================================================
      INFO BANNER (e.g. Math Kangaroo / Staten Island Location)
      =================================================================== */
   .info-banner {
     background: var(--clr-black);
     border-radius: 32px;
     padding: 80px;
     color: var(--clr-white);
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
     position: relative;
     overflow: hidden;
   }
   .info-banner::after {
     content:''; position: absolute; width: 40vw; height: 40vw;
     background: radial-gradient(circle, rgba(255,107,0,0.2), transparent 70%);
     border-radius: 50%; top: -10vw; right: -10vw; filter: blur(40px);
   }
   .info-banner h2 { color: var(--clr-white); margin-bottom: 24px; font-size: clamp(2.5rem, 4vw, 3.5rem); }
   .info-banner p { color: var(--clr-gray-300); font-size: 1.15rem; margin-bottom: 32px; max-width: 500px; }
   
   .banner-stats {
     display: flex; gap: 40px; margin-bottom: 40px;
   }
   .banner-stats div h4 { font-size: 2.5rem; color: var(--clr-white); margin-bottom: 4px; }
   .banner-stats div span { color: var(--clr-gray-500); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

   /* ===================================================================
      TESTIMONIALS (Social Proof)
      =================================================================== */
   .testimonials-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
     gap: 32px;
   }
   .testimonial-card {
     background: var(--clr-white);
     border: 1px solid var(--clr-gray-200);
     border-radius: var(--card-radius);
     padding: 40px;
     box-shadow: var(--shadow-soft);
     transition: var(--transition);
     position: relative;
   }
   .testimonial-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow-hover);
   }
   .testimonial-card__quote {
     font-size: 3rem;
     color: var(--clr-brand-orange);
     line-height: 1;
     margin-bottom: 16px;
     font-family: Georgia, serif;
   }
   .testimonial-card p {
     font-size: 1.1rem;
     color: var(--clr-gray-800);
     line-height: 1.7;
     margin-bottom: 24px;
     font-style: italic;
   }
   .testimonial-card__author {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .testimonial-card__avatar {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--clr-brand-blue), var(--clr-brand-orange));
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: 700;
     font-family: var(--ff-display);
     font-size: 1.1rem;
   }
   .testimonial-card__name {
     font-weight: 700;
     font-size: 1rem;
     color: var(--clr-black);
   }
   .testimonial-card__role {
     font-size: 0.85rem;
     color: var(--clr-gray-500);
   }
   .testimonial-stars {
     color: #F59E0B;
     margin-bottom: 16px;
     font-size: 1.1rem;
     letter-spacing: 2px;
   }
   
   /* ===================================================================
      WHY US SECTION
      =================================================================== */
   .why-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 32px;
   }
   .why-card {
     text-align: center;
     padding: 48px 32px;
     border-radius: var(--card-radius);
     background: rgba(255,255,255,0.04);
     border: 1px solid rgba(255,255,255,0.08);
     transition: var(--transition);
   }
   .why-card:hover {
     background: rgba(255,255,255,0.08);
     transform: translateY(-4px);
   }
   .why-card__icon {
     width: 80px;
     height: 80px;
     border-radius: 24px;
     background: linear-gradient(135deg, var(--clr-brand-orange), var(--clr-brand-blue));
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 24px;
     font-size: 2rem;
     color: white;
   }
   .why-card h3 {
     color: var(--clr-white);
     font-size: 1.5rem;
     margin-bottom: 12px;
   }
   .why-card p {
     color: var(--clr-gray-300);
     font-size: 1rem;
     line-height: 1.6;
   }

   /* ===================================================================
      FLOATING CTA
      =================================================================== */
   .floating-cta {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 999;
     display: flex;
     flex-direction: column;
     gap: 12px;
     align-items: flex-end;
   }
   .floating-cta__btn {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     color: white;
     box-shadow: 0 8px 30px rgba(0,0,0,0.2);
     transition: var(--transition);
     text-decoration: none;
   }
   .floating-cta__btn:hover {
     transform: translateY(-4px) scale(1.05);
     box-shadow: 0 12px 40px rgba(0,0,0,0.25);
   }
   .floating-cta__btn--phone {
     background: linear-gradient(135deg, var(--clr-brand-orange), #e04800);
     animation: phone-ring 2s ease-in-out infinite;
   }
   @keyframes phone-ring {
     0%, 100% { transform: rotate(0deg); }
     10% { transform: rotate(-8deg); }
     20% { transform: rotate(8deg); }
     30% { transform: rotate(-4deg); }
     40% { transform: rotate(4deg); }
     50%, 100% { transform: rotate(0deg); }
   }
   .floating-cta__btn--phone:hover {
     animation: none;
   }
   .floating-cta__btn--top {
     background: var(--clr-black);
     opacity: 0;
     pointer-events: none;
     transition: var(--transition);
   }
   .floating-cta__btn--top.visible {
     opacity: 1;
     pointer-events: all;
   }
   .floating-cta__btn--lang {
     background: linear-gradient(135deg, var(--clr-brand-blue), #1a3a6b);
     display: none;
   }
   .floating-cta__btn--lang .floating-lang-label {
     font-family: var(--ff-display);
     font-weight: 700;
     font-size: 0.85rem;
     line-height: 1;
   }
   
   /* ===================================================================
      FOOTER
      =================================================================== */
   .footer {
     background: var(--clr-white);
     padding: 100px 0 40px;
     border-top: 1px solid var(--clr-gray-200);
   }
   .footer__grid {
     display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 60px;
     margin-bottom: 80px;
   }
   .footer__col h4 { font-size: 1.2rem; margin-bottom: 24px; }
   .footer__col ul { display: flex; flex-direction: column; gap: 12px; }
   .footer__col li { display: flex; align-items: center; gap: 8px; color: var(--clr-gray-500); font-size: 0.95rem; }
   .footer__col a { color: var(--clr-gray-500); }
   .footer__col a:hover { color: var(--clr-brand-orange); }
   .footer__col li i { width: 18px; color: var(--clr-brand-orange); flex-shrink: 0; }
   
   .footer__logo {
     font-family: var(--ff-display); font-weight: 800; font-size: 1.8rem; margin-bottom: 24px;
   }
   .footer__address {
     color: var(--clr-gray-500); font-size: 1rem; line-height: 1.8; margin-bottom: 24px;
   }
   
   .footer__bottom {
     padding-top: 40px; border-top: 1px solid var(--clr-gray-200);
     display: flex; justify-content: space-between; align-items: center; color: var(--clr-gray-500); font-size: 0.9rem;
   }

   /* ===================================================================
      ANIMATIONS (Intersection Observer)
      =================================================================== */
   .reveal { opacity: 0; transform: translateY(30px); transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
   .reveal.active { opacity: 1; transform: translateY(0); }
   
   /* Stagger animation for grid children */
   .stagger-reveal > * {
     opacity: 0;
     transform: translateY(20px);
     transition: 0.6s var(--ease);
   }
   .stagger-reveal.active > *:nth-child(1) { transition-delay: 0s; }
   .stagger-reveal.active > *:nth-child(2) { transition-delay: 0.1s; }
   .stagger-reveal.active > *:nth-child(3) { transition-delay: 0.2s; }
   .stagger-reveal.active > *:nth-child(4) { transition-delay: 0.3s; }
   .stagger-reveal.active > *:nth-child(5) { transition-delay: 0.4s; }
   .stagger-reveal.active > *:nth-child(6) { transition-delay: 0.5s; }
   .stagger-reveal.active > *:nth-child(7) { transition-delay: 0.6s; }
   .stagger-reveal.active > *:nth-child(8) { transition-delay: 0.7s; }
   .stagger-reveal.active > * {
     opacity: 1;
     transform: translateY(0);
   }

   /* ===================================================================
      MOBILE RESPONSIVE
      =================================================================== */
   @media (max-width: 900px) {
     .top-contact-bar__inner { flex-direction: column; gap: 4px; text-align: center; }
     .top-contact-bar__right { flex-direction: column; gap: 4px; }
     .navbar { top: 120px; }

     .hero__grid, .info-banner { grid-template-columns: 1fr; }
     .hero { padding: 220px 0 80px; min-height: auto; }
     .hero__graphic { margin-top: 20px; }
     .info-banner { padding: 40px; }
     .banner-stats { flex-direction: column; gap: 20px; }
     .footer__grid { grid-template-columns: 1fr; gap: 40px; }
     .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
     .nav__links { display: none; }
     .lang-switcher { display: none; }
     .nav__mobile-btn { display: block; }
     .section { padding: 80px 0; }
     .section__header { margin-bottom: 48px; }
     .section__header h2 { font-size: 2.5rem; }
     .tag-pill { margin-bottom: 12px; }
     .classes-flex { grid-template-columns: 1fr; }
     .testimonials-grid { grid-template-columns: 1fr; }
     .why-grid { grid-template-columns: 1fr; }
     .floating-cta { bottom: 16px; right: 16px; }
     .floating-cta__btn { width: 52px; height: 52px; font-size: 1.2rem; }
     .floating-cta__btn--lang { display: flex; }
     .gallery-header { padding: 220px 0 60px; }
     .section[style*="padding-top: 160px"] { padding-top: 220px !important; }
   }

   /* ===================================================================
      DETAILED CLASS CARDS (For classes.html)
      =================================================================== */
   .class-card {
     background: var(--clr-white);
     border-radius: var(--card-radius);
     overflow: hidden;
     border: 1px solid var(--clr-gray-200);
     margin-bottom: 32px;
     box-shadow: var(--shadow-soft);
     transition: var(--transition);
   }
   .class-card:hover {
     box-shadow: var(--shadow-hover);
     transform: translateY(-4px);
   }
   .class-card__header {
     background: var(--clr-black);
     color: var(--clr-white);
     padding: 24px 40px;
     display: flex; align-items: center; justify-content: space-between;
   }
   .class-card__header h3 { color: var(--clr-white); font-size: 1.6rem; margin: 0; display: flex; align-items: center; }
   .class-card__badge {
     background: var(--clr-brand-orange);
     color: var(--clr-white);
     padding: 6px 18px; border-radius: var(--pill-radius);
     font-size: 0.85rem; font-family: var(--ff-display); font-weight: 700;
     white-space: nowrap;
   }
   .class-card__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
   
   .class-card__col { padding: 32px 40px; }
   .class-card__col--zh { background: var(--clr-gray-100); border-left: 2px solid var(--clr-gray-200); }
   .class-card__col h4 {
     font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px;
     color: var(--clr-gray-500); margin-bottom: 20px;
   }
   .class-card__detail {
     display: flex; align-items: flex-start; gap: 12px;
     margin-bottom: 16px; font-size: 1rem; color: var(--clr-gray-800);
   }
   .class-card__detail i { color: var(--clr-brand-blue); margin-top: 4px; flex-shrink: 0; width: 20px; font-size: 1.1rem; }
   
   .class-card__flyer { padding: 24px 40px; border-top: 1px solid var(--clr-gray-200); display: flex; gap: 24px; flex-wrap: wrap; }
   .class-card__flyer img {
     max-height: 250px; border-radius: 12px; box-shadow: var(--shadow-soft);
     cursor: pointer; transition: var(--transition);
   }
   .class-card__flyer img:hover { transform: scale(1.02); }
   
   .class-card__actions { padding: 20px 40px; border-top: 1px solid var(--clr-gray-200); display: flex; gap: 16px; }

   @media (max-width: 900px) {
     .class-card__body { grid-template-columns: 1fr; }
     .class-card__col--zh { border-left: none; border-top: 2px solid var(--clr-gray-200); }
     .class-card__header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 24px; }
     .class-card__col { padding: 24px; }
     .class-card__flyer { padding: 16px 24px; }
     .class-card__actions { padding: 16px 24px; }
   }

   /* ===================================================================
      GALLERY PAGE STYLES
      =================================================================== */
   .gallery-header {
     padding: 160px 0 60px;
     text-align: center;
     background: var(--clr-white);
   }
   .gallery-header h1 {
     font-size: clamp(2.5rem, 5vw, 4rem);
     margin-bottom: 24px;
   }
   .gallery-header p {
     font-size: 1.25rem;
     color: var(--clr-gray-500);
     max-width: 700px;
     margin: 0 auto;
   }

   .gallery__filters {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     justify-content: center;
     margin-bottom: 60px;
   }

   .gallery__grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 24px;
   }
   .gallery__item {
     border-radius: var(--card-radius);
     overflow: hidden;
     position: relative;
     cursor: pointer;
     aspect-ratio: 4/3;
     border: 1px solid var(--clr-gray-200);
     background: var(--clr-gray-100);
     box-shadow: var(--shadow-soft);
     transition: var(--transition);
   }
   .gallery__item img {
     width: 100%; height: 100%; object-fit: cover;
     transition: transform 0.6s var(--ease);
   }
   .gallery__item:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
   .gallery__item:hover img { transform: scale(1.05); }

   .gallery__item-overlay {
     position: absolute; bottom: 0; left: 0; width: 100%;
     padding: 24px;
     background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
     color: white; font-family: var(--ff-body); font-weight: 500;
     opacity: 0; transition: var(--transition);
   }
   .gallery__item:hover .gallery__item-overlay { opacity: 1; }

   /* Lightbox */
   .lightbox {
     position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     background: rgba(0,0,0,0.95); z-index: 10001;
     display: none; align-items: center; justify-content: center;
   }
   .lightbox.active { display: flex; }
   .lightbox img { max-width: 90%; max-height: 90vh; border-radius: 12px; }
   .lightbox__close {
     position: absolute; top: 24px; right: 40px;
     color: white; font-size: 3rem; cursor: pointer; transition: var(--transition-fast);
   }
   .lightbox__close:hover { color: var(--clr-brand-orange); transform: scale(1.1); }

   /* Gallery loading state */
   .gallery__loading {
     text-align: center;
     padding: 60px;
     color: var(--clr-gray-500);
     font-size: 1.1rem;
   }
   .gallery__loading-spinner {
     width: 40px;
     height: 40px;
     border: 3px solid var(--clr-gray-200);
     border-top-color: var(--clr-brand-orange);
     border-radius: 50%;
     animation: spinner 0.8s linear infinite;
     margin: 0 auto 16px;
   }
   @keyframes spinner {
     to { transform: rotate(360deg); }
   }

   @media (max-width: 600px) {
     .gallery__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
     .gallery__item { border-radius: 12px; }
   }