/* Fly Qibla v4.2 — ONE cohesive light olive-gold family (gold mixed with black, then tinted with white).
   No separate black / gold blocks: every surface, button, text and photo grade is a step of the same --o* ramp. */
@font-face{font-family:"Hind Siliguri";font-weight:400;font-display:swap;src:url(../fonts/HindSiliguri-bn-400.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"Hind Siliguri";font-weight:500 700;font-display:swap;src:url(../fonts/HindSiliguri-bn-600.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"Noto Serif Bengali";font-weight:400 700;font-display:swap;src:url(../fonts/NotoSerifBengali-bn.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"Noto Serif Bengali";font-weight:100 900;font-display:swap;src:url(../fonts/NotoSerifBengali-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Cormorant Garamond";font-weight:300 700;font-display:swap;src:url(../fonts/CormorantGaramond-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(../fonts/Inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
:root{
  /* palette: olive-gold ramp (light → soft dark olive-charcoal) */
  --o50:#f8f5e6;--o100:#f1ecd3;--o150:#ebe4c4;--o200:#e3dbb4;--o300:#d3c995;--o400:#bcae6e;--o500:#9c8f4e;--o600:#7a6f3a;--o700:#5e5630;--o800:#443f26;--o900:#2f2c1a;
  /* accent: light glossy olive-gold */
  --gold-hi:#fbf4cf;--gold-1:#eadd9b;--gold-2:#d6c676;--gold-3:#c4b05e;--gold-deep:#7a6f3a;
  --ink:var(--o900);--ink2:var(--o800);--ink3:#6b6538;--ink4:#8e8656;
  --line:rgba(94,86,48,.2);--line2:rgba(94,86,48,.36);
  --sh1:0 1px 2px rgba(68,63,38,.06),0 10px 26px -14px rgba(68,63,38,.26);
  --sh2:0 2px 4px rgba(68,63,38,.06),0 28px 56px -28px rgba(68,63,38,.42);
  --serif:"Noto Serif Bengali","Cormorant Garamond",Georgia,serif;
  --sans:"Hind Siliguri","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Cormorant Garamond","Noto Serif Bengali",Georgia,serif;
  --r:1.6rem;--hh:3.7rem;
  --gloss:linear-gradient(180deg,#fbf4cf 0%,#eadd9b 34%,#d6c676 68%,#c4b05e 100%);
  --gloss-soft:linear-gradient(180deg,#fdf9e2 0%,#f1e8b8 45%,#e2d58f 100%);
  --glass:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.26) 58%,rgba(211,201,149,.3)),rgba(241,236,211,.42);
  --btn-sh:inset 0 1.5px 0 rgba(255,255,255,.92),inset 0 -2px 5px rgba(122,111,58,.26),0 0 0 1px rgba(156,143,78,.5),0 12px 22px -12px rgba(94,86,48,.6);
  --glass-sh:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(156,143,78,.16),0 16px 32px -20px rgba(68,63,38,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--sans);color:var(--ink);background:linear-gradient(180deg,var(--o50),var(--o100));line-height:1.7;font-size:1.02rem;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--gold-deep);text-decoration-color:rgba(122,111,58,.4);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.3;margin:0;color:var(--o800)}
p{margin:0 0 1rem}
.skip{position:absolute;left:-999px;top:0;background:var(--o100);color:var(--o800);padding:.6rem 1rem;z-index:99}.skip:focus{left:0}
.ic{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:min(72rem,100% - 2.4rem);margin-inline:auto}
.wrap.narrow{width:min(46rem,100% - 2.4rem)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--o500);outline-offset:3px;border-radius:.4rem}
.hidden{display:none!important}
.sec{padding:4.6rem 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.8rem;font:600 .72rem var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.9rem}
.eyebrow::before,.eyebrow::after{content:"";width:2rem;height:1px;background:linear-gradient(90deg,transparent,var(--o400))}
.eyebrow::after{transform:scaleX(-1)}
.fine{font-size:.86rem;color:var(--ink3)}
.demo-tag{display:inline-block;font:600 .7rem var(--sans);letter-spacing:.06em;padding:.16rem .6rem;border-radius:99px;border:1px dashed var(--o500);color:var(--gold-deep);background:rgba(255,255,255,.55);vertical-align:middle}
.note{border:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(235,228,196,.7));border-radius:1.1rem;padding:.9rem 1.1rem;font-size:.93rem;color:var(--ink2)}
.note b{color:var(--ink)}
.note.warn{border-left:4px solid var(--o500)}
.head{text-align:center;margin-bottom:2.2rem}
.h2{font-size:clamp(1.7rem,4.6vw,2.5rem)}

/* ============ glossy buttons (all light olive-gold) ============ */
.btn,.fbtn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.78rem 1.6rem;border-radius:99px;border:0;font:600 1rem var(--sans);cursor:pointer;text-decoration:none;min-height:3rem;line-height:1.2;color:var(--o900);transition:transform .22s,box-shadow .25s,filter .25s;-webkit-tap-highlight-color:transparent}
.btn::before,.gb::before{content:"";position:absolute;z-index:-1;left:2px;right:2px;top:2px;height:50%;border-radius:inherit;border-bottom-left-radius:60% 40%;border-bottom-right-radius:60% 40%;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.08));pointer-events:none}
.btn::after,.gb::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);transition:left .7s ease}
.btn:hover::after,.gb:hover::after{left:130%}
.btn.gold,.btn.ink,.gb{background:var(--gloss);box-shadow:var(--btn-sh)}
.btn.ink{background:var(--gloss-soft)}
.btn.gold:hover,.btn.ink:hover{transform:translateY(-2px);filter:saturate(1.06) brightness(1.02)}
.btn.gold:active,.btn.ink:active{transform:translateY(0)}
.btn.line{background:var(--glass);color:var(--o800);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.line:hover{background:rgba(255,255,255,.8);transform:translateY(-2px)}
.btn.sm{padding:.45rem 1.05rem;min-height:2.4rem;font-size:.92rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
.btn .ic{width:1.15em;height:1.15em}
.btn.stop{background:linear-gradient(180deg,#efe6bd,#d9cc8a);color:var(--o900);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),0 0 0 2px var(--o600),0 12px 22px -12px rgba(94,86,48,.6)}
/* round glossy icon button */
.gb{position:relative;isolation:isolate;overflow:hidden;display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:0;cursor:pointer;color:var(--o800);flex:none;text-decoration:none;transition:transform .22s,filter .25s;padding:0}
.gb .ic{width:1.3rem;height:1.3rem;stroke-width:1.8}
.gb:hover{transform:translateY(-2px) scale(1.04)}
.gb.dark{background:var(--glass);box-shadow:var(--glass-sh),0 0 0 1px rgba(156,143,78,.4);color:var(--o700);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gb.sm{width:2.3rem;height:2.3rem}.gb.sm .ic{width:1.05rem;height:1.05rem}
.gb.lg{width:3.6rem;height:3.6rem}.gb.lg .ic{width:1.6rem;height:1.6rem}

/* ============ header: floating light glass ============ */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:max(.6rem,env(safe-area-inset-top));pointer-events:none}
.hdr-in{pointer-events:auto;width:min(76rem,100% - 1.2rem);margin:0 auto;height:var(--hh);padding:0 .55rem 0 .7rem;display:flex;align-items:center;gap:.8rem;border-radius:99px;background:rgba(248,245,230,.4);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 16px 36px -22px rgba(68,63,38,.55);transition:background .35s,border-color .35s}
.hdr.solid .hdr-in{background:rgba(248,245,230,.84)}
.brand{display:flex;align-items:center;flex:1 1 0;min-width:0;min-height:2.45rem;text-decoration:none;color:var(--o800)}
/* logo slot: <img class="brand-logo"> is rendered only when FQ_CONFIG.logo is set; otherwise this spot stays empty */
.brand-logo{display:block;height:2.45rem;width:auto;max-width:9.5rem;object-fit:contain}
.ftr-logo{display:block;height:3.6rem;width:auto;max-width:12rem;object-fit:contain;margin:0 auto .7rem}
.nav{display:none;margin:0 auto;gap:.1rem;flex:none}
.nav a{padding:.45rem .95rem;border-radius:99px;text-decoration:none;color:var(--o800);font-weight:500;font-size:.95rem;transition:background .2s,color .2s}
.nav a:hover{background:rgba(255,255,255,.65);color:var(--o900)}
.hdr-act{margin-left:auto;display:flex;gap:.45rem;align-items:center;justify-content:flex-end}
@media(min-width:62rem){.hdr-act{flex:1 1 0}}
.hdr .gb{width:2.6rem;height:2.6rem}
.btn-menu i{display:block;width:1.05rem;height:1.6px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .25s}
.btn-menu{display:inline-flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.btn-menu[aria-expanded=true] i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}.btn-menu[aria-expanded=true] i:nth-child(2){opacity:0}.btn-menu[aria-expanded=true] i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:49;background:radial-gradient(40rem 24rem at 80% 0,rgba(214,198,118,.35),transparent 70%),rgba(248,245,230,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:calc(var(--hh) + 2rem) 1.4rem 2rem;overflow:auto}
.drawer[hidden]{display:none}
.drawer a{display:flex;align-items:center;justify-content:space-between;padding:1rem .4rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--o800);font:600 1.15rem var(--serif)}
.drawer a::after{content:"›";color:var(--o500);font-size:1.4rem}
@media(min-width:62rem){.nav{display:flex}.btn-menu{display:none!important}}

/* ============ HERO: daytime photos, floating glass lettering (no box) ============ */
.hero{position:relative;height:100vh;height:100svh;min-height:34rem;overflow:hidden;background:var(--o200);display:grid;place-items:center;isolation:isolate}
.hslide{position:absolute;inset:0;opacity:0;filter:blur(22px);transform:translateZ(0);transition:opacity 1.2s ease,filter 1.2s ease;z-index:0;will-change:opacity,filter}
.hslide.on{opacity:1;filter:blur(0);z-index:1}
.hslide img{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;object-position:50% 45%;animation:kb 20s ease-in-out infinite alternate;will-change:transform}
.hslide.md img{animation-direction:alternate-reverse}
#hs0 img{object-position:50% 45%}#hs1 img{object-position:50% 50%}#hs2 img{object-position:50% 35%}#hs3 img{object-position:50% 40%}#hs4 img{object-position:50% 30%}#hs5 img{object-position:50% 45%}#hs6 img{object-position:50% 50%}
@keyframes kb{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.12) translate3d(-1.4%,-1%,0)}}
.hero::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(44rem 21rem at 50% 44%,rgba(52,45,21,.2),transparent 74%),linear-gradient(180deg,rgba(52,45,21,.1) 0%,rgba(52,45,21,.0) 30%,rgba(68,63,38,.04) 62%,rgba(248,245,230,.1) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:16%;z-index:2;background:linear-gradient(180deg,rgba(248,245,230,0),var(--o50) 96%);pointer-events:none}
.glass{position:relative;z-index:3;width:min(34rem,100% - 2rem);padding:0;text-align:center;margin-bottom:0;animation:glassIn 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes glassIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.glass h1{position:relative;font-size:clamp(3.2rem,15vw,5.6rem);line-height:1.18;padding:0 .04em .1em;display:inline-block;color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(253,249,226,.86) 38%,rgba(240,229,168,.7) 66%,rgba(214,198,118,.9) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.6px rgba(255,252,238,.8);letter-spacing:-.005em;filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.5)) drop-shadow(0 0 1.2px rgba(68,63,38,.85)) drop-shadow(0 3px 3px rgba(68,63,38,.5)) drop-shadow(0 12px 26px rgba(47,44,26,.5))}
.glass h1::after{content:attr(data-t) / "";position:absolute;left:0;right:0;top:0;padding:inherit;z-index:1;pointer-events:none;color:transparent;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.9) 46%,transparent 58%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,55%{background-position:130% 0}100%{background-position:-60% 0}}
.glass .en{display:block;font:600 clamp(.85rem,3vw,1.1rem) var(--disp);letter-spacing:.7em;padding-left:.7em;color:rgba(255,253,240,.96);text-transform:uppercase;margin-top:.1rem;text-shadow:0 0 2px rgba(68,63,38,.8),0 2px 3px rgba(68,63,38,.55),0 6px 18px rgba(47,44,26,.5)}
.quick{position:relative;padding:.4rem 0 clamp(3rem,6vw,4.4rem);background:var(--o150)}
/* quick icons — glossy glass tiles, a section below হাজি ট্র্যাকিং (above footer); 7 tiles: 4+3 centred on phones, one row from tablet up */
.qk{--g:clamp(.5rem,1.6vw,.9rem);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);width:min(60rem,100% - 1.6rem);margin:0 auto}
.qk .qi{flex:0 0 calc((100% - 3 * var(--g)) / 4)}
@media(min-width:48rem){.qk .qi{flex-basis:calc((100% - 6 * var(--g)) / 7)}}
.qi{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;min-height:4.7rem;padding:.65rem .15rem .55rem;border-radius:1.35rem;text-decoration:none;color:var(--o800);font:600 .74rem/1.2 var(--sans);text-align:center;min-width:0;
  border:1px solid rgba(255,255,255,.78);background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:var(--glass-sh);isolation:isolate;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
.qi::before{content:"";position:absolute;left:8%;right:8%;top:3px;height:42%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none;z-index:-1}
.qi .gb{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;overflow:visible;color:var(--gold-deep);display:grid;place-items:center}
.qi .gb::before,.qi .gb::after{display:none}
.qi .gb .ic{width:1.7rem;height:1.7rem;stroke-width:1.5}
.qi:hover{transform:translateY(-3px);border-color:rgba(214,198,118,.95);box-shadow:var(--glass-sh),0 0 1.6rem -2px rgba(226,205,120,.7)}
.qi:hover .gb{transform:none}
.qi span.l{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:0 .1rem}
@media(min-width:40rem){.qi{min-height:5.6rem;font-size:.9rem;gap:.4rem;border-radius:1.5rem}.qi .gb .ic{width:2rem;height:2rem}}
@media(max-width:24rem){.qi{font-size:.68rem;min-height:4.3rem}.qi .gb .ic{width:1.5rem;height:1.5rem}}

/* ============ SHOWCASE: compact fanned slideshow (light) ============ */
.showcase{position:relative;padding:clamp(4.6rem,9vw,6.4rem) 0 3rem;background:linear-gradient(180deg,var(--o50),var(--o100));overflow:hidden}
.showcase::before{content:"";position:absolute;inset:0;background:radial-gradient(34rem 18rem at 50% 42%,rgba(255,255,255,.7),transparent 70%),radial-gradient(26rem 14rem at 12% 90%,rgba(214,198,118,.28),transparent 70%);pointer-events:none}
.sc-head{position:relative;text-align:center;padding:0 1rem;margin-bottom:.4rem}
.sc-head h2{font-size:clamp(2.1rem,6.4vw,3.4rem);line-height:1.25;background:linear-gradient(180deg,var(--o700),var(--o600) 55%,var(--o500));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em}
.sc-head p{margin:.2rem 0 0;font:500 clamp(1rem,2.6vw,1.2rem) var(--sans);color:var(--o600)}
.cf{--cw:clamp(8.6rem,40vw,15rem);position:relative;height:calc(var(--cw) * 1.42 + 3.4rem);touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.cf-track{position:absolute;inset:0}
.cf-card{position:absolute;left:50%;top:1.4rem;width:var(--cw);height:calc(var(--cw) * 1.42);margin-left:calc(var(--cw) / -2);border-radius:1.9rem;overflow:hidden;background:var(--o100);cursor:pointer;text-decoration:none;color:var(--o800);box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 2px rgba(156,143,78,.28),0 30px 44px -26px rgba(68,63,38,.55);transition:transform .8s cubic-bezier(.22,.8,.2,1),opacity .6s,filter .6s;-webkit-tap-highlight-color:transparent}
.cf-card img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.cf-card.active:hover img.bg{transform:scale(1.07)}
.cf-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,252,238,.16),rgba(248,245,230,0) 40%,rgba(248,245,230,.34));pointer-events:none}
.cf-ic{position:absolute;top:.8rem;right:.8rem;z-index:3}
.cf-arr{position:absolute;top:50%;z-index:20;margin-top:-1.5rem;display:none}
.cf-arr.l{left:max(.6rem,calc(50% - 21rem))}.cf-arr.r{right:max(.6rem,calc(50% - 21rem))}
@media(min-width:44rem){.cf-arr{display:inline-grid}}
.cf-dots{display:flex;gap:.45rem;justify-content:center;margin-top:.6rem}
.cf-dots button{width:.55rem;height:.55rem;border-radius:99px;border:0;background:var(--o400);opacity:.5;cursor:pointer;padding:0;transition:all .35s}
.cf-dots button.on{width:2rem;opacity:1;background:linear-gradient(90deg,var(--o500),var(--gold-2))}

/* ============ MUALLIM + TRACKING: stacked, same seamless page background, no panels ============ */
.duo{position:relative;padding:1.4rem 0 clamp(3rem,6vw,4.4rem);display:flex;flex-direction:column;gap:clamp(1.4rem,3.5vw,2.4rem);background:linear-gradient(180deg,var(--o100),var(--o100) 55%,var(--o150));overflow:hidden;isolation:isolate}
.duo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(34rem 26rem at 50% 18%,rgba(255,255,255,.62),transparent 70%),radial-gradient(26rem 20rem at 8% 62%,rgba(188,174,110,.22),transparent 70%),radial-gradient(28rem 22rem at 94% 86%,rgba(214,198,118,.26),transparent 70%)}
.mu,.tk{position:relative;width:min(100% - 1.6rem,40rem);margin:0 auto;padding:clamp(1.8rem,4.5vw,2.8rem) clamp(1rem,4vw,2rem) clamp(1.6rem,4vw,2.4rem);text-align:center;display:flex;flex-direction:column;align-items:center;background:none;border:1.5px solid rgba(156,143,78,.62);border-radius:clamp(1.8rem,5vw,2.6rem);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);overflow:hidden}
.mu h2,.tk h2{font-size:clamp(2.3rem,7vw,3.6rem);line-height:1.25;margin-bottom:.5rem;background:linear-gradient(180deg,var(--o700),var(--o600) 55%,var(--o500));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em}
.mu h2{margin-bottom:.8rem;font:600 clamp(1.35rem,3.4vw,1.8rem)/1.4 "Noto Serif Bengali","Cormorant Garamond",Georgia,serif;letter-spacing:.09em;padding-left:.09em;background:linear-gradient(180deg,var(--o700),var(--o500));-webkit-background-clip:text;background-clip:text;color:transparent}
.mu h2::after{content:"";display:block;width:2.6rem;height:1px;margin:.35rem auto 0;background:linear-gradient(90deg,transparent,var(--o500),transparent)}
.rule{display:block;width:2.75rem;height:1px;background:var(--o500);margin:0 auto .5rem;opacity:.7}
.fq-n{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
.fq-langs{display:inline-flex;width:min(100%,17rem);gap:.7rem;padding:0}
.fq-lang{flex:1 1 0;padding:.55rem .4rem;border-radius:99px;border:1px solid rgba(255,255,255,.8);background:var(--glass);color:var(--o700);font:600 1.05rem var(--sans);cursor:pointer;transition:all .25s;position:relative;isolation:isolate;overflow:hidden;box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fq-lang.on{background:var(--gloss);border-color:transparent;color:var(--o900);box-shadow:var(--btn-sh)}
.fq-micwrap{position:relative;width:11rem;height:11rem;display:grid;place-items:center;margin:.6rem 0 .4rem;border-radius:50%;border:1px solid rgba(156,143,78,.4);background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.7),rgba(255,255,255,.14) 72%);box-shadow:0 0 0 .75rem rgba(255,255,255,.2),0 0 0 1.5rem rgba(255,255,255,.1),0 22px 44px -24px rgba(68,63,38,.5)}
.fq-micwrap::before,.fq-micwrap::after{content:"";position:absolute;inset:1.1rem;border-radius:50%;border:1.5px solid rgba(156,143,78,.55);opacity:0}
.fq-micwrap.listening::before{animation:ring 2.2s ease-out infinite}.fq-micwrap.listening::after{animation:ring 2.2s ease-out 1.1s infinite}
@keyframes ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.fq-halo{position:absolute;inset:.5rem;border-radius:50%;background:radial-gradient(closest-side,rgba(226,205,120,.4),transparent 72%);animation:breathe 4s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.06);opacity:1}}
.fq-mic{position:relative;isolation:isolate;overflow:hidden;z-index:2;width:7rem;height:7rem;border-radius:50%;border:0;cursor:pointer;color:var(--o900);background:radial-gradient(circle at 34% 24%,#fffbe3 0%,#f0e4a6 32%,#d6c676 68%,#b9a550 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.85),inset 0 -8px 16px rgba(122,111,58,.35),0 0 0 2px rgba(255,255,255,.6),0 0 0 6px rgba(156,143,78,.16),0 22px 36px -16px rgba(94,86,48,.7);transition:transform .25s;display:grid;place-items:center;padding:0}
.fq-mic::before{content:"";position:absolute;z-index:-1;left:10%;right:10%;top:4%;height:44%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.04))}
.fq-mic:hover{transform:scale(1.05)}.fq-mic:active{transform:scale(.95)}
.fq-mic svg{width:3rem;height:3rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}
.fq-mic.listening{animation:pulse 1.3s ease-out infinite}
@keyframes pulse{0%{box-shadow:inset 0 3px 0 rgba(255,255,255,.85),inset 0 -8px 16px rgba(122,111,58,.35),0 0 0 2px rgba(255,255,255,.6),0 0 0 0 rgba(214,198,118,.7),0 22px 36px -16px rgba(94,86,48,.7)}100%{box-shadow:inset 0 3px 0 rgba(255,255,255,.85),inset 0 -8px 16px rgba(122,111,58,.35),0 0 0 2px rgba(255,255,255,.6),0 0 0 2rem rgba(214,198,118,0),0 22px 36px -16px rgba(94,86,48,.7)}}
.fq-micwrap.listening .fq-mic{transform:scale(calc(1 + var(--lv,0)*.14))}
.fq-micwrap.busy .fq-mic{filter:saturate(.85) brightness(.97)}
.fq-tools{display:flex;gap:.7rem;align-items:center;justify-content:center}
.fq-tool{position:relative;isolation:isolate;overflow:hidden;display:inline-grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid rgba(255,255,255,.8);padding:0;cursor:pointer;color:var(--o700);background:var(--glass);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s}
.fq-tool:hover{transform:translateY(-2px)}
.fq-tool svg{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fq-tool.snd[aria-pressed=true]{background:var(--gloss);color:var(--o900);border-color:transparent;box-shadow:var(--btn-sh)}
.fq-tool.snd[aria-pressed=false] svg{opacity:.55}
.fq-tool.stop{background:var(--gloss);color:var(--o900);border-color:transparent}
.fq-status{min-height:1.5em;margin:0;color:var(--ink3);font-size:.95rem;font-weight:500}
.fq-live{margin:0;min-height:1.5em;padding:.4rem 1rem;border:1px dashed rgba(122,111,58,.5);border-radius:1rem;color:var(--o800);font-family:var(--serif)}
.fq-err{margin:0;padding:.6rem 1rem;border:1px solid var(--line2);border-left:4px solid var(--o500);border-radius:.8rem;color:var(--o800);background:rgba(255,255,255,.6);max-width:32rem;text-align:left;font-size:.92rem}
.fq-reply{width:100%;text-align:left;background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:1.5rem;padding:1.1rem 1.25rem;box-shadow:var(--glass-sh)}
.fq-q{margin:0 0 .5rem;color:var(--gold-deep);font-size:.88rem;font-style:italic}
.fq-a{font-family:var(--serif);font-size:1rem;line-height:1.85;color:var(--o800);max-height:19rem;overflow:auto;padding-right:.4rem;scrollbar-width:thin;scrollbar-color:var(--o400) transparent}
.fq-a strong{color:var(--o700)}.fq-a em{color:var(--ink3);font-size:.88rem}
.fq-a.typing{display:flex;gap:.4rem;padding:.4rem 0}
.fq-a.typing span{width:.45rem;height:.45rem;border-radius:50%;background:var(--o500);animation:dotb 1.1s infinite ease-in-out}
.fq-a.typing span:nth-child(2){animation-delay:.15s}.fq-a.typing span:nth-child(3){animation-delay:.3s}
@keyframes dotb{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
.fq-disc{margin:.7rem 0 0;font-size:.78rem;color:var(--ink3)}
.fq-rp{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;padding:.3rem .85rem .3rem .6rem;border-radius:99px;border:1px solid var(--line2);background:rgba(255,255,255,.6);color:var(--o700);font:500 .85rem var(--sans);cursor:pointer}
.fq-rp svg{width:1rem;height:1rem;fill:currentColor}
.fq-type{display:flex;gap:.5rem;width:100%;max-width:26rem}
.fq-type input{flex:1;min-width:0;padding:.75rem 1.1rem;border-radius:99px;border:1px solid var(--line2);background:rgba(255,255,255,.7);color:var(--o900);font:inherit;outline:none}
.fq-type input::placeholder{color:var(--ink4)}
.fq-type input:focus{border-color:var(--o500);box-shadow:0 0 0 3px rgba(188,174,110,.35)}
.fq-type button{position:relative;isolation:isolate;overflow:hidden;width:3rem;height:3rem;flex:none;border-radius:50%;border:0;background:var(--gloss);color:var(--o900);cursor:pointer;display:grid;place-items:center;box-shadow:var(--btn-sh);padding:0}
.fq-type svg{width:1.15rem;height:1.15rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vx-bar{display:none!important}
/* Tracking — big, glassy, same background as Muallim */
.tk::before{content:"";position:absolute;left:50%;top:0;width:min(46rem,130%);height:100%;transform:translateX(-50%);z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent 78%);pointer-events:none}
.tk .rule{margin-bottom:1.4rem}
.tk-map{position:absolute;left:50%;top:50%;width:min(44rem,150%);height:auto;aspect-ratio:400/420;transform:translate(-50%,-47%);z-index:-1;opacity:.55;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 98%);mask-image:radial-gradient(closest-side,#000 25%,transparent 98%)}
.tk-pinwrap{position:relative;width:clamp(9.5rem,34vw,12rem);aspect-ratio:1;display:grid;place-items:center;margin:.9rem 0 1rem;border-radius:50%;border:1px solid rgba(156,143,78,.42);background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.75),rgba(255,255,255,.14) 72%);box-shadow:0 0 0 .8rem rgba(255,255,255,.2),0 0 0 1.7rem rgba(255,255,255,.1),0 24px 48px -24px rgba(68,63,38,.5)}
.tk-pinwrap::before,.tk-pinwrap::after{content:"";position:absolute;inset:1rem;border-radius:50%;border:1.5px solid rgba(156,143,78,.5);animation:ring 3.2s ease-out infinite;opacity:0}
.tk-pinwrap::after{animation-delay:1.6s}
.tk-pinwrap .gb{width:62%;height:62%;border-radius:50%;box-shadow:inset 0 3px 0 rgba(255,255,255,.85),inset 0 -8px 16px rgba(122,111,58,.35),0 0 0 2px rgba(255,255,255,.6),0 0 0 6px rgba(156,143,78,.16),0 22px 36px -16px rgba(94,86,48,.7);background:radial-gradient(circle at 34% 24%,#fffbe3 0%,#f0e4a6 32%,#d6c676 68%,#b9a550 100%)}
.tk-pinwrap .gb .ic{width:46%;height:46%;stroke-width:1.5}
.tk-pinwrap .gb:hover{transform:none}
.tk-sub{font:500 clamp(1.05rem,2.6vw,1.3rem) var(--serif);color:var(--o700);margin:0 0 1.4rem;max-width:28rem}
.tk-act{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.tk-act .btn{min-height:3.4rem;padding:.8rem 2rem;font-size:1.1rem}
.tk-act .btn.gold{box-shadow:var(--btn-sh),0 0 2.4rem -4px rgba(226,205,120,.9)}
.tk-pin{position:absolute;width:.8rem;height:.8rem;border-radius:50%;background:var(--o500);border:3px solid #fffbe3;animation:pn 2.6s infinite;z-index:-1;opacity:.8}
@keyframes pn{0%{box-shadow:0 0 0 0 rgba(122,111,58,.45)}100%{box-shadow:0 0 0 1.4rem rgba(122,111,58,0)}}

/* ============ footer / contact: Nest Farm card + glass-tile arrangement ============ */
.ftr{position:relative;color:var(--o800);padding:3.2rem 0 1.8rem;background:linear-gradient(180deg,var(--o150),var(--o200))}
.ftr::before{content:"";position:absolute;left:50%;top:-1px;width:9rem;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--o500),transparent)}
.ftr .wrap{position:relative}
.ftr-brand{text-align:center;margin-bottom:1.6rem}
.ftr-brand b{display:block;font:700 1.9rem var(--serif);background:linear-gradient(180deg,var(--o700),var(--o500));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em}
.ftr-brand i{font:600 .68rem var(--disp);letter-spacing:.55em;padding-left:.55em;color:var(--gold-deep);font-style:normal;text-transform:uppercase}
.fc-grid{display:grid;gap:clamp(.8rem,1.8vw,1.2rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:40rem){.fc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fc-grid .fc:last-child{grid-column:1/-1}}
@media(min-width:64rem){.fc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fc-grid .fc:last-child{grid-column:auto}}
.fc{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.15rem 1.1rem 1.1rem;border-radius:1.4rem;text-align:center;background:var(--glass);border:1px solid rgba(255,255,255,.78);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.fc small{font:600 .66rem var(--sans);letter-spacing:.3em;color:var(--gold-deep);text-transform:uppercase}
.fc h3{color:var(--o800);font-size:1.2rem}
.fc p{margin:0;color:var(--o700);font-size:.97rem}
.fgb-row{display:grid;gap:.6rem;width:100%;margin-top:.7rem}
.fgb-row.one{grid-template-columns:minmax(0,10rem);justify-content:center}
.fgb-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* glass tile (same as quick icons) */
.fbtn{flex-direction:column;gap:.25rem;min-height:4.3rem;padding:.6rem .3rem .5rem;border-radius:1.2rem;font-size:.9rem;font-weight:600;color:var(--o800);background:var(--glass);border:1px solid rgba(255,255,255,.8);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fbtn::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:3px;height:42%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.fbtn .ic{width:1.5rem;height:1.5rem;stroke-width:1.5;color:var(--gold-deep)}
.fbtn:hover{transform:translateY(-3px);border-color:rgba(214,198,118,.95)}
.fbtn.dk{}
.fc-ct{margin-top:.2rem;text-align:center}
.fc-ct .ph{font:700 1.15rem var(--sans);letter-spacing:.05em;color:var(--o800);margin:.3rem 0 .1rem}
.fc-ct .em{color:var(--o700);font-size:.95rem;overflow-wrap:anywhere}
.soon{display:inline-block;font:600 .66rem var(--sans);padding:.1rem .55rem;border:1px dashed var(--o500);border-radius:99px;color:var(--gold-deep);margin-left:.4rem;letter-spacing:.06em;vertical-align:middle}
.ftr-links{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;justify-content:center;margin:1.8rem 0 .8rem}
.ftr-links a{color:var(--o700);font-size:.88rem;text-decoration:none}.ftr-links a:hover{color:var(--o900);text-decoration:underline}
.copy{text-align:center;color:var(--ink3);font-size:.8rem;margin:0}

/* modal + toast */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(94,86,48,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal[hidden]{display:none}
.m-box{position:relative;width:min(26rem,100%);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#fffdf0,var(--o50));border-radius:2rem;padding:1.8rem 1.4rem;box-shadow:var(--sh2),0 0 0 1px var(--line2)}
.m-x{position:absolute;top:.8rem;right:.8rem}
.m-box h3{margin-bottom:.4rem}
.swap{background:none;border:0;color:var(--gold-deep);text-decoration:underline;cursor:pointer;margin-top:.8rem;font:inherit}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,2rem);opacity:0;z-index:90;background:var(--gloss);color:var(--o900);padding:.7rem 1.3rem;border-radius:99px;box-shadow:var(--btn-sh),var(--sh2);pointer-events:none;transition:all .3s;max-width:calc(100% - 2rem);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ============ inner pages ============ */
.p-hero{position:relative;padding:calc(var(--hh) + 3rem) 0 2.6rem;text-align:center;overflow:hidden;background:radial-gradient(34rem 18rem at 50% 0,rgba(214,198,118,.4),transparent 70%),linear-gradient(180deg,var(--o200),var(--o50))}
.p-hero::before{content:"";position:absolute;inset:0;background:url(../images/pattern.svg) center/120px;opacity:.22;-webkit-mask:linear-gradient(180deg,#000,transparent 90%);mask:linear-gradient(180deg,#000,transparent 90%)}
.p-hero .wrap{position:relative;z-index:1}
.p-hero .gb.lg{margin-bottom:.9rem}
.p-hero h1{font-size:clamp(1.9rem,6vw,3rem);background:linear-gradient(180deg,var(--o700),var(--o500));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em}
.p-hero .lead{color:var(--ink3);max-width:34rem;margin:.6rem auto 0}
.crumb{display:inline-flex;gap:.4rem;align-items:center;font-size:.9rem;color:var(--gold-deep);text-decoration:none;margin-bottom:.8rem}
.crumb:hover{color:var(--o900)}
.card{background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:var(--r);padding:1.4rem;box-shadow:var(--glass-sh),var(--sh1);position:relative}
.card h3{font-size:1.2rem;margin:0 0 .4rem;display:flex;align-items:center;gap:.6rem}
.card h3 .ic{color:var(--gold-deep);width:1.4em;height:1.4em}
.card>p{color:var(--ink3);font-size:.95rem}
.card.dk{background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(235,228,196,.7));color:var(--o800)}
.card.dk h3,.card.dk b{color:var(--o800)}.card.dk>p{color:var(--ink3)}.card.dk .ic{color:var(--gold-deep)}
.bento{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:48rem){.bento{grid-template-columns:repeat(6,1fr)}.b-span3{grid-column:span 3}.b-span4{grid-column:span 4}.b-span2{grid-column:span 2}.b-span6{grid-column:span 6}}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.gcard{display:flex;flex-direction:column;gap:.5rem;text-align:left;padding:1.3rem;border-radius:var(--r);background:var(--glass);border:1px solid rgba(255,255,255,.8);box-shadow:var(--glass-sh),var(--sh1);cursor:pointer;color:inherit;font:inherit;transition:transform .3s,box-shadow .3s,border-color .3s}
.gcard:hover{transform:translateY(-5px);box-shadow:var(--glass-sh),var(--sh2);border-color:var(--o400)}
.gcard .ico{width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;background:var(--gloss);color:var(--o800);box-shadow:var(--btn-sh)}
.gcard .ico .ic{width:1.5rem;height:1.5rem}
.gcard h3{font-size:1.15rem}.gcard p{font-size:.92rem;color:var(--ink3);margin:0}
.gcard .more{margin-top:auto;padding-top:.5rem;color:var(--gold-deep);font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.pill{display:inline-block;font:600 .74rem var(--sans);padding:.2rem .7rem;border-radius:99px;background:var(--o100);color:var(--gold-deep);border:1px solid var(--line)}
.det{background:linear-gradient(180deg,#fffef6,var(--o50));border:1px solid var(--line);border-radius:2rem;box-shadow:var(--sh2);overflow:hidden}
.det-h{padding:1.6rem 1.4rem;background:radial-gradient(20rem 10rem at 90% 0,rgba(255,255,255,.7),transparent 70%),linear-gradient(160deg,var(--o200),var(--o150));color:var(--o800);display:flex;gap:1rem;align-items:center}
.det-h h2{color:var(--o800);font-size:1.5rem}.det-h .ico{width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;background:var(--gloss);color:var(--o800);flex:none;box-shadow:var(--btn-sh)}
.det-h .pill{background:rgba(255,255,255,.6);color:var(--gold-deep);border-color:var(--line2)}
.det-h .ico .ic{width:1.8rem;height:1.8rem}
.det-b{padding:1.4rem}
.kv{display:grid;gap:.5rem;margin:1rem 0}
.kv div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem .9rem;border-radius:.9rem;background:var(--o100);border:1px solid var(--line);font-size:.95rem}
.kv div span:first-child{color:var(--ink3)}.kv div span:last-child{text-align:right;font-weight:600;color:var(--ink2)}
.price{font:700 1.9rem var(--serif);color:var(--o800)}
.price small{font:600 .74rem var(--sans);display:inline-block;margin-left:.5rem;padding:.15rem .6rem;border-radius:99px;border:1px dashed var(--o500);color:var(--gold-deep);vertical-align:middle}
.seg{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.4rem}
.seg button{padding:.55rem 1.15rem;border-radius:99px;border:1px solid rgba(255,255,255,.8);background:var(--glass);color:var(--ink2);font:600 .95rem var(--sans);cursor:pointer;transition:all .2s;position:relative;isolation:isolate;overflow:hidden;box-shadow:var(--glass-sh)}
.seg button.on{background:var(--gloss);color:var(--o900);border-color:transparent;box-shadow:var(--btn-sh)}
.tier{position:relative;overflow:hidden}
.tier .ph{height:9rem;margin:-1.3rem -1.3rem .3rem;background-size:cover;background-position:center;position:relative}
.tier .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(94,86,48,.45))}
.tier .rk{position:absolute;left:.9rem;bottom:.6rem;z-index:2;color:#fffdf0;font:600 .78rem var(--sans);letter-spacing:.2em;text-shadow:0 1px 4px rgba(47,44,26,.6)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
ul.tick{list-style:none;padding:0;margin:.6rem 0;display:grid;gap:.4rem}
ul.tick li{display:flex;gap:.55rem;align-items:flex-start;font-size:.96rem}ul.tick .ic{color:var(--o500);margin-top:.2rem}
/* forms */
.fld{margin-bottom:.8rem;text-align:left}
.fld label{display:block;font-weight:600;font-size:.88rem;color:var(--ink2);margin-bottom:.3rem}
input,select,textarea{width:100%;padding:.72rem .95rem;border-radius:1rem;border:1px solid var(--line2);background:rgba(255,255,255,.85);color:var(--ink);font:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--o500);box-shadow:0 0 0 3px rgba(188,174,110,.38)}
input[type=checkbox]{width:1.2rem;height:1.2rem;padding:0;accent-color:var(--o500);flex:none}
textarea{min-height:5.4rem;resize:vertical}
.rowf{display:grid;gap:.8rem}@media(min-width:40rem){.rowf{grid-template-columns:1fr 1fr}}
.stars{display:flex;gap:.2rem}
.stars button{background:none;border:0;padding:.1rem;cursor:pointer;color:var(--o300)}
.stars button.on{color:var(--o500)}
.stars .ic{width:1.7rem;height:1.7rem;fill:currentColor;stroke-width:1}
.rv-list{display:grid;gap:.7rem;margin-top:1rem}
.rv-i{background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:1.1rem;padding:.9rem 1rem}
.rv-i small{color:var(--ink3)}.rv-i .stars .ic{width:1rem;height:1rem}
.rv-i button,.post button{background:none;border:0;color:var(--gold-deep);cursor:pointer;font:inherit;font-size:.85rem;text-decoration:underline}
.empty{padding:1rem;text-align:center;color:var(--ink3);border:1px dashed var(--line2);border-radius:1rem;background:rgba(255,255,255,.45);font-size:.93rem}
.post{background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:1.1rem;padding:.85rem 1rem;margin-top:.6rem}
.post small{color:var(--ink3)}.post p{margin:.25rem 0 0}
/* prayer */
.pt{display:grid;gap:1rem}
.pt-top{display:grid;gap:.8rem}@media(min-width:40rem){.pt-top{grid-template-columns:1.2fr 1fr}}
.pt-next,.pt-date{padding:1.1rem 1.3rem;border-radius:1.4rem;background:rgba(255,255,255,.75);border:1px solid var(--line)}
.pt-next{background:radial-gradient(14rem 8rem at 90% 0,rgba(255,255,255,.7),transparent 70%),var(--gloss-soft);color:var(--o800);border:1px solid rgba(156,143,78,.4);box-shadow:var(--glass-sh)}
.pt-next small,.pt-date small{display:block;font:600 .68rem var(--sans);letter-spacing:.25em;color:var(--gold-deep);text-transform:uppercase}
.pt-next b{display:block;font:700 1.45rem var(--serif);color:var(--o800)}.pt-next span{font-size:.9rem;color:var(--o700)}
.pt-date b{display:block;font:700 1.05rem var(--serif)}.pt-date span{font-size:.88rem;color:var(--ink3)}
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}@media(min-width:40rem){.pt-grid{grid-template-columns:repeat(6,1fr)}}
.pt-c{text-align:center;padding:.9rem .3rem;border-radius:1.2rem;background:rgba(255,255,255,.8);border:1px solid var(--line)}
.pt-c b{display:block;font:600 .9rem var(--serif);color:var(--ink2)}.pt-c span{display:block;font:600 1.05rem var(--sans);color:var(--ink)}
.pt-c.now{background:var(--gloss);border-color:transparent;box-shadow:var(--btn-sh)}
.count{font:700 1.05rem var(--serif);color:var(--gold-deep);margin:.2rem 0 .8rem}
.rem-list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.5rem}
.rem-list li{display:flex;justify-content:space-between;gap:.6rem;align-items:center;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:1rem;padding:.6rem .9rem}
.rem-list small{display:block;color:var(--ink3)}
.rem-list button{background:none;border:0;color:var(--gold-deep);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}
.prog{height:.6rem;border-radius:99px;background:var(--o200);overflow:hidden;margin-bottom:.8rem;box-shadow:inset 0 1px 2px rgba(68,63,38,.2)}.prog i{display:block;height:100%;width:0;background:var(--gloss);transition:width .4s}
.chk-g{margin:1.2rem 0 .6rem;padding:1rem 1.1rem;border-radius:1.4rem;background:rgba(255,255,255,.75);border:1px solid var(--line)}
.chk-g h4{font:700 1.02rem var(--serif);color:var(--gold-deep);margin:0 0 .4rem;display:flex;justify-content:space-between;align-items:center}
.chk-g h4 small{font:600 .72rem var(--sans);color:var(--ink3)}
.chk-i{display:flex;gap:.65rem;align-items:flex-start;padding:.32rem 0;font-size:.97rem;cursor:pointer}
.chk-i input{margin-top:.3rem}
.chk-i input:checked+span{color:var(--ink4);text-decoration:line-through;text-decoration-color:var(--o400)}
details.acc{border:1px solid var(--line);border-radius:1.2rem;background:rgba(255,255,255,.7);margin-top:.9rem}
details.acc summary{padding:.95rem 1.2rem;cursor:pointer;font:600 1.02rem var(--serif);list-style:none;display:flex;justify-content:space-between;align-items:center}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";color:var(--o500);font-size:1.4rem;line-height:1}
details.acc[open] summary::after{content:"–"}
details.acc>div{padding:0 1.2rem 1.2rem}
.acct-av{width:5rem;height:5rem;margin:0 auto 1rem}.acct-av .ic{width:2.2rem;height:2.2rem}
/* tracking pages */
.trk-page{padding-bottom:4rem;min-height:70vh;background:linear-gradient(180deg,var(--o50),var(--o100))}
.trk-wrap{margin-top:-.4rem}
.consent{border:2px solid var(--o400);border-radius:1.8rem;padding:1.3rem 1.3rem;background:linear-gradient(180deg,#fffef6,var(--o50))}
.consent h3{font-size:1.15rem;margin-bottom:.5rem}
.consent label.ck{display:flex;gap:.7rem;align-items:flex-start;font-weight:600;padding:.8rem;border-radius:1.1rem;background:var(--o100);border:1px solid var(--line2);cursor:pointer;margin-top:.8rem}
.stat{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-radius:1.2rem;background:rgba(255,255,255,.8);border:1px solid var(--line)}
.dot{width:.85rem;height:.85rem;border-radius:50%;background:var(--ink4);flex:none}
.dot.live{background:var(--o500);animation:pn 2s infinite}
.big-stop{width:100%;padding:1.1rem;font-size:1.15rem}
.ctl-list{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.5rem}
.ctl-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem}
.ctl-list .ic{color:var(--o500);margin-top:.15rem}
.steps{display:grid;gap:.7rem;counter-reset:s}
.step{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1rem;border-radius:1.2rem;background:rgba(255,255,255,.8);border:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s,bengali);flex:none;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font:700 1rem var(--serif);background:var(--gloss);color:var(--o800);box-shadow:var(--btn-sh)}
.step b{display:block;font-family:var(--serif)}.step span{font-size:.92rem;color:var(--ink3)}
.codein{display:flex;gap:.5rem;margin-top:.9rem}
.codein input{text-transform:uppercase;letter-spacing:.25em;font-weight:700;text-align:center;max-width:11rem}
.future{border:1px dashed var(--o500);border-radius:1.3rem;padding:1rem 1.2rem;background:rgba(255,255,255,.55)}
.future b{font-family:var(--serif)}
.trk-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
/* guide map: real OSM colours, NO filter / tint — only a plain frame */
#map{height:min(68vh,36rem);border-radius:1.8rem;border:0;box-shadow:0 0 0 2px var(--o400),0 0 0 6px rgba(188,174,110,.26),var(--sh2);z-index:1;background:#e9e2cf}
.gwrap{display:grid;gap:1rem}@media(min-width:60rem){.gwrap{grid-template-columns:20rem 1fr;align-items:start}}
.mem{display:flex;gap:.6rem;align-items:center;justify-content:space-between;padding:.7rem .8rem;border-radius:1rem;background:rgba(255,255,255,.8);border:1px solid var(--line);margin-top:.5rem;cursor:pointer}
.mem.sel{border-color:var(--o500);box-shadow:0 0 0 2px rgba(188,174,110,.5)}
.mem small{display:block;color:var(--ink3);font-size:.8rem}
.mem .x{background:none;border:1px solid var(--line2);border-radius:99px;padding:.2rem .7rem;cursor:pointer;color:var(--ink2);font:inherit;font-size:.8rem}
.leaflet-container{font-family:var(--sans)}
.fqpin{width:2.1rem;height:2.1rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--gloss);border:2px solid #fffbe3;box-shadow:0 8px 14px -6px rgba(68,63,38,.6),0 0 0 1px rgba(122,111,58,.55)}
.fqpin span{display:block;transform:rotate(45deg);text-align:center;line-height:1.8rem;color:var(--o900);font:700 .85rem var(--sans)}
.fqpin.stale{background:#cfc9ad}

/* ============ masayel ============ */
.ms-note{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.2rem}
.ms-tools{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1rem}
.ms-tools input[type=search]{width:100%;padding:.8rem 1.1rem;border-radius:99px;border:1px solid var(--line2);background:rgba(255,255,255,.85);font:1rem var(--sans);color:var(--ink)}
.ms-tools input[type=search]:focus{outline:2px solid var(--o400);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{padding:.4rem 1rem;border-radius:99px;border:1px solid rgba(255,255,255,.8);background:var(--glass);color:var(--ink2);font:600 .88rem var(--sans);cursor:pointer;box-shadow:var(--glass-sh)}
.chip.on{background:var(--gloss);color:var(--o900);border-color:transparent;box-shadow:var(--btn-sh)}
.ms-count{font-size:.85rem;color:var(--ink3);margin:0 0 .3rem}
#msList details{border:1px solid var(--line);border-radius:1.2rem;background:rgba(255,255,255,.75);margin-top:.7rem;box-shadow:var(--sh1)}
#msList summary{padding:.9rem 1.2rem;cursor:pointer;font:600 1.02rem var(--serif);list-style:none;display:flex;gap:.6rem;align-items:center}
#msList summary::-webkit-details-marker{display:none}
#msList summary .t{flex:1}
#msList summary .cat{font:600 .68rem var(--sans);letter-spacing:.04em;padding:.1rem .6rem;border-radius:99px;border:1px solid var(--o500);color:var(--gold-deep)}
#msList summary::after{content:"+";color:var(--o500);font-size:1.4rem;line-height:1}
#msList details[open] summary::after{content:"–"}
#msList .ans{padding:0 1.2rem 1.1rem;color:var(--ink2);font-size:.97rem}
#msList .ans p{margin:.6rem 0 0}

.cf-cap .gb{width:2.7rem;height:2.7rem;background:var(--gloss);box-shadow:var(--btn-sh)}.cf-cap .gb .ic{width:1.2rem;height:1.2rem}
.cf-ic{width:2.9rem;height:2.9rem}

/* ============ large screens: scale type/layout with rem ============ */
@media(min-width:90rem){html{font-size:112.5%}}
@media(min-width:120rem){html{font-size:125%}}
@media(min-width:150rem){html{font-size:150%}}


/* v4.4 slideshow: smaller cards (all 3 fit on phones), bigger stacked labels over a soft light scrim */
.cf-cap{position:absolute;left:.4rem;right:.4rem;bottom:.4rem;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.55rem .4rem .5rem;border-radius:1.2rem;background:linear-gradient(180deg,rgba(255,250,228,.8),rgba(250,241,200,.92));border:1px solid rgba(255,255,255,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -8px rgba(52,45,21,.5);text-align:center}
.cf-cap b{font:700 clamp(1.08rem,4.4vw,1.55rem)/1.2 var(--serif);color:var(--o900);white-space:normal;overflow:visible;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.cf-cap .gb{width:1.9rem;height:1.9rem}.cf-cap .gb .ic{width:.95rem;height:.95rem}
.cf-ic{width:2.2rem;height:2.2rem;top:.5rem;right:.5rem}
.cf-card::after{background:linear-gradient(180deg,rgba(255,252,238,.1),rgba(248,245,230,0) 45%,rgba(248,245,230,.25))}
@media(min-width:44rem){.cf-cap{padding:.7rem .6rem .65rem;gap:.4rem}.cf-cap .gb{width:2.5rem;height:2.5rem}.cf-ic{width:2.8rem;height:2.8rem}}
.cf{height:calc(var(--cw) * 1.42 + 3.2rem)}
/* gentle luxury accents: a touch more gold on headings/dividers, a touch more charcoal on text */
.sc-head h2,.mu h2,.tk h2{background-image:linear-gradient(180deg,#4f4420,#7a6a2c 55%,#a9822c)}
.sc-head h2::after,.tk h2::after{content:"";display:block;width:5rem;height:2px;margin:.4rem auto 0;background:linear-gradient(90deg,transparent,#d9b648 30%,#f6e08a 50%,#d9b648 70%,transparent)}
.mu h2::after{height:2px;background:linear-gradient(90deg,transparent,#d9b648,transparent)}
.mu,.tk{border-color:rgba(176,138,46,.7)}
.quick{border-top:1px solid rgba(176,138,46,.4)}

/* v4.5 quick icons: exactly 2 rows (4 + 3 centred) on every screen, slightly bigger; footer cards scaled to the same size family */
.qk{--g:clamp(.55rem,2vw,1rem);width:min(31rem,100% - 1.6rem)}
.qk .qi,.qk .qi{flex:0 0 calc((100% - 3 * var(--g)) / 4)}
@media(min-width:48rem){.qk{width:min(36rem,100% - 3rem)}.qk .qi{flex-basis:calc((100% - 3 * var(--g)) / 4)}}
.qi{min-height:5.4rem;font-size:.82rem;padding:.75rem .2rem .65rem}
.qi .gb .ic{width:1.9rem;height:1.9rem}
@media(min-width:40rem){.qi{min-height:6.4rem;font-size:.98rem;gap:.45rem}.qi .gb .ic{width:2.25rem;height:2.25rem}}
@media(max-width:24rem){.qi{font-size:.74rem;min-height:5rem}.qi .gb .ic{width:1.7rem;height:1.7rem}}
.ftr{padding:2.6rem 0 1.6rem}
.ftr .wrap{width:min(56rem,100% - 1.6rem)}
.ftr-brand b{font-size:1.6rem}
.fc-grid{gap:clamp(.6rem,1.6vw,.9rem)}
.fc{padding:.85rem .8rem .8rem;border-radius:1.35rem;gap:.2rem}
.fc h3{font-size:1.02rem}.fc p{font-size:.88rem;line-height:1.5}.fc small{font-size:.6rem}
.fc-ct .ph{font-size:1.02rem}.fc-ct .em{font-size:.85rem}
.fgb-row{margin-top:.5rem;gap:.5rem}
.fgb-row.one{grid-template-columns:minmax(0,6.6rem)}
.fbtn{min-height:4.2rem;font-size:.82rem;padding:.5rem .25rem .45rem;border-radius:1.2rem}
.fbtn .ic{width:1.5rem;height:1.5rem}
@media(min-width:40rem){.fbtn{min-height:5rem;font-size:.9rem}.fbtn .ic{width:1.8rem;height:1.8rem}}

/* v4.7: slim, low-profile card captions (one row) so they don't cover the image */
.cf-cap{flex-direction:row;justify-content:center;align-items:center;gap:.45rem;left:.5rem;right:.5rem;bottom:.45rem;padding:.28rem .35rem .28rem .6rem;border-radius:99px}
.cf-cap b{font-size:clamp(.92rem,3.7vw,1.2rem);line-height:1.15}
.cf-cap .gb,.cf-cap .gb.sm{width:1.55rem;height:1.55rem;flex:none}.cf-cap .gb .ic{width:.8rem;height:.8rem}
@media(min-width:44rem){.cf-cap{padding:.32rem .4rem .32rem .8rem;gap:.55rem}.cf-cap .gb,.cf-cap .gb.sm{width:1.9rem;height:1.9rem}.cf-cap .gb .ic{width:.95rem;height:.95rem}.cf-cap b{font-size:1.15rem}}

/* v4.7: live tracking status + how-to */
.dot.live{background:#2e9b5a;box-shadow:0 0 0 0 rgba(46,155,90,.5)}.dot.wait{background:var(--o500)}.dot.bad{background:#c2493a}
.livel{padding:.8rem 1rem;border-radius:1.1rem;font:700 1.05rem var(--sans);text-align:center;border:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--o800)}
.livel.ok{border-color:#2e9b5a;background:#e8f6ec;color:#17643a}.livel.wait{border-color:var(--o500);background:#fbf3d0}.livel.bad{border-color:#c2493a;background:#fbe9e5;color:#8a2d20}.livel.off{color:var(--ink3)}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.vgrid>div{padding:.6rem .8rem;border-radius:1rem;background:rgba(255,255,255,.8);border:1px solid var(--line)}
.vgrid small{display:block;font-size:.78rem;color:var(--ink3)}.vgrid b{font:700 1rem var(--sans);color:var(--o800);overflow-wrap:anywhere}
.terr{margin:0;padding:.7rem .9rem;border-radius:1rem;background:#fbe9e5;border:1px solid #c2493a;color:#8a2d20;font-size:.95rem}
.tres{margin:0;padding:.6rem .9rem;border-radius:1rem;font-weight:600;border:1px solid var(--o500);background:#fbf3d0}.tres.ok{border-color:#2e9b5a;background:#e8f6ec;color:#17643a}.tres.bad{border-color:#c2493a;background:#fbe9e5;color:#8a2d20}
.howto{margin-top:1.6rem;padding:1.2rem 1.1rem 1.1rem;border:1.5px solid rgba(156,143,78,.55);border-radius:1.8rem;background:rgba(255,255,255,.55)}
.howto h2{font-size:1.4rem;margin:0 0 .4rem;text-align:center}.howto h3{font-size:1.15rem;margin:1rem 0 .4rem;color:var(--gold-deep)}.howto h4{font-size:1rem;margin:1rem 0 .3rem}
.hsteps{list-style:none;counter-reset:h;padding:0;margin:.4rem 0;display:grid;gap:.6rem}
.hsteps li{counter-increment:h;position:relative;padding:.7rem .8rem .7rem 3.1rem;border-radius:1.1rem;background:rgba(255,255,255,.8);border:1px solid var(--line);font-size:.95rem;line-height:1.7}
.hsteps li::before{content:counter(h,bengali);position:absolute;left:.7rem;top:.7rem;width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;font:700 .95rem var(--serif);background:var(--gloss);color:var(--o800);box-shadow:var(--btn-sh)}
.hs-live{display:inline-block;padding:.05rem .55rem;border-radius:99px;background:#e8f6ec;border:1px solid #2e9b5a;color:#17643a;font-weight:700}
.howto code{overflow-wrap:anywhere}
.cf-cap b{white-space:nowrap}
.cf-cap{left:.4rem;right:.4rem;padding:.2rem .25rem .2rem .5rem;gap:.35rem}
.cf-cap b{font-size:clamp(.8rem,3.3vw,1.15rem)}
.cf-cap .gb,.cf-cap .gb.sm{width:1.4rem;height:1.4rem}.cf-cap .gb .ic{width:.72rem;height:.72rem}
@media(min-width:44rem){.cf-cap{padding:.28rem .35rem .28rem .8rem;gap:.5rem}.cf-cap b{font-size:1.1rem}.cf-cap .gb,.cf-cap .gb.sm{width:1.8rem;height:1.8rem}.cf-cap .gb .ic{width:.9rem;height:.9rem}}

#hs0 img{object-position:50% 45%}#hs1 img{object-position:50% 50%}#hs2 img{object-position:50% 35%}#hs3 img{object-position:50% 50%}#hs4 img{object-position:50% 40%}#hs5 img{object-position:50% 30%}#hs6 img{object-position:50% 45%}#hs7 img{object-position:50% 50%}#hs8 img{object-position:50% 50%}

/* ===== v4.9 RICHER GOLD on buttons only (shape/size unchanged) ===== */
:root{
  --gloss:linear-gradient(180deg,#fdf2bb 0%,#efda80 30%,#ddbf59 64%,#c6a242 100%);
  --gloss-soft:linear-gradient(180deg,#fef6cd 0%,#f3e298 45%,#e5cc72 100%);
  --btn-sh:inset 0 1.5px 0 rgba(255,250,214,.95),inset 0 -2px 5px rgba(136,106,34,.3),0 0 0 1px rgba(166,135,51,.56),0 12px 22px -12px rgba(107,83,28,.6);
  --gold-btn:linear-gradient(180deg,#fdf2bb 0%,#efda80 30%,#ddbf59 64%,#c6a242 100%);
}
.btn.gold,.btn.ink,.gb,.fq-lang.on,.fq-tool.snd[aria-pressed=true],.fq-tool.stop,.fq-type button{background:var(--gloss)}
.btn.ink{background:var(--gloss-soft)}
.btn.stop{background:linear-gradient(180deg,#f5efb4,#e0cc72);box-shadow:inset 0 1.5px 0 rgba(255,250,214,.9),0 0 0 2px #8f7a2c,0 12px 22px -12px rgba(107,83,28,.6)}
.btn.line{background:linear-gradient(160deg,rgba(255,248,205,.85),rgba(240,222,140,.28) 62%,rgba(221,191,89,.3)),rgba(250,240,196,.5);box-shadow:inset 0 1px 0 rgba(255,252,225,.95),0 0 0 1px rgba(166,135,51,.42),0 10px 20px -14px rgba(107,83,28,.5)}
.btn.line:hover{background:linear-gradient(160deg,rgba(255,250,215,.95),rgba(240,222,140,.45))}
.gb.dark{background:linear-gradient(160deg,rgba(255,248,205,.85),rgba(240,222,140,.32) 60%,rgba(221,191,89,.36)),rgba(250,240,196,.5);color:#5a4a1a;box-shadow:inset 0 1px 0 rgba(255,252,225,.95),0 0 0 1px rgba(166,135,51,.46)}
.tk-act .btn.gold{box-shadow:var(--btn-sh),0 0 2.4rem -4px rgba(232,205,100,.9)}
.fq-mic,.tk-pinwrap .gb{background:radial-gradient(circle at 34% 24%,#fffbe0 0%,#f5e9ae 32%,#e6d27e 68%,#cdb560 100%)}
/* quick icons + footer cards: warm gold gloss tiles */
.qi,.fbtn{background:linear-gradient(180deg,#fcf3c2 0%,#f1e08c 38%,#e3cb68 74%,#cfae4b 100%);border:1px solid rgba(255,248,205,.9);box-shadow:inset 0 1.5px 0 rgba(255,252,225,.95),inset 0 -2px 5px rgba(136,106,34,.26),0 0 0 1px rgba(166,141,70,.4),0 12px 20px -12px rgba(107,83,28,.55);-webkit-backdrop-filter:none;backdrop-filter:none;color:#3d3414}
.qi .gb,.fbtn .ic,.qi .gb .ic{color:#6a5614}
.qi:hover,.fbtn:hover{border-color:#fcf3c2;box-shadow:inset 0 1.5px 0 rgba(255,252,225,.95),inset 0 -2px 5px rgba(136,106,34,.26),0 0 0 1px rgba(166,135,51,.55),0 0 1.6rem -2px rgba(232,205,100,.8)}
.qi::before,.fbtn::before{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0))}
/* card caption pills */
.cf-cap{background:linear-gradient(180deg,#fcf3c2 0%,#f1e08c 42%,#e3c85f 100%);border:1px solid rgba(255,248,205,.9);box-shadow:inset 0 1px 0 rgba(255,252,225,.95),inset 0 -2px 4px rgba(136,106,34,.24),0 0 0 1px rgba(166,135,51,.46),0 8px 14px -8px rgba(60,48,12,.5)}
.cf-cap b{color:#2f2a12;text-shadow:0 1px 0 rgba(255,250,214,.7)}
.cf-cap .gb{background:linear-gradient(180deg,#eadb94,#d3bb6a);color:#2f2a12;box-shadow:inset 0 1px 0 rgba(255,250,214,.7),0 0 0 1px rgba(136,106,34,.46)}

/* ===== v4.10 ONE flat pale champagne-gold ground everywhere (no shades / vignettes / section gradients) ===== */
/* PAGE GROUND (v4.12, final): ONE flat blended taupe-greige = 1/3 light surma + 1/3 light charcoal + 1/3 champagne gold  -> was #c4bba4; now a bit more gold: #cbbe96.
   PREVIOUS blend #c4bba4 (swap --bg/--o50/--o100/--o150 and --o200:#bab198 + hero::after rgba(196,187,164,0)). TO REVERT further: previous light surma = :root{--bg:#cdc9c0;--o50:#cdc9c0;--o100:#cdc9c0;--o150:#cdc9c0;--o200:#c4c0b6} (+ hero::after rgba(205,201,192,0), theme-color/manifest #cdc9c0, drop the --pat lines);
   earlier pale gold = #faf2d4. Change --bg here + theme-color in the HTML files + manifest.webmanifest to re-tone. */
:root{--bg:#cbbe96;--o50:#cbbe96;--o100:#cbbe96;--o150:#cbbe96;--o200:#c0b38a;
  --o400:#8f8458;--o500:#6f6330;--o600:#5a5027;--o700:#463e1e;--o800:#352f17;--o900:#231f0e;
  --ink3:#443e1f;--ink4:#544d2a;--gold-deep:#4e4418;
  --pat:url(../images/pattern-faint.svg) center top/96px 96px repeat}   /* faint Islamic star lattice, ~16% stroke alpha */
html{background:var(--bg)}
body{background:var(--pat),var(--bg)}
.showcase,.duo,.quick,.ftr,.p-hero,.trk-page,main{background:transparent}
.showcase::before,.duo::before,.p-hero::before{display:none}
.p-hero{background:transparent}
.hero::before{background:radial-gradient(44rem 21rem at 50% 44%,rgba(52,45,21,.2),transparent 74%),linear-gradient(180deg,rgba(52,45,21,.08) 0%,rgba(52,45,21,0) 30%)}
.hero::after{background:linear-gradient(180deg,rgba(203,190,150,0),var(--bg) 96%)}
.quick{border-top:0}
.ftr::before{background:linear-gradient(90deg,transparent,#c9a63f,transparent)}
.mu,.tk{border-color:rgba(176,138,46,.7)}
.mu,.tk,.howto{box-shadow:none}

/* ===== v4.11 FLATTER buttons: weaker bevels/inner highlights, small soft shadows, tighter padding, flatter gradient; glass shine kept ===== */
:root{
  --gloss:linear-gradient(180deg,#fdf6d6 0%,#f4e8ac 55%,#e8d68a 100%);
  --gloss-soft:linear-gradient(180deg,#fef8dc 0%,#f6ecb8 100%);
  --btn-sh:inset 0 1px 0 rgba(255,252,225,.7),0 0 0 1px rgba(166,141,70,.32),0 3px 7px -3px rgba(107,83,28,.35);
}
.btn,.fbtn{padding:.6rem 1.25rem;min-height:2.6rem;gap:.45rem;font-size:.97rem}
.btn.sm{padding:.4rem .95rem;min-height:2.2rem}
.tk-act .btn{min-height:3rem;padding:.65rem 1.6rem;font-size:1.05rem}
.btn::before,.gb::before{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.04))}
.btn.stop{box-shadow:inset 0 1px 0 rgba(255,252,225,.7),0 0 0 1.5px #8f7a2c,0 3px 7px -3px rgba(107,83,28,.35)}
.btn.line{box-shadow:inset 0 1px 0 rgba(255,252,225,.7),0 0 0 1px rgba(166,141,70,.3),0 3px 7px -4px rgba(107,83,28,.3)}
.gb.dark{box-shadow:inset 0 1px 0 rgba(255,252,225,.7),0 0 0 1px rgba(166,141,70,.3)}
.tk-act .btn.gold{box-shadow:var(--btn-sh),0 0 1.4rem -6px rgba(232,205,100,.7)}
.tk-pinwrap .gb,.fq-mic{box-shadow:inset 0 2px 0 rgba(255,252,225,.6),inset 0 -4px 8px rgba(136,106,34,.2),0 0 0 1.5px rgba(255,250,214,.7),0 8px 14px -8px rgba(94,86,48,.5)}
.fq-mic.listening{animation:none}
/* quick icons + footer cards: slimmer, flatter tiles */
.qi,.fbtn{background:linear-gradient(180deg,#fdf6d6 0%,#f4e8ac 60%,#e8d68a 100%);border:1px solid rgba(255,248,205,.7);border-radius:1.1rem;box-shadow:inset 0 1px 0 rgba(255,252,225,.65),0 0 0 1px rgba(166,141,70,.3),0 3px 7px -3px rgba(107,83,28,.35)}
.qi{min-height:4.5rem;padding:.55rem .2rem .5rem;gap:.25rem}
@media(min-width:40rem){.qi{min-height:5.4rem;border-radius:1.25rem}}
@media(max-width:24rem){.qi{min-height:4.2rem}}
.qi::before,.fbtn::before{background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));height:38%}
.qi:hover,.fbtn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,252,225,.65),0 0 0 1px rgba(166,135,51,.42),0 4px 10px -4px rgba(107,83,28,.4)}
/* card caption pills */
.cf-cap{background:linear-gradient(180deg,#fdf6d6 0%,#f4e8ac 55%,#e8d68a 100%);box-shadow:inset 0 1px 0 rgba(255,252,225,.65),0 0 0 1px rgba(166,141,70,.3),0 3px 8px -4px rgba(60,48,12,.4)}
.cf-cap .gb{box-shadow:inset 0 1px 0 rgba(255,250,214,.5),0 0 0 1px rgba(136,106,34,.36)}
.fq-lang,.fq-tool,.fq-type button{box-shadow:inset 0 1px 0 rgba(255,252,225,.65),0 0 0 1px rgba(166,141,70,.3),0 2px 5px -3px rgba(107,83,28,.3)}
.fq-lang{padding:.45rem .4rem}
.fq-tool{width:2.6rem;height:2.6rem}
.fq-type button{width:2.7rem;height:2.7rem}
.hdr .gb{width:2.4rem;height:2.4rem}

/* ===== v4.13 PWA: safe-area insets (iPhone notch / home bar), install banner ===== */
.wrap{width:min(72rem,100% - 2.4rem - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
.wrap.narrow{width:min(46rem,100% - 2.4rem - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
.ftr{padding-bottom:calc(1.6rem + env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(1.4rem + env(safe-area-inset-bottom,0px))}

html.is-app body{-webkit-touch-callout:none;overscroll-behavior-y:none}
.pwa-banner{position:fixed;left:50%;bottom:calc(.8rem + env(safe-area-inset-bottom,0px));z-index:70;width:min(30rem,100% - 1.2rem);transform:translate(-50%,140%);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s;display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem .6rem .6rem;border-radius:1.2rem;background:#fbf6e2;border:1px solid rgba(166,141,70,.5);box-shadow:0 10px 26px -10px rgba(35,31,14,.55)}
.pwa-banner.on{transform:translate(-50%,0);opacity:1}
.pwa-banner img{width:2.75rem;height:2.75rem;border-radius:.7rem;flex:none}
.pwa-t{flex:1;min-width:0;line-height:1.35}.pwa-t b{display:block;font:700 .95rem var(--serif);color:var(--o900)}.pwa-t span{display:block;font-size:.8rem;color:var(--ink3)}
.pwa-x{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;border:0;background:rgba(35,31,14,.08);color:var(--o800);font-size:1.2rem;line-height:1;cursor:pointer}
.app-steps{margin-top:1rem}

/* ===== v4.14 Muallim + Haji Tracking cards: flat champagne off-white fill (no pattern, no map lines), thin gold outline kept =====
   Revert: delete this block (cards go back to transparent over the page ground). */
.mu,.tk{background:#f6f0dc;border:1.5px solid rgba(176,138,46,.75);box-shadow:none}
.tk-map,.tk::before,.mu::before{display:none}
.mu .fq-micwrap,.tk .tk-pinwrap{background:radial-gradient(circle at 50% 38%,#fffcee,rgba(255,252,238,.2) 72%);box-shadow:0 0 0 .75rem rgba(240,228,176,.28),0 0 0 1.5rem rgba(240,228,176,.14)}
.mu .fq-lang:not(.on){background:#fbf7e8;border:1px solid rgba(166,141,70,.4);-webkit-backdrop-filter:none;backdrop-filter:none}
.mu .fq-tool:not(.snd[aria-pressed=true]):not(.stop){background:#fbf7e8;border:1px solid rgba(166,141,70,.4)}
.mu .fq-reply,.mu input,.mu .fq-type input{background:#fffdf3}
.tk .btn.line{background:#fbf7e8}