/* Galada is used by exactly two decorative callouts on this page. Google served
   it as 44KB from a second origin; subset to the 29 characters those callouts
   actually render it is 13KB, same-origin. The callouts are absolutely
   positioned and aria-hidden, so a late swap here shifts nothing. */
@font-face {
  font-family: "Galada";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/galada-callout.woff2?v=1") format("woff2");
}

/* টংখাতা — homepage only (index.html). Desktop-first: the base rules are the
   1280–1440 composition (copy | phone carousel | mascot); max-width queries
   step it down through 1279, 1199, 1024, 960 (header), 768, 560 and 380, and a
   short-landscape block at the end handles phones held sideways.
   The page is light-only by design: it pins color-scheme and its own tokens on
   body.home, so the site-wide dark block in styles.css never reaches it. */

html { scroll-padding-top: 88px; }
:root:has(body.home) { color-scheme: light; }

body.home {
  color-scheme: light;
  --surface: #FFFBFC;
  --surface-2: #FFF1F3;
  --card: #FFFFFF;
  --border: #FECACA;
  --border-strong: #CF6A80;
  --text: #111827;
  --text-2: #6B7280;
  --ink-2: #4B5563;           /* secondary text on the pink tints: #6B7280 is ~4.3:1 there */
  --brand-tint: #FFE4E6;
  --brand-deep: #9F1239;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 14px rgba(17, 24, 39, .05);
  --shadow-md: 0 16px 36px rgba(190, 18, 60, .12);
  background: var(--surface);
  color: var(--text);
  line-height: 1.7;
}
/* plain text links only — every styled link sets its own colour, and the
   footer's #FDA4AF must not be overridden by this */
body.home main a:not([class]) { color: var(--brand-deep); }

.h-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 32px; }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: #111827;
  color: #FFFFFF !important; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Headings balance their lines; body copy avoids a lone last word on narrow
   phones. Both are progressive — older engines simply wrap as before. */
.h-title, .h-head h2, .h-h2, .fcard h3, .step h3, .faq summary, .shot2 figcaption { text-wrap: balance; }
.h-lead, .h-head p, .fcard p, .step p, .faq .ans p, .trust__list li { text-wrap: pretty; }

/* The page is pinned light, but styles.css turns focus rings #FDA4AF when the OS
   is dark — 1.6:1 on this background, i.e. an invisible keyboard cursor. Pin the
   ring to the light-mode ink; the ruby final card keeps a white one. */
body.home main :is(a, button, summary, [role="button"], input, [tabindex]):focus-visible { outline-color: #9F1239; }
body.home .final__card :is(a, button):focus-visible { outline-color: #FFFFFF; }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-header.site-header--home .bar { min-height: 72px; padding-block: 10px; gap: 20px; flex-wrap: nowrap; }
.site-header--home .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.site-header.site-header--home .logo { width: 48px; height: 48px; }
.site-header.site-header--home .name { font-size: 1.5rem; font-weight: 800; color: #FFFFFF; }
.site-header.site-header--home nav { display: flex; align-items: center; flex: 1 1 auto;
  min-width: 0; margin-left: 12px; gap: 20px; }
.site-header--home .nav-links { display: flex; align-items: center; gap: clamp(14px, 2.1vw, 32px);
  list-style: none; margin: 0 auto; padding: 0; }
.site-header.site-header--home .nav-links a { position: relative; display: inline-flex; align-items: center;
  min-height: 44px; color: #FFFFFF; font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.site-header--home .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px;
  height: 2px; border-radius: 2px; background: #FFFFFF; transform: scaleX(0); transition: transform .2s ease; }
.site-header--home .nav-links a:hover::after,
.site-header--home .nav-links a.is-active::after { transform: scaleX(1); }
.site-header--home .nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.site-header.site-header--home .nav-play { display: none; }
.site-header.site-header--home .nav-signup { display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 1.5px solid rgba(255, 255, 255, .92); border-radius: 12px;
  color: #FFFFFF; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s; }
/* darken, never lighten, a press on the ruby bar: white on #E11D48 has 0.2 of headroom */
.site-header.site-header--home .nav-signup:hover { background: rgba(17, 24, 39, .12); text-decoration: none; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.h-hero { position: relative; overflow: hidden;
  background:
    radial-gradient(900px 560px at 62% 46%, #FFE4E6 0%, rgba(255, 228, 230, 0) 62%),
    radial-gradient(420px 420px at 4% 12%, rgba(255, 228, 230, .7) 0%, rgba(255, 228, 230, 0) 70%),
    var(--surface); }
.h-hero__grid { display: grid; align-items: center; gap: 24px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .5fr);
  min-height: clamp(560px, calc(86vh - 72px), 820px); padding-block: 36px 40px; }

.h-badge { display: inline-flex; align-items: center; gap: 10px; background: #FFF1F3; color: #BE123C;
  border: 1px solid #FECACA; font-weight: 600; font-size: .92rem; line-height: 1.4;
  padding: 7px 16px 7px 10px; border-radius: 999px; }
.h-badge svg { width: 22px; height: 14px; border-radius: 2px; flex: 0 0 auto; }
.h-title { font-size: clamp(2.3rem, 3.1vw, 3rem); line-height: 1.22; font-weight: 800;
  letter-spacing: -.01em; margin: 20px 0 16px; color: #111827; }
.h-title .accent { color: #E11D48; }
/* #4B5563, not the brief's #6B7280: over the hero's pink glow #6B7280 measured 4.25–4.44:1 */
.h-lead { font-size: 1.1rem; color: #4B5563; max-width: 33em; margin: 0 0 28px; line-height: 1.8; }
.h-lead strong { color: #111827; font-weight: 600; }
.lead-short { display: none; }

/* The CTA pair sits side by side once the copy column can hold it (~573px with
   the chevron, ~541px without). A container query, because that depends on the
   column, not on the viewport. */
.h-copy { container: hcopy / inline-size; }
.h-ctas { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 440px; }
@container hcopy (min-width: 545px) { .h-ctas { flex-direction: row; max-width: none; } }
@container hcopy (min-width: 545px) and (max-width: 589px) { .h-ctas .cta-play__chev { display: none; } }
.cta-play { display: inline-flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px 10px 10px;
  background: #E11D48; color: #FFFFFF !important; border-radius: 14px; text-decoration: none;
  box-shadow: 0 12px 26px rgba(225, 29, 72, .28); transition: background .2s, transform .2s, box-shadow .2s; }
.cta-play:hover { background: #BE123C; transform: translateY(-1px); box-shadow: 0 16px 30px rgba(190, 18, 60, .32); }
.cta-play__icon { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .18);
  display: grid; place-items: center; flex: 0 0 auto; }
.cta-play__text { display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.cta-play__text b { font-size: 1rem; font-weight: 700; }
/* pure white on purpose: any softer ink drops below 4.5:1 on #E11D48 */
.cta-play__text small { font-size: .8rem; font-weight: 500; color: #FFFFFF; }
.cta-play__chev { margin-left: auto; width: 20px; height: 20px; }
.cta-signup { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 62px;
  padding: 0 18px; background: #FFFFFF; color: #BE123C !important; border: 1.5px solid #E11D48;
  border-radius: 14px; font-weight: 700; font-size: 1.02rem; text-decoration: none; transition: background .2s; }
.cta-signup:hover { background: #FFF1F3; }
.cta-signup .ico { width: 20px; height: 20px; }

.h-benefits { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 0; margin: 28px 0 0; }
.h-benefits li { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .98rem; color: #111827; }
.bi { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.bi .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.bi--ok  { background: #DCFCE7; color: #15803D; }
.bi--off { background: #FFE4E6; color: #BE123C; }
.bi--bn  { background: #FEF3C7; color: #92400E; font-weight: 800; font-size: 1rem; line-height: 1; }

/* phone carousel — the product is the centrepiece */
.phones { position: relative; --pw: 232px; }
.phones__stage { position: relative; height: calc(var(--pw) * 2.0097); touch-action: pan-y; }
.phones__glow { position: absolute; left: 50%; top: 50%; width: calc(var(--pw) * 1.9); height: calc(var(--pw) * 1.9);
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(253, 164, 175, .70), rgba(253, 164, 175, 0)); }
.phone-slide { position: absolute; top: 0; left: 50%; width: var(--pw); margin: 0; z-index: 1; opacity: 0;
  transform: translateX(-50%) scale(.62); pointer-events: none; user-select: none;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.phone-slide img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
.phone-slide.is-active { z-index: 3; opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
/* 44%, not more: both side phones stay inside the carousel column */
.phone-slide.is-prev { z-index: 2; opacity: .9; transform: translateX(calc(-50% - 44%)) scale(.78); pointer-events: auto; cursor: pointer; }
.phone-slide.is-next { z-index: 2; opacity: .9; transform: translateX(calc(-50% + 44%)) scale(.78); pointer-events: auto; cursor: pointer; }
.phones__nav { position: absolute; top: 46%; z-index: 5; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: #FFFFFF; color: #111827; border: 1px solid #FECACA;
  box-shadow: var(--shadow-sm); cursor: pointer; visibility: hidden; transition: background .2s; }
.phones__nav:hover { background: #FFF1F3; }
.phones__prev { left: -6px; } .phones__next { right: -6px; }
/* controls exist in the markup but are inert until home.js runs; visibility (not
   display) keeps their space so nothing shifts when they appear */
.js .phones__nav, .js .phones__foot { visibility: visible; }
.phones__foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; visibility: hidden; }
.phones__dots { display: flex; gap: 2px; }
.phones__dots button { width: 28px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center; }
/* a ring, not a pale fill: #FECACA dots were 1.4:1 (WCAG 1.4.11 wants 3:1), and
   borders survive forced-colours mode where background fills are dropped */
.phones__dots button::before { content: ""; box-sizing: border-box; width: 12px; height: 12px; border-radius: 99px;
  border: 2px solid #E11D48; background: transparent; transition: width .25s, background-color .25s; }
.phones__dots button[aria-current="true"]::before { width: 24px; background: #E11D48; }
.phones__count { font-size: .9rem; color: #4B5563; font-variant-numeric: tabular-nums; min-width: 3.2em; }

/* hand-written callouts (decorative, aria-hidden). Every arrow is the same
   down-right stroke, re-aimed with a flip: scaleY(-1) = up-right, scale(-1,-1)
   = up-left. */
.callout { position: absolute; z-index: 6; pointer-events: none; color: #E11D48;
  font-family: "Galada", "Noto Sans Bengali", cursive; font-size: 1.5rem; line-height: 1.2; }
.callout span { display: block; transform: rotate(-8deg);
  text-shadow: 0 0 4px #FFFBFC, 0 0 10px #FFFBFC, 0 0 16px #FFFBFC; }
.callout svg { display: block; width: 58px; height: 42px; fill: none; stroke: #E11D48; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.phones .callout { display: none; }   /* the phone-side pair only appears once the mascot is gone */

/* the mascot — the brand's own munshi, standing in for a shopkeeper photo. The
   figure box is the image's own size, so the callouts stay pinned to him at
   every viewport height instead of to a stretched grid cell. */
.mascot { position: relative; align-self: center; display: flex; justify-content: center; }
.mascot__fig { position: relative; width: 200px; }
.mascot__disc { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FFFFFF 0%, #FFE4E6 58%, #FECDD3 100%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .65), 0 24px 60px rgba(225, 29, 72, .14); }
.mascot picture, .mascot img { position: relative; display: block; width: 100%; height: auto; }
/* the cut-out ends in a flat crop — fade it into the disc rather than stop on a hard edge */
.mascot img { -webkit-mask-image: linear-gradient(#000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%); }
.mascot .callout--a { top: -98px; left: 6px; }
.mascot .callout--a svg { margin: 2px 0 0 76px; }
.mascot .callout--b { bottom: -86px; right: -18px; text-align: right; }
.mascot .callout--b svg { margin: 0 0 2px auto; transform: scale(-1, -1); }

/* ── shared section scaffolding ─────────────────────────────────────────── */
.h-section { padding-block: 88px; }
.h-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.h-head h2, .h-h2 { font-size: clamp(1.7rem, 2.3vw, 2.25rem); line-height: 1.3; font-weight: 800; margin: 0 0 10px; color: #111827; }
.h-head p { margin: 0; color: #6B7280; font-size: 1.06rem; }
.eyebrow { display: inline-block; color: #BE123C; font-weight: 700; font-size: .9rem; margin-bottom: 8px; }

/* ── features ───────────────────────────────────────────────────────────── */
.h-section.h-features { padding-top: 40px; }
.fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.fcard { display: flex; align-items: flex-start; gap: 16px; background: #FFFFFF; border: 1px solid #FECACA;
  border-radius: 18px; padding: 24px 22px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fcard__icon { width: 54px; height: 54px; border-radius: 16px; background: #FFE4E6; color: #E11D48;
  display: grid; place-items: center; flex: 0 0 auto; }
.fcard__icon .ico { width: 26px; height: 26px; }
.fcard h3 { font-size: 1.1rem; line-height: 1.4; margin: 2px 0 6px; color: #111827; }
.fcard p { margin: 0; color: #6B7280; font-size: .95rem; line-height: 1.65; }

/* ── how it works ───────────────────────────────────────────────────────── */
.h-how { background: #FFF1F3; border-block: 1px solid #FFE4E6; padding-block: 64px; }
.how__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 2.22fr); gap: 40px; align-items: center; }
.how__title p { margin: 0; color: #4B5563; font-size: 1.05rem; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.step { position: relative; display: flex; align-items: flex-start; gap: 14px; }
.step__n { width: 44px; height: 44px; border-radius: 50%; background: #E11D48; color: #FFFFFF; font-weight: 800;
  font-size: 1.1rem; display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 8px 16px rgba(225, 29, 72, .25); }
.step__icon { width: 48px; height: 48px; border-radius: 14px; background: #FFFFFF; color: #E11D48; border: 1px solid #FECACA;
  display: grid; place-items: center; flex: 0 0 auto; }
.step h3 { font-size: 1.06rem; line-height: 1.4; margin: 0 0 4px; color: #111827; }
.step p { margin: 0; color: #4B5563; font-size: .92rem; line-height: 1.6; }
.step:not(:last-child)::after { content: ""; position: absolute; right: -19px; top: 16px; width: 10px; height: 10px;
  border-right: 2px solid #FDA4AF; border-top: 2px solid #FDA4AF; transform: rotate(45deg); }

/* ── screenshots + trust ────────────────────────────────────────────────── */
.shots-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.shots__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.shots__head p { margin: 0; color: #6B7280; }
.shots__arrows { display: flex; gap: 10px; visibility: hidden; }
.js .shots__arrows { visibility: visible; }
.arrow-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #FFFFFF; color: #111827; border: 1px solid #FECACA; box-shadow: var(--shadow-sm); transition: background .2s, opacity .2s; }
.arrow-btn:hover { background: #FFF1F3; }
.arrow-btn[disabled] { opacity: .4; cursor: default; }
.shots__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 6px 2px 14px; margin: 0; list-style: none; }
.shots__track::-webkit-scrollbar { display: none; }
.shot2 { scroll-snap-align: start; margin: 0; text-align: center; }
.shot2 figure { margin: 0; }
.shot2 img { display: block; width: 100%; height: auto; }
.shot2 figcaption { margin-top: 8px; font-weight: 600; font-size: .93rem; color: #374151; }
.shots__hint { display: none; text-align: center; font-size: .85rem; color: #6B7280; margin: 4px 0 0; }

.trust { background: #FFFFFF; border: 1px solid #FECACA; border-radius: 22px; padding: 28px; box-shadow: var(--shadow-sm); }
.trust h3 { font-size: 1.3rem; line-height: 1.4; margin: 0 0 18px; color: #111827; }
.trust__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.stat { background: #FFF1F3; border-radius: 14px; padding: 14px 8px; text-align: center; }
.stat b { display: block; font-size: 1.6rem; font-weight: 800; color: #BE123C; line-height: 1.25; }
.stat span { display: block; font-size: .84rem; color: #4B5563; line-height: 1.4; margin-top: 2px; }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.trust__list li { display: flex; gap: 12px; align-items: flex-start; color: #4B5563; font-size: .95rem; line-height: 1.6; }
.trust__list b { color: #111827; display: block; }
.trust__list .tico { width: 38px; height: 38px; border-radius: 12px; background: #FFE4E6; color: #E11D48;
  display: grid; place-items: center; flex: 0 0 auto; }
.trust__list .tico .ico { width: 20px; height: 20px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.h-section.h-faq { padding-top: 24px; }
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #FFFFFF; border: 1px solid #FECACA; border-radius: 16px; padding: 0 22px; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px; padding-block: 10px; font-weight: 700; font-size: 1.04rem; color: #111827; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: 0 0 auto; margin: -5px 4px 0 0;
  border-right: 2px solid #E11D48; border-bottom: 2px solid #E11D48; transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 5px; }
.faq summary:focus-visible { outline: 3px solid #9F1239; outline-offset: 4px; border-radius: 8px; }
.faq .ans { padding: 0 0 18px; color: #4B5563; line-height: 1.75; }
.faq .ans p { margin: 0; }

.faq-more { text-align: center; margin: 24px 0 0; font-weight: 700; }
.faq-more a { color: #9F1239; }

/* ── final CTA ──────────────────────────────────────────────────────────── */
.h-final { padding-block: 24px 88px; }
.final__card { position: relative; overflow: hidden; border-radius: 28px; padding: 56px;
  background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%); color: #FFFFFF;
  display: grid; grid-template-columns: minmax(0, 1.3fr) auto; align-items: center; gap: 32px; }
.final__card::before, .final__card::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.final__card::before { width: 380px; height: 380px; right: -120px; top: -160px; background: rgba(255, 255, 255, .08); }
.final__card::after { width: 240px; height: 240px; left: -90px; bottom: -130px; background: rgba(17, 24, 39, .08); }
.final__card > * { position: relative; }
.final__card h2 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.3; margin: 0 0 10px; color: #FFFFFF; }
.final__card p { margin: 0; color: #FFFFFF; font-size: 1.08rem; }
.final__ctas { display: flex; flex-direction: column; gap: 12px; min-width: 300px; }
.cta-play--light { background: #FFFFFF; color: #BE123C !important; box-shadow: 0 12px 26px rgba(17, 24, 39, .2); }
.cta-play--light:hover { background: #FFF1F3; box-shadow: 0 16px 30px rgba(17, 24, 39, .24); }
.cta-play--light .cta-play__icon { background: #FFE4E6; }
.cta-play--light .cta-play__text small { color: #9F1239; }
.cta-ghost-light { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 20px;
  border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 14px; color: #FFFFFF !important; font-weight: 700;
  text-decoration: none; transition: background .2s; }
.cta-ghost-light:hover { background: rgba(17, 24, 39, .12); }

/* ── footer (homepage variant: columns + contact) ───────────────────────── */
.site-footer.site-footer--home { padding: 56px 0 24px; }
.f-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.f-brand .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* No 50% radius: that framed the round দাদু photo. The mark is a rounded-square
   tile that carries its own shape — a circle clips its corners. */
.f-brand .brand img { width: 44px; height: 44px; }
.f-brand .brand span { color: #FFFFFF; font-size: 1.35rem; font-weight: 800; }
.f-brand p { color: #D1D5DB; margin: 12px 0 0; max-width: 30ch; font-size: .95rem; }
.f-col .f-h { color: #FFFFFF; font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.f-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer--home .f-col a { display: inline-flex; align-items: center; min-height: 40px; overflow-wrap: anywhere; }
.f-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; color: #9CA3AF; font-size: .86rem; }
.site-footer--home a:focus-visible { outline-color: #FDA4AF; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .phone-slide, .fcard, .cta-play, .site-header--home .nav-links a::after,
  .phones__dots button::before, .faq summary::after { transition: none; }
}
@media (forced-colors: active) {
  .phones__dots button::before { border-color: CanvasText; }
  .phones__dots button[aria-current="true"]::before { background: CanvasText; }
}

/* ══ 1600 ↑ — tall, wide screens: fill the hero instead of floating in it ═══ */
@media (min-width: 1600px) {
  .phones { --pw: 262px; }
  .mascot__fig { width: 232px; }
}

/* ══ 1279 ↓ ══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  .h-wrap { padding-inline: 28px; }
  .phones { --pw: 224px; }
  .mascot__fig { width: 188px; }
  .fcard { padding: 22px 18px; gap: 14px; }
  .step__icon { display: none; }   /* the number already carries the step */
}

/* ══ 1199 ↓ — the mascot steps aside; how-it-works stacks its title ══════ */
@media (max-width: 1199px) {
  .h-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mascot { display: none; }
  .phones { --pw: 240px; }
  .how__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
  .steps3 { text-align: left; }
}
@media (max-width: 1199px) and (orientation: portrait) {
  .h-hero__grid { min-height: 0; padding-block: 48px 56px; }
}

/* ══ 1024 ↓ ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .h-wrap { padding-inline: 24px; }
  .h-section { padding-block: 72px; }
  .h-section.h-faq { padding-top: 24px; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .shots-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .shots__track { grid-auto-columns: calc((100% - 60px) / 4); }
  .trust { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4px 28px; align-items: start; }
  .trust h3 { grid-column: 1 / -1; }
  .trust__stats { margin-bottom: 0; }
  .final__card { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 48px 36px; justify-items: center; }
  .final__ctas { min-width: 0; width: 100%; max-width: 420px; }
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ 960 ↓ — header collapses to the burger ═══════════════════════════════
   Keyed on html.nav-js, set by an inline <head> script, so the header is
   already collapsed on the first paint (keyed on .has-burger it painted six
   wrapped links and then snapped shut). nav.js wires the button; if it never
   loads, the head script drops nav-js again and the no-JS rows below apply. */
@media (max-width: 960px) {
  .nav-js .site-header.site-header--home .nav-burger { display: inline-flex; margin-left: auto; }
  .nav-js .site-header.site-header--home nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #E11D48; border-top: 1px solid #BE123C; box-shadow: 0 18px 32px rgba(17, 24, 39, .2);
    padding: 6px 20px 20px; max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-js .site-header.site-header--home.nav-open nav { display: flex; }
  .nav-js .site-header--home .nav-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  /* full-width rows: label-width links left stubby separators on tablets */
  .nav-js .site-header.site-header--home .nav-links a { display: flex; width: 100%; min-height: 54px; padding: 0 4px;
    font-size: 1.06rem; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .nav-js .site-header--home .nav-links a::after { display: none; }
  .nav-js .site-header--home .nav-links a.is-active { box-shadow: inset 3px 0 0 #FFFFFF; padding-left: 14px; }
  .nav-js .site-header.site-header--home .nav-links a:hover,
  .nav-js .site-header.site-header--home .nav-links a:active { background: rgba(17, 24, 39, .12); }
  .nav-js .site-header--home .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
  .nav-js .site-header.site-header--home .nav-play { display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 0 16px; border: 0; border-radius: 14px; background: #FFFFFF; color: #BE123C;
    font-weight: 700; font-size: 1.04rem; text-decoration: none; }
  .nav-js .site-header.site-header--home .nav-play:hover { background: #FFF1F3; }
  .nav-js .site-header.site-header--home .nav-signup { justify-content: center; min-height: 54px; border-radius: 14px; }
  /* rings on the two drawer buttons draw OUTSIDE them — white on the ruby panel,
     4.7:1; inset (styles.css at ≤640) it was white on the white Play button */
  .nav-js .site-header.site-header--home .nav-actions a:focus-visible { outline-offset: 3px; }
  /* no JS, or nav.js failed to arrive: every link stays reachable on wrapped rows */
  html:not(.nav-js) .site-header.site-header--home .bar { flex-wrap: wrap; }
  html:not(.nav-js) .site-header.site-header--home nav { flex-basis: 100%; margin: 0; flex-wrap: wrap; justify-content: center; }
  html:not(.nav-js) .site-header--home .nav-links { flex-wrap: wrap; justify-content: center; gap: 0 18px; }
}

/* ══ 768 ↓ — everything stacks, the hero centres ═════════════════════════ */
@media (max-width: 768px) {
  .h-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 28px 36px; gap: 30px; text-align: center; }
  .h-copy { display: flex; flex-direction: column; align-items: center; }
  .h-lead { margin-inline: auto; }
  .h-ctas { width: 100%; justify-content: center; }
  .h-benefits { justify-content: center; }
  .phones { --pw: min(250px, 58vw); width: 100%; max-width: 560px; margin: 0 auto; }
  .phone-slide.is-prev, .phone-slide.is-next { opacity: .55; }
  /* single column: the callouts return, on a soft plate over the faded side phones */
  .phones .callout { display: block; font-size: 1.12rem; }
  .phones .callout span { background: rgba(255, 251, 252, .88); border-radius: 10px; padding: 2px 8px; }
  .phones .callout--a { top: 54%; left: 0; }
  .phones .callout--a svg { margin: 2px 0 0 30px; }
  .phones .callout--b { top: 58%; right: 0; text-align: right; }
  .phones .callout--b svg { margin: 0 0 2px auto; transform: scale(-1, -1); }
  .h-section { padding-block: 60px; }
  .h-section.h-features { padding-top: 44px; }
  .h-section.h-faq { padding-top: 20px; }
  .h-head { margin-bottom: 30px; }
  .steps3 { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 460px; margin: 0 auto; }
  .step:not(:last-child)::after { display: none; }
  .shots__head { justify-content: center; text-align: center; }
  .shots__arrows { display: none; }
  .shots__track { grid-auto-columns: 44%; }
  .shots__hint { display: block; }
  .trust { display: block; }
  .trust__stats { margin-bottom: 20px; }
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .f-brand { grid-column: 1 / -1; }
}

/* ══ phones (≤560) ═══════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .h-wrap { padding-inline: 18px; }
  .site-header.site-header--home .bar { min-height: 64px; padding-block: 8px; }
  .site-header.site-header--home .logo { width: 42px; height: 42px; }
  .site-header.site-header--home .name { font-size: 1.32rem; }
  .h-hero__grid { padding-block: 22px 28px; gap: 22px; }
  .h-badge { font-size: .82rem; padding: 6px 13px 6px 9px; }
  .h-title { font-size: clamp(1.8rem, 8.6vw, 2.35rem); line-height: 1.24; margin: 16px 0 12px; }
  .h-lead { font-size: .98rem; line-height: 1.75; margin-bottom: 22px; }
  .lead-long { display: none; } .lead-short { display: inline; }
  .cta-play, .cta-signup { min-height: 60px; }
  .cta-play { gap: 10px; padding: 10px 12px 10px 10px; }
  .cta-play__icon { width: 36px; height: 36px; }
  .cta-play__text b { font-size: .98rem; }
  .h-benefits { gap: 10px 18px; margin-top: 22px; }
  .h-benefits li { font-size: .9rem; gap: 8px; }
  .bi { width: 30px; height: 30px; }
  .phones { --pw: min(238px, 60vw); }
  .phones__nav { width: 42px; height: 42px; top: 44%; }
  .phones__prev { left: 0; } .phones__next { right: 0; }
  /* the gutter beside the front phone is ~70px here — too narrow for a callout,
     so the pair moves to the bottom corners, either side of the dots, and points
     up at the phones */
  .phones .callout { font-size: .98rem; line-height: 1.15; }
  .phones .callout span { padding: 1px 6px; }
  .phones .callout svg { width: 38px; height: 28px; }
  .phones .callout--a { top: auto; bottom: -14px; left: -4px; display: flex; flex-direction: column-reverse; align-items: flex-start; }
  .phones .callout--a svg { margin: 0 0 2px 40px; transform: scaleY(-1); }
  .phones .callout--b { top: auto; bottom: -14px; right: -4px; }
  .phones .callout--b svg { margin: 0 0 2px auto; transform: scale(-1, -1); }
  .h-section { padding-block: 52px; }
  .h-head h2, .h-h2 { font-size: 1.55rem; }
  .h-head p { font-size: .98rem; }
  .fgrid { gap: 12px; }
  .fcard { flex-direction: column; align-items: center; text-align: center; padding: 18px 12px; gap: 10px; }
  .fcard__icon { width: 48px; height: 48px; border-radius: 14px; }
  .fcard h3 { font-size: 1rem; margin: 0 0 4px; }
  .fcard p { font-size: .86rem; line-height: 1.55; }
  .h-how { padding-block: 48px; }
  .shots__track { grid-auto-columns: 62%; gap: 14px; }
  .trust { padding: 22px 18px; border-radius: 18px; }
  .stat b { font-size: 1.35rem; }
  .faq details { padding: 0 16px; border-radius: 14px; }
  .faq summary { font-size: .98rem; min-height: 60px; }
  .h-final { padding-block: 12px 56px; }
  .final__card { padding: 36px 16px; border-radius: 22px; }
  .final__card h2 { font-size: 1.6rem; }
  .final__card p { font-size: 1rem; }
  .final__ctas .cta-play__chev { display: none; }
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .f-bottom { flex-direction: column; }
}

/* ══ the narrowest phones (≤380) ═════════════════════════════════════════ */
@media (max-width: 380px) {
  .h-wrap { padding-inline: 16px; }
  .h-badge { font-size: .78rem; }
  .cta-play { gap: 10px; padding-inline: 10px 12px; }
  .cta-play__chev { display: none; }
  .cta-play__icon { width: 36px; height: 36px; }
  .cta-play__text b { font-size: .95rem; }
  .h-benefits li { font-size: .86rem; }
  .fcard p { font-size: .82rem; }
  .phones .callout { font-size: .9rem; }
  .final__card { padding-inline: 12px; }
  .final__ctas .cta-play { justify-content: center; }
  .final__ctas .cta-play__icon { display: none; }
  .final__ctas .cta-play__text { text-align: center; }
}

/* ══ phones on their side (short landscape) — last, so it wins over ≤768 ═══
   A 360px-tall screen can't afford a 75px sticky bar or a centred stack: the
   first screen showed neither the CTA nor the product. */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header.site-header--home { position: relative; }   /* not sticky; still the drawer's containing block */
  .site-header.site-header--home .bar { min-height: 52px; padding-block: 4px; }
  .site-header.site-header--home .logo { width: 36px; height: 36px; }
  .site-header.site-header--home .name { font-size: 1.2rem; }
  html { scroll-padding-top: 12px; }
  .h-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; padding-block: 16px 20px; gap: 20px; text-align: left; }
  .h-copy { align-items: flex-start; }
  .h-title { font-size: 1.6rem; margin: 8px 0; }
  .h-lead { font-size: .92rem; margin: 0 0 14px; }
  .h-ctas { max-width: 380px; }
  .cta-play, .cta-signup { min-height: 52px; }
  .h-benefits { justify-content: flex-start; margin-top: 12px; }
  .phones { --pw: min(150px, 38vh); }
  .phones .callout { display: none; }
  .nav-js .site-header.site-header--home nav { max-height: calc(100vh - 52px); }
  .nav-js .site-header.site-header--home .nav-links a { min-height: 44px; }
}


/* ================= Adaptive ambient background (hero only) =================
   Three large, soft radial blobs drifting behind the hero. Two things are
   animated and nothing else: `transform` (compositor-only) and the blob's own
   colour, held in an @property-registered custom property so the browser can
   interpolate it instead of jumping between states.

   Deliberately NO `filter: blur()`. A radial-gradient that fades to transparent
   at 70% already has no hard edge, and skipping the filter means the colour
   lerp repaints a plain gradient fill rather than re-running a blur every
   frame — the difference between "free" and "expensive" on a cheap Android.

   The palette is anchored on ruby (--brand #E11D48): blob 1 never leaves the
   ruby family, so the page still reads as TongKhata, while blobs 2 and 3 carry
   the warm and cool halves of the curated palette at low opacity. Alpha stays
   at or below .18 so hero text keeps its contrast on the near-white surface.

   Browsers without @property (Firefox < 128) simply get the initial colours,
   still drifting — a graceful, non-broken fallback. */

@property --tk-c1 { syntax: '<color>'; inherits: false; initial-value: rgba(225, 29, 72, .34); }
@property --tk-c2 { syntax: '<color>'; inherits: false; initial-value: rgba(245, 158, 11, .28); }
@property --tk-c3 { syntax: '<color>'; inherits: false; initial-value: rgba(139, 92, 246, .24); }
@property --tk-glow { syntax: '<color>'; inherits: true; initial-value: rgba(253, 164, 175, .70); }
@property --tk-shot { syntax: '<color>'; inherits: true; initial-value: rgba(225, 29, 72, .22); }

.h-ambient {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 0;
  contain: layout paint;
}
/* the reactive wash: follows the screenshot on show, never keyframed, so it is
   free to transition */
.h-ambient::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(46% 52% at 62% 46%, var(--tk-shot, rgba(225, 29, 72, .22)) 0%, rgba(255, 255, 255, 0) 72%);
}
/* ── Floating bubbles ──────────────────────────────────────────────────────
   Deliberately NOT a canvas / requestAnimationFrame particle system. Every
   moving property here is `transform` or `opacity`, so the compositor owns the
   whole thing and the main thread does nothing after load — which is the only
   way a decorative effect belongs on a page that has to open fast on a cheap
   Android.

   The rise distance is in `cqh`, not `vh` or `%`: the hero is 616px on a
   desktop and 1041px on a phone, and a percentage in `translate` resolves
   against the BUBBLE's own size (a few px), not the container's. Making
   .h-bubbles a size container is what lets one keyframe set work at both.

   home.js randomises --x/--s/--d/--delay/--dx/--o once at load. The
   :nth-child defaults below are what a visitor sees if that never runs, so
   the effect degrades to a staggered-but-fixed version rather than to ten
   identical bubbles stacked in one column. */
.h-bubbles {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  container-type: size;
}
.h-bubbles i {
  position: absolute; display: block;
  bottom: -6%; left: var(--x, 50%);
  width: var(--s, 16px); aspect-ratio: 1;
  border-radius: 50%;
  /* A bubble on a LIGHT background is read from its rim and its highlight, not
     from its fill — a white fill at any opacity simply disappears into this
     hero. So: a nearly empty middle, a ruby rim, and one small specular dot. */
  background:
    radial-gradient(circle at 32% 27%,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .62) 14%,
      rgba(255, 255, 255, 0) 33%),
    radial-gradient(circle at 50% 50%,
      rgba(225, 29, 72, .05) 50%,
      rgba(225, 29, 72, .30) 85%,
      rgba(225, 29, 72, .03) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(225, 29, 72, .34),
    0 1px 6px rgba(225, 29, 72, .12);
  opacity: 0;
  animation: tk-rise var(--d, 24s) linear var(--delay, 0s) infinite;
}
/* No-JS fallback: ten hand-picked starts so it still reads as scattered. */
.h-bubbles i:nth-child(1) { --x: 8%;  --s: 11px; --d: 21s; --delay: -3s;  --dx: 34px;  --o: .70; }
.h-bubbles i:nth-child(2) { --x: 23%; --s: 19px; --d: 27s; --delay: -14s; --dx: -28px; --o: .62; }
.h-bubbles i:nth-child(3) { --x: 37%; --s: 8px;  --d: 18s; --delay: -8s;  --dx: 41px;  --o: .76; }
.h-bubbles i:nth-child(4) { --x: 52%; --s: 15px; --d: 24s; --delay: -19s; --dx: -37px; --o: .66; }
.h-bubbles i:nth-child(5) { --x: 64%; --s: 22px; --d: 29s; --delay: -6s;  --dx: 23px;  --o: .58; }
.h-bubbles i:nth-child(6) { --x: 78%; --s: 10px; --d: 20s; --delay: -24s; --dx: -45px; --o: .74; }
.h-bubbles i:nth-child(7) { --x: 91%; --s: 17px; --d: 26s; --delay: -11s; --dx: 30px;  --o: .64; }
.h-bubbles i:nth-child(8) { --x: 15%; --s: 13px; --d: 23s; --delay: -28s; --dx: -22px; --o: .69; }
.h-bubbles i:nth-child(9) { --x: 45%; --s: 9px;  --d: 17s; --delay: -16s; --dx: 39px;  --o: .72; }
.h-bubbles i:nth-child(10){ --x: 71%; --s: 20px; --d: 30s; --delay: -1s;  --dx: -33px; --o: .60; }
.h-bubbles i:nth-child(11){ --x: 31%; --s: 12px; --d: 22s; --delay: -21s; --dx: 27px;  --o: .67; }
.h-bubbles i:nth-child(12){ --x: 58%; --s: 25px; --d: 31s; --delay: -9s;  --dx: -19px; --o: .55; }
.h-bubbles i:nth-child(13){ --x: 85%; --s: 14px; --d: 19s; --delay: -26s; --dx: 36px;  --o: .71; }
.h-bubbles i:nth-child(14){ --x: 5%;  --s: 18px; --d: 28s; --delay: -13s; --dx: -41px; --o: .63; }

/* The sway: two reversals on the way up, so the path reads as drifting rather
   than as a straight line. Easing lives on the keyframes, not the animation,
   so each leg slows at its turn. */
@keyframes tk-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.85); opacity: 0;
         animation-timing-function: ease-out; }
  10%  { opacity: var(--o, .68); }
  35%  { transform: translate3d(var(--dx, 24px), -36cqh, 0) scale(1);
         animation-timing-function: ease-in-out; }
  65%  { transform: translate3d(calc(var(--dx, 24px) * -.75), -72cqh, 0) scale(1.03);
         animation-timing-function: ease-in-out; }
  86%  { opacity: var(--o, .68); }
  100% { transform: translate3d(calc(var(--dx, 24px) * .35), -116cqh, 0) scale(1.07);
         opacity: 0; }
}
/* Container query units are what makes the rise correct at every hero height.
   Without them the bubbles would barely move, so hide them instead of showing
   ten dots parked along the bottom edge. */
@supports not (height: 1cqh) {
  .h-bubbles { display: none; }
}

.h-blob {
  position: absolute; display: block;
  aspect-ratio: 1; border-radius: 50%;
  will-change: transform;
}
.h-blob--1 { width: 68%; left: -6%;  top: -18%;
  background: radial-gradient(circle at 50% 50%, var(--tk-c1, rgba(225, 29, 72, .34)) 0%, rgba(255, 255, 255, 0) 70%);
  animation: tk-hue1 16s ease-in-out infinite, tk-drift-a 22s ease-in-out infinite alternate; }
.h-blob--2 { width: 56%; right: -10%; top: 2%;
  background: radial-gradient(circle at 50% 50%, var(--tk-c2, rgba(245, 158, 11, .28)) 0%, rgba(255, 255, 255, 0) 70%);
  animation: tk-hue2 19s ease-in-out infinite, tk-drift-b 26s ease-in-out infinite alternate; }
.h-blob--3 { width: 60%; left: 22%; bottom: -26%;
  background: radial-gradient(circle at 50% 50%, var(--tk-c3, rgba(139, 92, 246, .24)) 0%, rgba(255, 255, 255, 0) 70%);
  animation: tk-hue3 22s ease-in-out infinite, tk-drift-c 30s ease-in-out infinite alternate; }

/* blob 1 stays inside the ruby family — the brand anchor */
@keyframes tk-hue1 {
  0%, 100% { --tk-c1: rgba(225, 29, 72, .34); }
  33%      { --tk-c1: rgba(251, 113, 133, .32); }
  66%      { --tk-c1: rgba(244, 63, 94, .33); }
}
/* warm half: amber -> orange -> soft coral/pink */
@keyframes tk-hue2 {
  0%, 100% { --tk-c2: rgba(245, 158, 11, .28); }
  33%      { --tk-c2: rgba(251, 146, 60, .26); }
  66%      { --tk-c2: rgba(244, 114, 182, .25); }
}
/* cool half: violet -> muted blue -> soft green */
@keyframes tk-hue3 {
  0%, 100% { --tk-c3: rgba(139, 92, 246, .24); }
  33%      { --tk-c3: rgba(56, 130, 246, .22); }
  66%      { --tk-c3: rgba(34, 160, 94, .23); }
}
@keyframes tk-drift-a { from { transform: translate3d(0, 0, 0) scale(1); }
                        to   { transform: translate3d(6%, 7%, 0) scale(1.08); } }
@keyframes tk-drift-b { from { transform: translate3d(0, 0, 0) scale(1.05); }
                        to   { transform: translate3d(-7%, 5%, 0) scale(.96); } }
@keyframes tk-drift-c { from { transform: translate3d(0, 0, 0) scale(.98); }
                        to   { transform: translate3d(5%, -6%, 0) scale(1.07); } }

/* hero content must stay above the ambient layer */
.h-hero__grid { position: relative; z-index: 1; }

/* --- screenshot reactivity ---------------------------------------------
   home.js writes data-shot on the hero when the carousel changes; the colour
   is interpolated by the transition below, not swapped. Values come from each
   screenshot's own distinguishing secondary colour (sampled from the PNGs:
   dashboard and customer are green-accented, entry-sheet pink, cashbox coral)
   — the dominant navy and ruby are identical across all four, so extracting
   those would have produced no visible difference at all. */
.h-hero { transition: --tk-glow 2.2s ease-in-out, --tk-shot 2.2s ease-in-out; }
.h-hero[data-shot="0"] { --tk-glow: rgba(141, 198, 160, .62); --tk-shot: rgba(34, 160, 94, .23); }
.h-hero[data-shot="1"] { --tk-glow: rgba(28, 141, 66, .50);   --tk-shot: rgba(34, 160, 94, .22); }
.h-hero[data-shot="2"] { --tk-glow: rgba(240, 184, 193, .70); --tk-shot: rgba(244, 114, 182, .25); }
.h-hero[data-shot="3"] { --tk-glow: rgba(240, 99, 122, .64);  --tk-shot: rgba(251, 113, 133, .22); }
.phones__glow { background: radial-gradient(closest-side, var(--tk-glow, rgba(253, 164, 175, .70)), rgba(255, 255, 255, 0)); }

/* --- mobile: smaller, calmer, cheaper ---------------------------------- */
@media (max-width: 768px) {
  /* Six instead of ten. Each bubble is its own composited layer, and this
     site's audience is on cheap Android hardware — the effect reads the same
     with fewer of them on a narrow screen. */
  .h-bubbles i:nth-child(n+7) { display: none; }
  .h-blob--1 { width: 86%; left: -18%; top: -12%; }
  .h-blob--2 { width: 74%; right: -22%; top: 6%; }
  .h-blob--3 { width: 78%; left: 10%; bottom: -20%; }
  /* colour still breathes; the drift stops — it is the part that costs battery
     and the part nobody notices on a 6-inch screen */
  .h-blob--1 { animation: tk-hue1 16s ease-in-out infinite; }
  .h-blob--2 { animation: tk-hue2 19s ease-in-out infinite; }
  .h-blob--3 { animation: tk-hue3 22s ease-in-out infinite; }
  .h-ambient::after { background: radial-gradient(58% 40% at 50% 38%, var(--tk-shot, rgba(225, 29, 72, .22)) 0%, rgba(255, 255, 255, 0) 74%); }
}

/* --- respect reduced motion: keep the colour, drop the movement --------- */
@media (prefers-reduced-motion: reduce) {
  .h-blob { animation: none !important; }
  /* Hidden, not merely paused: a frozen bubble is a stray dot over the
     headline with no reason to be there. */
  .h-bubbles { display: none; }
  .h-hero { transition: none; }
}

/* --- forced colours: the decoration must not fight the user's palette --- */
@media (forced-colors: active) {
  .h-ambient { display: none; }   /* .h-bubbles lives inside it */
}