:root{
  --bg: #0a1730;
  --bg2: #17345d;
  --text: rgba(255,255,255,0.96);
  --muted: rgba(255,255,255,0.78);

  --yellow: #ffd54f;
  --red: #df4c4c;
  --blue: #5cbcff;
  --green: #49d7c0;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(900px 520px at 8% 10%, rgba(104, 194, 255, 0.28) 0%, transparent 55%),
    radial-gradient(850px 500px at 92% 12%, rgba(87, 236, 222, 0.22) 0%, transparent 52%),
    radial-gradient(700px 420px at 28% 82%, rgba(255, 235, 140, 0.18) 0%, transparent 48%),
    radial-gradient(640px 360px at 82% 78%, rgba(255, 108, 108, 0.10) 0%, transparent 46%),
    linear-gradient(135deg, #0a1730 0%, #10264b 30%, #17345d 58%, #122948 78%, #1b2442 100%);
}

img,
video,
iframe{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(1120px, 92vw);
  margin:0 auto;
}

.muted{ color:var(--muted); }

.full{
  width:100%;
  display:inline-flex;
  justify-content:center;
}

/* Background effects */
.bg-stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.7) 30%, transparent 40%),
    radial-gradient(1px 1px at 120px 180px, rgba(255,255,255,.55) 30%, transparent 40%),
    radial-gradient(2px 2px at 260px 90px, rgba(255,255,255,.45) 30%, transparent 40%),
    radial-gradient(1px 1px at 340px 240px, rgba(255,255,255,.5) 30%, transparent 40%),
    radial-gradient(2px 2px at 520px 120px, rgba(255,255,255,.4) 30%, transparent 40%);
  opacity:.22;
}

.bg-glow{
  position:fixed;
  inset:-200px;
  pointer-events:none;
  background:
    radial-gradient(520px 520px at 12% 18%, rgba(92,188,255,.18), transparent 60%),
    radial-gradient(620px 620px at 86% 18%, rgba(73,215,192,.14), transparent 56%),
    radial-gradient(560px 560px at 32% 84%, rgba(255,213,79,.10), transparent 56%),
    radial-gradient(500px 500px at 80% 76%, rgba(223,76,76,.08), transparent 50%);
}

.topbar,
.site-header,
.hero,
.main-menu,
.section,
.scholarship,
.footer,
.site-footer,
.floating-wa{
  position:relative;
  z-index:5;
}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:90;
  padding:10px 0;
  background:rgba(8,20,45,0.55);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.10);
  font-size:13px;
}

.topbar-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  flex-wrap:wrap;
}

.topbar-inner a{
  color:rgba(255,255,255,0.9);
  font-weight:900;
  transition:opacity .2s ease;
}

.topbar-inner a:hover{
  opacity:1;
}

.topbar-cta{
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, #ffe082 0%, #fbc02d 100%);
  color:#171717 !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}

/* Header */
.site-header{
  padding:18px 0;
  background:rgba(8,20,45,0.42);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:left;
  margin:0 auto;
  padding:8px 16px;
}

.brand-logo,
.footer-logo{
  width:78px;
  height:78px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgb(255, 255, 255);
  object-fit:cover;
  box-shadow:0 12px 30px rgba(0,0,0,0.28);
  flex-shrink:0;
}

.slogan-box{
  font-family:'Noto Sans Devanagari', sans-serif;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:2.12;
}

.slogan-top{
  font-size:clamp(30px, 3vw, 40px);
  font-weight:800;
  letter-spacing:.2px;
  background:linear-gradient(90deg, #ffd95a 0%, #f7c93b 45%, #ffb300 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 6px 18px rgba(255,200,0,0.22);
}

.slogan-bottom{
  margin-top:6px;
  font-size:clamp(17px, 1.5vw, 22px);
  color:rgba(255,255,255,0.92);
  font-weight:700;
  letter-spacing:.2px;
}

.nav-toggle{
  display:none;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.10);
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  margin:5px auto;
  border-radius:999px;
  background:rgba(255,255,255,0.9);
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding:72px 0 34px;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 50% -120px 50%;
  width:720px;
  height:720px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(92,188,255,0.12) 0%,
      rgba(255,213,79,0.10) 28%,
      rgba(73,215,192,0.08) 46%,
      transparent 72%);
  filter:blur(24px);
  animation:heroGlowPulse 6s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}

.hero-grid{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.hero-left{
  position:relative;
  z-index:2;
  max-width:900px;
}

.hero-left::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-20px;
  width:420px;
  height:420px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,213,79,0.12) 0%, rgba(92,188,255,0.10) 38%, transparent 72%);
  filter:blur(20px);
  z-index:-1;
}

.pill{
  display:inline-flex;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.88);
  font-weight:800;
  font-size:13px;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.hero-title{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 18px;
  line-height:1;
}

.hero-logo{
  width:82px;
  height:92px;
  border-radius:18px;
  object-fit:cover;
  border:1px solid rgb(255, 255, 255);
  background:rgb(255, 254, 254);
  box-shadow:0 12px 24px rgba(255, 255, 255, 0.858);
}

.hero h1{
  margin:0;
  font-size:clamp(36px, 4vw, 60px);
  line-height:1.03;
  letter-spacing:.3px;
  text-shadow:0 10px 26px rgba(0,0,0,0.18);
}

.hero-heading{
  position:relative;
}

.hero-title-accent,
.hero-title-main{
  display:inline-block;
  font-size:clamp(2.6rem, 6vw, 5rem);
  font-weight:800;
  line-height:1;
}

.hero-title-accent{
  position:relative;
  top:2px;
  color:#f4c94a;
}

.hero-title-main{
  color:#ffffff;
}

.accent{
  color:var(--yellow);
  text-shadow:0 10px 30px rgba(255,213,79,0.20);
}

.hero-sub{
  max-width:62ch;
  margin:0 auto;
  color:rgba(255,255,255,0.82);
  line-height:1.75;
  font-size:16px;
}

.hero-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:24px 0;
}

.hero-actions .btn{
  min-width:140px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 18px;
  border-radius:16px;
  font-weight:900;
  border:1px solid rgba(255,255,255,0.14);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-red{
  background:linear-gradient(135deg, #ef5350 0%, #c62828 100%);
  border-color:rgba(255,255,255,0.10);
  color:#fff;
}

.btn-yellow{
  background:linear-gradient(135deg, #ffe082 0%, #fbc02d 100%);
  color:#1a1a1a;
  border-color:rgba(255,255,255,0.08);
}

.btn-ghost{
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  color:#fff;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:16px;
}

.stat{
  padding:16px;
  border-radius:20px;
}

.stat-num{
  font-size:30px;
  font-weight:900;
  color:#fff;
  text-shadow:0 8px 20px rgba(0,0,0,0.16);
}

.stat-label{
  margin-top:6px;
  font-size:13px;
  color:rgba(255,255,255,0.78);
}

/* Navigation below hero */
.main-menu{
  position:sticky;
  top:0;
  z-index:70;
  padding:14px 0;
  background:rgba(8,20,45,0.62);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
}

.menu-wrap{
  display:flex;
  justify-content:center;
}

.menu-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
}

.menu-inner a{
  color:rgba(255,255,255,0.88);
  font-weight:800;
  font-size:15px;
  transition:color .2s ease, transform .2s ease;
}

.menu-inner a:hover{
  color:#fff;
  transform:translateY(-1px);
}

.nav-cta{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.10);
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

/* Sections */
.section{
  padding:64px 0;
}

.section-head{
  margin-bottom:24px;
}

.section-head h2{
  margin:0 0 10px;
  font-size:clamp(30px, 3vw, 42px);
  line-height:1.08;
  letter-spacing:.3px;
  color:#ffffff;
  text-shadow:0 8px 30px rgba(0,0,0,0.18);
}

.section-head p{
  margin:0;
  max-width:700px;
  color:rgba(255,255,255,0.78);
  line-height:1.7;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.teacher-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

/* Shared glass styles */
.card,
.feature,
.teacher-card,
.stat,
.results-box,
.scholarship-inner{
  background:linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.07) 100%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter:blur(14px);
}

/* Course cards */
.card{
  position:relative;
  z-index:1;
  overflow:hidden;
  padding:18px;
  border-radius:22px;
  transition:
    transform .45s cubic-bezier(.19,1,.22,1),
    box-shadow .45s ease,
    border-color .45s ease;
  transform-origin:center center;
}

.card:hover{
  transform:translateY(-22px) scale(1.08);
  border-color:rgba(255,255,255,0.38);
  box-shadow:
    0 38px 90px rgba(0,0,0,0.45),
    0 16px 38px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14);
  z-index:20;
}

.card::before{
  content:"";
  position:absolute;
  top:-80%;
  left:-75%;
  width:45%;
  height:220%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.00) 42%,
    rgba(255,255,255,0.18) 48%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0.18) 52%,
    rgba(255,255,255,0.00) 58%,
    transparent 65%,
    transparent 100%
  );
  transform:rotate(18deg) translateX(-260%);
  transition:transform .95s cubic-bezier(.19,1,.22,1);
  pointer-events:none;
  z-index:3;
}

.card:hover::before{
  transform:rotate(18deg) translateX(520%);
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  pointer-events:none;
  border-radius:22px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 45%);
  transition:opacity .35s ease;
}

.card:hover::after{
  opacity:1;
}

.card h3{
  position:relative;
  z-index:4;
  margin:0 0 10px;
  font-size:21px;
}

.list{
  position:relative;
  z-index:4;
  margin:12px 0 0;
  padding-left:18px;
  color:rgba(255,255,255,0.84);
  line-height:1.7;
}

.link{
  position:relative;
  z-index:4;
  display:inline-block;
  margin-top:14px;
  font-weight:900;
  color:var(--yellow);
}

.ribbon{
  position:relative;
  z-index:4;
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(255,255,255,0.16);
}

.ribbon.blue{ background:rgba(43,111,247,0.22); }
.ribbon.red{ background:rgba(207,47,47,0.22); }
.ribbon.green{ background:rgba(39,192,138,0.20); }
.ribbon.navy{ background:rgba(255,255,255,0.08); }

.course-head{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.course-thumb{
  position:relative;
  z-index:4;
  width:66px;
  height:66px;
  flex-shrink:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  box-shadow:0 8px 18px rgba(0,0,0,0.14);
}

.course-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.feature{
  padding:20px;
  border-radius:24px;
  transition:
    transform .45s cubic-bezier(.19,1,.22,1),
    box-shadow .45s ease,
    border-color .45s ease;
}

.feature:hover{
  transform:translateY(-18px) scale(1.03);
  border-color:rgba(255,255,255,0.30);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.40),
    0 12px 30px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.feature h3{
  margin:12px 0 10px;
  font-size:22px;
}

.tag{
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(255,255,255,0.16);
}

.tag.red{ background:rgba(207,47,47,0.22); }

/* Teachers */
.teacher-card{
  padding:18px;
  border-radius:22px;
}

.teacher-photo{
  height:250px;
  overflow:hidden;
  margin-bottom:14px;
  border-radius:18px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 10px 20px rgba(0,0,0,0.14);
}

.teacher-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Scholarship */
.scholarship{
  padding:48px 0;
  background:linear-gradient(135deg, rgba(223,76,76,0.22), rgba(255,213,79,0.10), rgba(92,188,255,0.12));
  border-top:1px solid rgba(255,255,255,0.10);
  border-bottom:1px solid rgba(255,255,255,0.10);
}

.scholarship-inner{
  padding:26px;
  border-radius:24px;
}

.scholarship-inner h2{
  margin:0 0 12px;
}

.scholarship-inner p{
  margin:0 0 16px;
  color:rgba(255,255,255,0.82);
  line-height:1.7;
}

/* Gallery */
.ph{
  height:180px;
  display:grid;
  place-items:center;
  border-radius:22px;
  color:rgba(255,255,255,0.76);
  font-weight:800;
  background:linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%);
  border:1px dashed rgba(255,255,255,0.22);
  box-shadow:0 10px 24px rgba(0,0,0,0.14);
}

/* Contact */
.form .form-row{
  display:grid;
  gap:8px;
  margin-bottom:14px;
}

label{
  font-weight:900;
  font-size:13px;
  color:rgba(255,255,255,0.88);
}

input,
select,
textarea{
  width:100%;
  padding:13px 14px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#fff;
  outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(255,213,79,0.45);
  background:rgba(255,255,255,0.08);
  box-shadow:0 0 0 4px rgba(255,213,79,0.08);
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,0.55);
}

.form-msg{
  margin:10px 0 0;
  color:rgba(255,255,255,0.85);
  font-weight:800;
}

.form select{
  color:#ffffff;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,213,79,0.35);
}

.form select option{
  color:#0f172a;
  background:#ffffff;
}

.form select:focus{
  outline:none;
  border-color:rgba(255,213,79,0.8);
  box-shadow:0 0 0 4px rgba(255,213,79,0.12);
}

.contact-info .info{
  display:grid;
  gap:8px;
  margin:12px 0 14px;
}

.contact-actions{
  margin-top:14px;
}

.map{
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 10px 22px rgba(0,0,0,0.14);
}

.map iframe{
  width:100%;
  height:220px;
  border:0;
}

/* Simple footer */
.footer{
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,0.10);
  background:rgba(8,20,45,0.28);
  backdrop-filter:blur(10px);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,0.76);
  font-weight:700;
  font-size:14px;
}

.to-top{
  color:var(--yellow);
  font-weight:900;
}

/* Premium footer */
.site-footer{
  position:relative;
  overflow:hidden;
  margin-top:80px;
  background:linear-gradient(180deg, #06214a 0%, #03152f 100%);
  border-top:1px solid rgba(255,255,255,0.08);
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(0,180,255,0.08), transparent 30%),
    radial-gradient(circle at bottom right, rgba(244,201,74,0.06), transparent 24%);
  pointer-events:none;
}

.footer-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  padding:56px 0 34px;
}

.footer-brand{
  max-width:430px;
}

.footer-brand-top{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.footer-brand-text h3{
  margin:0 0 8px;
  font-size:1.55rem;
  line-height:1.15;
  font-weight:800;
  color:#ffffff;
}

.footer-tagline{
  margin:0;
  font-size:1rem;
  line-height:1.5;
  color:rgba(255,255,255,0.82);
  font-weight:700;
}

.footer-about{
  margin:0;
  color:rgba(255,255,255,0.78);
  line-height:1.85;
  font-size:1rem;
}

.footer-col h4{
  margin:0 0 18px;
  font-size:1.05rem;
  font-weight:800;
  color:#f4c94a;
}

.footer-list{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-list li{
  margin-bottom:14px;
  color:rgba(255,255,255,0.8);
  line-height:1.7;
}

.footer-list a{
  color:rgba(255,255,255,0.82);
  transition:color .25s ease;
}

.footer-list a:hover{
  color:#f4c94a;
}

.footer-bottom{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,0.08);
}

.footer-bottom p{
  margin:0;
  color:rgba(255,255,255,0.7);
  font-size:.92rem;
}

.back-to-top{
  color:#f4c94a;
  font-weight:700;
}

.back-to-top:hover{
  color:#ffffff;
}

/* Floating WhatsApp */
.floating-wa{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  padding:13px 16px;
  border-radius:999px;
  background:linear-gradient(135deg, #59e0a9 0%, #24b87d 100%);
  color:#072016;
  font-weight:900;
  border:1px solid rgba(39,192,138,0.25);
  box-shadow:0 14px 50px rgba(0,0,0,0.35);
}

/* Reveal */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Hero load animations */
.animate-on-load{
  opacity:0;
  transform:translateY(26px);
  animation:heroReveal .9s cubic-bezier(.19,1,.22,1) forwards;
}

.delay-1{ animation-delay:.10s; }
.delay-2{ animation-delay:.24s; }
.delay-3{ animation-delay:.40s; }
.delay-4{ animation-delay:.56s; }
.delay-5{ animation-delay:.74s; }
.delay-6{ animation-delay:.88s; }
.delay-7{ animation-delay:1.02s; }
.delay-8{ animation-delay:1.18s; }
.delay-9{ animation-delay:1.30s; }
.delay-10{ animation-delay:1.42s; }

.hero-logo-animated{
  animation:
    heroReveal .9s cubic-bezier(.19,1,.22,1) forwards,
    logoPulse 3.5s ease-in-out 1.2s infinite;
}

.shine-text{
  position:relative;
  display:inline-block;
  overflow:hidden;
}

.shine-text::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-140%;
  width:90%;
  height:160%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.10) 45%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.10) 55%,
    transparent 65%,
    transparent 100%
  );
  transform:skewX(-20deg);
  animation:shineSweep 4s ease-in-out 2s infinite;
  pointer-events:none;
}

@keyframes heroReveal{
  0%{
    opacity:0;
    transform:translateY(26px) scale(.98);
    filter:blur(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes logoPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 12px 24px rgba(0,0,0,0.18);
  }
  50%{
    transform:scale(1.05);
    box-shadow:
      0 18px 34px rgba(0,0,0,0.24),
      0 0 22px rgba(92,188,255,0.20),
      0 0 30px rgba(255,213,79,0.10);
  }
}

@keyframes shineSweep{
  0%{ left:-140%; }
  45%{ left:160%; }
  100%{ left:160%; }
}

@keyframes heroGlowPulse{
  0%,100%{
    opacity:.72;
    transform:translateX(-50%) scale(1);
  }
  50%{
    opacity:1;
    transform:translateX(-50%) scale(1.06);
  }
}

/* Batch page mini image */
.course-mini-image{
  width:120px;
  height:120px;
  margin:0 auto 18px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  box-shadow:0 14px 30px rgba(0,0,0,0.20);
}

.course-mini-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Books showcase */
.books-showcase-section{
  padding-top:30px;
}

.center{
  text-align:center;
}

.center p{
  margin-left:auto;
  margin-right:auto;
}

.books-showcase{
  position:relative;
  height:360px;
  margin-top:28px;
  overflow:hidden;
}

.book-slide{
  position:absolute;
  top:50%;
  left:50%;
  width:190px;
  height:270px;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform:translate(-50%, -50%) scale(0.7);
  opacity:0;
  transition:
    transform .7s ease,
    opacity .7s ease,
    left .7s ease,
    z-index .7s ease,
    box-shadow .7s ease;
}

.book-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.book-slide.active{
  left:50%;
  transform:translate(-50%, -50%) scale(1.12);
  opacity:1;
  z-index:5;
  box-shadow:
    0 24px 56px rgba(0,0,0,0.34),
    0 0 24px rgba(92,188,255,0.14);
}

.book-slide.prev{
  left:28%;
  transform:translate(-50%, -50%) scale(0.86);
  opacity:.82;
  z-index:4;
}

.book-slide.next{
  left:72%;
  transform:translate(-50%, -50%) scale(0.86);
  opacity:.82;
  z-index:4;
}

.book-slide.left-hidden{
  left:10%;
  transform:translate(-50%, -50%) scale(0.68);
  opacity:.22;
  z-index:1;
}

.book-slide.right-hidden{
  left:90%;
  transform:translate(-50%, -50%) scale(0.68);
  opacity:.22;
  z-index:1;
}

/* Achievers strip slider */
.achievers-strip-section{
  position:relative;
  padding:10px 0 20px;
  overflow:hidden;
}

.student-strip-slider{
  position:relative;
  width:100%;
  height:270px;
  margin-top:8px;
  overflow:hidden;
}

.student-strip-slide{
  position:absolute;
  top:50%;
  left:50%;
  width:min(64vw, 820px);
  opacity:0;
  pointer-events:none;
  border-radius:22px;
  transform:translate(-50%, -50%) scale(.72);
  transition:
    transform .5s ease,
    opacity .5s ease,
    filter .5s ease,
    box-shadow .5s ease;
}

.student-strip-slide img{
  width:100%;
  height:auto;
  border-radius:22px;
  box-shadow:0 20px 48px rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.14);
}

.student-strip-slide.active{
  opacity:1;
  z-index:5;
  pointer-events:auto;
  transform:translate(-50%, -50%) scale(1);
  filter:blur(0);
}

.student-strip-slide.prev{
  opacity:.45;
  z-index:3;
  transform:translate(calc(-50% - 34vw), -50%) scale(.72);
  filter:blur(1px);
}

.student-strip-slide.next{
  opacity:.45;
  z-index:3;
  transform:translate(calc(-50% + 34vw), -50%) scale(.72);
  filter:blur(1px);
}

.student-strip-slide.hidden-left{
  opacity:0;
  z-index:1;
  transform:translate(calc(-50% - 60vw), -50%) scale(.55);
}

.student-strip-slide.hidden-right{
  opacity:0;
  z-index:1;
  transform:translate(calc(-50% + 60vw), -50%) scale(.55);
}

.student-strip-slider:hover .student-strip-slide.active img{
  box-shadow:0 24px 60px rgba(0,0,0,0.34);
}

/* Responsive */
@media (max-width: 1100px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .student-strip-slider{
    height:240px;
  }

  .student-strip-slide{
    width:min(72vw, 680px);
  }

  .student-strip-slide.prev{
    transform:translate(calc(-50% - 28vw), -50%) scale(.7);
  }

  .student-strip-slide.next{
    transform:translate(calc(-50% + 28vw), -50%) scale(.7);
  }
}

@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2, 1fr); }
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
  .teacher-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
  .topbar{
    padding:8px 0;
  }

  .topbar-inner{
    gap:12px;
    justify-content:center;
    text-align:center;
  }

  .site-header{
    padding:12px 0;
  }

  .header-inner{
    min-height:auto;
    justify-content:flex-start;
    padding-right:56px;
  }

  .brand{
    width:100%;
    justify-content:flex-start;
    align-items:center;
    gap:12px;
    padding:4px 0;
  }

  .brand-logo{
    width:56px;
    height:56px;
    border-radius:16px;
  }

  .slogan-top{
    font-size:22px;
    line-height:1.15;
  }

  .slogan-bottom{
    font-size:13px;
    line-height:1.4;
  }

  .menu-inner{
    display:none;
    flex-direction:column;
    gap:12px;
    width:100%;
    padding:14px;
    border-radius:20px;
    background:rgba(6,16,40,0.72);
    border:1px solid rgba(255,255,255,0.14);
  }

  .menu-inner.open{
    display:flex;
  }

  .nav-toggle{
    display:block;
  }

  .hero{
    padding:52px 0 24px;
  }

  .hero-grid,
  .hero-left{
    text-align:center;
  }

  .hero-title{
    flex-direction:column;
    gap:6px;
  }

  .hero-title-accent,
  .hero-title-main{
    font-size:clamp(2rem, 9vw, 3rem);
    text-align:center;
  }

  .hero-logo{
    width:70px;
    height:70px;
    border-radius:16px;
  }

  .hero-sub{
    max-width:100%;
    padding:0 6px;
    font-size:15px;
    line-height:1.7;
  }

  .hero-actions{
    gap:10px;
  }

  .hero-actions .btn{
    width:100%;
    max-width:280px;
  }

  .stats,
  .grid-3,
  .gallery-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .course-head{
    align-items:flex-start;
  }

  .course-thumb{
    width:56px;
    height:56px;
  }

  .teacher-photo{
    height:220px;
  }

  .ph{
    height:160px;
  }

  .map iframe{
    height:200px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:26px;
    padding:42px 0 28px;
  }

  .footer-brand-top{
    align-items:flex-start;
  }

  .footer-logo{
    width:58px;
    height:58px;
  }

  .footer-brand-text h3{
    font-size:1.3rem;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .books-showcase{
    height:290px;
  }

  .book-slide{
    width:140px;
    height:205px;
    border-radius:18px;
  }

  .book-slide.prev{ left:22%; }
  .book-slide.next{ left:78%; }
  .book-slide.left-hidden{ left:4%; }
  .book-slide.right-hidden{ left:96%; }

  .book-slide.active{
    transform:translate(-50%, -50%) scale(1.08);
  }

  .achievers-strip-section{
    padding:12px 0 24px;
  }

  .student-strip-slider{
    height:210px;
  }

  .student-strip-slide{
    width:min(82vw, 520px);
    border-radius:16px;
  }

  .student-strip-slide img{
    border-radius:16px;
  }

  .student-strip-slide.prev{
    transform:translate(calc(-50% - 18vw), -50%) scale(.72);
    opacity:.22;
  }

  .student-strip-slide.next{
    transform:translate(calc(-50% + 18vw), -50%) scale(.72);
    opacity:.22;
  }

  .floating-wa{
    right:12px;
    bottom:12px;
    padding:11px 14px;
    font-size:14px;
  }
}

@media (max-width: 560px){
  .grid-4{
    grid-template-columns:1fr;
  }

  .topbar-inner{
    gap:14px;
    font-size:12px;
  }

  .hero h1{
    font-size:clamp(28px, 8vw, 42px);
  }

  .hero-sub{
    font-size:15px;
  }
}

@media (max-width: 520px){
  .student-strip-slider{
    height:190px;
  }

  .student-strip-slide{
    width:88vw;
  }

  .student-strip-slide.prev,
  .student-strip-slide.next{
    opacity:.14;
    transform:translate(calc(-50% - 10vw), -50%) scale(.78);
  }

  .student-strip-slide.next{
    transform:translate(calc(-50% + 10vw), -50%) scale(.78);
  }
}

@media (max-width: 480px){
  .container{
    width:94vw;
  }

  .topbar-inner a{
    font-size:12px;
  }

  .slogan-top{
    font-size:20px;
  }

  .slogan-bottom{
    font-size:12px;
  }

  .section{
    padding:46px 0;
  }

  .section-head h2{
    font-size:28px;
    line-height:1.15;
  }

  .card,
  .feature,
  .teacher-card,
  .stat{
    padding:16px;
  }

  .book-slide{
    width:130px;
    height:190px;
  }
}
.section,
.card,
.feature,
.teacher-card,
.student-strip-slide,
.book-slide {
  will-change: transform, opacity;
}

.section {
  content-visibility: auto;
  contain-intrinsic-size: 700px;
}