/* binasetu.com: the shared look of the feature, trade, facts and 404 pages (idea 103), in English, Bengali and Hindi.
   Copied from index.html's own tokens and pieces so the new pages match the home page; only "page pieces" at the end are new.
   Rules: .claude/skills/binasetu-website. */
* { scrollbar-width: thin; scrollbar-color: #d0dad9 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: #d0dad9; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #a9b8b6; }
:root {
  --teal-900: #0b3f40; --teal: #0e4f50; --teal-7: #136364; --teal-100: #e6f2f1; --teal-50: #f1f8f7; --deck: #138a86;
  --gold: #c79a3b; --gold-l: #e8c877; --ink: #15202a; --muted: #5d6974; --line: #e4e8eb; --bg: #f4f6f7; --bad: #b3261e; --ok: #2f7d4f;
  --deep: #072a2b;
  --mono: "JetBrains Mono", "Noto Sans Bengali", ui-monospace, Consolas, monospace;
  --g: 16px;
  /* x of the bridge spine, inside any full-width box (resolves against that box) */
  --sx: max(calc(var(--g) / 2 - 1px), calc((100% - 1200px) / 2 - 40px));
}
@media (min-width: 761px) { :root { --g: 40px; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Poppins, "Noto Sans Bengali", system-ui, sans-serif; color: var(--ink); background: #fff; font-size: 16px; line-height: 1.6; overflow-x: clip; }
body.bn { font-family: "Noto Sans Bengali", Poppins, system-ui, sans-serif; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { width: min(1200px, 100% - 2 * var(--g)); margin: 0 auto; }
.mark { font-weight: 900; letter-spacing: -.3px; font-family: Poppins, sans-serif; }
.mark i { font-style: normal; color: var(--gold); }
h1, h2, h3 { font-family: Poppins, "Noto Sans Bengali", sans-serif; font-weight: 600; margin: 0; line-height: 1.18; }
body.bn h1, body.bn h2, body.bn h3 { line-height: 1.38; font-family: "Noto Sans Bengali", Poppins, sans-serif; }
h2 { font-size: clamp(28px, 3.3vw, 42px); letter-spacing: -.02em; margin-bottom: 14px; }
h2 em { font-style: normal; color: var(--teal-7); }
.sub { color: var(--muted); max-width: 640px; margin: 0; font-size: 16.5px; }

/* buttons: Start free (main) and Talk on WhatsApp (second), nothing else */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-weight: 500; font-size: 15px; text-decoration: none; border-radius: 10px; padding: 11px 20px; border: 1px solid var(--teal); cursor: pointer; text-align: center; transition: background .2s, box-shadow .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn.p { background: var(--teal); color: #fff; }
.btn.p:hover { background: var(--teal-7); box-shadow: 0 10px 24px rgba(14,79,80,.25); }
.btn.o { background: #fff; color: var(--teal); }
.btn.o:hover { background: var(--teal-50); }
.btn.w { background: #fff; border-color: #fff; color: var(--teal-900); }
.btn.w:hover { box-shadow: 0 12px 30px rgba(0,0,0,.25), 0 0 0 4px rgba(232,200,119,.25); }
.btn.ow { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn.ow:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.btn.g { background: var(--gold); border-color: var(--gold); color: #1b1300; }
.btn.g:hover { box-shadow: 0 12px 30px rgba(0,0,0,.25), 0 0 0 4px rgba(232,200,119,.25); }
.btn.lg { padding: 14px 26px; font-size: 16px; border-radius: 12px; }
.btn .ic { width: 20px; height: 20px; stroke: currentColor; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* line icons: teal stroke, gold accent */
.ic { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.acc { stroke: var(--gold); }

/* small mono kicker pill: hairline, dot, letter-spaced */
.kick { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 5px 12px 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.kick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(199,154,59,.16); }
.kick .no { color: var(--gold); }
.kick.on-dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); color: #cfe6e3; }
body.bn .kick { letter-spacing: .02em; font-size: 12.5px; }
.head { margin-bottom: 48px; }
.head.c { text-align: center; }
.head.c .sub { margin: 0 auto; }

/* header */
header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
header .wrap { display: flex; align-items: center; gap: 16px; height: 66px; position: relative; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wm-icon { display: block; height: 32px; width: auto; flex: none; }
.bi-deck { fill: #138a86; } .bi-left { fill: #0e4f50; } .bi-right { fill: #c79a3b; }
footer .bi-deck { fill: #36bdb7; } footer .bi-left { fill: #fff; }
.logo .mark { display: block; font-size: 23px; color: var(--teal); line-height: 1; }
.logo small { display: block; font-family: Poppins, sans-serif; font-weight: 600; font-size: 10px; color: var(--muted); letter-spacing: .3px; white-space: nowrap; }
nav.main { display: flex; gap: 26px; margin-left: 18px; }
nav.main a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14.5px; white-space: nowrap; }
nav.main a:hover { color: var(--teal); }
.sp { flex: 1; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang button { border: 0; background: #fff; padding: 5px 10px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.lang button.on { background: var(--teal); color: #fff; }
@property --sf-a { syntax: '<angle>'; inherits: false; initial-value: 0turn; }
header a.sf { color: #0b3f40; font-weight: 600; padding: 4px 14px; border-radius: 999px; border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--sf-a), rgba(199,154,59,.18), rgba(199,154,59,.18) 55%, #c79a3b 72%, #fff1bd 80%, #c79a3b 88%, rgba(199,154,59,.18)) border-box;
  animation: sfSpin 3s linear infinite; }
header a.sf:hover { color: #8a6417; }
header a.sf { text-decoration: none; font-size: 14.5px; white-space: nowrap; margin-right: 12px; }
@media (max-width: 560px) { header a.hdr-sf { display: none; } }
@keyframes sfSpin { to { --sf-a: 1turn; } }
@media (prefers-reduced-motion: reduce) { header a.sf { animation: none; border-color: #c79a3b; } }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; padding: 0; place-items: center; }
.menu-btn .ic { width: 22px; height: 22px; }
@media (max-width: 960px) {
  nav.main { display: none; position: absolute; top: 66px; left: calc(-1 * var(--g)); right: calc(-1 * var(--g)); margin: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(12,40,42,.1); padding: 6px var(--g) 12px; }
  nav.main.open { display: flex; }
  nav.main a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .menu-btn { display: grid; }
}
@media (max-width: 560px) {
  header .wrap { gap: 8px; }
  .logo .wm-icon { height: 26px; } .logo .mark { font-size: 20px; } .logo { gap: 7px; }
}

/* quiet reveal: visible by default, hidden only when JS is on */
.hero { position: relative; overflow: hidden; color: #fff; padding: 76px 0 148px;
  background: radial-gradient(640px 420px at 80% 38%, rgba(199,154,59,.20), transparent 66%), radial-gradient(900px 500px at -10% -10%, rgba(19,138,134,.35), transparent 60%), linear-gradient(135deg, var(--teal-900) 0%, var(--teal) 52%, var(--teal-7) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 40%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 70% 80% at 72% 40%, #000 10%, transparent 72%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: #fff; }
.hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(34px, 3.5vw, 50px); letter-spacing: -.025em; margin-bottom: 20px; color: #fff; }
.hero h1 em { font-style: normal; color: var(--gold-l); }
.hero .lead { color: #cfe6e3; font-size: 17.5px; margin: 0 0 30px; max-width: 520px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .note { color: #9fc7c2; font-size: 14px; margin: 18px 0 0; }
.hero .note a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--gold-l); margin-left: 6px; white-space: nowrap; }
.hero .note a:hover { color: var(--gold-l); }
.cl { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.cl li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; }
.cl li::before { content: ""; position: absolute; left: 3px; top: 3px; width: 9px; height: 9px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); }
.closing { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 136px 0 104px;
  background: radial-gradient(520px 300px at 50% 0%, rgba(199,154,59,.28), transparent 70%), linear-gradient(135deg, var(--teal-900), var(--teal) 55%, var(--teal-7));
  clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%); }
.closing::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 65%); }
.closing .wrap { position: relative; }
.closing h2 { color: #fff; max-width: 760px; margin: 0 auto 14px; }
.closing h2 em { color: var(--gold-l); }
.closing p { color: #cfe6e3; margin: 0 auto 30px; max-width: 560px; }
@media (max-width: 640px) { .spine { bottom: -24px; } .closing { padding: 96px 0 72px; clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); } }
/* footer: brand row, 5 columns (small uppercase heading, teal bar on a hairline, plain link list), contact boxes, thin bottom row */
footer { background: var(--deep); color: #cfe6e3; padding: 46px 0 22px; font-size: 14.5px; }
footer .wrap { display: block; }
footer .wm-icon { height: 36px; margin-bottom: 8px; }
footer .mark { font-size: 24px; color: #fff; display: block; line-height: 1.1; }
footer small { display: block; font-weight: 600; font-family: Poppins, sans-serif; color: #9fc7c2; }
footer .fbrand p { margin: 10px 0 0; color: #9fc7c2; }
footer a { color: #cfe6e3; text-decoration: none; }
footer a:hover { color: #fff; }
.fcols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px 24px; margin-top: 34px; }
.fcol h4 { position: relative; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); font: 600 12.5px/1.4 Poppins, "Noto Sans Bengali", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.fcol h4::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 36px; height: 2px; background: #36bdb7; }
body.bn .fcol h4 { letter-spacing: .02em; font-size: 13.5px; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fcol li a { display: inline-block; font-size: 14.5px; line-height: 1.35; }
.fcol .fbox { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.fib { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; color: #cfe6e3; transition: border-color .2s, color .2s; }
.fbox:hover .fib, .fsoc a:hover { border-color: #36bdb7; color: #fff; }
.fic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fsoc .fic { width: 24px; height: 24px; }
.ftx { min-width: 0; }
.ftx small { font-weight: 400; font-size: 12.5px; line-height: 1.3; }
.ftx b { display: block; color: #fff; font-weight: 500; font-size: 14px; line-height: 1.35; white-space: nowrap; }
.fcol h4.fsub { margin-top: 26px; }
.fsoc { display: flex; gap: 12px; }
.fsoc a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; color: #cfe6e3; transition: border-color .2s, color .2s; }
.fbot { margin-top: 38px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; color: #9fc7c2; font-size: 13px; }
.fbot a { color: #cfe6e3; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .fcols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fcols { grid-template-columns: 1fr 1fr; gap: 30px 22px; } .fcol.fcontact { grid-column: 1 / -1; } .fbot { flex-direction: column; } }

/* phones: sticky Start free + WhatsApp bar */
.mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 10px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.mbar .btn { padding: 12px 16px; }
.mbar .btn.p { flex: 1; }
.mbar .btn.o { width: 50px; padding: 0; height: 46px; }
@media (max-width: 720px) { .mbar { display: flex; } body { padding-bottom: 74px; } }

.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 0 4px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-weight: 500; font-size: 16.5px; position: relative; transition: color .2s; }
.faq summary:hover { color: var(--teal); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--gold); line-height: 1; font-weight: 400; background: #fff; }
.faq details[open] summary::after { content: "–"; border-color: var(--gold); }
.faq .a { padding: 0 44px 20px 0; color: #33414c; font-size: 15.5px; }
.faq .a p { margin: 0 0 8px; }

/* ============ page pieces (idea 103) ============ */
.lang a { display: block; background: #fff; padding: 5px 10px; font-size: 13px; line-height: 1.6; color: var(--muted); text-decoration: none; }
.lang a.on { background: var(--teal); color: #fff; }
@media (max-width: 560px) { .lang a { padding: 5px 7px; font-size: 12.5px; } }
body.hi, body.hi h1, body.hi h2, body.hi h3, body.hi .fcol h4, body.hi .kick { font-family: "Noto Sans Devanagari", Poppins, system-ui, sans-serif; }
section.alt { background: #f8fafa; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.phero { padding: 44px 0 72px; }
.phero .hero-in { display: block; margin: 0 auto; width: min(1200px, 100% - 2 * var(--g)); }
.phero h1 { font-size: clamp(30px, 3.6vw, 46px); }
.phero .lead { max-width: 760px; }
.phero h1 { max-width: 900px; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 22px; padding: 0; font-size: 13.5px; color: #9fc7c2; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #6fa8a3; }
.crumbs a { color: #cfe6e3; text-decoration: none; }
.crumbs a:hover { color: #fff; }
.pg { padding: 72px 0; }
.pg .in { width: min(1200px, 100% - 2 * var(--g)); margin: 0 auto; }
.pg .head { margin-bottom: 36px; }
.pg h2 { font-size: clamp(24px, 2.7vw, 34px); }
.pg h3 { font-size: 17px; margin: 0 0 8px; line-height: 1.35; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pcards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard { border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: #fff; }
.pcard .ic { display: block; margin-bottom: 14px; width: 28px; height: 28px; }
.pcard p { margin: 0; color: #33414c; font-size: 15px; }
.pcard a.go { display: inline-block; margin-top: 12px; color: var(--teal); font-weight: 500; font-size: 14.5px; text-decoration: none; border-bottom: 1px solid var(--gold); }
.psteps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.psteps li { counter-increment: st; position: relative; padding: 18px 20px 18px 62px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.psteps li::before { content: counter(st); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; font: 500 13px/1 var(--mono); color: var(--teal); }
.psteps p { margin: 0; color: #33414c; font-size: 15px; }
.pex { border: 1px solid var(--line); border-radius: 12px; max-width: 620px; background: #fff; overflow: hidden; }
.pex-h { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 18px; background: var(--teal-50); border-bottom: 1px solid var(--line); font-weight: 500; font-size: 14.5px; }
.pex-h span { font: 500 11.5px/1.3 var(--mono); color: #8a6417; white-space: nowrap; }
.pex .r { display: flex; justify-content: space-between; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.pex .r:last-child { border-bottom: 0; }
.pex .r b { font-weight: 600; white-space: nowrap; }
.pex .r.net { background: #fbf7ec; font-weight: 600; }
.pexn { color: var(--muted); font-size: 14px; margin: 12px 0 0; max-width: 620px; }
.ptable-w { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ptable { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.ptable th { text-align: left; font-weight: 600; background: var(--teal-50); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ptable td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable.key td:first-child { font-weight: 500; width: 34%; }
.pprose { max-width: 760px; }
.pprose p { margin: 0 0 14px; color: #33414c; }
.prow { display: flex; flex-wrap: wrap; gap: 10px; }
.prow a { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--teal); text-decoration: none; font-size: 14.5px; background: #fff; }
.prow a:hover { border-color: var(--gold); }
.soontag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--gold); border-radius: 999px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .02em; color: #8a6417; background: #fff; white-space: nowrap; text-transform: none; }
.rowmore { display: inline-block; margin-top: 10px; color: var(--teal); font-weight: 500; font-size: 14.5px; text-decoration: none; border-bottom: 1px solid var(--gold); }
.nf { padding: 96px 0; text-align: center; }
.nf h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px; }
.nf p { color: var(--muted); margin: 0 auto 12px; max-width: 560px; }
.nf .cta { justify-content: center; margin-top: 26px; }
@media (max-width: 900px) { .pg { padding: 52px 0; } .pcards, .pcards.two, .psteps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .phero { padding: 28px 0 56px; } .cta .btn { flex: 1 1 auto; } .closing { padding: 96px 0 72px; clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}