/* ==========================================================================
   SnapZilo — the website, every page.

   The house is eaipe-web's: a near-black ground, one accent, flat filled
   controls that lift on hover rather than glow, and cards drawn as a pale wash
   over the ground instead of as their own solid surface. The furniture is
   SnapZilo's own, lifted from the app (src/theme/tokens.js and the prototype):
   the Cobalt accent (#2B59FF, #5B7FFF after dark), the dark palette's greys,
   and the app's three families —

     Bricolage Grotesque  every heading and every big number (opsz axis, so the
                          display cut takes over at large sizes, as in the app)
     Geist                the running text and the UI
     Geist Mono           the small capitals the app labels things with —
                          "WI-FI PASSWORD", "CHECK-IN" — and the floating chips

   None of the three has Bengali, so each stack falls through to a Bengali
   family glyph by glyph: Anek Bangla under the headings, Hind Siliguri under
   the rest. A Bangla sentence keeps its Latin words ("SnapZilo", "Wi-Fi") in
   the app's own type.

   Anything drawn as the app — the phones, the mock screenshots — is drawn
   light, the way the app's design is and the way a real screenshot would be.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:        #0A0B0E;
  --bg2:       #0E0F12;
  --card:      #14161B;
  --card2:     #1A1D23;
  --chip:      rgba(255,255,255,.035);
  --line:      rgba(255,255,255,.08);
  --line2:     rgba(255,255,255,.14);

  /* the pale wash every card is drawn with, rather than a solid fill */
  --pane:      linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));

  /* ink — the app's dark ramp */
  --fg:        #F2F3F5;
  --fg2:       #B8BCC6;
  --fg3:       #959AA6;
  --fg4:       #7A7F8B;

  /* accent — Cobalt */
  --acc:       #2B59FF;
  --acc-hi:    #4269FF;
  --acc2:      #5B7FFF;
  --acc3:      #8FA6FF;
  --acc-ink:   #B4C3FF;
  --acc-soft:  rgba(43,89,255,.15);
  --acc-line:  rgba(91,127,255,.42);
  --ok:        #2DBE74;
  --no:        #FF6A50;

  /* the app, as the app draws itself (light) */
  --a-ink:     #15171C;
  --a-body:    #4B4F59;
  --a-soft:    #5B5F69;
  --a-muted:   #6B6F7A;
  --a-faint:   #8A8E98;
  --a-line:    #E9EAEE;
  --a-track:   #EEF0F3;
  --a-tray:    #F0F2F6;
  --a-field:   #ECEEF4;
  --a-nav:     #F1F2F6;
  --a-surface: #FBFBFD;
  --a-acc:     #2B59FF;
  --a-accs:    #EBF0FF;

  /* radii */
  --r-chip:  14px;
  --r-field: 16px;
  --r-tile:  18px;
  --r-card:  20px;
  --r-hero:  24px;
  --r-big:   30px;

  /* type */
  --font-head: 'Bricolage Grotesque', 'Anek Bangla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Geist', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Hind Siliguri', monospace;

  --pad: clamp(16px, 4vw, 24px);
  --sec: clamp(48px, 9vw, 104px);
}

/* ── base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .wordmark, .big, .stats strong, .step__no {
  font-family: var(--font-head);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
  font-weight: 800;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

a { color: var(--acc-ink); text-decoration: none; transition: color .18s ease; }
a:hover { color: #fff; }

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

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

/* Bengali sits taller than Latin — its vowel signs reach above and below the
   line — so the tight leading the English headings use would clip it. main.js
   writes <html lang>, which is all this needs. Negative tracking hurts
   conjuncts, so Bangla runs at zero. */
html[lang="bn"] body { line-height: 1.75; }
html[lang="bn"] :is(h1, h2, h3, h4, .big, .stats strong) { line-height: 1.32; letter-spacing: 0; }
html[lang="bn"] .kicker { letter-spacing: .04em; }

/* The cobalt light the page sits on. Fixed, so the ground reads the same from
   the header to the footer; behind the content, above the body colour. */
.wash {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 460px at 82% -10%, rgba(43,89,255,.26), transparent 66%),
    radial-gradient(640px 420px at 0% 18%, rgba(43,89,255,.10), transparent 70%),
    radial-gradient(700px 500px at 50% 112%, rgba(43,89,255,.08), transparent 70%);
}
/* A faint dot grid under the hero only — the "sorted" feeling, kept quiet. */
.grid-dots {
  position: absolute; inset: 0 0 auto 0; height: 760px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
}

.wrap { width: min(1160px, 100%); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--acc); color: #fff; font-weight: 700;
  transition: top .2s ease;
}
.skip:focus { top: 12px; color: #fff; }

/* the accented word in a heading */
.hl { color: var(--acc3); }

/* the app's 7px accent dot — in pills, chips, badges */
.dot {
  display: inline-block; width: 7px; height: 7px; flex: none;
  border-radius: 999px; background: var(--acc2);
}

/* ── icons ────────────────────────────────────────────────────────────── */

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── wordmark ─────────────────────────────────────────────────────────── */

.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; flex: none; }
.brand:hover { color: #fff; opacity: .9; }
.brand__mark { width: 30px; height: 30px; border-radius: 9px; }

.wordmark { font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

/* ── buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: var(--r-field);
  font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--sm { padding: 10px 18px; border-radius: 999px; font-size: 14px; }
.btn--lg { padding: 16px 24px; font-size: 16px; border-radius: 18px; }

.btn--fill { background: var(--acc); color: #fff; box-shadow: 0 8px 24px rgba(43,89,255,.35); }
.btn--fill:hover { color: #fff; background: var(--acc-hi); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(43,89,255,.5); }
.btn--fill:active { transform: translateY(0) scale(.97); }
.btn--lg.btn--fill { box-shadow: 0 14px 34px rgba(43,89,255,.38); }
.btn--lg.btn--fill:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(43,89,255,.52); }
.btn--fill small { font-size: 13px; font-weight: 500; opacity: .78; }

.btn--ghost { border: 1px solid var(--line2); color: #EDEEF2; }
.btn--ghost:hover { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.btn__arrow { font-size: 15px; opacity: .8; }

/* The quiet cobalt pill — an invitation rather than the main action. */
.btn--soft {
  padding: 11px 18px; border-radius: 999px; font-size: 14px;
  border: 1px solid rgba(91,127,255,.5); background: var(--acc-soft); color: #CBD6FF;
}
.btn--soft:hover { background: rgba(43,89,255,.28); color: #fff; }

/* ── header ───────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,11,14,.78);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-head.is-stuck { background: rgba(10,11,14,.92); box-shadow: 0 10px 30px -18px #000; }

/* Three columns: brand | nav | side. The two outer columns share the leftover
   space equally, so the nav sits in the middle of the bar. */
.head__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px; height: 66px;
}
.brand { justify-self: start; }

.head__nav { display: flex; align-items: center; gap: 24px; font-size: 14.5px; white-space: nowrap; }
.head__nav a { color: #9A9EAA; }
.head__nav a:hover { color: #fff; }

.head__side { display: flex; align-items: center; gap: 10px; justify-self: end; }

.lang {
  display: flex; align-items: center; gap: 1px; padding: 2px; flex: none;
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.lang__tab {
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  color: var(--fg3);
  transition: background-color .2s ease, color .2s ease;
}
.lang__tab:hover { color: var(--fg); }
.lang__tab.is-on { background: var(--acc); color: #fff; }

/* Phone-width menu. Hidden above 920px, where the nav row carries the links. */
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; flex: none; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-chip);
  background: rgba(255,255,255,.03);
}
.burger span { height: 2px; border-radius: 2px; background: #EDEEF2; transition: transform .25s ease; }
.burger.is-on span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger.is-on span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.drawer {
  overflow: hidden; max-height: 0; opacity: 0;
  border-top: 1px solid transparent;
  transition: max-height .3s ease, opacity .25s ease, border-color .25s ease;
}
.drawer.is-open { max-height: 480px; opacity: 1; border-top-color: rgba(255,255,255,.07); }
.drawer__nav {
  width: min(1160px, 100%); margin-inline: auto;
  padding: 6px var(--pad) 16px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 16.5px;
}
.drawer__nav a { padding: 13px 14px; border-radius: var(--r-chip); color: #E7E8EE; font-weight: 600; }
.drawer__nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.drawer__cta {
  margin-top: 8px; padding: 14px !important; text-align: center;
  background: var(--acc); color: #fff !important; font-weight: 700;
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero { position: relative; padding: clamp(30px, 6vw, 72px) 0 clamp(24px, 4vw, 48px); }

.hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(28px, 5vw, 56px); align-items: center;
}

/* The app's privacy pill: soft cobalt, a dot, short words. */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 12px; margin-bottom: 20px;
  border: 1px solid var(--acc-line); border-radius: 999px;
  background: rgba(43,89,255,.13);
  font-size: 13.5px; font-weight: 600; color: var(--acc-ink);
}
.pill .dot { box-shadow: 0 0 0 4px rgba(91,127,255,.2); animation: zPing 2.4s ease-in-out infinite; }
@keyframes zPing { 0%,100% { box-shadow: 0 0 0 3px rgba(91,127,255,.22); } 50% { box-shadow: 0 0 0 6px rgba(91,127,255,.06); } }

.hero__title {
  margin-bottom: 18px;
  font-size: clamp(42px, 8.4vw, 76px); line-height: 1.0; letter-spacing: -.035em;
  text-wrap: balance;
}
html[lang="bn"] .hero__title { font-size: clamp(36px, 7vw, 62px); line-height: 1.25; }

.hero__sub {
  margin-bottom: 28px;
  font-size: clamp(16.5px, 2.2vw, 19px); color: var(--fg2); max-width: 33em;
  text-wrap: pretty;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }

.hero__ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--fg3); }
.hero__ticks li { display: flex; align-items: center; gap: 8px; }
.hero__ticks svg { width: 16px; height: 16px; color: var(--acc2); stroke-width: 2.6; }

/* ── hero stage: the welcome art, bigger ────────────────────────────────
   The app's first screen fans out three screenshots — a ramen recipe, a
   Wi-Fi note, a hotel booking — with two of the things SnapZilo pulls off
   them floating beside them. Same three here, on a stage that scales with the
   column, plus the reading line from the import screen sweeping the front one.
   Decorative: the words it shows are said again in the sections below. */

.stage {
  position: relative; width: min(100%, 560px); margin-inline: auto;
  aspect-ratio: 560 / 520;
  container-type: inline-size;
}
.stage__bloom {
  position: absolute; left: 50%; top: 46%; width: 78%; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 999px;
  background: radial-gradient(circle, rgba(43,89,255,.42), transparent 66%);
  filter: blur(16px);
  animation: zPulse 7s ease-in-out infinite;
}
.stage__card {
  position: absolute; border-radius: 2.4cqw;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}
.stage__card--l { left: 6%;  top: 15%; width: 30%; rotate: -9deg; animation: zFloatA 8.5s ease-in-out infinite; }
.stage__card--r { right: 5%; top: 17%; width: 30%; rotate: 8deg;  animation: zFloatC 9.5s ease-in-out infinite; }
.stage__card--f { left: 33%; top: 3%;  width: 34%; z-index: 2;    animation: zFloatB 7s ease-in-out infinite; }

/* The reading line: the import screen's accent bar with its glow, sweeping
   the front screenshot top to bottom while the chips wait to be "found". */
.stage__scan {
  position: absolute; left: -4%; right: -4%; top: 0; height: 2px; z-index: 3;
  background: var(--acc2);
  box-shadow: 0 0 14px 3px rgba(91,127,255,.85);
  border-radius: 2px;
  animation: zScan 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
}

.chip {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px; border-radius: 16px;
  background: #fff; color: var(--a-ink);
  box-shadow: 0 16px 34px -10px rgba(0,0,0,.6);
  white-space: nowrap;
}
.chip__k {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--a-muted); line-height: 1.2;
}
.chip__v { display: block; font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.chip .dot { background: var(--a-acc); width: 8px; height: 8px; }
.chip__act {
  margin-left: 4px; padding: 6px 11px; border-radius: 999px;
  background: var(--a-accs); color: var(--a-acc); font-size: 12px; font-weight: 600;
}
.chip--wifi { left: 0;    top: 60%; animation: zFloatB 8s ease-in-out infinite; }
.chip--date { right: 0;   top: 46%; animation: zFloatA 9s ease-in-out infinite; }
.chip--pile { left: 37%;  top: 82%; animation: zFloatC 10s ease-in-out infinite;
  background: var(--card); color: var(--fg); box-shadow: 0 16px 34px -12px rgba(0,0,0,.7), 0 0 0 1px var(--line2); }
.chip--pile .chip__k { color: var(--fg3); }
.chip--pile .dot { background: var(--acc2); }

@keyframes zFloatA { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes zFloatB { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes zFloatC { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes zPulse  { 0%,100% { opacity: .45; scale: 1; } 50% { opacity: .8; scale: 1.06; } }
@keyframes zScan   { 0% { top: 4%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: 96%; opacity: 0; } }
@keyframes zSpin   { to { transform: rotate(360deg); } }

/* ── a mock screenshot ────────────────────────────────────────────────────
   The design's ShotThumb, transcribed: a drawing of a screenshot, not a
   screenshot. Every measure is the prototype's, in cqw — hundredths of the
   thumbnail's own width — so one drawing serves the 300px hero card and the
   60px search result alike. The colours come off one hue (--h), the way the
   prototype mixes them: oklch(.95 .035 h) for the header, (.45 .12 h) for the
   app's name, (.965 .025 h) for the highlighted line.

   .ms is the container; .ms__in is the screenshot. They are two boxes because
   an element cannot size itself in its own container units. */

.ms { container-type: inline-size; width: 100%; --h: 250; }
.ms__in {
  width: 100%; aspect-ratio: 9 / 19.5; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 7cqw; background: #fff; color: #1B1D22;
  box-shadow: inset 0 0 0 1px rgba(20,24,40,.08);
  font-family: var(--font-body);
  --head: oklch(.95 .035 var(--h));
  --tag:  oklch(.45 .12 var(--h));
  --soft: oklch(.965 .025 var(--h));
}
@supports not (color: oklch(0 0 0)) {
  .ms__in { --head: #E8EEF8; --tag: #2D4D7C; --soft: #EFF3FA; }
}
.ms__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3.5cqw 7cqw 1.5cqw; background: var(--head);
  font-size: 4.2cqw; font-weight: 600; line-height: 1.2;
}
.ms__bar i { width: 6cqw; height: 3cqw; border-radius: 1cqw; background: #1B1D22; }
.ms__app {
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 2.5cqw 7cqw 4.5cqw; background: var(--head);
  font-size: 5.4cqw; font-weight: 600; color: var(--tag); line-height: 1.2;
}
.ms__app i { flex: none; width: 6.5cqw; height: 6.5cqw; border-radius: 2cqw; background: var(--tag); }
.ms__app span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms__body { display: flex; flex-direction: column; gap: 3.6cqw; padding: 7cqw; }
.ms__title {
  font-family: var(--font-head); font-weight: 700; font-size: 9.4cqw;
  line-height: 1.08; letter-spacing: -.02em; color: #1B1D22;
}
.ms__line { font-size: 5.8cqw; line-height: 1.35; color: #4B4F59; }
.ms__key {
  margin-top: 2cqw; padding: 4.5cqw 5cqw; border-radius: 4cqw;
  background: var(--soft); font-family: var(--font-mono); font-size: 6.2cqw; font-weight: 500;
  line-height: 1.2; color: #1B1D22; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ms__skel { display: flex; flex-direction: column; gap: 3cqw; margin-top: 3cqw; }
.ms__skel i { height: 3cqw; border-radius: 2cqw; background: #EEF0F3; }
.ms__skel i:nth-child(1) { width: 82%; }
.ms__skel i:nth-child(2) { width: 64%; }
.ms__skel i:nth-child(3) { width: 74%; }
/* Bengali in a screenshot: the same drawing, a touch more leading. */
.ms [lang="bn"] { line-height: 1.45; letter-spacing: 0; }

.ms--meme .ms__bar { background: #fff; }
.ms__meme {
  padding: 6cqw 7cqw 5cqw;
  font-family: var(--font-head); font-weight: 800; font-size: 9.6cqw; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.01em; color: #1B1D22;
}
.ms__pic {
  flex: 1; margin: 0 5cqw 5cqw; border-radius: 4cqw;
  background: repeating-linear-gradient(135deg, #F1F2F5 0 6px, #E6E8ED 6px 12px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 4.8cqw; color: #6F7480;
}

/* The app badge in a thumbnail's corner: the app's name on a pill in its own
   colour, a thin white ring so a bKash pill reads on a bKash-pink screenshot. */
.badge {
  position: absolute; left: 6px; bottom: 6px; z-index: 2; max-width: 86%;
  padding: 2px 7px; border-radius: 10px;
  background: var(--c, #3C4043); color: #fff;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  font-size: 10.5px; font-weight: 700; line-height: 1.35; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── sample strip ─────────────────────────────────────────────────────────
   Two rows of screenshots sliding in opposite directions, each wearing the
   app it came from. Each row is two identical halves, so translating by
   exactly -50% lands on an identical frame and the loop has no seam. main.js
   makes each half at least as wide as the strip, repeating the set --n times,
   and the duration scales by --n so a wider screen does not mean a faster row.
   Decorative, and hidden from a screen reader: main.js fills it. */

.strip {
  padding: clamp(16px, 3vw, 28px) 0;
  border-block: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip__row { display: flex; width: max-content; }
.strip__row + .strip__row { padding-top: 14px; }
.strip__track { display: flex; gap: 14px; padding-right: 14px; will-change: transform; }
.strip__track--l { animation: zMarquee  calc(150s * var(--n, 1)) linear infinite; }
.strip__track--r { animation: zMarqueeR calc(165s * var(--n, 1)) linear infinite; }
.strip__shot {
  position: relative; flex: none; width: clamp(92px, 22vw, 124px);
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
.strip__shot .ms__in { border-radius: 0; }
@keyframes zMarquee  { from { transform: translate3d(0,0,0); }    to { transform: translate3d(-50%,0,0); } }
@keyframes zMarqueeR { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

/* ── stats ────────────────────────────────────────────────────────────── */

.stats-sec { padding: clamp(28px, 5vw, 52px) 0 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.stats li {
  padding: 20px 20px 18px; border-radius: var(--r-tile);
  background: var(--pane); border: 1px solid var(--line);
}
.stats strong { display: block; font-size: clamp(28px, 5vw, 38px); letter-spacing: -.035em; }
.stats strong .hl { color: var(--acc3); }
.stats li > span { display: block; margin-top: 4px; font-size: 14px; color: var(--fg3); }

/* ── sections ─────────────────────────────────────────────────────────── */

.section { padding: var(--sec) 0 0; scroll-margin-top: 80px; }
.section:last-of-type { padding-bottom: var(--sec); }

.sec-head { margin-bottom: clamp(28px, 4vw, 40px); max-width: 760px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(30px, 5.4vw, 50px); letter-spacing: -.03em; margin-bottom: 14px; text-wrap: balance; }
html[lang="bn"] .sec-head h2 { font-size: clamp(27px, 4.6vw, 42px); }
.sec-head p { color: var(--fg2); font-size: clamp(16px, 1.6vw, 17.5px); max-width: 44em; text-wrap: pretty; }
.sec-head--center p { margin-inline: auto; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 500; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--acc3);
}
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--acc2); }

/* ── how it works ─────────────────────────────────────────────────────────
   The three steps drive the phone beside them. main.js advances it on a timer
   until the reader picks a step, and follows them from then on. The phone is
   decorative: the step it is showing is written out in the step itself. */

.how__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.steps { display: flex; flex-direction: column; gap: 12px; }
.how__phone { display: flex; justify-content: center; }

.step {
  position: relative; width: 100%; text-align: left; padding: 20px 20px 20px;
  border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: var(--chip);
  transition: background-color .25s ease, border-color .25s ease;
}
.step:hover { border-color: rgba(255,255,255,.18); }
.step.is-on { border-color: rgba(91,127,255,.55); background: rgba(43,89,255,.11); }
/* The step that is on carries a thin bar that fills while the phone holds it,
   so a reader can see the autoplay coming before it moves. */
.step__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--acc2); }
.steps.is-auto .step.is-on .step__bar { animation: zStepBar var(--step-ms, 4800ms) linear forwards; }
@keyframes zStepBar { from { width: 0; } to { width: 100%; } }

.step__top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.step__no {
  width: 32px; height: 32px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; letter-spacing: 0;
  background: rgba(255,255,255,.08); color: #9A9EAA;
  transition: background-color .25s ease, color .25s ease;
}
.step.is-on .step__no { background: var(--acc); color: #fff; }
.step__title { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: #fff; }
html[lang="bn"] .step__title { letter-spacing: 0; }
.step__txt { display: block; color: var(--fg2); font-size: 15px; line-height: 1.6; padding-left: 44px; }

.steps__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line);
}
.steps__foot p { flex: 1; min-width: 200px; font-size: 14.5px; color: var(--fg3); }

/* ── the phone ────────────────────────────────────────────────────────────
   The prototype's Android frame (A1–A3): 384 × 832 with a 12px bezel, a
   punch-hole camera, Material's tonal nav bar. Everything inside the screen
   is measured in --u, one prototype pixel at whatever width the phone is
   drawn — the screen is the container, 360 of those pixels wide. */

.droid {
  /* the bezel is the prototype's 12px of 384 — given off the phone's own
     width, since a padding percentage would read the parent's */
  --w: min(312px, 78vw);
  position: relative; flex: none;
  width: var(--w); aspect-ratio: 384 / 832;
  padding: calc(var(--w) * .03125); border-radius: 10.4% / 4.8%;
  background: #111215;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 1.5px #2A2C31;
}
.droid::before { /* a cobalt halo the phone stands in */
  content: ""; position: absolute; inset: 8% -18%; z-index: -1;
  background: radial-gradient(closest-side, rgba(43,89,255,.35), transparent);
  filter: blur(30px);
}
.droid__screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 8.3% / 3.7%;
  background: var(--a-surface); color: var(--a-ink);
  container-type: inline-size;
  --u: calc(100cqw / 360);
  font-size: calc(14 * var(--u)); line-height: 1.35;
}
.droid__status {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; height: calc(36 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(22 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600;
}
.droid__status b { display: flex; gap: calc(5 * var(--u)); align-items: center; }
.droid__status b i:first-child { width: calc(10 * var(--u)); height: calc(10 * var(--u)); background: var(--a-ink); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.droid__status b i:last-child { width: calc(8 * var(--u)); height: calc(13 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--a-ink); }
.droid__cam {
  position: absolute; left: 50%; top: calc(12 * var(--u)); z-index: 7;
  width: calc(12 * var(--u)); height: calc(12 * var(--u)); translate: -50% 0;
  border-radius: 999px; background: #000;
}
.droid__gesture {
  position: absolute; left: 50%; bottom: calc(6 * var(--u)); z-index: 7;
  width: calc(108 * var(--u)); height: calc(4 * var(--u)); translate: -50% 0;
  border-radius: 999px; background: var(--a-ink);
}

/* one screen at a time — which one is decided by a class, not an animation,
   so reduced motion can stop every loop without stranding a screen */
.scr {
  position: absolute; left: 0; right: 0; top: calc(36 * var(--u)); bottom: 0;
  display: none; flex-direction: column;
}
.scr.is-on { display: flex; animation: zFade .45s ease; }
@keyframes zFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* shared pieces inside the phone */
.a-title { font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.a-btn {
  display: flex; align-items: center; justify-content: center;
  height: calc(52 * var(--u)); border-radius: calc(18 * var(--u));
  background: var(--a-acc); color: #fff; font-weight: 600; font-size: calc(16 * var(--u));
}
.a-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px;
  background: var(--a-accs); color: var(--a-acc); font-weight: 600; font-size: calc(12.5 * var(--u));
}
.a-pill .dot, .a-dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 999px; background: var(--a-acc); }
.a-mono { font-family: var(--font-mono); }

/* screen 1 · permission */
.scr--perm { padding: calc(8 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u)); gap: calc(16 * var(--u)); }
.scr--perm .a-back { font-size: calc(24 * var(--u)); line-height: 1; height: calc(28 * var(--u)); color: var(--a-ink); }
.scr--perm .a-title { font-size: calc(30 * var(--u)); }
.scr--perm p { font-size: calc(15 * var(--u)); line-height: 1.45; color: var(--a-soft); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); }
.tiles i { position: relative; aspect-ratio: 1; border-radius: calc(10 * var(--u)); overflow: hidden; }
.tiles .t-photo { opacity: .5; background: repeating-linear-gradient(135deg, #E9EBEF 0 5px, #DCDFE5 5px 10px); }
.tiles .t-shot {
  background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--a-acc);
  display: flex; flex-direction: column; gap: calc(5 * var(--u)); padding: calc(10 * var(--u)) calc(9 * var(--u));
}
.tiles .t-shot b { height: calc(6 * var(--u)); width: 70%; border-radius: 3px; background: var(--a-ink); }
.tiles .t-shot s { height: calc(4 * var(--u)); border-radius: 2px; background: #D6D8DD; text-decoration: none; }
.tiles .t-shot s + s { width: 60%; }
.tiles .t-shot u { margin-top: auto; height: calc(10 * var(--u)); width: 80%; border-radius: 3px; background: var(--a-accs); }
.checks { display: flex; flex-direction: column; gap: calc(10 * var(--u)); font-size: calc(14.5 * var(--u)); }
.checks span { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.checks svg {
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: calc(4 * var(--u));
  border-radius: 999px; background: var(--a-acc); color: #fff; stroke-width: 3;
}
.scr--perm .a-btn { margin-top: auto; }

/* screen 2 · first import */
.scr--import { padding: calc(14 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u)); gap: calc(18 * var(--u)); }
.imp__n {
  font-family: var(--font-head); font-weight: 800; font-size: calc(68 * var(--u));
  line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.imp__of { margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); color: var(--a-soft); }
.imp__bar { height: calc(8 * var(--u)); border-radius: 999px; background: var(--a-track); overflow: hidden; }
.imp__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--a-acc); }
.imp__row { display: flex; gap: calc(16 * var(--u)); align-items: flex-start; }
.imp__shot {
  position: relative; flex: none; width: calc(108 * var(--u));
  border-radius: calc(9 * var(--u)); box-shadow: 0 12px 28px -8px rgba(20,24,40,.25);
}
.imp__shot .stage__scan { animation-duration: 2.2s; }
.imp__found { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.imp__found > span { font-family: var(--font-mono); font-size: calc(11 * var(--u)); color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp__found p {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: calc(8 * var(--u)); border-bottom: 1px solid var(--a-track);
  font-size: calc(13 * var(--u));
}
.imp__found b { font-family: var(--font-mono); font-weight: 500; font-size: calc(14 * var(--u)); font-variant-numeric: tabular-nums; }
.imp__end { margin-top: auto; font-size: calc(13.5 * var(--u)); line-height: 1.45; color: var(--a-muted); text-align: center; }
.imp__done { margin-top: auto; display: none; flex-direction: column; gap: calc(12 * var(--u)); }
.imp__done .a-title { font-size: calc(21 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
.scr--import.is-done .imp__end { display: none; }
.scr--import.is-done .imp__done { display: flex; animation: zFade .4s ease; }

/* screen 3 · Library (A1) */
.scr--home { padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(80 * var(--u)); gap: calc(14 * var(--u)); overflow: hidden; }
.home__top { display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--u)); }
.home__top .a-title { font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
.home__av {
  width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--a-accs); color: var(--a-acc); font-weight: 700; font-size: calc(14 * var(--u));
}
.home__search {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  height: calc(52 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: 999px;
  background: var(--a-field); color: var(--a-soft); font-size: calc(14.5 * var(--u));
}
.home__search svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2.4; }
.home__chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(8 * var(--u));
  border: 1px solid #CFD2D9; font-size: calc(12.5 * var(--u)); font-weight: 500;
}
.home__need {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u));
  background: var(--a-accs);
}
.home__need div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.home__need em { font-style: normal; font-family: var(--font-mono); font-size: calc(10.5 * var(--u)); letter-spacing: .06em; color: var(--a-acc); }
.home__need b { font-size: calc(15 * var(--u)); font-weight: 600; }
.home__need span { font-family: var(--font-mono); font-size: calc(12.5 * var(--u)); color: var(--a-body); }
.home__need > i {
  font-style: normal; padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 999px;
  background: var(--a-acc); color: #fff; font-size: calc(13 * var(--u)); font-weight: 600;
}
.home__h { font-weight: 600; font-size: calc(15.5 * var(--u)); }
.piles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.piles > div {
  position: relative; height: calc(112 * var(--u)); overflow: hidden;
  border-radius: calc(16 * var(--u)); background: var(--a-tray);
}
.pile__n { position: absolute; left: calc(14 * var(--u)); top: calc(12 * var(--u)); font-size: calc(14.5 * var(--u)); font-weight: 600; }
.pile__c { position: absolute; left: calc(14 * var(--u)); top: calc(32 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--a-muted); }
.piles .ms {
  position: absolute; right: calc(14 * var(--u)); top: calc(50 * var(--u)); width: calc(62 * var(--u));
  rotate: 6deg; border-radius: calc(5 * var(--u)); box-shadow: 0 6px 14px -4px rgba(20,24,40,.25);
}
.droid__nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(80 * var(--u));
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-top: calc(12 * var(--u)); background: var(--a-nav);
}
.droid__nav span {
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u));
  font-size: calc(11.5 * var(--u)); color: var(--a-soft);
}
.droid__nav i {
  width: calc(56 * var(--u)); height: calc(30 * var(--u)); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.droid__nav svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); stroke-width: 2.2; }
.droid__nav .is-on { color: var(--a-ink); font-weight: 600; }
.droid__nav .is-on i { background: var(--a-accs); color: var(--a-acc); }

/* screen · detail (A3), the one the actions section drives */
.scr--detail { overflow: hidden; }
.det__bar { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(16 * var(--u)); }
.det__bar svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.det__bar b { flex: 1; min-width: 0; font-size: calc(17 * var(--u)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.det__tray {
  margin: 0 calc(16 * var(--u)); padding: calc(14 * var(--u)) 0 calc(16 * var(--u));
  border-radius: calc(20 * var(--u)); background: var(--a-tray);
  display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u));
  height: calc(372 * var(--u));
}
/* the Image / Text switch at the top of the tray */
.seg { display: flex; gap: calc(2 * var(--u)); padding: calc(3 * var(--u)); border-radius: calc(10 * var(--u)); background: #E6E8EC; }
.seg button {
  padding: calc(5 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u));
  font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--a-muted);
}
.seg button.is-on { background: #fff; color: var(--a-ink); box-shadow: 0 1px 3px rgba(20,24,40,.12); }
.det__img { position: relative; width: calc(136 * var(--u)); min-height: 0; flex: 1; overflow: hidden; border-radius: calc(10 * var(--u)); box-shadow: 0 12px 28px -8px rgba(20,24,40,.25); }
.det__img .ms__in { border-radius: 0; }
.det__img .badge { left: calc(6 * var(--u)); bottom: calc(6 * var(--u)); font-size: calc(9.5 * var(--u)); padding: 1px calc(6 * var(--u)); }
.det__text {
  align-self: stretch; margin: 0 calc(14 * var(--u)); flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: calc(7 * var(--u));
  padding: calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff;
  font-family: var(--font-mono); font-size: calc(11.5 * var(--u)); line-height: 1.4; color: #2A2D34;
}
.det__text footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body); font-size: calc(10.5 * var(--u)); color: var(--a-faint); }
.det__text footer button { font-weight: 600; color: var(--a-acc); font-size: calc(11.5 * var(--u)); }
.det__list { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.det__list > span { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--a-body); }
.det__meta { display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin-top: calc(4 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--a-muted); }
.det__meta span { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.det__meta svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.det__meta b { color: var(--a-ink); font-weight: 600; }
.arow {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 0 0 1px #ECEEF1;
}
.arow div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.arow em { font-style: normal; font-family: var(--font-mono); font-size: calc(10.5 * var(--u)); letter-spacing: .05em; color: var(--a-muted); }
.arow b { font-size: calc(13.5 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow button {
  flex: none; padding: calc(8 * var(--u)) calc(13 * var(--u)); border-radius: 999px;
  background: var(--a-accs); color: var(--a-acc); font-size: calc(12.5 * var(--u)); font-weight: 600;
  transition: transform .15s ease, background-color .15s ease;
}
.arow button:hover { background: #DCE5FF; }
.arow button:active { transform: scale(.95); }
.det__fab {
  position: absolute; right: calc(16 * var(--u)); bottom: calc(26 * var(--u));
  display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(52 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: calc(16 * var(--u));
  background: var(--a-acc); color: #fff; font-weight: 600; font-size: calc(14 * var(--u));
  box-shadow: 0 8px 20px -6px rgba(20,24,40,.35);
}
.det__fab svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2.6; }
.det__fab[hidden] { display: none; }

/* the app's toast, inside the phone */
.a-toast {
  position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(92 * var(--u)); z-index: 8;
  padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u));
  background: var(--a-ink); color: #fff; font-size: calc(13 * var(--u)); line-height: 1.4;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.4);
  opacity: 0; translate: 0 calc(10 * var(--u)); pointer-events: none;
  transition: opacity .25s ease, translate .25s ease;
}
.a-toast.is-on { opacity: 1; translate: 0 0; }

/* Android's own "Save this network?" sheet, which Join hands the network to */
.a-scrim {
  position: absolute; inset: 0; z-index: 9; background: rgba(10,12,16,.38);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.a-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u));
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0; background: #F4F5FA;
  display: flex; flex-direction: column; gap: calc(12 * var(--u));
  translate: 0 105%; transition: translate .3s cubic-bezier(.2,.7,.3,1);
}
.a-sheet.is-on { translate: 0 0; }
.a-sheet.is-on + .a-scrim, .a-scrim.is-on { opacity: 1; pointer-events: auto; }
.a-sheet__grab { align-self: center; width: calc(32 * var(--u)); height: calc(4 * var(--u)); border-radius: 999px; background: #C9CCD3; }
.a-sheet__t { font-size: calc(19 * var(--u)); font-weight: 500; text-align: center; }
.a-sheet__s { font-size: calc(12.5 * var(--u)); color: var(--a-muted); text-align: center; }
.a-sheet__net {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff;
}
.a-sheet__net svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: var(--a-acc); }
.a-sheet__net b { font-size: calc(14.5 * var(--u)); font-weight: 600; }
.a-sheet__net small { display: block; font-size: calc(12 * var(--u)); color: var(--a-muted); }
.a-sheet__row { display: flex; gap: calc(10 * var(--u)); margin-top: calc(4 * var(--u)); }
.a-sheet__row button {
  flex: 1; height: calc(44 * var(--u)); border-radius: 999px;
  font-size: calc(14 * var(--u)); font-weight: 600;
}
.a-sheet__row .is-no { border: 1px solid #C4C7CF; color: var(--a-acc); }
.a-sheet__row .is-yes { background: var(--a-acc); color: #fff; }

/* ── piles: the gallery ───────────────────────────────────────────────── */

.filters {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 18px; margin-bottom: 4px;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.12); color: #A2A6B2;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.filter:hover { color: #fff; border-color: rgba(255,255,255,.26); }
.filter.is-on { border-color: var(--acc2); background: rgba(43,89,255,.2); color: #fff; }
.filter small { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; opacity: .7; }

.gallery {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}
.pcard {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-card); border: 1px solid var(--line); background: var(--pane);
  transition: transform .25s ease, border-color .25s ease;
}
.pcard:hover { transform: translateY(-4px); border-color: var(--acc-line); }
.pcard.is-hidden { display: none; }
/* the screenshot peeks out of a tray, cut by the card like a pile card's */
.pcard__tray {
  position: relative; height: 210px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(43,89,255,.16), transparent 70%),
    rgba(255,255,255,.025);
  border-bottom: 1px solid var(--line);
}
.pcard__tray .ms {
  position: absolute; left: 50%; top: 22px; width: 54%; translate: -50% 0;
  border-radius: 7%; box-shadow: 0 24px 40px -14px rgba(0,0,0,.75);
  transition: translate .35s cubic-bezier(.2,.7,.3,1), rotate .35s cubic-bezier(.2,.7,.3,1);
}
.pcard:hover .pcard__tray .ms { translate: -50% -8px; rotate: -1.5deg; }
/* the app badge sits in the screenshot's corner, as it does in the app */
.pcard__tray .badge { left: calc(23% + 8px); bottom: 10px; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 16px; flex: 1; }
.pcard__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.pcard h3[lang="bn"] { letter-spacing: 0; line-height: 1.4; }

/* "Found on this screenshot": what was pulled off it, and the tap that uses it */
.found { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.frow {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.frow div { flex: 1; min-width: 0; }
.frow em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--acc3); line-height: 1.3; }
.frow b { display: block; font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
/* The tap, as a round button with the action's glyph — the label is its
   tooltip and its name, so the value beside it keeps the width. */
.act {
  position: relative; flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--acc-soft); color: #CBD6FF; border: 1px solid rgba(91,127,255,.35);
  transition: background-color .18s ease, color .18s ease, transform .15s ease;
}
.act:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
.act:active { transform: scale(.92); }
.act svg { width: 17px; height: 17px; stroke-width: 2.1; }
.act::after { /* the label, shown on hover and focus */
  content: attr(data-label); position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 3;
  padding: 5px 9px; border-radius: 8px; background: #2A2E37; color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  opacity: 0; translate: 0 4px; pointer-events: none;
  transition: opacity .15s ease, translate .15s ease;
}
.act:hover::after, .act:focus-visible::after { opacity: 1; translate: 0 0; }
.pcard__none { margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); color: var(--fg3); font-size: 14px; }

.gallery__note { margin-top: 18px; font-size: 14px; color: var(--fg4); max-width: 60em; }

/* ── search: the console ──────────────────────────────────────────────────
   The app's search, set on the page's ground: the field with its cobalt
   ring, the suggestion chips, results as rows with a narrow thumbnail. */

.console {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  padding: clamp(18px, 3vw, 28px); border-radius: var(--r-big);
  background: var(--pane); border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
.qfield {
  display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 16px 0 18px; border-radius: 16px;
  background: var(--bg2); box-shadow: 0 0 0 2px var(--acc), 0 0 0 7px rgba(43,89,255,.16);
}
.qfield svg { width: 20px; height: 20px; color: var(--fg3); stroke-width: 2.4; }
.qfield input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font-size: 17px; color: var(--fg);
}
.qfield input::placeholder { color: var(--fg4); }
.qfield__clear {
  width: 26px; height: 26px; border-radius: 999px; display: none; place-items: center;
  background: rgba(255,255,255,.12); color: var(--fg); font-size: 15px; line-height: 1;
}
.qfield.has-q .qfield__clear { display: grid; }
.qfield__clear:hover { background: rgba(255,255,255,.2); }

.sugs { display: flex; flex-wrap: wrap; gap: 8px; }
.sug {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line2); background: rgba(255,255,255,.03);
  font-size: 14px; color: var(--fg2);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.sug:hover { color: #fff; border-color: var(--acc-line); background: var(--acc-soft); }

.res__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; color: var(--fg3); }
.res__mode { padding: 4px 10px; border-radius: 999px; background: var(--acc-soft); color: var(--acc-ink); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.res { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 10px; }
.rrow {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px; border-radius: 18px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  animation: zFade .35s ease both;
}
.rrow__thumb { position: relative; flex: none; width: 62px; height: 98px; overflow: hidden; border-radius: 10px; }
.rrow__thumb .ms__in { border-radius: 0; }
.rrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.rrow__body em { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); }
.rrow__body b { font-size: 16px; font-weight: 600; color: var(--fg); line-height: 1.3; }
.rrow__body p { font-size: 14px; line-height: 1.45; color: var(--fg2); }
.rrow__body mark { background: rgba(43,89,255,.32); color: #fff; border-radius: 4px; padding: 0 2px; }
.res__none { padding: 28px 10px; text-align: center; }
.res__none b { display: block; font-family: var(--font-head); font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.res__none p { color: var(--fg3); font-size: 14.5px; max-width: 30em; margin-inline: auto; }
.console__fine { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg4); }
.console__fine svg { width: 16px; height: 16px; color: var(--acc2); }

/* ── actions: a phone and the list beside it ─────────────────────────── */

.act__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.act__phone { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.picker button { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--fg3); transition: background-color .2s ease, color .2s ease; }
.picker button:hover { color: #fff; }
.picker button.is-on { background: var(--acc); color: #fff; }

.alist { display: grid; gap: 10px; }
.alist li {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: var(--r-card);
  background: var(--pane); border: 1px solid var(--line);
}
.alist__ic {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--acc-soft); border: 1px solid rgba(91,127,255,.3); color: var(--acc3);
}
.alist__ic svg { width: 21px; height: 21px; }
.alist h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 3px; }
html[lang="bn"] .alist h3 { letter-spacing: 0; }
.alist p { font-size: 14.5px; color: var(--fg2); line-height: 1.55; }
.alist__note { margin-top: 6px; font-size: 14px; color: var(--fg4); }

/* ── bangla ───────────────────────────────────────────────────────────── */

.bn__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.bn__copy .sec-head { margin-bottom: 22px; }
.ticks { display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; color: #D6D8E0; }
.ticks li::before {
  content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 999px;
  background: var(--acc-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA6FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
  border: 1px solid rgba(91,127,255,.35);
}
/* The same list for things that are not done, or not allowed — a tick there
   would read as permission. */
.ticks--no li::before {
  background: rgba(255,106,80,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A72' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: rgba(255,106,80,.35);
}
/* Things that simply stay where they are — neither a promise kept nor a
   rule, so neither the tick nor the cross: a quiet dot. */
.ticks--mute li::before {
  background: rgba(255,255,255,.04) radial-gradient(circle, #959AA6 0 3px, transparent 3.6px) center / 20px 20px no-repeat;
  border-color: var(--line2);
}

.badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.badges span {
  padding: 4px 10px; border-radius: 10px;
  background: var(--c); color: #fff; border: 1px solid rgba(255,255,255,.7);
  font-size: 12px; font-weight: 700; line-height: 1.35;
}
.badges__cap { margin-top: 10px; font-size: 13.5px; color: var(--fg4); }

.bn__stage { position: relative; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 520 / 500; container-type: inline-size; }
.bn__stage .stage__card--a { left: 8%; top: 4%; width: 36%; rotate: -6deg; animation: zFloatA 9s ease-in-out infinite; }
.bn__stage .stage__card--b { right: 8%; top: 12%; width: 36%; rotate: 5deg; animation: zFloatC 10s ease-in-out infinite; }
.bn__stage .chip--n { left: 2%; top: 64%; animation: zFloatB 8.5s ease-in-out infinite; }
.bn__stage .chip--b { right: 1%; top: 78%; animation: zFloatA 9.5s ease-in-out infinite; }
.bn__stage .chip--d { left: 30%; top: 86%; animation: zFloatC 11s ease-in-out infinite; }

/* ── privacy ──────────────────────────────────────────────────────────── */

.priv {
  position: relative; overflow: hidden;
  padding: clamp(26px, 5vw, 56px); border-radius: var(--r-big);
  border: 1px solid rgba(91,127,255,.28);
  background:
    radial-gradient(800px 380px at 0% 0%, rgba(43,89,255,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.priv__head { display: flex; flex-wrap: wrap; gap: 18px 56px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(26px, 4vw, 40px); }
.priv__head > div { flex: 1 1 520px; min-width: 0; }
.priv__head > p { flex: 0 1 380px; }
.big {
  display: block; white-space: nowrap;
  font-size: clamp(64px, 14.5vw, 160px); line-height: .9; letter-spacing: -.05em;
  color: var(--acc2);
  background: linear-gradient(180deg, #8FA6FF, #2B59FF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[lang="bn"] .big { line-height: 1.05; }
.priv__h { margin-top: 8px; font-size: clamp(24px, 3.6vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.priv__lead { color: var(--fg2); font-size: 16.5px; max-width: 30em; }

.facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.fact {
  padding: 18px 18px 18px; border-radius: var(--r-card);
  background: rgba(10,11,14,.5); border: 1px solid var(--line);
}
.fact__ic {
  width: 38px; height: 38px; margin-bottom: 12px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc3);
}
.fact__ic svg { width: 19px; height: 19px; }
.fact h3 { margin-bottom: 4px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
html[lang="bn"] .fact h3 { letter-spacing: 0; }
.fact p { font-size: 14.5px; color: var(--fg2); line-height: 1.55; }
.fact code { font-family: var(--font-mono); font-size: 12.5px; color: var(--acc-ink); }

/* The airplane-mode dare, made into a switch. It changes nothing but the
   words — which is the point. */
.plane {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r-card);
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
}
.plane__sw {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  font-weight: 600; font-size: 15px;
}
.plane__track {
  position: relative; width: 50px; height: 30px; border-radius: 999px;
  background: #3A3E48; transition: background-color .25s ease;
}
.plane__track::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px;
  border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: translate .25s cubic-bezier(.2,.7,.3,1);
}
.plane__sw[aria-checked="true"] .plane__track { background: var(--acc); }
.plane__sw[aria-checked="true"] .plane__track::after { translate: 20px 0; }
.plane__sw svg { width: 20px; height: 20px; color: var(--acc3); }
.plane__msg { flex: 1; min-width: 220px; font-size: 15px; color: var(--fg2); }
.plane.is-on .plane__msg { color: #fff; }

/* ── feature cards ────────────────────────────────────────────────────── */

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.card {
  padding: 22px 20px; border-radius: var(--r-card);
  background: var(--pane); border: 1px solid var(--line);
  transition: border-color .22s ease, transform .22s ease;
}
.card:hover { border-color: var(--acc-line); transform: translateY(-3px); }
.card__k {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 9px; margin-bottom: 16px; border-radius: 8px;
  background: var(--acc-soft); border: 1px solid rgba(91,127,255,.32);
  color: var(--acc3); font-family: var(--font-mono); font-weight: 500; font-size: 12px;
}
.card h3 { margin-bottom: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
html[lang="bn"] .card h3 { letter-spacing: 0; }
.card p { font-size: 14.5px; color: var(--fg2); line-height: 1.6; }

/* ── faq ──────────────────────────────────────────────────────────────── */

.faq__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.faq__grid .sec-head { position: sticky; top: 100px; }
.faq { display: grid; gap: 10px; }
.qa {
  border-radius: var(--r-tile); overflow: hidden;
  border: 1px solid rgba(255,255,255,.09); background: var(--chip);
  transition: border-color .22s ease, background-color .22s ease;
}
.qa[open] { border-color: var(--acc-line); background: rgba(43,89,255,.06); }
.qa summary {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 18px;
  color: #fff; font-size: 16.5px; font-weight: 600;
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary > span { flex: 1; }
.qa summary::after {
  content: "+"; flex: none;
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: var(--acc3); font-size: 18px; font-weight: 400;
  transition: transform .25s ease, background-color .25s ease;
}
.qa[open] summary::after { transform: rotate(45deg); background: var(--acc-soft); }
.qa p { padding: 0 18px 18px; color: var(--fg2); font-size: 15.5px; line-height: 1.7; }
.qa p a { text-decoration: underline; text-underline-offset: 3px; }

/* ── download ─────────────────────────────────────────────────────────── */

.cta {
  position: relative; overflow: hidden;
  padding: clamp(34px, 7vw, 72px) clamp(20px, 4vw, 48px);
  border-radius: var(--r-big);
  border: 1px solid rgba(91,127,255,.32);
  background:
    radial-gradient(760px 340px at 50% 0%, rgba(43,89,255,.34), transparent 75%),
    rgba(255,255,255,.03);
  text-align: center;
}
.cta__mark { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 22px; box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12); }
.cta h2 { margin-bottom: 14px; font-size: clamp(34px, 6.4vw, 60px); letter-spacing: -.035em; }
html[lang="bn"] .cta h2 { font-size: clamp(30px, 5.4vw, 50px); }
.cta > p { max-width: 34em; margin: 0 auto 28px; color: var(--fg2); font-size: 17px; }
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta .cta__fine { margin: 22px auto 0; font-size: 14px; color: var(--fg3); }
/* the floating shots behind the card's words — inside the card's own
   stacking context, so they sit over its glow and under its words */
.cta { isolation: isolate; }
.cta__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta__deco .ms { position: absolute; width: 13%; opacity: .55; border-radius: 7%; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.cta__deco .ms:nth-child(1) { left: 3%;  top: 16%; rotate: -12deg; }
.cta__deco .ms:nth-child(2) { left: 9%;  top: 56%; rotate: 7deg; width: 11%; }
.cta__deco .ms:nth-child(3) { right: 4%; top: 12%; rotate: 11deg; }
.cta__deco .ms:nth-child(4) { right: 10%; top: 55%; rotate: -6deg; width: 11%; }
.cta > :not(.cta__deco) { position: relative; }

.store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px; border-radius: 14px;
  background: #000; border: 1px solid rgba(255,255,255,.26); color: #fff;
  transition: transform .18s ease, border-color .18s ease;
}
.store:hover { color: #fff; transform: translateY(-3px); border-color: rgba(255,255,255,.5); }
.store:active { transform: scale(.98); }
.store--soon { background: rgba(255,255,255,.04); border-color: var(--line2); color: var(--fg3); cursor: default; }
.store--soon:hover { transform: none; border-color: var(--line2); color: var(--fg3); }
.store--soon svg { color: #C4C6CF; }
.store__lines { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store__lines small { font-size: 10.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; opacity: .85; }
.store__lines b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.store--soon .store__lines b { color: #E7E8EE; }

/* ── footer ───────────────────────────────────────────────────────────── */

.foot { position: relative; z-index: 1; border-top: 1px solid var(--line); background: rgba(255,255,255,.015); }
.foot__grid {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  padding-top: 44px; padding-bottom: 30px;
}
.foot__brand .brand { margin-bottom: 12px; }
.foot__brand .brand__mark { width: 26px; height: 26px; border-radius: 8px; }
.foot__brand p { margin-bottom: 10px; max-width: 30em; font-size: 14.5px; color: var(--fg3); }
.foot__org { font-size: 14px; color: var(--fg3); }

.foot__col { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.foot__col h4 {
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg4);
}
.foot__col a { color: #B8BCC6; }
.foot__col a:hover { color: #fff; }

.foot__base {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding-top: 18px; padding-bottom: 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 13.5px; color: var(--fg4);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-left: auto; }
.foot__legal a { color: var(--fg3); }
.foot__made { color: #61656F; }

/* ── install bar ──────────────────────────────────────────────────────────
   The phone-width stand-in for the hero's install button: main.js raises it
   once the hero has scrolled past and drops it again over the download
   section, whose own buttons would otherwise sit behind it. */

.installbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; align-items: center; gap: 12px;
  width: 100%; max-width: 640px; margin-inline: auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(14,15,18,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.1);
  transform: translateY(120%);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.installbar.is-up { transform: none; }
.installbar img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.installbar__txt { flex: 1; min-width: 0; }
.installbar__txt b { display: block; font-size: 14.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.installbar__txt small { display: block; font-size: 12.5px; color: var(--fg3); }

/* ── the page's own toast (Copy on the samples) ──────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60;
  translate: -50% 16px; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 999px;
  background: #2A2E37; color: #fff; font-size: 14.5px;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  transition: opacity .25s ease, translate .25s ease;
}
.toast.is-on { opacity: 1; translate: -50% 0; }
.toast .dot { background: var(--ok); }
.has-bar .toast { bottom: 92px; }

/* ── legal pages ──────────────────────────────────────────────────────────
   privacy.html, terms.html and delete-data.html — the pages that are mostly
   prose, built from the same parts as eaipe-web's.

   The clause and contents numbers are drawn by CSS counters rather than typed
   into the markup: main.js swaps the *text* of every [data-bn] node, so a
   digit sitting inside a heading would stay English in Bangla and vice versa.
   The counter reads its own style off <html lang>, which main.js already
   sets. */

.legal { position: relative; padding: clamp(32px, 5vw, 64px) 0 clamp(60px, 8vw, 104px); }
.legal__glow {
  position: absolute; inset: -240px 0 auto 0; height: 640px; z-index: -1;
  background: radial-gradient(44% 50% at 28% 14%, rgba(43,89,255,.24), transparent 70%);
  pointer-events: none;
}
.legal__head { max-width: 760px; }
.legal__title { font-size: clamp(36px, 5vw, 58px); letter-spacing: -.035em; }
html[lang="bn"] .legal__title { font-size: clamp(32px, 4.4vw, 50px); }
.legal__lead { margin-top: 18px; color: var(--fg2); font-size: clamp(16px, 1.5vw, 17.5px); }

.legal__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line2);
  color: var(--fg3); font-size: 13px;
}
.stamp svg { width: 15px; height: 15px; color: var(--acc2); }

/* the summary a reader gets before any clause */
.tldr {
  margin-top: clamp(32px, 4vw, 46px); padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-card); background: var(--card); border: 1px solid var(--acc-line);
}
.tldr h2 { font-size: 20px; }
.tldr .ticks { margin-top: 16px; }

.legal__body {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  align-items: start; margin-top: clamp(42px, 6vw, 72px);
}
.toc { position: sticky; top: 96px; }
.toc h2 { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
.toc ol { margin-top: 14px; display: grid; gap: 2px; counter-reset: toc; }
.toc a { display: block; padding: 7px 12px; border-radius: var(--r-chip); color: var(--fg2); font-size: 14px; line-height: 1.5; }
.toc a::before { counter-increment: toc; content: counter(toc, bengali) ". "; color: var(--fg4); }
.toc a:hover { color: var(--fg); background: var(--card); }

.prose { max-width: 70ch; counter-reset: clause; }
.clause { scroll-margin-top: 90px; }
.clause + .clause { margin-top: clamp(36px, 4vw, 52px); }
.clause h2 { font-size: clamp(21px, 2.3vw, 26px); letter-spacing: -.02em; }
.clause h2::before {
  counter-increment: clause; content: counter(clause, bengali);
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; margin-right: 12px; vertical-align: 2px;
  border-radius: 10px; background: var(--acc-soft); color: var(--acc3);
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
}
.clause h3 { margin-top: 24px; font-size: 17px; letter-spacing: -.01em; }
.clause p { margin-top: 14px; color: var(--fg2); font-size: 16px; }
.clause .ticks, .clause .rows { margin-top: 16px; }
.clause a { text-decoration: underline; text-underline-offset: 3px; }
.clause code { font-family: var(--font-mono); font-size: 13.5px; color: var(--acc-ink); }

/* English numbering — main.js writes <html lang>, so the swap costs no JS */
html[lang="en"] .toc a::before { content: counter(toc, decimal) ". "; }
html[lang="en"] .clause h2::before { content: counter(clause, decimal); }

/* a term and what it means — "what it reads", "what it asks for" */
.rows { display: grid; gap: 10px; }
.rows li { padding: 15px 18px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.rows b { display: block; margin-bottom: 3px; font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: #fff; }
html[lang="bn"] .rows b { letter-spacing: 0; }
.rows b code { font-size: 12.5px; color: var(--fg3); font-weight: 400; margin-left: 6px; }
.rows li > span { display: block; color: var(--fg2); font-size: 15px; }

.note {
  margin-top: 22px; padding: 15px 18px; border-radius: var(--r-card);
  background: var(--acc-soft); border: 1px solid var(--acc-line);
  color: #CDD8FF; font-size: 15px;
}
.clause .note { margin-top: 22px; color: #CDD8FF; font-size: 15px; }
.note--warn, .clause .note--warn { background: rgba(255,106,80,.09); border-color: rgba(255,106,80,.32); color: #F2CFC7; }
.note--warn b { display: block; margin-bottom: 6px; font-family: var(--font-head); font-size: 17.5px; font-weight: 800; color: var(--fg); }

/* the company behind the app — named, with its address, above the ways to
   reach it; <address> italicises by default, the card does not */
.org {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 20px; padding: 15px 18px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--line); font-style: normal;
}
.org svg { width: 19px; height: 19px; margin-top: 3px; color: var(--acc2); }
.org b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #fff; }
.org span { display: block; color: var(--fg2); font-size: 15px; }

.contact-rows { margin-top: 10px; display: grid; gap: 10px; }
.contact-rows a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--line);
  color: var(--fg); font-size: 15px; text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.contact-rows a:hover { color: var(--fg); border-color: var(--acc-line); background: var(--card2); }
.contact-rows svg { width: 19px; height: 19px; color: var(--acc2); }
.contact-rows small { margin-left: auto; color: var(--fg3); font-size: 13px; }

/* ── delete your data ─────────────────────────────────────────────────────
   delete-data.html: there is no account, so the page is a set of routes
   rather than a request form — each a numbered card with its steps. */

.sheet { display: grid; gap: clamp(30px, 4vw, 44px); margin-top: clamp(32px, 4.5vw, 50px); max-width: 860px; }
.sheet > section > h2 { margin-bottom: 15px; font-size: clamp(22px, 2.8vw, 31px); letter-spacing: -.03em; }
html[lang="bn"] .sheet > section > h2 { letter-spacing: 0; }
.sheet > section > p { color: var(--fg2); font-size: 16px; }
.sheet .note { margin-top: 0; color: #CDD8FF; font-size: 15px; }

.routes { counter-reset: route; display: grid; gap: 14px; }
.route { padding: clamp(18px, 3vw, 26px); border-radius: var(--r-hero); background: var(--card); border: 1px solid var(--line); }
.route--fast { background: linear-gradient(165deg, rgba(43,89,255,.16), rgba(43,89,255,.03)); border-color: var(--acc-line); }
.route__head { display: flex; align-items: center; gap: 12px; }
.route__head h3 { font-size: clamp(19px, 2.3vw, 24px); letter-spacing: -.02em; }
html[lang="bn"] .route__head h3 { letter-spacing: 0; }
.route__head::before {
  counter-increment: route; content: counter(route, bengali);
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--fg2);
  font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1;
}
.route--fast .route__head::before { background: var(--acc); color: #fff; }
html[lang="en"] .route__head::before { content: counter(route, decimal); }
.route > p { margin-top: 12px; color: var(--fg2); font-size: 15.5px; }
.route__steps { margin-top: 14px; padding-left: 24px; display: grid; gap: 9px; list-style: bengali; color: var(--fg2); font-size: 15.5px; }
html[lang="en"] .route__steps { list-style: decimal; }
.route__steps li::marker { color: var(--fg4); }
.route__steps b { color: var(--fg); font-weight: 600; }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.split > div { padding: 20px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.split h3 { font-size: 17.5px; margin-bottom: 12px; }

/* ── reveal ───────────────────────────────────────────────────────────── */

/* Hidden only when scripting is on — main.js sets .js on <html> — so the page
   is complete for a reader (or crawler) whose JavaScript never runs. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}

@media print {
  .js .reveal { opacity: 1; transform: none; }
  .site-head, .drawer, .toc, .legal__glow, .wash, .grid-dots, .foot__grid,
  .skip, .strip, .installbar, .toast { display: none; }
  .prose { max-width: none; }
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1060px) {
  .legal__body { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { grid-template-columns: 1fr 1fr; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__grid .sec-head { position: static; }
}

/* 920px is where the header hands its links to the drawer. */
@media (max-width: 920px) {
  .head__row { grid-template-columns: 1fr auto; }
  .head__nav { display: none; }
  .burger { display: flex; }
  .foot__grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
}

@media (max-width: 680px) {
  .head__side .btn--fill { display: none; }
  .toc ol { grid-template-columns: 1fr; }
  .installbar { display: flex; }
  /* the bar covers the bottom of the page, so give it room — but only on the
     page that actually has one (main.js marks it) */
  .has-bar body { padding-bottom: 76px; }
  .foot__legal { margin-left: 0; }
  .step__txt { padding-left: 0; }
  /* On a phone the piles become one row to swipe — twelve cards stacked
     would be the longest thing on the page. The row runs to the screen's
     edges and snaps card by card. */
  .gallery {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80%, 300px);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad) 10px; scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .pcard { scroll-snap-align: start; }
  .pcard:hover { transform: none; }
  .pcard__tray { height: 190px; }

  /* Two stats a row, and the feature and privacy cards with their mark
     beside the words instead of above them: the same cards, half as tall. */
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats li { padding: 16px 14px 14px; }
  .stats li > span { font-size: 13px; }
  .card, .fact { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px; }
  .card__k, .fact__ic { grid-row: span 2; margin: 2px 0 0; }
  .card__k { width: 38px; padding: 0; }
  .card h3, .card p, .fact h3, .fact p { grid-column: 2; }
  .card h3, .fact h3 { font-size: 16.5px; margin-bottom: 3px; }
  .card p, .fact p { font-size: 14px; }
  .cta__deco { display: none; }
  .chip { padding: 8px 11px 8px 10px; gap: 8px; border-radius: 13px; }
  .chip__v { font-size: 12px; }
  .chip__k { font-size: 9px; }
  .chip__act { padding: 5px 9px; font-size: 11px; }
}

@media (max-width: 420px) {
  .cta__row .store { width: 100%; justify-content: center; }
  .hero__cta .btn { flex: 1 1 100%; }
  .chip--pile { display: none; }
}

/* ── reduced motion ───────────────────────────────────────────────────────
   Every loop stops. The phones are safe to freeze — which screen shows is
   decided by a class, not by an animation — and the import screen is told by
   main.js to jump to its finished state. */

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .stage__bloom, .stage__card, .stage__scan, .chip, .strip__track, .pill .dot,
  .scr, .step__bar, .rrow, .bn__stage .stage__card, .bn__stage .chip {
    animation: none !important;
  }
  .stage__scan { display: none; }
  .pcard, .card, .step, .btn, .store, .installbar, .qa, .toast, .a-toast, .a-sheet { transition: none; }
}