:root {
    --primary-color: #7c4dff; /* purple-primary */
    --accent-color: #00c9b7; /* teal accent */
    --background-color: #05070f; /* dark page background */
    --section-bg: #061028; /* slightly lighter sections */
    --text-color: #e7efff; /* bright text */
    --text-light: #9fb0d6; /* muted text */
    --border-color: rgba(255,255,255,0.06);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.6;
    overflow-x: hidden;
}

.fa-search,
.fa-spinner,
.fa-spin {
    animation: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-loader {
    position: fixed;
    inset: 0;
background: rgba(5, 7, 15, 0.95); /* dark overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.page-loader.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-ring {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(37, 99, 235, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* HEADER */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 100;
    transition: all 0.3s ease;
}

.header.sticky {
    position: sticky;
    top: 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.logo-highlight {
    color: var(--accent-color);
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

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

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-icon-white, .btn-icon-green {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-icon-white {
    background: #f0f4f8;
    color: var(--text-color);
}

.btn-icon-white:hover {
    background: var(--primary-color);
    color: white;
}

.btn-icon-green {
    background: #25D366;
    color: white;
}

.btn-icon-green:hover {
    background: #20BA5A;
    transform: scale(1.1);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu {
    display: none;
    background: rgba(7, 8, 23, 0.96);
    padding: 1rem;
    list-style: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-md);
    z-index: 99;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-menu a {
    color: #f9fbff;
    text-decoration: none;
    font-weight: 500;
}

/* BUTTONS */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ea580c 100%);
    color: white;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-success {
    background: #25D366;
    color: white;
}

.btn-success:hover {
    background: #20BA5A;
    transform: translateY(-2px);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-block {
    width: 100%;
    display: block;
}

/* SECTIONS */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.section-subtitle {
    font-size: 1.1rem;
    text-align: center;
    color: var(--text-light);
    margin-bottom: 3rem;
}

section {
    padding: 5rem 0;
}

section:nth-child(even) {
    background: var(--section-bg);
}

/* HERO */
.hero {
    background: linear-gradient(135deg, #f0f9ff 0%, #f0fdf4 100%);
    padding: 8rem 0;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.hero-features {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.feature i {
    color: var(--accent-color);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.hero-image {
    text-align: center;
    position: relative;
}

.teacher-illustration i {
    color: var(--primary-color);
    opacity: 0.2;
}

/* FEATURES GRID */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    background: white;
    box-shadow: var(--shadow-sm);
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.feature-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/* SUBJECTS */
.subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.subject-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.subject-card:hover {
    border-color: var(--accent-color);
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.subject-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    display: block;
}

/* TIMELINE */
.timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
}

.timeline-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.timeline-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.timeline-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.timeline-item h3 {
    margin-bottom: 0.5rem;
}

/* STATS */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.stat-card {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: 600;
}

.stat-special {
    font-size: 2.5rem;
}

/* REVIEWS */
.reviews-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.review-card {
    padding: 2rem;
    border-radius: 12px;
    background: white;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    min-width: 300px;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.review-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.review-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.review-header h4 {
    margin: 0;
}

.stars {
    color: #fbbf24;
    font-size: 0.9rem;
}

.review-card p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* CITIES */
.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.city-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.city-card:not(.coming-soon):hover {
    border-left-color: var(--primary-color);
    transform: translateX(5px);
}

.city-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.city-card:not(.coming-soon) .city-icon {
    color: var(--primary-color);
}

.coming-soon .city-icon {
    color: var(--text-light);
}

.city-card h3 {
    margin-bottom: 0.5rem;
}

/* FAQ */
.faq-container {
    max-width: 800px;
    margin: 3rem auto;
}

.faq-item {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.faq-question {
    width: 100%;
    padding: 1.5rem;
    background: white;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: var(--section-bg);
}

.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question {
    background: var(--primary-color);
    color: white;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 1.5rem;
    background: var(--section-bg);
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
    line-height: 1.8;
}

.faq-item.active .faq-answer {
    display: block;
}

/* FORMS */
.enquiry-form, .teacher-registration {
    background: var(--section-bg);
    padding: 5rem 0;
}

.form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.form-multi-step {
    display: position: relative;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.form-step h3 {
    margin-bottom: 2rem;
    color: var(--text-color);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.form-actions .btn {
    flex: 1;
}

/* CTA */
.cta {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    background: white;
    color: var(--primary-color);
    font-weight: 700;
}

.cta-buttons .btn:hover {
    transform: scale(1.05);
}

/* FOOTER */
.footer {
    background: #0f172a;
    color: white;
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-col h4, .footer-col h5 {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.75rem;
}

.footer-col a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--accent-color);
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

/* FLOATING BUTTONS */
.floating-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.floating-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
    animation: float 3s ease-in-out infinite;
}

.floating-btn.whatsapp {
    background: #25D366;
    color: white;
}

.floating-btn.call {
    background: #0088cc;
    color: white;
}

.floating-btn:hover {
    transform: scale(1.15);
}

/* Mobile: align floating buttons in a single horizontal row and center them */
@media (max-width: 768px) {
    .floating-buttons {
        right: 50%;
        left: auto;
        transform: translateX(50%);
        bottom: 14px;
        flex-direction: row;
        gap: 0.75rem;
        padding: 0 6px;
        align-items: center;
    }

    .floating-btn {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

    .floating-btn.whatsapp, .floating-btn.call, .floating-btn.apply-now {
        border-radius: 10px;
        padding: 0.4rem;
    }
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* RESPONSIVENESS */
@media (max-width: 768px) {
    .nav-list {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .hero-content {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .features-grid, .subjects-grid, .stats-grid, .timeline {
        grid-template-columns: 1fr;
    }

    .form-wrapper {
        padding: 1.5rem;
    }

    .cta h2 {
        font-size: 1.8rem;
    }

    .cta-buttons {
        flex-direction: column;
    }

    section {
        padding: 3rem 0;
    }
}

/* Vibrant, premium typography and colour system */
:root {
    --primary-color: #4338ca;
    --primary-dark: #211b58;
    --accent-color: #f04f78;
    --accent-soft: #fff0f4;
    --background-color: #fffdfb;
    --section-bg: #f7f6ff;
    --text-color: #20213c;
    --text-light: #666982;
    --border-color: #e4e4f2;
    --shadow-sm: 0 1px 2px rgba(35, 27, 88, .05);
    --shadow-md: 0 14px 32px rgba(49, 43, 120, .10);
    --shadow-lg: 0 24px 50px rgba(49, 43, 120, .16);
}

body { font-family: 'Outfit', sans-serif; font-size: 16px; letter-spacing: 0; }
h1, h2 { letter-spacing: -.045em; }
h3, h4 { letter-spacing: -.02em; }
.logo-mark { background: linear-gradient(135deg, #635bff, #3730a3); box-shadow: 0 9px 19px rgba(67, 56, 202, .28); }
.nav-link { color: #51536d; font-size: .88rem; font-weight: 600; }
.btn-primary { background: linear-gradient(135deg, #635bff, #4338ca); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 13px 24px rgba(67, 56, 202, .28); }
.btn-secondary { background: linear-gradient(135deg, #ff6b8f, #e83467); }
.btn-secondary:hover { background: #d62959; box-shadow: 0 13px 24px rgba(240, 79, 120, .28); }
.btn-success, .btn-icon-green { background: #00a989; }
.btn-success:hover { background: #00866d; }
.btn-icon-white { background: #f0efff; color: var(--primary-color); }

.hero {
    background: radial-gradient(circle at 84% 16%, rgba(240,79,120,.21), transparent 22rem), radial-gradient(circle at 65% 90%, rgba(99,91,255,.13), transparent 25rem), linear-gradient(118deg, #f7f7ff 0%, #fffdfb 54%, #fff4f7 100%);
}
.hero::before { border-color: rgba(67,56,202,.13); box-shadow: 0 0 0 2.7rem rgba(67,56,202,.04), 0 0 0 5.4rem rgba(240,79,120,.025); }
.feature { border-color: #e1dff6; background: rgba(255,255,255,.72); }
.feature i { color: #00a989; }
.teacher-illustration { background: linear-gradient(135deg, #e4e1ff, #ffd6e1); box-shadow: inset 0 0 0 1px rgba(67,56,202,.1), 0 30px 45px rgba(67,56,202,.16); }
.feature-icon { background: #eeedff; }
.feature-card:nth-child(2n) .feature-icon { color: var(--accent-color); background: var(--accent-soft); }
.subjects { background: linear-gradient(125deg, #211b58, #3730a3) !important; }
.subject-card i { color: #ff9cb5; }
.statistics { background: linear-gradient(135deg, #f0efff, #fff6f8); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(99,91,255,.14); }
.cta { background: radial-gradient(circle at 15% 110%, rgba(240,79,120,.48), transparent 20rem), linear-gradient(115deg, var(--primary-dark), var(--primary-color)); }

/* Axra-inspired dark neon experience */
:root {
    --primary-color: #7c4dff;
    --primary-dark: #07091c;
    --accent-color: #bd5cff;
    --accent-soft: rgba(139, 92, 246, .14);
    --background-color: #060817;
    --section-bg: #090b20;
    --text-color: #f8f7ff;
    --text-light: #b1b4cc;
    --border-color: rgba(161, 137, 255, .20);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
    --shadow-md: 0 16px 38px rgba(0, 0, 0, .28);
    --shadow-lg: 0 22px 55px rgba(79, 54, 196, .24);
}

body { color: var(--text-color); background: var(--background-color); }
body::before {
    content: '';
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 80% 2%, rgba(82, 53, 225, .16), transparent 25rem), radial-gradient(circle at 5% 45%, rgba(193, 92, 255, .08), transparent 24rem);
}

.header {
    background: rgba(6, 8, 23, .88);
    border-bottom: 1px solid rgba(154, 120, 255, .17);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.logo-mark { background: linear-gradient(135deg, #b55cff, #496cff); box-shadow: 0 8px 22px rgba(145, 83, 255, .43); }
.logo-text { color: #fff; }
.logo-highlight { color: #bd73ff; }
.nav-link { color: #c5c7d8; }
.nav-link:hover { color: #b86cff; }
.btn-icon-white { color: #e6deff; background: rgba(133, 95, 245, .12); }

section, section:nth-child(even) { background: transparent; }
.section-title, .hero-title { color: #fff; }
.section-title { font-family: 'Outfit', sans-serif; font-weight: 800; }
.section-subtitle, .hero-subtitle { color: #b7bad0; }
.section-title::after {
    content: '';
    display: block;
    width: 8rem;
    height: .32rem;
    margin: 1.15rem auto 0;
    border-radius: 2rem;
    background: linear-gradient(90deg, #c45dff, #4e76ff);
    box-shadow: 0 0 16px rgba(153, 94, 255, .7);
}

.hero {
    background: radial-gradient(circle at 85% 12%, rgba(82, 67, 255, .34), transparent 21rem), radial-gradient(circle at 68% 85%, rgba(197, 83, 255, .14), transparent 23rem), #07091c;
    border-bottom: 1px solid rgba(135, 105, 249, .15);
}
.hero::before { border-color: rgba(135, 105, 249, .22); box-shadow: 0 0 0 2.7rem rgba(101, 74, 238, .06), 0 0 0 5.4rem rgba(164, 79, 255, .025); }
.hero-title { font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: -.055em; }
.hero-subtitle { font-size: 1.14rem; }
.feature { color: #e2e3ef; background: rgba(255, 255, 255, .04); border-color: rgba(173, 150, 255, .18); }
.feature i { color: #75f2c5; }
.teacher-illustration {
    color: #fff;
    background: radial-gradient(circle at 35% 28%, #b162ff 0, #6955f5 32%, #142147 74%);
    box-shadow: inset 0 0 0 1px rgba(207, 184, 255, .28), 0 0 0 11px rgba(102, 69, 233, .08), 0 26px 58px rgba(53, 39, 174, .50);
}
.teacher-illustration i { color: #fff; text-shadow: 0 0 32px rgba(255, 255, 255, .35); }

.btn-primary { background: linear-gradient(100deg, #b55cff, #6b55ff); box-shadow: 0 10px 26px rgba(130, 75, 255, .34); }
.btn-primary:hover { background: linear-gradient(100deg, #c271ff, #7380ff); box-shadow: 0 12px 32px rgba(130, 75, 255, .55); }
.btn-secondary { background: transparent; border: 1px solid #a967ff; color: #e4c7ff; }
.btn-secondary:hover { background: rgba(177, 92, 255, .16); color: white; }
.btn-success { background: transparent; color: #5ce5b7; border: 1px solid rgba(68, 224, 164, .58); }
.btn-success:hover { background: rgba(40, 202, 140, .14); }

.feature-card, .subject-card, .timeline-item, .stat-card, .review-card, .city-card, .faq-item, .form-wrapper {
    background: linear-gradient(135deg, rgba(24, 26, 56, .90), rgba(11, 13, 33, .94));
    border-color: rgba(158, 130, 255, .19);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), var(--shadow-md);
}
.feature-card:hover, .timeline-item:hover, .stat-card:hover, .review-card:hover, .city-card:hover {
    border-color: rgba(184, 105, 255, .62);
    box-shadow: 0 20px 48px rgba(36, 17, 92, .38), inset 0 1px 0 rgba(255,255,255,.07);
}
.feature-card h3, .timeline-content h3, .city-card h3, .stat-label { color: #fff; }
.feature-card p, .timeline-content p, .city-card p, .review-card p { color: #afb2c9; }
.feature-icon { color: #c980ff; background: rgba(151, 86, 255, .14); }
.feature-card:nth-child(2n) .feature-icon { color: #7ea1ff; background: rgba(77, 106, 255, .15); }

.subjects { background: radial-gradient(circle at 10% 50%, rgba(128, 70, 248, .24), transparent 21rem), #080a1d !important; border-block: 1px solid rgba(154, 120, 255, .13); }
.subjects .section-subtitle { color: #afb2cb; }
.subject-card { background: rgba(255, 255, 255, .045); border-color: rgba(177, 147, 255, .21); }
.subject-card i { color: #bc75ff; }
.subject-card:hover { background: linear-gradient(135deg, #9d5aff, #586bff); color: #fff; box-shadow: 0 15px 28px rgba(112, 70, 244, .35); }
.subject-card:hover i { color: #fff; }

.statistics { background: radial-gradient(circle at 83% 0, rgba(110, 80, 255, .18), transparent 22rem), transparent; }
.stat-number { color: #bd73ff; text-shadow: 0 0 18px rgba(182, 91, 255, .35); }
.timeline-dot, .timeline-number { color: #fff; background: linear-gradient(135deg, #bb5bff, #586bff); box-shadow: 0 8px 20px rgba(116, 73, 239, .34); }

.faq-question { background: transparent; color: #f2f1ff; }
.faq-question:hover { background: rgba(137, 97, 255, .09); }
.faq-item.active .faq-question { background: linear-gradient(100deg, rgba(151, 80, 255, .85), rgba(79, 93, 236, .85)); }
.faq-answer { background: rgba(6, 8, 23, .65); border-color: rgba(158, 130, 255, .15); color: #b9bdd0; }

.student-enquiry, .teacher-registration { background: radial-gradient(circle at 25% 40%, rgba(158, 77, 255, .12), transparent 24rem) !important; }
.multi-step-form h3, .form-group label { color: #f5f4ff; }
.form-group input, .form-group select, .form-group textarea { color: #fff; background: rgba(4, 6, 20, .54); border-color: rgba(165, 137, 255, .25); }
.form-group input::placeholder, .form-group textarea::placeholder { color: #7e829d; }
.form-group select option { background: #14162d; color: #fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #a966ff; box-shadow: 0 0 0 3px rgba(169, 102, 255, .16), 0 0 20px rgba(119, 78, 241, .16); }

.cta { background: radial-gradient(circle at 12% 110%, rgba(204, 90, 255, .52), transparent 20rem), radial-gradient(circle at 90% 0, rgba(84, 100, 255, .45), transparent 21rem), #181145; }
.cta-buttons .btn { background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.28); color: #fff; }
.footer { background: #040511; border-top: 1px solid rgba(153, 123, 255, .16); }
.footer-col a { color: #adb1c7; }
.footer-col a:hover { color: #c77aff; }

/* Trust-first visual polish: midnight, blue-violet and aqua */
:root {
    --primary-color: #5b61f6;
    --primary-dark: #070b1d;
    --accent-color: #8b7bff;
    --accent-soft: rgba(91, 97, 246, .14);
    --background-color: #050716;
    --section-bg: #090d23;
    --text-color: #f5f7ff;
    --text-light: #aeb7d0;
    --border-color: rgba(137, 151, 220, .20);
    --shadow-md: 0 18px 44px rgba(0, 0, 0, .30);
    --shadow-lg: 0 25px 60px rgba(52, 67, 180, .22);
}

body { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.65; }
h1, h2, h3, h4, .logo-text, .btn { font-family: 'Sora', sans-serif; }
h1, h2 { letter-spacing: -.055em; }
h3, h4 { letter-spacing: -.03em; }
.logo-text { font-size: 1.15rem; font-weight: 700; letter-spacing: -.05em; }
.nav-link { font-family: 'DM Sans', sans-serif; font-weight: 600; letter-spacing: .005em; }

body::before { background: radial-gradient(circle at 86% 0, rgba(61, 88, 237, .18), transparent 27rem), radial-gradient(circle at 0% 52%, rgba(47, 203, 198, .055), transparent 25rem); }
.header { background: rgba(5, 7, 22, .93); border-bottom-color: rgba(112, 130, 224, .18); }
.logo-mark { background: linear-gradient(135deg, #6b71ff, #4a54cf); box-shadow: 0 9px 22px rgba(77, 89, 238, .38); }
.logo-highlight { color: #8f99ff; }
.nav-link:hover { color: #9aa5ff; }

.hero { background: radial-gradient(circle at 84% 14%, rgba(77, 89, 238, .34), transparent 23rem), radial-gradient(circle at 64% 92%, rgba(67, 190, 202, .09), transparent 23rem), #070a1c; }
.hero::before { border-color: rgba(104, 124, 244, .20); box-shadow: 0 0 0 2.7rem rgba(75, 92, 231, .05), 0 0 0 5.4rem rgba(48, 195, 197, .02); }
.hero-title { font-family: 'Sora', sans-serif; font-weight: 800; max-width: 650px; }
.hero-subtitle { color: #aeb8d3; max-width: 590px; }
.feature { border-color: rgba(130, 149, 226, .20); color: #dfe5fa; }
.feature i { color: #3ad5c5; }
.teacher-illustration { background: radial-gradient(circle at 35% 28%, #7880ff 0, #4955d2 32%, #111a43 74%); box-shadow: inset 0 0 0 1px rgba(195, 205, 255, .24), 0 0 0 11px rgba(67, 88, 230, .07), 0 26px 58px rgba(35, 51, 159, .48); }

.section-title { font-family: 'Sora', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.section-title::after { background: linear-gradient(90deg, #7d88ff, #3ad5c5); box-shadow: 0 0 16px rgba(80, 124, 255, .58); }
.section-subtitle { color: #aeb7d0; }

.btn { font-weight: 700; letter-spacing: -.02em; }
.btn-primary { background: linear-gradient(100deg, #6d75ff, #4c55d8); box-shadow: 0 10px 26px rgba(71, 83, 221, .36); }
.btn-primary:hover { background: linear-gradient(100deg, #7b82ff, #5b66e6); box-shadow: 0 12px 32px rgba(71, 83, 221, .58); }
.btn-secondary { color: #c9d0ff; border-color: #737cf3; background: rgba(104, 119, 245, .08); }
.btn-secondary:hover { background: rgba(104, 119, 245, .18); }
.btn-success { color: #50e2cb; border-color: rgba(58, 213, 197, .58); }
.btn-icon-green { background: #11ad9f; }

.feature-card, .subject-card, .timeline-item, .stat-card, .review-card, .city-card, .faq-item, .form-wrapper { background: linear-gradient(135deg, rgba(20, 25, 54, .91), rgba(9, 12, 31, .95)); border-color: rgba(125, 143, 227, .19); }
.feature-card:hover, .timeline-item:hover, .stat-card:hover, .review-card:hover, .city-card:hover { border-color: rgba(111, 131, 255, .58); box-shadow: 0 20px 48px rgba(21, 33, 103, .32), inset 0 1px 0 rgba(255,255,255,.07); }
.feature-icon { color: #9da8ff; background: rgba(91, 97, 246, .15); }
.feature-card:nth-child(2n) .feature-icon { color: #3ed7c8; background: rgba(58, 213, 197, .11); }
.subjects { background: radial-gradient(circle at 10% 50%, rgba(70, 87, 226, .21), transparent 21rem), #080b20 !important; }
.subject-card i { color: #90a0ff; }
.subject-card:hover { background: linear-gradient(135deg, #6972f8, #4b57ca); box-shadow: 0 15px 28px rgba(70, 87, 226, .34); }
.timeline-dot, .timeline-number { background: linear-gradient(135deg, #7581ff, #4e59d2); box-shadow: 0 8px 20px rgba(76, 87, 220, .34); }
.statistics { background: radial-gradient(circle at 83% 0, rgba(72, 89, 225, .16), transparent 22rem), transparent; }
.stat-number { color: #98a3ff; text-shadow: 0 0 18px rgba(105, 121, 255, .3); }
.faq-item.active .faq-question { background: linear-gradient(100deg, rgba(83, 95, 224, .9), rgba(57, 139, 204, .85)); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #7f8bff; box-shadow: 0 0 0 3px rgba(103, 115, 255, .16), 0 0 20px rgba(76, 91, 225, .14); }
.cta { background: radial-gradient(circle at 10% 110%, rgba(54, 204, 194, .25), transparent 20rem), radial-gradient(circle at 92% 0, rgba(83, 100, 250, .42), transparent 21rem), #151c54; }
.footer-col a:hover { color: #98a3ff; }

/* Clear visitor journeys inspired by high-conversion tutoring platforms */
.journeys { position: relative; padding: 5.5rem 0; background: radial-gradient(circle at 8% 40%, rgba(77, 92, 230, .16), transparent 22rem), #080b20; border-block: 1px solid rgba(126, 144, 231, .15); }
.journeys-heading { max-width: 700px; margin: 0 auto 2.5rem; text-align: center; }
.eyebrow, .journey-kicker { display: block; color: #8f9aff; font-family: 'Sora', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.journeys-heading h2 { margin: .65rem 0 1rem; color: #fff; font-family: 'Sora', sans-serif; font-size: clamp(1.9rem, 3vw, 2.8rem); letter-spacing: -.05em; line-height: 1.12; }
.journeys-heading p { color: #aeb7d0; }
.journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.journey-card { position: relative; min-height: 300px; padding: 1.7rem; overflow: hidden; color: #f7f8ff; text-decoration: none; background: linear-gradient(145deg, rgba(25, 31, 67, .96), rgba(10, 13, 34, .98)); border: 1px solid rgba(128, 147, 239, .22); border-radius: 1.15rem; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; gap: 0.7rem; }
.journey-card::after { content: ''; position: absolute; width: 12rem; height: 12rem; right: -5rem; bottom: -6rem; border-radius: 50%; background: rgba(92, 105, 246, .18); filter: blur(4px); }
.journey-teacher::after { background: rgba(56, 202, 191, .16); }
.journey-institute::after { background: rgba(130, 116, 255, .17); }
.journey-card:hover { transform: translateY(-7px); color: #fff; border-color: rgba(137, 157, 255, .72); box-shadow: 0 20px 44px rgba(17, 25, 83, .45); }
.journey-icon { width: 3.3rem; height: 3.3rem; display: grid; place-items: center; margin-bottom: 1.8rem; color: #bdc5ff; background: rgba(95, 107, 246, .17); border: 1px solid rgba(139, 151, 255, .23); border-radius: .9rem; font-size: 1.35rem; }
.journey-teacher .journey-icon { color: #6ce5d4; background: rgba(53, 201, 190, .12); }
.journey-card h3 { position: relative; z-index: 1; margin: .55rem 0 .7rem; font-family: 'Sora', sans-serif; font-size: 1.18rem; letter-spacing: -.035em; }
.journey-card p { position: relative; z-index: 1; color: #acb5cf; font-size: .92rem; line-height: 1.65; }
.journey-link { position: static; z-index: 1; margin-top: auto; color: #aeb9ff; font-family: 'Sora', sans-serif; font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.journey-link i { transition: transform .2s ease; }
.journey-card:hover .journey-link i { transform: translateX(.3rem); }
@media (max-width: 800px) { .journey-grid { grid-template-columns: 1fr; } .journey-card { min-height: 245px; } }

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }

    .floating-buttons {
        bottom: 10px;
        right: 10px;
    }

    .floating-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* Conversion-focused home refresh */
:root {
    --primary-color: #163b5c;
    --primary-dark: #0d2941;
    --accent-color: #e7783a;
    --accent-soft: #fff0e8;
    --background-color: #fffdfa;
    --section-bg: #f5f7f8;
    --text-color: #172b3a;
    --text-light: #5d6d79;
    --border-color: #dce4e8;
}

body {
    background: linear-gradient(180deg, #fffdfa 0%, #f7fbfc 100%);
}

.header {
    padding: .85rem 0;
    border-bottom: 1px solid rgba(220, 228, 232, .8);
    box-shadow: none;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo-mark {
    width: 2.45rem;
    height: 2.45rem;
    display: inline-grid;
    place-items: center;
    color: white;
    background: var(--primary-color);
    border-radius: .75rem .75rem .75rem .2rem;
    box-shadow: 0 7px 16px rgba(22, 59, 92, .22);
}
.logo-text { font-size: 1.25rem; color: var(--primary-dark); }
.logo-highlight { color: var(--accent-color); }
.nav-link { color: #40525f; font-size: .86rem; font-weight: 700; }
.nav-link:hover { color: var(--accent-color); }
.btn { border-radius: .65rem; font-size: .94rem; }
.btn-primary { background: var(--primary-color); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 12px 22px rgba(22, 59, 92, .2); }
.btn-secondary { background: var(--accent-color); }
.btn-secondary:hover { background: #cf6228; box-shadow: 0 12px 22px rgba(231, 120, 58, .2); }
.btn-success { background: #159a6c; }
.btn-success:hover { background: #107c57; }
.btn-light { background: #fff; color: var(--primary-dark); }
.btn-light:hover { background: #f4f7f7; color: var(--primary-dark); }

.hero {
    position: relative;
    overflow: hidden;
    padding: 7.5rem 0 8.5rem;
    background: radial-gradient(circle at 82% 16%, rgba(231,120,58,.17), transparent 23rem), linear-gradient(118deg, #f6fafb 0%, #fffdfa 54%, #f7eee8 100%);
}
.hero::before {
    content: '';
    position: absolute;
    inset: auto -10rem -12rem auto;
    width: 30rem;
    height: 30rem;
    border: 1px solid rgba(22,59,92,.11);
    border-radius: 50%;
    box-shadow: 0 0 0 2.7rem rgba(22,59,92,.035), 0 0 0 5.4rem rgba(22,59,92,.02);
}
.hero-content { position: relative; gap: 3.5rem; align-items: center; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .95rem;
    border-radius: 999px;
    border: 1px solid #dce6e9;
    background: rgba(255,255,255,.8);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 1rem;
}
.hero-badge i { color: var(--accent-color); }
.hero-title {
    max-width: 700px;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(3rem, 5.2vw, 4.6rem);
    line-height: .98;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}
.hero-subtitle { max-width: 630px; font-size: 1.08rem; line-height: 1.75; }
.hero-features { gap: .8rem; margin: 1.5rem 0 2rem; }
.feature { padding: .5rem .8rem; border: 1px solid #dce6e9; background: rgba(255,255,255,.7); border-radius: 999px; font-size: .85rem; }
.feature i { color: #159a6c; }
.hero-buttons { gap: .85rem; }
.hero-buttons .btn { padding: .95rem 1.35rem; }
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.7rem;
}
.hero-stats > div {
    min-width: 120px;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.82);
    border: 1px solid #e4ebee;
}
.hero-stats strong {
    display: block;
    font-size: 1.1rem;
    color: var(--primary-dark);
}
.hero-stats span {
    font-size: .82rem;
    color: var(--text-light);
}
.hero-card {
    padding: 1.8rem;
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,247,248,.96));
    border: 1px solid #e2e9eb;
    box-shadow: 0 20px 45px rgba(22,59,92,.12);
}
.hero-card-head h3 {
    margin: 1rem 0 1.1rem;
    color: var(--primary-dark);
    font-size: 1.25rem;
}
.hero-card-pill {
    display: inline-block;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-color);
    font-weight: 700;
    font-size: .76rem;
}
.hero-card-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: .75rem;
    color: var(--text-color);
}
.hero-card-list i { color: var(--primary-color); margin-right: .5rem; }

.section-title {
    max-width: 720px;
    margin: 0 auto .7rem;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(2.25rem, 4vw, 3.4rem);
    line-height: 1.05;
    color: var(--primary-dark);
}
.section-subtitle { max-width: 620px; margin: 0 auto 3.2rem; font-size: 1rem; }

.feature-card, .subject-card, .timeline-item, .stat-card, .review-card, .city-card, .faq-item, .form-wrapper {
    border: 1px solid #e1e8ea;
    border-radius: 1rem;
    box-shadow: none;
}
.feature-card { padding: 2.1rem 1.6rem; text-align: left; background: #fff; }
.feature-card:hover, .timeline-item:hover, .stat-card:hover, .review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-icon { width: 3.15rem; height: 3.15rem; display: grid; place-items: center; border-radius: .85rem; margin-bottom: 1.2rem; font-size: 1.4rem; color: var(--primary-color); background: #e8f0f2; }
.feature-card:nth-child(2n) .feature-icon { color: #bd571f; background: var(--accent-soft); }
.subjects { background: var(--primary-dark) !important; }
.subjects .section-title, .subjects .section-subtitle { color: white; }
.subject-card { padding: 1.45rem .8rem; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: white; font-weight: 700; }
.subject-card i { color: #f7b178; font-size: 1.7rem; margin-bottom: .7rem; }
.subject-card:hover { background: white; color: var(--primary-dark); border-color: white; transform: translateY(-4px); box-shadow: none; }
.statistics { background: #eff5f5; }
.timeline-dot, .timeline-number { background: var(--accent-soft); color: var(--accent-color); }
.cta { background: linear-gradient(115deg, var(--primary-dark), var(--primary-color)); padding: 5rem 0; }
.cta h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(2.2rem, 4vw, 3.3rem); }
.cta-buttons .btn { color: var(--primary-dark); }

.enquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.enquiry-modal.is-open { display: flex; }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 17, 31, .7);
    backdrop-filter: blur(6px);
}
.modal-panel {
    position: relative;
    width: min(100%, 760px);
    max-height: min(92vh, 860px);
    overflow-y: auto;
    background: #fff;
    border-radius: 1.35rem;
    padding: 1.6rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
    z-index: 1;
}
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: #f3f6f7;
    color: var(--primary-dark);
    cursor: pointer;
}
.modal-head {
    margin-bottom: 1.2rem;
}
.modal-eyebrow {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-color);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.modal-head h3 { color: var(--primary-dark); margin-bottom: .4rem; }
.modal-head p { color: var(--text-light); }
.modal-form .form-group { margin-bottom: 1rem; }
.modal-form .btn { margin-top: .3rem; }

@media (max-width: 768px) {
    .hero-content { grid-template-columns: 1fr; }
    .hero-image { order: -1; }
    .hero-stats { gap: .7rem; }
    .hero-stats > div { min-width: 100%; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; }
}

/* Professional brand refresh */
:root {
    --primary-color: #7c4dff;
    --primary-dark: #4f46e5;
    --accent-color: #00c9b7;
    --accent-soft: rgba(0, 201, 183, .16);
    --background-color: #05070f;
    --section-bg: #07111f;
    --text-color: #e7efff;
    --text-light: #9fb0d6;
    --border-color: rgba(255,255,255,0.06);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, .4);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, .5);
}

body {
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.01em;
    background: var(--background-color);
    color: var(--text-color);
}

h1, h2, h3, h4 { letter-spacing: -0.035em; }

.header {
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: none;
    background: rgba(6,8,23,0.96);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }

.logo-mark {
    width: 2.45rem;
    height: 2.45rem;
    display: inline-grid;
    place-items: center;
    color: white;
    background: var(--primary-color);
    border-radius: .75rem .75rem .75rem .2rem;
    box-shadow: 0 7px 16px rgba(22, 59, 92, .22);
}

.logo-text { font-size: 1.25rem; letter-spacing: -.05em; color: var(--primary-dark); }
.logo-highlight { color: var(--accent-color); }
.nav-list { gap: 1.35rem; }
.nav-link { color: #40525f; font-size: .86rem; font-weight: 700; }
.nav-link:hover { color: var(--accent-color); }

.btn {
    border-radius: .65rem;
    font-family: inherit;
    font-size: .9rem;
    letter-spacing: -.01em;
    box-shadow: none;
}

.btn-primary { background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%); color: #fff; }
.btn-primary:hover { background: linear-gradient(135deg, #8b5cf6 0%, #4338ca 100%); box-shadow: 0 12px 22px rgba(124, 77, 255, .25); }
.btn-secondary { background: linear-gradient(135deg, var(--accent-color) 0%, #0f766e 100%); color: #fff; }
.btn-secondary:hover { background: linear-gradient(135deg, #34d4c2 0%, #0f766e 100%); box-shadow: 0 12px 22px rgba(0, 201, 183, .24); }
.btn-success { background: #25D366; color: #fff; }
.btn-success:hover { background: #20BA5A; }
.btn-icon-white { background: rgba(255,255,255,.06); color: var(--text-color); width: 2.5rem; height: 2.5rem; }
.btn-icon-green { width: 2.5rem; height: 2.5rem; background: #25D366; }

section { padding: 5rem 0; }
.section-title {
    max-width: 720px;
    margin: 0 auto .7rem;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.25rem, 4vw, 3.4rem);
    line-height: 1.05;
    color: #fff;
}
.section-subtitle { max-width: 620px; margin: 0 auto 3.2rem; font-size: 1rem; color: rgba(255,255,255,.72); }

.hero {
    position: relative;
    overflow: hidden;
    padding: 7.5rem 0 8.5rem;
    background: radial-gradient(circle at 82% 16%, rgba(124,77,255,.24), transparent 23rem), linear-gradient(118deg, #05070f 0%, #0b1222 54%, #111a35 100%);
    color: #f9fbff;
}
.hero::before {
    content: '';
    position: absolute;
    inset: auto -12rem -13rem auto;
    width: 32rem;
    height: 32rem;
    border: 1px solid rgba(22,59,92,.11);
    border-radius: 50%;
    box-shadow: 0 0 0 2.7rem rgba(22,59,92,.035), 0 0 0 5.4rem rgba(22,59,92,.02);
}
.hero-content { position: relative; gap: 4.5rem; }
.hero-title {
    max-width: 700px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(3rem, 5.2vw, 5rem);
    line-height: 1.02;
    color: #fff;
    margin-bottom: 1.4rem;
}
.hero-subtitle { max-width: 630px; font-size: 1.08rem; line-height: 1.75; color: rgba(255,255,255,.78); }
.hero-features { gap: .8rem; margin: 2rem 0; }
.feature { padding: .45rem .7rem; border: 1px solid #dce6e9; background: rgba(255,255,255,.65); border-radius: 99px; font-size: .8rem; }
.feature i { color: #159a6c; }
.hero-buttons { gap: .85rem; }
.hero-buttons .btn { padding: .9rem 1.3rem; }
.teacher-illustration {
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 38% 62% 55% 45% / 42% 45% 55% 58%;
    color: var(--primary-color);
    background: linear-gradient(135deg, #dceef1, #f8dccc);
    box-shadow: inset 0 0 0 1px rgba(22,59,92,.08), 0 30px 45px rgba(22,59,92,.14);
}
.teacher-illustration i { color: var(--primary-color); opacity: 1; font-size: clamp(6rem, 14vw, 10rem); }

.features-grid { gap: 1.15rem; }
.feature-card, .subject-card, .timeline-item, .stat-card, .review-card, .city-card, .faq-item, .form-wrapper {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1rem;
    box-shadow: none;
}
.feature-card { padding: 2.1rem 1.6rem; text-align: left; background: linear-gradient(135deg, rgba(20, 25, 54, .95), rgba(9, 12, 31, .98)); color: #f8fbff; }
.feature-card:hover, .timeline-item:hover, .stat-card:hover, .review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-icon { width: 3.15rem; height: 3.15rem; display: grid; place-items: center; border-radius: .85rem; margin-bottom: 1.2rem; font-size: 1.4rem; color: #fff; background: rgba(124,77,255,.18); }
.feature-card:nth-child(2n) .feature-icon { color: #00c9b7; background: rgba(0,201,183,.16); }
.feature-card h3 { font-size: 1.08rem; margin-bottom: .55rem; color: #fff; }
.feature-card p { color: rgba(255,255,255,.72); }

.subjects { background: #05070f !important; }
.subjects .section-title, .subjects .section-subtitle { color: white; }
.subjects .section-subtitle { color: rgba(255,255,255,.72); }
.subjects-grid { gap: .75rem; }
.subject-card { padding: 1.45rem .8rem; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: white; font-weight: 700; }
.subject-card i { color: #00c9b7; font-size: 1.7rem; margin-bottom: .7rem; }
.subject-card:hover { background: linear-gradient(135deg, #7c4dff, #4f46e5); color: #fff; border-color: rgba(255,255,255,.2); transform: translateY(-4px); box-shadow: none; }

.timeline { gap: 1rem; }
.timeline-item { padding: 1.8rem 1.3rem; background: linear-gradient(135deg, rgba(20, 25, 54, .95), rgba(9, 12, 31, .98)); }
.timeline-dot, .timeline-number { width: 2.8rem; height: 2.8rem; display: inline-grid; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: rgba(0,201,183,.16); color: #00c9b7; font-weight: 800; }
.timeline-content h3 { color: #fff; margin-bottom: .45rem; }
.timeline-content p { color: rgba(255,255,255,.72); font-size: .92rem; }
.timeline-connector { display: none; }

.statistics { background: linear-gradient(135deg, #0f172a 0%, #111c35 100%); color: #f9fbff; }
.stats-grid { gap: 1rem; }
.stat-card { padding: 2rem 1rem; background: transparent; }
.stat-number { font-family: 'Poppins', sans-serif; color: #00c9b7; }

.review-card { padding: 1.7rem; background: linear-gradient(135deg, rgba(20, 25, 54, .95), rgba(9, 12, 31, .98)); }
.reviewer-avatar, .review-avatar { width: 3rem; height: 3rem; border: 2px solid rgba(0,201,183,.16); }
.cities-grid { gap: 1rem; }
.city-card { padding: 2rem; border-left: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, rgba(20, 25, 54, .95), rgba(9, 12, 31, .98)); }
.city-card:not(.coming-soon):hover { border-left-color: #00c9b7; transform: translateY(-5px); box-shadow: var(--shadow-md); }

.faq-container { max-width: 900px; }
.faq-item { border: 1px solid rgba(255,255,255,.08); border-radius: .8rem; box-shadow: none; background: rgba(255,255,255,.03); }
.faq-question { padding: 1.25rem 1.4rem; font-size: .95rem; color: #fff; }
.faq-item.active .faq-question { background: linear-gradient(100deg, rgba(124,77,255,.9), rgba(79,93,236,.9)); }
.faq-answer { background: rgba(255,255,255,.04); padding: 1.25rem 1.4rem; color: rgba(255,255,255,.72); }

.student-enquiry, .teacher-registration { background: transparent !important; }
.form-wrapper { max-width: 680px; padding: 2.5rem; border-radius: 1.1rem; box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(20, 25, 54, .95), rgba(9, 12, 31, .98)); }
.multi-step-form .step-2, .multi-step-form .step-1 { display: none; }
.multi-step-form .step-1.active, .multi-step-form .step-2.active { display: block; }
.multi-step-form h3 { color: #fff; font-size: 1.35rem; margin-bottom: 1.8rem; }
.form-group { margin-bottom: 1.15rem; }
.form-group label { font-size: .84rem; color: rgba(255,255,255,.84); }
.form-group input, .form-group select, .form-group textarea { padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.12); border-radius: .55rem; font-family: inherit; background: rgba(255,255,255,.04); color: #fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #00c9b7; box-shadow: 0 0 0 3px rgba(0,201,183,.14); }

.cta { background: linear-gradient(135deg, #0b1020 0%, #111a35 100%); padding: 5rem 0; color: #fff; }
.cta h2 { font-family: 'Poppins', sans-serif; font-size: clamp(2.2rem, 4vw, 3.3rem); color: #fff; }
.cta-buttons .btn { color: #fff; }
.footer { background: #05070f; }
.footer-col h4 { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.6rem; }

@media (max-width: 900px) {
    .nav-list { gap: .8rem; }
    .header-actions .btn-sm { display: none; }
    .hero { padding: 5rem 0 6rem; }
    .hero-content { gap: 2.5rem; }
}

@media (max-width: 768px) {
    section { padding: 4.5rem 0; }
    .header-actions { gap: .55rem; }
    .hero-title { font-size: clamp(2.8rem, 13vw, 4rem); }
    .hero-image { order: -1; }
    .teacher-illustration { width: 220px; }
    .feature { font-size: .73rem; }
    .form-wrapper { padding: 1.4rem; }
}

/* Home page enhancement: modern hero layout, sticky contact actions, 2-step form polish */

/* Popup toggle responsive override: use auto-fit grid for toggle buttons and improve mobile stacking */
.form-group--toggle .toggle-segment,
.modal-form .toggle-segment {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    align-items: center;
}

/* Ensure toggle buttons stretch and have consistent touch targets */
.toggle-option {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(0,0,0,0.06);
    background: transparent;
    width: 100%;
    justify-content: center;
}

.toggle-option.active {
    background: linear-gradient(90deg, rgba(124,77,255,0.12), rgba(0,201,183,0.06));
    border-color: rgba(124,77,255,0.18);
}

@media (max-width: 680px) {
    .form-group--toggle .toggle-segment,
    .modal-form .toggle-segment { grid-template-columns: 1fr; }
    .modal-body--consultation .popup-side-panel { display: none; }
    .modal-panel { width: 100%; max-width: none; padding: 1rem; border-radius: 16px 16px 0 0; margin: 0; }
    .popup-side-visual__image { font-size: 3.2rem; }

    /* Make modal occupy bottom sheet style for better mobile UX */
    .enquiry-modal { align-items: flex-end; padding: 0; }
    .modal-panel { max-height: 92vh; border-radius: 16px 16px 0 0; }

    /* Stack grid cols in forms for easy tapping */
    .modal-form .grid-2-col, .popup-side-panel .grid-2-col { grid-template-columns: 1fr; gap: 0.6rem; }

    /* Larger touch targets */
    .who-modal__actions .btn, .modal-form .btn, .enquiry-modal .modal-close { padding: 0.9rem 1rem; }

    /* Ensure inputs are full width */
    .modal-form .form-group input, .modal-form .form-group select, .modal-form .form-group textarea { width: 100%; font-size: 1rem; }
}

@media (max-width: 420px) {
    .modal-panel { padding: 0.8rem; }
    .who-modal__card { width: calc(100% - 2rem); }
}

/* Popup teacher mode adjustments */
.popup-teacher-fields { display: none; }
.popup-teacher-step2 { display: none; }
.enquiry-modal[data-mode="teacher"] .popup-teacher-fields { display: block; }
.enquiry-modal[data-mode="teacher"] .popup-teacher-step2 { display: block; }
.enquiry-modal[data-mode="teacher"] .popup-student-fields { display: none; }
.enquiry-modal[data-mode="teacher"] .popup-student-step2 { display: none; }

.enquiry-modal[data-mode="student"] .popup-student-fields { display: block; }
.enquiry-modal[data-mode="student"] .popup-student-step2 { display: block; }
.enquiry-modal[data-mode="student"] .popup-teacher-fields { display: none; }
.enquiry-modal[data-mode="student"] .popup-teacher-step2 { display: none; }
.hero-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4.5rem;
    align-items: center;
}

.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.hero-buttons .btn {
    min-width: 170px;
}

.hero-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.75rem;
    background: linear-gradient(135deg, rgba(17, 24, 47, 0.96), rgba(9, 13, 31, 0.98));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 60px rgba(2, 5, 20, 0.45);
    color: #fff;
}

.hero-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    display: grid;
    gap: 0.9rem;
}

.hero-card-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
    font-weight: 600;
}

.hero-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-color);
    font-size: 0.82rem;
    font-weight: 700;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.hero-stats > div {
    min-width: 140px;
    flex: 1;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}

.hero-stats strong {
    display: block;
    font-size: 1.15rem;
    color: #fff;
}

.hero-stats span {
    display: block;
    font-size: 0.85rem;
    color: rgba(255,255,255,.72);
}

.multi-step-form .step-1,
.multi-step-form .step-2 {
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.multi-step-form .step-1.active,
.multi-step-form .step-2.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.sticky-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(6, 8, 23, 0.98);
    backdrop-filter: blur(12px);
    box-shadow: 0 -10px 35px rgba(2, 6, 14, 0.6);
}

.sticky-action-bar .btn {
    min-width: 0;
    width: 100%;
    padding: 0.8rem 0.75rem;
    border-radius: 0.95rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 0.95rem;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

body {
    padding-bottom: 110px;
}

@media (max-width: 900px) {
    .hero-content { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
    .sticky-action-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0.7rem;
        gap: 0.45rem;
    }

    .sticky-action-bar .btn {
        padding: 0.74rem 0.55rem;
        font-size: 0.82rem;
    }
}

/* Homepage dark brand refresh */
.header {
background: rgba(6, 8, 23, 0.96);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Force card-like components to dark background so theme is consistent */
.feature-card, .subject-card, .timeline-item, .stat-card, .review-card, .city-card, .faq-item, .form-wrapper {
    background: linear-gradient(135deg, rgba(20, 25, 54, .91), rgba(9, 12, 31, .95));
    border-color: rgba(125, 143, 227, .12);
}

/* Button variant used in some places that was white — make it dark-aware */
.btn-light { background: rgba(255,255,255,0.04); color: var(--text-color); border: 1px solid rgba(255,255,255,0.04); }

/* Ensure any remaining explicit white backgrounds are less visible */
.card, .panel, .modal-panel, .form-wrapper { background: linear-gradient(180deg, #071028 0%, #0b1220 100%); }

.brand {
display: inline-flex;
align-items: center;
gap: 0.9rem;
}

.logo-mark {
width: 3.1rem;
height: 3.1rem;
display: inline-grid;
place-items: center;
border-radius: 1rem;
background: linear-gradient(135deg, #7c4dff, #4f46e5);
color: #fff;
font-size: 1.25rem;
}

.logo-text,
.logo-highlight {
color: #fff;
}

.logo-text {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.02em;
}

.logo-highlight {
color: #8b5cf6;
}

.nav-list {
gap: 1.6rem;
}

.header .menu-toggle span {
background: #fff;
}

.nav-link {
color: rgba(255, 255, 255, 0.82);
font-weight: 600;
transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link:focus {
color: #ffffff;
}

.header-actions {
gap: 0.9rem;
}

.btn-outline {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.36);
}

.btn-outline:hover {
background: rgba(255, 255, 255, 0.08);
}

.btn-primary {
background: linear-gradient(135deg, #7c4dff 0%, #7f5af0 100%);
color: #fff;
}

.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 18px 40px rgba(124, 77, 255, 0.28);
}

.btn-secondary {
background: linear-gradient(135deg, #00c9b7 0%, #0096a0 100%);
color: #fff;
}

.btn-secondary:hover {
transform: translateY(-1px);
box-shadow: 0 18px 40px rgba(0, 201, 183, 0.24);
}

.hero.hero--dark {
position: relative;
overflow: hidden;
background: radial-gradient(circle at top left, rgba(124, 77, 255, 0.24), transparent 18%),
            radial-gradient(circle at bottom right, rgba(0, 201, 183, 0.18), transparent 20%),
            linear-gradient(180deg, #05070f 0%, #090d1f 100%);
color: #f9fbff;
padding: 8rem 0 4.5rem;
}

.hero.hero--dark::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 12% 20%, rgba(124, 77, 255, 0.18), transparent 20%),
            radial-gradient(circle at 85% 30%, rgba(0, 201, 183, 0.14), transparent 18%);
pointer-events: none;
}

.hero-content.hero-content--split {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 3.5rem;
position: relative;
z-index: 1;
}

.hero-copy {
max-width: 640px;
}

.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
color: #a8c3ff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 0.81rem;
margin-bottom: 1.35rem;
}

.hero-title {
font-size: clamp(3.2rem, 5vw, 4.6rem);
line-height: 1.02;
margin-bottom: 1.25rem;
color: #ffffff;
}

.hero-subtitle {
max-width: 560px;
color: rgba(255, 255, 255, 0.78);
font-size: 1.1rem;
line-height: 1.85;
margin-bottom: 2rem;
}

.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-bottom: 2rem;
}

.hero-badges span {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.85rem 1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #e7efff;
font-weight: 600;
}

.hero-buttons--primary {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2.3rem;
}

.hero-quickstats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}

.hero-quickstats div {
padding: 1.15rem 1.15rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
}

.hero-quickstats strong {
display: block;
font-size: 1.5rem;
color: #fff;
margin-bottom: 0.35rem;
}

.hero-quickstats span {
color: rgba(255, 255, 255, 0.68);
font-size: 0.95rem;
}

.hero-image--panel {
display: flex;
justify-content: center;
}

.hero-card--panel {
width: 100%;
max-width: 520px;
padding: 2rem;
border-radius: 2rem;
background: rgba(17, 25, 55, 0.95);
border: 1px solid rgba(116, 123, 239, 0.16);
box-shadow: 0 24px 80px rgba(14, 28, 80, 0.35);
}

.hero-card-head h3 {
margin: 1.25rem 0 1.25rem;
color: #fff;
font-size: 1.35rem;
}

.hero-card-pill {
display: inline-flex;
align-items: center;
padding: 0.6rem 1rem;
border-radius: 999px;
background: rgba(124, 77, 255, 0.1);
color: #d8d7ff;
font-weight: 700;
letter-spacing: 0.02em;
}

.hero-card-list {
list-style: none;
margin: 0 0 1.8rem;
padding: 0;
display: grid;
gap: 1rem;
}

.hero-card-list li {
display: flex;
align-items: center;
gap: 0.9rem;
color: rgba(255, 255, 255, 0.78);
font-weight: 600;
background: rgba(255,255,255,0.04);
padding: 1rem 1.15rem;
border-radius: 1.2rem;
}

.hero-card-list i {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 14px;
background: rgba(124, 77, 255, 0.16);
color: #ffffff;
}

.section-padding--dark {
background: #05060f;
}

.section-header--centered {
text-align: center;
margin-bottom: 3rem;
}

.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.26em;
color: rgba(255, 255, 255, 0.7);
font-size: 0.78rem;
margin-bottom: 1rem;
}

.section-padding--dark .section-title {
color: #fff;
}

.section-padding--dark .section-subtitle {
color: rgba(255, 255, 255, 0.72);
}

.process-panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}

.process-panel h3 {
color: #fff;
font-size: 1.3rem;
margin-bottom: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

.process-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}

.process-card {
position: relative;
padding: 2rem 1.75rem 1.75rem;
border-radius: 2rem;
background: rgba(10, 14, 34, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 22px 60px rgba(1, 5, 26, 0.35);
overflow: hidden;
}

.process-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(124, 77, 255, 0.18), transparent 35%),
            radial-gradient(circle at bottom left, rgba(0, 201, 183, 0.12), transparent 32%);
opacity: 0.35;
pointer-events: none;
}

.process-card-icon {
position: relative;
z-index: 1;
width: 3rem;
height: 3rem;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(124, 77, 255, 0.16);
color: #fff;
margin-bottom: 1rem;
}

.process-index {
position: absolute;
top: 1.5rem;
right: 1.5rem;
z-index: 1;
color: rgba(255, 255, 255, 0.12);
font-size: 3rem;
font-weight: 800;
letter-spacing: -0.05em;
}

.process-card h4 {
margin-bottom: 0.85rem;
color: #fff;
font-size: 1.05rem;
}

.process-card p {
color: rgba(255, 255, 255, 0.72);
line-height: 1.8;
}

@media (max-width: 992px) {
.hero-title { font-size: clamp(2.8rem, 6vw, 4rem); }
.hero-content.hero-content--split { grid-template-columns: 1fr; }
.process-panels { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
.header-content { flex-wrap: wrap; gap: 1rem; }
.nav-list { gap: 1rem; }
.hero.hero--dark { padding: 6rem 0 3.5rem; }
.hero-subtitle { font-size: 1rem; }
.hero-badges { flex-direction: column; }
.hero-quickstats { grid-template-columns: 1fr; }
.hero-buttons--primary { flex-direction: column; }
.hero-card--panel { max-width: 100%; }
.toggle-segment { grid-template-columns: 1fr; }
.modal-body--consultation { grid-template-columns: 1fr; }
.grid-2-col { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
.header-actions { width: 100%; justify-content: space-between; }
.nav-list { display: none; }
.hero-eyebrow { font-size: 0.75rem; }
.hero-buttons--primary { gap: 0.75rem; }
.process-card { padding: 1.4rem; }
}

/* Popup consultation form styling */
.enquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(7, 17, 31, 0.72);
    backdrop-filter: blur(6px);
}

/* 'Who are you' lightweight modal used before opening enquiry or teacher flow */
.who-modal {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.who-modal[hidden] { display: none; }
.who-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3,6,12,0.7);
}
.who-modal__card {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    background: linear-gradient(180deg, #071028 0%, #0b1220 100%);
    padding: 1.25rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 18px 48px rgba(0,0,0,0.6);
    color: var(--text-color);
}
.who-modal__card h3 { margin-bottom: 0.5rem; }
.who-modal__card p { color: var(--text-light); margin-bottom: 1rem; }
.who-modal__actions { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 0.75rem; }
.who-modal__actions .btn { flex: 1 1 0; }
.who-modal__card .btn { padding: 0.7rem 1rem; }

/* Reviews grid and review card adjustments to avoid overlap on small screens */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.review-card { padding: 1.5rem; min-height: auto; word-break: break-word; overflow-wrap: anywhere; display: flex; flex-direction: column; }
.reviewer-info { margin-top: 1rem; }
.reviewer-name { font-weight: 700; color: var(--text-color); }
.review-text { margin: 0.6rem 0 0.8rem; color: #afb2c9; line-height: 1.5; }

/* Popup form role selector styling */
#popup-user-type { width: 100%; }
.form-group select { appearance: none; }

@media (max-width: 900px) {
    .reviews-grid { grid-template-columns: 1fr; }
    .journey-grid { grid-template-columns: 1fr; }
    .journeys-heading { padding: 0 1rem; }
    .journey-card { min-height: 220px; padding-bottom: 3.2rem; }
    .journey-link { position: absolute; bottom: 1rem; }

    /* Reduce heavy shadows and hover transforms on small screens for performance */
    .feature-card, .review-card, .journey-card, .process-card { box-shadow: none; transform: none; }
    .feature-card, .review-card, .journey-card { transition: none; }
}

/* Global improvements to prevent text overlapping */
section { word-break: break-word; }
.container { width: 100%; max-width: 1200px; padding: 0 1rem; }

.enquiry-modal.is-open {
    display: flex;
}

.enquiry-modal .modal-backdrop {
    position: absolute;
    inset: 0;
}

.modal-panel {
    position: relative;
    width: min(100%, 980px);
    max-width: 980px;
    max-height: min(92vh, 860px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 32px;
    background: linear-gradient(180deg, #071028 0%, #0b1220 100%); /* dark modal */
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    z-index: 1;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 1.25rem;
}

/* Make modal width more generous on tablet and ensure full width on small devices */
@media (max-width: 980px) {
    .modal-panel { max-width: 720px; width: calc(100% - 2rem); }
}

@media (max-width: 768px) {
    .modal-panel { max-width: 640px; width: calc(100% - 1.25rem); }
    .who-modal__card { width: calc(100% - 2rem); }
}

@media (max-width: 680px) {
    .enquiry-modal { padding: 0; align-items: flex-end; background: rgba(7, 17, 31, 0.92); }
    .modal-panel { width: 100%; max-width: none; max-height: 94vh; border-radius: 24px 24px 0 0; margin: 0; padding: 1rem; }
    .who-modal__card { width: calc(100% - 1.5rem); margin: 0 0.75rem; }
}

@media (max-width: 420px) {
    .modal-panel { padding: 0.85rem; }
    .who-modal__card { width: calc(100% - 1rem); }
}

.modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    border: none;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #0f4c7d;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(15, 76, 125, 0.12);
}

.modal-close:focus-visible,
.toggle-option:focus-visible,
.btn-submit:focus-visible {
    outline: 3px solid rgba(15, 76, 125, 0.25);
    outline-offset: 2px;
}

.form-message {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1rem;
    margin-top: 0.9rem;
    border-radius: 14px;
    background: rgba(31, 195, 141, 0.12);
    color: #176b45;
    border: 1px solid rgba(31, 195, 141, 0.2);
    font-weight: 600;
}

.form-message i {
    color: #1fc38d;
}

.form-message[role="alert"]:has(i.fa-exclamation-circle) {
    background: rgba(220, 38, 38, 0.10);
    color: #9f1239;
    border-color: rgba(220, 38, 38, 0.18);
}

.form-message[role="alert"]:has(i.fa-exclamation-circle) i {
    color: #dc2626;
}

.modal-header--consultation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 2rem;
    gap: 1.25rem;
    background: linear-gradient(120deg, #0a4c7d 0%, #1b76b3 100%);
    color: #fff;
}

.modal-header--consultation .modal-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.modal-header--consultation .modal-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #ffffff;
    flex-shrink: 0;
}

.modal-header--consultation .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: #1fc38d;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 0.8rem;
    text-transform: uppercase;
}

.modal-body--consultation {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.5rem;
    padding: 2rem;
    background: #f5fbff;
}

.popup-side-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.7rem;
    border-radius: 24px;
    background: linear-gradient(180deg, #e9f5ff 0%, #ffffff 100%);
    border: 1px solid rgba(112, 176, 232, 0.35);
    min-height: 100%;
}

.popup-side-visual {
    display: grid;
    gap: 1rem;
    text-align: center;
}

.popup-side-visual__image {
    min-height: 260px;
    border-radius: 24px;
    background: radial-gradient(circle at top left, rgba(15, 80, 136, 0.2), transparent 36%), radial-gradient(circle at 85% 15%, rgba(19, 145, 199, 0.2), transparent 28%), linear-gradient(135deg, #1c5e91 0%, #4491d3 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 3.4rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.popup-side-copy {
    margin: 0;
    color: #1f3349;
    font-size: 0.96rem;
    line-height: 1.8;
    font-weight: 500;
}

.popup-side-benefits {
    display: grid;
    gap: 0.85rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.popup-side-benefits li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(31, 82, 136, 0.06);
    color: #1e3249;
    font-weight: 600;
}

.popup-side-benefits li i {
    color: #1fc38d;
    font-size: 1rem;
}

.modal-form--consultation {
    display: grid;
    gap: 1.25rem;
}

.modal-form--consultation .form-group {
    margin-bottom: 0;
}

.form-group--toggle label {
    display: block;
    margin-bottom: 0.85rem;
    color: #1f3249;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.form-group--toggle .toggle-segment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.toggle-option {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1rem 0.85rem;
    min-height: 54px;
    border: 1px solid rgba(72, 102, 160, 0.2);
    border-radius: 18px;
    background: #ffffff;
    color: #1f3249;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.92rem;
    font-weight: 600;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.toggle-option i {
    font-size: 1.25rem;
    display: block;
}

.toggle-option.active {
    background: linear-gradient(135deg, #0f4c7d, #1f76b2);
    border-color: #0f4c7d;
    color: #fff;
    box-shadow: 0 18px 40px rgba(15, 76, 125, 0.18);
}

.toggle-option.active i {
    color: #e8f6ff;
}

.grid-2-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.modal-form--consultation .form-group label {
    display: block;
    margin-bottom: 0.55rem;
    font-weight: 700;
    color: #2a3d56;
}

.modal-form--consultation .form-group input,
.modal-form--consultation .form-group select,
.modal-form--consultation .form-group textarea {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(118, 145, 181, 0.35);
    border-radius: 16px;
    background: #fff;
    color: #1d2f45;
    font-size: 0.96rem;
    line-height: 1.5;
    min-height: 48px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.modal-form--consultation .form-group input:focus,
.modal-form--consultation .form-group select:focus,
.modal-form--consultation .form-group textarea:focus {
    outline: none;
    border-color: #0f4c7d;
    box-shadow: 0 0 0 5px rgba(15, 76, 125, 0.08);
}

.modal-form--consultation textarea {
    min-height: 130px;
    resize: vertical;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    border: 2px solid #1fc38d;
    background: linear-gradient(135deg, #1fc38d 0%, #18a36d 100%);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    transition: all 0.25s ease;
    box-shadow: 0 12px 30px rgba(31, 195, 141, 0.2);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(31, 195, 141, 0.28);
}

.modal-footer-features--consultation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    padding: 1.4rem 2rem 2rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.modal-footer-features--consultation div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background: #ffffff;
    color: #1f3249;
    font-weight: 600;
    border: 1px solid rgba(112, 176, 232, 0.16);
    box-shadow: 0 8px 22px rgba(31, 82, 136, 0.055);
}

.modal-footer-features--consultation div i {
    color: #1fc38d;
    font-size: 1rem;
    flex-shrink: 0;
}

@media (max-width: 980px) {
    .modal-body--consultation {
        grid-template-columns: 1fr;
    }

    .grid-2-col {
        grid-template-columns: 1fr;
    }

    .toggle-segment {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .enquiry-modal {
        padding: 0;
        align-items: flex-end;
        background: rgba(7, 17, 31, 0.82);
    }

    .modal-panel {
        width: 100%;
        max-width: none;
        max-height: 94vh;
        border-radius: 24px 24px 0 0;
        margin: 0;
    }

    .modal-close {
        top: 0.7rem;
        right: 0.7rem;
        width: 2.4rem;
        height: 2.4rem;
    }

    .modal-header--consultation {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.2rem 1rem;
    }

    .modal-header--consultation .modal-header-icon {
        width: 48px;
        height: 48px;
    }

    .modal-body--consultation {
        padding: 1rem;
        gap: 1rem;
    }

    .popup-side-panel {
        padding: 1rem;
        gap: 1rem;
    }

    .popup-side-visual__image {
        min-height: 180px;
        font-size: 2.6rem;
    }

    .popup-side-benefits li {
        padding: 0.8rem 0.9rem;
    }

    .form-group--toggle .toggle-segment {
        grid-template-columns: 1fr;
    }

    .toggle-option {
        min-height: 50px;
        padding: 0.85rem 0.75rem;
        border-radius: 16px;
    }

    .grid-2-col {
        gap: 0.8rem;
    }

    .modal-form--consultation .form-group input,
    .modal-form--consultation .form-group select,
    .modal-form--consultation .form-group textarea {
        padding: 0.9rem 0.95rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .modal-form--consultation textarea {
        min-height: 110px;
    }

    .btn-submit {
        width: 100%;
        padding: 0.95rem 1rem;
    }

    .modal-footer-features--consultation {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 1rem;
    }
}

.modal-form .step-1,
.modal-form .step-2 {
    display: none;
}

.modal-form .step-1.active,
.modal-form .step-2.active {
    display: block;
}

.resume-prompt {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.resume-prompt[hidden] {
    display: none;
}

.resume-prompt__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
}

.resume-prompt__card {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    background: white;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    padding: 1.75rem;
    text-align: center;
}

.resume-prompt__eyebrow {
    color: #4338ca;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.resume-prompt__card h3 {
    margin-bottom: 0.75rem;
    color: #0f172a;
}

.resume-prompt__card p {
    color: #475569;
    margin-bottom: 1rem;
}

.resume-prompt__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.form-message {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    margin-top: 1rem;
}

.form-message i {
    font-size: 1rem;
}

.form-message[role="alert"]:has(i.fa-exclamation-circle) {
    background: #fef2f2;
    color: #b91c1c;
}