:root {
  --bg: #f5f9fc;
  --surface: rgba(255, 255, 255, 0.76);
  --surface-solid: #ffffff;
  --text: #081426;
  --muted: #526273;
  --line: rgba(14, 38, 65, 0.12);
  --blue: #1e88e5;
  --blue-2: #42a5f5;
  --blue-3: #1565c0;
  --deep: #0d47a1;
  --goal: #e53935;
  --shadow: 0 24px 80px rgba(21, 101, 192, 0.16);
  --water-level: 9vh;
  --scroll-progress: 0;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --surface: rgba(23, 28, 35, 0.74);
    --surface-solid: #171c23;
    --text: #f5f8fb;
    --muted: #a6b5c5;
    --line: rgba(218, 232, 245, 0.14);
    --shadow: 0 26px 90px rgba(0, 0, 0, 0.34);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  width: 100%;
  max-width: 100%;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 9%, rgba(100, 181, 246, 0.34), transparent 28rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 72%, rgba(30, 136, 229, 0.10) 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(30, 136, 229, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 136, 229, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 58%);
  z-index: -2;
}

a {
  color: inherit;
}

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

.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 30;
  width: min(1120px, calc(100% - 28px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent);
  box-shadow: 0 16px 50px rgba(15, 30, 45, 0.08);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
}

.brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav a,
.lang-toggle button,
.ghost-link,
.primary-link {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-size: 0.91rem;
  font-weight: 750;
  text-decoration: none;
}

.nav a {
  color: var(--muted);
}

.nav a:hover {
  color: var(--text);
  background: rgba(30, 136, 229, 0.08);
}

.lang-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(100, 181, 246, 0.10);
}

.lang-toggle button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.lang-toggle button.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-2), var(--blue-3));
  box-shadow: 0 10px 24px rgba(21, 101, 192, 0.26);
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 132px max(22px, calc((100vw - 1120px) / 2)) 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  align-items: center;
  gap: clamp(28px, 6vw, 86px);
}

.hero-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
  max-width: 100%;
}

.eyebrow {
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(30, 136, 229, 0.18);
  border-radius: 999px;
  color: var(--blue-3);
  background: rgba(100, 181, 246, 0.13);
  font-weight: 800;
  font-size: 0.88rem;
}

h1 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(3.4rem, 9vw, 8.6rem);
  line-height: 0.82;
  letter-spacing: 0;
}

.lead {
  max-width: 620px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.42rem);
  line-height: 1.55;
  overflow-wrap: break-word;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.primary-link {
  min-height: 52px;
  padding-inline: 21px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-2), var(--blue-3));
  box-shadow: 0 18px 42px rgba(21, 101, 192, 0.32);
}

.ghost-link {
  min-height: 52px;
  padding-inline: 21px;
  color: var(--text);
  border-color: var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  width: 174px;
  min-height: 52px;
  transition: transform 180ms ease, filter 180ms ease;
}

.store-badge:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 12px 24px rgba(21, 101, 192, 0.24));
}

.store-badge img {
  width: 100%;
  height: auto;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
  max-width: 600px;
}

.metric {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  backdrop-filter: blur(16px);
}

.metric strong {
  display: block;
  font-size: clamp(1.28rem, 2.4vw, 2rem);
}

.metric span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.phone-stage {
  position: relative;
  z-index: 2;
  min-height: 650px;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.phone-shell {
  width: min(330px, 76vw);
  aspect-ratio: 0.49;
  padding: 12px;
  border-radius: 42px;
  background: linear-gradient(145deg, #0b1118, #39424d 48%, #111821);
  box-shadow: 32px 44px 90px rgba(10, 24, 40, 0.30);
  transform: rotate(-4deg) rotateY(-12deg) translateY(calc(var(--scroll-progress) * -18px));
}

.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  background: #f5f9fc;
  color: #111317;
}

.phone-dark {
  position: absolute;
  inset: 0;
  opacity: calc(var(--scroll-progress) * 1.25);
  background: #0d1117;
  color: #f5f8fb;
}

.phone-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 22px;
}

.phone-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.18rem;
  font-weight: 850;
}

.phone-title img {
  width: 24px;
  height: 24px;
}

.chip {
  margin-top: 34px;
  padding: 10px 16px;
  border: 1px solid rgba(15, 32, 48, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 8px 28px rgba(15, 32, 48, 0.08);
  font-weight: 750;
  font-size: 0.84rem;
}

.phone-dark .chip {
  border-color: rgba(245, 248, 251, 0.14);
  background: rgba(13, 17, 23, 0.58);
}

.phone-percent {
  margin: auto 0;
  font-size: clamp(3.6rem, 9vw, 5.2rem);
  font-weight: 900;
  text-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
}

.phone-add {
  position: absolute;
  right: 24px;
  bottom: 72px;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #ffffff;
  background: #3f6794;
  box-shadow: 0 16px 32px rgba(21, 42, 65, 0.26);
  font-weight: 800;
}

.phone-add b {
  display: block;
  font-size: 2.7rem;
  line-height: 0.8;
  font-weight: 300;
}

.phone-water {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: calc(19% + var(--scroll-progress) * 47%);
  background: linear-gradient(180deg, rgba(100, 181, 246, 0.86), rgba(30, 136, 229, 0.97));
  animation: phoneWaterLevel 4.8s ease-in-out infinite;
}

.phone-water::before {
  content: "";
  position: absolute;
  left: -60%;
  top: -30px;
  width: 220%;
  height: 58px;
  background: rgba(100, 181, 246, 0.88);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='90' viewBox='0 0 900 90'%3E%3Cpath d='M0 45 C75 45 75 28 150 28 C225 28 225 45 300 45 C375 45 375 62 450 62 C525 62 525 45 600 45 C675 45 675 28 750 28 C825 28 825 45 900 45 V90 H0 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 450px 58px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='90' viewBox='0 0 900 90'%3E%3Cpath d='M0 45 C75 45 75 28 150 28 C225 28 225 45 300 45 C375 45 375 62 450 62 C525 62 525 45 600 45 C675 45 675 28 750 28 C825 28 825 45 900 45 V90 H0 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 450px 58px;
  animation: phoneWave 6.2s linear infinite;
}

.phone-water::after {
  content: "";
  position: absolute;
  left: -55%;
  top: -24px;
  width: 210%;
  height: 50px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1040' height='90' viewBox='0 0 1040 90'%3E%3Cpath d='M0 45 C86 45 86 61 173 61 C260 61 260 45 347 45 C433 45 433 29 520 29 C607 29 607 45 693 45 C780 45 780 61 867 61 C953 61 953 45 1040 45 V90 H0 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 520px 50px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1040' height='90' viewBox='0 0 1040 90'%3E%3Cpath d='M0 45 C86 45 86 61 173 61 C260 61 260 45 347 45 C433 45 433 29 520 29 C607 29 607 45 693 45 C780 45 780 61 867 61 C953 61 953 45 1040 45 V90 H0 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 520px 50px;
  animation: phoneWaveReverse 7.4s linear infinite;
}

.scroll-story {
  position: relative;
  z-index: 4;
  min-height: 285vh;
  padding: 0 max(22px, calc((100vw - 1120px) / 2));
}

.story-pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  align-items: center;
  gap: clamp(24px, 6vw, 82px);
  padding: 96px 0 72px;
}

.story-copy {
  max-width: 500px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, rgba(255, 255, 255, 0.28));
  border-radius: 30px;
  background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  box-shadow: 0 22px 72px rgba(4, 17, 32, 0.18);
  backdrop-filter: blur(22px) saturate(1.15);
}

.story-kicker {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--blue-3) 84%, var(--text));
  font-weight: 850;
  font-size: clamp(0.86rem, 1.2vw, 1rem);
}

.story-title {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.65rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.story-text {
  min-height: 86px;
  margin: 18px 0 0;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  font-size: clamp(0.98rem, 1.42vw, 1.16rem);
  line-height: 1.55;
  font-weight: 600;
}

.story-count {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-weight: 800;
}

.story-count progress {
  width: 180px;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 136, 229, 0.13);
}

.story-count progress::-webkit-progress-bar {
  background: rgba(30, 136, 229, 0.13);
}

.story-count progress::-webkit-progress-value,
.story-count progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-2), var(--blue-3));
}

.feature-panel {
  position: relative;
  display: grid;
  gap: 16px;
}

.feature-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  transform: translateY(calc((1 - var(--scroll-progress)) * 22px));
}

.feature-card h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.visual-grid {
  position: relative;
  z-index: 5;
  padding: 80px max(22px, calc((100vw - 1120px) / 2)) 140px;
}

#features,
#screens,
.banner {
  scroll-margin-top: 108px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 34px;
  padding: clamp(20px, 3.4vw, 32px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, rgba(255, 255, 255, 0.28));
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(100, 181, 246, 0.18), transparent 18rem),
    color-mix(in srgb, var(--surface-solid) 82%, transparent);
  box-shadow: 0 22px 72px rgba(4, 17, 32, 0.18);
  backdrop-filter: blur(22px) saturate(1.15);
}

.section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 3.55vw, 3.25rem);
  line-height: 1.04;
  text-wrap: balance;
}

.section-heading p {
  margin: 16px 0 0;
  max-width: 660px;
  color: color-mix(in srgb, var(--text) 84%, var(--muted));
  font-size: clamp(0.98rem, 1.22vw, 1.08rem);
  line-height: 1.62;
  font-weight: 650;
}

.screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.screen-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.screen-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner {
  position: relative;
  z-index: 5;
  margin: 0 max(22px, calc((100vw - 1120px) / 2)) 120px;
  min-height: 438px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 18%, rgba(245, 249, 252, 0.92), transparent 11rem),
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.42), transparent 18rem),
    linear-gradient(135deg, #f5f9fc 0%, #dff1ff 38%, #76bef5 100%);
  box-shadow: var(--shadow);
}

.banner-water-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.banner-orbit {
  position: absolute;
  top: 44px;
  right: clamp(30px, 9vw, 118px);
  width: clamp(112px, 15vw, 176px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(21, 101, 192, 0.16);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 44px rgba(255, 255, 255, 0.34), 0 24px 62px rgba(13, 71, 161, 0.18);
  backdrop-filter: blur(16px);
  animation: floatMark 5.4s ease-in-out infinite;
}

.banner-orbit img {
  width: 48%;
}

.banner-mini-card {
  position: absolute;
  z-index: 2;
  width: 168px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 24px;
  color: #ffffff;
  background: linear-gradient(145deg, rgba(21, 101, 192, 0.92), rgba(30, 136, 229, 0.76));
  box-shadow: 0 22px 58px rgba(13, 71, 161, 0.22);
  backdrop-filter: blur(14px);
}

.banner-mini-card strong {
  display: block;
  font-size: 1.55rem;
}

.banner-mini-card span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 750;
}

.card-a {
  right: clamp(160px, 24vw, 330px);
  top: 72px;
}

.card-b {
  right: clamp(34px, 8vw, 94px);
  bottom: 52px;
}

.banner-wave {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: var(--bottom);
  height: var(--height);
  border-radius: 48% 52% 0 0;
  opacity: var(--opacity);
  background: linear-gradient(180deg, var(--top), var(--base));
  animation: bannerWave var(--speed) ease-in-out infinite alternate;
}

.wave-a {
  --bottom: -18%;
  --height: 58%;
  --opacity: 0.46;
  --top: #64b5f6;
  --base: #1e88e5;
  --speed: 5.8s;
}

.wave-b {
  --bottom: -24%;
  --height: 64%;
  --opacity: 0.52;
  --top: #42a5f5;
  --base: #1565c0;
  --speed: 6.7s;
}

.wave-c {
  --bottom: -31%;
  --height: 72%;
  --opacity: 0.50;
  --top: #1e88e5;
  --base: #0d47a1;
  --speed: 7.4s;
}

.banner-overlay {
  position: absolute;
  left: clamp(22px, 4vw, 54px);
  top: clamp(22px, 3.2vw, 36px);
  bottom: clamp(22px, 3.2vw, 36px);
  width: min(590px, calc(100% - 430px));
  min-width: 470px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3.4vw, 38px);
  border: 1px solid rgba(21, 101, 192, 0.16);
  border-radius: 28px;
  color: #081426;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 24px 70px rgba(13, 71, 161, 0.18);
  backdrop-filter: blur(18px) saturate(1.12);
}

.banner-overlay h2 {
  margin: 0 0 12px;
  max-width: 560px;
  font-size: clamp(2rem, 3.25vw, 3rem);
  line-height: 1.07;
  color: #07172b;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.banner-overlay p {
  margin: 0;
  max-width: 560px;
  color: #405266;
  line-height: 1.55;
  font-size: 1.04rem;
  font-weight: 650;
}

.store-badge-overlay {
  margin-top: 22px;
  width: 188px;
}

.legal-page {
  position: relative;
  z-index: 5;
  min-height: 100svh;
  padding: 132px max(22px, calc((100vw - 880px) / 2)) 120px;
}

.legal-card {
  padding: clamp(24px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.legal-card h1 {
  font-size: clamp(2.25rem, 6vw, 4.65rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.legal-card h2 {
  margin: 34px 0 8px;
}

.legal-card p,
.legal-card li {
  color: var(--muted);
  line-height: 1.7;
}

.site-footer {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  padding: 32px max(22px, calc((100vw - 1120px) / 2)) 44px;
  color: rgba(255, 255, 255, 0.86);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-links a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
}

.water-system {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: clamp(130px, var(--water-level), 88vh);
  pointer-events: none;
  transition: height 180ms linear;
  animation: waterLevel 5.2s ease-in-out infinite;
}

.water-layer {
  position: absolute;
  left: -18vw;
  right: -18vw;
  top: 28px;
  bottom: 0;
  height: auto;
  opacity: var(--opacity);
  background: linear-gradient(180deg, var(--top), var(--bottom));
  transform: translateY(var(--layer-y));
}

.water-layer:nth-child(1) {
  z-index: 1;
}

.water-layer:nth-child(2) {
  z-index: 2;
}

.water-layer:nth-child(3) {
  z-index: 3;
}

.water-layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--wave-top);
  width: 200%;
  height: var(--wave-height);
  background: var(--top);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='110' viewBox='0 0 1200 110'%3E%3Cpath d='M0 55 C100 55 100 34 200 34 C300 34 300 55 400 55 C500 55 500 76 600 76 C700 76 700 55 800 55 C900 55 900 34 1000 34 C1100 34 1100 55 1200 55 V110 H0 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / var(--wave-size) var(--wave-height);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='110' viewBox='0 0 1200 110'%3E%3Cpath d='M0 55 C100 55 100 34 200 34 C300 34 300 55 400 55 C500 55 500 76 600 76 C700 76 700 55 800 55 C900 55 900 34 1000 34 C1100 34 1100 55 1200 55 V110 H0 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / var(--wave-size) var(--wave-height);
  transform: translateX(var(--offset));
  animation: waveMove var(--speed) linear infinite;
}

.water-highlight {
  position: absolute;
  left: -18vw;
  right: -18vw;
  top: 12px;
  height: 54px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='78' viewBox='0 0 760 78'%3E%3Cpath d='M0 38 C63 38 63 25 127 25 C190 25 190 38 253 38 C317 38 317 51 380 51 C443 51 443 38 507 38 C570 38 570 25 633 25 C697 25 697 38 760 38 V44 C697 44 697 31 633 31 C570 31 570 44 507 44 C443 44 443 57 380 57 C317 57 317 44 253 44 C190 44 190 31 127 31 C63 31 63 44 0 44 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 760px 78px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='78' viewBox='0 0 760 78'%3E%3Cpath d='M0 38 C63 38 63 25 127 25 C190 25 190 38 253 38 C317 38 317 51 380 51 C443 51 443 38 507 38 C570 38 570 25 633 25 C697 25 697 38 760 38 V44 C697 44 697 31 633 31 C570 31 570 44 507 44 C443 44 443 57 380 57 C317 57 317 44 253 44 C190 44 190 31 127 31 C63 31 63 44 0 44 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 760px 78px;
  animation: waveShimmer 6.8s linear infinite;
  filter: blur(0.4px);
  z-index: 4;
}

[data-i18n] {
  transition: opacity 160ms ease;
}

@keyframes waveMove {
  from {
    transform: translateX(var(--offset)) translateY(0);
  }
  to {
    transform: translateX(calc(var(--offset) - var(--wave-size))) translateY(0);
  }
}

@keyframes phoneWave {
  from {
    transform: translateX(0) translateY(0);
  }
  to {
    transform: translateX(-450px) translateY(0);
  }
}

@keyframes phoneWaveReverse {
  from {
    transform: translateX(0) translateY(0);
  }
  to {
    transform: translateX(520px) translateY(0);
  }
}

@keyframes phoneWaterLevel {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes waterLevel {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes waveShimmer {
  from {
    transform: translateX(0) translateY(0);
  }
  to {
    transform: translateX(-760px) translateY(0);
  }
}

@keyframes bannerWave {
  from {
    transform: translateX(-2%) translateY(0) rotate(0deg);
  }
  to {
    transform: translateX(4%) translateY(-12px) rotate(-1deg);
  }
}

@keyframes floatMark {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@media (max-width: 860px) {
  .site-header {
    top: 10px;
    border-radius: 22px;
  }

  .nav a {
    display: none;
  }

  .hero,
  .story-pin {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 112px;
    min-height: auto;
    padding-bottom: 46px;
  }

  h1 {
    font-size: clamp(3.2rem, 17vw, 5.6rem);
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .phone-stage {
    min-height: 430px;
    margin-top: 4px;
  }

  .phone-shell {
    width: min(250px, 68vw);
    transform: rotate(0deg) translateY(0);
    border-radius: 34px;
  }

  .phone-screen {
    border-radius: 26px;
  }

  .phone-ui {
    padding: 28px 18px;
  }

  .phone-title {
    font-size: 1rem;
  }

  .chip {
    margin-top: 24px;
    font-size: 0.72rem;
    padding: 8px 12px;
  }

  .phone-percent {
    font-size: 3.1rem;
  }

  .phone-add {
    width: 72px;
    height: 72px;
    right: 18px;
    bottom: 54px;
    border-radius: 20px;
  }

  .phone-add b {
    font-size: 2.2rem;
  }

  .scroll-story {
    min-height: auto;
    padding-top: 46px;
    padding-bottom: 64px;
  }

  .story-pin {
    position: relative;
    top: auto;
    min-height: auto;
    align-content: start;
    padding: 0;
  }

  .story-copy {
    max-width: none;
  }

  .story-title {
    font-size: clamp(2rem, 9vw, 2.85rem);
  }

  .story-text {
    min-height: 0;
  }

  .screens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .banner {
    border-radius: 28px;
    min-height: 560px;
  }

  .banner-overlay {
    left: 18px;
    right: 18px;
    top: 18px;
    bottom: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 24px;
  }

  .banner-overlay h2 {
    font-size: clamp(2rem, 8.5vw, 3rem);
  }
}

@media (max-width: 520px) {
  html,
  body {
    overflow-x: clip;
  }

  .hero,
  .scroll-story,
  .visual-grid {
    padding-left: 22px;
    padding-right: 22px;
    overflow: hidden;
  }

  .hero-copy,
  .lead,
  .hero-actions,
  .hero-metrics {
    width: min(100%, 346px);
    max-width: calc(100vw - 44px);
  }

  .lead {
    font-size: 1rem;
    line-height: 1.5;
  }

  .site-header {
    width: calc(100% - 20px);
    gap: 8px;
    padding: 8px 9px;
  }

  .brand {
    flex: 0 0 auto;
  }

  .brand span {
    display: none;
  }

  .lang-toggle {
    margin-left: auto;
  }

  .lang-toggle button {
    padding-inline: 9px;
  }

  h1 {
    font-size: clamp(2.75rem, 13.2vw, 3.55rem);
    line-height: 0.9;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .primary-link,
  .ghost-link,
  .store-badge {
    width: min(100%, 346px);
    max-width: calc(100vw - 44px);
  }

  .store-badge {
    justify-content: center;
  }

  .store-badge img {
    max-width: 210px;
  }

  .screens {
    grid-template-columns: 1fr;
  }

  .screen-card {
    max-height: 580px;
  }

  .section-heading {
    padding: 20px;
    border-radius: 22px;
  }

  .section-heading h2 {
    font-size: clamp(1.75rem, 8.6vw, 2.28rem);
    line-height: 1.08;
  }

  .section-heading p {
    font-size: 0.96rem;
    line-height: 1.56;
  }

  .banner-overlay {
    left: 14px;
    right: 14px;
    top: 14px;
  }

  .site-footer {
    padding-bottom: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}