/* Home page styles (moved from index.html). Header/footer styles live in layout.css. */
        :root {
            --primary: #ff5722;      /* Vibrant Orange */
            --secondary: #0284c7;    /* Deep Sky Blue */
            --kids-yellow: #fec006;  /* Sunny Playful Yellow */
            --tech-purple: #6366f1;  /* Futuristic Indigo */
            --success: #16a34a;      /* Growth Green */
            --dark: #0f172a;         /* Dark Corporate Slate */
            --light: #f8fafc;
            --surface: #ffffff;
            --border: #cbd5e1;
            --font-round: 'Fredoka', sans-serif;
            --font-sans: 'Plus Jakarta Sans', sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: var(--font-sans);
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.5;
            -webkit-text-size-adjust: 100%;
        }

        h1, h2, h3, h4 {
            font-family: var(--font-round);
        }

        /* --- TOP CONTACT BAR --- */
        .top-contact-bar {
            background: var(--dark);
            color: #cbd5e1;
            padding: 10px 4%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 15px;
            font-weight: 500;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            flex-wrap: wrap;
            gap: 10px;
        }

        .top-left-info {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }

        .top-left-info a {
            color: #cbd5e1;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s;
            white-space: nowrap;
        }

        .top-left-info a:hover {
            color: var(--kids-yellow);
        }

        .top-left-info i {
            color: var(--primary);
        }

        .top-social-links a {
            color: #cbd5e1;
            font-size: 16px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s;
            padding-left:20px
        }

        .top-social-links a:hover {
            color: #1877f2;
        }


        .brand-container {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .brand-logo {
            width: 90px;
            height: 90px;
            overflow: hidden;
            border-radius: 17%;

        }
        
        .brand-logo img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .brand-text h1 {
            font-size: 24px;
            font-weight: 700;
            color: var(--dark);
            line-height: 1.1;
            letter-spacing: -0.5px;
        }

        .brand-text p {
            font-size: 14px;
            color: var(--secondary);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 4px;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 24px;
            list-style: none;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 700;
            font-size: 16px;
            transition: color 0.2s;
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .btn {
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
            transition: transform 0.2s, box-shadow 0.2s;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--kids-yellow) 100%);
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.15);
            box-shadow: 0 4px 12px rgba(255, 87, 34, 0.2);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(255, 87, 34, 0.4);
        }

        /* --- HERO BANNER LAYER --- */
        .hero-banner-container {
            width: 100%;
            background: #0f172a;
            position: relative;
            overflow: hidden;
            border-bottom: 5px solid var(--secondary);
        }

        .hero-banner-image {
            width: 100%;
            display: block;
            max-height: 540px;
            object-fit: cover;
        }

        .cta-strip {
            background: linear-gradient(90deg, var(--secondary) 0%, var(--tech-purple) 100%);
            color: white;
            padding: 14px 4%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .cta-strip h3 {
            font-size: 16px;
            font-weight: 600;
        }

        /* --- CONTENT SECTIONS --- */
        section {
            padding: 40px 4%;
        }

        /* COMPACT HIGH-IMPACT ECOSYSTEM BANNER */
        .ecosystem-hero-card {
            background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
            border-radius: 24px;
            border: 2px solid #99f6e4;
            padding: 40px 24px;
            box-shadow: 0 15px 35px rgba(2, 132, 199, 0.05);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        .corporate-header-giant {
            position: relative;
            z-index: 2;
        }

        .corporate-header-giant .tagline {
            color: var(--primary);
            font-weight: 800;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 12px;
            display: block;
        }

        .corporate-header-giant h2 {
            font-size: 36px;
            color: var(--dark);
            line-height: 1.2;
            margin-bottom: 16px;
            letter-spacing: -1px;
            background: linear-gradient(135deg, var(--dark) 30%, var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .corporate-header-giant p {
            font-size: 16px;
            color: #475569;
            max-width: 950px;
            line-height: 1.6;
        }

        /* --- STRETCHED ABACUS INSIGHT SECTION --- */
        .abacus-showcase-section {
            background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%);
            color: white;
            border-radius: 24px;
            padding: 40px 24px;
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
            margin-bottom: 20px;
        }

        .abacus-showcase-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 40px;
            align-items: center;
        }

        .abacus-text-block h2 {
            font-size: 32px;
            color: var(--kids-yellow);
            margin-bottom: 16px;
            line-height: 1.2;
        }

        .abacus-text-block p {
            font-size: 16px;
            color: #cbd5e1;
            margin-bottom: 24px;
            line-height: 1.6;
        }

        .abacus-tool-visual-box {
            background: rgba(255, 255, 255, 0.05);
            border: 2px dashed rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 24px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 280px;
            position: relative;
            width: 100%;
        }

        .abacus-vector-tool {
            width: 100%;
            max-width: 300px;
            border: 6px solid #b45309;
            background: #fef3c7;
            border-radius: 8px;
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            box-shadow: 0 12px 24px rgba(0,0,0,0.3);
        }

        .abacus-divider-beam {
            height: 5px;
            background: #b45309;
            width: 100%;
        }

        .abacus-deck {
            display: flex;
            justify-content: space-around;
            width: 100%;
        }

        .abacus-rod {
            width: 4px;
            background: #d97706;
            height: 45px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .upper-deck .abacus-rod { height: 28px; }

        .abacus-bead {
            width: 18px;
            height: 9px;
            background: linear-gradient(to bottom, #dc2626, #991b1b);
            border-radius: 3px;
            position: absolute;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .bead-active-up { top: 0; }
        .bead-active-down { bottom: 0; }

        .abacus-caption {
            margin-top: 16px;
            font-size: 16px;
            font-weight: 600;
            color: var(--kids-yellow);
        }

        /* --- INTERACTIVE REGISTRATION MATRIX --- */
        .interactive-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .registration-panel-colorful {
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
            border-top: 5px solid var(--primary);
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-group label {
            font-size: 14px;
            font-weight: 700;
            color: var(--dark);
        }

        .form-group input, .form-group select, .form-group textarea {
            padding: 10px 14px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 16px;
            background: #f8fafc;
            outline: none;
            width: 100%;
        }

        .info-panel-colorful {
            background: #0f172a;
            color: white;
            border-radius: 16px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 20px;
        }

        .info-header h3 {
            font-size: 20px;
            color: var(--kids-yellow);
            margin-bottom: 12px;
        }

        .feature-strip {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
            font-size: 16px;
        }

        .feature-strip i {
            color: var(--primary);
            font-size: 16px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .section-header-colorful {
            border-left: 6px solid var(--primary);
            padding-left: 16px;
            margin-bottom: 24px;
        }

        .section-header-colorful h2 {
            font-size: 24px;
            color: var(--dark);
        }

        .section-header-colorful p {
            color: var(--secondary);
            font-weight: 600;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }


        /* --- HOME PAGE PROGRAM DETAILS SHOWCASE --- */
        .program-details-home {
            padding: 52px 4% 45px;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 8% 15%, rgba(254,192,6,.12), transparent 28%),
                radial-gradient(circle at 92% 20%, rgba(99,102,241,.12), transparent 30%),
                #f8fafc;
        }
        .program-home-header {
            max-width: 900px;
            margin: 0 auto 30px;
            text-align: center;
        }
        .program-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--primary);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        .program-home-header h2 {
            font-size: 34px;
            line-height: 1.15;
            margin-bottom: 10px;
            background: linear-gradient(135deg, var(--dark), var(--tech-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .program-home-header p {
            color: #64748b;
            max-width: 760px;
            margin: auto;
            font-size: 15px;
            line-height: 1.65;
        }
        .program-visual-grid {
            max-width: 1250px;
            margin: auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        .program-feature-card {
            position: relative;
            background: #fff;
            border-radius: 26px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            box-shadow: 0 16px 42px rgba(15,23,42,.08);
            transition: transform .3s ease, box-shadow .3s ease;
        }
        .program-feature-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 24px 55px rgba(15,23,42,.13);
        }
        .program-art {
            min-height: 230px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg,#fff7ed,#ffedd5 55%,#fef3c7);
            overflow: hidden;
        }
        .program-art::before,
        .program-art::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.8);
        }
        .program-art::before { width: 250px; height: 250px; }
        .program-art::after { width: 360px; height: 360px; }
        .english-art {
            background: linear-gradient(135deg,#eff6ff,#e0e7ff 55%,#ede9fe);
        }
        .art-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 3;
            background: rgba(15,23,42,.88);
            color: #fff;
            padding: 7px 11px;
            border-radius: 30px;
            font-size: 11px;
            font-weight: 800;
            box-shadow: 0 8px 18px rgba(15,23,42,.15);
        }
        .art-badge i { color: var(--kids-yellow); margin-right: 4px; }

        /* Pictorial abacus */
        .mini-abacus {
            position: relative;
            z-index: 2;
            width: 270px;
            height: 150px;
            padding: 13px 18px;
            border: 8px solid #92400e;
            border-radius: 15px;
            background: #fef3c7;
            box-shadow: 0 18px 30px rgba(120,53,15,.22);
            display: flex;
            justify-content: space-around;
        }
        .mini-abacus::before {
            content: "";
            position: absolute;
            left: 10px; right: 10px; top: 68px;
            height: 6px;
            background: #92400e;
            border-radius: 4px;
        }
        .mini-rod {
            width: 5px;
            height: 100%;
            background: #d97706;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            z-index: 2;
        }
        .mini-rod span {
            width: 28px;
            height: 15px;
            border-radius: 5px;
            background: linear-gradient(180deg,#ef4444,#991b1b);
            box-shadow: 0 3px 5px rgba(0,0,0,.2);
        }
        .mini-rod span.active { transform: translateY(2px); background: linear-gradient(180deg,#f59e0b,#ea580c); }

        /* Pictorial English book */
        .book-visual {
            width: 270px;
            height: 155px;
            position: relative;
            z-index: 2;
        }
        .book-cover {
            position: absolute;
            left: 55px;
            top: 18px;
            width: 165px;
            height: 120px;
            border-radius: 10px 15px 15px 10px;
            background: linear-gradient(135deg,#4f46e5,#2563eb);
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            box-shadow: 12px 14px 0 #c7d2fe, 0 20px 30px rgba(37,99,235,.25);
            transform: rotate(-4deg);
        }
        .book-cover i { font-size: 34px; }
        .book-cover b { font-size: 16px; letter-spacing: 1px; }
        .book-cover small { font-size: 8px; letter-spacing: 1px; opacity: .85; }
        .floating-letter, .floating-word {
            position: absolute;
            z-index: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: 800;
            box-shadow: 0 8px 18px rgba(15,23,42,.12);
        }
        .floating-letter { width: 39px; height: 39px; background: #fff; color: var(--tech-purple); font-size: 17px; }
        .l1 { left: 12px; top: 18px; }
        .l2 { right: 10px; top: 42px; color: var(--secondary); }
        .l3 { left: 18px; bottom: 10px; color: var(--primary); }
        .floating-word {
            right: 2px; bottom: 8px; width: 70px; height: 35px;
            border-radius: 20px; background: #fff; color: var(--success); font-size: 11px;
        }
        .program-feature-content { padding: 24px; }
        .program-tag {
            display: inline-block;
            color: var(--primary);
            background: #fff7ed;
            border: 1px solid #fed7aa;
            padding: 5px 9px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 1px;
        }
        .program-tag.blue {
            color: var(--tech-purple);
            background: #eef2ff;
            border-color: #c7d2fe;
        }
        .program-feature-content h3 {
            margin: 9px 0 7px;
            color: var(--dark);
            font-size: 23px;
        }
        .program-feature-content p {
            color: #64748b;
            font-size: 13px;
            line-height: 1.6;
            min-height: 62px;
        }
        .level-progress {
            margin: 17px 0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
            color: #475569;
            font-size: 10px;
            font-weight: 800;
        }
        .level-progress span {
            padding: 6px 9px;
            border-radius: 20px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }
        .level-progress i { color: var(--primary); font-size: 9px; }
        .english-mini-pills {
            margin: 17px 0;
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
        }
        .english-mini-pills span {
            padding: 7px 9px;
            border-radius: 20px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #475569;
            font-size: 10px;
            font-weight: 800;
        }
        .english-mini-pills i { color: var(--tech-purple); margin-right: 3px; }
        .program-detail-btn {
            width: 100%;
            border: 0;
            border-radius: 13px;
            padding: 12px 16px;
            color: #fff;
            font-weight: 800;
            cursor: pointer;
            font-size: 13px;
            transition: transform .2s, box-shadow .2s;
        }
        .program-detail-btn:hover { transform: translateY(-2px); }
        .program-detail-btn.orange {
            background: linear-gradient(135deg,var(--primary),#f59e0b);
            box-shadow: 0 8px 18px rgba(255,87,34,.2);
        }
        .program-detail-btn.blue-btn {
            background: linear-gradient(135deg,var(--secondary),var(--tech-purple));
            box-shadow: 0 8px 18px rgba(99,102,241,.2);
        }
        .program-detail-btn i { margin-left: 7px; }
        .program-roadmap {
            max-width: 1250px;
            margin: 24px auto 0;
            background: #0f172a;
            border-radius: 20px;
            padding: 18px 22px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 24px;
            box-shadow: 0 15px 35px rgba(15,23,42,.13);
        }
        .roadmap-title {
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: 230px;
        }
        .roadmap-title > i { color: var(--kids-yellow); font-size: 22px; }
        .roadmap-title strong { display:block; font-size: 13px; }
        .roadmap-title small { color:#94a3b8; font-size:10px; }
        .roadmap-steps {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .roadmap-steps div { text-align:center; }
        .roadmap-steps span {
            display:flex; align-items:center; justify-content:center;
            width:30px; height:30px; margin:0 auto 4px;
            border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--kids-yellow));
            color:#fff; font-size:10px; font-weight:900;
        }
        .roadmap-steps b { display:block; font-size:11px; }
        .roadmap-steps small { color:#94a3b8; font-size:9px; }
        .roadmap-steps > i { color:#64748b; font-size:10px; }

        @media (max-width: 900px) {
            .program-visual-grid { grid-template-columns: 1fr; max-width: 650px; }
            .program-roadmap { flex-direction: column; align-items: stretch; }
            .roadmap-title { justify-content:center; text-align:center; }
        }
        @media (max-width: 600px) {
            .program-details-home { padding: 38px 4% 32px; }
            .program-home-header h2 { font-size: 27px; }
            .program-home-header p { font-size: 13px; }
            .program-art { min-height: 195px; }
            .mini-abacus { transform: scale(.82); }
            .book-visual { transform: scale(.82); }
            .program-feature-content { padding: 19px 16px; }
            .program-feature-content h3 { font-size: 20px; }
            .program-feature-content p { min-height: auto; }
            .roadmap-steps { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
            .roadmap-steps > i { display:none; }
        }

        /* --- DETAILED PAGE MODAL LAYOUT --- */
        .abacus-detail-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(10px);
            z-index: 2000;
            display: none;
            justify-content: center;
            align-items: flex-start;
            overflow-y: auto;
            padding: 20px 10px;
        }

        .detail-page-container {
            background: var(--surface);
            max-width: 1000px;
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            border-top: 8px solid var(--primary);
            padding: 30px 20px;
            position: relative;
        }

        .close-overlay-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 36px;
            height: 36px;
            background: var(--light);
            border: 1px solid var(--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            color: var(--dark);
            transition: all 0.2s;
            z-index: 10;
        }
        .close-overlay-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .detail-grid-two-col {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 24px;
            margin-top: 24px;
        }

        .detail-card-sub {
            background: var(--light);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px;
            margin-bottom: 20px;
        }


        /* --- PREMIUM CURRICULUM PORTFOLIO --- */
        .curriculum-heading {
            padding: 4px 0 20px;
        }
        .curriculum-kicker {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--primary);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 6px;
        }
        .curriculum-heading h3 {
            border: 0 !important;
            padding: 0 !important;
            margin: 0 0 6px !important;
            color: var(--dark);
            font-size: 22px;
        }
        .curriculum-heading p {
            color: #64748b;
            font-size: 13px;
            line-height: 1.55;
            margin: 0;
        }
        .curriculum-section-card {
            border-radius: 18px;
            overflow: hidden;
            margin-top: 16px;
            border: 1px solid #e2e8f0;
            background: #fff;
            box-shadow: 0 10px 28px rgba(15,23,42,.06);
        }
        .curriculum-section-title {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            color: white;
        }
        .abacus-curriculum .curriculum-section-title {
            background: linear-gradient(135deg, #0f172a, #334155);
        }
        .english-curriculum .curriculum-section-title {
            background: linear-gradient(135deg, #0369a1, #6366f1);
        }
        .curriculum-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.2);
            font-size: 18px;
        }
        .curriculum-section-title span:first-of-type {
            display: block;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1px;
            opacity: .86;
        }
        .curriculum-section-title h4 {
            font-size: 18px;
            margin-top: 2px;
            color: #fff;
        }
        .level-count {
            margin-left: auto;
            white-space: nowrap;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 30px;
            padding: 6px 10px;
            font-size: 11px !important;
            font-weight: 800 !important;
        }
        .curriculum-table-wrap {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .curriculum-table {
            width: 100%;
            min-width: 520px;
            border-collapse: collapse;
            font-size: 13px;
        }
        .curriculum-table th {
            background: #f8fafc;
            color: #475569;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .55px;
            font-weight: 800;
            padding: 11px 12px;
            border-bottom: 1px solid #e2e8f0;
            text-align: left;
        }
        .curriculum-table td {
            padding: 11px 12px;
            border-bottom: 1px solid #edf2f7;
            color: #475569;
            vertical-align: top;
            line-height: 1.45;
        }
        .curriculum-table tbody tr:last-child td { border-bottom: 0; }
        .curriculum-table tbody tr:hover td { background: #f8fafc; }
        .curriculum-table td strong { color: #1e293b; }
        .level-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 27px;
            height: 27px;
            border-radius: 9px;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--kids-yellow));
            font-weight: 800;
            font-size: 12px;
            box-shadow: 0 4px 10px rgba(255,87,34,.18);
        }
        .english-pillars {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            padding: 12px;
            background: #f8fafc;
        }
        .english-pillars > div {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 11px;
            border-radius: 12px;
            background: #fff;
            border: 1px solid #e2e8f0;
        }
        .english-pillars i {
            color: var(--tech-purple);
            font-size: 15px;
            margin-bottom: 2px;
        }
        .english-pillars strong {
            font-size: 10px;
            color: #1e293b;
            letter-spacing: .55px;
        }
        .english-pillars small {
            color: #64748b;
            font-size: 10px;
            line-height: 1.35;
        }
        .grade-chip {
            display: inline-block;
            color: var(--tech-purple);
            background: #eef2ff;
            border: 1px solid #c7d2fe;
            border-radius: 7px;
            padding: 4px 7px;
            font-weight: 800;
            font-size: 11px;
        }
        .english-table td:first-child small {
            display: block;
            margin-top: 4px;
            color: #94a3b8;
            font-size: 10px;
            font-weight: 600;
        }
        @media (max-width: 600px) {
            .curriculum-section-title { padding: 13px 12px; }
            .curriculum-icon { width: 38px; height: 38px; flex-basis: 38px; }
            .curriculum-section-title h4 { font-size: 15px; }
            .level-count { font-size: 10px !important; padding: 5px 7px; }
            .english-pillars { grid-template-columns: 1fr; }
            .curriculum-table { min-width: 500px; }
            .curriculum-heading h3 { font-size: 19px; }
        }

        .detail-card-sub h3 {
            font-size: 17px;
            color: var(--secondary);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 2px solid var(--border);
            padding-bottom: 8px;
        }

        .center-item-box {
            background: white;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 12px;
        }
        .center-item-box h4 {
            color: var(--primary);
            font-size: 15px;
            margin-bottom: 4px;
        }

        .levels-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
        }
        .level-pill-box {
            background: white;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
        }
        .level-pill-box strong {
            color: var(--tech-purple);
            display: block;
            font-size: 16px;
            margin-bottom: 4px;
        }

        .fee-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        .fee-table th, .fee-table td {
            border: 1px solid var(--border);
            padding: 10px 12px;
            text-align: left;
            font-size: 16px;
        }
        .fee-table th { background: #f1f5f9; font-weight: 700; }

        .kit-grid-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 12px;
        }
        .kit-item-tag {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: var(--success);
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* --- FLOATING COMMUNICATOR --- */
        .whatsapp-float {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25d366;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
            z-index: 1000;
            text-decoration: none;
        }


        /* ========================================== */
        /* --- MEDIA QUERIES FOR MOBILE COMPATIBILITY --- */
        /* ========================================== */
        @media (max-width: 968px) {
            .nav-links { display: none; }

            .brand-container { flex-direction: column; gap: 6px; }
            .brand-text h1 { font-size: 20px; }
            
            .corporate-header-giant h2 { font-size: 28px; }
            .corporate-header-giant p { font-size: 15px; }
            
            .abacus-showcase-grid, .interactive-grid, .detail-grid-two-col {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .abacus-text-block h2 { font-size: 26px; }
            .abacus-showcase-section { padding: 30px 16px; }
            
            .cta-strip { flex-direction: column; text-align: center; justify-content: center; }
            .cta-strip div { width: 100%; justify-content: center; }
            .cta-strip .btn { width: 100%; }
        }

        @media (max-width: 600px) {
            .top-contact-bar { flex-direction: column; text-align: center; justify-content: center; padding: 8px 4%; }
            .top-left-info { justify-content: center; gap: 10px; }
            
            .form-grid { grid-template-columns: 1fr; gap: 12px; }
            .kit-grid-list { grid-template-columns: 1fr; }
            
            .abacus-detail-overlay { padding: 10px 5px; }
            .detail-page-container { padding: 25px 15px; border-radius: 12px; }
            .close-overlay-btn { top: 12px; right: 12px; }
            
            section { padding: 30px 4%; }
            .ecosystem-hero-card { padding: 30px 16px; border-radius: 16px; }
        }
    

/* Professional typography + responsive upgrade */
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
h1 { font-size: clamp(2.25rem, 5vw, 4.2rem); line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.9rem); line-height: 1.25; }
p, li { font-size: 1.05rem; }

.curriculum-heading {
  font-size: clamp(1.65rem, 3vw, 2.35rem) !important;
  line-height: 1.2;
}
.program-details-home {
  overflow: hidden;
}
.program-details-home .program-card,
.program-details-home .program-card * {
  box-sizing: border-box;
}
.program-details-home .program-card p {
  font-size: 1.05rem;
}
.program-details-home .program-card li {
  font-size: 1rem;
}

/* Full Program overlay: mobile-safe modal */
#abacusOverlay {
  padding: 16px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start !important;
}
#abacusOverlay .abacus-detail-modal,
#abacusOverlay .modal-content,
#abacusOverlay > div {
  max-width: 1100px;
  width: min(1100px, 100%);
  max-height: none !important;
  margin: 20px auto;
  overflow: visible !important;
  box-sizing: border-box;
}

/* Prevent oversized tables from breaking the viewport */
#abacusOverlay table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}
#abacusOverlay th,
#abacusOverlay td {
  font-size: 1rem !important;
  line-height: 1.5;
  padding: 13px 12px !important;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Buttons are comfortably tappable */
button,
.btn,
.cta,
a[class*="btn"],
.program-details-home a {
  min-height: 46px;
  touch-action: manipulation;
}

/* Tablet */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .program-details-home { padding-left: 18px !important; padding-right: 18px !important; }
  #abacusOverlay { padding: 12px !important; }
  #abacusOverlay .abacus-detail-modal,
  #abacusOverlay .modal-content,
  #abacusOverlay > div {
    width: 100%;
    margin: 10px auto;
  }
}

/* Phone */
@media (max-width: 600px) {
  body {
    font-size: 17px;
    line-height: 1.6;
  }
  p, li { font-size: 1.03rem; }

  .program-details-home {
    padding: 42px 14px !important;
  }
  .program-details-home .program-grid,
  .program-details-home .program-cards,
  .program-details-home .cards-grid {
    grid-template-columns: 1fr !important;
  }
  .program-details-home .program-card {
    width: 100% !important;
    padding: 24px 19px !important;
    border-radius: 20px !important;
  }

  /* Overlay occupies the full mobile viewport */
  #abacusOverlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #abacusOverlay .abacus-detail-modal,
  #abacusOverlay .modal-content,
  #abacusOverlay > div {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
  }

  #abacusOverlay .close,
  #abacusOverlay .modal-close,
  #abacusOverlay [class*="close"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 50;
    float: right;
    font-size: 30px !important;
    line-height: 1;
    min-width: 46px;
    min-height: 46px;
    display: grid;
    place-items: center;
  }

  #abacusOverlay .curriculum-heading {
    font-size: 1.7rem !important;
    margin-top: 8px;
  }

  #abacusOverlay h2 {
    font-size: 1.65rem !important;
  }
  #abacusOverlay h3 {
    font-size: 1.28rem !important;
  }

  /* Convert curriculum tables into readable stacked cards */
  #abacusOverlay table,
  #abacusOverlay thead,
  #abacusOverlay tbody,
  #abacusOverlay tr,
  #abacusOverlay th,
  #abacusOverlay td {
    display: block !important;
    width: 100% !important;
  }
  #abacusOverlay thead {
    display: none !important;
  }
  #abacusOverlay tr {
    margin: 0 0 16px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(0,0,0,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
  }
  #abacusOverlay td {
    border: 0 !important;
    padding: 7px 0 !important;
    text-align: left !important;
    font-size: 1rem !important;
  }
  #abacusOverlay td::before {
    display: block;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .65;
    margin-bottom: 2px;
  }
  #abacusOverlay table td:nth-child(1)::before { content: "Level / Grade"; }
  #abacusOverlay table td:nth-child(2)::before { content: "Focus / Module"; }
  #abacusOverlay table td:nth-child(3)::before { content: "Curriculum Details"; }

  /* Pillar cards stack cleanly */
  #abacusOverlay [class*="pillar"],
  #abacusOverlay .pillars,
  #abacusOverlay .pillar-grid {
    grid-template-columns: 1fr !important;
  }

  /* Any internal grid in the modal becomes one column */
  #abacusOverlay .grid,
  #abacusOverlay [class*="grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Avoid horizontal scrolling caused by decorative elements */
  #abacusOverlay img,
  #abacusOverlay svg {
    max-width: 100%;
    height: auto;
  }
}

.header a[aria-label*="YouTube"],
.top-bar a[aria-label*="YouTube"] {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .header a[aria-label*="YouTube"],
  .top-bar a[aria-label*="YouTube"] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
}

  html { scroll-padding-top: 100px; }
  img, iframe, video { max-width: 100%; }
  body { overflow-x: clip; }
  .mobile-nav-toggle { display:none; border:1px solid #dbe3ef; border-radius:12px; padding:10px 14px; background:#fff; color:#0f172a; font:700 14px var(--font-sans); align-items:center; gap:8px; cursor:pointer; }
  .nav-links { min-width:0; }
  .close-overlay-btn { appearance:none; border:1px solid var(--border); }
  #abacusOverlay { display:none !important; }
  #abacusOverlay.is-open { display:flex !important; }
  #abacusOverlay .detail-page-container { flex:0 0 auto; }
  #abacusOverlay .close-overlay-btn { position:absolute !important; top:12px !important; right:12px !important; float:none !important; }
  #abacusOverlay .section-header-colorful { padding-right:50px; }
  @media (max-width: 968px) {
    .brand-container { flex-direction:row !important; text-align:left; min-width:0; }
    .brand-logo { width:58px; height:58px; flex:0 0 58px; }
    .brand-text h1 { font-size:clamp(15px,2.6vw,20px) !important; }
    .mobile-nav-toggle { display:inline-flex; }





  }
  @media (max-width:600px) {
    .top-left-info { flex-direction:column; gap:5px; }
    .top-contact-bar { gap:8px; }
    .top-social-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
    .top-social-links a { padding-left:0; }

    .brand-container { gap:8px !important; }
    .brand-logo { width:46px; height:46px; flex-basis:46px; }
    .brand-text h1 { font-size:14px !important; line-height:1.2; }

    .hero-banner-image { height:auto; max-height:none; object-fit:contain; }
    .cta-strip { padding:18px 14px; }
    .cta-strip h3 { font-size:15px; }
    .cta-strip > div { display:grid !important; grid-template-columns:1fr; }
    .program-visual-grid { grid-template-columns:minmax(0,1fr) !important; }
    .program-feature-card { min-width:0; }
    .program-art { min-width:0; }
    .mini-abacus, .book-visual { max-width:100%; }
    #abacusOverlay { align-items:flex-start !important; padding:0 !important; }
    #abacusOverlay .detail-page-container { width:100% !important; max-width:none !important; min-height:100dvh; margin:0 !important; border-radius:0 !important; padding:68px 14px 24px !important; overflow:visible !important; }
    #abacusOverlay .curriculum-table-wrap { overflow-x:auto; }
    #abacusOverlay .curriculum-table { min-width:520px !important; table-layout:auto !important; }
    #abacusOverlay .curriculum-table thead { display:table-header-group !important; }
    #abacusOverlay .curriculum-table tbody { display:table-row-group !important; }
    #abacusOverlay .curriculum-table tr { display:table-row !important; margin:0 !important; padding:0 !important; box-shadow:none !important; border-radius:0 !important; }
    #abacusOverlay .curriculum-table th, #abacusOverlay .curriculum-table td { display:table-cell !important; width:auto !important; font-size:13px !important; padding:9px !important; overflow-wrap:break-word; }
    #abacusOverlay .curriculum-table td::before { content:none !important; display:none !important; }
    #abacusOverlay .english-pillars { grid-template-columns:1fr !important; }
    .form-grid { grid-template-columns:minmax(0,1fr) !important; }
    .whatsapp-float { right:14px; bottom:14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  }

  :root {
    --primary: #f45b35;
    --secondary: #087f8c;
    --kids-yellow: #f5c451;
    --tech-purple: #6657d9;
    --success: #138a68;
    --dark: #17243a;
    --light: #f6f8fc;
    --surface: #ffffff;
    --border: #e3e9f2;
    --font-round: 'Manrope', sans-serif;
    --font-sans: 'DM Sans', sans-serif;
    --brand-shadow: 0 18px 50px rgba(25, 42, 70, .08);
    --soft-shadow: 0 8px 28px rgba(25, 42, 70, .07);
  }
  html { scroll-behavior: smooth; scroll-padding-top: 108px; }
  body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -.01em;
    color: #334155;
    background:
      radial-gradient(ellipse at 4% 9%, rgba(8,127,140,.055), transparent 28rem),
      radial-gradient(ellipse at 96% 32%, rgba(102,87,217,.045), transparent 30rem),
      #f7f9fc;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1,h2,h3,h4,h5,h6 { font-family: var(--font-round); letter-spacing: -.035em; line-height: 1.22; }
  p { line-height: 1.8; }
  a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  a { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
  img { height: auto; }

  .top-contact-bar {
    padding: 9px clamp(16px, 4vw, 64px);
    background: #142238;
    color: #e8eef7;
    font-size: 13px;
    border: 0;
    gap: 10px 24px;
  }
  .top-left-info { gap: 12px 16px; }
  .top-left-info a { color: #e8eef7; font-weight: 500; }
  .top-left-info i { color: #f5c451; }
  .top-social-links { display:flex; flex-wrap:wrap; gap: 10px 18px; }
  .top-social-links a { padding-left: 0; color: #e8eef7; font-size: 13px; }
  .top-social-links a:hover, .top-left-info a:hover { color: #f5c451; }

  .brand-container { gap: 12px; min-width: 0; }
  .brand-logo {
    width: 62px; height: 62px;
    flex: 0 0 62px;
    border-radius: 17px;
    border: 1px solid #edf1f7;
    box-shadow: 0 5px 16px rgba(25,42,70,.09);
    background: white;
  }
  .brand-logo img { object-fit: contain; padding: 2px; }
  .brand-text h1 { font-size: clamp(16px, 1.55vw, 22px); font-weight: 800; color: #17243a; letter-spacing: -.045em; }
  .brand-text p { color: var(--secondary); font-size: 11px; letter-spacing: 1.3px; }
  .nav-links { gap: clamp(12px, 1.6vw, 25px); }
  .nav-links a { font-size: 13px; font-weight: 700; color: #39465c; position: relative; }
  .nav-links a::after { content:''; position:absolute; left:0; bottom:-8px; width:0; height:2px; border-radius:99px; background:var(--primary); transition:width .2s ease; }
  .nav-links a:hover { color: var(--primary); }
  .nav-links a:hover::after { width:100%; }
  .btn {
    min-height: 46px;
    padding: 12px 21px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .005em;
    box-shadow: none;
  }
  .btn-primary {
    background: linear-gradient(135deg, #f45b35, #ed7849);
    color: white;
    text-shadow: none;
    box-shadow: 0 8px 18px rgba(244,91,53,.19);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(244,91,53,.24); }
  .mobile-nav-toggle { border-color: #e0e7f0; border-radius: 12px; box-shadow: 0 3px 10px rgba(25,42,70,.04); }

  .hero-banner-container {
    background: #17243a;
    border-bottom: 0;
    padding: 0;
    isolation: isolate;
  }
  .hero-banner-image { width:100%; max-height: min(58vw, 590px); object-fit: cover; object-position:center; }
  .cta-strip {
    padding: 18px clamp(16px, 5vw, 76px);
    background: linear-gradient(110deg, #087f8c 0%, #176b91 48%, #6657d9 100%);
    box-shadow: 0 12px 28px rgba(8,127,140,.14);
  }
  .cta-strip h3 { font-family: var(--font-sans); font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; letter-spacing: -.015em; }
  .cta-strip .btn { border-radius: 12px; }

  section { padding: clamp(42px, 6vw, 84px) clamp(16px, 5vw, 76px); }
  #about { padding-bottom: 24px; }
  .ecosystem-hero-card {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(26px, 4.2vw, 56px);
    border: 1px solid #e1e9f3;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,250,250,.98));
    box-shadow: var(--brand-shadow);
  }
  .corporate-header-giant .tagline, .program-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid #d7eeeb;
    border-radius: 999px;
    background: #edf9f7;
    color: #087f8c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.25px;
  }
  .corporate-header-giant h2 {
    max-width: 850px;
    margin: 16px 0;
    font-size: clamp(29px, 4.2vw, 52px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.055em;
    background: linear-gradient(110deg, #17243a 20%, #087f8c 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .corporate-header-giant p { max-width: 900px; font-size: clamp(15px, 1.25vw, 17px); color:#526176; }

  .abacus-showcase-section, .program-details-home, .section-card-wrapper,
  .detail-page-container, .section-header-colorful, .management-grid,
  .mentor-grid-colorful, .video-grid-flex, .interactive-grid { min-width:0; }
  .abacus-showcase-section {
    max-width: 1280px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 30px;
    box-shadow: 0 24px 55px rgba(18,35,60,.17);
    overflow: hidden;
  }
  .abacus-text-block h2 { font-size: clamp(28px, 3vw, 42px); line-height:1.15; letter-spacing:-.05em; }
  .abacus-text-block p { line-height:1.8; }
  .abacus-tool-visual-box { border-radius: 24px; }

  .program-details-home { max-width: 1440px; margin: 0 auto; }
  .program-home-header { margin-bottom: 30px; }
  .program-home-header h2, .section-header-colorful h2 { font-size: clamp(28px, 3.3vw, 42px); letter-spacing:-.05em; }
  .program-visual-grid { gap: 24px; }
  .program-feature-card, .detail-card-sub, .curriculum-section-card,
  .profile-card-premium, .mentor-card-modern, .video-card-item,
  .section-card-wrapper, .interactive-grid, .feature-strip {
    border-radius: 22px;
  }
  .program-feature-card {
    border: 1px solid #e3e9f2;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .program-feature-card:hover, .profile-card-premium:hover, .mentor-card-modern:hover, .video-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(25,42,70,.12);
  }
  .program-art { min-height: 210px; }
  .program-feature-content { padding: clamp(20px, 3vw, 34px); }
  .program-feature-content h3 { font-size: clamp(21px, 2vw, 28px); }
  .program-detail-btn { border-radius: 12px; font-weight:800; }
  .program-roadmap { margin-top: 30px; border-radius: 22px; }

  .section-header-colorful { border-radius: 22px; }
  .detail-card-sub, .curriculum-section-card {
    border: 1px solid #e5eaf2;
    box-shadow: 0 6px 22px rgba(25,42,70,.045);
  }
  .detail-grid-two-col { gap: 22px; }
  .curriculum-section-title { border-radius: 14px; }
  .kit-item-tag { border-radius: 12px; }
  .profile-card-premium, .mentor-card-modern {
    border: 1px solid #e5eaf2;
    box-shadow: var(--soft-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .management-grid, .mentor-grid-colorful { gap: 20px; }
  .video-card-item { overflow:hidden; border:1px solid #e5eaf2; box-shadow:var(--soft-shadow); transition:transform .25s ease,box-shadow .25s ease; }
  .video-card-item img { display:block; }

  #onboarding { max-width: 1440px; margin: 0 auto; }
  #onboarding .interactive-grid { gap: 22px; }
  #onboarding input, #onboarding select, #onboarding textarea {
    min-height: 48px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    font: 500 15px var(--font-sans);
    color: #17243a;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  #onboarding input:focus, #onboarding select:focus, #onboarding textarea:focus {
    outline: none; border-color:#087f8c; box-shadow:0 0 0 4px rgba(8,127,140,.1);
  }
  #onboarding label { font-size:13px; font-weight:700; color:#39465c; }
  .feature-strip { border:1px solid #e5eaf2; box-shadow:0 6px 20px rgba(25,42,70,.04); }

  #abacusOverlay .detail-page-container {
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(7,18,35,.32);
  }
  #abacusOverlay .close-overlay-btn { border-radius:12px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.12); }
  .whatsapp-float { filter: drop-shadow(0 8px 15px rgba(37,211,102,.25)); }

  @media (min-width: 1300px) {
    .hero-banner-image { max-height: 620px; }
  }
  @media (max-width: 1100px) {
    .brand-logo { width:54px; height:54px; flex-basis:54px; }
    .nav-links { gap: 14px; }
    .nav-links a { font-size:12px; }

  }
  @media (max-width: 968px) {
    .brand-logo { width:52px; height:52px; flex-basis:52px; }
    .brand-text h1 { font-size: clamp(15px, 2.5vw, 20px) !important; }





    .hero-banner-image { max-height:none; }
    section { padding: 48px 24px; }
  }
  @media (max-width: 600px) {
    body { font-size:15px; }
    .top-contact-bar { padding:10px 14px; align-items:flex-start; }
    .top-left-info { flex-direction:row; flex-wrap:wrap; gap:5px 10px; font-size:12px; }
    .top-left-info span { display:none; }
    .top-social-links { justify-content:flex-start; gap:10px 14px; }
    .top-social-links a { font-size:12px; }

    .brand-container { flex:1 1 calc(100% - 100px); }
    .brand-logo { width:44px; height:44px; flex-basis:44px; border-radius:12px; }
    .brand-text h1 { font-size:13px !important; line-height:1.25; }
    .mobile-nav-toggle { padding:10px 11px; font-size:12px; }

    .hero-banner-image { object-fit:contain; }
    .cta-strip { padding:17px 15px; gap:13px; }
    .cta-strip h3 { font-size:14px; line-height:1.5; }
    .cta-strip > div { display:grid !important; grid-template-columns:1fr; width:100%; }
    section { padding:36px 15px; }
    #about { padding-bottom:14px; }
    .ecosystem-hero-card { padding:24px 20px; border-radius:20px; }
    .corporate-header-giant .tagline, .program-eyebrow { font-size:10px; letter-spacing:.8px; }
    .corporate-header-giant h2 { font-size:29px; }
    .corporate-header-giant p { font-size:14px; }
    .abacus-showcase-section { border-radius:20px; }
    .abacus-text-block h2 { font-size:28px; }
    .program-home-header h2, .section-header-colorful h2 { font-size:27px; }
    .program-visual-grid, .detail-grid-two-col, .management-grid, .mentor-grid-colorful { gap:15px; }
    .program-feature-card, .detail-card-sub, .curriculum-section-card, .profile-card-premium, .mentor-card-modern { border-radius:17px; }
    .program-art { min-height:170px; }
    .program-feature-content { padding:20px; }
    .program-feature-content h3 { font-size:22px; }
    .form-grid { gap:12px; }
    #onboarding input, #onboarding select, #onboarding textarea { font-size:16px; }
    #abacusOverlay { padding:0 !important; }
    #abacusOverlay .detail-page-container { border-radius:0 !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }

/* Final mobile-first layout hardening; content and asset paths remain unchanged. */
:root { color-scheme: light; }
html { width:100%; max-width:100%; overflow-x:clip; scroll-padding-top:84px; }
body { width:100%; max-width:100%; min-width:0; overflow-x:clip; }
*, *::before, *::after { min-width:0; }
img, picture, video, canvas, svg, iframe { max-width:100%; }
img { height:auto; }
button, input, select, textarea { max-width:100%; }
button, .btn, a { -webkit-tap-highlight-color: transparent; }
p, li, td, th, label, .feature-strip, .brand-text { overflow-wrap:anywhere; }
section { min-width:0; }
.hero-banner-container { width:100%; max-width:100%; overflow:hidden; padding-left:0; padding-right:0; }
.hero-banner-image { display:block; width:100%; max-width:100%; height:auto; object-fit:contain; }
.brand-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.top-contact-bar { max-width:100%; }
.top-left-info, .top-social-links { min-width:0; }
.nav-links { min-width:0; }
.btn, button { touch-action:manipulation; }
#onboarding { width:100%; max-width:1440px; }
#onboarding form, #onboarding .interactive-grid, #onboarding .form-grid { min-width:0; }
#onboarding input, #onboarding select, #onboarding textarea { width:100%; max-width:100%; }
.table-responsive, .curriculum-table-wrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#primaryNav { min-width:0; }
#abacusOverlay { z-index:99999 !important; overscroll-behavior:contain; }
#abacusOverlay.is-open { display:flex !important; }
#abacusOverlay .detail-page-container { max-width:100%; min-width:0; }
#abacusOverlay .curriculum-table-wrap { width:100%; max-width:100%; overflow-x:auto; }
.whatsapp-float { z-index:1000; width:54px; height:54px; display:flex; align-items:center; justify-content:center; }
:focus-visible { outline:3px solid rgba(8,127,140,.65); outline-offset:3px; }

@media (max-width: 968px) {








  .top-contact-bar { flex-direction:column; align-items:flex-start; }
  .top-left-info { flex-wrap:wrap; }
  .top-social-links { display:flex; flex-wrap:wrap; }
  .corporate-header-giant, .ecosystem-hero-card, .abacus-showcase-section,
  .program-home-header, .section-header-colorful, .detail-page-container { max-width:100%; }
  .program-visual-grid, .detail-grid-two-col, .management-grid,
  .mentor-grid-colorful, .interactive-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  html { scroll-padding-top:72px; }
  body { font-size:15px !important; line-height:1.6; }
  .top-contact-bar { padding:10px 14px !important; gap:8px; }
  .top-left-info { display:flex; flex-direction:row; align-items:center; gap:5px 10px; font-size:12px; }
  .top-left-info a, .top-social-links a { white-space:normal; overflow-wrap:anywhere; }
  .top-social-links { width:100%; gap:8px 14px; }

  .brand-container { flex:initial !important; gap:8px !important; }
  .brand-logo { width:42px !important; height:42px !important; flex:0 0 42px !important; }
  .brand-text h1 { font-size:clamp(12px,3.6vw,15px) !important; line-height:1.25 !important; }
  .mobile-nav-toggle { min-height:44px; padding:9px 10px !important; font-size:12px !important; }



  section { padding:32px 14px !important; }
  #abacus-focus { padding-top:8px !important; }
  .hero-banner-container { padding:0 !important; }
  .hero-banner-image { width:100%; height:auto !important; max-height:none !important; object-fit:contain !important; }
  .cta-strip { display:flex !important; flex-direction:column; align-items:stretch; gap:12px !important; margin:0 12px; padding:16px 14px !important; }
  .cta-strip h3 { font-size:15px !important; line-height:1.45 !important; }
  .cta-strip > div { display:grid !important; grid-template-columns:minmax(0,1fr) !important; width:100%; gap:9px !important; }
  .cta-strip .btn { width:100%; justify-content:center; white-space:normal; }
  .corporate-header-giant h2, .abacus-text-block h2 { font-size:clamp(25px,7vw,31px) !important; line-height:1.15 !important; }
  .program-home-header h2, .section-header-colorful h2 { font-size:clamp(24px,6.5vw,29px) !important; line-height:1.2 !important; }
  .corporate-header-giant p, .abacus-text-block p { font-size:14px !important; }
  .program-visual-grid, .detail-grid-two-col, .management-grid,
  .mentor-grid-colorful, .interactive-grid, .form-grid,
  .program-home-grid, .program-card-grid, .feature-grid { grid-template-columns:minmax(0,1fr) !important; }
  .program-feature-card, .detail-card-sub, .curriculum-section-card,
  .profile-card-premium, .mentor-card-modern, .info-panel-colorful,
  .ecosystem-hero-card, .abacus-showcase-section { min-width:0; max-width:100%; }
  .program-feature-content { padding:18px !important; }
  .program-feature-content h3 { font-size:20px !important; line-height:1.25; }
  .program-art { min-height:145px; }
  .form-grid > *, .interactive-grid > * { width:100%; max-width:100%; }
  #onboarding { padding-left:0; padding-right:0; }
  #onboarding input, #onboarding select, #onboarding textarea { font-size:16px !important; min-height:46px; }
  #onboarding button, #onboarding .btn { min-height:46px; white-space:normal; }
  .whatsapp-float { width:50px !important; height:50px !important; right:12px !important; bottom:12px !important; }
  #abacusOverlay { padding:0 !important; align-items:flex-start !important; }
  #abacusOverlay .detail-page-container { width:100% !important; max-width:100% !important; min-height:100vh; min-height:100dvh; margin:0 !important; border-radius:0 !important; padding:66px 14px 24px !important; }
  #abacusOverlay .close-overlay-btn { position:fixed !important; top:10px !important; right:10px !important; z-index:100001 !important; min-width:44px; min-height:44px; }
  #abacusOverlay .section-header-colorful { padding-right:48px; }
  #abacusOverlay .curriculum-table { min-width:560px !important; }
  #abacusOverlay .curriculum-table th, #abacusOverlay .curriculum-table td { font-size:12px !important; padding:8px !important; }
  .video-card-item { min-width:0; }
}
@media (max-width: 360px) {
  .brand-logo { width:36px !important; height:36px !important; flex-basis:36px !important; }
  .brand-text h1 { font-size:12px !important; }
  .mobile-nav-toggle { padding:8px !important; }
  section { padding-left:11px !important; padding-right:11px !important; }
  .cta-strip { margin-left:8px; margin-right:8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

:root{--primary:#0f766e;--secondary:#2563eb;--kids-yellow:#f6c453;--tech-purple:#6366f1;--success:#15803d;--dark:#172b3a;--light:#f7fafc;--border:#dbe4ec;--font-round:'Manrope',sans-serif;--font-sans:'DM Sans',sans-serif}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{color:#203142;background:#f8fafc;font-family:'DM Sans',sans-serif;line-height:1.65}
h1,h2,h3,h4{font-family:'Manrope',sans-serif;letter-spacing:-.025em}
.top-contact-bar{background:#102d37;color:#e3edf0;padding:9px clamp(16px,4vw,56px);font-size:13px}
.top-left-info a,.top-social-links a{color:#e3edf0}.top-left-info i{color:#f6c453}.top-social-links a{padding-left:12px}

.brand-logo{width:68px;height:68px;border-radius:14px}.brand-text h1{font-size:clamp(16px,2vw,23px);color:#163b43}
.nav-links{gap:clamp(12px,2vw,25px)}.nav-links a{font-size:14px;font-weight:700}
.btn{min-height:46px;border-radius:12px;padding:12px 20px}.btn-primary{background:#0f766e;color:#fff;text-shadow:none;box-shadow:0 6px 18px rgba(15,118,110,.18)}
.btn-primary:hover{background:#115e59;transform:translateY(-2px)}
.hero-banner-container{min-height:430px;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;border:0;background:#102d37;isolation:isolate}
.hero-banner-image{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;z-index:-2;opacity:.42}
.hero-banner-container:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,35,43,.92),rgba(9,35,43,.68) 55%,rgba(9,35,43,.15))}
.hero-copy{position:relative;z-index:1;width:min(1200px,100%);margin:auto;padding:65px clamp(20px,6vw,84px);color:#fff}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#f8d77e;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.hero-copy h1, .hero-copy h2{max-width:760px;color:#fff;font-size:clamp(36px,5.5vw,64px);line-height:1.08;margin-bottom:18px}
.hero-copy p{max-width:650px;color:#e4eef0;font-size:clamp(16px,1.5vw,19px);line-height:1.7;margin-bottom:25px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-secondary{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.65);color:#fff}.hero-secondary:hover{background:#fff;color:#17343d}
.cta-strip{background:#e8f5f2;color:#17443f;padding:16px clamp(16px,4vw,56px);box-shadow:none}.cta-strip h3{font-size:15px;font-weight:800}
section{padding:clamp(30px,5vw,64px) clamp(16px,4vw,56px)}
.ecosystem-hero-card{max-width:1250px;margin:0 auto;padding:clamp(24px,4vw,48px);background:#fff;border:1px solid #e1eae9;border-radius:24px;box-shadow:0 14px 40px rgba(25,55,65,.06)}
.corporate-header-giant .tagline{color:#0f766e;font-size:12px;letter-spacing:1.4px}
.corporate-header-giant h2{max-width:850px;font-size:clamp(30px,4vw,46px);color:#173b43;background:none;-webkit-text-fill-color:initial;margin-bottom:14px}
.corporate-header-giant p{color:#526575;font-size:17px;max-width:920px}
.abacus-showcase-section{max-width:1250px;margin:0 auto;border-radius:24px;background:linear-gradient(135deg,#123b43,#183a55)}
.abacus-text-block h2{font-size:clamp(28px,3.4vw,40px);color:#f8d77e}
.program-details-home{background:linear-gradient(180deg,#f7fafc,#eef6f5)}
.program-home-header h2{font-size:clamp(29px,4vw,43px);background:none;-webkit-text-fill-color:initial;color:#183b43}
.program-home-header p{font-size:16px;color:#596b7b}.program-feature-card{border-radius:20px;box-shadow:0 12px 30px rgba(21,51,61,.07)}
.program-feature-card:hover{transform:translateY(-4px)}.program-detail-btn{min-height:46px;border-radius:12px}
.program-detail-btn.orange{background:#0f766e}.program-detail-btn.blue-btn{background:#3156a6}.program-roadmap{border-radius:18px;background:#16363e}
.detail-page-container{border-top-color:#0f766e}.curriculum-section-title{flex-wrap:wrap}
#onboarding{max-width:1400px;margin:auto}#onboarding .interactive-grid{align-items:stretch}
#onboarding .registration-panel-colorful,#onboarding .info-panel-colorful{border-radius:18px}
#onboarding .registration-panel-colorful{border-top-color:#0f766e}#onboarding .info-panel-colorful{background:#16363e}
#onboarding .info-header h3{color:#f8d77e}
#onboarding .form-group input:focus,#onboarding .form-group select:focus,#onboarding .form-group textarea:focus{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.form-status{color:#0f766e;font-weight:700;margin-top:10px}.form-note{color:#64748b;font-size:12px;margin-top:8px}
.whatsapp-float{width:56px;height:56px;right:18px;bottom:18px}
:focus-visible{outline:3px solid #f6c453;outline-offset:3px}
@media(max-width:968px){.brand-container{flex-direction:row!important}.hero-banner-container{min-height:400px}.hero-copy{padding:52px 24px}.nav-links{gap:0}nav>.btn{width:auto}}
@media(max-width:600px){
.top-contact-bar{align-items:stretch}.top-left-info{gap:8px 12px}.top-social-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.brand-logo{width:48px;height:48px;flex-basis:48px}.brand-text h1{font-size:15px!important;line-height:1.25}nav>.btn{width:100%}
.hero-banner-container{min-height:420px}.hero-banner-image{object-position:center}.hero-banner-container:after{background:linear-gradient(90deg,rgba(9,35,43,.9),rgba(9,35,43,.65))}
.hero-copy{padding:44px 20px}.hero-copy h1, .hero-copy h2{font-size:clamp(34px,10vw,46px)}.hero-copy p{font-size:16px}
.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%}
.cta-strip{align-items:stretch}.cta-strip h3{font-size:15px}.cta-strip>div{display:flex;flex-direction:column}.cta-strip .btn{width:100%}
.corporate-header-giant h2{font-size:30px!important}.corporate-header-giant p{font-size:16px}
.abacus-tool-visual-box{min-height:220px}.program-roadmap{padding:18px 14px}
.detail-page-container{padding:56px 15px 22px}.close-overlay-btn{position:fixed!important;top:10px!important;right:10px!important}
.curriculum-table{min-width:520px}.curriculum-table-wrap{overflow-x:auto}.english-pillars{grid-template-columns:1fr}
#onboarding .form-grid{grid-template-columns:1fr}.whatsapp-float{width:52px;height:52px;right:14px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}