/* ==========================================================================
   Mambanda Market — landing page
   Palette is taken from the app itself: Material Indigo primary, the lime
   (#A2E03A) used on the in-app "Nachricht" CTA, and the #F8F9FA scaffold grey.
   ========================================================================== */

:root {
  --indigo-900: #14173a;
  --indigo-800: #1b2050;
  --indigo-700: #272d74;
  --indigo-600: #3f51b5;
  --indigo-500: #5b6ae8;
  --indigo-050: #eef0fb;

  --lime: #a2e03a;
  --lime-700: #7fb829;
  --price: #1e7200;

  --ink: #12142b;
  --ink-2: #2c3049;
  --muted: #5c6178;
  --muted-2: #8b90a6;
  --line: #e6e8f0;
  --soft: #f7f8fb;
  --white: #fff;

  --radius: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(18, 20, 43, .06), 0 4px 14px rgba(18, 20, 43, .05);
  --shadow-md: 0 4px 12px rgba(18, 20, 43, .07), 0 18px 44px rgba(18, 20, 43, .09);
  --shadow-lg: 0 20px 60px rgba(10, 12, 40, .28);

  --maxw: 1180px;
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* `clip` rather than `hidden`: it contains stray wide children without turning
   the page into a scroll container, so the sticky nav keeps working. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--indigo-600); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 820px; }

/* ─────────────────────────────── buttons ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 999px; font-weight: 600; letter-spacing: -.01em;
  padding: 12px 22px; font-size: 15px; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--lg { padding: 15px 30px; font-size: 16.5px; }

.btn--lime {
  background: var(--lime); color: #16240a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 26px rgba(162, 224, 58, .35);
}
.btn--lime:hover { background: #b0ea4d; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(162, 224, 58, .45); }

.btn--ghost { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn--ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }

/* ─────────────────────────────── nav ─────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 23, 58, .72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background .25s ease;
}
.nav.is-stuck { background: rgba(20, 23, 58, .93); }
.nav__inner { display: flex; align-items: center; gap: 26px; height: 70px; min-width: 0; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.brand__mark { border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.brand__name { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.brand__name--light { font-weight: 400; opacity: .72; }

.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a { color: rgba(255, 255, 255, .76); font-size: 14.5px; font-weight: 500; transition: color .15s ease; }
.nav__links a:hover { color: #fff; }

.nav__right { display: flex; align-items: center; gap: 14px; }

.lang { display: inline-flex; background: rgba(255, 255, 255, .09); border-radius: 999px; padding: 3px; }
.lang__btn {
  border: 0; background: transparent; color: rgba(255, 255, 255, .62);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px; transition: all .18s ease;
}
.lang__btn:hover { color: #fff; }
.lang__btn.is-on { background: #fff; color: var(--indigo-900); }

/* ─────────────────────────────── hero ─────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(91, 106, 232, .55), transparent 62%),
    radial-gradient(700px 420px at 8% 12%, rgba(39, 45, 116, .75), transparent 60%),
    linear-gradient(168deg, #171b45 0%, #14173a 48%, #10132f 100%);
  padding: 62px 0 0;
  color: #fff;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%);
}
.hero__glow {
  position: absolute; width: 520px; height: 520px; right: -80px; top: 40px;
  background: radial-gradient(circle, rgba(162, 224, 58, .17), transparent 68%);
  filter: blur(10px); pointer-events: none;
}
.hero__inner {
  position: relative; display: grid; grid-template-columns: 1.06fr .94fr;
  gap: 54px; align-items: center; padding-bottom: 54px;
}

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 7px 15px 7px 12px;
  font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .9);
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 3px rgba(162, 224, 58, .22); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.hero__title {
  margin: 20px 0 16px;
  font-size: clamp(2.35rem, 5vw, 3.9rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.06;
}
.hero__title em {
  display: block; font-style: normal;
  background: linear-gradient(96deg, var(--lime) 0%, #d6f58c 55%, #8fd0ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  font-size: clamp(1rem, 1.35vw, 1.12rem); color: rgba(255, 255, 255, .74);
  max-width: 33em; margin-bottom: 30px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 30px; }

.qrcard {
  display: inline-flex; align-items: center; gap: 18px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px; padding: 14px 22px 14px 14px; backdrop-filter: blur(8px);
}
.qrcard__code { background: #fff; border-radius: 13px; padding: 8px; line-height: 0; }
.qrcard__code img { width: 92px; height: 92px; }
.qrcard__text { display: flex; flex-direction: column; }
.qrcard__text strong { font-size: 15.5px; font-weight: 600; }
.qrcard__text span { font-size: 13px; color: rgba(255, 255, 255, .66); }
.qrcard__meta { margin-top: 6px; font-size: 12px !important; color: var(--lime) !important; font-weight: 500; }

.hero__stores {
  display: flex; align-items: center; gap: 8px; margin-top: 22px;
  font-size: 13px; color: rgba(255, 255, 255, .52);
}

/* statbar */
.statbar {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 26px 0 40px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.statbar li { display: flex; flex-direction: column; gap: 2px; }
.statbar strong { font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; }
.statbar span { font-size: 12.5px; color: rgba(255, 255, 255, .55); }

/* ─────────────────────────────── phone mockup ─────────────────────────────── */
.hero__device { display: flex; justify-content: center; }
.phone {
  position: relative; width: 306px; height: 630px; flex-shrink: 0;
  background: linear-gradient(160deg, #2a2f52, #171a35);
  border-radius: 44px; padding: 11px;
  box-shadow: var(--shadow-lg), 0 0 0 1.5px rgba(255, 255, 255, .13) inset;
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

.phone__notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 24px; background: #171a35; border-radius: 0 0 15px 15px; z-index: 3;
}
.phone__screen {
  height: 100%; background: #f8f9fa; border-radius: 34px; overflow: hidden;
  display: flex; flex-direction: column; padding-bottom: 56px;
}

.ui-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 20px 4px; font-size: 10.5px; font-weight: 600; color: #12142b;
}
.ui-status__icons { display: flex; gap: 3px; align-items: center; }
.ui-status__icons i { width: 4px; height: 8px; background: #12142b; border-radius: 1px; display: block; }
.ui-status__icons .bat { width: 15px; height: 8px; border-radius: 2px; opacity: .82; }

.ui-search { display: flex; align-items: center; gap: 8px; padding: 6px 13px 10px; }
.ui-search__field {
  flex: 1; display: flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #e8eaf1; border-radius: 11px;
  padding: 8px 11px; font-size: 10.5px; color: #8b90a6; box-shadow: 0 1px 3px rgba(18, 20, 43, .05);
}
.ui-search__field svg { color: var(--indigo-600); flex-shrink: 0; }
.ui-search__field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-search__bell { position: relative; color: #4a4f66; }
.ui-dot {
  position: absolute; top: -1px; right: -1px; width: 6px; height: 6px;
  background: #ff4d5e; border-radius: 50%; border: 1.4px solid #f8f9fa;
}

.ui-cats { display: flex; gap: 6px; padding: 0 13px 11px; overflow: hidden; }
.ui-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0; font-size: 8.5px; color: #5c6178; width: 50px; text-align: center;
}
.ui-chip b {
  width: 38px; height: 38px; border-radius: 13px; background: #fff; border: 1px solid #e8eaf1;
  display: grid; place-items: center; color: var(--indigo-600);
}
.ui-chip.is-on b { background: var(--indigo-600); border-color: var(--indigo-600); color: #fff; }
.ui-chip.is-on { color: var(--indigo-600); font-weight: 600; }
.ui-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.ui-promo {
  margin: 0 13px 12px; padding: 11px 13px; border-radius: 14px;
  background: linear-gradient(112deg, var(--indigo-600), #5b6ae8);
  color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ui-promo strong { display: block; font-size: 11px; font-weight: 600; }
.ui-promo span { font-size: 8.8px; opacity: .78; }
.ui-promo__art {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.ui-sectitle { padding: 0 13px 7px; font-size: 11px; font-weight: 700; color: #12142b; }

.ui-rail { display: flex; gap: 8px; padding: 0 13px 13px; overflow: hidden; }
.ui-rail .ui-card { width: 104px; flex-shrink: 0; }

.ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 13px; }

.ui-card { background: #fff; border-radius: 11px; overflow: hidden; box-shadow: 0 1px 4px rgba(18, 20, 43, .07); }
.ui-card__img { position: relative; height: 62px; }
.ui-card__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .16));
}
.ui-card__heart {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .92);
  display: grid; place-items: center; color: #c9ccd8;
}
.ui-card__heart.on { color: #ff4d5e; }
.ui-card__b { padding: 6px 7px 8px; }
.ui-card__t {
  font-size: 9px; font-weight: 500; color: #12142b; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-card__p { font-size: 10.5px; font-weight: 700; color: var(--price); margin-top: 2px; }
.ui-card__m { font-size: 8px; color: #8b90a6; margin-top: 1px; }

.phone__nav {
  position: absolute; left: 11px; right: 11px; bottom: 11px; height: 56px;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
  border-radius: 0 0 34px 34px; border-top: 1px solid #eceef4;
  display: flex; align-items: center; justify-content: space-around; padding: 0 8px 6px;
}
.phone__nav span { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #a8adc0; }
.phone__nav i { font-style: normal; font-size: 7.5px; font-weight: 500; }
.phone__nav .on { color: var(--indigo-600); }
.phone__nav .plus {
  width: 38px; height: 38px; border-radius: 13px; margin-top: -14px;
  background: var(--indigo-600); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(63, 81, 181, .42);
}

/* ─────────────────────────────── sections ─────────────────────────────── */
.section { padding: 96px 0; }
.section--soft { background: var(--soft); border-block: 1px solid var(--line); }
.section--dark {
  background: linear-gradient(165deg, #171b45, #12152f);
  color: #fff;
}

.sechead { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--indigo-600); margin-bottom: 14px;
}
.section--dark .eyebrow { color: var(--lime); }
.sechead h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); font-weight: 800; }
.sechead p { margin-top: 14px; color: var(--muted); font-size: 1.03rem; }
.sechead--onDark p { color: rgba(255, 255, 255, .66); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.step {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 28px 30px; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__n {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(140deg, var(--indigo-600), var(--indigo-500));
  color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(63, 81, 181, .28);
}
.step h3 { font-size: 1.16rem; margin-bottom: 9px; }
.step p { color: var(--muted); font-size: .95rem; }

/* feature cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d4d8e8; }
.card__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--indigo-050); color: var(--indigo-600); margin-bottom: 17px;
}
.card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .93rem; }

/* categories */
.catgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cat {
  display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 12px; font-size: .9rem; font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--indigo-500); }
.cat__i {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px;
  background: var(--indigo-050); color: var(--indigo-600);
}
.cat:hover .cat__i { background: var(--indigo-600); color: #fff; }

/* sellers split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.panel {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg); padding: 34px 32px;
}
.panel--accent {
  background: linear-gradient(160deg, rgba(162, 224, 58, .12), rgba(255, 255, 255, .05));
  border-color: rgba(162, 224, 58, .3);
}
.tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .13); color: #fff; margin-bottom: 16px;
}
.tag--lime { background: var(--lime); color: #16240a; }
.panel h3 { font-size: 1.4rem; margin-bottom: 9px; }
.panel > p { color: rgba(255, 255, 255, .66); font-size: .96rem; margin-bottom: 22px; }

.ticks { display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: .95rem; color: rgba(255, 255, 255, .87); }
.ticks li::before {
  content: ''; flex-shrink: 0; width: 19px; height: 19px; margin-top: 2px; border-radius: 50%;
  background: rgba(162, 224, 58, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a2e03a'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* pricing */
.pricing__controls { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.seg { display: inline-flex; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: var(--shadow-sm); }
.seg__btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 999px;
  transition: all .2s ease;
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on { background: var(--indigo-600); color: #fff; box-shadow: 0 4px 12px rgba(63, 81, 181, .3); }
.seg__save {
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  background: var(--lime); color: #16240a; padding: 2px 7px; border-radius: 999px;
}
.seg__btn.is-on .seg__save { background: rgba(255, 255, 255, .95); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan--featured {
  border-color: var(--indigo-600); box-shadow: 0 0 0 1px var(--indigo-600), var(--shadow-md);
}
.plan__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--indigo-600); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
  white-space: nowrap;
}
.plan--featured .plan__badge { background: linear-gradient(100deg, var(--indigo-600), var(--indigo-500)); }
.plan__name { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; }
.plan__price { display: flex; align-items: baseline; gap: 5px; }
.plan__amt { font-size: 2.4rem; font-weight: 800; letter-spacing: -.045em; }
.plan__per { font-size: .9rem; color: var(--muted); font-weight: 500; }
.plan__billed { font-size: 12.5px; color: var(--muted-2); margin-top: 3px; min-height: 19px; }
.plan__feats { display: flex; flex-direction: column; gap: 11px; margin: 22px 0 26px; }
.plan__feats li { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; color: var(--ink-2); }
.plan__feats li::before {
  content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--indigo-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233f51b5'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat;
}
.plan__cta {
  display: block; width: 100%; text-align: center; padding: 12px 18px; border-radius: 999px;
  font-weight: 600; font-size: 14.5px; border: 1.5px solid var(--line); color: var(--ink);
  background: var(--white); transition: all .2s ease;
}
.plan__cta:hover { border-color: var(--indigo-600); color: var(--indigo-600); }
.plan--featured .plan__cta { background: var(--indigo-600); border-color: var(--indigo-600); color: #fff; }
.plan--featured .plan__cta:hover { background: var(--indigo-700); color: #fff; }

.pricing__note { text-align: center; margin-top: 32px; color: var(--muted); font-size: .95rem; }

/* download */
.dl { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }
.dl__left h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); font-weight: 800; }
.dl__sub { margin: 14px 0 26px; color: rgba(255, 255, 255, .7); font-size: 1.03rem; max-width: 34em; }

.dl__meta { display: flex; gap: 32px; margin: 26px 0 30px; flex-wrap: wrap; }
.dl__meta div { display: flex; flex-direction: column; gap: 2px; }
.dl__meta dt { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.dl__meta dd { margin: 0; font-size: 1.02rem; font-weight: 600; }

.dlsteps { display: flex; flex-direction: column; gap: 16px; counter-reset: d; }
.dlsteps li { display: flex; flex-direction: column; gap: 2px; padding-left: 40px; position: relative; }
.dlsteps li::before {
  counter-increment: d; content: counter(d);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 9px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--lime);
}
.dlsteps strong { font-size: .97rem; font-weight: 600; }
.dlsteps span { font-size: .9rem; color: rgba(255, 255, 255, .6); }

.dl__right { display: flex; flex-direction: column; gap: 18px; }
.qrbig {
  background: #fff; border-radius: var(--radius-lg); padding: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: var(--shadow-lg);
}
.qrbig img { width: 190px; height: 190px; }
.qrbig span { font-size: 13px; color: var(--muted); font-weight: 500; }

.soon { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--radius); padding: 16px 20px; }
.soon__row { display: flex; align-items: center; gap: 13px; }
.soon__row svg { color: rgba(255, 255, 255, .8); flex-shrink: 0; }
.soon__row span { display: flex; flex-direction: column; }
.soon__row strong { font-size: .95rem; font-weight: 600; }
.soon__row em { font-style: normal; font-size: .84rem; color: rgba(255, 255, 255, .55); }

/* faq */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 22px; transition: border-color .2s ease, box-shadow .2s ease;
}
.faq details[open] { border-color: var(--indigo-500); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 30px 18px 0; position: relative;
  font-weight: 600; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq p { padding: 0 0 20px; color: var(--muted); font-size: .96rem; }

/* footer */
.foot { background: #0e1129; color: #fff; padding: 62px 0 26px; }
.foot__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.foot__brand p { margin: 14px 0 18px; color: rgba(255, 255, 255, .55); font-size: .95rem; }
.lang--foot { background: rgba(255, 255, 255, .07); }
.foot__col h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-bottom: 16px; font-weight: 700; }
.foot__col { display: flex; flex-direction: column; gap: 11px; }
.foot__col a { color: rgba(255, 255, 255, .74); font-size: .95rem; transition: color .15s ease; }
.foot__col a:hover { color: var(--lime); }
.foot__bar {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .85rem; color: rgba(255, 255, 255, .45);
}

/* ─────────────────────────── legal documents ─────────────────────────── */
/* The shared nav is translucent over a dark hero; on the white document pages
   it needs a solid plate instead. */
body[data-doc] .nav { background: var(--indigo-900); backdrop-filter: none; }

.doc { padding: 56px 0 90px; }
.doc__back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px;
  font-size: 14px; font-weight: 500; color: var(--indigo-600);
}
.doc__back::before { content: '←'; }
.doc__back:hover { text-decoration: underline; }

.doc h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; }
.doc__updated { margin-top: 10px; font-size: 13.5px; color: var(--muted-2); }
.doc__lead { margin-top: 20px; font-size: 1.08rem; color: var(--muted); }

.doc__note {
  margin: 28px 0 34px; padding: 18px 22px; border-radius: 14px;
  background: rgba(162, 224, 58, .1); border: 1px solid rgba(127, 184, 41, .35);
  border-left: 4px solid var(--lime-700);
  font-size: .97rem; color: var(--ink-2);
}

.doc__toc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px;
  margin-bottom: 46px; padding: 22px 24px;
  background: var(--soft); border: 1px solid var(--line); border-radius: 16px;
}
.doc__toc a { font-size: .89rem; color: var(--muted); padding: 4px 0; }
.doc__toc a:hover { color: var(--indigo-600); }

.doc__sec { scroll-margin-top: 90px; margin-bottom: 34px; }
.doc__sec h2 {
  font-size: 1.18rem; font-weight: 700; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.doc__sec p { margin-bottom: 13px; color: var(--ink-2); font-size: .97rem; line-height: 1.72; }
.doc__sec p:last-child { margin-bottom: 0; }
.doc__sec strong { font-weight: 600; color: var(--ink); }
.doc__sec a { color: var(--indigo-600); text-decoration: underline; }

body[data-doc] .foot { padding: 34px 0 26px; }
body[data-doc] .foot__bar a { color: rgba(255, 255, 255, .74); }
body[data-doc] .foot__bar a:hover { color: var(--lime); }

@media (max-width: 660px) {
  .doc__toc { grid-template-columns: 1fr; }
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ─────────────────────────────── responsive ─────────────────────────────── */
@media (max-width: 1040px) {
  .hero__inner { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .hero__copy { display: flex; flex-direction: column; align-items: center; }
  .hero__sub { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .dl { grid-template-columns: 1fr; gap: 40px; }
  .dl__right { align-items: center; }
  .cards, .steps, .plans { grid-template-columns: repeat(2, 1fr); }
  .catgrid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__inner { gap: 14px; }
  .nav__right { margin-left: auto; }
  .split { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
}

/* The sticky nav is the one row that cannot wrap, so it sets the minimum page
   width. Shrink its parts progressively — otherwise it widens the body and
   every `.wrap` section below renders wider than the screen and gets clipped. */
@media (max-width: 700px) {
  .nav__inner { gap: 10px; height: 62px; }
  .brand__name { font-size: 15px; }
  .lang__btn { padding: 5px 8px; font-size: 11px; }
  .btn--sm { padding: 8px 14px; font-size: 13px; }
}

/* Measured at 375px (327px usable): mark 36 + wordmark 141 + language 98 +
   CTA 104 = 409 — 82px too wide. Dropping the header CTA brings it to 295 and
   keeps the brand, which matters more in the header. The download action moves
   to .mobilecta below, so nothing is lost. */
@media (max-width: 620px) {
  .nav__cta { display: none; }
}

@media (max-width: 360px) {
  /* iPhone SE and similar: 272px usable. Trim the last few pixels. */
  .brand__name { font-size: 14px; }
  .lang__btn { padding: 5px 6px; font-size: 10.5px; }
  .nav__inner { gap: 8px; }
}

/* ── sticky mobile download bar ─────────────────────────────────────────── */
.mobilecta { display: none; }

@media (max-width: 620px) {
  .mobilecta {
    position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 45;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--lime); color: #16240a;
    padding: 14px 20px; border-radius: 999px;
    font-weight: 600; font-size: 15px; letter-spacing: -.01em;
    box-shadow: 0 10px 30px rgba(10, 12, 40, .4);
    transform: translateY(150%); transition: transform .32s ease;
  }
  .mobilecta.is-on { transform: none; }
  /* keep the footer's last line clear of the bar */
  .foot { padding-bottom: 92px; }
}

@media (max-width: 660px) {
  .section { padding: 68px 0; }
  .hero { padding-top: 42px; }
  .cards, .steps, .plans { grid-template-columns: 1fr; }
  .catgrid { grid-template-columns: repeat(2, 1fr); }
  .statbar { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .qrcard { flex-direction: column; text-align: center; padding: 18px; }
  .btn--lg { width: 100%; }
  .hero__actions { width: 100%; }
  .foot__inner { grid-template-columns: 1fr; }
  .dl__meta { gap: 22px; }
  .phone { width: 268px; height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* iPhone install card. Same shell as the old "coming soon" note, but it now
   carries an action and two steps, so it needs to stack rather than sit on
   one line. */
.soon--ios { display: flex; flex-direction: column; gap: 13px; }
.soon__cta {
  width: 100%;
  justify-content: center;
}
.soon__steps {
  margin: 0; padding-left: 1.15rem;
  display: flex; flex-direction: column; gap: 5px;
  font-size: .84rem; line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}
.soon__steps li::marker { color: rgba(255, 255, 255, .38); }

/* iPhone visitors. The primary button becomes the web app, so the APK's own
   version/size/steps would be describing a file they are not getting. */
.dl__alt {
  display: none;
  margin-top: 4px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .6);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dl__alt:hover { color: #fff; }
#download.is-ios .dl__meta,
#download.is-ios .dlsteps { display: none; }
#download.is-ios .dl__alt { display: inline-block; }