/* Thakur British Academy — LIQUID GLASS + art-direction pass (24 Oct 2026). Loaded last, homepage only.
   One cohesive look: clean flat cards with ONE soft shadow, consistent radii, and liquid glass used only on
   overlays and controls (sticky header, phone call bar, hero stats, Admission badge, the app band's chips).
   Colours, fonts, layout, text, numbers and images are unchanged. Nothing here hides content; blur is limited
   to a few small or fixed elements; a solid fallback covers phones without backdrop-filter; the light sweep
   stops under reduced motion and the site's own motion switch. */

/* ---------- 1. one system: radius, shadow, glass tokens ---------- */
:root{
  --r-card:16px; --r-ctl:12px; --r-chip:999px;
  --sh-1:0 1px 2px rgba(11,32,70,.05),0 10px 26px -14px rgba(11,42,91,.26);
  --sh-2:0 2px 4px rgba(11,32,70,.06),0 18px 38px -16px rgba(11,42,91,.34);
  /* the old dual (neumorphic) shadows now resolve to the single soft shadow */
  --nm-card:var(--sh-1); --nm-card-up:var(--sh-2);
  --nm-btn:0 1px 2px rgba(11,32,70,.08),0 6px 16px -10px rgba(11,42,91,.40);
  --nm-in:inset 0 1px 2px rgba(11,32,70,.06);
  --clay-cream:none; --clay-mar:none;
  /* glass */
  --g-blur:14px; --g-sat:170%;
  --g-cream:rgba(253,250,248,.62);
  --g-cream-solid:rgba(248,243,240,.97);
  --g-rim:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.35);
  --g-rim-dark:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.12);
  --g-sheen:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 42%,rgba(255,255,255,0) 60%);
  --g-sheen-dark:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 62%)
}

/* ---------- 2. calmer cards: hairline + one shadow, one radius ---------- */
.course,.batch,.offer,.dl,.mapcard,.enq,details,#toppers-list .card,.lec,.teacher-c,#teacher-list>.teacher{border-radius:var(--r-card)!important;border:1px solid var(--line)!important}
.btn,.gplay,.sbtn{border-radius:var(--r-ctl)!important}
form.enq input,form.enq select,form.enq textarea{border-radius:10px!important}
/* icon chips: flat, crisp (no puffy clay) */
.course .ic{background:linear-gradient(160deg,#013A85,var(--mar))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 10px -6px rgba(11,42,91,.6)!important}
.offer-ic{box-shadow:0 0 0 3px var(--paper),0 0 0 4px rgba(1,75,170,.75)!important}
.status{box-shadow:none!important}

/* ---------- 3. bento "Why Thakur British Academy?" — tidy on phone ---------- */
section[data-sec=features]>h2{font-size:clamp(2.15rem,8.8vw,3.7rem)!important;line-height:1.04!important;max-width:15ch}
section[data-sec=features]::before{opacity:.32}
.why#features-list{gap:10px!important}
.why#features-list .w{border-radius:var(--r-card)!important;box-shadow:var(--sh-1)!important;min-height:118px;padding:16px 14px!important;gap:14px!important}
.why#features-list .w>span{width:44px!important;height:44px!important;border-radius:12px!important;background:rgba(1,75,170,.12)!important;
  box-shadow:inset 0 0 0 1px rgba(1,75,170,.38)!important}
.why#features-list .w .lic{width:22px!important;height:22px!important}
.why#features-list .w b{font-size:1.12rem!important;line-height:1.18!important;letter-spacing:0!important}
/* the big tile: maroon with a warm gold light; its chip is a small piece of liquid glass */
.why#features-list .w:nth-child(1){min-height:156px;
  background:radial-gradient(90% 120% at 100% 100%,rgba(170,200,243,.30),rgba(170,200,243,0) 55%),radial-gradient(120% 140% at 0% 0%,var(--mar2),var(--mar) 55%,var(--mar3))!important;
  box-shadow:0 18px 36px -18px rgba(11,42,91,.6)!important}
.why#features-list .w:nth-child(1)>span{width:54px!important;height:54px!important;border-radius:16px!important;color:var(--goldL)!important;
  background:var(--g-sheen-dark),rgba(255,255,255,.10)!important;box-shadow:var(--g-rim-dark),0 8px 18px -10px rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%)}
.why#features-list .w:nth-child(1) b{font-size:clamp(1.55rem,6.4vw,2.2rem)!important}
@media (min-width:760px){
  .why#features-list{gap:14px!important}
  .why#features-list .w{padding:22px!important}
  .why#features-list .w:nth-child(1) b{font-size:2.4rem!important}
  .why#features-list .w b{font-size:1.32rem!important}
  .hero::after{opacity:.75}
}
@media (hover:hover) and (pointer:fine){
  .why#features-list .w:hover{box-shadow:var(--sh-2)!important}
  .why#features-list .w:nth-child(1):hover{box-shadow:0 24px 44px -18px rgba(11,42,91,.65)!important}
}

/* ---------- 4. LIQUID GLASS: sticky header once scrolled ---------- */
/* the header was meant to stick (position:sticky) but html+body both had overflow-x:hidden, which turns <body> into its
   own scroll box and silently breaks sticky. html keeps overflow-x:hidden (no sideways scroll); body clips instead. */
body.home{overflow-x:visible!important}
@supports (overflow:clip){body.home{overflow-x:clip!important}}
main#main>[id],main#main [id].sec{scroll-margin-top:84px}
header.nav.scrolled{background:var(--g-sheen),var(--g-cream)!important;
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat))!important;backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(1,75,170,.32),0 10px 28px -16px rgba(11,42,91,.38)!important;
  border-bottom-color:transparent!important}

/* ---------- 5. LIQUID GLASS: phone call / WhatsApp bar — a floating glass dock ---------- */
@media (max-width:899px){
  .sticky{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;padding:8px!important;gap:8px!important;
    border-radius:20px!important;border:0!important;
    background:var(--g-sheen),var(--g-cream)!important;
    -webkit-backdrop-filter:blur(16px) saturate(var(--g-sat))!important;backdrop-filter:blur(16px) saturate(var(--g-sat))!important;
    box-shadow:var(--g-rim),0 14px 34px -12px rgba(11,42,91,.45),0 2px 6px rgba(11,42,91,.10)!important}
  .sticky .btn{border-radius:14px!important;padding:.78em 1em!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.14)!important}
  .totop{background:var(--g-sheen),var(--g-cream)!important;border:0!important;color:var(--mar)!important;
    -webkit-backdrop-filter:blur(12px) saturate(var(--g-sat));backdrop-filter:blur(12px) saturate(var(--g-sat));
    box-shadow:var(--g-rim),0 8px 20px -10px rgba(11,42,91,.45)!important}
}
/* desktop floating buttons: coloured glass (rim + top sheen, no blur needed on solid colour) */
.fab a{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.18),0 12px 26px -12px rgba(0,0,0,.45)!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 55%)!important}
.tba-as-fab{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.25),0 12px 26px -12px rgba(11,42,91,.55)!important}

/* ---------- 6. LIQUID GLASS: hero — Admission badge + stats over a maroon/gold light ---------- */
.hero .badge{background:var(--g-sheen),rgba(255,255,255,.42)!important;border:0!important;border-radius:var(--r-chip)!important;padding:8px 16px 8px 14px!important;
  -webkit-backdrop-filter:blur(10px) saturate(var(--g-sat));backdrop-filter:blur(10px) saturate(var(--g-sat));
  box-shadow:var(--g-rim),inset 0 0 0 1px rgba(1,75,170,.35),0 8px 20px -12px rgba(1,75,170,.45)!important;color:var(--mar)!important}
.hero .badge>span{color:var(--mar)!important}
/* a soft light behind the stats so the glass has colour to bend */
.hero::after{content:"";display:block!important;position:absolute;z-index:-1;left:50%;width:min(1140px,100%);margin-left:calc(min(1140px,100%)/-2);bottom:-30px;height:240px;pointer-events:none;
  background:radial-gradient(38% 60% at 22% 55%,rgba(1,75,170,.55),rgba(1,75,170,0) 70%),radial-gradient(40% 65% at 78% 45%,rgba(1,75,170,.55),rgba(1,75,170,0) 72%),radial-gradient(30% 50% at 52% 70%,rgba(170,200,243,.45),rgba(170,200,243,0) 70%);
  filter:blur(6px)}
.hero .stats{overflow:hidden;isolation:isolate;border-radius:var(--r-card)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 46%,rgba(255,255,255,0) 60%),rgba(1,58,133,.80)!important;
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.10),0 22px 44px -22px rgba(11,42,91,.65)!important}
.hero .stats::before{border-radius:11px!important;border-color:rgba(170,200,243,.42)!important}
.hero .stats .lbl{color:#F3EDE8!important}

/* ---------- 7. LIQUID GLASS: "Download our app" band ---------- */
#app.app-sec{background:radial-gradient(60% 45% at 90% 8%,rgba(170,200,243,.22),rgba(170,200,243,0) 70%),radial-gradient(70% 50% at 0% 100%,rgba(46,118,218,.85),rgba(46,118,218,0) 70%),var(--mar)!important}
#app .app-icon,#app .app-stats li{background:var(--g-sheen-dark),rgba(255,255,255,.09)!important;border:0!important;
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  box-shadow:var(--g-rim-dark),0 14px 30px -16px rgba(0,0,0,.55)!important}
#app .app-icon{border-radius:20px!important;color:#fff!important}
#app .app-icon b{color:#fff!important}#app .app-icon small{color:#ecdcc2!important}
#app .app-stats{gap:10px!important}
#app .app-stats li{border-radius:14px!important;padding:10px 14px!important;opacity:1!important}
#app .app-stats b{color:var(--goldL)!important;opacity:1!important}
#app .app-stats span{color:#E6EDF8!important;opacity:1!important}
#app .gplay{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.14),0 14px 28px -14px rgba(0,0,0,.6)!important;border-color:transparent!important}

/* ---------- 8. the light sweep: one slow pass across the stats and the app card ---------- */
.hero .stats::after,#app .app-icon::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.16) 48%,rgba(255,255,255,0) 61%);
  background-size:250% 100%;background-position:130% 0;animation:gSweep 9s ease-in-out 2.4s infinite}
#app .app-icon{position:relative;overflow:hidden}
@keyframes gSweep{0%,62%{background-position:130% 0}100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.hero .stats::after,#app .app-icon::after{animation:none!important;display:none}}
.no-motion .hero .stats::after,.no-motion #app .app-icon::after{animation:none!important;display:none}

/* ---------- 9. no backdrop-filter, or reduced transparency: solid, readable panels ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.nav.scrolled,.sticky,.totop,.hero .badge{background:var(--g-cream-solid)!important}
  .hero .stats{background:var(--mar)!important}
  #app .app-icon,#app .app-stats li,.why#features-list .w:nth-child(1)>span{background:rgba(255,255,255,.12)!important}
}
@media (prefers-reduced-transparency:reduce){
  header.nav.scrolled,.sticky,.totop,.hero .badge{background:var(--g-cream-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hero .stats{background:var(--mar)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  #app .app-icon,#app .app-stats li{background:#7d2232!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media print{.hero::after,.hero .stats::after,#app .app-icon::after{display:none!important}}