/* Parkiraj z mano marketing site - scroll story layout */

:root {
  --green: #00c853;
  --green-dark: #006630;
  --bg: #000000;
  --surface: #1a1d27;
  --card: #21252f;
  --text: #f0f2f5;
  --muted: rgba(240, 242, 245, 0.62);
  --faint: rgba(240, 242, 245, 0.38);
  --orange: #ff9800;
  --red: #ff5252;
  --ev-blue: #1565c0;
  --radius-card: 22px;
  --radius-chrome: 10px;
  --header-h: 3.25rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --header-total: calc(var(--header-h) + var(--safe-top));
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --slide-pad-x: clamp(1rem, 3.5vw, 2rem);
  --slide-pad-y: clamp(1rem, 2.5vh, 2rem);
  --content-max: min(56rem, 100%);
  --content-max-narrow: min(42rem, 100%);
  --content-max-wide: min(56rem, 100%);
  --phone-w: clamp(11.5rem, 52vw, 16rem);
  --phone-w-inline: clamp(11rem, 50vw, 16rem);
  --phone-w-hero: clamp(12rem, 54vw, 17.5rem);
  --text-max: clamp(17rem, 88vw, 26rem);
  --chapter-text-max: clamp(16rem, 88vw, 22rem);
  --gap-slide: clamp(1.25rem, 3vh, 2.5rem);
  --gap-row: clamp(1.5rem, 3vw, 3.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: #000000;
  color-scheme: dark;
  min-height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

html.fullpage-active,
html.fullpage-active body {
  overflow: hidden !important;
  height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-color: #000000;
}

html.fullpage-active::-webkit-scrollbar,
html.fullpage-active body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Bleed black behind the page - covers notch, home bar, and rounded corners */
html.fullpage-active::before,
body::before {
  content: "";
  position: fixed;
  top: calc(-1 * var(--safe-top));
  right: calc(-1 * var(--safe-right));
  bottom: calc(-1 * var(--safe-bottom));
  left: calc(-1 * var(--safe-left));
  pointer-events: none;
  z-index: -1;
  background-color: #000000;
}

.fullpage-track {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

main.is-animating .fullpage-track {
  will-change: transform;
}

.hero__inner,
.how__inner,
.chapter__inner,
.site-footer__inner,
.hero__phone,
.chapter__phones,
.chapter__mobile-phone,
.phone-screenshot {
  transform: translate3d(0, 0, 0);
}

body {
  margin: 0;
  font-family: var(--font);
  background-color: #000000;
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

a {
  color: var(--green);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Header ── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--header-total);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-top) max(1.25rem, var(--safe-right)) 0 max(1.25rem, var(--safe-left));
  background-color: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 900px) {
  .site-header {
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(12px);
  }
}

.logo {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.logo span {
  color: var(--green);
}

.lang-toggle a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  font-weight: 600;
}

.lang-toggle a:hover {
  color: var(--green);
  border-color: rgba(0, 200, 83, 0.45);
  background: rgba(0, 200, 83, 0.12);
  text-decoration: none;
}

main {
  padding-top: var(--header-total);
}

main.fullpage-viewport {
  position: fixed;
  top: var(--header-total);
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 0;
  padding-bottom: var(--safe-bottom);
  overflow: hidden;
  z-index: 1;
  background-color: #000000;
  touch-action: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

main.fullpage-viewport::-webkit-scrollbar {
  display: none;
}

/* scroll-story.js focuses main on init (and hash targets can focus slides);
   hide the browser default ring — keyboard nav uses window keydown. */
main.fullpage-viewport:focus,
.fullpage-slide:focus,
.fullpage-slide:target {
  outline: none;
}

.fullpage-slide {
  width: min(100%, var(--content-max));
  align-self: center;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-block: var(--slide-pad-y);
  padding-inline: max(var(--slide-pad-x), var(--safe-left)) max(var(--slide-pad-x), var(--safe-right));
}

.fullpage-slide.site-footer {
  width: min(100%, var(--content-max-narrow));
}

.fullpage-slide--scrollable {
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fullpage-slide--scrollable::-webkit-scrollbar {
  display: none;
}

.fullpage-slide--scrollable.site-footer,
.fullpage-slide--scrollable.how {
  padding: 2rem 1.25rem;
}

/* Desktop: inline phone in slide - fixed stage unused */
.story-desktop .fullpage-phone-stage {
  display: none !important;
}

/* Fixed phone stage (desktop feature slides) */

.fullpage-phone-stage {
  position: fixed;
  top: var(--header-total);
  right: 0;
  bottom: 0;
  width: min(42vw, 380px);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}

.fullpage-phone-stage[hidden] {
  display: none !important;
}

.story-desktop .fullpage-phone-stage.is-visible {
  display: flex;
}

.story-desktop .fullpage-phone-stage .phone-shell__screen {
  position: relative;
}

.story-desktop .phone-shot {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.story-desktop .phone-shot--active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Phone shell ── */

.phone-shell {
  width: min(100%, var(--phone-w));
  margin: 0 auto;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
}

.phone-shell__bezel {
  padding: clamp(7px, 1.2vw, 10px);
  border-radius: clamp(28px, 5vw, 36px);
  background: linear-gradient(145deg, #2a2e3a 0%, #12141a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}

.phone-shell__screen {
  position: relative;
  border-radius: clamp(22px, 4vw, 28px);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 9 / 19.5;
}

.phone-shell__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-shell--inline {
  width: min(100%, var(--phone-w-inline));
}

.phone-shell--compact {
  width: min(100%, clamp(9.5rem, 18vw, 13rem));
}

.phone-shell--hero {
  width: min(100%, var(--phone-w-hero));
}

/* Raw iPhone screenshots (already include device frame) */

.phone-screenshot {
  /* Bare var()/clamp() on purpose, not wrapped in min(100%, ...): a
     percentage width here can't resolve during the flex item's intrinsic
     (max-content) size pass, so browsers fall back to the <img>'s native
     pixel size (e.g. a 4x-resolution export) for that pass - inflating
     .chapter__mobile-phone's flex-basis far past the actual rendered size
     and pushing dual-phone pairs apart. .chapter__phones already caps the
     pair's total width via max-width: 100%, so this doesn't need its own
     percentage clamp. */
  width: var(--phone-w-inline);
  flex-shrink: 0;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
}

.phone-screenshot--hero {
  width: var(--phone-w-hero);
}

.phone-screenshot--compact {
  /* Dual-phone slides: pair stays side-by-side; fixed scale, not viewport-relative */
  width: clamp(7.5rem, 14vw, 13rem);
}

.phone-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Hero (same phone + text layout as feature chapters) ── */

.fullpage-slide.hero {
  width: min(100%, 72rem);
}

.hero {
  width: 100%;
  padding: 0;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-slide);
  text-align: center;
  min-width: 0;
}

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, var(--text-max)) auto;
    justify-content: center;
    align-items: center;
    column-gap: var(--gap-row);
    width: min(100%, 72rem);
  }
}

.hero__inner {
  flex: 0 1 auto;
  min-width: 0;
  max-width: var(--text-max);
  width: 100%;
  text-align: center;
}

@media (min-width: 900px) {
  .hero__inner {
    flex: none;
    width: 100%;
    max-width: var(--text-max);
  }
}

.hero__phone {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
}

.hero__tagline {
  margin: 0 auto 1.5rem;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color: var(--muted);
  max-width: var(--text-max);
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  justify-content: center;
}

.hero__title {
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.hero__title span {
  color: var(--green);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-chrome);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

.store-badge--soon {
  opacity: 0.75;
  cursor: default;
}

.hero__micro {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--faint);
}

.hero__hint {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--faint);
  animation: hint-bounce 2s ease-in-out infinite;
}

@keyframes hint-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__hint {
    animation: none;
  }
}

/* ── How it works ── */

.how {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
}

.how__inner {
  width: 100%;
  margin: 0 auto;
}

.how__heading {
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
}

.how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

@media (min-width: 900px) {
  .how__step-header {
    display: none;
  }

  .how__step > .how__step-num {
    display: grid;
  }

  .how__step > h3 {
    display: revert;
  }

  .how__media-zone {
    display: block;
    width: 100%;
    padding: 0;
    flex: none;
  }

  .how__carousel {
    display: block;
    width: 100%;
  }

  .how__carousel-viewport {
    overflow: visible;
    width: 100%;
    height: auto;
  }

  .how__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 1.5vw, 1.5rem);
    height: auto;
    flex-wrap: wrap;
    transform: none !important;
    transition: none;
    will-change: auto;
  }

  .how__step {
    flex: unset;
    min-width: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    pointer-events: auto;
  }

  .how__step-media {
    height: auto;
    max-height: none;
    padding: 0;
  }

  .how .how__step-media img {
    height: auto;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.4));
  }
}

.how__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  text-align: center;
  background: none;
  border: none;
}

.how__step-media {
  display: flex;
  justify-content: center;
}

.how__step-media img {
  /* Bare clamp(), not wrapped in min(100%, ...): see the .phone-screenshot
     comment above for why a percentage here can inflate this flex item's
     intrinsic size to the image's native pixel width. */
  display: block;
  width: clamp(7rem, 16vw, 11rem);
  height: auto;
  border-radius: clamp(16px, 3vw, 22px);
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.4));
}

.how__step h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(0.9375rem, 2vw, 1rem);
  font-weight: 700;
}

.how__step p {
  margin: 0;
  font-size: clamp(0.875rem, 2vw, 0.9375rem);
  color: var(--muted);
}

.how__step-num,
.how__step-header__num {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #0a0f0d;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-align: center;
}

.how__step-num {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.8125rem;
}

.how__carousel {
  width: 100%;
}

.how__arrow {
  display: none;
}

.how__pager {
  display: none;
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.how__pager-current {
  color: var(--green);
}

.how__step-header {
  display: none;
}

.how__media-zone {
  width: 100%;
}

@media (min-width: 600px) {
  .how__step-num {
    margin-bottom: 0.5rem;
  }
}

/* ── Feature chapters (fullpage slides) ── */

.fullpage-slide--chapter {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-slide);
  text-align: center;
  min-width: 0;
}

@media (min-width: 900px) {
  .fullpage-slide--chapter {
    display: grid;
    grid-template-columns: minmax(0, var(--chapter-text-max)) auto;
    justify-content: center;
    align-items: center;
    column-gap: var(--gap-row);
    width: min(100%, 56rem);
  }

  .fullpage-slide--chapter.fullpage-slide--dual {
    width: min(100%, 72rem);
  }
}

.chapter__inner {
  flex: 0 1 auto;
  min-width: 0;
  max-width: var(--chapter-text-max);
  width: 100%;
  text-align: center;
}

@media (min-width: 900px) {
  .chapter__inner {
    flex: none;
    width: 100%;
    max-width: var(--chapter-text-max);
  }
}

.chapter__label {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
}

.chapter__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.chapter p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
  line-height: 1.6;
}

.chapter p:last-child {
  margin-bottom: 0;
}

.chapter__honesty {
  font-size: 0.9375rem !important;
  color: var(--faint) !important;
  font-style: italic;
}

.chapter__mobile-phone {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
}

.chapter__phones {
  /* Two phones stay in a row at every breakpoint; chapter slide stacks text above phones below 900px */
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  width: auto;
  gap: clamp(0.75rem, 1.25vw, 1.25rem);
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.chapter__phones-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
}

.chapter__phones-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.chapter__phones-viewport {
  display: block;
  width: auto;
  max-width: 100%;
}

.chapter__arrow,
.chapter__pager {
  display: none;
}

.chapter__pager {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.chapter__pager-current {
  color: var(--green);
}

@media (min-width: 900px) {
  .chapter__phones-zone {
    flex: 0 0 auto;
  }

  .chapter__phones-carousel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.25vw, 1.25rem);
  }

  .chapter__phones-viewport {
    display: contents;
  }

  /* JS carousel wrapper is mobile-only; flatten on desktop so phones sit in a row */
  .chapter__phones-track {
    display: contents;
  }
}

/* Mobile / tablet stack: flex layout - phones centered between text and bottom */
@media (max-width: 899px) {
  :root {
    --mobile-phone-w: clamp(14.5rem, 64vw, 19rem);
    --mobile-phone-h: calc(var(--mobile-phone-w) * 2);
    --mobile-phone-max-h: min(var(--mobile-phone-h), 52dvh);
    --mobile-phone-gap: clamp(0.25rem, 1.25vh, 0.75rem);
    --mobile-slide-gap: 0.5rem;
    --mobile-text-max-h: 36dvh;
    --carousel-arrow-size: 1.5rem;
    --carousel-arrow-icon: 0.875rem;
    --carousel-arrow-gap: 0.0625rem;
    --carousel-pager-size: 0.75rem;
  }

  .hero.fullpage-slide,
  .fullpage-slide--chapter,
  .how.fullpage-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-bottom: max(0.5rem, var(--safe-bottom));
  }

  .how.fullpage-slide--scrollable {
    overflow: hidden;
    touch-action: pan-x;
    padding-block: var(--slide-pad-y);
    padding-inline: max(var(--slide-pad-x), var(--safe-left)) max(var(--slide-pad-x), var(--safe-right));
  }

  .how__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 0;
    width: 100%;
    max-width: var(--chapter-text-max);
  }

  .how__heading {
    margin-bottom: 0.5rem;
    font-size: clamp(1.5rem, 6.25vw, 1.8rem);
    flex-shrink: 0;
    width: 100%;
    text-align: center;
  }

  .how__step-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 0.35rem;
    text-align: center;
  }

  .how__step-header__num {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 0.9375rem;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
  }

  .how__step-header__title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.25;
    max-width: 16rem;
    font-weight: 700;
  }

  .how__step > .how__step-num,
  .how__step > h3 {
    display: none;
  }

  .how__media-zone,
  .fullpage-slide--dual .chapter__phones-zone {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--mobile-phone-gap);
    pointer-events: none;
  }

  .how__carousel,
  .fullpage-slide--dual .chapter__phones-carousel {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns:
      var(--carousel-arrow-size) minmax(0, var(--mobile-phone-w)) var(--carousel-arrow-size);
    align-items: center;
    justify-content: center;
    gap: var(--carousel-arrow-gap);
    width: 100%;
  }

  .how__arrow,
  .fullpage-slide--dual .chapter__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--carousel-arrow-size);
    height: var(--carousel-arrow-size);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    pointer-events: auto;
  }

  .how__arrow svg,
  .fullpage-slide--dual .chapter__arrow svg {
    width: var(--carousel-arrow-icon);
    height: var(--carousel-arrow-icon);
  }

  .how__arrow:hover:not(:disabled),
  .fullpage-slide--dual .chapter__arrow:hover:not(:disabled) {
    border-color: var(--green);
    background: rgba(74, 222, 128, 0.12);
    color: var(--green);
  }

  .how__arrow:disabled,
  .fullpage-slide--dual .chapter__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .how__pager,
  .fullpage-slide--dual .chapter__pager {
    display: block;
    flex-shrink: 0;
    margin: 0.35rem 0 0;
    font-size: var(--carousel-pager-size);
    text-align: center;
    width: 100%;
    pointer-events: none;
  }

  .how__carousel-viewport,
  .fullpage-slide--dual .chapter__phones-viewport {
    overflow: hidden;
    width: var(--mobile-phone-w);
    max-width: 100%;
    height: var(--mobile-phone-max-h);
    min-width: 0;
  }

  .how__steps {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .how__step {
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .how__step:not(.how__step--active) {
    pointer-events: none;
  }

  .how__step-media,
  .fullpage-slide--dual .chapter__phones .chapter__mobile-phone {
    width: 100%;
    height: var(--mobile-phone-max-h);
    max-height: var(--mobile-phone-max-h);
    overflow: hidden;
    display: block;
    pointer-events: none;
  }

  .how .how__step-media img {
    display: block;
    width: 100%;
    height: calc(100% - 0.5rem);
    object-fit: contain;
    object-position: center center;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.42));
  }

  .hero__inner,
  .chapter__inner {
    flex: 0 1 auto;
    width: 100%;
    max-width: var(--chapter-text-max);
    max-height: var(--mobile-text-max-h);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: auto;
    padding-bottom: var(--mobile-slide-gap);
  }

  .hero__inner {
    padding-bottom: calc(var(--mobile-slide-gap) + 0.25rem);
  }

  .hero__inner::-webkit-scrollbar,
  .chapter__inner::-webkit-scrollbar {
    display: none;
  }

  .hero__hint,
  .hero__micro {
    display: none;
  }

  .chapter__inner > p:nth-of-type(2):not(.chapter__honesty) {
    display: none;
  }

  .hero__phone,
  .fullpage-slide--chapter > .chapter__mobile-phone {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    padding-block: var(--mobile-phone-gap);
    overflow: visible;
    pointer-events: none;
  }

  .hero__phone,
  .fullpage-slide--chapter > .chapter__mobile-phone {
    width: var(--mobile-phone-w);
    height: var(--mobile-phone-max-h);
    max-width: min(var(--mobile-phone-w), calc(100vw - 2 * var(--slide-pad-x)));
    flex-shrink: 1;
  }

  .fullpage-slide--dual .chapter__phones {
    width: 100%;
    height: var(--mobile-phone-max-h);
    max-width: 100%;
    transform: none;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    padding: 0;
    flex: none;
  }

  .fullpage-slide--dual .chapter__phones-track {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .fullpage-slide--dual .chapter__phones .chapter__mobile-phone {
    position: static;
    transform: none;
    flex: 0 0 100%;
    min-width: 100%;
  }

  .how__step-media {
    padding: 0 0 0.5rem;
    box-sizing: border-box;
  }

  .chapter__phones {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    padding: 0;
    flex: none;
  }

  .phone-screenshot,
  .phone-screenshot--hero,
  .phone-screenshot--compact {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    overflow: hidden;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.42));
    padding-bottom: 0.5rem;
    box-sizing: border-box;
  }

  .phone-screenshot img,
  .how__step-media img {
    display: block;
    width: 100%;
    height: calc(100% - 0.5rem);
    object-fit: contain;
    object-position: center center;
  }

  .chapter__title {
    font-size: clamp(1.45rem, 6vw, 1.7rem);
    margin-bottom: 0.5rem;
  }

  .chapter p {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .chapter__label {
    margin-bottom: 0.5rem;
  }

  .hero__title {
    margin-bottom: 0.65rem;
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .hero__tagline {
    margin-bottom: 0.875rem;
    font-size: 0.95rem;
  }

  .store-badges {
    margin-bottom: 0;
    padding-bottom: 0.35rem;
  }

  .site-footer__brand {
    font-size: 1.5rem;
  }

  .site-footer__links,
  .site-footer__contact {
    font-size: 1.125rem;
  }
}

.trust__heading {
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
}

.trust__columns {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
  text-align: left;
}

@media (min-width: 700px) {
  .trust__columns {
    grid-template-columns: 1fr 1fr;
  }
}

.trust__block h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--green);
}

.trust__block ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.trust__block li {
  margin-bottom: 0.5rem;
}

.trust__note {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--faint);
  line-height: 1.6;
}

.trust__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  justify-content: center;
}

/* ── Footer ── */

.site-footer {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
}

.site-footer__inner {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.site-footer__brand {
  margin: 0 0 1rem;
  font-size: 1.375rem;
  font-weight: 800;
}

.site-footer__brand span {
  color: var(--green);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.0625rem;
}

.site-footer__contact {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
}

.impressum {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.65;
}

.impressum strong {
  color: var(--text);
  font-weight: 600;
}

.site-footer__attrib {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  color: var(--faint);
}

.site-footer__note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--faint);
}

/* ── 404 ── */

.page-404 {
  min-height: calc(100dvh - var(--header-total) - var(--safe-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
}

.page-404 h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 800;
}

.page-404 p {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.page-404 a {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-chrome);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  text-decoration: none;
}

.page-404 a:hover {
  border-color: var(--green);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  html.fullpage-active::before {
    transition: none;
  }

  .hero__inner,
  .how__inner,
  .how__steps,
  .chapter__inner,
  .site-footer__inner,
  .hero__phone,
  .chapter__phones-zone,
  .chapter__phones,
  .chapter__phones-track,
  .chapter__mobile-phone,
  .phone-screenshot,
  .fullpage-track,
  .fullpage-phone-stage .phone-shell {
    will-change: auto;
  }
}

/* ── Responsive breakpoints ── */

@media (min-width: 480px) {
  :root {
    --phone-w: clamp(12.5rem, 44vw, 16.5rem);
    --phone-w-inline: clamp(12rem, 42vw, 16.5rem);
    --phone-w-hero: clamp(13rem, 46vw, 17.5rem);
  }
}

@media (min-width: 600px) {
  :root {
    --slide-pad-x: clamp(1.25rem, 4vw, 2rem);
    --phone-w: clamp(13.5rem, 30vw, 16.5rem);
    --phone-w-inline: clamp(13rem, 28vw, 16.5rem);
    --phone-w-hero: clamp(14rem, 32vw, 18rem);
    --text-max: clamp(18rem, 72vw, 26rem);
    --chapter-text-max: clamp(17rem, 68vw, 22rem);
  }
}

@media (min-width: 900px) {
  :root {
    --phone-w: clamp(18rem, 20vw, 24rem);
    --phone-w-inline: clamp(18rem, 19vw, 23rem);
    --phone-w-hero: clamp(19rem, 19vw, 25rem);
    --content-max: min(68rem, 92vw);
    --content-max-wide: min(74rem, 92vw);
    --content-max-narrow: min(52rem, 72vw);
    --text-max: clamp(25rem, 33vw, 34rem);
    --chapter-text-max: clamp(23rem, 27vw, 30rem);
    --gap-slide: clamp(1.875rem, 4.25vh, 3.5rem);
    --gap-row: clamp(2.5rem, 4.75vw, 5.5rem);
    --slide-pad-x: clamp(1.875rem, 4.25vw, 3rem);
    --slide-pad-y: clamp(1.625rem, 3.75vh, 3rem);
  }

  .fullpage-slide.hero,
  .hero {
    width: min(100%, 92rem);
  }

  .fullpage-slide--chapter {
    width: min(100%, 74rem);
  }

  .fullpage-slide--chapter.fullpage-slide--dual {
    width: min(100%, 96rem);
  }

  .logo {
    font-size: 1.375rem;
  }

  .hero__title {
    font-size: clamp(3.125rem, 5.25vw, 4.5rem);
  }

  .hero__tagline {
    font-size: clamp(1.3125rem, 2.3vw, 1.5rem);
  }

  .store-badge {
    font-size: 1.125rem;
    padding: 0.875rem 1.625rem;
  }

  .how__heading {
    font-size: clamp(2.125rem, 3.25vw, 2.625rem);
    margin-bottom: 3rem;
  }

  .how__steps {
    gap: clamp(1.625rem, 2.75vw, 2.75rem);
  }

  .how__step {
    gap: 1.125rem;
  }

  .how__step-media img {
    width: clamp(12rem, 14vw, 17.5rem);
    border-radius: clamp(20px, 2.5vw, 28px);
  }

  .how__step h3 {
    font-size: clamp(1.1875rem, 1.85vw, 1.375rem);
  }

  .how__step-num {
    width: 2.375rem;
    height: 2.375rem;
    font-size: 1.0625rem;
  }

  .chapter__title {
    font-size: clamp(2.375rem, 3.9vw, 3rem);
  }

  .chapter p {
    font-size: clamp(1.1875rem, 2.1vw, 1.3125rem);
  }

  .chapter__label {
    font-size: 0.9375rem;
  }

  .phone-screenshot--compact {
    width: clamp(10.5rem, 18vw, 18rem);
  }

  .trust__heading {
    font-size: clamp(2rem, 3.4vw, 2.5rem);
  }

  .trust__block h3 {
    font-size: 1.25rem;
  }

  .trust__block ul {
    font-size: 1.125rem;
  }

  .trust__note,
  .trust__links {
    font-size: 1.125rem;
  }

  .site-footer__brand {
    font-size: 1.5rem;
  }

  .site-footer__links,
  .site-footer__contact,
  .site-footer__note {
    font-size: 1.1875rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --phone-w: clamp(19rem, 19vw, 25rem);
    --phone-w-inline: clamp(19rem, 18vw, 24rem);
    --phone-w-hero: clamp(20rem, 18vw, 26rem);
    --content-max: min(72rem, 88vw);
    --content-max-wide: min(78rem, 86vw);
    --content-max-narrow: min(54rem, 72vw);
    --text-max: clamp(27rem, 31vw, 36rem);
    --chapter-text-max: clamp(25rem, 25vw, 32rem);
    --gap-row: clamp(2.75rem, 4.75vw, 6rem);
  }

  .phone-screenshot--compact {
    width: clamp(11.5rem, 17vw, 19rem);
  }

  .how__step-media img {
    width: clamp(12.5rem, 13vw, 18.5rem);
  }
}

@media (min-width: 1600px) {
  :root {
    --phone-w: clamp(20rem, 18vw, 26rem);
    --phone-w-inline: clamp(20rem, 17vw, 25rem);
    --phone-w-hero: clamp(21rem, 17vw, 27rem);
    --content-max: min(76rem, 82vw);
    --content-max-wide: min(82rem, 78vw);
    --content-max-narrow: min(56rem, 68vw);
  }

  .phone-screenshot--compact {
    width: clamp(12.5rem, 16vw, 20rem);
  }

  .how__step-media img {
    width: clamp(13.5rem, 12vw, 19.5rem);
  }
}

/* Short viewports (landscape phones, small laptop screens) */
@media (max-height: 700px) and (max-width: 899px) {
  :root {
    --mobile-phone-w: clamp(12.5rem, 54vw, 16rem);
    --mobile-phone-max-h: min(calc(var(--mobile-phone-w) * 2), 46dvh);
    --mobile-phone-gap: clamp(0.2rem, 0.85vh, 0.5rem);
    --mobile-text-max-h: 32dvh;
    --carousel-arrow-size: 1.375rem;
    --carousel-arrow-icon: 0.8125rem;
    --carousel-pager-size: 0.6875rem;
    --slide-pad-y: clamp(0.5rem, 1.25vh, 0.875rem);
    --gap-slide: clamp(0.75rem, 1.75vh, 1rem);
  }
}

@media (max-height: 700px) {
  :root {
    --slide-pad-y: clamp(0.625rem, 1.5vh, 1rem);
    --gap-slide: clamp(0.875rem, 2vh, 1.25rem);
    --phone-w-inline: clamp(9.5rem, 24vh, 13rem);
    --phone-w-hero: clamp(10rem, 26vh, 14rem);
  }

  .hero__hint {
    margin-top: 0.75rem;
  }
}

@media (max-height: 700px) and (min-width: 900px) {
  :root {
    --gap-row: clamp(1.5rem, 2.5vw, 2.25rem);
    --phone-w-inline: clamp(13rem, 28vh, 17.5rem);
    --phone-w-hero: clamp(13.5rem, 30vh, 18.5rem);
  }
}

/* Small phones */
@media (max-width: 379px) {
  :root {
    --header-h: 3rem;
    --slide-pad-x: 0.875rem;
  }

  .logo {
    font-size: 1rem;
  }

  .store-badge {
    font-size: 0.8125rem;
    padding: 0.5rem 0.875rem;
  }
}