/* ════════════════════════════════════════════════════════════════════════
   বাঙলা — product site
   ────────────────────────────────────────────────────────────────────────
   Register: how Adobe, Apple and Microsoft present software. The product
   carries the page. Screenshots run large on a dark ground; type is big,
   quiet and confident; colour arrives from the interface itself rather than
   from page decoration.

   What that rules out, deliberately: painted starbursts, folk-art borders,
   per-section colour washes. Those made the page look designed. This makes
   the product look designed, which is the point.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* One dark ground, three steps of elevation. */
  --bg:        #07100C;
  --bg-1:      #0C1A14;
  --bg-2:      #12241B;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);

  --fg:        #F2F7F4;
  --fg-2:      #B4C6BC;   /* ≥7:1 on --bg  */
  --fg-3:      #7E938A;   /* ≥4.5:1 on --bg */

  /* Accent: the brand jade, lifted so it reads on black. Used sparingly —
     links, one button, the odd rule. Everything else is greyscale. */
  --ac:        #16C078;
  --ac-2:      #0E9A5F;
  --ac-soft:   rgba(22,192,120,.12);

  --r:         14px;
  --r-lg:      20px;
  --maxw:      1200px;
  --gutter:    clamp(20px, 5vw, 48px);
  --font:      "Bangla", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 17px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ── type ───────────────────────────────────────────────────────────────
   Large sizes, tight tracking, low weight contrast. Bengali display needs a
   little negative tracking or the matras make it look loose. */
h1, h2, h3 { margin: 0 0 .45em; line-height: 1.14; letter-spacing: -.02em; font-weight: 700; color: #fff; }
h1 { font-size: clamp(38px, 6.4vw, 76px); font-weight: 800; letter-spacing: -.033em; }
h2 { font-size: clamp(28px, 4vw, 48px); letter-spacing: -.028em; }
h3 { font-size: clamp(19px, 2vw, 23px); }
p  { margin: 0 0 1em; color: var(--fg-2); }
a  { color: var(--ac); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; color: var(--fg); }

.lead    { font-size: clamp(18px, 1.9vw, 22px); color: var(--fg-2); max-width: 60ch; }
.kicker  { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); margin: 0 0 14px; }
.muted   { color: var(--fg-3); font-size: 14px; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 16px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ac); color: #04150D; }
.btn-primary:hover { background: #2AD98C; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--fg-3); background: rgba(255,255,255,.04); }
.btn:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

/* ── sections ───────────────────────────────────────────────────────────── */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section.tight { padding: clamp(44px, 6vw, 80px) 0; }
.section-1 { background: var(--bg-1); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── photographic bands ─────────────────────────────────────────────────
   Real Bangladesh photographs — the same ones the browser ships as wallpapers,
   so nothing here is stock or generated. They run full-bleed behind a section.

   The scrim is the whole trick. A photograph under body text will fail contrast
   somewhere no matter how dark it looks on average, so every band lays a fixed
   dark wash over the image and the copy sits on that, never on the photo. The
   wash is deliberately heavy: the picture is atmosphere, not the subject. */
.band { position: relative; isolation: isolate; overflow: hidden; }
.band > .band-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* vertical: soft seams into the page ground so a band never cuts abruptly */
    linear-gradient(180deg, var(--bg) 0%, rgba(7,16,12,.14) 13%, rgba(7,16,12,.14) 87%, var(--bg) 100%),
    /* horizontal: a plateau, then a cliff. The wash stays heavy across the whole
       copy column (roughly the left 52%), then falls away fast so the right of
       the frame is almost unscrimmed and the photograph reads as a photograph.
       Measured: the plateau holds the brightest ground under text at L≈0.09,
       which is what the ink colours below are chosen against. Widening the copy
       past the plateau is what broke this on an earlier pass. */
    linear-gradient(90deg,
      rgba(7,16,12,.93) 0%, rgba(7,16,12,.89) 46%, rgba(7,16,12,.80) 58%,
      rgba(7,16,12,.34) 78%, rgba(7,16,12,.06) 100%);
}
/* Keep direct-on-band copy inside the plateau. Cards and panels carry their own
   ground, so they are free to run the full width. */
@media (min-width: 901px) {
  .band > .wrap > h1, .band > .wrap > h2, .band > .wrap > h3,
  .band > .wrap > p, .band > .wrap > .kicker, .band > .wrap > .spec { max-width: min(56ch, 52%); }
}
/* Some photographs carry a bright patch inside the copy column. Measured, the
   Sundarbans frame reaches L=0.078 there — enough to drop 13px kicker text to
   4.48:1, just under the 4.5:1 minimum. This adds a flat extra wash for those
   frames rather than silently editing the picture file, so swapping the image
   later cannot quietly reintroduce the problem. */
.band-dim > .band-img { filter: brightness(.82); }

/* Below the copy column the horizontal gradient no longer protects anything, so
   narrow screens get the flat heavy wash back. */
@media (max-width: 900px) {
  .band::after {
    background:
      linear-gradient(180deg, var(--bg) 0%, rgba(7,16,12,.86) 14%, rgba(7,16,12,.86) 86%, var(--bg) 100%);
  }
}
/* A band's own text needs no extra treatment — the scrim already puts it on a
   near-solid ground — but cards over a photo look better slightly opaque than
   fully transparent. */
.band .card, .band .ed {
  background: rgba(9,20,15,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.14);
}
.band .card, .band .ed { background: rgba(9,20,15,.88); }
.band .ed.is-lead { background: linear-gradient(180deg, rgba(22,192,120,.18), rgba(9,20,15,.88) 42%); }

/* Text sitting directly on a band (not inside a card) gets a brighter ink and a
   caption-width limit, so it stays inside the dark part of the scrim. */
/* On a band, ink is chosen against the brightest ground the scrim allows rather
   than against the flat page colour. Lightening the scrim to let the photographs
   show raised that ground, so these are all brighter than their off-band
   equivalents — measured, not guessed. */
.band > .wrap > .lead,
.band > .wrap > p { color: #E4EFE9; }
.band > .wrap > .muted { color: #CBDBD2; }
.band .kicker { color: #6FE9B4; }
.band .spec dt { color: #CBDBD2; }
.band figcaption { color: #CBDBD2; }
.band .spec { border-top-color: rgba(255,255,255,.20); max-width: 720px; }
.band .spec div { border-bottom-color: rgba(255,255,255,.20); }
/* The FAQ is a full-width text block, so it needs its own panel rather than
   relying on the horizontal gradient. */
.band details.qa { border-bottom-color: rgba(255,255,255,.18); }
.band .qa-panel {
  background: rgba(9,20,15,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg);
  padding: 8px 26px 6px; margin-top: 24px;
}
.band .qa-panel details.qa:last-child { border-bottom: 0; }

/* ── hero: copy against the crest ───────────────────────────────────────
   Every page opens with its statement on the left and a large drawn emblem
   opposite it. The emblem is the site's signature: not a stock padlock icon but
   a struck seal — an outer ring of tick marks like a die-stamped edge, an inner
   perimeter that stands for the allowlist, and whatever mark belongs to that
   page at the centre. Drawn as inline SVG so it stays sharp at any size and
   costs no request. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .crest { order: -1; max-width: 260px; margin-inline: auto; }
}

.crest { width: 100%; max-width: 400px; justify-self: center; display: block; }
.crest .c-ring   { fill: none; stroke: var(--ac); stroke-opacity: .30; }
.crest .c-perim  { fill: none; stroke: var(--ac); stroke-opacity: .85; }
.crest .c-tick   { stroke: var(--ac); stroke-opacity: .55; stroke-linecap: round; }
.crest .c-body   { fill: none; stroke: #EAF6EF; stroke-opacity: .92; }
.crest .c-fill   { fill: var(--ac); fill-opacity: .13; }
.crest .c-dot    { fill: var(--ac); }
.crest .c-faint  { fill: none; stroke: #EAF6EF; stroke-opacity: .28; }

/* One slow rotation on the outer tick ring — enough to feel alive when the page
   loads, slow enough that it never competes with the copy. */
@keyframes crest-turn { to { transform: rotate(360deg); } }
.crest .c-spin { transform-origin: 200px 200px; animation: crest-turn 90s linear infinite; }
@media (prefers-reduced-motion: reduce) { .crest .c-spin { animation: none; } }

/* ── product shots — the page's main visual weight ──────────────────────── */
.shot {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4);
  background: var(--bg-2);
}
.shot img { display: block; width: 100%; height: auto; }
.shot-wide { margin-top: clamp(40px, 6vw, 72px); }
figcaption { margin-top: 12px; font-size: 13.5px; color: var(--fg-3); }

/* ── alternating feature rows (Adobe/Apple pattern) ─────────────────────── */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.row + .row { margin-top: clamp(56px, 8vw, 112px); }
.row.flip .row-text { order: 2; }
@media (max-width: 900px) { .row, .row.flip .row-text { grid-template-columns: 1fr; order: 0; } }

/* ── cards / grids ──────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px;
}
.card h3 { margin-bottom: 8px; }
.card p  { margin: 0; font-size: 15px; }
.card-n { font-size: 13px; font-weight: 700; color: var(--ac); letter-spacing: .1em; display: block; margin-bottom: 12px; }

/* ── spec list ──────────────────────────────────────────────────────────── */
.spec { border-top: 1px solid var(--line); }
.spec div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec dt, .spec b { color: var(--fg-3); font-weight: 600; }
.spec dd, .spec span { margin: 0; color: var(--fg); font-weight: 600; text-align: right; }

/* ── editions ───────────────────────────────────────────────────────────── */
.eds { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.ed {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 14px;
}
.ed.is-lead { border-color: rgba(22,192,120,.42); background: linear-gradient(180deg, var(--ac-soft), transparent 40%), var(--bg-1); }
.ed h3 { margin: 0; }
.ed .for { font-size: 13.5px; color: var(--ac); font-weight: 700; }
.ed ul { margin: 0; padding-left: 1.15em; }
.ed li { font-size: 15px; color: var(--fg-2); margin-bottom: 6px; }
.ed .btn { align-self: flex-start; margin-top: auto; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
details.qa { border-bottom: 1px solid var(--line); padding: 18px 0; }
details.qa summary { font-weight: 700; cursor: pointer; list-style: none; color: #fff; font-size: 17px; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; float: right; color: var(--ac); font-weight: 700; }
details.qa[open] summary::after { content: "−"; }
details.qa p { margin: 12px 0 0; font-size: 15.5px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 26px; }
.foot-cols div { display: flex; flex-direction: column; gap: 9px; }
.foot-cols b { color: var(--fg-3); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.foot-cols a { color: var(--fg-2); font-size: 14.5px; }
.foot-cols a:hover { color: var(--fg); }
.foot-fine { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--fg-3); }

/* ── reveal ─────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }