/* ==========================================================================
   Eaipe — landing page
   Tokens transcribed from the app's v3 design system (src/constants/theme.js):
   dark is the primary scheme, one violet accent, violet→violet gradient on
   every filled control, and the wordmark's "ai" keeps the red→orange brand ramp.

   The one colour here that is not the site's own is --app-*: the phone demo in
   the hero draws the app's screen, and the app's in-product green marks every
   control inside that screen. It never leaves the phone frame.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:        #08080A;
  --bg2:       #101014;
  --card:      #16161B;
  --card2:     #1D1D24;
  --chip:      #17171D;
  --line:      rgba(255,255,255,.08);
  --line2:     rgba(255,255,255,.14);

  /* ink */
  --fg:        #F6F6F8;
  --fg2:       #A8A8B6;
  --fg3:       #82828F;

  /* accent */
  --acc:       #AD46FF;
  --acc2:      #9810FA;
  --acc3:      #C27AFF;
  --acc-ink:   #E7D3FF;
  --acc-soft:  rgba(173,70,255,.16);
  --acc-line:  rgba(173,70,255,.38);
  --grad:      linear-gradient(135deg, #C27AFF, #9810FA);
  --brand-grad:linear-gradient(278deg, #FA1014, #FF9900);
  --glow:      rgba(152,16,250,.45);
  --ok:        #34D6A4;
  --no:        #FF7A85;

  /* the app's own screen, inside the phone frame only */
  --app:       #2ECC80;
  --app-grad:  linear-gradient(135deg, #19B368, #0E7C46);
  --app-bg:    #0A0A0C;
  --app-card:  #121216;
  --app-chip:  #17171B;
  --app-fg:    #E8E8EC;
  --app-fg2:   #8E8E96;
  --app-font:  system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* radii, from RADIUS in theme.js */
  --r-chip: 14px;
  --r-field: 16px;
  --r-tile: 18px;
  --r-card: 20px;
  --r-hero: 22px;
  --r-nav: 28px;

  /* type */
  --font-head: 'Anek Bangla', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Noto Sans Bengali', 'Anek Bangla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: clamp(18px, 4vw, 32px);
  --sec: clamp(60px, 8vw, 108px);

  /* one clock for the whole hero demo, so the phone and the captions under it
     cannot drift apart */
  --demo: 15s;
}

/* ── 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.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .wordmark, .btn, .kicker, .stats strong, .step__no, .balance__num {
  font-family: var(--font-head);
  letter-spacing: -.02em;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 800; }
p { margin: 0; }
/* height:auto is load-bearing, not tidiness. Every img here carries width and
   height attributes so the box is reserved before the file lands, and those
   attributes are presentational hints — a hint would outrank any aspect-ratio
   further down this file and stretch the image to its full natural height. */
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--acc3); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: #E0BDFF; }

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

::selection { background: rgba(173,70,255,.35); }

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

.wrap { width: min(1180px, 100% - var(--pad) * 2); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - var(--pad) * 2); }

.skip {
  position: fixed; top: -60px; left: 12px; z-index: 70;
  padding: 10px 16px; border-radius: 12px;
  background: var(--card); color: var(--fg); border: 1px solid var(--line2);
  transition: top .2s ease;
}
.skip:focus { top: 12px; }

.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* A light sweeping across a filled control. Purely decorative, and always on a
   span the markup marks aria-hidden. */
.shine {
  position: absolute; inset: 0 auto 0 0; width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.46), transparent);
  animation: shine 4.2s 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%        { transform: translateX(-130%) skewX(-18deg); }
  55%, 100% { transform: translateX(320%)  skewX(-18deg); }
}

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

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); }
.brand:hover { color: var(--fg); opacity: .9; }
.brand__mark { width: 30px; height: 30px; border-radius: 9px; }

.wordmark {
  font-size: 23px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: baseline;
}
.wordmark__ai {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wordmark--sm { font-size: 16px; }

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

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-field);
  font-size: 15.5px; font-weight: 700; line-height: 1.3;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--sm { padding: 9px 17px; font-size: 14px; border-radius: 999px; }
.btn--lg { padding: 15px 26px; font-size: 16px; }

.btn--fill {
  background: var(--grad); color: #fff;
  box-shadow: 0 8px 24px rgba(152,16,250,.35);
}
.btn--fill:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 38px -14px var(--glow); }

.btn--ghost {
  background: #111116; color: var(--fg);
  border: 1px solid var(--line2);
}
.btn--ghost:hover { color: var(--fg); border-color: var(--acc-line); background: var(--card2); }

.btn--light { background: #fff; color: #12121A; }
.btn--light:hover { color: #12121A; transform: translateY(-2px); box-shadow: 0 16px 38px -16px rgba(255,255,255,.4); }

/* The store button carries two lines of label beside its logo. */
.btn__lines { position: relative; z-index: 2; display: grid; text-align: left; }
.btn__lines small { font-size: 11.5px; font-weight: 400; line-height: 1.5; opacity: .85; }
.btn__lines b { font-family: var(--font-head); font-size: 17px; font-weight: 800; line-height: 1.35; }
.btn > svg, .btn > span:not(.shine) { position: relative; z-index: 2; }

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

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-head.is-stuck {
  background: rgba(8,8,10,.92);
  box-shadow: 0 10px 30px -18px #000;
}

.head__row {
  display: flex; align-items: center; gap: 18px;
  justify-content: space-between;
  padding: 13px 0;
}

.head__nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; }
.head__nav a { color: var(--fg2); }
.head__nav a:hover { color: var(--fg); }

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

.lang {
  display: flex; gap: 2px; padding: 3px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  background: var(--bg2);
}
.lang__tab {
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 600; line-height: 1.4;
  color: var(--fg3);
  transition: background-color .18s ease, color .18s ease;
}
.lang__tab:hover { color: var(--fg); }
.lang__tab.is-on { background: #22222B; color: var(--fg); }
/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(38px, 6vw, 74px) 0 clamp(30px, 5vw, 54px);
}

.hero__glow {
  position: absolute; top: -220px; left: 50%; z-index: 0;
  width: min(1100px, 130vw); height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(152,16,250,.34), rgba(152,16,250,0) 70%);
  filter: blur(10px);
  animation: glow 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow {
  0%, 100% { opacity: .5;  transform: translateX(-50%) scale(1); }
  50%      { opacity: .85; transform: translateX(-50%) scale(1.09); }
}

/* The dot field behind the hero, faded out at the edges so it never reaches
   a section boundary. */
.hero__dots {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent);
  pointer-events: none;
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 10px;
  border: 1px solid var(--acc-line); background: rgba(173,70,255,.14);
  border-radius: 999px;
  font-size: 13px; color: var(--acc-ink);
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--acc3);
  animation: blink 1.9s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.hero__title {
  margin-top: 16px;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.12; letter-spacing: -.03em;
  text-wrap: pretty;
}

.hero__sub {
  margin-top: 16px; max-width: 44ch;
  font-size: clamp(15px, 1.4vw, 17.5px);
  color: var(--fg2);
  text-wrap: pretty;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero__ticks {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 20px;
  font-size: 13.5px; color: var(--fg3);
}
.hero__ticks li { display: inline-flex; align-items: center; gap: 7px; }
.hero__ticks li::before { content: "✓"; color: var(--ok); }

/* ── phone demo ───────────────────────────────────────────────────────────
   One 15s loop (--demo) drives five screens and the three captions beneath
   them. Every screen is stacked in the same box and faded in on its own slice
   of that loop, so the phases can never fall out of order. Each animated part
   carries .anim, which is what the reduced-motion rule and the pause switch
   below both look for. */

.hero__stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}

.phone {
  position: relative;
  width: min(330px, 88%); aspect-ratio: 330 / 672;
  border: 9px solid #1B1B22; border-radius: 46px;
  background: #0B0B0E;
  box-shadow:
    0 40px 90px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.05);
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.phone__screen {
  position: absolute; inset: 0;
  border-radius: 38px; overflow: hidden;
  background: #0B0B0E;
}

/* every screen of the demo */
.scr {
  position: absolute; inset: 0;
  background: var(--app-bg);
  font-family: var(--app-font);
}
.scr__body { position: relative; padding: 9px 12px 0; }
.scr__wash {
  position: absolute; top: 0; left: 0; right: 0; height: 160px;
  background: radial-gradient(70% 100% at 50% 0, rgba(16,140,80,.32), transparent 72%);
}

.scr--browse { animation: phBrowse var(--demo) ease-in-out infinite; }
.scr--detail { animation: phDetail var(--demo) ease-in-out infinite; }
.scr--gen    { animation: phGen    var(--demo) ease-in-out infinite; }
.scr--result { background: none; animation: phResult var(--demo) ease-in-out infinite; }

@keyframes phBrowse { 0%, 22% { opacity: 1 } 27%, 96% { opacity: 0 } 100% { opacity: 1 } }
@keyframes phDetail { 0%, 25% { opacity: 0 } 30%, 58% { opacity: 1 } 63%, 100% { opacity: 0 } }
@keyframes phGen    { 0%, 61% { opacity: 0 } 66%, 79% { opacity: 1 } 84%, 100% { opacity: 0 } }
@keyframes phResult {
  0%, 82%  { opacity: 0; transform: scale(1.04); }
  87%, 97% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; }
}

/* the app's status bar */
.appbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2px 10px;
  font-size: 10px; font-weight: 600; line-height: 1; color: var(--app-fg);
}
.appbar__sig { display: flex; align-items: flex-end; gap: 2px; }
.appbar__sig i { display: block; width: 2px; background: var(--app-fg); }
.appbar__sig i:nth-child(1) { height: 4px; }
.appbar__sig i:nth-child(2) { height: 6px; }
.appbar__sig i:nth-child(3) { height: 8px; }
.appbar__sig i:nth-child(4) { height: 10px; background: rgba(232,232,236,.45); }

/* title row + the credit pill that sits at its right */
.apphead {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 0 2px 10px;
}
.apphead__txt { display: grid; gap: 2px; }
.apphead__txt b { font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.apphead__txt small { font-size: 9.5px; font-weight: 400; line-height: 1.3; color: var(--app-fg2); }

.appcredit {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--app-chip); border: 1px solid rgba(255,255,255,.1);
  font-size: 10.5px; font-weight: 600; line-height: 1; color: #F2F2F4;
}
.appcredit i { width: 7px; height: 7px; border-radius: 50%; background: var(--app); }

.appsearch {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px; padding: 8px 11px;
  border-radius: 12px; background: var(--app-card); border: 1px solid var(--line);
  font-size: 10.5px; line-height: 1; color: #7A7A83;
}

.appfilters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 9px; }
.appfilters > span {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 11px;
  background: var(--app-card); border: 1px solid var(--line);
  font-size: 10px; font-weight: 600; line-height: 1; color: var(--app-fg);
}
.appfilters > span:first-child { justify-content: space-between; }
.appfilters em { font-style: normal; color: #7A7A83; }

.apptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.apptile { position: relative; }
.apptile__img { position: relative; border-radius: 12px; overflow: hidden; }
.apptile__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.apptile__heart {
  position: absolute; top: 6px; right: 6px;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(8,8,10,.55); color: #fff; font-size: 10px;
}
/* the tap the demo is about to make */
.apptile__ring {
  position: absolute; inset: 0;
  border: 2px solid var(--app); border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(46,204,128,.2);
  animation: phRing var(--demo) ease-in-out infinite;
}
@keyframes phRing {
  0%, 8%    { opacity: 0; transform: scale(1.06); }
  14%, 22%  { opacity: 1; transform: scale(1); }
  27%, 100% { opacity: 0; }
}

.appnav {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-radius: 20px;
  background: rgba(18,18,22,.96); border: 1px solid var(--line);
}
.appnav span { display: grid; justify-items: center; gap: 3px; color: #7A7A83; }
.appnav small { font-size: 8px; font-weight: 600; line-height: 1; }
.appnav .is-on { color: var(--app); }
.appnav__fab {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-top: -16px;
  border-radius: 50%; background: var(--app-grad);
  box-shadow: 0 8px 20px rgba(19,150,88,.5);
  color: #fff;
}

/* ── phone: the template screen ───────────────────────────────────────── */

.appdetail { display: flex; align-items: flex-start; gap: 9px; padding: 0 2px 12px; }
.appdetail__back {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--app-chip); border: 1px solid rgba(255,255,255,.1);
  color: var(--app-fg); font-size: 10px;
}
.appdetail__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.appdetail__txt b { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: #fff; }
.appdetail__txt small { font-size: 9.5px; font-weight: 400; line-height: 1.3; color: var(--app-fg2); }

.appslots { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 11px; }
.appslot { display: grid; gap: 5px; }
.appslot > small,
.applabel {
  font-size: 7.5px; font-weight: 700; line-height: 1;
  letter-spacing: .14em; color: var(--app-fg2);
}
.appslot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }

.appslot__box { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.appslot__add {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 3px;
  border-radius: 12px; border: 1.4px dashed rgba(255,255,255,.22);
  color: #7A7A83; font-size: 9px; font-weight: 600; line-height: 1;
  animation: phAddSlot var(--demo) ease-in-out infinite;
}
.appslot__add b { font-size: 15px; font-weight: 400; line-height: 1; }
.appslot__photo {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  animation: phUpPhoto var(--demo) ease-in-out infinite;
}
.appslot__photo img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.appslot__crop {
  position: absolute; bottom: 6px; right: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(8,8,10,.72);
  font-size: 8.5px; font-weight: 600; line-height: 1.3; color: #fff;
}
@keyframes phAddSlot { 0%, 44% { opacity: 1 } 49%, 100% { opacity: 0 } }
@keyframes phUpPhoto { 0%, 44% { opacity: 0 } 49%, 100% { opacity: 1 } }

.appspec {
  margin-bottom: 9px; border-radius: 14px;
  background: var(--app-card); border: 1px solid rgba(255,255,255,.07);
}
.appspec div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.appspec div:last-child { border-bottom: 0; }
.appspec span { font-size: 10px; font-weight: 400; line-height: 1.3; color: var(--app-fg2); }
.appspec b { font-size: 10px; font-weight: 700; line-height: 1.3; color: #F2F2F4; }

.appok {
  display: block; margin-bottom: 9px;
  font-size: 9.5px; font-weight: 700; line-height: 1.3; color: var(--app);
  animation: phOk var(--demo) ease-in-out infinite;
}
@keyframes phOk { 0%, 46% { opacity: 0 } 51%, 100% { opacity: 1 } }

.applabel { display: block; margin-bottom: 6px; letter-spacing: .1em; }
.appchips { display: flex; gap: 6px; flex-wrap: wrap; }
.appchips span {
  padding: 5px 10px; border-radius: 999px;
  background: var(--app-card); border: 1px solid rgba(255,255,255,.1);
  font-size: 9.5px; font-weight: 600; line-height: 1.3; color: #9A9AA2;
}
.appchips .is-on {
  background: rgba(46,204,128,.14); border-color: rgba(46,204,128,.45); color: #48DE96;
}

/* the generate button, swapping from disabled to priced */
.appcta { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 40px; }
.appcta span {
  position: absolute; inset: 0;
  display: grid; place-items: center; border-radius: 13px;
  font-size: 11.5px; font-weight: 700; line-height: 1.3;
}
.appcta__off { background: #14401F; color: #93C9A9; animation: phCtaA var(--demo) ease-in-out infinite; }
.appcta__on  {
  background: var(--app-grad); color: #fff;
  box-shadow: 0 10px 24px rgba(19,150,88,.4);
  animation: phCtaB var(--demo) ease-in-out infinite;
}
@keyframes phCtaA { 0%, 44% { opacity: 1 } 49%, 100% { opacity: 0 } }
@keyframes phCtaB { 0%, 44% { opacity: 0 } 49%, 100% { opacity: 1 } }

/* ── phone: generating ────────────────────────────────────────────────── */

.appgen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 26px; text-align: center;
}
.appgen__frame { position: relative; width: 120px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; }
.appgen__frame img { width: 100%; height: 100%; object-fit: cover; filter: blur(9px) saturate(1.1); }
.appgen__mesh {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 14px 14px;
}
.appgen__frame i {
  position: absolute; width: 18px; height: 18px;
}
.appgen__frame i:first-of-type {
  top: 6px; left: 6px;
  border-top: 2px solid var(--app); border-left: 2px solid var(--app); border-radius: 4px 0 0 0;
}
.appgen__frame i:last-of-type {
  bottom: 6px; right: 6px;
  border-bottom: 2px solid var(--app); border-right: 2px solid var(--app); border-radius: 0 0 4px 0;
}
.appgen b { font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff; }
.appgen span { font-size: 10.5px; line-height: 1.4; color: var(--app-fg2); }
.appgen small { font-size: 9.5px; line-height: 1.4; color: #6E6E77; }
.appgen__track { width: 70%; height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.appgen__bar {
  height: 100%; width: 12%; border-radius: 99px; background: var(--app-grad);
  animation: phBar var(--demo) ease-in-out infinite;
}
@keyframes phBar { 0%, 64% { width: 12% } 79%, 100% { width: 100% } }

/* ── phone: the finished image ────────────────────────────────────────── */

.appresult { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.appsave {
  position: absolute; inset: auto 0 0 0;
  display: flex; gap: 8px; padding: 16px 12px;
  background: linear-gradient(transparent, rgba(6,6,8,.92) 45%);
}
.appsave span {
  padding: 10px; border-radius: 13px;
  font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #fff;
}
.appsave__hd { flex: 1; text-align: center; background: var(--app-grad); }
.appsave__share { padding-inline: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }

.apptoast {
  position: absolute; top: 14px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 13px;
  background: rgba(10,10,13,.92); border: 1px solid rgba(46,204,128,.42);
  font-family: var(--app-font);
  animation: phToast var(--demo) ease-in-out infinite;
}
.apptoast i {
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--app); color: #05261A; font-size: 11px; font-style: normal;
}
.apptoast span { font-size: 10.5px; font-weight: 600; line-height: 1.3; color: #D9F6E7; }
@keyframes phToast {
  0%, 88%  { opacity: 0; transform: translateY(10px); }
  92%, 97% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; }
}

/* the three captions under the phone, lit in turn with the screens above */
.caps {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.caps li {
  padding: 6px 12px; border-radius: 999px;
  background: #111116; border: 1px solid var(--line);
}
.caps li:nth-child(1) { animation: capA var(--demo) ease-in-out infinite; }
.caps li:nth-child(2) { animation: capB var(--demo) ease-in-out infinite; }
.caps li:nth-child(3) { animation: capC var(--demo) ease-in-out infinite; }
@keyframes capA {
  0%, 25%   { opacity: 1;   color: var(--fg); }
  31%, 100% { opacity: .35; color: var(--fg2); }
}
@keyframes capB {
  0%, 25%   { opacity: .35; color: var(--fg2); }
  31%, 58%  { opacity: 1;   color: var(--fg); }
  64%, 100% { opacity: .35; color: var(--fg2); }
}
@keyframes capC {
  0%, 58%   { opacity: .35; color: var(--fg2); }
  64%, 97%  { opacity: 1;   color: var(--fg); }
  100%      { opacity: .35; color: var(--fg2); }
}

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

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: clamp(34px, 5vw, 58px);
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
}
.stats li { display: grid; gap: 2px; padding: 20px 18px; background: #0D0D11; }
.stats strong { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.2; }
.stats span { color: var(--fg3); font-size: 13.5px; }

/* ── sample strip ─────────────────────────────────────────────────────────
   Two rows sliding in opposite directions. Each row holds its images twice, so
   translating it by exactly -50% lands on an identical frame and the loop has
   no seam. Decorative: the markup hides the whole band from a screen reader,
   because every image in it also appears in the gallery below. */

.strip {
  padding: clamp(20px, 3vw, 34px) 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip__row { display: flex; gap: 12px; width: max-content; }
.strip__row + .strip__row { margin-top: 12px; }
.strip__track { display: flex; gap: 12px; }
.strip__track--l { animation: marq 46s linear infinite; }
.strip__track--r { animation: marqR 54s linear infinite; }
.strip img { height: clamp(120px, 15vw, 168px); width: auto; border-radius: 14px; object-fit: cover; }
.strip__row--sm img { height: clamp(100px, 12vw, 140px); }
@keyframes marq  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes marqR { from { transform: translateX(-50%); } to { transform: translateX(0);    } }
/* ── sections ─────────────────────────────────────────────────────────── */

.section { padding: var(--sec) 0; }
.section--tint {
  background: #0B0B0E;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.sec-head { max-width: 620px; margin-bottom: clamp(30px, 4vw, 48px); }
.sec-head--tight { margin-bottom: 22px; }
.sec-head h2 { margin-top: 12px; font-size: clamp(27px, 3.6vw, 42px); letter-spacing: -.03em; }
.sec-head p { margin-top: 12px; color: var(--fg2); font-size: 16px; text-wrap: pretty; }

.kicker {
  display: inline-block;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--acc3);
}

/* ── steps ────────────────────────────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }

.step {
  position: relative; padding: 18px;
  border-radius: var(--r-hero);
  background: #0F0F13; border: 1px solid var(--line);
  transition: border-color .3s ease, transform .3s ease;
}
.step:hover { border-color: rgba(173,70,255,.42); transform: translateY(-4px); }
.step h3 { margin: 12px 0 6px; font-size: 20px; }
.step p { color: var(--fg2); font-size: 14.8px; }

.step__no {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--acc-soft); border: 1px solid rgba(173,70,255,.36);
  font-size: 15px; font-weight: 800; line-height: 1; color: var(--acc-ink);
}

/* step 1 — four templates, the first one being tapped */
.step__art--grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  border-radius: var(--r-field); overflow: hidden; margin-bottom: 16px;
}
.step__art--grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
.step__pick { position: relative; border-radius: 12px; overflow: hidden; }
.step__ring {
  position: absolute; inset: 0;
  border: 2px solid var(--acc3); border-radius: 12px;
  animation: ringPulse 2.6s ease-out infinite;
}
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(173,70,255,.55); }
  70%      { box-shadow: 0 0 0 12px rgba(173,70,255,0); }
}

/* step 2 — your photo, plus a template */
.step__art--slot { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.slot {
  flex: 1; min-width: 0;
  display: grid; place-items: center; align-content: center; gap: 6px;
  aspect-ratio: 3 / 4; border-radius: var(--r-chip);
  border: 1.5px dashed rgba(194,122,255,.5); background: rgba(173,70,255,.08);
  color: #C6A6E8; font-size: 12px; text-align: center;
}
.slot__plus { color: var(--fg3); font-size: 18px; }
.step__art--slot img { flex: 1; min-width: 0; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-chip); }

/* step 3 — the result, with the light passing over it */
.step__art--out { position: relative; border-radius: var(--r-field); overflow: hidden; margin-bottom: 16px; }
.step__art--out > img { width: 100%; aspect-ratio: 3 / 2.2; object-fit: cover; }
.step__art--out .shine { width: 40%; animation-duration: 3.4s; animation-delay: 1s; }
.step__saved {
  position: absolute; bottom: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(8,8,10,.78); border: 1px solid var(--line2);
  font-size: 12px; color: #fff;
}
.step__saved i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* the offer that closes the section */
.band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 22px; padding: 16px 18px;
  border-radius: var(--r-card);
  background: linear-gradient(120deg, rgba(173,70,255,.14), rgba(152,16,250,.05));
  border: 1px solid rgba(173,70,255,.28);
}
.band p { flex: 1; min-width: 220px; font-size: 15px; color: var(--acc-ink); }

/* ── gallery ──────────────────────────────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line2); background: #131318;
  color: var(--fg2);
  font-family: var(--font-head); font-size: 14px; font-weight: 600; line-height: 1.3;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.filter:hover { color: var(--fg); border-color: var(--acc-line); }
.filter.is-on { background: rgba(173,70,255,.18); border-color: rgba(173,70,255,.4); color: #F1E6FF; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.shot {
  position: relative; margin: 0;
  border-radius: var(--r-tile); overflow: hidden; background: #111116;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.shot:hover, .shot:focus-within { transform: translateY(-6px) scale(1.015); }
.shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.shot figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 22px 12px 11px;
  background: linear-gradient(transparent, rgba(8,8,10,.88));
  font-size: 12.5px; color: var(--fg);
}
.shot.is-hidden { display: none; }

.gallery__note { margin-top: 18px; color: var(--fg3); font-size: 13.5px; }

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

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }

.card {
  padding: 20px; border-radius: var(--r-card);
  background: #0F0F13; border: 1px solid var(--line);
  transition: border-color .3s ease, transform .3s ease;
}
.card:hover { border-color: rgba(173,70,255,.42); transform: translateY(-4px); }
.card h3 { font-size: 17.5px; line-height: 1.35; }
.card p { margin-top: 6px; color: var(--fg2); font-size: 14.5px; }
.card__ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 13px;
  background: rgba(173,70,255,.14); border: 1px solid rgba(173,70,255,.3);
  color: var(--acc3);
}

/* ── credits ──────────────────────────────────────────────────────────── */

.credit__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(26px, 4vw, 52px); align-items: start;
}
.credit__title { margin-top: 12px; font-size: clamp(27px, 3.6vw, 42px); letter-spacing: -.03em; }
.credit__lead { margin-top: 14px; color: var(--fg2); font-size: 16px; text-wrap: pretty; }
.credit__intl { margin-top: 18px; color: var(--fg3); font-size: 13.5px; }

.ticks { margin-top: 20px; display: grid; gap: 11px; }
.ticks li {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  font-size: 15px; color: #D6D6E0;
}
.ticks li::before { content: "✓"; color: var(--ok); }
/* The same list for things that are not allowed, or not refunded — a tick
   there would read as permission. */
.ticks--no li::before { content: "✕"; color: var(--no); }

.credit__cards { display: grid; gap: 12px; }

.balance {
  position: relative; overflow: hidden;
  padding: 22px; border-radius: var(--r-hero);
  background: linear-gradient(135deg, rgba(194,122,255,.2), rgba(152,16,250,.08));
  border: 1px solid rgba(173,70,255,.34);
}
.balance__label { font-size: 13px; color: #C6A6E8; }
.balance__num {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  font-size: clamp(34px, 4vw, 46px); font-weight: 800; line-height: 1.1;
}
.balance__num i {
  width: 14px; height: 14px; border-radius: 50%; background: var(--grad);
  animation: blink 2.4s ease-in-out infinite;
}
.balance__hint { display: block; margin-top: 4px; font-size: 13px; color: var(--fg2); }
.balance .shine { width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); animation-duration: 6s; animation-delay: 2s; }

.packs { display: grid; gap: 10px; }
.pack {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: var(--r-tile);
  background: #111116; border: 1px solid var(--line);
}
.pack--best {
  position: relative;
  background: #14141B; border-color: rgba(173,70,255,.45);
  animation: ringPulse 3.4s ease-out infinite;
}
.pack__tag {
  font-family: var(--font-head); font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acc3);
}
.pack__name { display: grid; gap: 2px; font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.3; }
.pack__hint { font-size: 13px; color: var(--fg3); text-align: right; }
.pack--best .pack__hint { color: var(--fg2); }
.packs__note { margin-top: 2px; font-size: 13px; color: var(--fg3); }

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

.faq { display: grid; gap: 10px; }
.qa {
  padding: 16px 18px; border-radius: var(--r-tile);
  background: #0F0F13; border: 1px solid var(--line);
  transition: border-color .25s ease, background-color .25s ease;
}
.qa[open] { border-color: var(--acc-line); background: var(--card2); }
.qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  list-style: none; cursor: pointer;
  font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.5;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; color: var(--acc3); font-size: 18px; line-height: 1;
  transition: transform .25s ease;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { margin-top: 10px; color: var(--fg2); font-size: 14.8px; }

/* ── cta band ─────────────────────────────────────────────────────────── */

.cta-sec { padding: 0 0 clamp(60px, 8vw, 100px); }

.cta {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(30px, 5vw, 60px);
  border-radius: 30px;
  background: linear-gradient(140deg, #16121E, #0C0C10 55%);
  border: 1px solid rgba(173,70,255,.3);
}
.cta__glow {
  position: absolute; top: -160px; left: 50%;
  width: 760px; height: 420px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(152,16,250,.4), transparent 70%);
  animation: glow 8s ease-in-out infinite;
  pointer-events: none;
}
.cta__in { position: relative; }
.cta__mark {
  width: 60px; height: 60px; margin: 0 auto 16px;
  border-radius: 18px; box-shadow: 0 12px 30px rgba(152,16,250,.35);
}
.cta h2 { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.16; letter-spacing: -.03em; }
.cta p { margin: 14px auto 0; max-width: 46ch; color: #C6BCD4; font-size: 16px; text-wrap: pretty; }
.cta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.cta__fine { margin-top: 18px; color: var(--fg3); font-size: 13.5px; }

.store {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 13px;
  padding: 15px 26px; border-radius: 17px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.store--play { background: #fff; color: #101018; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.store--play:hover { color: #101018; transform: translateY(-2px); }
.store--play .shine { width: 32%; background: linear-gradient(90deg, transparent, rgba(152,16,250,.22), transparent); animation-duration: 4.4s; animation-delay: 1.2s; }
.store--soon { background: #131318; border: 1px solid var(--line2); color: var(--fg3); cursor: default; }

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

.foot { padding: clamp(40px, 5vw, 64px) 0 30px; border-top: 1px solid rgba(255,255,255,.07); background: #0A0A0D; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.foot__brand p { margin-top: 12px; max-width: 34ch; color: var(--fg3); font-size: 14px; }
.foot__brand .foot__org { margin-top: 8px; }
.foot__org a { color: var(--fg2); font-weight: 600; }
.foot__org a:hover { color: var(--acc3); }
.foot__col { display: grid; gap: 9px; align-content: start; font-size: 14px; }
.foot__col h4 {
  margin-bottom: 3px;
  font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg);
}
.foot__col a { color: var(--fg3); }
.foot__col a:hover { color: var(--acc3); }

.foot__base {
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 13px; color: #8A8A98;
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot__legal a { color: #8A8A98; }
.foot__legal a:hover { color: var(--acc3); }
.foot__legal a[aria-current] { color: var(--fg); }

/* ── install bar ──────────────────────────────────────────────────────────
   Phone-width only, and only once the hero's own install button has scrolled
   away — main.js adds .is-up. Off-screen rather than display:none, so it can
   slide rather than appear. */

.installbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,10,13,.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.1);
  transform: translateY(120%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.installbar.is-up { transform: translateY(0); }
.installbar img { width: 36px; height: 36px; border-radius: 11px; }
.installbar__txt { flex: 1; display: grid; line-height: 1.35; }
.installbar__txt b { font-family: var(--font-head); font-size: 14px; font-weight: 700; }
.installbar__txt small { font-size: 11.5px; color: var(--fg3); }
.installbar .btn { flex: none; white-space: nowrap; }
@media (min-width: 861px) { .installbar { display: none; } }
/* ── legal pages ──────────────────────────────────────────────────────────
   terms.html, privacy.html and refund.html — the pages here that are mostly
   prose, all three built from the same parts. The landing page has no
   long-form text, so nothing below is shared with it.

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

.legal { position: relative; padding: clamp(30px, 5vw, 58px) 0 clamp(56px, 8vw, 96px); }

.legal__glow {
  position: absolute; inset: -240px 0 auto 0; height: 620px; z-index: -1;
  background: radial-gradient(44% 50% at 28% 14%, rgba(152,16,250,.26), transparent 70%);
  pointer-events: none;
}

.legal__head { max-width: 740px; }
.legal__title { margin-top: 14px; font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -.03em; }
.legal__lead { margin-top: 18px; color: var(--fg2); font-size: clamp(15.5px, 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 { flex: none; color: var(--acc); }

/* 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: 19px; }
.tldr .ticks { margin-top: 16px; }

/* ── body: a sticky contents rail beside the prose ───────────────────── */

.legal__body {
  display: grid; gap: clamp(28px, 4vw, 54px);
  grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(42px, 6vw, 72px);
}

.toc { position: sticky; top: 92px; }
.toc h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; 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(--fg3); }
.toc a:hover { color: var(--fg); background: var(--card); }

/* ── clauses ─────────────────────────────────────────────────────────── */

.prose { max-width: 68ch; counter-reset: clause; }

.clause + .clause { margin-top: clamp(36px, 4vw, 48px); }
.clause h2 { font-size: clamp(20px, 2.2vw, 25px); }
.clause h2::before {
  counter-increment: clause; content: counter(clause, bengali);
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-right: 12px; vertical-align: 1px;
  border-radius: 10px;
  background: var(--acc-soft); color: var(--acc3);
  font-size: 14px; font-weight: 700;
}
.clause h3 { margin-top: 26px; font-size: 16.5px; }
.clause p { margin-top: 14px; color: var(--fg2); font-size: 15.5px; }
.clause .ticks { margin-top: 16px; }
.clause a { text-decoration: underline; text-underline-offset: 3px; }

/* 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 we collect", "who it goes to". */
.rows { margin-top: 18px; 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: 15.5px;
  letter-spacing: -.02em;
}
.rows span { display: block; color: var(--fg2); font-size: 14.5px; }

.note {
  margin-top: 22px; padding: 15px 18px;
  border-radius: var(--r-card);
  background: var(--acc-soft); border: 1px solid var(--acc-line);
  color: #E4CCFF; font-size: 14.5px;
}

/* 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 { flex: none; margin-top: 3px; color: var(--acc); }
.org b {
  display: block;
  font-family: var(--font-head); font-weight: 700; font-size: 15.5px;
  letter-spacing: -.02em;
}
.org span { display: block; color: var(--fg2); font-size: 14.5px; }

.contact-rows { margin-top: 20px; display: grid; gap: 10px; }
.org + .contact-rows { margin-top: 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 { flex: none; color: var(--acc); }
.contact-rows small { margin-left: auto; color: var(--fg3); font-size: 13px; }

/* ── 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(26px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
@media print {
  .js .reveal { opacity: 1; transform: none; }
  .site-head, .toc, .legal__glow, .foot__grid, .skip, .strip, .installbar { 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; }
}

@media (max-width: 860px) {
  .head__nav { display: none; }
}

@media (max-width: 900px) {
  .hero__copy { text-align: center; }
  .hero__sub { margin-inline: auto; }
  .hero__cta, .hero__ticks { justify-content: center; }
  .hero__stage { margin-top: 8px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .head__side .btn--fill { display: none; }
  .toc ol { grid-template-columns: 1fr; }
  /* 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; }
}

@media (max-width: 420px) {
  .phone { width: 100%; }
  .band { justify-content: center; text-align: center; }
}

/* ── reduced motion ───────────────────────────────────────────────────────
   Every loop stops, but the phone demo cannot simply freeze: its five screens
   are stacked and only the running animation decides which one shows. So the
   three in-progress screens are hidden outright and the finished image and its
   toast are pinned on — the phone still says what the app does, without a
   single frame of movement. */

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }

  /* Nothing loops. This has to reach every animated element, including the five
     screens: an animation's own frames outrank a plain opacity below, so a
     screen left running here would keep fading in and out under the rules that
     are meant to have settled it. */
  .shine, .hero__glow, .cta__glow, .phone, .eyebrow__dot, .balance__num i,
  .step__ring, .pack--best, .strip__track, .caps li,
  .scr, .appslot__add, .appslot__photo, .appok, .appcta span,
  .appgen__bar, .apptile__ring, .apptoast {
    animation: none !important;
  }

  /* Then the demo is settled on its last frame: the finished image and the
     "saved" toast, with the three in-progress screens out of the way. */
  .scr--browse, .scr--detail, .scr--gen, .appslot__add, .appcta__off, .shine { opacity: 0; }
  .scr--result, .apptoast { opacity: 1; transform: none; }

  .shot, .card, .step, .btn, .installbar { transition: none; }
}