/* ==========================================================================
   Bol — v2 additions (loaded AFTER styles.css)
   New components for the re-strategised, bilingual site:
     A. Language picker modal (first visit) + nav language switch
     B. Free-start emphasis pill
     C. "Versus" comparison block (English page: the no-script contrast)
     D. Founder / trust note
   Reuses every token & primitive from styles.css.
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* A. Language picker modal + nav switch                               */
/* ------------------------------------------------------------------ */
.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: 1.5rem;
}
.lang-modal.is-open { display: grid; }
.lang-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 16, 0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lang-modal__card {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  width: 100%;
  text-align: center;
  animation: lm-pop 0.5s var(--ease-out) both;
}
@keyframes lm-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.lang-modal__card img { width: 56px; height: 56px; border-radius: 15px; margin: 0 auto 1.1rem; box-shadow: var(--shadow-glow); }
.lang-modal__card h2 { font-size: 1.5rem; line-height: 1.15; }
.lang-modal__card p { margin-top: 0.6rem; font-size: 0.95rem; }
.lang-modal__opts { display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.lang-opt {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  font-weight: 700;
  color: var(--ink);
  transition: border-color 0.25s var(--ease-out), transform 0.2s var(--ease-out), background 0.25s var(--ease-out);
}
.lang-opt:hover { border-color: var(--brand); transform: translateY(-2px); }
.lang-opt .flag { font-size: 1.7rem; line-height: 1; flex: none; }
.lang-opt .lang-opt__txt { display: flex; flex-direction: column; line-height: 1.2; }
.lang-opt small { color: var(--muted); font-weight: 500; font-size: 0.83rem; white-space: nowrap; }
.lang-opt .arrow { margin-left: auto; color: var(--faint); flex: none; }
.lang-opt.is-suggested { border-color: var(--brand); background: var(--brand-soft); }
.lang-opt .tag { margin-left: auto; flex: none; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-tint); }

/* Nav language switch (between the DE and EN homepages) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: color 0.25s, border-color 0.25s;
}
.lang-switch:hover { color: var(--ink); border-color: var(--brand); }
.lang-switch svg { width: 15px; height: 15px; flex: none; }
.nav-right { display: flex; align-items: center; gap: 0.9rem; }

/* ------------------------------------------------------------------ */
/* B. Free-start emphasis (the download should feel free)              */
/* ------------------------------------------------------------------ */
.free-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--go-soft);
  color: var(--go-text);
  font-weight: 700;
  font-size: 0.9rem;
}
.free-pill svg { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------------ */
/* C. Versus comparison block (English: explicit no-script contrast)   */
/* ------------------------------------------------------------------ */
.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  margin-top: 1.6rem;
  align-items: stretch;
}
.versus__col {
  padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}
.versus__col--us {
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(224, 86, 142, 0.20), transparent 62%),
    var(--surface);
  border-color: rgba(224, 97, 155, 0.55);
  box-shadow: var(--shadow-card);
}
.versus__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.versus__head h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.versus__col--us .versus__head h4 { color: var(--brand-tint); }
.versus ul { display: grid; gap: 0.85rem; }
.versus li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.97rem; color: var(--muted); line-height: 1.4; }
.versus li .ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.versus li .ic svg { width: 12px; height: 12px; }
.versus__col--them .ic { background: rgba(255, 255, 255, 0.08); color: var(--faint); }
.versus__col--us .ic { background: var(--brand-soft); color: var(--brand-tint); }
.versus__col--us strong { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .versus { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/* D. Founder / trust note                                             */
/* ------------------------------------------------------------------ */
.founder {
  max-width: 47rem;
  margin-inline: auto;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.founder__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  background: var(--brand-gradient);
  box-shadow: var(--shadow-glow);
}
.founder__body p { font-size: 1.06rem; color: var(--ink); line-height: 1.55; }
.founder__body p + p { margin-top: 0.9rem; }
.founder .sig { margin-top: 1.1rem; color: var(--brand-tint); font-weight: 800; font-size: 0.95rem; }
@media (max-width: 640px) {
  .founder { flex-direction: column; align-items: center; text-align: center; }
}

/* ------------------------------------------------------------------ */
/* E. Crisper type — fewer words, a touch larger (loaded after styles) */
/* ------------------------------------------------------------------ */
:root {
  --fs-body: clamp(1.05rem, 0.99rem + 0.4vw, 1.24rem);
  --fs-lead: clamp(1.24rem, 1.08rem + 0.85vw, 1.66rem);
}

/* ------------------------------------------------------------------ */
/* F. Segmented language toggle (shows BOTH, current one highlighted)  */
/* ------------------------------------------------------------------ */
.lang-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.lang-seg__btn {
  padding: 0.36rem 0.74rem;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  transition: color 0.2s var(--ease-out), background 0.25s var(--ease-out);
}
.lang-seg__btn.is-active { background: var(--brand-gradient); color: #fff; }
.lang-seg__btn:not(.is-active):hover { color: var(--ink); }
.founder__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ------------------------------------------------------------------ */
/* G. Larger scroll-showcase phone on desktop                          */
/*    A single portrait phone left the sides too empty on wide screens.*/
/*    Enlarge it and lift the rotating caption to make room. Desktop   */
/*    only (min-width 961px) — mobile already fills the width, leave it.*/
/* ------------------------------------------------------------------ */
@media (min-width: 961px) {
  .showcase.is-dynamic .showcase__captions { top: clamp(2rem, 6vh, 4rem); }
  .showcase.is-dynamic .showcase__phones {
    height: clamp(420px, 66vh, 680px);   /* was clamp(360px, 54vh, 560px) */
    margin: 8vh auto 0;                   /* push down so the bigger phone clears the caption */
  }
}

/* ------------------------------------------------------------------ */
/* I. Mobile QA pass — scroll smoothness + type hierarchy             */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Smoothness: drop the GPU-heavy blur() from scroll-reveal (keep fade + rise). */
  .js .reveal {
    filter: none !important;
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out) !important;
  }
  /* Lighter backdrop-blur on phones — its repaint as content scrolls behind it is
     the main remaining jank cost. Still frosted, far cheaper. */
  .card, .glass, .cta-band, .faq__item {
    -webkit-backdrop-filter: blur(7px) saturate(125%);
    backdrop-filter: blur(7px) saturate(125%);
  }
  .site-header.is-scrolled {
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    backdrop-filter: blur(8px) saturate(125%);
  }
  /* Mobile showcase: a clean static stack where each phone fades + rises in as it
     scrolls into view — smooth (no pinning, no per-frame scaling, no overlap of the
     text above). The pinned scaling effect stays desktop-only. */
  .showcase__pin { padding-block: 0.5rem; }
  .showcase__phones { gap: 2.5rem; }
  .showcase__phone .phone { width: min(60vw, 208px); }
  .js .showcase__phone {
    opacity: 0;
    transform: translateY(32px) scale(0.94);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
    will-change: opacity, transform;
  }
  .js .showcase__phone.is-inview { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  /* Bigger, more confident hero headline — the previous size read as small. */
  .hero__title { font-size: clamp(2.4rem, 10vw, 3.2rem); line-height: 1.03; }
  /* Contain the goal cards so they don't dwarf the opening copy. */
  .plan-pick { padding: 0.6rem 0.78rem; gap: 0.7rem; }
  .plan-pick__icon { width: 34px; height: 34px; }
  .plan-pick__icon svg { width: 17px; height: 17px; }
  .plan-pick__txt b { font-size: 0.92rem; }
  .plan-pick__txt small { font-size: 0.78rem; }
  .plan-pick__min { font-size: 0.8rem; }
  /* A touch more vertical rhythm so sections don't fly past. */
  .section { padding-block: clamp(3.6rem, 2rem + 9vw, 5.5rem); }
}

/* ------------------------------------------------------------------ */
/* H. Mobile header declutter                                          */
/*    On phones the logo + DE|EN toggle + App Store badge crowd and    */
/*    the badge clips at the right edge. Hide the header badge on       */
/*    small screens — the hero has its own prominent App Store CTA.    */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .site-header .appstore-badge { display: none; }
}