/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --primary:        #0f172a;
    --secondary:      #1e293b;
    --accent:         #3b82f6;
    --accent-dark:    #2563eb;
    --accent-light:   #60a5fa;
    --success:        #10b981;
    --warning:        #f59e0b;
    --purple:         #8b5cf6;
    --pink:           #ec4899;
    --teal:           #14b8a6;
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --glass:          rgba(15, 23, 42, 0.6);
    --glass-border:   rgba(255, 255, 255, 0.08);
    --card-bg:        rgba(30, 41, 59, 0.5);
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --shadow:     0 4px 24px rgba(0,0,0,0.4);
    --shadow-lg:  0 12px 48px rgba(0,0,0,0.5);
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px; }
body { font-family:'Inter','Segoe UI',system-ui,sans-serif; background:var(--primary); color:var(--text-primary); line-height:1.7; overflow-x:hidden; }
img  { max-width:100%; height:auto; display:block; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }
address { font-style:normal; }
button  { font-family:inherit; cursor:pointer; border:none; background:none; }

/* =============================================
   LAYOUT UTILITIES
   ============================================= */
.container        { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.container--narrow { max-width:800px; margin:0 auto; padding:0 1.5rem; }
section { padding:6rem 0; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.875rem 2rem; font-size:0.95rem; font-weight:600;
    border-radius:var(--radius-sm); transition:all var(--transition);
    text-decoration:none; white-space:nowrap; border:2px solid transparent;
}
.btn-primary  { background:var(--accent); color:#fff; box-shadow:0 4px 20px rgba(59,130,246,.35); }
.btn-primary:hover { background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 8px 30px rgba(59,130,246,.5); }
.btn-secondary { background:transparent; color:var(--accent); border-color:var(--accent); }
.btn-secondary:hover { background:rgba(59,130,246,.1); transform:translateY(-2px); }
.btn-outline   { background:transparent; color:var(--text-primary); border-color:var(--glass-border); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn-white     { background:#fff; color:var(--accent-dark); font-weight:700; }
.btn-white:hover { background:var(--accent-light); color:#fff; transform:translateY(-2px); }
.btn-outline-white { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-2px); }

/* =============================================
   SECTION HEADERS
   ============================================= */
.section-label {
    display:inline-block; font-size:.8rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
    margin-bottom:.75rem; background:rgba(59,130,246,.12);
    padding:.35rem .85rem; border-radius:50px;
    border:1px solid rgba(59,130,246,.25);
}
.section-header { text-align:center; margin-bottom:3.5rem; }
.section-header h2 { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800; margin-bottom:1rem; line-height:1.2; }
.section-header p  { color:var(--text-secondary); font-size:1.1rem; max-width:520px; margin:0 auto; }

/* =============================================
   NAVIGATION
   ============================================= */
header { position:fixed; top:0; width:100%; z-index:1000; }
nav    { background:rgba(15,23,42,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); }

.nav-container {
    max-width:1200px; margin:0 auto; padding:0 1.5rem;
    display:flex; align-items:center; height:72px; gap:1.5rem;
}
.logo { display:flex; align-items:center; flex-shrink:0; }
.logo-img {
    height: 46px;
    width: auto;
    display: block;
    object-fit: contain;
    /* Preserve colours on dark bg */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
    transition: opacity var(--transition);
}
.logo:hover .logo-img { opacity: .85; }
/* footer variant — slightly smaller */
.footer-about .logo-img { height: 42px; }
/* Fallback text (hidden when image present) */
.logo-mark, .logo-text { display:none; }

.nav-links { display:flex; align-items:center; gap:.25rem; margin-left:auto; }
.nav-links > li { position:relative; }
.nav-links a { display:block; padding:.5rem .85rem; font-size:.9rem; font-weight:500; color:var(--text-secondary); border-radius:var(--radius-sm); transition:all var(--transition); }
.nav-links a:hover, .nav-links li.active > a { color:var(--text-primary); background:rgba(255,255,255,.06); }

.has-dropdown > a::after { content:' ▾'; font-size:.75rem; }
.dropdown { display:none; position:absolute; top:calc(100% + .5rem); left:0; min-width:180px; background:var(--secondary); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:.5rem; box-shadow:var(--shadow-lg); }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display:block; }
.dropdown a { display:block; padding:.6rem .85rem; font-size:.875rem; border-radius:var(--radius-sm); }

.nav-cta { flex-shrink:0; padding:.6rem 1.25rem; font-size:.875rem; }

.nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; margin-left:auto; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--text-primary); border-radius:2px; transition:all var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu { display:none; background:var(--secondary); border-top:1px solid var(--glass-border); padding:1rem 1.5rem 1.5rem; }
.mobile-menu.open { display:block; }
.mobile-menu ul { display:flex; flex-direction:column; gap:.25rem; }
.mobile-menu a { display:block; padding:.75rem 1rem; font-size:1rem; font-weight:500; color:var(--text-secondary); border-radius:var(--radius-sm); transition:all var(--transition); }
.mobile-menu a:hover { background:rgba(255,255,255,.06); color:var(--text-primary); }
.mobile-menu .btn-primary { margin-top:.75rem; text-align:center; justify-content:center; }

/* =============================================
   HERO — ANIMATED SLIDER
   ============================================= */
.hero {
    min-height:100vh; display:flex; flex-direction:column;
    position:relative; overflow:hidden; padding-top:72px;
}

/* Animated mesh background */
.hero-bg {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
        radial-gradient(ellipse 70% 60% at 15% 30%, rgba(59,130,246,.14) 0%, transparent 55%),
        radial-gradient(ellipse 60% 70% at 80% 15%, rgba(139,92,246,.1) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 60% 85%, rgba(16,185,129,.08) 0%, transparent 55%);
    animation:bgDrift 18s ease-in-out infinite alternate;
}
@keyframes bgDrift {
    0%   { opacity:.7; filter:hue-rotate(0deg); }
    50%  { opacity:1; }
    100% { opacity:.8; filter:hue-rotate(15deg); }
}

/* Dot grid */
.hero-grid {
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:
        radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:40px 40px;
}

/* Floating geometric shapes */
.hero-shapes { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

.hero-shape { position:absolute; opacity:.12; }

.shape-ring-lg {
    width:500px; height:500px;
    border:1.5px solid var(--accent);
    border-radius:50%;
    top:-100px; right:-100px;
    animation:spin 60s linear infinite;
}
.shape-ring-md {
    width:280px; height:280px;
    border:1px solid var(--purple);
    border-radius:50%;
    bottom:10%; left:-80px;
    animation:spin 40s linear infinite reverse;
}
.shape-sq {
    width:60px; height:60px;
    border:1px solid var(--accent-light);
    top:25%; left:8%;
    animation:floatSq 12s ease-in-out infinite;
    opacity:.15;
}
.shape-sq-sm {
    width:30px; height:30px;
    border:1px solid var(--teal);
    top:65%; right:12%;
    animation:floatSq 9s ease-in-out infinite 3s;
    opacity:.2;
}
.shape-tri {
    width:0; height:0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-bottom:34px solid rgba(139,92,246,.2);
    top:40%; right:18%;
    animation:floatSq 14s ease-in-out infinite 2s;
}
.shape-line {
    width:80px; height:2px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    bottom:30%; left:15%;
    animation:linePulse 4s ease-in-out infinite;
    opacity:.3;
}

@keyframes spin    { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes floatSq {
    0%,100% { transform:translateY(0) rotate(0deg); }
    33%     { transform:translateY(-18px) rotate(8deg); }
    66%     { transform:translateY(10px) rotate(-5deg); }
}
@keyframes linePulse {
    0%,100% { opacity:.15; transform:scaleX(1); }
    50%     { opacity:.5; transform:scaleX(1.4); }
}

/* Particles (generated by JS) */
.hero-particles { position:absolute; inset:0; pointer-events:none; z-index:0; }
.particle {
    position:absolute; width:3px; height:3px;
    background:var(--accent); border-radius:50%; opacity:0;
    animation:particleRise var(--dur, 8s) ease-in var(--delay, 0s) infinite;
}
@keyframes particleRise {
    0%   { opacity:0; transform:translateY(0) scale(1); }
    10%  { opacity:.6; }
    80%  { opacity:.2; }
    100% { opacity:0; transform:translateY(-120vh) scale(.3); }
}

/* Slide progress bar */
.slide-progress {
    position:absolute; bottom:0; left:0; right:0;
    height:3px; background:rgba(255,255,255,.06); z-index:5;
}
.slide-progress-fill {
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--accent), var(--purple));
    border-radius:2px;
}

/* Slider layout */
.hero-slider {
    flex:1; display:flex; flex-direction:column;
    justify-content:center; position:relative; z-index:1;
}

/* Slide animation — elements hidden by default, stagger when active */
.slide { display:none; }
.slide.active { display:block; }

.slide .slide-badge      { opacity:0; }
.slide .slide-content h1 { opacity:0; }
.slide .slide-content > p { opacity:0; }
.slide .cta-buttons       { opacity:0; }

.slide.active .slide-badge {
    animation: fromTop .55s cubic-bezier(.34,1.56,.64,1) .05s forwards;
}
.slide.active .slide-content h1 {
    animation: heroTitle .7s cubic-bezier(.25,.46,.45,.94) .2s forwards;
}
.slide.active .slide-content > p {
    animation: fadeBlur .65s ease-out .38s forwards;
}
.slide.active .cta-buttons {
    animation: fromBottom .6s cubic-bezier(.34,1.56,.64,1) .55s forwards;
}

@keyframes fromTop {
    from { opacity:0; transform:translateY(-24px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes heroTitle {
    from { opacity:0; transform:translateX(-30px) skewX(-2deg); }
    to   { opacity:1; transform:translateX(0) skewX(0); }
}
@keyframes fadeBlur {
    from { opacity:0; filter:blur(4px); transform:translateY(8px); }
    to   { opacity:1; filter:blur(0); transform:translateY(0); }
}
@keyframes fromBottom {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

.slide-content {
    max-width:800px; margin:0 auto;
    padding:4rem 1.5rem 3rem; text-align:center;
}
.slide-badge {
    display:inline-flex; align-items:center; gap:.45rem;
    background:rgba(59,130,246,.12); color:var(--accent-light);
    border:1px solid rgba(59,130,246,.3); border-radius:50px;
    padding:.4rem 1.1rem; font-size:.78rem; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.5rem;
}
.slide-badge-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--accent); animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%,100% { transform:scale(1); opacity:1; }
    50%     { transform:scale(1.5); opacity:.5; }
}

.slide-content h1 {
    font-size:clamp(2rem,6vw,3.75rem); font-weight:800;
    line-height:1.15; margin-bottom:1.5rem;
    background:linear-gradient(135deg, var(--text-primary) 0%, var(--accent-light) 60%, var(--purple) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.slide-content p {
    font-size:1.15rem; color:var(--text-secondary);
    margin-bottom:2.5rem; max-width:560px;
    margin-left:auto; margin-right:auto;
}
.cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* Slider controls */
.slider-controls {
    display:flex; align-items:center; justify-content:center;
    gap:1.25rem; padding:0 1.5rem 2rem; position:relative; z-index:2;
}
.slider-btn {
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--glass-border); background:rgba(15,23,42,.7);
    color:var(--text-primary); font-size:1rem;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(10px); transition:all var(--transition);
}
.slider-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(59,130,246,.1); }

.slider-dots { display:flex; gap:.5rem; align-items:center; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--text-muted); border:none; transition:all var(--transition); padding:0; }
.dot.active { background:var(--accent); width:28px; border-radius:4px; }

/* Stats bar */
.hero-stats {
    display:flex; justify-content:center;
    background:rgba(15,23,42,.8); border-top:1px solid var(--glass-border);
    backdrop-filter:blur(12px); position:relative; z-index:1;
}
.stat-item { flex:1; max-width:220px; text-align:center; padding:1.5rem 1rem; border-right:1px solid var(--glass-border); }
.stat-item:last-child { border-right:none; }

.stat-icon { display:flex; justify-content:center; margin-bottom:.5rem; color:var(--accent); }
.stat-icon svg { width:20px; height:20px; }

.stat-item strong { display:block; font-size:1.8rem; font-weight:800; color:var(--accent); line-height:1; margin-bottom:.3rem; }
.stat-item span   { font-size:.75rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.08em; font-weight:500; }

/* =============================================
   ABOUT / WHY MDX
   ============================================= */
.about { background:linear-gradient(180deg,transparent 0%,rgba(30,41,59,.3) 100%); }
.about-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-bottom:3rem; }

.about-card {
    background:var(--card-bg); border:1px solid var(--glass-border);
    border-radius:var(--radius-lg); padding:2.5rem 2rem; text-align:center;
    transition:all var(--transition); backdrop-filter:blur(8px);
}
.about-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:0 8px 32px rgba(59,130,246,.15); }

/* SVG icon wrapper */
.icon-wrap {
    width:64px; height:64px; border-radius:var(--radius-md); margin:0 auto 1.5rem;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--accent-dark),var(--accent-light));
    box-shadow:0 8px 24px rgba(59,130,246,.3);
}
.icon-wrap svg { width:30px; height:30px; color:#fff; stroke:#fff; }
.icon-wrap.green  { background:linear-gradient(135deg,#059669,var(--success)); box-shadow:0 8px 24px rgba(16,185,129,.3); }
.icon-wrap.purple { background:linear-gradient(135deg,#7c3aed,var(--purple)); box-shadow:0 8px 24px rgba(139,92,246,.3); }
.icon-wrap.teal   { background:linear-gradient(135deg,#0d9488,var(--teal)); box-shadow:0 8px 24px rgba(20,184,166,.3); }
.icon-wrap.orange { background:linear-gradient(135deg,#d97706,var(--warning)); box-shadow:0 8px 24px rgba(245,158,11,.3); }
.icon-wrap.pink   { background:linear-gradient(135deg,#be185d,var(--pink)); box-shadow:0 8px 24px rgba(236,72,153,.3); }
.icon-wrap.dark   { background:linear-gradient(135deg,#1e293b,#334155); box-shadow:0 8px 24px rgba(0,0,0,.3); border:1px solid var(--glass-border); }

.about-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:.75rem; }
.about-card p  { color:var(--text-secondary); font-size:.95rem; line-height:1.7; }

.about-mission { max-width:700px; margin:0 auto; text-align:center; }
.about-mission blockquote {
    border-left:3px solid var(--accent); padding:1.5rem 2rem;
    background:var(--card-bg); border-radius:var(--radius-md);
    font-style:italic; color:var(--text-secondary); font-size:1.05rem; line-height:1.8;
}

/* =============================================
   COURSES
   ============================================= */
.courses-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }

.course-card {
    background:var(--card-bg); border:1px solid var(--glass-border);
    border-radius:var(--radius-lg); padding:2rem; display:flex;
    flex-direction:column; gap:1rem; transition:all var(--transition);
    backdrop-filter:blur(8px); position:relative; overflow:hidden;
}
.course-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--accent),var(--purple));
    transform:scaleX(0); transform-origin:left; transition:transform var(--transition);
}
.course-card:hover { border-color:var(--accent); transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.course-card:hover::after { transform:scaleX(1); }
.course-card.featured { border-color:var(--accent); background:rgba(59,130,246,.07); }
.course-card.featured::after { transform:scaleX(1); }

.course-top { display:flex; align-items:flex-start; justify-content:space-between; }
.course-icon { width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; }
.course-icon svg { width:26px; height:26px; stroke:#fff; }
.course-icon.blue   { background:linear-gradient(135deg,var(--accent-dark),var(--accent-light)); box-shadow:0 6px 20px rgba(59,130,246,.3); }
.course-icon.green  { background:linear-gradient(135deg,#059669,var(--success)); box-shadow:0 6px 20px rgba(16,185,129,.3); }
.course-icon.purple { background:linear-gradient(135deg,#7c3aed,var(--purple)); box-shadow:0 6px 20px rgba(139,92,246,.3); }

.course-meta { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.course-price { font-size:.78rem; font-weight:600; color:var(--success); background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); padding:.2rem .6rem; border-radius:50px; }
.course-badge { font-size:.74rem; font-weight:600; color:var(--warning); background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25); padding:.2rem .6rem; border-radius:50px; }

.course-card h3 { font-size:1.4rem; font-weight:700; }
.course-instructor { font-size:.875rem; color:var(--text-secondary); }
.course-instructor strong { color:var(--accent-light); }
.course-card > p { color:var(--text-secondary); font-size:.95rem; flex:1; }

.course-levels { display:flex; flex-wrap:wrap; gap:.4rem; }
.course-levels li { font-size:.78rem; font-weight:500; color:var(--text-secondary); background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:50px; padding:.25rem .7rem; }

/* =============================================
   TUTORS
   ============================================= */
.tutors { background:rgba(30,41,59,.2); }
.tutors-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }

.tutor-card {
    background:var(--card-bg); border:1px solid var(--glass-border);
    border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition);
    backdrop-filter:blur(8px);
}
.tutor-card:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--shadow-lg); }

/* Styled initials avatar */
.tutor-avatar {
    height:180px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.tutor-avatar-bg {
    position:absolute; inset:0;
    background:linear-gradient(135deg,var(--av-from,var(--accent-dark)) 0%,var(--av-to,var(--accent-light)) 100%);
}
.tutor-avatar-deco {
    position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.12) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(0,0,0,.15) 0%, transparent 40%);
}
.tutor-avatar-ring {
    position:absolute;
    width:160px; height:160px; border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    top:50%; left:50%; transform:translate(-50%,-50%);
}
.tutor-initials {
    position:relative; z-index:1;
    font-size:3rem; font-weight:800; color:rgba(255,255,255,.95);
    letter-spacing:-.02em; text-shadow:0 2px 12px rgba(0,0,0,.2);
}
.tutor-avatar-icon {
    position:absolute; bottom:12px; right:14px; z-index:1;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
}
.tutor-avatar-icon svg { width:16px; height:16px; stroke:rgba(255,255,255,.9); }

.tutor-body { padding:1.75rem; }
.tutor-body h3 { font-size:1.1rem; font-weight:700; margin-bottom:.3rem; }
.tutor-subject { display:block; font-size:.85rem; font-weight:600; color:var(--accent); margin-bottom:.85rem; }
.tutor-body p  { color:var(--text-secondary); font-size:.9rem; line-height:1.65; margin-bottom:1.25rem; }
.tutor-badge   { display:inline-flex; align-items:center; gap:.4rem; background:rgba(16,185,129,.1); color:var(--success); border:1px solid rgba(16,185,129,.25); padding:.35rem .85rem; border-radius:50px; font-size:.8rem; font-weight:600; }
.tutor-badge svg { width:13px; height:13px; stroke:var(--success); }

/* =============================================
   TESTIMONIALS SLIDER
   ============================================= */
.testimonials-track { position:relative; min-height:300px; }
.testimonial-card {
    display:none; background:var(--card-bg); border:1px solid var(--glass-border);
    border-radius:var(--radius-lg); padding:2.5rem; max-width:750px;
    margin:0 auto; backdrop-filter:blur(8px); animation:slideIn .5s ease-out;
}
.testimonial-card.active { display:block; }

.testimonial-stars { color:var(--warning); font-size:1.1rem; letter-spacing:3px; margin-bottom:.75rem; }
.testimonial-title { font-size:1.1rem; font-weight:700; margin-bottom:1rem; color:var(--accent-light); }
.testimonial-card blockquote p { color:var(--text-secondary); font-style:italic; font-size:1.05rem; line-height:1.8; margin-bottom:1.5rem; }
.testimonial-card blockquote p::before { content:'\201C'; }
.testimonial-card blockquote p::after  { content:'\201D'; }

.testimonial-author { display:flex; align-items:center; gap:1rem; }
.author-avatar {
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--purple));
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1rem; color:#fff;
}
.testimonial-author strong { display:block; font-size:.95rem; }
.testimonial-author span   { font-size:.8rem; color:var(--text-muted); }

.testimonial-controls { margin-top:1.5rem; display:flex; align-items:center; justify-content:center; gap:1.25rem; }

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

/* =============================================
   BLOG
   ============================================= */
.blog { background:rgba(30,41,59,.2); }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }

.blog-card {
    background:var(--card-bg); border:1px solid var(--glass-border);
    border-radius:var(--radius-lg); padding:2rem; display:flex;
    flex-direction:column; gap:.85rem; transition:all var(--transition); backdrop-filter:blur(8px);
}
.blog-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow); }

.blog-icon-wrap { width:48px; height:48px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:.25rem; }
.blog-icon-wrap svg { width:22px; height:22px; }

.blog-meta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.blog-meta time { font-size:.8rem; color:var(--text-muted); }
.blog-author { font-size:.8rem; color:var(--accent); font-weight:600; }

.blog-card h3 { font-size:1.05rem; font-weight:700; line-height:1.4; flex:1; }
.blog-card p   { color:var(--text-secondary); font-size:.9rem; line-height:1.65; flex:1; }
.read-more { font-size:.875rem; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:.3rem; margin-top:auto; transition:gap var(--transition),color var(--transition); }
.read-more:hover { color:var(--accent-light); gap:.6rem; }

/* =============================================
   FAQ
   ============================================= */
.faq-list { display:flex; flex-direction:column; gap:.75rem; }
.faq-item {
    background:var(--card-bg); border:1px solid var(--glass-border);
    border-radius:var(--radius-md); overflow:hidden; transition:border-color var(--transition); backdrop-filter:blur(8px);
}
.faq-item:has(.faq-header[aria-expanded="true"]) { border-color:var(--accent); }
.faq-header {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:1.25rem 1.5rem; font-size:1rem; font-weight:600;
    color:var(--text-primary); text-align:left; gap:1rem; transition:background var(--transition);
}
.faq-header:hover { background:rgba(59,130,246,.06); }
.faq-icon { color:var(--accent); font-size:1.4rem; line-height:1; flex-shrink:0; transition:transform var(--transition); }
.faq-header[aria-expanded="true"] .faq-icon { transform:rotate(45deg); }
.faq-content { padding:0 1.5rem 1.25rem; color:var(--text-secondary); font-size:.95rem; line-height:1.75; border-top:1px solid var(--glass-border); padding-top:1.25rem; }
.faq-content[hidden] { display:none; }

/* =============================================
   CTA BANNER
   ============================================= */
.cta-banner {
    background:linear-gradient(135deg,var(--accent-dark) 0%,#1d4ed8 50%,#1e40af 100%);
    padding:5rem 0; position:relative; overflow:hidden;
}
.cta-banner::before {
    content:''; position:absolute; top:-50%; right:-10%;
    width:400px; height:400px; background:rgba(255,255,255,.05);
    border-radius:50%; pointer-events:none;
}
.cta-inner { text-align:center; max-width:640px; margin:0 auto; }
.cta-inner h2 { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800; margin-bottom:1rem; color:#fff; }
.cta-inner p  { color:rgba(255,255,255,.8); font-size:1.1rem; margin-bottom:2rem; }
.cta-inner .cta-buttons { justify-content:center; }

/* =============================================
   FOOTER
   ============================================= */
footer { background:var(--secondary); border-top:1px solid var(--glass-border); padding:4rem 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:3rem; }

.footer-about .logo { margin-bottom:1.25rem; }
.footer-about p { color:var(--text-secondary); font-size:.9rem; line-height:1.75; margin-bottom:1.5rem; }

.social-links { display:flex; gap:.75rem; }
.social-links a {
    width:38px; height:38px; border-radius:var(--radius-sm);
    border:1px solid var(--glass-border); background:rgba(255,255,255,.04);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-secondary); transition:all var(--transition);
}
.social-links a:hover { border-color:var(--accent); color:var(--accent); background:rgba(59,130,246,.1); }

.footer-col h3 { font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:1.25rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.6rem; }
.footer-col ul a { font-size:.9rem; color:var(--text-secondary); transition:color var(--transition); }
.footer-col ul a:hover { color:var(--text-primary); }

.contact-list { display:flex; flex-direction:column; gap:.85rem; }
.contact-list li { display:flex; align-items:flex-start; gap:.65rem; font-size:.9rem; color:var(--text-secondary); }
.contact-list .c-icon { width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.contact-list .c-icon svg { width:16px; height:16px; stroke:var(--accent); }
.contact-list a { color:var(--text-secondary); transition:color var(--transition); }
.contact-list a:hover { color:var(--accent); }

.footer-bottom { border-top:1px solid var(--glass-border); padding:1.5rem 0; text-align:center; font-size:.85rem; color:var(--text-muted); }

/* =============================================
   SCROLL REVEAL
   ============================================= */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:1024px) {
    .footer-grid { grid-template-columns:1fr 1fr; }
    .footer-about { grid-column:1 / -1; }
}
@media (max-width:768px) {
    section { padding:4rem 0; }
    .nav-links,.nav-cta { display:none; }
    .nav-toggle { display:flex; }
    .hero-stats { flex-wrap:wrap; }
    .stat-item { flex:1 1 50%; border-right:none; border-bottom:1px solid var(--glass-border); }
    .stat-item:nth-child(odd) { border-right:1px solid var(--glass-border); }
    .slide-content { padding:2rem 1rem 1.5rem; }
    .slide-content h1 { font-size:clamp(1.75rem,8vw,2.5rem); }
    .cta-buttons { flex-direction:column; align-items:center; }
    .cta-buttons .btn { width:100%; max-width:300px; justify-content:center; }
    .footer-grid { grid-template-columns:1fr; gap:2rem; }
    .footer-about { grid-column:auto; }
}
@media (max-width:480px) {
    .section-header h2 { font-size:1.5rem; }
    .courses-grid,.tutors-grid,.blog-grid,.about-grid { grid-template-columns:1fr; }
}

/* =============================================
   ACCESSIBILITY
   ============================================= */
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    html { scroll-behavior:auto; }
}