/* =========================================================
   CSAf "liquid glass" — shared by csafri.com and the Learn Hub.
   Clear glass with a light-catching rim, a soft highlight along
   the top edge and gentle depth. Loads after the other styles.
   ========================================================= */
:root{
  --lg-fill:linear-gradient(180deg,rgba(255,255,255,.74),rgba(250,252,251,.58));
  --lg-rim:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.35) 22%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.28) 78%,rgba(255,255,255,.85) 100%);
  --lg-blur:blur(26px) saturate(160%);
  --lg-depth:inset 0 1px 1px rgba(255,255,255,.95),inset 0 14px 22px -18px rgba(255,255,255,.95),inset 0 -12px 24px -18px rgba(255,255,255,.6),
             0 1px 2px rgba(31,46,43,.05),0 22px 44px -24px rgba(31,46,43,.38);
  --lg-dark-fill:linear-gradient(180deg,rgba(64,78,75,.86),rgba(48,60,57,.9));
  --lg-dark-rim:linear-gradient(135deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.18) 100%);
  --lg-dark-depth:inset 0 1px 1px rgba(255,255,255,.22),inset 0 14px 24px -20px rgba(255,255,255,.35),0 26px 50px -28px rgba(20,30,28,.6);
  --lg-ease:cubic-bezier(.32,.72,0,1);
}

/* ---------- Light liquid glass ---------- */
/* csafri.com, Learn Hub and EDA course */
header.nav,header.nav.solid,.pillar,.front,.back,.theme,.post,.innovation,.course,.ccard,.hub-list li,.vm-card,.value,
.hero-chips .chip,.cs-profile span,.page-hero,.hero:has(.hero-inner),.cta,.a-card,.pull,.btn-ghost,
.hub-card,.how-step,.panel,.av-card,.cp-mod,.cp-box,.verify-box,.cp-hero,.stats-band,.cta-band,.trust,
.wrap .hero,.mod{
  background:var(--lg-fill)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  backdrop-filter:var(--lg-blur)!important;-webkit-backdrop-filter:var(--lg-blur)!important;
  box-shadow:var(--lg-depth)!important;
  transition:transform .7s var(--lg-ease),box-shadow .7s var(--lg-ease)!important}
.dd-panel{background:rgba(255,255,255,.72)!important;backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);box-shadow:var(--lg-depth)!important;border:1px solid rgba(255,255,255,.7)}

/* The bright rim that catches the light (drawn only on the edge) */
.pillar,.theme,.post,.innovation,.course,.ccard,.hub-list li,.vm-card,.value,.hero-chips .chip,.cs-profile span,.cta,.a-card,.pull,.btn-ghost,
.hub-card,.how-step,.panel,.av-card,.cp-mod,.cp-box,.verify-box,.cp-hero,.stats-band,.cta-band,.trust,.wrap .hero,.mod{position:relative}
header.nav::before,.pillar::before,.front::before,.back::before,.theme::before,.post::before,.innovation::before,.course::before,.ccard::before,.hub-list li::before,
.vm-card::before,.value::before,.hero-chips .chip::before,.cs-profile span::before,.page-hero::before,.hero:has(.hero-inner)::before,.cta::before,.a-card::before,.pull::before,.btn-ghost::before,
.hub-card::before,.how-step::before,.panel::before,.av-card::before,.cp-mod::before,.cp-box::before,.verify-box::before,.cp-hero::before,.stats-band::before,.cta-band::before,.trust::before,
.wrap .hero::before,.mod::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;
  border-radius:inherit;padding:1.6px;background:var(--lg-rim)!important;background-size:220% 220%!important;background-position:0% 0%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:3;opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
  transition:background-position 1.2s var(--lg-ease)}
/* The light glides across the rim on hover */
.pillar:hover::before,.front:hover::before,.theme:hover::before,.post:hover::before,.ccard:hover::before,.hub-card:hover::before,
.how-step:hover::before,.cp-mod:hover::before,.mod:hover::before,.value:hover::before,.av-card:hover::before,.btn-ghost:hover::before{background-position:100% 100%}
.pillar:hover,.theme:hover,.post:hover,.ccard:hover,.hub-card:hover,.cp-mod:hover,.mod:hover{transform:translateY(-5px)}

/* Bigger page panels get a little more body */
.hero:has(.hero-inner),.page-hero,.cta,.cp-hero,.cta-band,.wrap .hero{--lg-fill:linear-gradient(180deg,rgba(248,251,250,.78),rgba(240,245,243,.62))}
/* Text-heavy cards stay easy to read */
.post,.ccard,.panel,.cp-box,.verify-box,.pull{--lg-fill:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.7))}

/* ---------- Dark liquid glass (the one calm darker surface) ---------- */
.feature-card,.featured-post,.map-wrap,.series-block.signature,.band,.aside-card,.evidence-box,.q-card,.stat-inline,.case,.footer,
.feature-box,.capstone-card,.case-box,footer{
  background:var(--lg-dark-fill) padding-box,var(--lg-dark-rim) border-box!important;
  border:1.5px solid transparent!important;box-shadow:var(--lg-dark-depth)!important}
/* keep artwork inside the dark cards visible */
.case{background:transparent padding-box,var(--lg-dark-rim) border-box!important}

/* ---------- Buttons: glossy pills ---------- */
.btn,.dark-btn,.outline-btn,.light-btn{position:relative;transition:transform .5s var(--lg-ease),box-shadow .5s var(--lg-ease)!important}
.btn-dark,.dark-btn,.hero .btn-light{box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 10px 16px -12px rgba(255,255,255,.35),0 10px 22px -12px rgba(31,46,43,.55)!important}
.btn-gold,header.nav .btn-gold{box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 10px 16px -10px rgba(255,255,255,.6),0 10px 22px -12px rgba(180,142,78,.7)!important}
.btn:active,.dark-btn:active,.outline-btn:active,.light-btn:active,.mod:active,.cp-mod:active,.front:active{transform:scale(.97)!important}

/* ---------- Small glass details ---------- */
.ico,.pillar .ico,.theme .ico,.front .ico,.how-icon{
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -6px 10px -8px rgba(63,140,147,.35),0 6px 14px -10px rgba(31,46,43,.4)!important}
.p-num,.tags span,.hub-list .cstat,.ccard li,.cp-chips span,.chips b{
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 2px 6px -4px rgba(31,46,43,.3)}

@media (prefers-reduced-transparency:reduce){
  header.nav,.pillar,.front,.theme,.post,.course,.ccard,.hub-card,.how-step,.panel,.cp-mod,.cp-box,.mod{background:rgba(255,255,255,.94)!important;backdrop-filter:none!important}
}
/* Menu bar: clear like the iPhone search bar, but text behind it stays out of the way */
header.nav,header.nav.solid{--lg-fill:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.66));--lg-blur:blur(24px) saturate(170%)}