:root {
  color-scheme: light;
  --bg: #e5e7e9;
  --ink: #202124;
  --muted: #666b73;
  --accent: #6550aa;
  --accent-soft: #d9d0f2;
  --light: #ffffff;
  --shadow: #bec2c7;
  --line: rgba(32, 33, 36, 0.12);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,0.9), transparent 30rem),
    radial-gradient(circle at 90% 30%, rgba(101,80,170,0.12), transparent 24rem),
    var(--bg);
}

a { color: inherit; }

.shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

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

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 7px 7px 14px var(--shadow), -7px -7px 14px var(--light);
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 14px;
}

.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--ink); }

.site-language {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.48);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 7px 9px;
}

.hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
  padding: 50px 0 100px;
}

.eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1 {
  max-width: 760px;
  margin: 18px 0 22px;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.lead {
  max-width: 590px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.store-button {
  min-width: 186px;
  padding: 15px 20px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 18px;
  background: var(--bg);
  box-shadow: 8px 8px 18px var(--shadow), -8px -8px 18px var(--light);
  text-decoration: none;
  font-weight: 700;
}

.store-button small {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.device {
  width: min(370px, 88vw);
  aspect-ratio: 0.56;
  margin: 0 auto;
  padding: 18px;
  border-radius: 52px;
  background: #dfe1e3;
  box-shadow: 24px 24px 50px rgba(144,148,153,0.55), -22px -22px 48px rgba(255,255,255,0.9);
  transform: rotate(2deg);
}

.device-screen {
  height: 100%;
  border-radius: 38px;
  background: #e0e0e0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.device-screen::before,
.device-screen::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.22);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.device-screen::before {
  left: 28px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54A.484.484 0 0 0 13.93 2h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87a.49.49 0 0 0 .12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54A.484.484 0 0 0 13.93 2h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87a.49.49 0 0 0 .12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z'/%3E%3C/svg%3E");
}

.device-screen::after {
  right: 28px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z'/%3E%3C/svg%3E");
}

.relax-button {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #e0e0e0;
  box-shadow: 22px 22px 44px #bebebe, -22px -22px 44px #ffffff;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 0 0 100px;
}

.feature {
  padding: 30px;
  border-radius: 28px;
  background: rgba(229,231,233,0.72);
  box-shadow: 10px 10px 24px rgba(190,194,199,0.85), -10px -10px 24px rgba(255,255,255,0.9);
}

.feature strong {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
}

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

.legal {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0 100px;
}

.legal-card {
  padding: clamp(28px, 5vw, 58px);
  border-radius: 32px;
  background: rgba(245,246,247,0.72);
  box-shadow: 14px 14px 32px rgba(190,194,199,0.75), -14px -14px 32px rgba(255,255,255,0.9);
}

.legal h1 {
  margin-top: 0;
  font-size: clamp(38px, 7vw, 64px);
}

.legal h2 {
  margin-top: 34px;
  font-size: 21px;
}

.legal p,
.legal li {
  color: #4f545b;
  line-height: 1.7;
}

.legal .updated {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.support-email {
  display: inline-block;
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--accent);
  color: white;
  text-decoration: none;
  font-weight: 700;
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 0 42px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

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

@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 34px; text-align: center; }
  .lead { margin-inline: auto; }
  .store-row { justify-content: center; }
  .device { width: min(330px, 86vw); }
  .features { grid-template-columns: 1fr; }
  .footer { flex-direction: column; }
}