:root{
      --navy:#0a192f;
      --panel:#071425;
      --blue:#0070d8;
      --light-blue:#48b0ff;
      --muted:#94a3b8;
      --glass: rgba(255,255,255,0.03);
      --white:#f8fafc;
      --card-shadow: 0 10px 30px rgba(0,112,216,0.14);
      --radius:14px;
      --accent-glow: 0 6px 30px rgba(72,176,255,0.16);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:var(--navy);color:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%;height:auto}

    /* ---------- Layout container ---------- */
    .wrap{max-width:1200px;margin:0 auto;padding:28px}

    /* ---------- Header / Nav ---------- */
    header.site-header{
      position:sticky;top:0;z-index:999;
      background:linear-gradient(180deg, rgba(4,12,25,0.65), rgba(4,12,25,0.85));
      backdrop-filter:blur(6px);
      border-bottom:1px solid rgba(255,255,255,0.03);
    }
    .nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;gap:12px}
    .brand{display:flex;align-items:center;gap:12px}
    .brand .logo{
      width:56px;height:56px;border-radius:12px;overflow:hidden;display:grid;place-items:center;
      background:linear-gradient(135deg,var(--blue),var(--light-blue));
      box-shadow:var(--accent-glow);
      animation:logoPulse 3.6s ease-in-out infinite;
    }
    .brand .logo img{width:100%;height:100%;object-fit:cover;display:block}
    .brand h1{font-size:16px;margin:0;font-weight:700}
    nav.main-nav{display:flex;gap:18px;align-items:center}
    nav.main-nav a{color:var(--muted);font-weight:600;padding:8px;border-radius:8px}
    nav.main-nav a:hover{color:var(--white);background:rgba(255,255,255,0.02)}

    .cta-header .btn { padding:10px 16px;border-radius:10px;font-weight:700;border:0;cursor:pointer }
    .btn-primary{
      background:linear-gradient(90deg,var(--blue),var(--light-blue));
      color:var(--white);
      box-shadow:var(--card-shadow);
    }
    .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}

    @keyframes logoPulse {
      0%{ transform:translateY(0); filter:drop-shadow(0 0 8px rgba(72,176,255,0.18)) }
      50%{ transform:translateY(-4px); filter:drop-shadow(0 0 20px rgba(72,176,255,0.26)) }
      100%{ transform:translateY(0); filter:drop-shadow(0 0 8px rgba(72,176,255,0.18)) }
    }

    /* ---------- Hero ---------- */
    .hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:56px 0}
    .hero-left{padding-right:12px}
    .eyebrow{display:inline-block;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,rgba(72,176,255,0.08),rgba(72,176,255,0.03));color:var(--light-blue);font-weight:700;margin-bottom:14px}
    .hero h1{font-size:40px;line-height:1.02;margin:0 0 14px;color:var(--white)}
    .hero p{color:var(--muted);font-size:17px;max-width:680px;margin-bottom:20px}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap}
    .stat-row{display:flex;gap:12px;margin-top:18px}
    .stat{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:10px;text-align:center;min-width:110px}
    .stat h3{margin:6px 0 0;color:var(--white)}

    .hero-right{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,0.03);
      box-shadow: 0 6px 30px rgba(0,0,0,0.6);
    }
    .hero-logo-wrap{display:flex;align-items:center;justify-content:center;gap:12px;flex-direction:column;padding:14px}
    .hero-logo{width:180px;height:180px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--light-blue));box-shadow:var(--accent-glow);animation:logoPulse 3.6s infinite}
    .hero-logo img{width:84%;height:84%;object-fit:contain}

    /* ---------- Programs grid ---------- */
    .section-title{color:var(--light-blue);font-size:20px;margin-bottom:14px}
    .programs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
    .program{background:var(--panel);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:transform .28s,box-shadow .28s;display:flex;gap:12px;align-items:flex-start}
    .program:hover{transform:translateY(-8px);box-shadow:var(--accent-glow)}
    .program .icon{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(90deg,rgba(72,176,255,0.08),rgba(72,176,255,0.02));font-size:22px}
    .program h4{margin:0 0 6px}
    .program p{margin:0;color:var(--muted);font-size:14px}

    /* ---------- Meet our mentors ---------- */
    .mentors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
    .mentor{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      padding:18px;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,0.03);
      transition:transform .3s,box-shadow .3s;
    }
    .mentor:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(72,176,255,0.12)}
    .avatar{width:96px;height:96px;border-radius:999px;margin:0 auto 12px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--light-blue));box-shadow:var(--accent-glow)}
    .avatar img{width:90%;height:90%;object-fit:cover;border-radius:999px}
    .mentor h5{margin:6px 0 0;font-size:16px}
    .mentor small{display:block;color:var(--muted);margin-top:6px}

    /* ---------- Testimonials ---------- */
    .testimonials{display:flex;gap:14px;margin-top:18px}
    .testimonial{flex:1;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
    .testimonial p{color:var(--muted);font-size:14px;margin-bottom:10px}
    .testimonial strong{display:block;color:var(--white);margin-top:8px}

    /* ---------- Gallery (simple grid + modal) ---------- */
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
    .gallery .thumb{height:120px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));overflow:hidden;display:block;border:1px solid rgba(255,255,255,0.03);cursor:pointer}
    .gallery img{width:100%;height:100%;object-fit:cover}

    /* ---------- Contact ---------- */
    .contact-card{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}
    .contact-card .card{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border:1px solid rgba(255,255,255,0.03)}
    .contact-card .card p{color:var(--muted);font-size:14px}

    /* ---------- Footer ---------- */
    footer.site-footer{margin-top:36px;background:linear-gradient(180deg, rgba(3,9,18,0.9), rgba(3,9,18,0.98));padding:20px;border-top:1px solid rgba(255,255,255,0.02)}
    footer .foot-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1200px;margin:0 auto;padding:8px 28px}
    footer .foot-inner .left{display:flex;align-items:center;gap:12px}
    footer small{color:var(--muted)}

    /* ---------- Modal (Apply) ---------- */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,12,0.6);z-index:9999}
    .modal.show{display:flex}
    .modal-box{width:94%;max-width:640px;background:linear-gradient(180deg,#0f2746,#071532);padding:26px;border-radius:16px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 20px 60px rgba(2,6,23,0.7)}
    .modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
    .modal-head h3{margin:0;color:var(--light-blue)}
    .close{background:transparent;border:0;color:var(--muted);font-size:22px;cursor:pointer}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .form-grid input,.form-grid select,.form-grid textarea{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--white)}
    .form-grid textarea{grid-column:1/3;min-height:120px}
    .modal .submit-row{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:8px}

    /* ---------- small screens ---------- */
    @media (max-width: 1000px){
      .hero{grid-template-columns:1fr; padding-top:90px}
      .programs{grid-template-columns:repeat(2,1fr)}
      .mentors{grid-template-columns:repeat(2,1fr)}
      .gallery{grid-template-columns:repeat(2,1fr)}
      .contact-card{grid-template-columns:1fr}
      nav.main-nav{display:none}
    }
    @media (max-width:600px){
      .programs{grid-template-columns:1fr}
      .hero h1{font-size:28px}
      .mentors{grid-template-columns:1fr}
      .nav-inner{padding:12px}
      .brand h1{font-size:15px}
    }

    /* ---------- scroll reveal helper (initial state) ---------- */
    .reveal{opacity:0;transform:translateY(28px);transition:all 0.8s cubic-bezier(.16,.84,.08,1)}
    .reveal.show{opacity:1;transform:translateY(0)}