/* Reset, Bengali typography, layout primitives. Brand-agnostic. */

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:78px;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-bn);
  font-size:var(--fs-body);
  line-height:var(--lh-bn);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Bengali conjuncts break under negative tracking — never tighten body text. */
h1,h2,h3,h4{
  font-family:var(--font-bn);
  font-weight:700;
  line-height:1.4;
  letter-spacing:0;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(30px,6.2vw,52px);line-height:1.28}
h2{font-size:clamp(25px,4.4vw,37px);line-height:1.32}
h3{font-size:clamp(19px,2.4vw,23px)}
h4{font-size:18px;font-weight:600}

p{color:var(--ink-2);text-wrap:pretty}
p + p{margin-top:14px}

a{color:var(--brand-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-deep)}

img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{padding-left:1.2em}
li{margin:6px 0}

button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}

:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}

/* Latin digits and codes inside Bengali sentences. Prices always use this. */
.num,
.price,
time,
code{
  font-family:var(--font-lat);
  font-feature-settings:"tnum" 1;
  letter-spacing:-0.01em;
}

/* ---- layout ---- */

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sec{padding:clamp(56px,8vw,104px) 0}
.sec-alt{background:var(--bg-alt)}
.sec-sunk{background:var(--bg-sunk)}
.sec-dark{background:var(--dark);color:var(--dark-ink)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--dark-ink)}
.sec-dark p{color:var(--dark-muted)}

.sec-head{max-width:660px;margin-bottom:clamp(30px,4vw,48px)}
.sec-head p{margin-top:12px;font-size:18px;color:var(--muted)}
.sec-dark .sec-head p{color:var(--dark-muted)}

.eyebrow{
  display:inline-block;
  font-family:var(--font-lat);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-ink);
  margin-bottom:12px;
}
.sec-dark .eyebrow{color:var(--brand-on-dark)}

.lead{font-size:clamp(18px,2.3vw,21px);color:var(--muted);line-height:1.7}

.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
}

.stack-h{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---- reveal on scroll ---- */

/* Content is visible by default. It is hidden ONLY once an inline head script has
   set .reveal-ready, and ui.js strips that class again if IntersectionObserver
   never actually delivers a callback. No JS, blocked JS or a dead observer must
   never leave the page blank. */
.reveal{
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
html.reveal-ready .reveal:not(.in){
  opacity:0;
  transform:translateY(18px);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.reveal-ready .reveal:not(.in){opacity:1;transform:none}
  .reveal{transition:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Mobile sticky contact bar overlaps the page foot; keep clear of it. */
@media (max-width:760px){
  body{padding-bottom:66px}
}

@media print{
  .sticky-bar,.site-nav,.demo-bar{display:none !important}
  body{padding-bottom:0}
}