:root{
      --bg:#0f172a; /* slate-900 */
      --panel:#111827; /* gray-900 */
      --muted:#94a3b8; /* slate-400 */
      --text:#e5e7eb; /* gray-200 */
      --brand:#22d3ee; /* cyan-400 */
      --brand-2:#a78bfa; /* violet-400 */
      --card:#0b1220;
      --ring:#334155;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background:radial-gradient(1200px 800px at 80% -10%, #1f2937 0%, #0b1020 30%, #0a0f1e 60%, #060912 100%); color:var(--text)}
    a{color:inherit; text-decoration:none}
    .container{max-width:1100px; margin:0 auto; padding:0 1rem}

    /* Header */
    header{position:sticky; top:0; z-index:50; background:rgba(6,9,18,.6); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06)}
    nav{display:flex; align-items:center; justify-content:space-between; height:64px}
    .brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
    .brand-logo{width:34px; height:34px; border-radius:10px; background:conic-gradient(from 180deg, var(--brand), var(--brand-2)); display:grid; place-items:center; box-shadow:0 8px 30px rgba(34,211,238,.35)}
    .brand-logo span{font-size:14px; color:#0b1020; font-weight:900}
    .nav-links{display:flex; gap:1.1rem}
    .nav-links a{padding:.5rem .75rem; border-radius:10px; color:var(--muted)}
    .nav-links a:hover{background:rgba(255,255,255,.06); color:#fff}
    .menu-btn{display:none; border:1px solid var(--ring); background:transparent; color:var(--text); padding:.45rem .6rem; border-radius:10px}

    /* Hero */
    .hero{padding:84px 0 56px; position:relative; overflow:hidden}
    .hero .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
    .badge{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:999px; background:rgba(34,211,238,.12); color:#9be6f3; border:1px solid rgba(34,211,238,.35); font-size:13px}
    h1{font-size:44px; line-height:1.1; margin:.6rem 0 1rem}
    .lead{color:var(--muted); font-size:18px}
    .cta{margin-top:1.2rem; display:flex; gap:.8rem}
    .btn{padding:.7rem 1rem; border-radius:12px; border:1px solid var(--ring); color:#0b1020; font-weight:700; background:linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow:0 10px 30px rgba(167,139,250,.25)}
    .btn.outline{background:transparent; color:var(--text)}
    .hero-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:18px; box-shadow:0 10px 40px rgba(0,0,0,.35)}
    .hero-card h3{margin:0 0 .5rem}
    .hero-card ul{margin:0; padding:0 0 0 1.1rem; color:var(--muted)}

    /* Sections */
    section{padding:56px 0}
    .section-title{font-size:28px; margin:0 0 1rem}
    .muted{color:var(--muted)}

    /* About */
    .about{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}
    .about .panel{background:var(--card); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:18px}

    /* Courses */
    .grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
    .card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px}
    .card h4{margin:.2rem 0 .6rem}
    .pill{display:inline-block; padding:.25rem .55rem; border-radius:999px; font-size:12px; color:#93c5fd; background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.25)}
    .list{margin:0; padding:0 0 0 1.1rem}

    /* Faculty */
    .faculty{display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem}
    .teacher{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; text-align:center}
    .avatar{width:74px; height:74px; margin:0 auto 10px; border-radius:14px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); display:grid; place-items:center; color:#0b1020; font-weight:900}
    .teacher small{color:var(--muted)}

    /* Contact */
    .contact{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem}
    input, textarea{width:100%; padding:.8rem 1rem; background:#0a0f1e; color:var(--text); border:1px solid rgba(255,255,255,.09); border-radius:12px; outline:none}
    textarea{min-height:120px}
    .contact .panel{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px}

    /* Footer */
    footer{padding:28px 0 46px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted)}

    /* Responsive */
    @media (max-width: 960px){
      .hero .grid, .about, .grid-3, .faculty, .contact{grid-template-columns:1fr}
      .faculty{grid-template-columns:repeat(2, 1fr)}
    }
    @media (max-width: 720px){
      .nav-links{display:none}
      .menu-btn{display:inline-block}
      .faculty{grid-template-columns:1fr}
      h1{font-size:34px}
    }