:root {
--blue:      #2563EB;
--blue-lt:   #EFF6FF;
--blue-dk:   #1D4ED8;
--green:     #16A34A;
--green-lt:  #F0FDF4;
--orange:    #EA580C;
--orange-lt: #FFF7ED;
--yellow:    #D97706;
--yellow-lt: #FFFBEB;
--purple:    #7C3AED;
--purple-lt: #F5F3FF;
--teal:      #0891B2;
--teal-lt:   #ECFEFF;
--red:       #DC2626;
--text-dk:   #1E293B;
--text-md:   #475569;
--text-lt:   #94A3B8;
--border:    #E2E8F0;
--white:     #FFFFFF;
--bg:        #F8FAFC;
--shadow-sm: 0 2px 8px rgba(0,0,0,.06);
--shadow-md: 0 4px 20px rgba(0,0,0,.10);
--shadow-lg: 0 8px 40px rgba(0,0,0,.14);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--font-head: 'Baloo 2', cursive;
--font-body: 'Nunito', sans-serif;
--transition: .3s cubic-bezier(.4,0,.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--white); color: var(--text-dk); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button, input, select, textarea { font-family: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.section-alt { background: var(--bg); }
.section-label {
display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--blue); background: var(--blue-lt);
padding: 6px 16px; border-radius: 100px; margin-bottom: 12px;
}
.section-title {
font-family: var(--font-head); font-size: clamp(26px, 4vw, 40px);
font-weight: 800; color: var(--text-dk); line-height: 1.2; margin-bottom: 14px;
}
.section-subtitle { font-size: 16px; color: var(--text-md); line-height: 1.7; max-width: 640px; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-header .section-subtitle { margin: 0 auto; }
.btn {
display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px;
border-radius: 50px; font-size: 15px; font-weight: 700; cursor: pointer;
border: none; transition: var(--transition); white-space: nowrap;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dk); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,.35); }
.btn-green  { background: var(--green); color: var(--white); }
.btn-green:hover  { background: #15803D; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,163,74,.35); }
.btn-orange { background: var(--orange); color: var(--white); }
.btn-orange:hover { background: #C2410C; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(234,88,12,.35); }
.btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--white); transform: translateY(-2px); }
.btn-wa { background: #25D366; color: var(--white); }
.btn-wa:hover { background: #20BA5A; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,.35); }
.card {
background: var(--white); border-radius: var(--radius-md); padding: 28px;
box-shadow: var(--shadow-sm); border: 1px solid var(--border);
transition: var(--transition);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tag {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
border-radius: 100px; font-size: 13px; font-weight: 700;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse-ring { 0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(37,211,102,.6); }
70% { transform: scale(1); box-shadow: 0 0 0 14px rgba(37,211,102,0); }
100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.topbar {
background: linear-gradient(135deg, var(--blue-dk), var(--blue));
color: var(--white); font-size: 13px; padding: 8px 0;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar-left span { display: flex; align-items: center; gap: 6px; opacity: .9; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-right a {
display: flex; align-items: center; gap: 5px; color: var(--white);
opacity: .85; font-size: 12px; transition: opacity .2s;
}
.topbar-right a:hover { opacity: 1; }
.navbar {
position: sticky; top: 0; z-index: 1000; background: var(--white);
box-shadow: 0 2px 16px rgba(0,0,0,.08); padding: 14px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo-icon {
width: 44px; height: 44px; background: linear-gradient(135deg, var(--blue), var(--purple));
border-radius: 12px; display: flex; align-items: center; justify-content: center;
font-size: 20px; color: var(--white); flex-shrink: 0;
}
.nav-logo-text { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text-dk); line-height: 1.1; }
.nav-logo-text span { color: var(--blue); font-size: 13px; font-weight: 600; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
font-size: 14px; font-weight: 600; color: var(--text-md); padding: 8px 12px;
border-radius: 8px; transition: var(--transition); white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--blue); background: var(--blue-lt); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-wa {
display: flex; align-items: center; gap: 6px; background: #25D366; color: var(--white);
font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 50px;
transition: var(--transition);
}
.nav-wa:hover { background: #20BA5A; transform: translateY(-1px); }
.nav-demo {
display: flex; align-items: center; gap: 6px; background: var(--orange); color: var(--white);
font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 50px;
transition: var(--transition);
}
.nav-demo:hover { background: #C2410C; transform: translateY(-1px); }
.hamburger {
display: none; background: none; border: none; cursor: pointer;
flex-direction: column; gap: 5px; padding: 4px;
}
.hamburger span {
display: block; width: 24px; height: 2.5px; background: var(--text-dk);
border-radius: 2px; transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-menu {
display: none; flex-direction: column; background: var(--white);
box-shadow: var(--shadow-lg); padding: 16px 20px; gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 15px; font-weight: 600; color: var(--text-md); padding: 12px 14px; border-radius: 10px; transition: var(--transition); }
.mobile-menu a:hover { color: var(--blue); background: var(--blue-lt); }
.mobile-menu-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.hero {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #EEF2FF 0%, #DBEAFE 40%, #ECFDF5 100%);
padding: 80px 0 60px;
}
.hero::before {
content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%;
background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
top: -200px; right: -200px; pointer-events: none;
}
.hero::after {
content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%;
background: radial-gradient(circle, rgba(22,163,74,.07) 0%, transparent 70%);
bottom: -100px; left: -100px; pointer-events: none;
}
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--white); border: 1px solid var(--border); border-radius: 50px;
padding: 8px 18px; font-size: 13px; font-weight: 700; color: var(--orange);
box-shadow: var(--shadow-sm); margin-bottom: 20px;
animation: slideUp .6s ease both;
}
.hero-badge i { color: #F59E0B; }
.hero-title {
font-family: var(--font-head); font-size: clamp(32px, 5vw, 56px);
font-weight: 800; line-height: 1.15; color: var(--text-dk);
margin-bottom: 20px; animation: slideUp .6s .1s ease both;
}
.hero-title span { color: var(--blue); position: relative; }
.hero-title span::after {
content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 6px;
background: rgba(37,99,235,.15); border-radius: 4px; z-index: -1;
}
.hero-sub {
font-size: 17px; color: var(--text-md); line-height: 1.7;
margin-bottom: 32px; animation: slideUp .6s .2s ease both;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; animation: slideUp .6s .3s ease both; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; animation: slideUp .6s .4s ease both; }
.hero-stat { text-align: center; }
.hero-stat-num { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--blue); }
.hero-stat-lbl { font-size: 12px; color: var(--text-md); font-weight: 600; }
.hero-visual { display: flex; justify-content: center; align-items: center; position: relative; animation: slideUp .6s .2s ease both; }
.hero-blob {
width: 420px; height: 420px; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
background: linear-gradient(135deg, var(--blue), var(--purple));
display: flex; align-items: center; justify-content: center;
position: relative; animation: float 5s ease-in-out infinite;
}
.hero-blob-inner {
width: 370px; height: 370px; border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
background: var(--white); display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 14px; overflow: hidden;
}
.hero-emoji-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 20px; }
.hero-emoji-box {
width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center;
justify-content: center; font-size: 32px; font-weight: 800;
animation: bounce 2s ease-in-out infinite;
}
.hero-emoji-box:nth-child(2) { animation-delay: .2s; }
.hero-emoji-box:nth-child(3) { animation-delay: .4s; }
.hero-emoji-box:nth-child(4) { animation-delay: .6s; }
.hero-emoji-box:nth-child(5) { animation-delay: .8s; }
.hero-emoji-box:nth-child(6) { animation-delay: 1s; }
.hero-emoji-box:nth-child(7) { animation-delay: 1.2s; }
.hero-emoji-box:nth-child(8) { animation-delay: 1.4s; }
.hero-emoji-box:nth-child(9) { animation-delay: 1.6s; }
.bg-blue   { background: var(--blue-lt); }
.bg-green  { background: var(--green-lt); }
.bg-orange { background: var(--orange-lt); }
.bg-yellow { background: var(--yellow-lt); }
.bg-purple { background: var(--purple-lt); }
.bg-teal   { background: var(--teal-lt); }
.floating-card {
position: absolute; background: var(--white); border-radius: var(--radius-sm);
padding: 10px 16px; box-shadow: var(--shadow-md); font-size: 13px; font-weight: 700;
display: flex; align-items: center; gap: 8px;
}
.floating-card-1 { top: 30px; left: -20px; animation: float 4s ease-in-out infinite; }
.floating-card-2 { bottom: 40px; right: -30px; animation: float 4.5s 1s ease-in-out infinite; }
.floating-card-3 { bottom: 10px; left: -10px; animation: float 3.5s .5s ease-in-out infinite; }
.trust-section { padding: 40px 0; background: var(--white); border-bottom: 1px solid var(--border); }
.trust-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.trust-badge {
display: flex; align-items: center; gap: 10px;
background: var(--white); border: 1.5px solid var(--border);
border-radius: 50px; padding: 12px 20px;
box-shadow: var(--shadow-sm); transition: var(--transition); cursor: default;
}
.trust-badge:hover { border-color: var(--blue); box-shadow: 0 4px 16px rgba(37,99,235,.15); transform: translateY(-2px); }
.trust-badge-icon {
width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
justify-content: center; font-size: 18px; flex-shrink: 0;
}
.trust-badge-text { font-size: 14px; font-weight: 700; color: var(--text-dk); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-visual {
background: linear-gradient(135deg, var(--blue), var(--purple));
border-radius: var(--radius-xl); padding: 40px; color: var(--white); position: relative; overflow: hidden;
}
.about-visual::before {
content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%;
background: rgba(255,255,255,.08); top: -50px; right: -50px;
}
.about-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.about-stat-card {
background: rgba(255,255,255,.15); border-radius: var(--radius-md); padding: 18px;
backdrop-filter: blur(10px); text-align: center;
}
.about-stat-card .num { font-family: var(--font-head); font-size: 30px; font-weight: 800; }
.about-stat-card .lbl { font-size: 12px; opacity: .85; margin-top: 2px; }
.about-visual-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.about-visual-sub { font-size: 14px; opacity: .85; line-height: 1.6; }
.about-features { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.about-feature { display: flex; align-items: flex-start; gap: 14px; }
.about-feature-icon {
width: 44px; height: 44px; border-radius: 12px; display: flex;
align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; margin-top: 2px;
}
.about-feature-text h4 { font-size: 15px; font-weight: 700; color: var(--text-dk); }
.about-feature-text p { font-size: 13px; color: var(--text-md); margin-top: 2px; line-height: 1.5; }
.programs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.program-card { border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); border: 1.5px solid var(--border); }
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.program-header {
padding: 28px 28px 20px; display: flex; align-items: center; gap: 16px;
}
.program-icon {
width: 56px; height: 56px; border-radius: 16px; display: flex;
align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
}
.program-title { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text-dk); }
.program-age { font-size: 12px; font-weight: 600; color: var(--text-md); margin-top: 2px; }
.program-body { padding: 0 28px 28px; }
.program-list { display: flex; flex-direction: column; gap: 8px; }
.program-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-md); }
.program-list li i { font-size: 12px; color: var(--green); flex-shrink: 0; }
.program-footer { padding: 16px 28px; border-top: 1px solid var(--border); }
.program-footer a { font-size: 13px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 6px; transition: var(--transition); }
.program-footer a:hover { gap: 10px; }
.age-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.age-card {
border-radius: var(--radius-md); padding: 28px; text-align: center;
border: 2px solid transparent; transition: var(--transition); position: relative; overflow: hidden;
}
.age-card::before {
content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%;
background: rgba(255,255,255,.3); top: -30px; right: -30px;
}
.age-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.age-num {
font-family: var(--font-head); font-size: 42px; font-weight: 800; line-height: 1;
margin-bottom: 4px;
}
.age-label { font-size: 13px; font-weight: 700; opacity: .7; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1px; }
.age-list { display: flex; flex-direction: column; gap: 7px; text-align: left; position: relative; z-index: 1; }
.age-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.age-list li::before { content: '✓'; font-weight: 800; flex-shrink: 0; }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 36px; }
.slot-card {
border-radius: var(--radius-md); padding: 28px; text-align: center;
border: 2px solid var(--border); transition: var(--transition); background: var(--white);
}
.slot-card:hover { border-color: var(--blue); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.slot-card.active { border-color: var(--blue); background: var(--blue-lt); }
.slot-icon { font-size: 36px; margin-bottom: 12px; }
.slot-name { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text-dk); margin-bottom: 6px; }
.slot-time { font-size: 15px; font-weight: 700; color: var(--blue); margin-bottom: 8px; }
.slot-desc { font-size: 13px; color: var(--text-md); }
.slots-note {
text-align: center; background: var(--blue-lt); border: 1px solid rgba(37,99,235,.15);
border-radius: var(--radius-md); padding: 18px 24px; font-size: 15px; color: var(--blue);
font-weight: 600; margin-bottom: 28px;
}
.slots-center { text-align: center; }
.demo-section {
background: linear-gradient(135deg, var(--blue-dk) 0%, var(--blue) 50%, var(--purple) 100%);
padding: 80px 0;
}
.demo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.demo-left { color: var(--white); }
.demo-left .section-label { background: rgba(255,255,255,.2); color: var(--white); }
.demo-left .section-title { color: var(--white); }
.demo-left .section-subtitle { color: rgba(255,255,255,.8); max-width: 100%; }
.demo-perks { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.demo-perk { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 600; }
.demo-perk i { font-size: 18px; color: #86EFAC; flex-shrink: 0; }
.demo-wa-btn {
display: inline-flex; align-items: center; gap: 10px; background: #25D366;
color: var(--white); font-size: 15px; font-weight: 700; padding: 14px 26px;
border-radius: 50px; margin-top: 28px; transition: var(--transition);
}
.demo-wa-btn:hover { background: #20BA5A; transform: translateY(-2px); }
.demo-form-card {
background: var(--white); border-radius: var(--radius-lg); padding: 36px;
box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.demo-form-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--text-dk); margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 700; color: var(--text-md); }
.form-field input, .form-field select, .form-field textarea {
padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px;
font-size: 14px; color: var(--text-dk); transition: var(--transition);
background: var(--bg);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
outline: none; border-color: var(--blue); background: var(--white);
box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.form-field textarea { resize: vertical; min-height: 80px; }
.form-submit {
width: 100%; padding: 14px; background: var(--blue); color: var(--white);
border: none; border-radius: 50px; font-size: 16px; font-weight: 700;
cursor: pointer; transition: var(--transition); margin-top: 6px;
}
.form-submit:hover { background: var(--blue-dk); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,.35); }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.portal-dashboard {
background: #1E293B; border-radius: var(--radius-xl); padding: 24px;
box-shadow: var(--shadow-lg);
}
.portal-dash-header {
display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.portal-dash-avatar {
width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--purple));
display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 800;
}
.portal-dash-name { font-weight: 700; color: var(--white); font-size: 14px; }
.portal-dash-role { font-size: 12px; color: rgba(255,255,255,.5); }
.portal-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.portal-card {
background: rgba(255,255,255,.07); border-radius: 12px; padding: 16px;
transition: var(--transition); cursor: pointer; border: 1px solid rgba(255,255,255,.06);
}
.portal-card:hover { background: rgba(255,255,255,.12); }
.portal-card-icon { font-size: 22px; margin-bottom: 8px; }
.portal-card-title { font-size: 13px; font-weight: 700; color: var(--white); }
.portal-card-count { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px; }
.portal-progress-section { margin-top: 14px; }
.portal-progress-label { font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.portal-progress-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 100px; overflow: hidden; }
.portal-progress-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--blue), var(--purple)); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.pricing-card {
border-radius: var(--radius-md); border: 2px solid var(--border); overflow: hidden;
transition: var(--transition); background: var(--white); display: flex; flex-direction: column;
}
.pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.pricing-card.featured { border-color: var(--blue); position: relative; }
.pricing-card.featured::before {
content: 'Most Popular'; position: absolute; top: 16px; right: -28px;
background: var(--orange); color: var(--white); font-size: 11px; font-weight: 700;
padding: 4px 32px; transform: rotate(45deg); letter-spacing: 1px;
}
.pricing-header { padding: 28px 24px 20px; }
.pricing-icon { font-size: 32px; margin-bottom: 12px; }
.pricing-name { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text-dk); }
.pricing-desc { font-size: 13px; color: var(--text-md); margin-top: 4px; line-height: 1.5; }
.pricing-price { margin-top: 16px; }
.pricing-price .amt {
font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--blue);
}
.pricing-price .per { font-size: 13px; color: var(--text-md); font-weight: 600; }
.pricing-features { padding: 0 24px; flex: 1; }
.pricing-features ul { display: flex; flex-direction: column; gap: 9px; }
.pricing-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-md); }
.pricing-features li i { color: var(--green); font-size: 12px; flex-shrink: 0; }
.pricing-footer { padding: 20px 24px; }
.pricing-btn {
display: block; text-align: center; padding: 12px; background: var(--blue-lt);
color: var(--blue); font-size: 14px; font-weight: 700; border-radius: 50px;
transition: var(--transition);
}
.pricing-btn:hover, .pricing-card.featured .pricing-btn { background: var(--blue); color: var(--white); }
.pricing-note {
text-align: center; margin-top: 28px; font-size: 14px; color: var(--text-md);
background: var(--yellow-lt); border: 1px solid rgba(217,119,6,.2);
padding: 14px 20px; border-radius: var(--radius-sm);
}
.charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.chart-cat-card {
border-radius: var(--radius-md); padding: 24px; text-align: center;
border: 1.5px solid var(--border); transition: var(--transition); cursor: pointer;
}
.chart-cat-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.chart-cat-icon { font-size: 36px; margin-bottom: 10px; }
.chart-cat-name { font-size: 14px; font-weight: 700; color: var(--text-dk); margin-bottom: 4px; }
.chart-cat-count { font-size: 12px; color: var(--text-md); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.why-card {
border-radius: var(--radius-md); padding: 28px;
border: 1.5px solid var(--border); transition: var(--transition);
background: var(--white);
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.why-icon { font-size: 32px; margin-bottom: 14px; }
.why-title { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--text-dk); margin-bottom: 8px; }
.why-desc { font-size: 14px; color: var(--text-md); line-height: 1.6; }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.testi-card { border-radius: var(--radius-md); padding: 28px; border: 1.5px solid var(--border); background: var(--white); transition: var(--transition); }
.testi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testi-stars { color: #F59E0B; font-size: 15px; margin-bottom: 14px; }
.testi-text { font-size: 15px; color: var(--text-md); line-height: 1.7; font-style: italic; margin-bottom: 20px; }
.testi-text::before { content: '"'; font-family: var(--font-head); font-size: 36px; color: var(--blue); line-height: 0; vertical-align: -14px; margin-right: 4px; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 16px; color: var(--white); flex-shrink: 0;
}
.testi-name { font-size: 15px; font-weight: 700; color: var(--text-dk); }
.testi-role { font-size: 12px; color: var(--text-md); }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
border: 1.5px solid var(--border); border-radius: var(--radius-md);
overflow: hidden; transition: var(--transition);
}
.faq-item.open { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.faq-q {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px; font-size: 15px; font-weight: 700; color: var(--text-dk);
cursor: pointer; gap: 12px;
}
.faq-q i { flex-shrink: 0; transition: transform var(--transition); color: var(--blue); }
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-a {
max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
padding: 0 22px; font-size: 14px; color: var(--text-md); line-height: 1.7;
}
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 18px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-card {
display: flex; align-items: flex-start; gap: 16px;
padding: 20px; background: var(--white); border-radius: var(--radius-md);
border: 1.5px solid var(--border); transition: var(--transition);
}
.contact-card:hover { border-color: var(--blue); transform: translateX(4px); }
.contact-card-icon {
width: 46px; height: 46px; border-radius: 12px; display: flex;
align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.contact-card-title { font-size: 13px; font-weight: 700; color: var(--text-md); text-transform: uppercase; letter-spacing: .5px; }
.contact-card-value { font-size: 15px; font-weight: 700; color: var(--text-dk); margin-top: 3px; }
.contact-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.contact-btn {
display: flex; align-items: center; gap: 10px; padding: 14px 20px;
border-radius: 50px; font-size: 14px; font-weight: 700; transition: var(--transition); justify-content: center;
}
.contact-btn-wa { background: #25D366; color: var(--white); }
.contact-btn-wa:hover { background: #20BA5A; transform: translateY(-2px); }
.contact-btn-call { background: var(--blue); color: var(--white); }
.contact-btn-call:hover { background: var(--blue-dk); transform: translateY(-2px); }
.contact-btn-demo { background: var(--orange); color: var(--white); }
.contact-btn-demo:hover { background: #C2410C; transform: translateY(-2px); }
.map-placeholder {
background: linear-gradient(135deg, #E0F2FE, #DBEAFE);
border-radius: var(--radius-lg); height: 280px; display: flex;
align-items: center; justify-content: center; flex-direction: column;
gap: 12px; border: 2px dashed rgba(37,99,235,.2);
}
.map-placeholder i { font-size: 40px; color: var(--blue); }
.map-placeholder h4 { font-size: 16px; font-weight: 700; color: var(--text-dk); }
.map-placeholder p { font-size: 13px; color: var(--text-md); text-align: center; }
.footer { background: #0F172A; color: rgba(255,255,255,.75); padding: 60px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand-name {
font-family: var(--font-head); font-size: 22px; font-weight: 800;
color: var(--white); margin-bottom: 10px;
}
.footer-brand-desc { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08);
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: rgba(255,255,255,.7); transition: var(--transition);
}
.footer-social a:hover { background: var(--blue); color: var(--white); transform: translateY(-3px); }
.footer-col-title { font-size: 13px; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 14px; color: rgba(255,255,255,.6); transition: var(--transition); }
.footer-col ul li a:hover { color: var(--white); padding-left: 4px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 10px; }
.footer-contact-item i { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-bottom p { font-size: 13px; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 13px; color: rgba(255,255,255,.5); transition: var(--transition); }
.footer-bottom-links a:hover { color: var(--white); }
.wa-float {
position: fixed; bottom: 28px; right: 28px; z-index: 9999;
width: 60px; height: 60px; border-radius: 50%;
background: #25D366; display: flex; align-items: center; justify-content: center;
font-size: 28px; color: var(--white); box-shadow: 0 6px 24px rgba(37,211,102,.5);
transition: var(--transition); animation: pulse-ring 2s infinite;
}
.wa-float:hover { transform: scale(1.1); background: #20BA5A; }
.wa-float-label {
position: absolute; right: 70px; white-space: nowrap;
background: var(--white); color: var(--text-dk); font-size: 13px; font-weight: 700;
padding: 8px 14px; border-radius: 50px; box-shadow: var(--shadow-md);
opacity: 0; pointer-events: none; transition: var(--transition);
}
.wa-float:hover .wa-float-label { opacity: 1; }
.success-msg {
display: none; background: var(--green-lt); border: 1.5px solid rgba(22,163,74,.2);
border-radius: 12px; padding: 16px 20px; color: var(--green); font-weight: 700;
font-size: 15px; text-align: center; margin-top: 12px; align-items: center; justify-content: center; gap: 8px;
}
.success-msg.show { display: flex; }
.mode-tags { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.mode-tags span { font-size:12px; font-weight:700; padding:4px 10px; border-radius:50px; background:var(--green-lt); color:var(--green); }
.course-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:28px; }
.course-filter button { border:2px solid var(--border); background:var(--white); color:var(--text-md); padding:9px 18px; border-radius:50px; font-weight:700; font-size:14px; cursor:pointer; transition:var(--transition); min-height:44px; }
.course-filter button:hover { border-color:var(--blue); color:var(--blue); }
.course-filter button.active { background:var(--blue); border-color:var(--blue); color:var(--white); }
.courses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.course-card { background:var(--white); border:2px solid var(--border); border-radius:var(--radius-md); padding:22px; display:flex; flex-direction:column; gap:10px; transition:var(--transition); position:relative; }
.course-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.course-card.hot { border-color:var(--orange); }
.course-badge { position:absolute; top:14px; right:14px; background:var(--orange); color:#fff; font-size:11px; font-weight:800; padding:3px 10px; border-radius:50px; }
.course-top { display:flex; align-items:center; gap:12px; }
.course-ico { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:26px; flex-shrink:0; }
.course-name { font-family:var(--font-head); font-size:17px; font-weight:800; line-height:1.2; padding-right:40px; }
.course-meta { font-size:12px; font-weight:700; color:var(--text-md); }
.course-fee { font-family:var(--font-head); font-size:26px; font-weight:800; color:var(--blue); }
.course-fee small { font-family:var(--font-body); font-size:12px; color:var(--text-md); font-weight:600; }
.course-card ul { display:flex; flex-direction:column; gap:6px; flex:1; }
.course-card li { font-size:13.5px; color:var(--text-md); display:flex; gap:8px; }
.course-card li::before { content:'✓'; color:var(--green); font-weight:800; }
.course-actions { display:flex; gap:8px; margin-top:6px; }
.course-actions a { flex:1; text-align:center; padding:10px; border-radius:50px; font-size:13px; font-weight:700; }
.course-actions .enrol { background:var(--blue); color:#fff; }
.course-actions .ask { background:#25D366; color:#fff; }
.pay-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:32px; align-items:start; }
.pay-card { background:linear-gradient(160deg,#064E3B,#047857); color:#fff; border-radius:var(--radius-lg); padding:30px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-lg); }
.pay-brand { font-family:var(--font-head); font-size:26px; font-weight:800; display:flex; align-items:center; gap:10px; }
.pay-logo { width:42px; height:42px; border-radius:12px; background:#fff; color:#047857; display:grid; place-items:center; font-weight:900; font-size:26px; }
.pay-row { display:flex; justify-content:space-between; gap:12px; background:rgba(255,255,255,.1); padding:12px 16px; border-radius:12px; flex-wrap:wrap; }
.pay-row span { opacity:.8; font-size:14px; }
.pay-row strong { font-size:18px; letter-spacing:.5px; }
.pay-copy { justify-content:center; background:#fff; color:#047857; }
.pay-copy:hover { background:#ECFDF5; }
.pay-steps { padding-left:20px; list-style:decimal; display:flex; flex-direction:column; gap:6px; font-size:14px; opacity:.95; }
.pay-form-card { border:1px solid var(--border); }
.pay-help { font-size:12.5px; color:var(--text-md); margin-top:10px; text-align:center; }
.field-err { color:var(--red); font-size:12px; min-height:14px; }
.form-field.invalid input, .form-field.invalid select { border-color:var(--red); }
.receipt-preview { max-height:160px; width:auto; border-radius:10px; border:1px solid var(--border); margin-top:6px; }
.playground { position:relative; height:340px; overflow:hidden; background:linear-gradient(#BAE6FD 0%,#E0F2FE 60%,#DCFCE7 60%); }
.pg-sky { position:absolute; inset:0; }
.pg-sun { position:absolute; top:26px; right:8%; width:64px; height:64px; border-radius:50%; background:#FDE047; box-shadow:0 0 40px #FACC15; animation:float 6s ease-in-out infinite; }
.pg-cloud { position:absolute; background:#fff; border-radius:50px; height:26px; opacity:.9; animation:drift linear infinite; }
.pg-cloud::before,.pg-cloud::after { content:''; position:absolute; background:#fff; border-radius:50%; }
.pg-cloud::before { width:34px; height:34px; top:-16px; left:14px; }
.pg-cloud::after { width:24px; height:24px; top:-10px; left:40px; }
.c1 { width:90px; top:40px; animation-duration:38s; }
.c2 { width:120px; top:80px; animation-duration:52s; animation-delay:-20s; }
.c3 { width:70px; top:24px; animation-duration:44s; animation-delay:-34s; }
.pg-kite { position:absolute; top:40px; left:22%; font-size:36px; animation:kite 5s ease-in-out infinite; }
.pg-birds { position:absolute; top:60px; font-size:20px; animation:drift 26s linear infinite; animation-delay:-8s; }
.pg-building { position:absolute; bottom:120px; left:50%; transform:translateX(-50%); width:min(420px,78vw); height:150px; background:linear-gradient(#2563EB,#1D4ED8); border-radius:14px 14px 0 0; box-shadow:0 -4px 0 #F59E0B inset; }
.pg-building::before { content:''; position:absolute; top:-26px; left:-12px; right:-12px; height:30px; background:#EA580C; clip-path:polygon(4% 100%,50% 0,96% 100%); }
.pg-sign { position:absolute; top:10px; left:50%; transform:translateX(-50%); background:#fff; color:#1E293B; font-family:var(--font-head); font-weight:800; font-size:15px; padding:4px 14px; border-radius:10px; white-space:nowrap; text-align:center; line-height:1.15; }
.pg-sign small { display:block; font-family:var(--font-body); font-size:10px; color:var(--blue); }
.pg-windows { position:absolute; top:58px; left:16px; right:16px; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.pg-windows span { background:#FEF9C3; border-radius:6px; height:34px; display:grid; place-items:center; font-size:18px; animation:glow 3s ease-in-out infinite; }
.pg-windows span:nth-child(2n) { animation-delay:1.2s; }
.pg-door { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:40px; height:44px; background:#78350F; border-radius:8px 8px 0 0; }
.pg-tree { position:absolute; bottom:112px; font-size:64px; transform-origin:bottom center; animation:sway 4s ease-in-out infinite; }
.t1 { left:4%; } .t2 { right:4%; animation-delay:-2s; }
.pg-swing { position:absolute; bottom:120px; left:17%; width:4px; height:90px; background:#78350F; transform-origin:top center; animation:swing 2.4s ease-in-out infinite; }
.pg-swing-seat { position:absolute; bottom:-22px; left:-14px; font-size:28px; }
.pg-ground { position:absolute; left:0; right:0; bottom:0; height:124px; background:linear-gradient(#4ADE80,#16A34A); }
.pg-ground::before { content:''; position:absolute; top:40px; left:0; right:0; height:36px; background:#FDBA74; border-top:3px dashed #fff; border-bottom:3px dashed #fff; }
.pg-track { position:absolute; top:28px; left:0; right:0; height:50px; }
.runner { position:absolute; font-size:38px; right:-60px; animation:run linear infinite; }
.r1 { animation-duration:9s; }
.r2 { animation-duration:11s; animation-delay:-4s; }
.r3 { animation-duration:8s; animation-delay:-6s; }
.r4 { animation-duration:6s; animation-delay:-2s; }
.r5 { animation-duration:13s; animation-delay:-9s; }
.runner::after { content:''; }
.pg-ball { position:absolute; bottom:44px; left:30%; font-size:26px; animation:ball 1.8s ease-in-out infinite; }
.pg-kid { position:absolute; bottom:14px; font-size:40px; }
.kick { left:24%; }
.jump { left:62%; animation:hop 1.2s ease-in-out infinite; }
.wave { left:78%; animation:bounce 1.6s ease-in-out infinite; }
.read { left:44%; animation:bounce 2.4s ease-in-out infinite; }
.pg-caption { position:absolute; bottom:4px; left:0; right:0; text-align:center; color:#fff; font-weight:800; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.35); padding:0 12px; }
@keyframes drift { from { left:-140px; } to { left:110%; } }
@keyframes run { from { right:-60px; } to { right:110%; } }
@keyframes kite { 0%,100% { transform:translate(0,0) rotate(-8deg); } 50% { transform:translate(30px,-14px) rotate(10deg); } }
@keyframes sway { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); } }
@keyframes swing { 0%,100% { transform:rotate(28deg); } 50% { transform:rotate(-28deg); } }
@keyframes ball { 0% { transform:translate(0,0) rotate(0); } 50% { transform:translate(110px,-50px) rotate(360deg); } 100% { transform:translate(220px,0) rotate(720deg); } }
@keyframes hop { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-26px) rotate(-15deg); } }
@keyframes glow { 0%,100% { background:#FEF9C3; } 50% { background:#FDE68A; } }
@media (max-width:768px) {
.pay-grid { grid-template-columns:1fr; }
.playground { height:300px; }
.pg-windows span { height:26px; font-size:14px; }
.pg-tree { font-size:48px; }
.pg-swing, .kick { display:none; }
.pg-sign { font-size:13px; }
}
@media (prefers-reduced-motion: reduce) {
.playground *, .playground *::before { animation:none !important; }
.runner { right:auto; }
.r1 { left:10%; } .r2 { left:30%; } .r3 { left:55%; } .r4 { left:72%; } .r5 { left:88%; }
}
.fee-poster { display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:36px; align-items:center; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; margin-bottom:44px; box-shadow:var(--shadow-md); }
.fee-poster-img { display:block; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-lg); transition:var(--transition); }
.fee-poster-img:hover { transform:translateY(-4px); }
.fee-poster-img img { width:100%; height:auto; }
.fee-poster-info h3 { font-family:var(--font-head); font-size:28px; font-weight:800; color:var(--text-dk); }
.fee-poster-info > p { color:var(--text-md); margin:4px 0 18px; }
.fee-rows { display:flex; flex-direction:column; gap:10px; }
.fee-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border-radius:12px; background:var(--bg); border-left:5px solid var(--c); font-weight:700; }
.fee-row strong { color:var(--c); font-family:var(--font-head); font-size:18px; }
.fee-row small { font-family:var(--font-body); font-size:12px; color:var(--text-md); font-weight:600; }
.fee-poster-btns { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.fee-poster-hint { font-size:12.5px; color:var(--text-lt); margin-top:10px; }
@media (max-width:860px) { .fee-poster { grid-template-columns:1fr; padding:16px; } .fee-poster-img { max-width:440px; margin:0 auto; } }
.join-section { background:linear-gradient(180deg,#EEF2FF 0%,#FFFFFF 100%); }
.join-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-bottom:44px; }
.join-card { background:var(--white); border:2px solid var(--border); border-radius:var(--radius-md); padding:24px; display:flex; flex-direction:column; gap:10px; transition:var(--transition); }
.join-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--blue); }
.join-ico { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:28px; }
.join-card h3 { font-family:var(--font-head); font-size:20px; font-weight:800; }
.join-card > p { font-size:14px; color:var(--text-md); }
.join-card ul { display:flex; flex-direction:column; gap:6px; flex:1; }
.join-card li { font-size:13.5px; color:var(--text-md); display:flex; gap:8px; }
.join-card li::before { content:'✓'; color:var(--green); font-weight:800; }
.join-apply { margin-top:8px; min-height:44px; border:0; border-radius:50px; background:var(--blue-lt); color:var(--blue); font-weight:800; font-size:14px; cursor:pointer; transition:var(--transition); }
.join-apply:hover { background:var(--blue); color:#fff; }
.join-form-wrap { display:grid; grid-template-columns:1fr 1.6fr; gap:40px; align-items:start; background:linear-gradient(135deg,var(--blue-dk),var(--purple)); border-radius:var(--radius-lg); padding:36px; }
.join-form-side { color:#fff; }
.join-form-side h3 { font-family:var(--font-head); font-size:30px; font-weight:800; }
.join-form-side > p { color:rgba(255,255,255,.85); margin-top:6px; }
.join-label { font-size:13px; font-weight:700; color:var(--text-md); }
.slot-checks { display:flex; flex-wrap:wrap; gap:8px; }
.slot-checks label { display:flex; align-items:center; gap:6px; border:1.5px solid var(--border); border-radius:50px; padding:8px 14px; font-size:14px; font-weight:600; cursor:pointer; background:var(--bg); }
.slot-checks label:has(input:checked) { border-color:var(--blue); background:var(--blue-lt); color:var(--blue); }
.join-only { display:none; }
.join-form-card.flash { animation:flash 1s ease; }
@keyframes flash { 0%{ box-shadow:0 0 0 0 rgba(250,204,21,.9);} 100%{ box-shadow:0 0 0 18px rgba(250,204,21,0);} }
@media (max-width:860px) { .join-form-wrap { grid-template-columns:1fr; padding:20px; } }
.nav-links a.nav-apply { background: var(--orange); color: #fff; }
.nav-links a.nav-apply:hover { background: #C2410C; color: #fff; }
.demo-form-link { display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.join-gform { margin-top:12px; background:#fff; color:var(--blue); border-color:#fff; }
.join-gform:hover { background:var(--blue-lt); color:var(--blue-dk); }
.apply-section { background: linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 60%); }
.apply-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:-24px auto 28px; max-width:920px; }
.apply-chips span { background:#fff; border:1.5px solid var(--border); border-radius:50px; padding:7px 14px; font-size:13.5px; font-weight:700; color:var(--text-dk); }
.apply-frame { max-width:760px; margin:0 auto; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); border:1px solid var(--border); overflow:hidden; }
.apply-frame iframe { display:block; width:100%; height:1250px; border:0; }
.apply-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px; }
.apply-note { text-align:center; color:var(--text-md); font-size:14px; margin-top:14px; }
@media (max-width:768px) { .apply-frame iframe { height:1450px; } .apply-chips { margin-top:-30px; } .apply-actions .btn { width:100%; justify-content:center; } }
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-blob { width: 340px; height: 340px; }
.hero-blob-inner { width: 295px; height: 295px; }
.hero-emoji-box { width: 68px; height: 68px; font-size: 26px; }
}
@media (max-width: 768px) {
.section { padding: 60px 0; }
.hero-inner { grid-template-columns: 1fr; }
.hero-visual { display: none; }
.hero { padding: 60px 0 50px; }
.about-grid { grid-template-columns: 1fr; }
.demo-inner { grid-template-columns: 1fr; }
.portal-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.nav-links { display: none; }
.nav-actions { display: none; }
.hamburger { display: flex; }
.topbar-left span:not(:first-child) { display: none; }
.form-grid { grid-template-columns: 1fr; }
.form-field.full { grid-column: 1; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
.hero-btns { flex-direction: column; }
.hero-stats { gap: 16px; }
.trust-badge-text { font-size: 12px; }
}

/* ==========================================================
   Backend features: ticker, announcements, articles, sub-pages
   (same colours, fonts and radii as the rest of the site)
   ========================================================== */
.ticker { background: var(--yellow-lt); border-bottom: 1px solid #FDE68A; font-size: 14px; }
.ticker .container { display: flex; align-items: center; gap: 12px; height: 42px; }
.ticker__label { flex-shrink: 0; background: var(--orange); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 5px 12px; border-radius: 50px; display: inline-flex; align-items: center; gap: 6px; }
.ticker__viewport { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__track { display: inline-flex; gap: 48px; white-space: nowrap; animation: ticker 40s linear infinite; padding-left: 100%; }
.ticker__track:hover { animation-play-state: paused; }
.ticker__track a { font-weight: 700; color: var(--text-dk); }
.ticker__track a:hover { color: var(--blue); text-decoration: underline; }
.ticker__track a.is-urgent { color: var(--red); }
@keyframes ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; padding-left: 0; } }

.chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 800; background: var(--blue-lt); color: var(--blue); }
.chip--gold { background: var(--orange-lt); color: var(--orange); }
.chip--red { background: #FEE2E2; color: var(--red); }

.notice-list { display: flex; flex-direction: column; gap: 14px; }
.notice { display: grid; grid-template-columns: 74px 1fr; gap: 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: var(--transition); }
.notice:hover { box-shadow: var(--shadow-md); border-color: var(--blue); }
.notice--urgent { border-left: 5px solid var(--red); background: #FFFBFB; }
.notice__date { background: var(--blue-lt); border-radius: 14px; text-align: center; padding: 10px 4px; align-self: start; }
.notice--urgent .notice__date { background: #FEE2E2; }
.notice__day { display: block; font-family: var(--font-head); font-size: 28px; font-weight: 800; line-height: 1; color: var(--blue); }
.notice--urgent .notice__day { color: var(--red); }
.notice__mon { display: block; font-size: 11px; font-weight: 700; color: var(--text-md); margin-top: 4px; }
.notice h3 { font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--text-dk); margin: 8px 0 4px; line-height: 1.3; }
.notice p { font-size: 14.5px; color: var(--text-md); line-height: 1.6; }
.notice__attach { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 800; color: var(--blue); }
.notice__attach::before { content: '📎'; }

.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.article-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--blue-lt); }
.article-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.article-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-lt); font-weight: 600; }
.article-card h3 { font-family: var(--font-head); font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--text-dk); }
.article-card p { font-size: 14px; color: var(--text-md); line-height: 1.6; }

.updates-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: start; }
.updates-col h3 { font-family: var(--font-head); font-size: 24px; font-weight: 800; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.updates-col h3 a { font-family: var(--font-body); font-size: 14px; font-weight: 800; color: var(--blue); }
.updates-col .articles-grid { grid-template-columns: 1fr 1fr; }

.page-hero { background: linear-gradient(135deg, #EEF2FF 0%, #DBEAFE 40%, #ECFDF5 100%); padding: 56px 0 48px; }
.page-hero h1 { font-family: var(--font-head); font-size: clamp(30px, 5vw, 46px); font-weight: 800; line-height: 1.15; margin: 6px 0 10px; }
.page-hero p { color: var(--text-md); font-size: 16px; line-height: 1.7; max-width: 660px; }
.crumbs { font-size: 14px; font-weight: 700; color: var(--text-md); }
.crumbs a { color: var(--blue); }
.crumbs span { margin: 0 6px; color: var(--text-lt); }
.narrow { max-width: 860px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chips button { border: 1.5px solid var(--border); background: var(--white); border-radius: 50px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--text-md); cursor: pointer; transition: var(--transition); }
.filter-chips button:hover { border-color: var(--blue); color: var(--blue); }
.filter-chips button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.search { position: relative; min-width: 240px; flex: 0 1 300px; }
.search input { width: 100%; border: 1.5px solid var(--border); border-radius: 50px; padding: 11px 18px 11px 42px; font-size: 14px; outline: none; }
.search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-lt); }
.load-more-wrap { text-align: center; margin-top: 32px; }
.empty { list-style: none; text-align: center; color: var(--text-md); padding: 36px 16px; background: var(--bg); border: 1.5px dashed var(--border); border-radius: var(--radius-md); }
.skeleton { list-style: none; min-height: 110px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--bg) 25%, #EEF2F7 50%, var(--bg) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.demo-note { background: var(--yellow-lt); border: 1px solid #FDE68A; color: #92400E; border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }

.article-head { max-width: 820px; margin: 0 auto; padding: 44px 0 28px; }
.article-head h1 { font-family: var(--font-head); font-size: clamp(28px, 4.6vw, 44px); font-weight: 800; line-height: 1.2; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-md); font-size: 14px; font-weight: 600; margin-top: 12px; }
.article-cover { width: 100%; max-width: 1000px; margin: 0 auto 36px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 44px; max-width: 1000px; margin: 0 auto; }
.prose { font-size: 17px; line-height: 1.8; color: var(--text-dk); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-family: var(--font-head); font-size: 28px; font-weight: 800; margin-top: 1.4em; line-height: 1.25; }
.prose h3 { font-family: var(--font-head); font-size: 22px; font-weight: 800; margin-top: 1.2em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--blue); text-decoration: underline; }
.prose blockquote { border-left: 5px solid var(--orange); background: var(--orange-lt); padding: 14px 20px; border-radius: 0 12px 12px 0; font-weight: 700; }
.prose img { border-radius: var(--radius-md); margin: 1.2em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.share { position: sticky; top: 100px; align-self: start; }
.share h2 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-md); margin-bottom: 12px; }
.share__btns { display: flex; flex-direction: column; gap: 8px; }
.share__btns a, .share__btns button { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--border); background: var(--white); border-radius: 50px; padding: 9px 16px; font-size: 14px; font-weight: 700; color: var(--text-dk); cursor: pointer; transition: var(--transition); }
.share__btns a:hover, .share__btns button:hover { border-color: var(--blue); color: var(--blue); }
.share__btns svg { width: 18px; height: 18px; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1024px) { .articles-grid { grid-template-columns: 1fr 1fr; } .updates-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .article-layout { grid-template-columns: 1fr; }
  .share { position: static; }
  .share__btns { flex-direction: row; flex-wrap: wrap; }
  .ticker .container { height: 38px; font-size: 13px; }
}
@media (max-width: 600px) {
  .articles-grid, .updates-col .articles-grid { grid-template-columns: 1fr; }
  .notice { grid-template-columns: 60px 1fr; gap: 14px; padding: 16px; }
  .search { flex: 1 1 100%; }
}
.btn[hidden], .ticker[hidden] { display: none; }
.page-hero + .section { padding-top: 44px; }

/* ==========================================================
   Online Classroom offer (home page band, strip, pop-up, classroom.html)
   ========================================================== */
.nav-links .nav-offer { color: var(--orange); font-weight: 800; }
.mobile-menu .mm-offer { color: var(--orange); font-weight: 800; background: var(--orange-lt); }
.offer-strip { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 9px 16px; background: linear-gradient(90deg, #0F5132, #16A34A 55%, #EA580C); color: #fff; font-size: 14px; text-align: center; }
.offer-strip b { color: #FFE08A; }
.offer-strip__cd b { font-variant-numeric: tabular-nums; }
.offer-strip__go { background: #fff; color: var(--orange); font-weight: 800; padding: 3px 12px; border-radius: 50px; }
.offer-strip:hover .offer-strip__go { background: var(--orange-lt); }
.offer-strip__fire { animation: flick 1.2s infinite alternate; }
@keyframes flick { to { transform: scale(1.2); } }

.cr-badge { display: inline-block; background: #FFD166; color: #3B2A00; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: 50px; }
.cr-cd b, .cr-seats b { font-variant-numeric: tabular-nums; color: #FFD166; }

.offer-band { background: radial-gradient(circle at 10% 10%, rgba(255,209,102,.35), transparent 40%), linear-gradient(135deg, #064E3B 0%, #15803D 50%, #1D4ED8 100%); color: #E7F7EE; padding: 64px 0; }
.offer-band__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.offer-band h2 { font-family: var(--font-head); font-size: clamp(28px, 4vw, 42px); color: #fff; line-height: 1.15; margin: 14px 0 10px; }
.offer-band__text > p { font-size: 17px; opacity: .92; }
.offer-band__perks { display: grid; gap: 8px; margin: 18px 0; }
.offer-band__perks li { display: flex; gap: 10px; align-items: baseline; }
.offer-band__perks i { color: #FFD166; }
.offer-band__range { font-weight: 700; }
.offer-band__box { background: #fff; color: var(--text-dk); border-radius: var(--radius-lg); padding: 30px 26px; text-align: center; box-shadow: var(--shadow-lg); display: grid; gap: 12px; justify-items: center; }
.offer-band__box .cr-cd, .offer-band__box .cr-seats { color: var(--text-md); font-weight: 700; margin: 0; }
.offer-band__box .cr-cd b, .offer-band__box .cr-seats b { color: var(--orange); }
.offer-band__price { display: grid; justify-items: center; }
.offer-band__price s { color: var(--text-lt); font-size: 18px; }
.offer-band__price b { font-family: var(--font-head); font-size: 52px; line-height: 1; color: var(--green); }
.offer-band__price > span { color: var(--text-md); font-weight: 700; }
.offer-band__price b span { color: inherit; font: inherit; }
.offer-band__more { color: var(--blue); font-weight: 700; }

.offer-pop { margin: auto; border: 0; padding: 0; border-radius: 24px; width: min(420px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); overflow: hidden; }
.offer-pop::backdrop { background: rgba(15, 23, 42, .55); }
.offer-pop__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 22px; cursor: pointer; z-index: 1; }
.offer-pop__top { background: linear-gradient(135deg, #064E3B, #16A34A 60%, #EA580C); padding: 26px 20px 20px; text-align: center; }
.offer-pop__emoji { font-size: 40px; margin-top: 8px; }
.offer-pop__badge { display: inline-block; background: #FFD166; color: #3B2A00; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 50px; }
.offer-pop__body { padding: 20px 24px 24px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.offer-pop h2 { font-family: var(--font-head); font-size: 24px; line-height: 1.2; }
.offer-pop p { color: var(--text-md); }
.offer-pop__price { display: flex; gap: 8px; align-items: baseline; }
.offer-pop__price s { color: var(--text-lt); }
.offer-pop__price b { font-family: var(--font-head); font-size: 40px; color: var(--green); line-height: 1; }
.offer-pop__small { font-weight: 700; font-size: 14px; }
.offer-pop__cd b { color: var(--orange); font-variant-numeric: tabular-nums; }
.offer-pop__later { background: none; border: 0; color: var(--text-md); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }

/* classroom.html */
.cr-hero { background: radial-gradient(circle at 85% 15%, rgba(255,209,102,.3), transparent 35%), linear-gradient(135deg, #064E3B 0%, #15803D 55%, #1D4ED8 100%); color: #E7F7EE; padding: 48px 0 64px; }
.cr-hero .crumbs, .cr-hero .crumbs a { color: #BBF7D0; }
.cr-hero .crumbs { margin-bottom: 16px; }
.cr-hero__inner { display: grid; grid-template-columns: 1.3fr .9fr; gap: 40px; align-items: center; }
.cr-hero h1 { font-family: var(--font-head); font-size: clamp(30px, 5vw, 48px); line-height: 1.1; color: #fff; margin: 14px 0 10px; }
.cr-hero__sub { font-size: 18px; opacity: .92; max-width: 560px; }
.cr-price { display: flex; gap: 10px; align-items: baseline; margin: 20px 0 8px; flex-wrap: wrap; }
.cr-price s { opacity: .7; font-size: 20px; }
.cr-price b { font-family: var(--font-head); font-size: 56px; line-height: 1; color: #FFD166; }
.cr-price > span { font-weight: 700; }
.cr-meta { display: flex; gap: 10px 18px; flex-wrap: wrap; font-weight: 700; margin-bottom: 22px; }
.cr-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.cr-closed { margin-top: 16px; background: rgba(0,0,0,.2); padding: 12px 16px; border-radius: 12px; font-weight: 700; }
.cr-phone { justify-self: center; width: 280px; background: #0F172A; border-radius: 36px; padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.cr-phone__screen { background: #F8FAFC; border-radius: 26px; padding: 14px 12px 18px; display: grid; gap: 10px; }
.cr-phone__bar { background: #15803D; color: #fff; font-weight: 800; text-align: center; border-radius: 14px; padding: 8px; font-size: 14px; }
.cr-msg { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; display: grid; gap: 4px; color: var(--text-dk); font-size: 13px; box-shadow: var(--shadow-sm); }
.cr-msg b { font-size: 13px; }
.cr-msg em { color: var(--green); font-style: normal; font-weight: 700; font-size: 12px; }
.cr-msg--dua span { font-size: 18px; color: #0F3D24; text-align: right; }
.cr-msg--me { background: #1D4ED8; color: #fff; border-color: #1D4ED8; margin-left: 24px; }
.cr-msg--fb { background: #FFFBEB; border-color: #FDE68A; margin-right: 24px; }
.cr-wave { display: flex; gap: 3px; align-items: center; height: 22px; }
.cr-wave s { display: block; width: 4px; border-radius: 3px; background: currentColor; opacity: .7; height: 40%; animation: wave 1s ease-in-out infinite; }
.cr-msg--dua .cr-wave { color: var(--green); }
.cr-wave s:nth-child(2n) { animation-delay: .15s; } .cr-wave s:nth-child(3n) { animation-delay: .3s; } .cr-wave s:nth-child(4n) { animation-delay: .45s; }
@keyframes wave { 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .cr-wave s, .offer-strip__fire { animation: none; height: 70%; } }

.cr-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px; }
.cr-steps li { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 18px; box-shadow: var(--shadow-sm); }
.cr-steps span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green-lt); color: var(--green); font-weight: 900; font-size: 18px; margin-bottom: 10px; }
.cr-steps b { font-family: var(--font-head); font-size: 19px; display: block; margin-bottom: 4px; }
.cr-steps p { color: var(--text-md); font-size: 15px; }
.cr-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.cr-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); }
.cr-card h3 { font-family: var(--font-head); font-size: 22px; margin-bottom: 12px; }
.cr-perks { display: grid; gap: 10px; }
.cr-perks li { display: flex; gap: 10px; align-items: baseline; }
.cr-perks i { color: var(--green); }
.cr-classes { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-classes span { background: var(--blue-lt); color: var(--blue-dk); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 50px; }
.cr-note { color: var(--text-md); font-size: 14px; margin-top: 12px; }
.cr-note a { color: var(--blue); font-weight: 700; }
.cr-enrol { display: grid; grid-template-columns: .9fr 1.3fr; gap: 32px; align-items: start; }
.cr-paysteps { margin: 18px 0 0 20px; display: grid; gap: 8px; color: var(--text-md); }
.cr-form { margin: 0; }
.cr-submit { width: 100%; justify-content: center; margin-top: 16px; }
.cr-err { color: var(--red); font-weight: 700; margin-top: 12px; }
.cr-done { background: #fff; border-radius: var(--radius-lg); padding: 36px 28px; text-align: center; box-shadow: var(--shadow-md); display: grid; gap: 12px; justify-items: center; }
.cr-done__ic { font-size: 48px; }
.cr-done h3 { font-family: var(--font-head); font-size: 26px; }
.cr-faq { max-width: 760px; }
.cr-faq details { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; margin-top: 12px; }
.cr-faq summary { font-weight: 800; cursor: pointer; }
.cr-faq details p { margin-top: 8px; color: var(--text-md); }

@media (max-width: 900px) {
  .offer-band__inner, .cr-hero__inner, .cr-enrol, .cr-grid { grid-template-columns: 1fr; }
  .cr-steps { grid-template-columns: 1fr 1fr; }
  .cr-phone { display: none; }
}
@media (max-width: 560px) {
  .cr-steps { grid-template-columns: 1fr; }
  .offer-band { padding: 44px 0; }
  .offer-strip { font-size: 13px; gap: 6px 10px; }
}
.cr-done[hidden], .offer-band[hidden] { display: none; }

/* Silver / Gold / Diamond packages */
.cr-price > span:first-child { font-weight: 700; opacity: .9; }
.cr-demo { font-weight: 700; margin: 0 0 18px; }
.cr-demo a { color: #FFD166; text-decoration: underline; }
.offer-band__box .cr-demo { color: var(--green); margin: 0; }
.offer-band__tiers { font-weight: 800; color: var(--text-dk); margin: 0; }
.offer-band__price > span:first-child { font-size: 14px; }
.offer-pop__price > span:first-child { color: var(--text-md); font-weight: 700; }
.pkg-switch { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.pkg-switch button { border: 2px solid var(--border); background: #fff; color: var(--text-dk); font: 800 15px var(--font-body); padding: 10px 18px; border-radius: 50px; cursor: pointer; }
.pkg-switch button[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pkg { position: relative; background: #fff; border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); }
.pkg--silver { border-color: #CBD5E1; }
.pkg--gold { border-color: #F59E0B; box-shadow: 0 10px 30px rgba(245,158,11,.18); transform: translateY(-6px); }
.pkg--diamond { border-color: #0891B2; background: linear-gradient(180deg, #ECFEFF, #fff 40%); }
.pkg__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: #F59E0B; color: #fff; font: 800 12px var(--font-body); text-transform: uppercase; letter-spacing: .06em; padding: 5px 14px; border-radius: 50px; white-space: nowrap; }
.pkg__head { display: flex; align-items: center; gap: 10px; }
.pkg__ic { font-size: 30px; }
.pkg h3 { font-family: var(--font-head); font-size: 26px; }
.pkg__price b { font-family: var(--font-head); font-size: 38px; color: var(--text-dk); line-height: 1; }
.pkg__price span { color: var(--text-md); font-weight: 700; margin-left: 4px; }
.pkg ul { display: grid; gap: 9px; flex: 1; }
.pkg li { display: flex; gap: 9px; align-items: baseline; color: var(--text-md); font-size: 15px; }
.pkg li i { color: var(--green); font-size: 12px; }
.pkg__go { justify-content: center; width: 100%; }
.cr-amt { background: var(--green-lt); color: var(--green); border-radius: 10px; padding: 10px 14px; font-weight: 700; display: block; }
@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; } .pkg--gold { transform: none; } }

/* accepted wallets */
.wallets { display: flex; flex-wrap: wrap; gap: 6px; }
.wallets .w { font-weight: 800; font-size: 13px; padding: 5px 11px; border-radius: 50px; background: #fff; }
.w--naya { color: #E4572E; } .w--sada { color: #0F9D8A; } .w--ep { color: #16A34A; } .w--jc { color: #B91C1C; }

/* ==========================================================
   Floating WhatsApp button — responsive fix
   • ring pulse no longer scales the button (no jumpy / clipped edge)
   • respects phone safe areas (notch / home bar)
   • smaller on tablets and phones so it covers less content
   • footer gets extra space at the bottom so the button
     never sits on top of the last line of text
   ========================================================== */
@keyframes wa-ring {
  0%   { box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 0 rgba(37,211,102,0); }
}
.wa-float {
  --wa-size: 60px;
  --wa-gap: 24px;
  width: var(--wa-size); height: var(--wa-size);
  right: calc(var(--wa-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--wa-gap) + env(safe-area-inset-bottom, 0px));
  line-height: 1; font-size: calc(var(--wa-size) * .5);
  border: 3px solid #fff;
  box-sizing: border-box; overflow: visible;
  animation: wa-ring 2.2s ease-out infinite;
  transform: none; will-change: box-shadow;
  -webkit-tap-highlight-color: transparent;
}
.wa-float i { display: block; line-height: 1; }
.wa-float:hover, .wa-float:focus-visible { transform: translateY(-3px); background: #20BA5A; }
.wa-float:focus-visible { outline: 3px solid rgba(37,211,102,.45); outline-offset: 3px; }
.wa-float-label { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.footer { padding-bottom: 0; }
.footer-bottom { padding-bottom: calc(20px + var(--wa-space, 84px)); }

@media (max-width: 1024px) {
  .wa-float { --wa-size: 56px; --wa-gap: 20px; }
}
@media (max-width: 768px) {
  .wa-float { --wa-size: 52px; --wa-gap: 16px; border-width: 2px; }
  .wa-float-label { display: none; }
  .footer-bottom { --wa-space: 76px; }
}
@media (max-width: 400px) {
  .wa-float { --wa-size: 48px; --wa-gap: 14px; }
}
@media (hover: none) {
  .wa-float-label { display: none; }
  .wa-float:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
}
@media print { .wa-float { display: none !important; } }

/* ==========================================================
   Header menu — fit on laptop / desktop screens
   The 10 menu links + buttons were wider than the page on
   1280–1440px screens, pushing the page sideways. Tighter
   links, an icon-only WhatsApp button, and the ☰ menu up to
   1240px keep everything inside the page at every width.
   ========================================================== */
@media (min-width: 1025px) {
  .nav-inner { gap: 10px; }
  .nav-links { gap: 1px; }
  .nav-links a { padding: 8px 7px; font-size: 13px; }
  .nav-actions { flex-shrink: 0; }
  .nav-wa { font-size: 0; gap: 0; width: 40px; height: 40px; padding: 0; justify-content: center; flex-shrink: 0; }
  .nav-wa i { font-size: 20px; }
  .nav-demo { white-space: nowrap; padding: 9px 14px; }
}
@media (max-width: 1240px) {
  .nav-links, .nav-actions { display: none; }
  .hamburger { display: flex; }
}

/* ==========================================================
   Mobile: stop sections spilling past the screen edge
   Grid columns stretched to their widest item (forms, pay
   card, long buttons) so pages scrolled sideways on phones.
   ========================================================== */
html { overflow-x: clip; }
.demo-inner > *, .contact-grid > *, .pay-grid > *, .join-form-wrap > *,
.about-grid > *, .portal-grid > *, .footer-grid > *, .hero-inner > *, .form-grid > * { min-width: 0; }
input, select, textarea { max-width: 100%; }
.programs-grid, .testi-grid, .join-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.courses-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.age-grid, .why-grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.slots-grid, .pricing-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.charts-grid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.footer-bottom-links { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 768px) {
  .section-title, .section-subtitle, .pay-card, .contact-info, .demo-form-card { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; justify-content: center; }
  .ish-credit, .ish-credit a { white-space: normal !important; }
}
@media (max-width: 380px) {
  .nav-logo { gap: 8px; min-width: 0; }
  .nav-logo-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
  .nav-logo-text { font-size: 15px; min-width: 0; }
  .nav-logo-text span { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hamburger { flex-shrink: 0; }
}