/* 77db.info — sound-level survey. Noise-map bands n1 (quiet) .. n9 (loud) */
:root{
 --paper:#ECEFE9;--sheet:#F8F9F5;--sheet2:#F2F4EF;--ink:#141A1C;--ink2:#343E41;--muted:#556260;--line:#C8D0C9;--line2:#DDE3DD;
 --gr:#1C2326;--gr2:#283135;--gr3:#36424A;--lcd:#0E1517;--on-gr:#E6EDE8;--on-gr2:#A7B5AF;
 --n1:#DCEBCB;--n2:#AFD394;--n3:#5FA864;--n4:#EFD867;--n5:#F0A64A;--n6:#DF6639;--n7:#C0334A;--n8:#8D1D56;--n9:#4E2468;
 --brand:#8D1D56;--brand-d:#6E1443;--link:#8D1D56;--focus:#E0661F;
 --display:"Mona Sans","Noto Sans Bengali",system-ui,sans-serif;
 --body:"Mona Sans","Noto Sans Bengali",system-ui,sans-serif;
 --mono:"Spline Sans Mono","Noto Sans Bengali",ui-monospace,monospace;
 --gut:16px;--r:6px;
 /* game runtime tokens */
 --primary:var(--brand);--primary-contrast:#fff;--accent:var(--n4);--surface:var(--sheet);--surface-2:var(--sheet2);--border:var(--line);
 --text:var(--ink);--heading:var(--ink);--muted-c:var(--muted);--font-head:var(--display);--font-body:var(--body)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.75 var(--body);font-stretch:100%;overflow-x:hidden;
 background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}
:lang(en) body,body:lang(en){line-height:1.65}
img,svg{max-width:100%}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
p,ul,ol,table{margin:0 0 1em}
strong{font-weight:650}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;text-wrap:balance}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r);text-decoration:none}
.skip:focus{top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:10px 20px;border-radius:999px;font:650 16px/1.2 var(--display);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;text-align:center}
.btn-play{background:var(--brand);color:#fff;box-shadow:0 2px 0 var(--brand-d),0 8px 18px -10px var(--brand)}
.btn-play:hover{background:var(--brand-d)}
.btn-play::before{content:"";width:10px;height:10px;flex:none;border-radius:50%;background:var(--n4);box-shadow:0 0 0 3px #ffffff33}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--sheet)}
.btn:active{transform:translateY(1px)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--sheet) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hd-bar{display:flex;align-items:center;gap:10px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-height:44px;margin-right:auto}
.brand-ic{width:34px;height:34px;flex:none}
.brand-ic rect{fill:var(--gr)}.brand-ic .n{fill:var(--gr3)}.brand-ic .f{fill:var(--n8)}.brand-ic .s{fill:var(--n4)}
.brand-w{display:inline-flex;align-items:baseline;font-family:var(--display);line-height:1}
.brand-w b{font-weight:900;font-size:30px;font-stretch:112%;letter-spacing:-.03em}
.brand-w span{font:600 17px/1 var(--mono);margin-left:2px;color:var(--brand)}
.brand-tag{font:500 12px/1 var(--mono);color:var(--muted);border-left:1px solid var(--line);padding-left:8px;margin-left:2px;align-self:center}
.lsw{display:flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}
.lsw a{display:flex;align-items:center;justify-content:center;min-width:46px;min-height:42px;padding:0 10px;font:600 14px/1 var(--body);color:var(--ink);text-decoration:none}
.lsw a[aria-current]{background:var(--ink);color:var(--sheet)}
.lsw a:not([aria-current]):hover{background:var(--n1)}
.lsw-f{display:none}
.nav-tg{order:3;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:999px;background:var(--gr);color:var(--on-gr);font:600 15px/1 var(--body);cursor:pointer}
.nav-tg-i{display:grid;gap:3px;align-items:end;grid-template-columns:repeat(3,3px);height:16px}
.nav-tg-i i{display:block;width:3px;border-radius:2px;background:var(--n4);transition:height .2s}
.nav-tg-i i:nth-child(1){height:8px}.nav-tg-i i:nth-child(2){height:16px;background:var(--n6)}.nav-tg-i i:nth-child(3){height:11px;background:var(--n2)}
.hd.open .nav-tg-i i{height:16px}
.hd-tools{display:flex;align-items:center;gap:10px}
.hd-play{display:none}
.hd-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sheet);border-bottom:2px solid var(--ink);box-shadow:0 20px 30px -20px #0005;padding:8px var(--gut) 18px;max-height:calc(100vh - 80px);overflow:auto}
.hd.open .hd-nav{display:block}
.hd-nav ul{list-style:none;margin:0 0 12px;padding:0}
.hd-nav li{border-bottom:1px solid var(--line2)}
.hd-nav a:not(.btn){display:flex;align-items:center;min-height:50px;color:var(--ink);text-decoration:none;font:600 17px/1.35 var(--display)}
.hd-nav a:not(.btn)::before{content:"";width:8px;height:8px;border-radius:2px;margin-right:12px;background:var(--line);flex:none}
.hd-nav a[aria-current]::before{background:var(--brand)}
.hd-nav a[aria-current]{color:var(--brand)}
.nav-play{width:100%}
.ruler{position:relative;height:12px;background:
 repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 12px) 0 0/100% 5px no-repeat,
 repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 60px) 0 0/100% 8px no-repeat,
 linear-gradient(90deg,var(--n1),var(--n2) 14%,var(--n3) 26%,var(--n4) 40%,var(--n5) 52%,var(--n6) 64%,var(--n7) 76%,var(--n8) 88%,var(--n9)) 0 100%/100% 4px no-repeat}
.needle{position:absolute;top:-2px;left:calc(var(--pos,.08) * 100%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--brand);transform:translateX(-6px);transition:left .25s ease-out}
@media (min-width:980px){
 .nav-tg,.nav-play{display:none}
 .hd-bar{min-height:74px;gap:18px}
 .hd-nav{display:block;position:static;background:none;border:0;box-shadow:none;padding:0;max-height:none;overflow:visible;order:2}
 .hd-nav ul{display:flex;gap:2px;margin:0}
 .hd-nav li{border:0}
 .hd-nav a:not(.btn){min-height:44px;padding:0 10px;font-size:15px;border-radius:999px;white-space:nowrap}
 .hd-nav a:not(.btn)::before{display:none}
 .hd-nav a:not(.btn):hover{background:var(--n1)}
 .hd-nav a[aria-current]{background:var(--ink);color:var(--sheet)!important}
 .hd-tools{order:3}
 .hd-play{display:inline-flex;min-height:44px;padding:8px 16px;font-size:15px}
 .brand{margin-right:auto}
}
@media (min-width:1180px){.lsw-c{display:none}.lsw-f{display:inline}}
@media (max-width:439px){.brand-tag{display:none}}
@media (max-width:359px){.nav-tg-l{display:none}}

/* ---------- noise map ---------- */
.nmap{max-width:none;overflow:visible}
.nmap path{stroke:var(--ink);stroke-opacity:.28;stroke-width:1;vector-effect:non-scaling-stroke}
.nmap .b1{fill:var(--n1)}.nmap .b2{fill:var(--n2)}.nmap .b3{fill:var(--n3)}.nmap .b4{fill:var(--n4)}.nmap .b5{fill:var(--n5)}.nmap .b6{fill:var(--n6)}.nmap .b7{fill:var(--n7)}.nmap .b8{fill:var(--n8)}.nmap .b9{fill:var(--n9)}
.nmap .src circle{fill:var(--sheet);stroke:var(--ink);stroke-width:2}.nmap .src path{stroke:var(--sheet);stroke-width:2}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:2px solid var(--ink)}
.hero-g{display:grid;gap:28px;padding-top:28px;padding-bottom:36px}
.kick{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:6px 14px 6px 8px;background:var(--sheet);border:1px solid var(--line);border-radius:999px;font:500 14px/1.4 var(--body);color:var(--ink2)}
.kick-d{width:14px;height:14px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--n8) 0 30%,var(--n6) 32% 55%,var(--n4) 57% 80%,var(--n2) 82%)}
.hero h1{font-size:clamp(29px,7.4vw,56px);font-weight:850;line-height:1.14;letter-spacing:-.015em;font-stretch:88%;margin-bottom:18px}
:lang(bn) .hero h1,.hero h1:lang(bn){letter-spacing:0;line-height:1.4;font-stretch:84%}
.lead{font-size:clamp(17px,2.1vw,19px);color:var(--ink2)}
.lead p{margin:0 0 1em}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 22px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:30rem}
.chips li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;font-size:15px;line-height:1.5;padding:7px 0;border-top:1px solid var(--line)}
.chips li::before{content:"";height:14px;border-radius:2px;background:var(--bc);box-shadow:inset 0 0 0 1px #0002}
.hero-d{position:relative;display:grid;justify-items:center;padding:84px var(--gut) 28px;margin:0 calc(-1 * var(--gut));overflow:hidden}
.nmap-hero{position:absolute;width:min(820px,170vw);height:auto;left:50%;top:-170px;transform:translateX(-62%);opacity:.92;pointer-events:none;-webkit-mask-image:linear-gradient(transparent 160px,#000 250px);mask-image:linear-gradient(transparent 160px,#000 250px)}
@media (min-width:980px){
 .hero-g{grid-template-columns:minmax(0,1fr) minmax(400px,480px);gap:48px;align-items:start;padding-top:48px;padding-bottom:64px}
 .hero-c{padding-top:24px}
 .hero-d{margin:0;padding:84px 0 0;overflow:visible}
 .nmap-hero{-webkit-mask-image:none;mask-image:none}
 .nmap-hero{width:940px;left:-90px;top:-190px;transform:none}
 .hero-c{position:relative;z-index:1}
}

/* ---------- sound level meter (game shell) ---------- */
.slm{position:relative;z-index:1;width:100%;max-width:480px;background:linear-gradient(160deg,var(--gr2),var(--gr) 55%);border-radius:30px 30px 22px 22px;padding:12px 8px 14px;color:var(--on-gr);
 box-shadow:0 0 0 1px #000,inset 0 1px 0 #ffffff1f,0 30px 50px -24px #0009,0 4px 0 #0b0f10}
.slm::before{content:"";position:absolute;left:50%;top:-22px;width:64px;height:24px;transform:translateX(-50%);background:linear-gradient(90deg,#161b1d,#3a454b 45%,#1a2023);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}
.slm-mic{position:absolute;left:50%;top:-78px;width:78px;height:62px;transform:translateX(-50%);border-radius:50% 50% 46% 46%;
 background:radial-gradient(circle,#0000004d 1px,transparent 1.6px) 0 0/5px 5px,radial-gradient(circle at 36% 30%,#6E7B80,#3D474C 55%,#222a2d);box-shadow:inset 0 -6px 12px #0006,0 6px 12px -6px #0008}
.slm-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 8px 10px;flex-wrap:wrap}
.slm-t{font:700 15px/1.3 var(--display);color:var(--on-gr)}
.slm-led{display:inline-flex;align-items:center;gap:6px;font:500 12px/1.3 var(--mono);color:var(--on-gr2)}
.slm-led::before{content:"";width:8px;height:8px;border-radius:50%;background:#7CD36E;box-shadow:0 0 8px #7CD36E}
.slm-scr{border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 2px #000,0 0 0 3px #3a454b}
.slm-met{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:12px 8px 0}
.slm-ml{font:500 12.5px/1.3 var(--body);color:var(--on-gr2)}
.seg,.mini-seg{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;height:14px}
.seg i,.mini-seg i{display:block;border-radius:1px;background:var(--bc);opacity:clamp(.16,calc(var(--lv,.35) * 20 - var(--i) + 1),1);transition:opacity .18s}
@media (min-width:420px){.slm{padding:14px 12px 16px}}

/* ---------- inner hero ---------- */
.ph{position:relative;overflow:hidden;border-bottom:2px solid var(--ink);background:linear-gradient(var(--sheet),color-mix(in srgb,var(--sheet) 70%,transparent))}
.ph-g{position:relative;padding-top:18px;padding-bottom:30px}
.ph-c{position:relative;z-index:1;max-width:760px}
.nmap-ph{position:absolute;right:-150px;top:-170px;width:290px;opacity:.7;pointer-events:none}
.crumbs ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;align-items:center;font:500 14px/1.4 var(--mono)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:18px;height:1px;background:var(--ink);margin:0 8px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink2)}
.crumbs span{color:var(--muted)}
.ph h1{font-size:clamp(27px,5.6vw,48px);font-weight:850;line-height:1.16;letter-spacing:-.012em;font-stretch:90%;margin-bottom:14px}
:lang(bn) .ph h1,.ph h1:lang(bn){letter-spacing:0;line-height:1.42;font-stretch:84%}
@media (min-width:720px){.nmap-ph{right:-20px;top:-90px;width:440px;opacity:.9}.ph-c{max-width:min(760px,calc(100% - 300px))}.ph-g{padding-top:26px;padding-bottom:44px}}

/* ---------- body ---------- */
.body{padding:28px 0 40px}
.body-g{display:grid;gap:24px}
.doc{min-width:0;container-type:inline-size;background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:22px 18px 8px;box-shadow:0 1px 0 var(--line)}
.side{min-width:0}
@media (min-width:980px){
 .body{padding:48px 0 64px}
 .body-g{grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
 .side{grid-column:2;grid-row:1;position:sticky;top:98px;display:grid;gap:18px}
 .doc{grid-column:1;grid-row:1;padding:40px 48px 16px}
}
.intro-x{font-size:1.02em}
.sec{padding-top:10px;margin-bottom:26px}
.sec h2{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:clamp(22px,4.2cqi,30px);font-weight:800;line-height:1.28;font-stretch:92%;margin:0 0 16px;padding-top:18px;border-top:2px solid var(--ink);position:relative}
.sec h2::before{content:"";position:absolute;left:0;top:-2px;width:72px;height:6px;background:var(--bc)}
:lang(bn) .sec h2,.sec h2:lang(bn){line-height:1.5;font-stretch:86%}
.chip{display:inline-grid;place-items:center;min-width:42px;height:32px;padding:0 8px;margin-top:2px;border-radius:3px;background:var(--bc,var(--ink));color:var(--bf,#fff);font:600 15px/1 var(--mono);box-shadow:inset 0 0 0 1px #0002}
.chip-q{background:var(--ink);color:var(--n4)}
.doc h3{font-size:19px;font-weight:750;line-height:1.4;margin:1.4em 0 .5em;display:flex;gap:10px;align-items:baseline}
.doc h3::before{content:"";flex:none;width:12px;height:12px;border:2px solid var(--bc,var(--ink));border-radius:50%;transform:translateY(1px)}
.doc ul{list-style:none;padding:0}
.doc ul li{position:relative;padding-left:26px;margin-bottom:.5em}
.doc ul li::before{content:"";position:absolute;left:4px;top:.72em;width:10px;height:5px;background:var(--bc,var(--n5));border-radius:1px;box-shadow:0 -4px 0 -1px color-mix(in srgb,var(--bc,var(--n5)) 45%,transparent)}
.doc ol{padding:0;list-style:none;counter-reset:o}
.doc ol li{counter-increment:o;position:relative;padding-left:44px;margin-bottom:.7em;min-height:32px}
.doc ol li::before{content:counter(o);position:absolute;left:0;top:.1em;width:30px;height:30px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;font:600 14px/1 var(--mono);background:var(--sheet)}
.doc ol li:lang(bn)::before,:lang(bn) .doc ol li::before{content:counter(o,bengali)}
.doc table{display:block;overflow-x:auto;border-collapse:collapse;font-size:15px;line-height:1.55;max-width:100%}
.doc th,.doc td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);min-width:120px}
.doc th{font:600 14px/1.4 var(--body);background:var(--gr);color:var(--on-gr)}
.doc tr:nth-child(even) td{background:var(--sheet2)}
.doc code{font:15px var(--mono);background:var(--sheet2);padding:1px 5px;border-radius:3px}
.doc em{font-style:normal;font-family:var(--mono);font-size:.94em}

/* FAQ */
.faq{margin:10px 0 24px}
.faq h2{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:clamp(22px,4.2cqi,30px);font-weight:800;line-height:1.3;font-stretch:92%;margin:0 0 8px;padding-top:18px;border-top:2px solid var(--ink)}
:lang(bn) .faq h2,.faq h2:lang(bn){line-height:1.5;font-stretch:86%}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font:650 17px/1.5 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .q{color:var(--brand)}
.pm{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);position:relative}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);transition:transform .2s}
.pm::after{transform:rotate(90deg)}
.faq details[open] .pm{background:var(--brand);border-color:var(--brand)}
.faq details[open] .pm::before{background:#fff}.faq details[open] .pm::after{transform:rotate(0);background:#fff}
.faq .a{padding:0 0 12px 0;color:var(--ink2);border-left:4px solid var(--n4);padding-left:16px;margin-bottom:14px}
.faq .a p:last-child{margin-bottom:0}

/* CTA */
.cta{position:relative;display:grid;gap:14px;margin:24px 0 24px;padding:22px 20px;background:var(--gr);color:var(--on-gr);border-radius:18px 18px 12px 12px;overflow:hidden}
.cta p{margin:0;font:650 18px/1.55 var(--display);position:relative}
.cta .btn{justify-self:start;position:relative}
.cta-bars{position:absolute;right:-6px;bottom:0;width:180px;height:100%;opacity:.35;background:
 linear-gradient(var(--n3) 0 0) 0 100%/14px 30% no-repeat,linear-gradient(var(--n4) 0 0) 20px 100%/14px 48% no-repeat,linear-gradient(var(--n5) 0 0) 40px 100%/14px 62% no-repeat,
 linear-gradient(var(--n6) 0 0) 60px 100%/14px 80% no-repeat,linear-gradient(var(--n7) 0 0) 80px 100%/14px 70% no-repeat,linear-gradient(var(--n8) 0 0) 100px 100%/14px 92% no-repeat,
 linear-gradient(var(--n6) 0 0) 120px 100%/14px 56% no-repeat,linear-gradient(var(--n4) 0 0) 140px 100%/14px 38% no-repeat,linear-gradient(var(--n3) 0 0) 160px 100%/14px 24% no-repeat}

/* legend TOC */
.legend{background:var(--sheet);border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 0 var(--line)}
.legend summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:6px 16px;cursor:pointer;list-style:none;font:600 14px/1.3 var(--mono);color:var(--ink);border-bottom:1px solid transparent}
.legend summary::-webkit-details-marker{display:none}
.legend summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.legend[open] summary{border-bottom-color:var(--line)}
.legend[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.legend ol{list-style:none;margin:0;padding:8px 8px 10px}
.legend a{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;min-height:44px;padding:6px 8px;border-radius:3px;color:var(--ink2);text-decoration:none;font-size:15px;line-height:1.45}
.legend a i{height:12px;border-radius:2px;background:var(--bc);box-shadow:inset 0 0 0 1px #0002}
.legend a:hover{background:var(--sheet2);color:var(--ink)}
.legend a[aria-current]{background:var(--gr);color:var(--on-gr)}
.mini{display:none}
@media (min-width:980px){
 .legend summary{pointer-events:none}.legend summary::after{display:none}
 .mini{display:grid;gap:10px;padding:18px;background:var(--gr);color:var(--on-gr);border-radius:18px 18px 12px 12px}
 .mini strong{font:700 17px/1.35 var(--display)}
 .mini p{margin:0;font-size:15px;line-height:1.6;color:var(--on-gr2)}
 .mini .btn{min-height:44px;font-size:15px}
 .mini-seg{--lv:.62;height:10px}
}

/* related: survey points */
.rel{padding:40px 0 48px;border-top:2px solid var(--ink);background:var(--sheet)}
.rel h2{font-size:clamp(24px,4vw,34px);font-weight:800;font-stretch:92%;line-height:1.3;margin-bottom:20px}
.rel-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.rel-g li{container-type:inline-size}
.pt{display:grid;gap:6px;height:100%;padding:16px 16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink);position:relative;transition:border-color .15s,transform .15s}
.pt::after{content:"";position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;border:1px dashed var(--line);box-shadow:0 0 0 8px var(--paper),0 0 0 9px var(--line2)}
.pt:hover{border-color:var(--ink);transform:translateY(-2px)}
.pt-m{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--mono);color:var(--muted)}
.pt-m svg{width:18px;height:18px}.pt-m path{fill:var(--n6);stroke:var(--ink);stroke-width:1.5}
.pt strong{font:700 18px/1.4 var(--display);padding-right:48px}
.pt-d{font-size:15px;line-height:1.6;color:var(--ink2)}
.pt:hover strong{color:var(--brand)}

/* footer */
.ft{background:var(--gr);color:var(--on-gr);font-size:15px;line-height:1.7}
.ft-ramp{height:8px;background:linear-gradient(90deg,var(--n1),var(--n2),var(--n3),var(--n4),var(--n5),var(--n6),var(--n7),var(--n8),var(--n9))}
.ft-g{display:grid;gap:28px;padding-top:36px;padding-bottom:28px}
.brand-inv{color:var(--on-gr)}.brand-inv .brand-ic rect{fill:#3a454b}.brand-inv .brand-w span{color:var(--n4)}
.disc{color:var(--on-gr2);max-width:36rem;margin:12px 0 0}
.ft h2{font:600 13px/1.3 var(--mono);color:var(--n4);margin:0 0 8px}
:lang(en) .ft h2{text-transform:uppercase;letter-spacing:.08em}
.ft ul{list-style:none;margin:0;padding:0}
.ft li a{display:flex;align-items:center;min-height:44px;color:var(--on-gr);text-decoration:none}
.ft li a:hover{color:var(--n4);text-decoration:underline}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:16px;padding-bottom:24px;border-top:1px solid #ffffff1f}
.age{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--n7);color:#fff;font:700 14px/1 var(--mono);background:var(--n8)}
.copy{font:400 14px/1.4 var(--mono);color:var(--on-gr2)}
.totop{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--on-gr);font-size:14px}
@media (min-width:760px){.ft-g{grid-template-columns:1.5fr 1fr 1fr;gap:40px}}

/* 404 */
.nf{padding-top:48px;padding-bottom:80px;max-width:720px}
.nf-n{font:800 clamp(80px,22vw,180px)/1 var(--display);font-stretch:120%;margin:0;background:linear-gradient(90deg,var(--n3),var(--n5),var(--n8));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf h1{font-size:clamp(28px,5vw,44px);margin:0 0 10px}

/* bn script hygiene: no letter-spacing / uppercase */
:lang(bn) .brand-tag,:lang(bn) .kick,:lang(bn) .legend summary{letter-spacing:0;text-transform:none}
@media (prefers-reduced-motion:no-preference){
 .hero .slm{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
 @keyframes rise{from{transform:translateY(14px)}to{transform:none}}
}
