:root{
  --accent1: #7b6cff;
  --accent2: #ff6b6b;
  --accent3: #ffd166;
  --bg: #0f1724;
  --card: #0b1220;
}
*{box-sizing:border-box}
body{font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:linear-gradient(180deg,#0f1724 0%, #071022 100%); color:#e6eef8; line-height:1.6;}
.navbar{background:transparent;}
.navbar .navbar-brand{color:white; font-weight:700; letter-spacing:0.4px;}
.navbar .nav-link{color:rgba(230,238,248,0.9); margin-left:10px;}
.header-hero{
  background: linear-gradient(135deg, rgba(123,108,255,0.12), rgba(255,107,107,0.06));
  padding:60px 0;
  border-radius:16px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
}
.hero-card{backdrop-filter: blur(6px); background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:24px; border-radius:12px;}
.btn-cta{background:linear-gradient(90deg,var(--accent1),var(--accent2)); border:0; color:white; padding:10px 20px; border-radius:10px; box-shadow:0 6px 18px rgba(123,108,255,0.18); transition:transform .25s ease;}
.btn-cta:hover{transform:translateY(-3px) scale(1.02);}

/* Cards */
.card-modern{border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(2,6,23,0.6); border:0; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}
.card-modern img{width:100%; height:180px; object-fit:cover; transition:transform .6s cubic-bezier(.2,.9,.3,1);}
.card-modern:hover img{transform:scale(1.08);}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:12px;}
.gallery-grid img{width:100%; height:160px; object-fit:cover; border-radius:10px; transition:transform .4s ease, box-shadow .4s ease; box-shadow: 0 6px 20px rgba(2,6,23,0.6);}
.gallery-grid img:hover{transform:translateY(-6px) scale(1.03); box-shadow:0 18px 40px rgba(0,0,0,0.6);}

/* Teachers */
.teacher-card{display:flex; gap:12px; align-items:center; background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:14px; border-radius:12px;}

/* Footer */
.site-footer{background:linear-gradient(90deg,#071022, #07183a); color:#9fb0d6; margin-top:40px; border-top:1px solid rgba(255,255,255,0.03);}

/* Responsive tweaks */
@media (max-width:767px){
  .card-modern img{height:140px;}
  .gallery-grid img{height:120px;}
}