/* ============================================================
   EDUSPARK — Education Modern Styles (Basic Tier)
   Theme: Deep navy (#0a0f1e) / electric blue (#3b82f6) / sky (#60a5fa)
   ============================================================ */

body { font-family:'Inter','Helvetica Neue',sans-serif; background:#0a0f1e; color:#cbd5e1; }
h1,h2,h3,h4 { font-family:'Plus Jakarta Sans','Inter',sans-serif; }

/* Nav */
.site-nav { position:fixed;top:0;left:0;right:0;z-index:100;padding:1.2rem 0;transition:all 0.4s; }
.site-nav.scrolled { background:rgba(10,15,30,0.95);backdrop-filter:blur(16px);box-shadow:0 1px 30px rgba(59,130,246,0.1);padding:0.8rem 0; }
.nav-inner { max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between; }
.nav-logo { font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-0.5px; }
.nav-logo span { color:#3b82f6; }
.nav-links { display:flex;gap:2.5rem;list-style:none; }
.nav-links a { font-size:0.82rem;font-weight:500;color:rgba(203,213,225,0.6);transition:color 0.3s; }
.nav-links a:hover,.nav-links a.active { color:#60a5fa; }
.nav-cta { background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;padding:0.55rem 1.4rem;border-radius:8px;font-size:0.8rem;font-weight:600;transition:opacity 0.3s; }
.nav-cta:hover { opacity:0.85; }
.hamburger { background:none;border:none;cursor:pointer;display:none;flex-direction:column;gap:5px;padding:4px; }
.hamburger span { width:22px;height:2px;background:#60a5fa;display:block;transition:all 0.3s; }
.mobile-nav { list-style:none;max-height:0;overflow:hidden;background:rgba(10,15,30,0.98);transition:max-height 0.4s; }
.mobile-nav.open { max-height:300px;padding:1rem 0; }
.mobile-nav li a { display:block;padding:0.9rem 1.5rem;font-size:0.85rem;color:rgba(203,213,225,0.7);border-bottom:1px solid rgba(59,130,246,0.06); }
.mobile-nav li a:hover { color:#60a5fa; }

/* Hero */
.hero-section { position:relative;min-height:100vh;background:#0a0f1e;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center; }
.hero-overlay { position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(59,130,246,0.08) 0%,rgba(10,15,30,0.9) 65%);z-index:1; }
.hero-content { position:relative;z-index:2;padding-top:80px;max-width:780px;padding-left:1.5rem;padding-right:1.5rem; }
.hero-badge { display:inline-block;background:rgba(59,130,246,0.12);border:1px solid rgba(59,130,246,0.3);color:#60a5fa;font-size:0.7rem;letter-spacing:3px;text-transform:uppercase;padding:0.35rem 1rem;border-radius:20px;margin-bottom:1.5rem; }
.hero-title { font-size:clamp(2.8rem,7vw,5.5rem);color:#fff;font-weight:800;line-height:1.05;letter-spacing:-2px;margin-bottom:1.2rem; }
.hero-title span { background:linear-gradient(90deg,#3b82f6,#60a5fa,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-sub { font-size:1.05rem;color:rgba(203,213,225,0.6);line-height:1.75;margin-bottom:2.5rem;max-width:560px;margin-left:auto;margin-right:auto; }
.hero-cta { display:flex;gap:1rem;justify-content:center;flex-wrap:wrap; }
.btn-primary { background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;padding:0.9rem 2.2rem;border-radius:10px;font-size:0.88rem;font-weight:700;transition:all 0.3s;display:inline-block; }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(59,130,246,0.35); }
.btn-outline { border:1px solid rgba(96,165,250,0.4);color:#60a5fa;padding:0.9rem 2.2rem;border-radius:10px;font-size:0.88rem;font-weight:600;transition:all 0.3s;display:inline-block;background:transparent; }
.btn-outline:hover { background:rgba(59,130,246,0.08);border-color:#60a5fa; }
.hero-stats { display:flex;gap:3rem;justify-content:center;margin-top:3.5rem;flex-wrap:wrap; }
.hero-stat strong { display:block;font-size:1.8rem;font-weight:800;color:#fff; }
.hero-stat span { font-size:0.7rem;letter-spacing:2px;text-transform:uppercase;color:rgba(203,213,225,0.4); }

/* Section base */
.section { padding:6rem 0; }
.section-dark { background:#060b18; }
.container { max-width:1200px;margin:0 auto;padding:0 2rem; }
.section-label { font-size:0.68rem;letter-spacing:4px;text-transform:uppercase;color:#3b82f6;font-weight:600;margin-bottom:0.8rem;display:block; }
.section-title { font-size:clamp(2rem,4vw,3.2rem);color:#fff;font-weight:800;line-height:1.15;margin-bottom:1rem;letter-spacing:-1px; }
.section-sub { color:rgba(203,213,225,0.5);line-height:1.8;font-size:0.92rem;max-width:540px; }
.section-header { text-align:center;margin-bottom:4rem; }
.section-header .section-sub { margin:0 auto; }

/* Course Cards */
.courses-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem; }
.course-card { background:rgba(255,255,255,0.03);border:1px solid rgba(59,130,246,0.1);border-radius:14px;padding:2rem;transition:all 0.35s;position:relative;overflow:hidden; }
.course-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);opacity:0;transition:opacity 0.35s; }
.course-card:hover { transform:translateY(-4px);border-color:rgba(59,130,246,0.25);box-shadow:0 16px 40px rgba(0,0,0,0.3); }
.course-card:hover::before { opacity:1; }
.course-icon { font-size:2.2rem;margin-bottom:1rem;display:block; }
.course-cat { font-size:0.65rem;letter-spacing:2.5px;text-transform:uppercase;color:#3b82f6;font-weight:600;margin-bottom:0.5rem; }
.course-name { font-size:1.15rem;color:#fff;font-weight:700;margin-bottom:0.6rem; }
.course-desc { font-size:0.83rem;color:rgba(203,213,225,0.5);line-height:1.65; }
.course-meta { display:flex;gap:1.5rem;margin-top:1.2rem;font-size:0.75rem;color:rgba(203,213,225,0.4); }

/* Features grid */
.features-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem; }
.feature-item { text-align:center;padding:2rem; }
.feature-icon { font-size:2.5rem;margin-bottom:1rem;display:block; }
.feature-title { font-size:1.05rem;color:#fff;font-weight:700;margin-bottom:0.5rem; }
.feature-desc { font-size:0.83rem;color:rgba(203,213,225,0.5);line-height:1.65; }

/* Testimonials */
.testimonials-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem; }
.t-card { background:rgba(255,255,255,0.03);border:1px solid rgba(59,130,246,0.1);border-radius:14px;padding:2rem; }
.t-card p { font-size:0.9rem;color:rgba(203,213,225,0.65);line-height:1.8;font-style:italic;margin-bottom:1.2rem; }
.t-author { font-size:0.78rem;font-weight:600;color:#60a5fa; }
.t-role { font-size:0.72rem;color:rgba(203,213,225,0.35); }
.stars { color:#f59e0b;font-size:0.8rem;margin-bottom:0.8rem; }

/* Stats bar */
.stats-bar { background:#060b18;border-top:1px solid rgba(59,130,246,0.1);border-bottom:1px solid rgba(59,130,246,0.1);padding:3.5rem 0; }
.stats-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;text-align:center; }
.stat-num { display:block;font-size:2.6rem;color:#3b82f6;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif; }
.stat-label { font-size:0.65rem;letter-spacing:2.5px;text-transform:uppercase;color:rgba(203,213,225,0.4); }

/* CTA */
.cta-banner { padding:7rem 0;text-align:center;background:linear-gradient(135deg,#0a0f1e,#0f1a35); }
.cta-banner h2 { font-size:clamp(2rem,4.5vw,3.5rem);color:#fff;font-weight:800;margin-bottom:1rem;letter-spacing:-1px; }
.cta-banner p { color:rgba(203,213,225,0.5);margin-bottom:2.5rem;font-size:0.9rem; }

/* Footer */
.site-footer { background:#060b18;border-top:1px solid rgba(59,130,246,0.08);padding:5rem 0 2rem; }
.footer-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:3rem;margin-bottom:4rem; }
.footer-brand { font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:0.8rem; }
.footer-brand span { color:#3b82f6; }
.footer-desc { font-size:0.82rem;color:rgba(203,213,225,0.4);line-height:1.8; }
.footer-grid h4 { font-size:0.7rem;letter-spacing:2.5px;text-transform:uppercase;color:rgba(203,213,225,0.4);font-weight:600;margin-bottom:1.2rem; }
.footer-grid ul { list-style:none; }
.footer-grid ul li a { font-size:0.82rem;color:rgba(203,213,225,0.4);line-height:2.4;transition:color 0.3s; }
.footer-grid ul li a:hover { color:#60a5fa; }
.footer-bottom { border-top:1px solid rgba(59,130,246,0.06);padding-top:1.5rem;text-align:center;font-size:0.75rem;color:rgba(203,213,225,0.25); }

/* Page Hero (inner pages) */
.page-hero { background:linear-gradient(135deg,#0a0f1e,#0d1530);padding:10rem 0 5rem;text-align:center;border-bottom:1px solid rgba(59,130,246,0.1); }
.page-hero h1 { font-size:clamp(2.2rem,5vw,4rem);color:#fff;font-weight:800;letter-spacing:-1.5px;margin-bottom:1rem; }
.page-hero p { color:rgba(203,213,225,0.5);font-size:1rem;max-width:500px;margin:0 auto; }

/* Contact */
.contact-grid { display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start; }
.contact-info h3 { font-size:1.5rem;color:#fff;font-weight:700;margin-bottom:1.5rem; }
.contact-item { display:flex;gap:1rem;margin-bottom:1.5rem; }
.contact-icon { font-size:1.4rem;flex-shrink:0; }
.contact-item h4 { font-size:0.8rem;color:#60a5fa;font-weight:600;letter-spacing:1px;margin-bottom:0.2rem; }
.contact-item p { font-size:0.85rem;color:rgba(203,213,225,0.5); }
.contact-form { background:rgba(255,255,255,0.03);border:1px solid rgba(59,130,246,0.1);border-radius:16px;padding:2.5rem; }
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block;font-size:0.78rem;font-weight:600;color:rgba(203,213,225,0.6);margin-bottom:0.5rem;letter-spacing:0.5px; }
.form-group input,.form-group textarea,.form-group select { width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(59,130,246,0.15);border-radius:8px;padding:0.85rem 1rem;font-size:0.88rem;color:#cbd5e1;font-family:'Inter',sans-serif;transition:border-color 0.3s;outline:none; }
.form-group input:focus,.form-group textarea:focus { border-color:rgba(59,130,246,0.5); }
.form-group textarea { height:140px;resize:vertical; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.btn-submit { background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;border:none;padding:1rem 2rem;border-radius:10px;font-size:0.9rem;font-weight:700;cursor:pointer;width:100%;transition:all 0.3s; }
.btn-submit:hover { opacity:0.88;transform:translateY(-1px); }

/* About page */
.team-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2rem; }
.team-card { text-align:center;padding:2rem;background:rgba(255,255,255,0.03);border:1px solid rgba(59,130,246,0.08);border-radius:14px; }
.team-avatar { width:80px;height:80px;border-radius:50%;margin:0 auto 1rem;background:linear-gradient(135deg,#3b82f6,#60a5fa);display:flex;align-items:center;justify-content:center;font-size:2rem; }
.team-name { font-size:1rem;color:#fff;font-weight:700;margin-bottom:0.2rem; }
.team-role { font-size:0.75rem;color:#3b82f6;letter-spacing:1px; }

/* Scroll progress */
.scroll-progress { position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:9999;width:0%;transition:width 0.1s; }
/* Back to top */
.back-to-top { position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:50%;color:#fff;font-size:1.1rem;cursor:pointer;z-index:500;opacity:0;transform:translateY(10px);transition:all 0.3s;display:flex;align-items:center;justify-content:center; }
.back-to-top.visible { opacity:1;transform:translateY(0); }

@media(max-width:768px) { .nav-links,.nav-cta { display:none; } .hamburger { display:flex; } .contact-grid { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; } }
@media(max-width:640px) { .hero-title { letter-spacing:-1px; } }