/* ============================================================
   Batwa — about.html only (marketing page).
   Never loaded by the app, never precached by sw.js. Colour, radius,
   spacing and depth all come from css/tokens.css; this file adds the
   display face and the landing-page layout on top.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-var.woff2") format("woff2");
}

:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ab-pad: var(--s-9);
  --ab-topbar: 60px;
}
@media (min-width: 900px) { :root { --ab-pad: 96px; --ab-topbar: 68px; } }

body { overflow-x: hidden; background: var(--c-surface); }
:root[data-theme="dark"] body { background: var(--c-bg); }

/* Detached hero shell: the soft lavender canvas floats inside a white page,
   the way most soft-UI landing pages frame their first screen. */
.ab-shell {
  width: min(1440px, 100% - 24px); margin: 12px auto;
  border-radius: var(--r-xl); background: var(--c-bg);
  box-shadow: var(--shadow-xs); overflow: hidden; position: relative;
}
:root[data-theme="dark"] .ab-shell { background: var(--c-surface); }
@media (min-width: 900px) {
  .ab-shell { width: min(1440px, 100% - 32px); margin-block: 16px; border-radius: 36px; }
}
.ab-shell .ab-wrap { width: min(1200px, 100% - 32px); }
@media (min-width: 900px) { .ab-shell .ab-wrap { width: min(1200px, 100% - 96px); } }

.ab-wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

.ab-skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-ink); font-weight: 600;
}
.ab-skip:focus { left: 12px; top: 12px; }

h1, h2, h3 { text-wrap: balance; }

/* =================== Top bar =================== */
.ab-top {
  position: relative; z-index: 2; background: transparent;
  border-bottom: 0;
}
.ab-top .ab-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: var(--ab-topbar);
}
.ab-brand { display: flex; align-items: center; gap: 10px; color: var(--c-ink); }
.ab-brand span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.ab-top nav { display: flex; align-items: center; gap: var(--s-2); }
.ab-top .icon-btn { width: 40px; height: 40px; }
@media (max-width: 599px) { .ab-top .icon-btn { display: none; } }

/* =================== Sections =================== */
.ab-sec { padding: var(--ab-pad) 0; }
.ab-alt { background: var(--c-bg-deep); }
.ab-sec h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  max-width: 18ch;
}
.ab-lead {
  margin-top: var(--s-4); color: var(--c-ink-soft);
  font-size: var(--fs-md); line-height: 1.6; max-width: 58ch;
}
.ab-eyebrow {
  display: inline-flex; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-violet);
}
.ab-eyebrow b {
  background: var(--c-violet-soft); padding: 5px 11px;
  border-radius: var(--r-pill); font-weight: 700;
}
.ab-hand {
  font-family: var(--font-hand); font-size: var(--fs-hand);
  color: var(--c-muted); line-height: 1.3;
}
.ab-mono {
  display: inline-block; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: -0.01em;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--c-aqua-soft); color: var(--c-ink-soft);
}
.ab-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* =================== Hero =================== */
.ab-hero { padding-top: var(--s-6); padding-bottom: var(--s-8); position: relative; z-index: 1; }
@media (min-width: 900px) { .ab-hero { padding-top: var(--s-7); padding-bottom: var(--s-9); } }
.ab-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
  margin-top: var(--s-4);
}
.ab-hero h1 em { display: none; font-style: normal; color: var(--c-violet); }
@media (min-width: 900px) { .ab-hero h1 em { display: block; } }
.ab-hero .ab-hand { margin-top: var(--s-4); }
.ab-art { position: relative; margin-top: var(--s-8); width: 80%; margin-inline: auto; }
.ab-art img { width: 100%; height: auto; position: relative; z-index: 1; }
.ab-art.is-float img { animation: ab-float 6s ease-in-out infinite; }
@keyframes ab-float { 50% { transform: translateY(-14px); } }

.ab-glow { position: absolute; inset: -12% -6%; z-index: 0; pointer-events: none; }
.ab-glow::before, .ab-glow::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(48px);
}
.ab-glow::before {
  inset: 12% 8% 18% 8%;
  background: radial-gradient(closest-side, var(--c-violet-soft), transparent);
  filter: blur(10px);
}
.ab-glow::after {
  width: 44%; padding-bottom: 44%; right: 2%; top: 6%;
  background: radial-gradient(circle, rgba(47, 182, 233, 0.30), transparent 70%);
}

@media (min-width: 900px) {
  .ab-hero .ab-wrap {
    display: grid; grid-template-columns: 52% 48%;
    align-items: center; gap: var(--s-8);
  }
  .ab-art { margin-top: 0; width: 100%; }
}

/* =================== Stats =================== */
.ab-stats {
  display: grid; gap: var(--s-4); margin-top: var(--s-7);
  grid-template-columns: 1fr;
}
.ab-stats .card { padding: var(--s-6); }
.ab-stats b {
  display: block; font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.02em;
}
.ab-stats p { margin-top: var(--s-3); color: var(--c-muted); font-size: var(--fs-sm); }
@media (min-width: 640px) { .ab-stats { grid-template-columns: repeat(3, 1fr); } }

/* =================== Card grids =================== */
.ab-grid { display: grid; gap: var(--s-4); margin-top: var(--s-7); grid-template-columns: 1fr; }
.ab-grid .card { padding: var(--s-5); }
.ab-grid h3 { font-size: var(--fs-md); margin-top: var(--s-3); }
.ab-grid p { margin-top: var(--s-2); color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }
@media (min-width: 640px) { .ab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ab-grid { grid-template-columns: repeat(3, 1fr); } }
.ab-grid.ab-three { grid-template-columns: 1fr; }
@media (min-width: 900px) { .ab-grid.ab-three { grid-template-columns: repeat(3, 1fr); } }

.ab-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-violet-soft); color: var(--c-violet);
}
.ab-logos { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.ab-logos img {
  width: 34px; height: 34px; border-radius: 10px; background: #fff;
  padding: 4px; box-shadow: var(--shadow-xs);
}

/* =================== Dark band (shared spaces) =================== */
.ab-band {
  background: #171331;
  --c-ink: #F3F1FF;
  --c-ink-soft: rgba(255, 255, 255, 0.78);
  --c-muted: rgba(255, 255, 255, 0.72);
  --c-surface: rgba(255, 255, 255, 0.06);
  --c-border: rgba(255, 255, 255, 0.12);
  --c-violet: #B9A8FF;
  --c-violet-soft: rgba(155, 133, 255, 0.18);
  --clay-surface: inset 0 1px 0 rgba(155, 133, 255, 0.18), 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  color: var(--c-ink);
}
.ab-band .ab-mono { background: rgba(86, 199, 242, 0.16); color: #BFE9FA; }
.ab-band ul { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.ab-band li { display: flex; gap: var(--s-3); align-items: flex-start; }
.ab-band li b { font-family: var(--font-display); font-weight: 700; color: var(--c-violet); }
.ab-band .ab-note {
  margin-top: var(--s-6); font-size: var(--fs-sm);
  color: var(--c-muted); max-width: 52ch;
}
@media (min-width: 900px) {
  .ab-band .ab-wrap {
    display: grid; grid-template-columns: 46% 54%;
    align-items: center; gap: var(--s-8);
  }
  .ab-band .ab-art { order: -1; margin-top: 0; width: 100%; }
}

/* =================== Screenshots =================== */
.ab-shots {
  display: flex; gap: var(--s-4); margin-top: var(--s-7);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s-3); scrollbar-width: none;
}
.ab-shots::-webkit-scrollbar { display: none; }
.ab-shots figure { flex: 0 0 62%; scroll-snap-align: center; margin: 0; }
.ab-shots img {
  width: 100%; height: auto; border-radius: 28px;
  border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-lift);
  background: var(--c-surface);
}
.ab-shots figcaption {
  margin-top: var(--s-3); font-size: var(--fs-xs);
  color: var(--c-muted); line-height: 1.45;
}
@media (min-width: 900px) {
  .ab-shots { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .ab-shots figure { flex: none; }
}

/* =================== Steps =================== */
.ab-steps { display: grid; gap: var(--s-5); margin-top: var(--s-7); counter-reset: step; }
.ab-steps li { display: flex; gap: var(--s-4); align-items: flex-start; }
.ab-steps li::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-violet-soft); color: var(--c-violet);
}
.ab-steps h3 { font-size: var(--fs-md); }
.ab-steps p { margin-top: 4px; color: var(--c-muted); font-size: var(--fs-sm); }
@media (min-width: 900px) { .ab-steps { grid-template-columns: repeat(3, 1fr); } }

/* =================== FAQ =================== */
.ab-faq-sec .ab-wrap { text-align: center; }
.ab-faq-sec h2 { margin-inline: auto; }
.ab-faq {
  margin: var(--s-7) auto 0; display: grid; gap: var(--s-3);
  max-width: 760px; text-align: left;
}
.ab-faq details {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--clay-surface);
  padding: var(--s-4) var(--s-5);
  transition: border-color .28s var(--ease-out), box-shadow .28s var(--ease-out),
              background-color .28s var(--ease-out);
}
.ab-faq details.is-open {
  border-color: color-mix(in srgb, var(--c-violet) 28%, var(--c-border));
  box-shadow: var(--clay-surface), 0 14px 32px -16px rgba(98, 72, 245, 0.35);
}
.ab-faq summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-md);
  list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-4);
  color: var(--c-ink); transition: color .2s var(--ease-out);
}
.ab-faq summary:hover, .ab-faq details.is-open summary { color: var(--c-violet); }
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary:focus-visible {
  outline: 2px solid var(--c-violet); outline-offset: 4px; border-radius: var(--r-sm);
}
/* the plus: two bars, the vertical one shrinks to a dash as it rotates */
.ab-faq summary i {
  flex: 0 0 auto; position: relative; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-violet-soft);
  transition: transform .32s var(--ease-out), background-color .28s var(--ease-out);
}
.ab-faq summary i::before, .ab-faq summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-violet);
  border-radius: 2px; translate: -50% -50%;
  transition: transform .32s var(--ease-out), opacity .32s var(--ease-out);
}
.ab-faq summary i::before { width: 12px; height: 2px; }
.ab-faq summary i::after { width: 2px; height: 12px; }
.ab-faq details.is-open summary i { transform: rotate(180deg); background: var(--c-violet); }
.ab-faq details.is-open summary i::before, .ab-faq details.is-open summary i::after { background: #fff; }
.ab-faq details.is-open summary i::after { transform: scaleY(0); opacity: 0; }
.ab-faq-body { overflow: hidden; }
.ab-faq p { padding-top: var(--s-3); color: var(--c-ink-soft); font-size: var(--fs-base); line-height: 1.6; }
.ab-faq p a { color: var(--c-violet); font-weight: 600; }

/* =================== Author =================== */
.ab-author { text-align: center; }
.ab-author .ab-wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.ab-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: var(--c-violet-soft); border: 3px solid var(--c-surface);
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) { .ab-avatar { width: 112px; height: 112px; } }
.ab-author h2 { max-width: none; font-size: clamp(1.5rem, 5vw, 2rem); }
.ab-author p { color: var(--c-ink-soft); max-width: 46ch; }

/* =================== Footer =================== */
/* The footer mirrors the hero: the same detached shell, closing the page the
   way it opened. One row of brand, links and credit; one line of meta; and a
   wordmark cut off by the shell's bottom edge, so it reads as depth, not height. */
.ab-foot { padding: 12px 0; }
.ab-foot-shell {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(1440px, 100% - 24px); margin-inline: auto;
  border-radius: var(--r-xl); background: var(--c-bg);
  box-shadow: var(--shadow-xs);
  padding: var(--s-6) var(--s-5) var(--s-9);
}
:root[data-theme="dark"] .ab-foot-shell { background: var(--c-surface); }
@media (min-width: 900px) {
  .ab-foot { padding: 16px 0; }
  .ab-foot-shell {
    width: min(1440px, 100% - 32px); border-radius: 36px;
    padding: var(--s-6) var(--s-9) var(--s-9);
  }
}
.ab-foot-row {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  text-align: center;
}
.ab-foot-row .ab-brand img { border-radius: 8px; }
.ab-foot-row .ab-brand span { font-size: 1.125rem; }
.ab-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); }
.ab-foot nav a {
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft);
  padding: 6px 2px; position: relative;
}
.ab-foot nav a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--c-violet);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.ab-foot nav a:hover { color: var(--c-violet); }
.ab-foot nav a:hover::after { transform: scaleX(1); }
.ab-foot-by {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--c-muted);
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  background: var(--c-surface); border: 1px solid var(--c-border);
}
:root[data-theme="dark"] .ab-foot-by { background: var(--c-surface-2); }
.ab-foot-by a { color: var(--c-ink); font-weight: 600; }
.ab-foot-by a:hover { color: var(--c-violet); }
.ab-foot-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2FB6A0;
  box-shadow: 0 0 0 3px rgba(47, 182, 160, 0.22);
  animation: ab-pulse 2.4s ease-in-out infinite;
}
@keyframes ab-pulse { 50% { box-shadow: 0 0 0 6px rgba(47, 182, 160, 0.10); } }
.ab-foot-meta {
  position: relative; z-index: 1;
  margin-top: var(--s-5); display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px var(--s-4); font-size: var(--fs-xs); color: var(--c-muted);
}
.ab-foot-meta .ab-hand { font-size: 1.05rem; color: var(--c-violet); }
.ab-foot-mark {
  position: absolute; left: 50%; bottom: -0.30em; translate: -50% 0; z-index: 0;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em;
  font-size: clamp(5.5rem, 22vw, 15rem); line-height: 1; white-space: nowrap;
  pointer-events: none; user-select: none;
  background: linear-gradient(180deg, var(--c-violet) 0%, transparent 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.26;
}
:root[data-theme="dark"] .ab-foot-mark { opacity: 0.34; }
@media (min-width: 900px) {
  .ab-foot-row { flex-direction: row; justify-content: space-between; text-align: left; }
  .ab-foot-meta { justify-content: flex-start; }
  .ab-foot-mark { left: auto; right: -0.04em; translate: 0 0; bottom: -0.36em; }
}
@media (prefers-reduced-motion: reduce) { .ab-foot-dot { animation: none; } }

/* =================== Sticky mobile CTA =================== */
.ab-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-border);
}
@media (min-width: 900px) { .ab-sticky { display: none; } }
body { padding-bottom: 96px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* =================== Reveal =================== */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }