/* ==========================================================================
   LUXE layer (v2, 2026-10-02) — loaded AFTER site.css. GOLDEN-HOUR ground, deep-green accents, SILVER glossy controls (no blue anywhere, 2026-10-04), Arabic pattern ground.
   Learned from Nest Farm / Fly Qiblah / Najim Uddin: photo hero, glass pill header, glass tiles, coverflow, one ground colour.
   ========================================================================== */
:root{
  --ground:#f5e8cc;                 /* ONE page ground: golden-hour champagne */
  --ground-hi:#faf0db; --ground-lo:#efdcb3; --glow-amber:rgba(238,190,96,.24); --glow-rose:rgba(226,160,112,.13);
  --glass:linear-gradient(180deg,rgba(255,252,243,.82),rgba(255,248,232,.46));
  --glass-b:1px solid rgba(255,250,236,.92);
  --glass-sh:inset 0 1px 0 rgba(255,255,255,.95),0 16px 36px -20px rgba(6,48,31,.5);
  --nav-h:4.1rem;
}
/* root font ramps up so TV / large monitors keep the same proportions */
html{font-size:clamp(16px,.42vw + 12.8px,22px)}
@media (min-width:2200px){html{font-size:26px}}
@media (min-width:2900px){html{font-size:34px}}
@media (min-width:3600px){html{font-size:42px}}
.container{width:min(78rem,92%)}
@media (min-width:1600px){.container{width:min(78rem,90%)}}
@media (min-width:2300px){.container{width:min(78rem,90%)}}

/* one flat ground + faint Arabic star lattice (whole page, behind everything) */
body{background:var(--ground)!important}
body::before{opacity:.6!important;background-size:112px 112px!important;-webkit-mask-image:none!important;mask-image:none!important}
body::after{background:radial-gradient(60rem 30rem at 8% -4%,var(--glow-amber),transparent 70%),radial-gradient(60rem 34rem at 96% 14%,var(--glow-rose),transparent 70%),linear-gradient(180deg,rgba(250,240,219,.55),rgba(239,220,179,.0) 40%,rgba(239,220,179,.45))!important}
.lx-sec{padding:clamp(2.4rem,6vw,4.6rem) 0}
.lx-head{text-align:center;max-width:46rem;margin:0 auto clamp(1.4rem,3vw,2.2rem)}
.lx-head h2{font-size:clamp(1.55rem,3.2vw + .5rem,2.5rem);margin:.2rem 0 .3rem}
.lx-head p{font-size:1.02rem;color:var(--ink-3)}
.eyebrow{background:var(--glass)!important;border:var(--glass-b)!important;box-shadow:var(--glass-sh);color:var(--g800);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- glossy buttons: add top gloss + sheen sweep ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .7s ease;z-index:-1;pointer-events:none}
.btn:hover::after{left:130%}
.btn.glass{background:var(--glass);color:var(--b800);border:var(--glass-b);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-shadow:none}
.btn.glass:hover{color:var(--g800)}

/* ---------- header: floating glass pill ---------- */
.site-header{position:sticky;top:0;height:0;z-index:90;background:none!important;border:0!important;border-image:none!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.site-header .container{width:min(80rem,100% - 1.2rem)}
.nav-in{pointer-events:auto;position:relative;top:.7rem;height:var(--nav-h);padding:0 .6rem 0 .7rem;border-radius:99px;gap:.6rem;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 16px 36px -22px rgba(4,36,24,.6);transition:background .35s,box-shadow .35s}
.nav-in{background:linear-gradient(180deg,rgba(255,252,243,.9),rgba(250,240,218,.8))}
.logo img{width:2.5rem!important;height:2.5rem!important;border-radius:50%!important}
.logo b{font-size:1.02rem!important}.logo small{font-size:.66rem!important}
.nav a{font-size:.88rem;padding:.4rem .62rem}
.nav a.active{background:var(--grad-b)!important;color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.3)!important}
body:not([data-page=home]) main{padding-top:calc(var(--nav-h) + 1.7rem)}
.burger{width:2.8rem;height:2.8rem;border-radius:50%}
@media (max-width:1180px){
  .nav{top:calc(var(--nav-h) + 1rem);left:.6rem;right:.6rem;border-radius:1.6rem;border:1px solid rgba(255,255,255,.85);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,240,218,.95));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:auto}
  }

/* ---------- mobile: floating glass bottom bar ---------- */
@media (max-width:820px){
  :root{--tab-h:4.4rem;--nav-h:3.7rem}
  body{padding-bottom:calc(var(--tab-h) + 1rem + env(safe-area-inset-bottom))}
  .tabbar{left:.6rem;right:.6rem;bottom:calc(.6rem + env(safe-area-inset-bottom));height:3.9rem;padding:0 .3rem;border-radius:99px;border:1px solid rgba(255,255,255,.9);
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(248,236,208,.78));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 1px 0 #fff,0 14px 34px -14px rgba(4,36,24,.55)}
  .tabbar a{position:relative;margin:.35rem .1rem;border-radius:99px;font-size:.7rem}
  .tabbar a.active{background:var(--grad-b);color:#fff;box-shadow:var(--gloss)}
  .tabbar a.active svg{color:#fff;filter:none}.tabbar a.active::before{display:none}
  .edu-fab{bottom:calc(var(--tab-h) + 1.4rem + env(safe-area-inset-bottom))!important}
  .edu-tip{bottom:calc(var(--tab-h) + 8.2rem + env(safe-area-inset-bottom))!important}
}

/* ---------- HERO (clean painted slides — nothing sits on the images: no text, controls, chat button or header strip) ----------
   The slideshow is a framed 16:9 card BELOW the glass header at every screen size. Calm slow dissolve: the incoming picture fades in
   (ease-in-out, ~2.2s) over the outgoing one, which stays fully opaque underneath until the new one is opaque — so no background ever
   shows through. Only a tiny blur (4px) + very gentle 1.03→1.0 zoom; opacity / transform / filter only (GPU). Timing comes from home.js (--fade, --kb). */
.lx-hero{position:relative;isolation:isolate;color:#fff;outline:none;background:transparent;padding:5.4rem .75rem 0}
.lx-frame{position:relative;overflow:hidden;aspect-ratio:16/9;width:min(100%,calc((100vh - 7.4rem) * 16 / 9));width:min(100%,calc((100svh - 7.4rem) * 16 / 9));margin:0 auto;border-radius:1.6rem;background:#0a3a2a;border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 46px -24px rgba(4,36,24,.65),0 0 0 .35rem rgba(255,255,255,.4)}
.lx-slides{position:absolute;inset:0;z-index:0;background:#0a3a2a}
.lx-slide{position:absolute;inset:0;margin:0;overflow:hidden;opacity:0;filter:blur(4px);transform:scale(1.03) translateZ(0);backface-visibility:hidden;
  transition:opacity var(--fade,2200ms) cubic-bezier(.42,0,.58,1),filter var(--fade,2200ms) cubic-bezier(.42,0,.58,1),transform var(--kb,6700ms) linear}
/* incoming: fades in from a tiny blur while slowly settling from 1.03 → 1.0 */
.lx-slide.on{opacity:1;filter:blur(0);transform:scale(1) translateZ(0);z-index:2;will-change:opacity,filter,transform}
/* outgoing: stays fully opaque UNDER the incoming slide (background can never show through), softens to 4px blur, then is hidden once fully covered */
.lx-slide.prev{opacity:1;filter:blur(4px);transform:scale(1) translateZ(0);z-index:1;will-change:filter,transform;transition:filter var(--fade,2200ms) cubic-bezier(.42,0,.58,1),transform var(--kb,6700ms) linear,opacity 0s}
.lx-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none;-webkit-user-drag:none}
@media (min-width:700px){.lx-hero{padding:6rem 1.5rem 0}}
/* the floating শিক্ষাবিদ chat button + its tip would sit on the picture → hidden while they overlap the slideshow (home.js toggles .hero-clean) */
.hero-clean .edu-fab,.hero-clean .edu-tip{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .25s,visibility 0s .25s!important}
/* intro strip under the slideshow (name + the two buttons live here, never on the images) */
.lx-intro{padding:2.4rem 0 .6rem;text-align:center}
.lx-intro .container{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.lx-mark{width:4.2rem;height:4.2rem;aspect-ratio:1/1;border-radius:50%;border:0;box-shadow:0 14px 28px -10px rgba(90,66,36,.4);background:transparent;margin-bottom:.5rem}
.lx-name{font-family:var(--font-h);font-weight:700;font-size:clamp(2rem,5.4vw,3.8rem);line-height:1.2;background:linear-gradient(135deg,var(--b800,#0f5a3f),var(--g700,#0a7a5c));-webkit-background-clip:text;background-clip:text;color:transparent}
.lx-en{font-size:clamp(.72rem,1.5vw,.95rem);letter-spacing:.3em;text-transform:uppercase;color:var(--g700,#0a6b50);font-weight:600}
.lx-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.1rem}
@media (max-width:700px){.lx-cta .btn{width:100%;max-width:21rem;justify-content:center}}
@media (max-width:700px){.lx-intro{padding-top:1.8rem}}

/* ---------- COVERFLOW (four-part slider) ---------- */
.cf{position:relative;height:clamp(25rem,58vw,35rem);perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;overflow:visible}
.cf-card{position:absolute;left:50%;top:0;height:100%;aspect-ratio:4/5;max-width:78vw;display:block;border-radius:1.8rem;overflow:hidden;cursor:pointer;color:inherit;
  --o:0;--a:0;transform:translateX(calc(-50% + var(--o)*58%)) scale(calc(1 - var(--a)*.17)) rotateY(calc(var(--o)*-16deg));opacity:calc(1 - var(--a)*.32);filter:saturate(calc(1 - var(--a)*.25)) blur(calc(var(--a)*1.2px));
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s,filter .6s;border:1px solid rgba(255,255,255,.85);box-shadow:0 30px 50px -28px rgba(4,36,24,.7);background:var(--b100);-webkit-tap-highlight-color:transparent}
.cf-card[aria-hidden=true]{pointer-events:auto}
.cf-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cf-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 30%,rgba(4,36,24,.0) 55%,rgba(4,36,24,.28) 100%);pointer-events:none}
.cf-card.on{box-shadow:0 36px 60px -26px rgba(4,36,24,.75), 0 0 36px rgba(74,167,125,.28)}
.cf-cap{position:absolute;z-index:2;left:.55rem;right:.55rem;bottom:.55rem;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i t" "i s" "b b";align-items:center;column-gap:.7rem;row-gap:.05rem;padding:.7rem .75rem .75rem;border-radius:1.3rem;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(250,240,218,.82));border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #fff,0 8px 18px -10px rgba(4,36,24,.6)}
.cf-cap .ico{grid-area:i;width:2.7rem;height:2.7rem}
.cf-cap b{grid-area:t;font-family:var(--font-h);font-size:1.1rem;line-height:1.3;color:var(--b900)}
.cf-cap small{grid-area:s;font-size:.82rem;color:var(--ink-3);line-height:1.3}
.cf-cap .btn{grid-area:b;margin-top:.55rem;justify-content:center;width:100%;pointer-events:none}
.cf-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.4rem}
.cf-dots{display:flex;gap:.5rem}
.cf-dots button{width:.65rem;height:.65rem;border-radius:99px;border:0;padding:0;cursor:pointer;background:rgba(10,86,60,.28);transition:.3s}
.cf-dots button.on{width:2rem;background:var(--grad-g)}
.arrow.g{width:2.6rem;height:2.6rem;border-radius:50%}
@media (max-width:700px){.cf{height:min(30rem,128vw)}.cf-card{max-width:72vw}.cf-card{transform:translateX(calc(-50% + var(--o)*62%)) scale(calc(1 - var(--a)*.17)) rotateY(calc(var(--o)*-16deg))}}

/* ---------- শিক্ষাবিদ: one round glass card ---------- */
.edu-card{max-width:34rem;margin:0 auto;text-align:center;padding:clamp(1.4rem,3.4vw,2.2rem) 1.2rem 1.4rem;border-radius:2.2rem;background:var(--glass);border:var(--glass-b);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);position:relative;overflow:hidden}
.edu-card::before{content:"";position:absolute;inset:0;background:radial-gradient(22rem 14rem at 50% 38%,rgba(22,165,121,.14),transparent 70%);pointer-events:none}
.edu-card>*{position:relative}
.edu-kicker{display:block;font-size:.7rem;letter-spacing:.34em;font-weight:700;color:var(--g700)}
.edu-card h2{font-size:clamp(1.5rem,3vw,2rem);margin:.15rem 0 .1rem;letter-spacing:.06em}
.edu-sub{font-size:.98rem;color:var(--ink-3)}
.edu-orb{position:relative;display:grid;place-items:center;width:8.6rem;height:8.6rem;margin:1.3rem auto 1.2rem;border-radius:50%;border:3px solid #eafff8;cursor:pointer;padding:0;
  background:radial-gradient(circle at 32% 24%,#8fe6c6 0%,#16a579 30%,#15805a 74%,#0a4430 100%);box-shadow:0 18px 36px -10px rgba(4,36,24,.6), inset 0 -10px 18px rgba(0,0,0,.25), inset 0 4px 8px rgba(255,255,255,.6);color:#fff;transition:transform .25s}
.edu-orb:hover{transform:scale(1.05)}
.edu-orb::before{content:"";position:absolute;left:10%;right:10%;top:4%;height:44%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.03));pointer-events:none}
.edu-orb .core svg{width:3.1rem;height:3.1rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.edu-orb .ring{position:absolute;inset:-.5rem;border-radius:50%;border:3px solid var(--g400);opacity:0;animation:pulse 2.8s ease-out infinite;pointer-events:none}
.edu-orb .ring.r2{animation-delay:1.4s;border-color:var(--b400)}
.edu-langs{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap}
.edu-langs .chip{min-width:6rem;padding:.5rem 1.1rem;font-size:.98rem}
.edu-note{display:block;margin-top:1rem;font-size:.78rem;color:var(--ink-3)}


/* ---------- hub: 3×3 glass tiles ---------- */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.6vw,1rem);max-width:44rem;margin:0 auto}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:6.6rem;padding:.8rem .4rem;border-radius:1.5rem;text-align:center;cursor:pointer;color:var(--b800);
  background:var(--glass);border:var(--glass-b);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .3s;-webkit-tap-highlight-color:transparent;font:inherit}
.tile::before{content:"";position:absolute;left:12%;right:12%;top:-30%;height:60%;border-radius:50%;background:radial-gradient(closest-side,rgba(22,165,121,.22),transparent);z-index:-1}
.tile svg{width:2rem;height:2rem;color:var(--g700);stroke-width:1.8}
.tile:nth-child(odd) svg{color:var(--b600)}
.tile b{font-size:.92rem;line-height:1.25;font-weight:600}
.tile:hover{transform:translateY(-3px);box-shadow:var(--glass-sh),0 18px 30px -14px rgba(22,165,121,.5);color:var(--g800)}
.tile:active{transform:scale(.97)}
.tile.install-btn{display:flex}
@media (max-width:420px){.tile{min-height:5.9rem}.tile b{font-size:.84rem}}

/* ---------- portal feature strip: glass cards ---------- */
.feat-wrap::before{background:linear-gradient(90deg,var(--ground),transparent)!important}.feat-wrap::after{background:linear-gradient(270deg,var(--ground),transparent)!important}

/* ---------- footer: light glass address cards ---------- */
.site-footer.lx-foot{margin-top:2rem;color:var(--ink);background:none!important;border:0!important;border-image:none!important;padding:2rem 0 1rem}
.site-footer.lx-foot::before{display:none}
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.fc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;padding:1.3rem 1rem 1.2rem;border-radius:1.8rem;background:var(--glass);border:var(--glass-b);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.fc .ico{width:3rem;height:3rem;margin-bottom:.3rem}
.fc b{font-family:var(--font-h);font-size:1.1rem;color:var(--b900);letter-spacing:0}
.fc p{color:var(--ink-2);font-size:1rem;line-height:1.55;margin-bottom:.5rem}
.fc p a{color:var(--b800);font-weight:700;font-size:1.25rem}
.gbtns{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center}
.gbtn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:99px;font-weight:600;font-size:.92rem;color:var(--b800)!important;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(240,222,180,.85));border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff, 0 8px 16px -8px rgba(4,36,24,.55);text-decoration:none!important;font-family:inherit}
.gbtn svg{width:1.05rem;height:1.05rem;color:var(--g700)}
.gbtn:hover{color:var(--g800)!important;box-shadow:inset 0 1px 0 #fff, 0 10px 20px -8px rgba(22,165,121,.6)}
.site-footer.lx-foot .install-btn{display:none}.site-footer.lx-foot .install-btn.show{display:inline-flex}
.flinks{display:flex;flex-wrap:wrap;gap:.4rem .5rem;justify-content:center;margin:1.4rem 0 .6rem}
.flinks a{padding:.3rem .8rem;border-radius:99px;font-size:.9rem;color:var(--b800)!important;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.9)}
.flinks a:hover{background:#fff;text-decoration:none!important}
.site-footer.lx-foot .foot-bot{border-top:1px solid rgba(10,86,60,.18);color:var(--ink-3);padding:1rem 0 1.2rem;justify-content:space-between}
.site-footer.lx-foot .foot-bot a{color:var(--b700)}
.fb-brand{display:inline-flex;align-items:center;gap:.5rem}.fb-brand img{border-radius:50%}
@media (max-width:820px){.fcards{grid-template-columns:1fr}.fc{padding:1.1rem}}

/* ---------- inner-page banner: photo + deep-green/amber veil ---------- */
.phero .inner{background:linear-gradient(135deg,rgba(10,86,60,.5) 0%,rgba(10,110,80,.34) 50%,rgba(6,110,83,.46) 100%),var(--ph,none) center/cover!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:2rem!important;min-height:13rem;display:flex;flex-direction:column;justify-content:center;box-shadow:0 26px 46px -28px rgba(4,36,24,.7)!important}
.phero .inner::before{display:none}
.phero h1{text-shadow:0 2px 20px rgba(4,36,24,.6)!important}
.phero p{text-shadow:0 1px 8px rgba(4,36,24,.6)}
.phero{padding-top:.4rem}

/* ---------- cards on inner pages: glass ---------- */
.card.flat,.card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* chat panel + FAB keep their look; make the FAB a little calmer */
.edu-fab .orb::after{animation-duration:30s}
@media (prefers-reduced-motion:reduce){.lx-slide,.lx-slide.prev{filter:none!important;transform:none!important}.edu-orb .ring{animation:none}.cf-card{transition:none}}

/* no sideways scroll from the coverflow side cards / marquee */
html,body{overflow-x:clip}
main{overflow-x:clip}
.lx-sec{overflow-x:clip;overflow-y:visible}

/* ==========================================================================
   SILVER controls (owner order 2026-10-04): every button / glossy control = soft metallic silver,
   dark-green text + icon. Deep-green gradient stays only on icon badges (.ico/.mono), table heads, steps, tags.
   Palette: ground #f5e8cc · silver #fdfcfa→#c9c9c5 · ink/green #0a3a28 · forest #0f5a3f · emerald #066e53 · gold #c9a24a
   ========================================================================== */
.btn,.btn.green,.arrow,.arrow.g,.chat-in .send,.vx-mic,.modal-x,.msg.user .b,.nav a.active,.tabbar a.active,.chip.on,.chip:hover,.chip.g.on,.chip.g:hover,.svc-tab.on,.vx-toggle.on{
  background:var(--grad-s)!important;color:var(--silver-ink)!important;border:1px solid var(--silver-line)!important;text-shadow:0 1px 0 rgba(255,255,255,.75)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(90,92,86,.22),0 8px 16px -8px rgba(6,48,31,.45)!important}
.btn:hover,.btn.green:hover,.arrow:hover,.chat-in .send:hover,.vx-mic:hover,.modal-x:hover{filter:brightness(1.04);box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(90,92,86,.22), 0 12px 22px -8px rgba(6,48,31,.5) !important}
.btn svg,.arrow svg,.vx-mic svg,.chat-in .send svg,.chip.on svg,.tabbar a.active svg,.svc-tab.on svg{color:var(--silver-ink)!important;stroke:currentColor}
.btn::before{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.05))}
.arrow::before{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0))}
.btn.ghost,.btn.glass{background:linear-gradient(180deg,#fffdf8,#efeeea)!important;color:var(--silver-ink)!important;border:1.5px solid var(--g700)!important;text-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.ghost:hover,.btn.glass:hover{color:var(--g800)!important}
/* active nav / tab: silver + emerald ring so it stays distinguishable from the plain silver controls */
.nav a.active,.tabbar a.active,.chip.on,.svc-tab.on,.vx-toggle.on{box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(90,92,86,.22), 0 6px 14px -6px rgba(6,48,31,.5) !important}
/* default (idle) chips / tabs / small toggles = light silver */
.chip,.chip.g,.svc-tab,.vx-toggle,.vx-stop,.vx-lang,.gbtn{background:linear-gradient(180deg,#fffdf8,#e9e8e4);color:var(--silver-ink);border-color:var(--silver-line)}
.gbtn{border:1px solid var(--silver-line);box-shadow:inset 0 1px 0 #fff,0 8px 16px -8px rgba(6,48,31,.45)}
.flinks a{background:linear-gradient(180deg,#fffdf8,#ecebe7);border:1px solid var(--silver-line);color:var(--silver-ink)!important}
.flinks a:hover{background:#fff}
.edu-orb,.edu-fab .orb{border-color:#f3f1ec}
/* gold hairlines / focus */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.site-header .nav-in{border-color:rgba(201,162,74,.45)}
.card{background:linear-gradient(rgba(255,253,246,.88),rgba(253,247,232,.84)) padding-box,linear-gradient(135deg,var(--b700),var(--gold),var(--g700)) border-box}
.eyebrow{color:var(--g800)}
.lx-frame{border-color:rgba(255,246,222,.9)}
.tbl td{border-top:1px solid rgba(15,90,63,.2);background:rgba(255,253,246,.8)}
.note{background:rgba(255,250,236,.75)}

/* silver round controls: burger, chat FAB, big mic orb (deep-green glyphs on silver) */
.burger{background:var(--grad-s)!important;border:1px solid var(--silver-line)!important;box-shadow:inset 0 1px 0 #fff,0 6px 12px -6px rgba(6,48,31,.45)!important}
.burger span,.burger span::before,.burger span::after{background:var(--silver-ink)!important}
.edu-fab .orb,.edu-orb{background:radial-gradient(circle at 32% 24%,#ffffff 0%,#ecebe8 34%,#c9c9c5 74%,#a9aaa5 100%)!important;color:var(--silver-ink)!important;
  box-shadow:0 12px 28px rgba(6,48,31,.45), inset 0 -8px 14px rgba(90,92,86,.3), inset 0 3px 6px rgba(255,255,255,.9) !important}
.edu-fab .orb .nm,.edu-fab .orb .mic,.edu-orb .core svg{color:var(--silver-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.8);filter:none}
.edu-fab .orb::after{border-color:rgba(10,58,40,.35)}
.edu-fab .orb::before,.edu-orb::before{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.05))}
.card{background:linear-gradient(rgba(255,250,237,.86),rgba(252,243,221,.82)) padding-box,linear-gradient(135deg,var(--b700),var(--gold),var(--g700)) border-box}

/* footer contact: THREE compact cards (প্রধান কেন্দ্র · শহর অফিস · ফোন) always in ONE row — smaller than v3, tight type on phones */
.site-footer.lx-foot .lx-head{margin-bottom:.8rem}.site-footer.lx-foot .lx-head h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.fcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;max-width:56rem;margin:0 auto}
.fc{gap:.2rem;padding:.8rem .6rem .75rem;border-radius:1.3rem}
.fc .ico{width:2.1rem;height:2.1rem;margin-bottom:.15rem}.fc .ico svg{width:1.05rem;height:1.05rem}
.fc b{font-size:.95rem}
.fc p{font-size:.84rem;line-height:1.4;margin-bottom:.35rem}
.fc p a{font-size:.95rem}
.fc .gbtn{padding:.3rem .7rem;font-size:.78rem;gap:.3rem}.fc .gbtn svg{width:.85rem;height:.85rem}
.fc .gbtns{gap:.3rem}
@media (max-width:820px){.fcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.fc{padding:.6rem .3rem .6rem;border-radius:1rem}}
@media (max-width:520px){
  .fc .ico{width:1.7rem;height:1.7rem}.fc .ico svg{width:.9rem;height:.9rem}
  .fc b{font-size:.74rem}.fc p{font-size:.66rem;line-height:1.35;margin-bottom:.3rem;overflow-wrap:anywhere}.fc p a{font-size:.68rem}
  .fc .gbtn{padding:.22rem .4rem;font-size:.62rem;gap:.2rem}.fc .gbtn svg{width:.7rem;height:.7rem}
  .fc .gbtns{flex-direction:column;align-items:stretch;gap:.25rem}
}


/* ==========================================================================
   v5 (2026-10-04): service slider = compact silver-glossy cards with a filbert accent, whole card is the link;
   শিক্ষাবিদ + অনলাইন লাইব্রেরি cards share one silver/filbert style; logo under the slideshow.
   Filbert ramp: #8a6a3f (text) · #b08a5b · #c9a57a (light) — no blue, no green slabs.
   ========================================================================== */
:root{--fil1:#8a6a3f;--fil2:#b08a5b;--fil3:#c9a57a;--fil-grad:linear-gradient(135deg,#8a6a3f 0%,#c9a57a 45%,#a47d4e 100%)}
.cf{height:clamp(19rem,45vw,27rem)}
.cf-card{max-width:60vw;border-radius:1.4rem;background:linear-gradient(180deg,#fdfcfa,#e4e2dc);border:1px solid #fff;
  box-shadow:0 22px 38px -24px rgba(90,66,36,.55)}
.cf-card::before{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 28%,rgba(120,88,52,0) 62%,rgba(120,88,52,.2) 100%)}
.cf-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s ease}
.cf-card:hover::after,.cf-card:focus-visible::after{transform:translateX(120%)}
.cf-card.on{box-shadow:0 26px 44px -22px rgba(90,66,36,.6), 0 0 30px rgba(201,165,122,.35)}
.cf-cap{left:.4rem;right:.4rem;bottom:.4rem;grid-template-columns:auto 1fr auto;grid-template-areas:"i t g" "i s g";column-gap:.55rem;row-gap:0;padding:.45rem .55rem;border-radius:1rem;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(233,231,226,.92));border:1px solid rgba(176,138,91,.5);box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(90,66,36,.55)}
.cf-cap .ico{width:2rem;height:2rem;background:linear-gradient(180deg,#fffdf8,#e6e2da)!important;color:var(--fil1)!important;border:1px solid rgba(176,138,91,.55);box-shadow:inset 0 1px 0 #fff}
.cf-cap .ico svg{width:1rem;height:1rem}
.cf-cap b{font-size:.95rem;color:var(--fil1);line-height:1.25}
.cf-cap small{font-size:.72rem;color:#8d7a62;line-height:1.25}
.cf-go{grid-area:g;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;color:var(--fil1);background:linear-gradient(180deg,#fff,#e6e2da);border:1px solid rgba(176,138,91,.65);box-shadow:inset 0 1px 0 #fff;transition:transform .3s,background .3s,color .3s}
.cf-go svg{width:.9rem;height:.9rem}
.cf-card:hover .cf-go,.cf-card:focus-visible .cf-go,.cf-card:active .cf-go{transform:translateX(3px);background:linear-gradient(180deg,#d7b88f,#b08a5b);color:#fff}
.cf-dots button{background:rgba(176,138,91,.34)}.cf-dots button.on{background:linear-gradient(90deg,var(--fil3),var(--fil2))}
@media (max-width:700px){.cf{height:min(21rem,80vw)}.cf-card{max-width:66vw}.cf-cap b{font-size:.88rem}.cf-cap small{font-size:.66rem}.cf-cap .ico{width:1.8rem;height:1.8rem}}

/* শিক্ষাবিদ + লাইব্রেরি cards: light silver glossy, filbert edge */
.edu-card{background:linear-gradient(180deg,#fffefb 0%,#f1efea 55%,#e3e1db 100%);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff, 0 26px 44px -26px rgba(90,66,36,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:22.5rem;position:relative;overflow:hidden}
.edu-card::before{background:radial-gradient(22rem 14rem at 50% 38%,rgba(232,196,128,.28),transparent 70%)}
.edu-card h2{background:var(--fil-grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.02em}
.edu-sub{color:#8d7a62}
.edu-orb .ring,.edu-orb .ring.r2{border-color:var(--fil3)}
.lib-card{display:flex;margin-top:1.4rem;text-decoration:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.lib-card:hover,.lib-card:focus-visible{transform:translateY(-4px);box-shadow:inset 0 1px 0 #fff, 0 32px 50px -26px rgba(90,66,36,.65), 0 0 34px rgba(232,196,128,.4)}
.lib-orb{position:relative;display:grid;place-items:center;width:8.6rem;height:8.6rem;margin:1.1rem auto 1rem;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 32% 24%,#ffffff 0%,#f4f2ed 36%,#d9d7d1 78%,#bdbab3 100%);border:3px solid #f6f4ef;box-shadow:0 18px 34px -12px rgba(90,66,36,.55), inset 0 -8px 16px rgba(120,100,70,.18)}
.lib-ico{width:84%;height:84%;overflow:visible}
.lib-shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);transform:translateX(-130%);animation:libshine 5s ease-in-out infinite}
@keyframes libshine{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
.lib-glow{transform-origin:60px 54px;animation:libglow 4.2s ease-in-out infinite}
@keyframes libglow{0%,100%{opacity:.8;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
.lib-rays{animation:librays 4.2s ease-in-out infinite}
@keyframes librays{0%,100%{opacity:.45}50%{opacity:.95}}
.lib-pg{animation:libfloat 3.6s ease-in-out infinite}.lib-pg2{animation-delay:-1.8s}
@keyframes libfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(6deg)}}
.lib-star{transform-origin:60px 36px;animation:libstar 3s ease-in-out infinite}
@keyframes libstar{0%,100%{opacity:.7;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.lib-go{display:grid;place-items:center;width:2.5rem;height:2.5rem;margin:.2rem auto .1rem;border-radius:50%;color:var(--fil1);background:linear-gradient(180deg,#fff,#e6e2da);border:1px solid rgba(176,138,91,.7);box-shadow:inset 0 1px 0 #fff,0 8px 16px -8px rgba(90,66,36,.5);transition:transform .3s,background .3s,color .3s}
.lib-go svg{width:1.2rem;height:1.2rem;animation:libnudge 2.2s ease-in-out infinite}
@keyframes libnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.lib-card:hover .lib-go{background:linear-gradient(180deg,#d7b88f,#b08a5b);color:#fff}
@media (prefers-reduced-motion:reduce){.lib-shine,.lib-glow,.lib-rays,.lib-pg,.lib-star,.lib-go svg{animation:none}}

/* logo under the slideshow */
.lx-mark{width:clamp(7.5rem,22vw,10.5rem)!important;height:auto!important;aspect-ratio:1/1!important;border:0!important;border-radius:50%!important;box-shadow:0 14px 28px -10px rgba(90,66,36,.4)!important;background:none!important;margin-bottom:.9rem!important;filter:none!important}
.lx-intro{padding-top:2.6rem}
.lx-en{letter-spacing:.22em}
/* gold section titles with ornament (portal) */
.lx-head.gold{text-align:center}.lx-head.gold h2{background:var(--fil-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:.02em}
.lx-head.gold .orn{margin:.5rem auto 0;color:var(--fil2)}

/* ==========================================================================
   FINAL (2026-10-04): framed hero · header brand · silver link-cards
   ========================================================================== */
/* ---- hero picture frame: thin gold outer line → silver/filbert mat with bevel → image window → ledge. Nothing sits ON the image. ---- */
.lx-picture{--mp:clamp(.75rem,2.4vw,1.55rem);position:relative;margin:0 auto;padding:.3rem;border-radius:1.15rem;
  width:min(100%,calc((100vh - 11.4rem) * 1.7778 + 2 * var(--mp) + .6rem));width:min(100%,calc((100svh - 11.4rem) * 1.7778 + 2 * var(--mp) + .6rem));
  background:linear-gradient(135deg,#f8e8b0 0%,#cfa84e 30%,#8f6a2c 55%,#e6cb80 80%,#b88a3a 100%);
  box-shadow:0 34px 50px -30px rgba(70,50,20,.7),0 12px 22px -12px rgba(70,50,20,.45),inset 0 1px 0 rgba(255,255,255,.7)}
.lx-mat{position:relative;padding:var(--mp);border-radius:.85rem;
  background:linear-gradient(145deg,#fefdfb 0%,#e4e2dc 45%,#f4f2ed 70%,#d4cfc4 100%);
  box-shadow:inset 0 0 0 1px rgba(176,138,91,.7),inset 0 0 0 3px rgba(255,255,255,.8),inset 0 6px 14px -4px rgba(110,84,50,.45)}
/* the image window: a bevelled opening (lines are drawn OUTSIDE the picture, on the mat) */
.lx-frame{width:100%!important;margin:0!important;border:0!important;border-radius:.35rem!important;background:#1d1a14;
  box-shadow:0 0 0 1px #8a6a3f,0 0 0 3px #f6f3ec,0 0 0 4px rgba(176,138,91,.85),0 3px 10px 4px rgba(90,66,36,.35)!important}
/* corner ornaments (8-point Arabic star) sit in the mat corners, never over the picture */
.lx-picture::before,.lx-picture::after,.lx-mat::before,.lx-mat::after{content:"";position:absolute;z-index:3;pointer-events:none;width:calc(var(--mp) - .12rem);height:calc(var(--mp) - .12rem);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 6.4L21 4.5l-2.9 6.4L23 12l-4.9 1.1 2.9 6.4-6.4-2.9L12 23l-2.6-6.4L3 19.5l2.9-6.4L1 12l4.9-1.1L3 4.5l6.4 2.9z' fill='%23c9a24a' stroke='%238f6a2c' stroke-width='.8' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23fff3c4'/%3E%3C/svg%3E") center/contain no-repeat}
.lx-picture::before{content:none}.lx-picture::after{content:none}
.lx-mat::before{top:calc(.06rem);left:.06rem}.lx-mat::after{top:.06rem;right:.06rem}
.lx-ledge{position:relative;height:clamp(.7rem,1.8vw,1.1rem);margin:.15rem -.9rem 0;border-radius:.35rem .35rem .6rem .6rem;
  background:linear-gradient(180deg,#f2eee6 0%,#cdb690 22%,#a98355 70%,#7a5a35 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 22px -12px rgba(70,50,20,.6),0 4px 6px rgba(70,50,20,.25)}
.lx-ledge::before,.lx-ledge::after{content:"";position:absolute;bottom:-.55rem;width:34%;height:.6rem;border-radius:0 0 .5rem .5rem;background:linear-gradient(180deg,#8d6a40,#6b4d2b);box-shadow:0 8px 12px -6px rgba(70,50,20,.5)}
.lx-ledge::before{left:6%}.lx-ledge::after{right:6%}
/* bottom corner stars via two extra ornaments on the picture wrapper */
.lx-mat{--st:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 6.4L21 4.5l-2.9 6.4L23 12l-4.9 1.1 2.9 6.4-6.4-2.9L12 23l-2.6-6.4L3 19.5l2.9-6.4L1 12l4.9-1.1L3 4.5l6.4 2.9z' fill='%23c9a24a' stroke='%238f6a2c' stroke-width='.8' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23fff3c4'/%3E%3C/svg%3E")}
.lx-picture>.lx-ledge+*{display:none}
.lx-mat{background-image:var(--st),var(--st),linear-gradient(145deg,#fefdfb 0%,#e4e2dc 45%,#f4f2ed 70%,#d4cfc4 100%);background-repeat:no-repeat;background-size:calc(var(--mp) - .12rem) calc(var(--mp) - .12rem),calc(var(--mp) - .12rem) calc(var(--mp) - .12rem),auto;background-position:left .06rem bottom .06rem,right .06rem bottom .06rem,0 0}
.lx-hero{padding-bottom:1.2rem}
.lx-intro{padding-top:2.2rem}

/* ---- header brand: logo + dark-green name (compact) + small English line ---- */
.logo{gap:.55rem;background:none!important;box-shadow:none!important;border:0!important}
.logo img{width:2.55rem!important;height:2.55rem!important;border-radius:50%!important;box-shadow:none!important}
.logo b{font-size:.94rem!important;font-weight:700;color:#0a4430!important;letter-spacing:0;line-height:1.2}
.logo small{font-size:.6rem!important;color:#8a6a3f!important;font-weight:600;letter-spacing:.07em;line-height:1.25}

/* ---- navigation tiles / link-cards: light silver glossy, filbert accent, refined hover + tap ---- */
.tile{background:linear-gradient(180deg,#fffefb 0%,#efede8 55%,#dedcd6 100%)!important;border:1px solid var(--silver-line,#8f918b)!important;color:var(--fil1,#8a6a3f)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(90,92,86,.18),0 10px 20px -12px rgba(90,66,36,.5)!important;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.tile::before{background:radial-gradient(closest-side,rgba(232,196,128,.3),transparent)!important}
.tile::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);transition:left .7s ease;pointer-events:none}
.tile svg,.tile:nth-child(odd) svg{color:var(--fil2,#b08a5b)!important}
.tile b{color:#5a4224}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:#b08a5b!important;box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(90,92,86,.18), 0 18px 28px -12px rgba(138,106,63,.6) !important}
.tile:hover::after,.tile:focus-visible::after{left:130%}
.tile:active{transform:translateY(0) scale(.97);box-shadow:inset 0 2px 6px rgba(90,66,36,.25),0 4px 8px -6px rgba(90,66,36,.4)!important}
.btn,.gbtn,.flinks a,.chip{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,filter .25s}
.btn:hover,.gbtn:hover,.flinks a:hover,.chip:hover{transform:translateY(-2px)}
.btn:active,.gbtn:active,.flinks a:active,.chip:active{transform:translateY(0) scale(.97)}
.flinks a:hover{box-shadow:0 8px 16px -8px rgba(90,66,36,.5)}
.nav a:not(.active):hover{background:linear-gradient(180deg,#fffdf8,#ecebe7);border-color:var(--silver-line,#8f918b);color:var(--fil1,#8a6a3f)}
@media (prefers-reduced-motion:reduce){.tile,.btn,.gbtn,.chip,.tile::after{transition:none}}
.lx-head.gold .orn::before,.lx-head.gold .orn::after{background:linear-gradient(90deg,transparent,#c9a57a,#b08a5b)}

/* ==========================================================================
   NO LINES (owner order 2026-10-04): no outlines / borders / rings around buttons, cards, chips, icons, FABs, tabs, nav items.
   Separation = soft shadow, glow and gloss only. (The hero picture frame is kept on purpose.) Tables keep their row dividers.
   ========================================================================== */
body *:not(.lx-picture):not(.lx-mat):not(.lx-frame):not(table):not(thead):not(tbody):not(tr):not(th):not(td):not(hr),
body *:not(.lx-picture):not(.lx-mat):not(.lx-frame)::before,body *:not(.lx-picture):not(.lx-mat):not(.lx-frame)::after{
  border:0!important;border-image:none!important;outline:0!important}
/* rings / dashed halos around round icons + FABs */
.edu-orb .ring,.edu-fab .pulse,.edu-fab .orb::after,.hero-art::before{display:none!important}
.hero-art .frame,.hero-art{border:0!important}
/* text fields: no outline, a soft inset well instead */
input,textarea,select{border:0!important;outline:0!important;background:linear-gradient(180deg,#f7f3ea,#fffdf8)!important;box-shadow:inset 0 2px 6px rgba(90,66,36,.2),inset 0 0 0 0 transparent,0 1px 0 rgba(255,255,255,.9)!important}
/* keyboard focus: soft glow only (no line) */
:focus{outline:0!important}
:focus-visible{outline:0!important;filter:drop-shadow(0 0 7px rgba(201,165,122,.95)) drop-shadow(0 0 2px rgba(255,255,255,.9))}
input:focus-visible,textarea:focus-visible,select:focus-visible{filter:none;box-shadow:inset 0 2px 6px rgba(90,66,36,.2),0 0 14px 2px rgba(201,165,122,.7)!important}
/* hairline separators that were drawn as borders get a soft shadow instead */
.site-footer.lx-foot .foot-bot{box-shadow:0 -10px 14px -14px rgba(90,66,36,.35)}
a,.nav a,.nav a:hover,.nav a.active{text-decoration:none}

/* ===== v6: HERO 3D FLOAT (replaces the framed look — no lines, no mat, no ornaments) ===== */
.lx-hero{perspective:1500px;perspective-origin:50% 40%}
.lx-picture{--mp:0rem;--rx:0deg;--ry:0deg;--lift:0px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:1.6rem!important;
  width:min(100%,calc((100vh - 11.4rem) * 1.7778));width:min(100%,calc((100svh - 11.4rem) * 1.7778));
  transform-style:preserve-3d;transform:translate3d(0,var(--lift),0) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.lx-picture.tilting{transition:transform .12s linear}
.lx-picture::before,.lx-picture::after{content:"";position:absolute;pointer-events:none;display:block!important}
/* faint contact shadow under the picture */
.lx-picture::after{left:6%;right:6%;bottom:-.9rem;height:1.6rem;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(60,40,15,.5),transparent);filter:blur(7px);transform:translateZ(-30px)}
.lx-picture::before{content:none!important}
.lx-mat{padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:inherit!important}
.lx-mat::before,.lx-mat::after{content:none!important;display:none!important}
.lx-ledge{display:none!important}
.lx-frame{border:0!important;border-radius:1.6rem!important;background:#1d1a14;transform:translateZ(18px);
  box-shadow:0 2px 4px rgba(70,48,18,.22),0 10px 18px -4px rgba(70,48,18,.28),0 28px 44px -12px rgba(70,48,18,.38),0 60px 80px -30px rgba(70,48,18,.45)!important}
/* thin soft top-light gloss */
.lx-frame::after{content:"";position:absolute;left:0;right:0;top:0;height:26%;pointer-events:none;z-index:5;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0))}
@media (hover:hover) and (pointer:fine){.lx-picture:hover{--lift:-5px}.lx-picture:hover .lx-frame{box-shadow:0 3px 6px rgba(70,48,18,.22),0 16px 26px -6px rgba(70,48,18,.3),0 40px 60px -14px rgba(70,48,18,.4),0 80px 100px -34px rgba(70,48,18,.45)!important}}
@media (prefers-reduced-motion:reduce),(hover:none){.lx-picture{transform:none!important;transition:none;will-change:auto}.lx-hero{perspective:none}}
.lx-hero{padding-bottom:2rem}

/* ===== v6: CONTACT CARDS — three compact, glossy silver cards in one row, no lines ===== */
.no-edu-fab .edu-fab,.no-edu-fab .edu-tip{display:none!important}
.fcards{align-items:stretch}
.fc{position:relative;isolation:isolate;overflow:hidden;border:0!important;color:inherit;text-decoration:none;cursor:default;
  background:linear-gradient(180deg,#fffefb 0%,#f1efe9 52%,#e0ddd4 100%)!important;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 #fff,inset 0 -8px 14px -10px rgba(120,92,50,.35),0 2px 3px rgba(90,66,36,.12),0 14px 24px -10px rgba(90,66,36,.45)!important;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.fc::before{content:"";position:absolute;left:-10%;right:-10%;top:-45%;height:75%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,165,122,.35),transparent);z-index:-1;display:block!important}
a.fc{cursor:pointer}
a.fc:hover,.fc:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 3px 5px rgba(90,66,36,.14),0 20px 30px -10px rgba(90,66,36,.5)!important}
a.fc:active{transform:scale(.97)}
.fc .ico{background:radial-gradient(circle at 32% 24%,#fffdf6,#e8d7a6 60%,#c9a24a)!important;color:#6b4d1f!important;box-shadow:inset 0 1px 0 #fff,0 6px 12px -4px rgba(120,86,30,.55)!important}
.fc .ico.g{background:radial-gradient(circle at 32% 24%,#fffefb,#e6e5df 60%,#b9b8b0)!important;color:#0a4430!important}
.fc .ico svg{color:inherit;stroke:currentColor}
.fc b{color:#0a4430}
.fc p{color:#5a4224}
.fc p a{color:#0a4430}
.fc .gbtn{min-height:2.1rem;font-weight:700;color:#6b4d1f!important;background:linear-gradient(180deg,#fffdf6,#ecd9a2 55%,#d4b266)!important;box-shadow:inset 0 1px 0 #fff,0 8px 14px -6px rgba(120,86,30,.6)!important}
.fc .gbtn svg{color:#6b4d1f}
.fc .gbtn.call{color:#0a4430!important;background:linear-gradient(180deg,#fffefb,#e9e8e3 55%,#cfcec6)!important}
.fc .gbtn.call svg{color:#0a4430}
.fc .gbtn.wa-btn{color:#0a4430!important;background:linear-gradient(180deg,#fffefb,#e9e8e3 55%,#cfcec6)!important}
.fc .gbtn .wa{width:1.05rem;height:1.05rem;flex:none}
.fc .gbtn.wa-btn svg.wa{color:#1fa855}
.fc .gbtn:hover{filter:brightness(1.04)}
.fc .gbtn:active{transform:scale(.95)}
.fc-phone .gbtns{display:flex;gap:.4rem;justify-content:center;width:100%}
.fc-phone .gbtns .gbtn{flex:1 1 0}
@media (max-width:560px){.fc-phone .gbtns{flex-direction:column}.fc{padding:.6rem .35rem .65rem}.fc .gbtn{min-height:2rem}}
.chat-head .av{background:none!important;box-shadow:0 3px 10px rgba(0,0,0,.28)!important;border:0!important;overflow:hidden;padding:0}
.chat-head .av img{width:100%;height:100%;display:block;border-radius:50%}
.foot-bot .install-btn{margin-right:.5rem}

/* ===== v6: APP MODE (PWA) — safe areas, no bounce, silver/golden tab bar, no lines ===== */
.nav-in{top:calc(.7rem + env(safe-area-inset-top))}
.lx-hero{padding-top:calc(5.4rem + env(safe-area-inset-top))}
body:not([data-page=home]) main{padding-top:calc(var(--nav-h) + 1.7rem + env(safe-area-inset-top))}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
html{-webkit-tap-highlight-color:transparent}
@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){
  html,body{overscroll-behavior-y:none}
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,select,.post-body,.msg .b,[contenteditable]{-webkit-user-select:text;user-select:text}
  .site-footer .foot-bot [data-install]{display:none!important}
}
.tabbar{background:linear-gradient(180deg,rgba(255,254,250,.96),rgba(236,233,225,.94))!important;box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(90,66,36,.12),0 18px 34px -12px rgba(70,48,18,.55)!important;
  padding-left:max(.3rem,env(safe-area-inset-left));padding-right:max(.3rem,env(safe-area-inset-right))}
.tabbar a{color:#6b4d1f;transition:transform .2s,box-shadow .25s,background .25s}
.tabbar a svg{color:#8a6a3f}
.tabbar a.active{background:linear-gradient(180deg,#fffdf6,#ecd9a2 55%,#d4b266)!important;color:#0a4430!important}
.tabbar a.active svg{color:#0a4430!important}
.tabbar a:active{transform:scale(.93)}
.install-btn{background:linear-gradient(180deg,#fffefb,#e9e8e3 55%,#cfcec6)!important;color:#0a4430!important;box-shadow:inset 0 1px 0 #fff,0 8px 14px -6px rgba(90,66,36,.5)!important}

/* ===== v7: SERVICES coverflow — ghost fix: off-stage cards (|offset| > 1) fade to nothing and are hidden; nothing shows past the visible set ===== */
.cf{overflow-x:clip;overflow-y:visible;overflow-clip-margin:0}
.cf .cf-card{opacity:min(calc(1 - var(--a)*.32),calc((1.75 - var(--a))*2.2))!important;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .5s,filter .6s,visibility 0s}
.cf .cf-card.off{visibility:hidden;pointer-events:none!important}


/* ===== v8: online-library icon (screen + open book + globe + download cue) ===== */
.lib-glow{transform-origin:60px 52px}
.lib-float{animation:libbob 4.6s ease-in-out infinite;transform-origin:60px 70px}
@keyframes libbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.lib-badge{transform-origin:center;transform-box:fill-box;animation:libbadge 3.8s ease-in-out infinite}
.lib-dl{animation-delay:-1.9s}
@keyframes libbadge{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.lib-ico{filter:drop-shadow(0 6px 8px rgba(70,48,18,.35))}
.lib-pg{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.lib-float,.lib-badge{animation:none}}

/* ===== v9: hero sits a little lower — comfortable gap under the floating header ===== */
.lx-hero{--hx:clamp(1.1rem,3.6vw,1.5rem);padding-top:calc(5.4rem + var(--hx) + env(safe-area-inset-top))}
@media (min-width:700px){.lx-hero{--hx:clamp(1.6rem,2.6vw,2.5rem);padding-top:calc(6rem + var(--hx) + env(safe-area-inset-top))}}
.lx-picture{width:100%;max-width:100%}
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .lx-picture{width:min(100%,calc((100vh - 11.4rem - var(--hx)) * 1.7778))}
}

/* ===== v10: MOBILE STABILITY + SCROLL PERFORMANCE (phones / touch / installed PWA) ===== */
html,body{overflow-x:clip;max-width:100%;overscroll-behavior-x:none}
body{min-height:100vh;min-height:100svh}
.lx-hero,.cf,.feat-wrap{touch-action:pan-y}
/* below-the-fold sections are only laid out/painted when near the viewport */
#hub,#portal-home,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 640px}
@media (hover:none),(max-width:820px){
  /* no backdrop blur layers while scrolling (the biggest cost on phones) — surfaces are already near-opaque cream/silver */
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .nav-in{background:linear-gradient(180deg,#fffcf3,#faf0da)!important}
  .tabbar{background:linear-gradient(180deg,#fffefa,#ece9e1)!important;transform:translateZ(0)}
  /* slideshow: opacity + transform only (no animated blur filter) */
  .lx-slide,.lx-slide.on,.lx-slide.prev{filter:none!important;transition:opacity var(--fade,2200ms) cubic-bezier(.42,0,.58,1),transform var(--kb,6700ms) linear}
  .lx-slide.prev{transition:transform var(--kb,6700ms) linear,opacity 0s}
  .lx-slide,.lx-slide.on,.lx-slide.prev{will-change:auto}.lx-slide.on{will-change:opacity}
  .lx-hero{perspective:none}.lx-picture{transform:none!important;will-change:auto;transition:none}
  /* fixed decorative layers: stable size (no resize when the address bar hides), no mask repaint */
  body::before,body::after{inset:auto;left:0;top:0;right:0;height:100lvh;-webkit-mask-image:none;mask-image:none}
  body::before{opacity:.6}
  /* reveal: opacity only */
  .reveal{transform:none;transition:opacity .45s}
  /* sticky :hover on touch must not move things under the finger */
  .fc:hover,a.fc:hover,.tile:hover,.btn:hover,.gbtn:hover,.chip:hover,.edu-card:hover,.lib-card:hover,.edu-orb:hover,.nav a:hover,.arrow:hover,.cf-card:hover,.lx-picture:hover,.post-card:hover,.card:hover{translate:none!important}
  .fc:hover,a.fc:hover,.tile:hover,.btn:hover,.gbtn:hover,.chip:hover,.edu-card:hover,.lib-card:hover,.edu-orb:hover,.arrow:hover,.post-card:hover,.card:hover{transform:none!important}
  /* keep infinite decorative animations light: pause the small SVG ones, keep the calm shine */
  .lib-badge,.lib-float{animation:none}
}
@media (hover:none){html,body{overscroll-behavior-y:none}}

/* ===== v10b: comfortable tap targets for small inline links (hit area grows, look stays) ===== */
.fc p a{display:inline-block;padding:.55rem .6rem;margin:-.55rem -.6rem}
.foot-bot a{display:inline-block;padding:.65rem .6rem;margin:-.65rem -.3rem}
.crumbs a,.crumb a,nav[aria-label*="breadcrumb" i] a,.page-hero a[href="index.html"]{display:inline-block;padding:.6rem .5rem;margin:-.6rem -.5rem}
@media (min-width:2200px){html{font-size:clamp(28px,.7vw + 12px,44px)}}
a[href^="tel:"]:not(.fc){display:inline-block;padding:.5rem .3rem;margin:-.5rem -.3rem}

/* ===== v11: PHONE FIXES — (3) no sideways pan / iOS zoom-out, (1,4) menu above everything, (2) four contact cards, (5) services images always visible ===== */
/* (3) html AND body hidden (iOS ignores one alone, and does not honour overflow:clip on the root); header is fixed (a hidden-overflow body can't host sticky) */
html,body{overflow-x:hidden!important;max-width:100%;width:100%;position:relative;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom}
main{overflow-x:hidden;overflow-y:visible;position:relative;z-index:0}
.lx-sec{overflow-x:hidden}
.site-header{position:fixed!important;left:0;right:0;top:0;width:100%;z-index:2000!important;transform:none!important;-webkit-transform:none!important}
.nav-in{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* the coverflow track: REAL clipping (works on every iOS) with vertical room for the card shadows */
.cf{--cfh:clamp(19rem,45vw,27rem);--cfpt:1.5rem;--cfpb:3.2rem;box-sizing:content-box;height:var(--cfh)!important;padding:var(--cfpt) 0 var(--cfpb);margin:calc(var(--cfpt) * -1) 0 calc(var(--cfpb) * -1);overflow:hidden!important;overflow-clip-margin:0;contain:layout paint}
.cf .cf-card{top:var(--cfpt)!important;height:var(--cfh)!important}
@media (max-width:700px){.cf{--cfh:min(21rem,80vw)}}
.cf-nav{position:relative;z-index:1}
/* (5)+(1): flat, filter-free coverflow on touch/phones (iOS blanks overflow:hidden+radius+filter+3D layers); hero stays a flat layer under the header */
@media (hover:none),(pointer:coarse),(max-width:820px){
  .cf{perspective:none!important;-webkit-perspective:none}
  .cf .cf-card{filter:none!important;-webkit-filter:none!important;transform:translateX(calc(-50% + var(--o)*60%)) scale(calc(1 - var(--a)*.15))!important;-webkit-transform:translateX(calc(-50% + var(--o)*60%)) scale(calc(1 - var(--a)*.15))!important;transform-style:flat;opacity:1!important;backface-visibility:visible}
  .cf .cf-card.off{opacity:0!important}
  .cf .cf-card:not(.on):not(.off){opacity:.72!important}
  .cf-card img{opacity:1!important;visibility:visible!important;-webkit-transform:none;transform:none}
  .lx-hero,.lx-picture,.lx-mat,.lx-frame{perspective:none!important;transform-style:flat!important;-webkit-transform-style:flat!important}
  .lx-frame{transform:none!important}
  .lx-picture::after{transform:none!important}
}
.lx-hero{position:relative;z-index:0;isolation:isolate}
/* (1)(4) burger menu = clean floating silver panel above everything, with a dim backdrop; tab bar tucks away */
.nav a .ni{display:none}
.nav-backdrop{position:fixed;inset:0;z-index:1990;background:rgba(48,32,10,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s;-webkit-tap-highlight-color:transparent}
.nav-backdrop.show{opacity:1;visibility:visible;transition:opacity .25s}
body.menu-open{overflow:hidden!important;touch-action:none}
body.menu-open .tabbar{transform:translateY(160%)!important;opacity:0;pointer-events:none;transition:transform .3s,opacity .2s}
@media (max-width:1180px){
  .nav{position:fixed!important;left:.7rem!important;right:.7rem!important;top:calc(var(--nav-h) + 1.1rem + env(safe-area-inset-top))!important;bottom:auto;z-index:2001;
    display:grid!important;grid-template-columns:1fr;gap:.55rem!important;padding:.9rem!important;margin:0!important;max-height:calc(100dvh - var(--nav-h) - 2.2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100svh - var(--nav-h) - 2.2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border:0!important;border-radius:1.8rem!important;
    background:linear-gradient(180deg,#fffefb,#f0ede5)!important;box-shadow:inset 0 1px 0 #fff,0 4px 8px rgba(70,48,18,.18),0 34px 60px -14px rgba(40,26,8,.6)!important;
    transform:translateY(-14px) scale(.98);opacity:0;visibility:hidden;pointer-events:none!important;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s,visibility 0s .28s}
  .nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto!important;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s}
  .nav a{display:flex!important;align-items:center;gap:.9rem;min-height:3.2rem;padding:.55rem .9rem!important;font-size:1.05rem!important;font-weight:700;white-space:normal;border:0!important;border-radius:1.2rem!important;color:#0a4430!important;
    background:linear-gradient(180deg,#fffefb 0%,#ecebe6 55%,#dcdad2 100%)!important;box-shadow:inset 0 1px 0 #fff,0 8px 14px -8px rgba(70,48,18,.5)!important;text-shadow:0 1px 0 rgba(255,255,255,.8)!important}
  .nav a .ni{display:grid;place-items:center;flex:none;width:2.35rem;height:2.35rem;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fffdf6,#ecd9a2 60%,#c9a24a);color:#6b4d1f;box-shadow:inset 0 1px 0 #fff,0 5px 10px -4px rgba(120,86,30,.6)}
  .nav a .ni svg{width:1.15rem;height:1.15rem;color:inherit}
  .nav a.active{background:linear-gradient(180deg,#fffdf6,#f0dca4 55%,#d9b86c)!important;color:#0a4430!important;text-shadow:none!important}
  .nav a:active{transform:scale(.98)}
}
/* (2) FOUR contact cards: 4 in a row on desktop, neat 2x2 on phones/tablets, equal size, no overlap */
.fcards{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(.7rem,1.4vw,1.2rem)!important;max-width:64rem;margin:0 auto;align-items:stretch}
.fcards .fc{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:.3rem;min-width:0;padding:1rem .7rem 1rem;border-radius:1.5rem;text-decoration:none}
.fcards .fc p{flex:1 1 auto;font-size:.88rem;line-height:1.45;margin:0 0 .5rem;overflow-wrap:anywhere;color:#5a4224}
.fcards .fc b{font-size:1.02rem}
.fcards .fc .ico{width:2.6rem;height:2.6rem;margin-bottom:.2rem}.fcards .fc .ico svg{width:1.2rem;height:1.2rem}
.fcards .fc .gbtn{width:100%;max-width:11rem;min-height:2.4rem;padding:.4rem .6rem;font-size:.9rem;justify-content:center;white-space:nowrap}
.fcards .fc .gbtn svg{width:1rem;height:1rem}
.fc-wa .ico.wa-ico{background:radial-gradient(circle at 32% 24%,#ffffff,#e9f6ee 60%,#cfe9da)!important}
.fc-wa .ico svg.wa{width:1.35rem;height:1.35rem}
@media (max-width:820px){.fcards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.8rem!important}.fcards .fc{padding:1rem .6rem}.fcards .fc p{font-size:.85rem}}
@media (max-width:340px){.fcards .fc .gbtn{font-size:.8rem;padding:.35rem .4rem}}
@media (min-width:2200px){.fcards{max-width:84rem}}
.fcards{grid-auto-rows:1fr}
main .card.flat a:not(.btn):not(.gbtn):not(.chip){display:inline-block;padding:.45rem 0;margin:-.45rem 0}

/* ===== v12: contact cards — identical size everywhere: phones 2x2, tablets (601–1100px) 3 + 1 centred, desktop/TV one row of 4 ===== */
.fcards{grid-auto-rows:1fr}
.fcards .fc{width:auto;min-width:0}
@media (min-width:601px) and (max-width:1100px){
  .fcards{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:1rem!important;max-width:46rem}
  .fcards .fc{grid-column:span 2}
  .fcards .fc:nth-child(4){grid-column:3 / span 2}
}
@media (max-width:600px){.fcards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.fcards .fc{grid-column:auto}.fcards .fc:nth-child(4){grid-column:auto}}
@media (min-width:1101px){.fcards{grid-template-columns:repeat(4,minmax(0,1fr))!important}.fcards .fc,.fcards .fc:nth-child(4){grid-column:auto}}

:root{--bh-ok:1}


/* ===== v13: smooth open + educator language chips ===== */
.lx-slide,.lx-slide.on,.lx-slide.prev{transition:none}
.lx-hero.lx-ready .lx-slide{
  transition:opacity var(--fade,2200ms) cubic-bezier(.42,0,.58,1),filter var(--fade,2200ms) cubic-bezier(.42,0,.58,1),transform var(--kb,6700ms) linear}
.lx-hero.lx-ready .lx-slide.on{transition:opacity var(--fade,2200ms) cubic-bezier(.42,0,.58,1),filter var(--fade,2200ms) cubic-bezier(.42,0,.58,1),transform var(--kb,6700ms) linear}
.lx-hero.lx-ready .lx-slide.prev{transition:filter var(--fade,2200ms) cubic-bezier(.42,0,.58,1),transform var(--kb,6700ms) linear,opacity 0s}
.edu-langs{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap;margin-top:1.05rem}
.edu-lang{
  appearance:none;-webkit-appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.95rem;
  min-width:7.2rem;padding:.62rem 1.15rem .58rem;border-radius:99px;border:0!important;outline:0!important;
  color:#0a4430;background:linear-gradient(180deg,#fffefb,#e9e8e3 55%,#d4d2cb);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(90,92,86,.18),0 8px 16px -8px rgba(90,66,36,.45);
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,filter .22s;-webkit-tap-highlight-color:transparent}
.edu-lang .el-ico{width:1.15rem;height:1.15rem;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 24%,#fffdf6,#ecd9a2 60%,#c9a24a);color:#6b4d1f;font-size:.7rem;font-weight:800;line-height:1;
  box-shadow:inset 0 1px 0 #fff,0 3px 6px -2px rgba(120,86,30,.5)}
.edu-lang.on{
  background:linear-gradient(180deg,#fffdf6,#f0dca4 52%,#d9b86c)!important;color:#0a4430!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(120,86,30,.22),0 10px 18px -8px rgba(138,106,63,.55),0 0 22px rgba(232,196,128,.35)!important}
.edu-lang:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.edu-lang{transition:none}}