/* =============================================================================
   SwissBudget+  —  styles.css
   Bold, cinematic, editorial. Dark base, oversized type, gradient accents.
   No external fonts (privacy + speed): a tight modern system sans stack.
   ========================================================================== */

:root {
  --bg:        #0A0A0A;
  --bg-2:      #000000;
  --bg-soft:   #121214;
  --surface:   #16161A;
  --surface-2: #1D1D22;
  --line:      rgba(255,255,255,0.10);
  --text:      #F4F4F5;
  --muted:     #A1A1AA;
  --muted-2:   #71717A;

  /* Brand */
  --blue:   #1E9BD7;
  --blue-2: #1E9BFF;
  --green:  #5BCB2E;
  --grad:   linear-gradient(100deg, #1E9BD7 0%, #1E9BFF 45%, #5BCB2E 100%);

  --maxw:   1180px;
  --pad:    clamp(20px, 5vw, 64px);
  --radius: 18px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* A shorter, flatter curve for things that must feel instant (hover, taps). */
  --ease-quick: cubic-bezier(0.3, 0.8, 0.4, 1);

  /* The sticky header's height. Anchors scroll to sit below it, so a section
     heading never ends up hidden behind the nav. */
  --nav-h: 72px;
}

/* ----------------------------- Reset / base ------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The whole reason anchor links used to land badly: without this the target
     heading stops underneath the sticky nav. */
  scroll-padding-top: calc(var(--nav-h) + 18px);
  /* A dark page with a bright default scrollbar looks unfinished. */
  scrollbar-width: thin;
  scrollbar-color: #2E2E36 #0A0A0A;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(30,155,255,0.32); color: #fff; }

/* One focus ring for the whole site, and only for keyboard users — a mouse
   click should not leave a box behind. */
:focus-visible {
  outline: 2px solid var(--blue-2);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.container--narrow { max-width: 820px; }

.visually-hidden, .skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto;
  padding: 10px 16px; background: var(--text); color: #000; z-index: 200;
  clip: auto; border-radius: 10px; font-weight: 700;
}

/* ------------------------------ Typography ------------------------------- */
.display {
  font-size: clamp(2.5rem, 7.6vw, 5.7rem);
  line-height: 1.0;
  font-weight: 800;
  letter-spacing: -0.03em;
  /* Even line lengths instead of a one-word last line. */
  text-wrap: balance;
}
.headline {
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.4em;
  text-wrap: balance;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.section-label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue-2);
  margin-bottom: 1rem;
}
.lede {
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  color: var(--muted);
  max-width: 44ch;
  margin-bottom: 2rem;
  /* No single-word last line in body copy either. */
  text-wrap: pretty;
}
.section-intro {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: 3rem;
  text-wrap: pretty;
}
.footnote { color: var(--muted-2); font-size: 1rem; margin-top: 2.5rem; max-width: 52ch; }

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

/* -------------------------------- Layout -------------------------------- */
.section { padding-block: clamp(80px, 13vw, 180px); }
.section--dark { background: var(--bg-2); }
.section--full { min-height: 100svh; display: flex; align-items: center; position: relative; }

/* -------------------------------- Buttons ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  background: var(--grad);
  color: #03130A;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 0; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.2s;
  box-shadow: 0 8px 30px rgba(30,155,255,0.25);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 42px rgba(91,203,46,0.34); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.09s; }
.btn--lg { font-size: 1.08rem; padding: 17px 34px; }
/* min-height keeps the header CTA on the 44px touch-target floor without
   fattening it visually — .btn is already inline-flex + centred. */
.btn--small { padding: 9px 18px; font-size: 0.9rem; min-height: 44px; }
.btn--block { width: 100%; }
.btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line); box-shadow: none;
}
.btn--ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); box-shadow: none; }

/* --------------------------------- Nav ---------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background 0.28s var(--ease-quick), border-color 0.28s var(--ease-quick);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10,10,10,0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; font-size: 1.1rem; }
.nav__logo { border-radius: 9px; }
.footer__brand img { border-radius: 8px; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { color: var(--muted); font-weight: 500; font-size: 0.95rem; transition: color 0.2s; }
.nav__links a:hover { color: var(--text); }
/* Set by main.js as you scroll: the link for the section you are looking at. */
.nav__links a.is-current { color: var(--text); }
.nav__links a { position: relative; }
.nav__links a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--grad);
  animation: navMark 0.3s var(--ease) both;
}
@keyframes navMark { from { opacity: 0; transform: scaleX(0.4); } to { opacity: 1; transform: none; } }

/* EN | DE switcher — small, quiet, sits between the links and the CTA. */
.nav__lang { display: flex; align-items: center; gap: 2px; }
.nav__lang-item {
  padding: 5px 9px; border-radius: 8px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--muted); line-height: 1;
  transition: color 0.2s, background 0.2s;
}
a.nav__lang-item:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.nav__lang-item.is-active { color: var(--text); background: rgba(255,255,255,0.10); }

/* --------------------------------- Hero --------------------------------- */
.hero { background: radial-gradient(120% 90% at 50% -10%, #14141a 0%, var(--bg) 55%); overflow: hidden; }
.hero__inner { padding-block: clamp(44px, 8.5vh, 96px); position: relative; z-index: 2; }
.hero__logo { margin-bottom: 1.5rem; border-radius: 22px; box-shadow: 0 20px 60px rgba(30,155,255,0.25); }
.hero__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(30,155,215,0.20), transparent 70%),
    radial-gradient(45% 45% at 85% 60%, rgba(91,203,46,0.16), transparent 70%);
  filter: blur(8px);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }

/* The hero screenshot. Below 1000px the copy needs the whole width, so the
   phone is not rendered at all rather than shrunk into a stamp. */
.hero__media { display: none; }
@media (min-width: 1000px) {
  .hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) auto; align-items: center; gap: clamp(24px, 4vw, 64px); }
  .hero__media { display: block; justify-self: end; }
  /* The headline is in a column now, not across the page: same weight, less
     size, so it still lands in three lines with the buttons above the fold. */
  .hero .display { font-size: clamp(2.6rem, 4.3vw, 4.3rem); }
  .hero .lede { max-width: 42ch; }
}
.hero__phone {
  width: clamp(220px, 21vw, 292px); aspect-ratio: 9 / 18.6;
  border-radius: 44px; padding: 10px; transform: rotate(-3deg);
  background: linear-gradient(160deg, #2A2A31, #131316);
  box-shadow: 0 50px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.09);
}
.hero__phone img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  border-radius: 35px;
}

.scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; }
.scroll-hint span {
  display: block; width: 26px; height: 42px; border: 2px solid var(--line); border-radius: 14px; position: relative;
}
.scroll-hint span::after {
  content: ""; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; border-radius: 4px;
  background: var(--muted); transform: translateX(-50%); animation: scrollDot 1.8s var(--ease) infinite;
}
@keyframes scrollDot { 0% { opacity: 0; top: 8px; } 40% { opacity: 1; } 80% { opacity: 0; top: 22px; } 100% { opacity: 0; } }

/* -------------------------------- Trust --------------------------------- */
.trust { border-block: 1px solid var(--line); background: var(--bg-soft); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: 26px; }
.trust__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.trust__badges li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.trust__badges .ic { font-size: 1.2rem; }
.trust__rating { color: var(--muted); font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.trust__rating .stars { color: #FFC93C; letter-spacing: 2px; }

/* ------------------------------ Feature grid ---------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s;
}
.feature:hover { transform: translateY(-4px); border-color: rgba(91,203,46,0.35); background: var(--surface-2); }
/* A tinted tile with a line icon in it, not a bare emoji: the six cards have
   to read as one set. font-size is the fallback — an unknown icon name in
   config renders as text (an emoji) inside the same tile. */
.feature__icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(30,155,215,0.20), rgba(91,203,46,0.14));
  border: 1px solid rgba(255,255,255,0.09);
  color: #D6EBFF; font-size: 1.35rem; line-height: 1;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.feature__icon svg { width: 23px; height: 23px; display: block; }
.feature:hover .feature__icon { color: #fff; border-color: rgba(91,203,46,0.4); }
.feature h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 1rem; }

/* -------------------------------- Gallery ------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.gallery figure {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.gallery figure:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.gallery img { width: 100%; aspect-ratio: 9 / 18; object-fit: cover; background: var(--bg-2); }
.gallery figcaption { padding: 14px 18px; color: var(--muted); font-weight: 600; font-size: 0.92rem; }

/* --------------------------------- Steps -------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.step { text-align: center; }
.step img {
  width: 100%; max-width: 280px; margin-inline: auto; border-radius: 22px;
  border: 1px solid var(--line); background: var(--bg-2); aspect-ratio: 9 / 16; object-fit: cover;
}
.step figcaption { margin-top: 18px; font-size: 1.15rem; font-weight: 600; color: var(--text); }

/* ------------------------------- CTA band ------------------------------- */
.cta-band { background: var(--bg-2); border-block: 1px solid var(--line); padding-block: clamp(60px, 9vw, 110px); }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.cta-band__title { max-width: 16ch; margin-bottom: 0; }
.qr { display: none; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
.qr img { width: 132px; height: 132px; background: #fff; border-radius: 14px; padding: 8px; }
.qr__label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
@media (min-width: 900px) { .qr { display: flex; } }

/* -------------------------------- Privacy ------------------------------- */
.privacy { background: var(--bg-2); overflow: hidden; }
.privacy__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 40%, rgba(91,203,46,0.14), transparent 70%);
}
.privacy__inner { position: relative; z-index: 2; padding-block: clamp(70px, 12vw, 160px); text-align: center; }
.privacy__title { max-width: 18ch; margin-inline: auto; margin-bottom: 2.5rem; }
.privacy__points {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; max-width: 760px; margin-inline: auto; text-align: left;
}
.privacy__points li {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; color: var(--text); font-weight: 500; display: flex; gap: 12px; align-items: flex-start;
}
.privacy__points li::before { content: "✓"; color: var(--green); font-weight: 800; }
.privacy__kicker { margin-top: 2.6rem; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; }

/* ------------------------------- Platform ------------------------------- */
.platform__inner { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 940px) { .platform__inner { grid-template-columns: 1fr 1fr; gap: 64px; } }

.signup { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(26px, 4vw, 40px); }
.signup__heading { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 20px; }
.progress { margin-bottom: 22px; }
.progress__bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.progress__bar::after {
  content: ""; position: absolute; inset: 0; width: var(--pct, 0%); background: var(--grad);
  border-radius: 999px; transition: width 1.1s var(--ease);
}
.progress__text { margin-top: 10px; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.signup__input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; color: var(--text); font-size: 1rem; margin-bottom: 18px; font-family: inherit;
}
.signup__input:focus { outline: 2px solid var(--blue-2); outline-offset: 1px; border-color: transparent; }
.signup__langs { border: 0; margin-bottom: 20px; }
.signup__langs legend { color: var(--muted); font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; }
.signup__lang-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.lang-opt {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line); cursor: pointer; color: var(--muted); font-weight: 600; transition: all 0.2s;
}
.lang-opt input { accent-color: var(--green); }
.lang-opt:has(input:checked) { border-color: var(--green); color: var(--text); background: rgba(91,203,46,0.08); }
.signup__note { margin-top: 14px; color: var(--muted-2); font-size: 0.85rem; }
/* mailto mode: the visitor's mail app supplies the address, so no field for it. */
.signup__form--mailto .signup__input,
.signup__form--mailto label[for="signup-email"] { display: none; }
.signup__note a { color: var(--muted); text-decoration: underline; }
.signup__note a:hover, .signup__note a:focus-visible { color: var(--text); }

.signup__thanks { text-align: center; }
.signup__thanks-emoji { font-size: 3rem; margin-bottom: 10px; }
.signup__share-prompt { color: var(--muted); margin: 16px 0 22px; }
.share { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------------------------------- FAQ --------------------------------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: var(--text);
  font-size: 1.15rem; font-weight: 700; padding: 22px 24px; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  font-family: inherit;
}
.faq__q .plus { color: var(--blue-2); font-size: 1.5rem; transition: transform 0.3s var(--ease); flex: none; }
.faq__item.is-open .faq__q .plus { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.34s var(--ease); }
.faq__a-inner {
  padding: 0 24px 22px; color: var(--muted); font-size: 1.02rem;
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.faq__item.is-open .faq__a-inner { opacity: 1; transition-delay: 0.08s; }

/* --------------------------------- About -------------------------------- */
/* The studio line sits in the narrow column, where the full headline size
   broke it into three lines with the em dash stranded at the end of the
   first. Smaller, with the break set in config (the | ), it reads as two
   deliberate lines. */
#about .headline { font-size: clamp(1.85rem, 3.2vw, 2.9rem); line-height: 1.1; }
.about__contact { margin-top: 1.5rem; font-size: 1.1rem; color: var(--muted); }
.about__contact a { color: var(--blue-2); font-weight: 600; }

/* -------------------------------- Footer -------------------------------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: 54px; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand img { border-radius: 8px; }
.footer__brand strong { display: block; }
.footer__brand span { color: var(--muted); font-size: 0.9rem; }
.footer__links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer__links a { color: var(--muted); font-weight: 500; transition: color 0.2s; }
.footer__links a:hover { color: var(--text); }
.footer__notrack { width: 100%; color: var(--muted-2); font-size: 0.85rem; }
.footer__copy { width: 100%; color: var(--muted-2); font-size: 0.85rem; }

/* legal pages */
.legal { padding-block: clamp(90px, 12vw, 140px); }
.legal h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5em; overflow-wrap: anywhere; hyphens: auto; }
.legal h2 { font-size: 1.4rem; font-weight: 700; margin: 2em 0 0.5em; }
.legal p, .legal li { color: var(--muted); margin-bottom: 0.8em; }
.legal ul { padding-left: 1.2em; }
.legal a { color: var(--blue-2); }
.legal .back { display: inline-block; margin-bottom: 2.5rem; color: var(--muted); }
.legal .todo { background: rgba(255,201,60,0.10); border: 1px solid rgba(255,201,60,0.35); color: #FFD980;
  padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; margin: 0.5em 0 1.5em; }

/* ------------------------- Scroll reveal animation ----------------------
   Short and close. A long slow rise (it used to be 0.8s over 34px) reads as
   the page struggling to keep up with the scroll; this lands just after the
   element arrives instead of trailing behind it. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Failsafe. Most of this page is .reveal, so if the observer never attaches the
   site is a hero and nothing else. main.js adds .reveal-armed to <html> on the
   line before it attaches the observer, so anything that throws earlier — or a
   browser that never gets that far — leaves the content plainly visible. */
html:not(.reveal-armed) .reveal { opacity: 1; transform: none; transition: none; }

/* Printing and PDF export never scroll, so nothing would ever intersect. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}
.reveal[data-delay="1"] { transition-delay: 0.05s; }
.reveal[data-delay="2"] { transition-delay: 0.10s; }
.reveal[data-delay="3"] { transition-delay: 0.15s; }
.reveal[data-delay="4"] { transition-delay: 0.20s; }
.reveal[data-delay="5"] { transition-delay: 0.25s; }

/* ----------------------------- Hero entrance ----------------------------
   The hero used to be one .reveal block: everything faded in together, and
   because it is on screen at load it happened while the page was still
   settling. Now each line arrives on its own, a beat apart, starting the
   moment the content is rendered.

   The hidden state is behind .js so that with scripting off — where nothing
   would ever add .is-ready — the hero is simply visible. */
.js .hero__copy > *, .js .hero__media { opacity: 0; }
.js.is-ready .hero__copy > * { animation: heroIn 0.62s var(--ease) both; }
.js.is-ready .hero__copy > *:nth-child(1) { animation-delay: 0.04s; }
.js.is-ready .hero__copy > *:nth-child(2) { animation-delay: 0.11s; }
.js.is-ready .hero__copy > *:nth-child(3) { animation-delay: 0.18s; }
.js.is-ready .hero__copy > *:nth-child(4) { animation-delay: 0.25s; }
.js.is-ready .hero__copy > *:nth-child(5) { animation-delay: 0.32s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* The phone comes in last and from further away — it is the payoff, not the
   headline. Its own keyframes because it has to keep its tilt. */
.js.is-ready .hero__media { animation: heroPhoneIn 0.8s var(--ease) 0.3s both; }
@keyframes heroPhoneIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* The scroll hint should not be there before the hero has finished arriving. */
.js .scroll-hint { opacity: 0; }
.js.is-ready .scroll-hint { animation: heroIn 0.6s var(--ease) 0.75s both; }

/* --------------------------- Responsive nav ----------------------------- */
@media (max-width: 680px) {
  .nav__links { display: none; }
  .nav__lang-item { padding: 5px 7px; font-size: 0.72rem; }
}

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint span::after { animation: none; }
  .btn { transition: none; }
  * { scroll-behavior: auto !important; }
  /* Nothing rises, nothing is delayed — but everything is visible. */
  .js .hero__copy > *, .js .hero__media, .js .scroll-hint { opacity: 1; transform: none; animation: none; }
}

/* ------------------------------ App picker ------------------------------ */
.appbox {
  margin-top: 40px; display: grid; grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.appbox__tabs { display: flex; flex-direction: column; gap: 8px; }
.appbox__tab {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px;
  text-align: left; cursor: pointer; background: transparent;
  border: 1px solid transparent; border-radius: 14px; color: var(--muted);
  font: inherit; font-weight: 600;
  transition: background 0.25s var(--ease), color 0.25s, border-color 0.25s;
}
.appbox__tab:hover { background: var(--surface-2); color: var(--text); }
.appbox__tab.is-active {
  background: var(--surface-2); color: var(--text); border-color: rgba(30,155,255,0.45);
}
.appbox__tab-icon { font-size: 1.4rem; line-height: 1; }
.appbox__tab-name { flex: 1; }
.appbox__tab-here {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--green);
}
.appbox__panel {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px 28px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 16px;
}
.appbox__head { display: flex; align-items: center; gap: 16px; width: 100%; flex-wrap: wrap; }
.appbox__icon { font-size: 2.2rem; line-height: 1; }
.appbox__head h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.appbox__kicker { color: var(--muted-2); font-size: 0.95rem; }
.appbox__text { color: var(--muted); font-size: 1.05rem; }
.pill {
  margin-left: auto; padding: 6px 12px; border-radius: 999px; font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.pill--live { color: var(--green); }
.pill--soon { color: var(--blue-2); }
.pill--planned { color: var(--muted-2); }

@media (max-width: 760px) {
  .appbox { grid-template-columns: 1fr; }
  .appbox__tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .appbox__tab { width: auto; white-space: nowrap; }
  .appbox__tab-here { display: none; }
  .appbox__panel { padding: 24px 20px; }
  .pill { margin-left: 0; }
}

/* ------------------------ Tips from the developers ---------------------- */
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-top: 40px; }
.tip {
  display: flex; gap: 20px; align-items: flex-start; padding: 28px 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid transparent; border-image: var(--grad) 1;
  border-image-slice: 0 0 0 1; border-image-width: 0 0 0 3px;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.tip:hover { transform: translateY(-3px); background: var(--surface-2); }
.tip__icon { font-size: 1.9rem; line-height: 1; flex: none; }
.tip__body h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.tip__body p { color: var(--muted); font-size: 1rem; }

@media (max-width: 560px) {
  .tips { grid-template-columns: 1fr; }
  .tip { padding: 24px 20px; gap: 14px; }
}


/* --------------------- Piggy-bank human check (drag) -------------------- */
.piggy { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 18px; }

.piggy__stage {
  position: relative; width: 100%; max-width: 260px; height: 172px;
  border: 1px dashed var(--line); border-radius: 16px; background: rgba(255,255,255,0.02);
  transition: border-color 0.25s, background 0.25s;
}
.piggy.is-dragging .piggy__stage { border-color: rgba(30,155,255,0.5); background: rgba(30,155,255,0.05); }
.piggy.is-done .piggy__stage { border-style: solid; border-color: rgba(91,203,46,0.5); }

.piggy__pig { position: absolute; right: 6px; bottom: 4px; width: 150px; height: 120px; }
.piggy__pig svg { display: block; }
/* The drop box. Sits just above the piggy's coin slot so the gesture reads as
   "put the coin in, it falls into the bank". */
.piggy__zone {
  position: absolute; right: 52px; top: 6px; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(255,255,255,0.22); border-radius: 14px;
  color: var(--muted-2); font-size: 1.15rem; line-height: 1;
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.piggy.is-dragging .piggy__zone {
  border-color: rgba(91,203,46,0.85); background: rgba(91,203,46,0.10);
  color: var(--green); transform: scale(1.06);
}
.piggy.is-banking .piggy__zone,
.piggy.is-done .piggy__zone {
  border-style: solid; border-color: rgba(91,203,46,0.6);
  background: rgba(91,203,46,0.10); color: var(--green);
}

.piggy__body { transform-box: fill-box; transform-origin: center bottom; }
.piggy.is-done .piggy__body { animation: piggyGulp 0.45s var(--ease); }
@keyframes piggyGulp {
  0%, 100% { transform: scale(1, 1); }
  40%      { transform: scale(1.07, 0.93); }
}

.piggy__coin {
  position: absolute; left: 16px; top: 62px; width: 40px; height: 40px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: grab;
  touch-action: none;                     /* stop the page scrolling mid-drag */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45));
  transition: transform 0.18s var(--ease), filter 0.2s;
}
.piggy__coin:hover { filter: drop-shadow(0 8px 16px rgba(224,164,36,0.45)); }
.piggy__coin:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 4px; }
.piggy.is-dragging .piggy__coin { cursor: grabbing; transition: none; }
.piggy.is-returning .piggy__coin { transition: transform 0.4s var(--ease); }
.piggy.is-banking .piggy__coin { transition: transform 0.26s cubic-bezier(0.55,0.06,0.68,0.19); }
.piggy.is-done .piggy__coin { opacity: 0; transform: scale(0.2); pointer-events: none; transition: opacity 0.2s, transform 0.2s; }

.piggy__check {
  position: absolute; right: 12px; top: 10px; font-size: 1.3rem; font-weight: 700;
  color: var(--green); opacity: 0; transform: scale(0.5);
  transition: opacity 0.25s 0.2s, transform 0.35s 0.2s var(--ease);
}
.piggy.is-done .piggy__check { opacity: 1; transform: scale(1); }

.piggy__label { font-size: 0.95rem; color: var(--muted); margin-top: 8px; }
.piggy__hint { font-size: 0.82rem; color: var(--muted-2); }
.piggy.is-done .piggy__label { color: var(--green); }
.piggy.is-nudge .piggy__label { color: #E5556B; }
.piggy.is-nudge .piggy__stage { border-color: #E5556B; animation: piggyNudge 0.4s; }
@keyframes piggyNudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .piggy__coin, .piggy__check { transition: opacity 0.2s; }
  .piggy.is-done .piggy__body, .piggy.is-nudge .piggy__stage { animation: none; }
}

/* ------------------------- Legal pages (generated) ----------------------- */
/* privacy*.html and imprint*.html come out of _build-legal.js. */
.legal-updated { color: var(--muted); font-size: 0.9rem; }
/* EN · DE · FR · IT row on the legal pages (generated by _build-legal.js). */
.legal-langs { font-size: 0.85rem; letter-spacing: 0.08em; color: var(--muted); margin: -1.5rem 0 1.5rem; }
.legal-langs a { color: var(--muted); text-decoration: none; }
.legal-langs a:hover, .legal-langs a:focus-visible { color: var(--text); text-decoration: underline; }
.legal-langs [aria-current] { color: var(--text); font-weight: 700; }
.legal-lead { font-size: 1.05rem; }
.legal-address {
  border-left: 3px solid rgba(30,155,255,0.55);
  padding: 2px 0 2px 16px; line-height: 1.7;
}
.legal code {
  background: rgba(255,255,255,0.07); border-radius: 5px;
  padding: 1px 6px; font-size: 0.9em;
}
/* A detail that is still a placeholder — impossible to miss, on purpose. */
.todo-inline {
  background: rgba(255,214,0,0.16); color: #FFD84D;
  border: 1px dashed rgba(255,214,0,0.5); border-radius: 5px;
  padding: 0 6px; font-weight: 600;
}