/* ==========================================================================
   LIQUID GLASS layer (Nov 2026), on top of the "Signal" design.
   Inspired by iOS 26 Liquid Glass: floating, translucent controls that pick up
   the colour behind them, with a bright specular rim and soft depth.
   Real backdrop blur only on surfaces that float over content (header, tab bar,
   sheets, menus, banners); in-page panels get the glass material without blur,
   which keeps scrolling smooth on phones.
   ========================================================================== */
:root{
  --gl-fill:linear-gradient(180deg,rgba(255,255,255,.115) 0%,rgba(255,255,255,.045) 42%,rgba(255,255,255,.035) 100%);
  --gl-fill-strong:linear-gradient(180deg,rgba(40,48,60,.74) 0%,rgba(22,28,38,.70) 100%);
  --gl-rim:rgba(255,255,255,.16);
  --gl-rim-hi:rgba(255,255,255,.34);
  --gl-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(255,255,255,.04) inset,0 0 0 1px rgba(255,255,255,.07) inset,0 18px 40px -18px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.25);
  --gl-blur:blur(30px) saturate(190%) brightness(1.06);
  --gl-r-ctl:999px;--gl-r-panel:24px;--gl-r-sheet:30px;
}

/* the field the glass refracts: deep graphite with three soft light sources */
body{background:var(--bg)}
body::before{content:"";position:fixed;inset:-10vmax;z-index:0;pointer-events:none;display:block!important;opacity:1!important;
  background:
    radial-gradient(38vmax 30vmax at 12% 8%,rgba(43,196,138,.16),transparent 70%),
    radial-gradient(34vmax 28vmax at 92% 18%,rgba(127,178,255,.15),transparent 70%),
    radial-gradient(40vmax 30vmax at 70% 92%,rgba(245,181,68,.08),transparent 72%),
    radial-gradient(30vmax 24vmax at 4% 78%,rgba(167,155,255,.08),transparent 70%);
  -webkit-mask-image:none;mask-image:none}
.wrap,main,section,footer.site{position:relative;z-index:1}

/* specular highlight shared by every glass object */
header.site nav{position:relative}

/* ---------- floating header: a glass capsule ---------- */
header.site{background:transparent!important;border-bottom:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding-top:10px;top:0}
header.site nav{background:var(--gl-fill-strong);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-rim);border-top-color:var(--gl-rim-hi);border-radius:22px;box-shadow:var(--gl-shadow);padding:0 10px 0 20px;height:60px}
header.site nav::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 72%,rgba(255,255,255,.06) 100%)}
header.site .navlinks{gap:2px}
header.site .navlinks a{border-radius:999px;padding:6px 10px}
header.site .navlinks a:hover{background:rgba(255,255,255,.07)}
header.site .navlinks a[aria-current],header.site .navlinks a.on{background:rgba(255,255,255,.10)}
.mm{background:var(--gl-fill-strong);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:1px solid var(--gl-rim);border-radius:22px;margin:8px 0 0;box-shadow:var(--gl-shadow)}

/* ---------- buttons: liquid capsules ---------- */
.btn{border-radius:var(--gl-r-ctl)}
.btn-primary{background:linear-gradient(180deg,#FFFFFF 0%,#E9EDF2 100%);color:#0A0E14;border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 #fff inset,0 -2px 4px rgba(10,14,20,.12) inset,0 8px 20px -8px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.3)}
.btn-primary:hover{background:linear-gradient(180deg,#FFFFFF 0%,#F2F5F8 100%);box-shadow:0 1px 0 #fff inset,0 -2px 4px rgba(10,14,20,.1) inset,0 10px 26px -8px rgba(255,255,255,.45),0 2px 6px rgba(0,0,0,.3)}
.btn-ghost{background:var(--gl-fill);border:1px solid var(--gl-rim);border-top-color:var(--gl-rim-hi);color:var(--text);box-shadow:var(--gl-shadow)}
.btn-ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border-color:rgba(255,255,255,.22)}
.dg-search-btn,.dg-me-btn,.dg-more-btn,.langsel summary,.menu-toggle{border-radius:999px!important;background:var(--gl-fill)!important;border:1px solid var(--gl-rim)!important;box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.seg{border-radius:999px;background:rgba(255,255,255,.05);border-color:var(--gl-rim)}
.seg button{border-radius:999px}
.seg button.on{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 4px 10px -4px rgba(0,0,0,.5)}
input,select,textarea{border-radius:14px}
.capture input{border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--gl-rim)}

/* ---------- panels: glass material, no blur ---------- */
.card,.plan,.final,.qa,.hashiya,.chartbox,.metric,.tblwrap,.instructor,.prod,.offer,.notice,.step,.postcard,.tcard,.panel,
.dgl-card,.dgl-ocard,.dgl-panel,.dgl-board,.op-card,.cn-card,.cn-box,.zk-card{
  background:var(--gl-fill)!important;border:1px solid var(--gl-rim)!important;border-top-color:var(--gl-rim-hi)!important;
  border-radius:var(--gl-r-panel)!important;box-shadow:var(--gl-shadow)!important}
.hashiya{padding:26px 26px 20px}
.plan.pro,.plan.featured{border-color:rgba(43,196,138,.45)!important;box-shadow:var(--gl-shadow),0 0 0 1px rgba(43,196,138,.25),0 30px 60px -30px rgba(43,196,138,.35)!important}
.pillars{border-top:1px solid var(--gl-rim);border-bottom:1px solid var(--gl-rim)}
.pillar:hover{background:rgba(255,255,255,.04)}
.livebar{background:rgba(255,255,255,.03);border-color:var(--gl-rim)}
.bg-soft{background:transparent}
.dgl-chip,.chip,.badge.mint,.pill{border-radius:999px}

/* rulings meter: glass cells */
.tally-xl .t,.op-tally .t{border-radius:6px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -6px 12px rgba(0,0,0,.18) inset}

/* ---------- floating tab bar (phones) ---------- */
@media (max-width:899px){
  body[data-dg-shell~=tabs] .dg-tabbar{left:12px;right:12px;bottom:calc(8px + var(--dg-safe-b));height:var(--dg-tab-h);padding:0 6px;border-radius:30px;
    background:var(--gl-fill-strong);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
    border:1px solid var(--gl-rim);border-top-color:var(--gl-rim-hi);box-shadow:var(--gl-shadow),0 24px 50px -16px rgba(0,0,0,.8)}
  .dg-tab{border-radius:24px;margin:5px 0}
  .dg-tab.on{color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 0 0 1px rgba(255,255,255,.08) inset}
  .dg-tab.on svg{filter:none}
  .dg-tab.on::before,.dg-tab.on::after{display:none}
  body[data-dg-shell~=tabs]{padding-bottom:calc(var(--dg-tab-h) + 20px + var(--dg-safe-b))}
  body[data-dg-shell~=tabs] .consentbar{bottom:calc(var(--dg-tab-h) + 18px + var(--dg-safe-b))}
  header.site{padding:8px 10px 0}
  header.site nav{height:54px;border-radius:20px;padding:0 6px 0 16px}
  header.site .wrap{padding:0}
}

/* ---------- sheets, menus, banners ---------- */
.dg-sheet{background:var(--gl-fill-strong)!important;-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-rim)!important;border-top-color:var(--gl-rim-hi)!important;border-radius:var(--gl-r-sheet) var(--gl-r-sheet) 0 0!important;box-shadow:var(--gl-shadow),0 -30px 60px rgba(0,0,0,.5)!important}
.dg-sheet-grab i{background:rgba(255,255,255,.35)}
.langmenu,.dg-pal,.dg-pal-box,.dgl-msheet,.dg-ib{background:var(--gl-fill-strong)!important;-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:1px solid var(--gl-rim)!important;border-radius:20px!important;box-shadow:var(--gl-shadow)!important}
.consentbar{left:12px;right:12px;bottom:12px;border-radius:24px;background:var(--gl-fill-strong)!important;-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:1px solid var(--gl-rim)!important;border-top-color:var(--gl-rim-hi)!important;box-shadow:var(--gl-shadow),0 24px 50px -16px rgba(0,0,0,.8)}

/* when the browser cannot blur, fall back to solid tinted glass */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.site nav,.dg-tabbar,.dg-sheet,.consentbar,.langmenu,.mm{background:rgba(22,28,38,.97)!important}
}
@media (prefers-reduced-transparency:reduce){
  header.site nav,.dg-tabbar,.dg-sheet,.consentbar,.langmenu,.mm{background:rgba(22,28,38,.98)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Yoruba and Hausa: Inter draws every tone mark and hooked letter */
html[lang=yo],html[lang=ha]{--ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--display:'Inter',system-ui,sans-serif}
html[lang=yo] body,html[lang=ha] body{font-family:var(--ui)}
.ph-wm{width:auto!important;height:auto!important;font:700 15px/1 var(--ui);letter-spacing:-.05em;color:var(--text)}
.off-wm{font:700 34px/1 var(--ui);letter-spacing:-.055em;color:var(--text)}
/* Hindi: Devanagari from Noto Sans Devanagari, Latin from Geist */
html[lang=hi]{--ui:'Geist','Noto Sans Devanagari','Inter',system-ui,sans-serif;--display:'Geist','Noto Sans Devanagari','Inter',system-ui,sans-serif}
html[lang=hi] body{font-family:var(--ui)}
html[lang=hi] h1,html[lang=hi] h2,html[lang=hi] .h1{letter-spacing:-.01em;line-height:1.2}

/* ---------- scroll light (driven by glass.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  body::before{transform:translate3d(0,calc(var(--gl-sp,0) * -14vh),0) rotate(calc(var(--gl-sp,0) * 10deg));will-change:transform}
}
/* the glass rim catches coloured light that turns as you scroll */
header.site nav::before,.dg-tabbar::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--gl-ang,200deg),rgba(43,196,138,.0),rgba(43,196,138,.55),rgba(127,178,255,.6),rgba(167,155,255,.35),rgba(245,181,68,.45),rgba(43,196,138,.0) 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.35;transition:opacity .4s ease}
.gl-scrolled header.site nav::before,.gl-scrolled .dg-tabbar::before{opacity:.9}
.dg-tabbar{position:fixed}
/* coloured glow bleeding from behind the floating glass once content scrolls under it */
header.site nav{transition:box-shadow .4s ease}
.gl-scrolled header.site nav{box-shadow:var(--gl-shadow),0 10px 40px -12px rgba(43,196,138,.28),0 18px 60px -20px rgba(127,178,255,.32)}
/* scroll-edge effect: content blurs and tints as it passes under the header (iOS style) */
@media (prefers-reduced-transparency:no-preference){
  body::after{content:"";position:fixed;left:0;right:0;top:0;height:96px;z-index:55;pointer-events:none;
    -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
    background:linear-gradient(180deg,rgba(10,14,20,.55),rgba(10,14,20,0));
    -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent);mask-image:linear-gradient(180deg,#000 35%,transparent);
    opacity:0;transition:opacity .35s ease}
  .gl-scrolled body::after{opacity:1}
}
/* pointer sheen on glass panels */
.card,.plan,.hashiya,.qa,.chartbox,.prod,.instructor,.final,.dgl-card,.dgl-ocard{
  background-image:radial-gradient(260px circle at var(--mx,-400px) var(--my,-400px),rgba(255,255,255,.085),transparent 62%),var(--gl-fill)!important}
/* Lottie slots keep their size so nothing jumps */
.lottie{display:inline-block;flex:0 0 auto;line-height:0}
.lottie svg{display:block}