:root{
  --bg:#09090f;
  --bg2:#11111a;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --text:#f4f6fb;
  --muted:rgba(244,246,251,.72);
  --border:rgba(255,255,255,.12);
  --accent:#f28c28;
  --accent2:#ffd2a1;
  --shadow:0 24px 80px rgba(0,0,0,.38);
  --radius:28px;
  --hero-glow: rgba(59,130,246,.18);
  --hero-bg-1: #050505;
  --hero-bg-2: #0f0b1f;
  --hero-bg-3: #140f2d;
}





a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.ambient{
  position:fixed; inset:auto;
  width:42rem; height:42rem; border-radius:50%;
  filter:blur(120px); opacity:.30; pointer-events:none; z-index:0;
  animation: drift 18s ease-in-out infinite;
}
.ambient-a{left:-14rem; top:-12rem; background:rgba(59,130,246,.40)}
.ambient-b{right:-16rem; top:6rem; background:rgba(255,255,255,.08); animation-delay:-7s}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.nav-shell{
  position:sticky; top:1rem; z-index:10;
  width:min(1180px, calc(100% - 1.4rem));
  margin:1rem auto 0;
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  border-radius:999px;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:.75rem; min-width:0}
.brand img{width:3.9rem;height:3.9rem;border-radius:999px;object-fit:cover}
.brand strong{display:block;line-height:1.1;font-size:2rem;letter-spacing:.03em;font-weight: 700;}
.brand span{display:block;font-size:.73rem;color:var(--muted)}
.nav-links{display:flex; align-items:center; gap:.2rem; margin-left:1rem; flex:1; justify-content:center}
.nav-links a{
  padding:.55rem .82rem; border-radius:999px; color:var(--muted); transition:.2s ease;
}
.nav-links a:hover, .nav-links a.active{background:rgba(59,130,246,.14); color:var(--text)}
.nav-actions{display:flex; align-items:center; gap:.65rem}
.btn,.theme-toggle,.nav-burger,.chip,.pill,.field, .panel, .teacher-card, .review-card, .plan-card, .faq-item, .orbit-wrap, .form-card{
  border:1px solid var(--border)
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.82rem 1rem; border-radius:999px; font-weight:700; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#13131a}
.btn.ghost{background:rgba(255,255,255,.04)}
.theme-toggle,.nav-burger{
  width:2.8rem;height:2.8rem;border-radius:999px;background:rgba(255,255,255,.05);
  color:var(--text); cursor:pointer;
}
.nav-burger{display:none}

main{position:relative;z-index:1}
.section, .hero, .page-hero{
  width:min(1180px, calc(100% - 1.4rem));
  margin:0 auto;
}
.hero{
  display:grid; grid-template-columns:1.12fr .88fr; gap:1.5rem;
  padding:3.4rem 0 1.2rem; align-items:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.46rem .8rem; border-radius:999px;
  background:rgba(59,130,246,.12); color:var(--accent); font-weight:700;
  margin-bottom:1rem;
}
.hero h1{
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(2.8rem, 7vw, 5.8rem);
  line-height:.92;
}
.hero p{
  color:var(--muted); line-height:1.75; font-size:1.06rem;
  max-width:58ch; margin:1rem 0 0;
}
.actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem}
.hero-card{
  position:relative; min-height:560px; border-radius:34px; overflow:hidden;
  border:1px solid var(--border); background:rgba(255,255,255,.04); box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.hero-bg, .hero-bg::before, .hero-bg::after{
  position:absolute; inset:0; content:"";
}
.hero-bg{
 
  background:
    radial-gradient(circle at top left, var(--hero-glow), transparent 25%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.05), transparent 20%),
    linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2), var(--hero-bg-3));

}
.hero-bg::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12), transparent 18%),
    radial-gradient(circle at 70% 72%, rgba(59,130,246,.14), transparent 18%);
  filter: blur(10px);
  animation:bgWave 10s ease-in-out infinite;
  opacity:.9;
}
.hero-bg::after{
  background:
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%);
  transform:translateX(-30%);
  animation: sheen 8s linear infinite;
  opacity:.7;
}
.hero-center{
  position:absolute; inset:0; display:grid; place-items:center;
}
.hero-logo{
  width:min(68%, 320px);
  aspect-ratio:1; border-radius:50%;
  padding:1rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(8px);
  animation: floaty 7s ease-in-out infinite;
}
.hero-pill{
  position:absolute; padding:.8rem 1rem; border-radius:18px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(12px);
  border:1px solid var(--border);
  font-weight:700;
  animation: floaty 8s ease-in-out infinite;
}
.hero-pill.one{left:1rem; top:1rem}
.hero-pill.two{right:1rem; bottom:1rem; animation-delay:-1.3s}
.hero-pill.three{left:1rem; bottom:1rem; animation-delay:-2.1s}

.section{padding:3.6rem 0}
.section-head{
  display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.3rem;
}
.section-head h2{
  margin:0; font-size:clamp(1.8rem, 3vw, 3rem); font-family:Georgia, serif;
}
.section-head p{margin:.35rem 0 0; color:var(--muted); max-width:62ch; line-height:1.7}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.4rem}
.stat{
  padding:1.1rem; border-radius:24px; background:var(--panel); box-shadow:var(--shadow)
}
.stat strong{display:block; font-size:1.6rem; margin-bottom:.2rem}
.stat span{color:var(--muted)}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}

.card, .panel, .teacher-card, .review-card, .plan-card, .faq-item, .form-card{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-pad{padding:1.15rem}
.chip{
  display:inline-flex; padding:.4rem .75rem; border-radius:999px;
  color:var(--accent); background:rgba(59,130,246,.10); font-size:.82rem; font-weight:700;
}
.card-title{margin:.8rem 0 .45rem; font-size:1.15rem}
.card p, .review-card p, .plan-card p, .faq-item p{color:var(--muted); line-height:1.72}

.course-card img, .teacher-card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
}
.course-card .meta, .teacher-card .meta, .review-card .meta{padding:1rem 1.1rem 1.15rem}
.meta-row{display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-bottom:.7rem}
.duration{color:var(--accent); font-weight:700}

.experience{
  display:grid; grid-template-columns: .92fr 1.08fr; gap:1rem; align-items:center;
}
.pill-list{display:grid; gap:.8rem}
.pill{
  display:flex; align-items:center; gap:.8rem;
  padding:.95rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
}
.pill .plus{
  width:1.9rem;height:1.9rem;border-radius:50%;
  display:grid;place-items:center; background:rgba(59,130,246,.12); color:var(--accent);
}
.pill strong{font-size:1rem}
.pill span{margin-left:auto;color:var(--muted); font-size:.92rem}

.orbit-wrap{
  position:relative; min-height:560px; border-radius:34px; overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), transparent 22%),
    linear-gradient(135deg, rgba(8,8,12,.96), rgba(18,16,29,.96));
  box-shadow:var(--shadow);
}
.orbit-wrap::before{
  content:""; position:absolute; inset:10%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
  transform:rotate(10deg);
}
.orbit-wrap::after{
  content:""; position:absolute; inset:18% 22%;
  border-radius:50%;
  border:1px dashed rgba(59,130,246,.22);
  animation: spin 28s linear infinite;
}
.orbit-center{
  position:absolute; inset:0; display:grid; place-items:center;
}
.orbit-core{
  width:10rem; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
}
.orbit-core img{width:86%; border-radius:50%}
.orbit-item{
  position:absolute; left:50%; top:50%;
  transform-origin:0 0;
  animation: spin 24s linear infinite;
}
.orbit-item .bubble{
  width:5.8rem; height:5.8rem; margin:-2.9rem 0 0 -2.9rem;
  border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.08); border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  animation: counterSpin 24s linear infinite;
}
.orbit-item img{width:100%; height:100%; object-fit:cover}
.orbit-item.one{transform:rotate(18deg) translate(180px) rotate(-18deg)}
.orbit-item.two{transform:rotate(88deg) translate(210px) rotate(-88deg)}
.orbit-item.three{transform:rotate(152deg) translate(190px) rotate(-152deg)}
.orbit-item.four{transform:rotate(218deg) translate(200px) rotate(-218deg)}
.orbit-item.five{transform:rotate(286deg) translate(176px) rotate(-286deg)}
.orbit-item.six{transform:rotate(346deg) translate(220px) rotate(-346deg)}

.marquee{
  overflow:hidden; border-radius:30px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); box-shadow:var(--shadow);
}
.marquee-track{
  display:flex; gap:1rem; width:max-content; padding:1rem;
  animation: marquee 34s linear infinite;
}
.teacher-card{
  min-width:240px; max-width:240px;
}
.review-card{
  min-width:300px; max-width:300px;
}
.review-head{display:flex; align-items:center; gap:.8rem}
.review-head img{width:3.1rem;height:3.1rem;border-radius:50%; object-fit:cover}
.stars{color:#ffcf4d; letter-spacing:.12em; margin:.35rem 0 .4rem}
.quote{margin:0}

.plan-card{padding:1.2rem}
.price{margin:.2rem 0 0; font-size:2.1rem; font-family:Georgia, serif}
.plan-card ul{margin:0; padding-left:1.1rem; color:var(--muted); line-height:1.9}
.plan-card .btn{margin-top:auto}

.faq-item{
    padding:1.2rem 1.8rem;
}

.faq-item summary{
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    align-items:center;
    width:100%;
    gap:2rem;
}

.faq-item p{
    margin:0;
    text-align:right;
}
.faq-item p{
  margin: 0;
  text-align: right;
}

.faq-item summary{cursor:pointer; font-weight:700; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{margin:.75rem 0 0}

.form-card{padding:1.4rem}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.field, .textarea{
  width:100%; padding:.95rem 1rem; border-radius:16px;
  background:rgba(255,255,255,.04); color:var(--text); outline:none;
}
.textarea{min-height:140px; resize:vertical}
.form-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem}
.note{color:var(--muted); font-size:.92rem}

.page-hero{padding:2rem 0 0}
.banner{
  border:1px solid var(--border); border-radius:34px;
  padding:2rem; background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.banner h1{margin:0 0 .5rem; font-size:clamp(2rem,4.5vw,4rem); font-family:Georgia, serif}
.banner p{margin:0; color:var(--muted); line-height:1.72; max-width:72ch}

.login-wrap{
  width:min(980px, calc(100% - 1.4rem));
  margin:2rem auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.mini-links{display:grid; gap:.6rem; margin-top:1rem}
.mini-links a{
  padding:.9rem 1rem; border-radius:16px; background:rgba(255,255,255,.04);
  border:1px solid var(--border);
}

.footer{
  width:min(1180px, calc(100% - 1.4rem));
  margin:1rem auto 1.5rem;
  padding:1.4rem;
  display:grid; grid-template-columns:1.3fr .8fr .8fr .9fr; gap:1rem;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:30px; box-shadow:var(--shadow);
}
.footer h3, .footer h4{margin:0 0 .6rem}
.footer p, .footer a{display:block; color:var(--muted); margin:0 0 .35rem}

.whatsapp-float{
  position:fixed; right:1rem; bottom:1rem; z-index:20;
  padding:.85rem 1.05rem; border-radius:999px; background:#25D366; color:#fff;
  font-weight:800; box-shadow:var(--shadow)
}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease}
.reveal.in{opacity:1; transform:translateY(0)}


@keyframes floaty{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-14px)}
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,20px,0) scale(1.04)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes counterSpin{to{transform:rotate(-360deg)}}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes bgWave{
  0%,100%{transform:scale(1) translateX(0)}
  50%{transform:scale(1.08) translateX(10px)}
}
@keyframes sheen{
  from{transform:translateX(-40%)}
  to{transform:translateX(40%)}
}

@media (max-width: 1080px){
  .hero,.experience,.grid-4,.grid-3,.grid-2,.footer,.login-wrap,.stats,.form-grid{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr; padding-top:2.4rem}
}
@media (max-width: 760px){
  .nav-shell{
    flex-wrap:wrap; border-radius:28px;
  }
  .nav-burger{display:inline-grid; place-items:center}
  .nav-links{display:none; width:100%; justify-content:flex-start; flex-wrap:wrap; order:3; margin-left:0}
  .nav-links.open{display:flex}
  .nav-actions{margin-left:auto; flex-wrap:wrap}
  .hero,.experience,.grid-4,.grid-3,.grid-2,.footer,.login-wrap,.stats,.form-grid{grid-template-columns:1fr}
  .section{padding:2.6rem 0}
  .section-head{align-items:flex-start; flex-direction:column}
  .orbit-wrap{min-height:480px}
  .teacher-card,.review-card{min-width:220px; max-width:220px}
}

/* Full page animated background */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-2 !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.18), transparent 25%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.08), transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(124,58,237,.14), transparent 24%);
  animation: backgroundMove 18s ease-in-out infinite alternate;
  filter: blur(30px);
}
body::after{
  animation-duration:28s;
  opacity:.10;
}

.canvas-bg{
  position:fixed;
  inset:0;
  z-index:-1 !important;
  opacity:1 !important;
  pointer-events:none;
  mix-blend-mode: normal !important;
}

@keyframes backgroundMove{
  0%{transform:translate3d(-2%, -1%, 0) scale(1)}
  50%{transform:translate3d(2%, 2%, 0) scale(1.08)}
  100%{transform:translate3d(-1%, 3%, 0) scale(1.03)}
}


/* ===== FOOTER ===== */

.site-footer{
  width:min(1180px, calc(100% - 1.4rem));
  margin:4rem auto 0;
  padding:2rem;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:30px 30px 0 0;
  backdrop-filter:blur(20px);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(255,255,255,.08), transparent 25%);
  pointer-events:none;
}

.footer-col{
  position:relative;
  z-index:2;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}

.footer-logo{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
}

.footer-col h3,
.footer-col h4{
  margin:0 0 1rem;
  color:#fff;
}

.footer-col p,
.footer-col a{
  color:rgba(255,255,255,.75);
  line-height:1.8;
  text-decoration:none;
  display:block;
  transition:.3s;
}

.footer-col a:hover{
  color:#f28c28;
  transform:translateX(4px);
}

.footer-text{
  max-width:320px;
}

.footer-bottom{
  width:min(1180px, calc(100% - 1.4rem));
  margin:0 auto 2rem;
  padding:1rem 2rem;
  text-align:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-top:none;
  border-radius:0 0 24px 24px;
  color:rgba(255,255,255,.7);
  backdrop-filter:blur(20px);
}

@media(max-width:900px){

  .site-footer{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:600px){

  .site-footer{
    grid-template-columns:1fr;
  }

}

:root{
  --bg:#050816;
  --bg2:#111827;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --text:#f4f6fb;
  --muted:rgba(244,246,251,.72);
  --border:rgba(255,255,255,.12);
  --accent:#f28c28;
  --accent2:#ffd2a1;
  --shadow:0 24px 80px rgba(0,0,0,.38);
  --radius:28px;
  --hero-glow:rgba(59,130,246,.16);
  --hero-bg-1:#050816;
  --hero-bg-2:#0f172a;
  --hero-bg-3:#111827;
}

body.light{
  --bg:#f8fafc;
  --bg2:#eef2ff;
  --panel:rgba(255,255,255,.84);
  --panel2:rgba(255,255,255,.96);
  --text:#101827;
  --muted:rgba(16,24,39,.68);
  --border:rgba(16,24,39,.10);
  --shadow:0 24px 70px rgba(16,24,39,.10);
  --hero-glow:rgba(59,130,246,.08);
  --hero-bg-1:#f8fafc;
  --hero-bg-2:#ffffff;
  --hero-bg-3:#e9efff;
}

body{
  background:
    radial-gradient(circle at 20% 10%, rgba(59,130,246,.14), transparent 22%),
    radial-gradient(circle at 80% 15%, rgba(168,85,247,.10), transparent 18%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.04), transparent 20%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.hero-bg{
  background:
    radial-gradient(circle at top left, var(--hero-glow), transparent 25%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.05), transparent 20%),
    linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2), var(--hero-bg-3));
}

body.light .ambient-a{
  background: rgba(59,130,246,.10);
}

body.light .ambient-b{
  background: rgba(168,85,247,.08);
}


body.light .site-footer a,
body.light .site-footer p,
body.light .footer-bottom p{
  color: rgba(16,24,39,.72);
}

body.light .hero p,
body.light .section-head p,
body.light .card p,
body.light .review-card p,
body.light .plan-card p{
  color: rgba(16,24,39,.72);
}

/* FINAL THEME FIX */
body{
  color:#f4f6fb !important;
}

body.light{
  color:#101827 !important;
  --bg:#f4efe6;
  --bg2:#fbf8f2;
  --panel:rgba(255,255,255,.82);
  --panel2:rgba(255,255,255,.94);
  --text:#101827;
  --muted:rgba(16,24,39,.72);
  --border:rgba(16,24,39,.10);
  --shadow:0 24px 70px rgba(16,24,39,.10);
  --hero-glow:rgba(59,130,246,.10);
  --hero-bg-1:#f4efe6;
  --hero-bg-2:#fbf8f2;
  --hero-bg-3:#e8decd;
}

body:not(.light){
  color:#f4f6fb !important;
  --bg:#050816;
  --bg2:#111827;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --text:#f4f6fb;
  --muted:rgba(244,246,251,.72);
  --border:rgba(255,255,255,.12);
  --shadow:0 24px 80px rgba(0,0,0,.38);
  --hero-glow:rgba(59,130,246,.16);
  --hero-bg-1:#050816;
  --hero-bg-2:#0f172a;
  --hero-bg-3:#111827;
}

body h1,
body h2,
body h3,
body h4,
body p,
body span,
body a{
  color: inherit !important;
}

.hero h1,
.section h2,
.banner h1,
.card-title,
.price,
.site-header,
.site-nav a{
  color: inherit !important;
}

body.light .site-header,
body.light .hero-card,
body.light .card,
body.light .form-card,
body.light .plan-card,
body.light .faq-item,
body.light .review-card,
body.light .teacher-card,
body.light .site-footer,
body.light .footer-bottom{
  background: rgba(255,255,255,.82) !important;
  color:#101827 !important;
}

body.light .site-footer p,
body.light .site-footer a,
body.light .footer-bottom p{
  color: rgba(16,24,39,.72) !important;
}

body:not(.light) .site-header,
body:not(.light) .hero-card,
body:not(.light) .card,
body:not(.light) .form-card,
body:not(.light) .plan-card,
body:not(.light) .faq-item,
body:not(.light) .review-card,
body:not(.light) .teacher-card,
body:not(.light) .site-footer,
body:not(.light) .footer-bottom{
  background: rgba(255,255,255,.06) !important;
  color:#f4f6fb !important;
}

.hero-bg{
  background:
    radial-gradient(circle at top left, var(--hero-glow), transparent 25%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.05), transparent 20%),
    linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2), var(--hero-bg-3)) !important;
}

/* FINAL VISUAL FIX */
body.light{
  --bg:#f7f7f4;
  --bg2:#f2f3f5;
  --hero-glow: rgba(255,255,255,.04);
  --hero-bg-1:#f7f7f4;
  --hero-bg-2:#fcfcfc;
  --hero-bg-3:#eef1f4;
}

body.light::before,
body.light::after{
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.22), transparent 25%),
    radial-gradient(circle at 80% 30%, rgba(168,85,247,.18), transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(255,180,80,.10), transparent 24%);
  opacity:.85 !important;
}

body:not(.light) .ambient{
  opacity:.55;
}

body.light .ambient{
  opacity:.38;
}

body:not(.light) .canvas-bg{
  opacity:.90;
}



body:not(.light) .hero-bg::before{
  opacity:.95;
}

body:not(.light) .hero-bg::after{
  opacity:.80;
}


/* FINAL OVERRIDE */
body::before,
body::after{
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.18), transparent 25%),
    radial-gradient(circle at 80% 30%, rgba(168,85,247,.14), transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.05), transparent 24%) !important;
  opacity:.32 !important;
}


.ambient-a{
  background: rgba(59,130,246,.18) !important;
}

.ambient-b{
  background: rgba(168,85,247,.12) !important;
}

body.light .ambient-a{
  background: rgba(59,130,246,.08) !important;
  filter: blur(90px) !important;

}

body.light .ambient-b{
  background: rgba(168,85,247,.22) !important;
  filter: blur(90px) !important;
}

.canvas-bg{
  opacity:.85 !important;
}

body.light .canvas-bg{
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

.hero-bg::before{
  opacity:.92 !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(59,130,246,.12), transparent 18%),
    radial-gradient(circle at 70% 72%, rgba(168,85,247,.10), transparent 18%) !important;
}

.hero-bg::after{
  opacity:.70 !important;
}



.hero-card{
  position:relative;
  overflow:hidden;
}

.hero-photo{
  position:absolute;
  inset:0;
  background:url('image/front.jpeg') center/cover no-repeat;
  border-radius:34px;
}

.hero-center{
  display:none;
}