/* Hallmark · genre: playful · macrostructure: studied-DNA (user mockup, 8 bands) · tone: soft · anchor hue: telegram blue · theme: studied-DNA (source: image)
 * studied: yes · DNA-source: image (user's own S-PIKA mockup) · nav: sticky white bar · footer: ocean CTA + QR
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 */
@import "./tokens.css?v=36";

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

html,
body {
  overflow-x: clip;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--c-paper);
}

body {
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

h1,
h2 {
  font-style: normal;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 800;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
  min-width: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[id] {
  scroll-margin-top: calc(var(--top-h) + var(--s-md));
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  margin-bottom: var(--s-xs);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
}

.eyebrow--light {
  color: var(--c-cyan);
}

/* ---------- Curved section edges ---------- */

.wave {
  position: absolute;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: var(--wave-h);
  pointer-events: none;
}

.wave--bottom {
  bottom: -1px;
}

.wave--top {
  top: -1px;
}

.wave__back--foam { fill: var(--c-wave-foam); }
.wave__back--sea { fill: var(--c-wave-sea); }
.wave__back--glow { fill: var(--c-wave-glow); }
.wave__mid { fill: var(--c-wave-mist); }
.wave__mid--sea { fill: var(--c-wave-sea-2); }
.wave__front--paper { fill: var(--c-paper); }
.wave__front--night { fill: var(--c-night); }
.wave__front--white { fill: var(--c-white); }
.wave__front--lilac { fill: var(--c-lilac); }

html.has-motion .wave__back {
  animation: wave-drift 9s var(--ease-in-out) infinite;
}

html.has-motion .wave__mid {
  animation: wave-drift 12s var(--ease-in-out) infinite reverse;
}

/* ---------- Top bar ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-card-line);
  transition: box-shadow var(--dur-short) var(--ease-out);
}

.top.is-scrolled {
  box-shadow: 0 8px 24px -18px var(--c-shadow-strong);
}

.top__inner {
  max-width: var(--shell);
  height: var(--top-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-md);
}

.top__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  text-decoration: none;
  color: var(--c-blue-deep);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.top__brand img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.top__links {
  display: none;
  gap: var(--s-lg);
  margin-inline: auto;
}

.top__links a {
  position: relative;
  padding-block: var(--s-xs);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--c-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.top__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-blue);
  transform: scaleX(0);
  transition: transform var(--dur-short) var(--ease-out);
}

.top__links a:hover,
.top__links a[aria-current="page"] {
  color: var(--c-blue);
}

.top__links a:hover::after,
.top__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0 var(--s-lg);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out);
}

.pill--blue {
  color: var(--c-white);
  background: linear-gradient(180deg, var(--c-blue), var(--c-blue-deep));
  box-shadow: 0 8px 18px -8px var(--c-glow-blue);
}

.pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -8px var(--c-glow-blue);
}

.pill:active {
  transform: translateY(1px);
}

.top__cta {
  margin-inline-start: 0;
}

/* Language */

.lang {
  position: relative;
  margin-inline-start: auto;
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.4rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-pill);
  background: var(--c-ice);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.lang__btn svg {
  width: 1rem;
  height: 1rem;
  color: var(--c-blue);
}

.lang__btn:hover,
.lang.is-open .lang__btn {
  background: var(--c-ice-2);
}

.lang__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  display: grid;
  gap: 2px;
  min-width: 10.5rem;
  padding: var(--s-2xs);
  background: var(--c-white);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px -20px var(--c-shadow-strong);
}

.lang__menu[hidden] {
  display: none;
}

html.has-motion .lang__menu:not([hidden]) {
  animation: pop-in var(--dur-short) var(--ease-out);
}

.lang__menu button {
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}

.lang__menu button:hover,
.lang__menu button:focus-visible {
  background: var(--c-ice);
}

.lang__menu button[aria-checked="true"] {
  color: var(--c-blue);
  background: var(--c-ice);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-hero-ink);
  color: var(--c-hero-text);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, oklch(22% 0.08 262 / 0.55) 0%, oklch(22% 0.08 262 / 0.86) 45%, oklch(22% 0.08 262 / 0.92) 100%);
}

@media (min-width: 60rem) {
  .hero::before {
    background: linear-gradient(90deg, var(--c-hero-ink) 0%, oklch(22% 0.08 262 / 0.75) 38%, transparent 70%);
  }
}

.hero__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--s-xl) var(--gutter) var(--s-3xl);
  display: grid;
  gap: var(--s-md);
  justify-items: start;
}

.hero__logo {
  width: clamp(12rem, 22vw, 17rem);
  height: auto;
  margin-bottom: calc(var(--s-xs) * -1);
  filter: drop-shadow(0 12px 24px oklch(10% 0.05 262 / 0.45));
}

html.has-motion .hero__logo {
  animation: float 6s var(--ease-in-out) infinite;
}

.hero h1 {
  display: grid;
  font-size: var(--t-hero);
  font-weight: 800;
  color: var(--c-white);
}

.hero__accent {
  color: var(--c-cyan);
}

.hero__lead {
  max-width: 34rem;
  font-size: var(--t-lead);
  color: var(--c-hero-text);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.3rem;
  padding: 0 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-hero-line);
  background: var(--c-hero-glass);
  backdrop-filter: blur(6px);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-white);
  white-space: nowrap;
}

.chips svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--c-white);
}

.stores {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-sm);
  margin-top: var(--s-xs);
  width: 100%;
}

@media (min-width: 42rem) {
  .stores {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .store {
    gap: 0.5rem;
    padding: 0 0.75rem 0 0.7rem;
  }
}

.store {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  width: 100%;
  min-height: 3.6rem;
  padding: 0 1.4rem 0 1.1rem;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-white);
  transition:
    transform var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

.store svg {
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  transition: transform var(--dur-short) var(--ease-spring);
}

.store__copy {
  display: grid;
  line-height: 1.15;
  white-space: nowrap;
}

.store__copy b {
  font-size: 1rem;
  font-weight: 700;
}

.store__copy small {
  font-size: var(--t-xs);
  font-weight: 500;
  opacity: 0.85;
}

.store--ios {
  background: linear-gradient(180deg, var(--c-blue), var(--c-blue-deep));
  box-shadow: 0 12px 26px -12px var(--c-glow-blue);
}

.store--android {
  background: var(--c-black);
  border: 1px solid var(--c-hero-line);
  box-shadow: 0 12px 26px -14px oklch(5% 0.02 260 / 0.7);
}

.store--windows {
  background: linear-gradient(180deg, var(--c-win), var(--c-win-deep));
  color: var(--c-win-ink);
  border: 1px solid var(--c-white);
  box-shadow: 0 12px 26px -10px var(--c-shadow-strong);
}

.store::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, oklch(100% 0 0 / 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
}

.store:hover {
  transform: translateY(-3px);
}

.store--ios:hover {
  box-shadow: 0 18px 32px -12px var(--c-glow-blue);
}

.store--windows:hover {
  box-shadow: 0 18px 32px -10px var(--c-shadow-strong);
}

.store:active {
  transform: translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
  .store:hover::before {
    animation: sheen 800ms var(--ease-out);
  }

  .store:hover svg {
    transform: scale(1.12) rotate(-6deg);
  }
}

/* ---------- Features ---------- */

.features {
  padding-block: var(--s-xl) var(--s-2xl);
  background: var(--c-paper);
}

.head--split {
  display: grid;
  gap: var(--s-xs);
  margin-bottom: var(--s-lg);
}

.head__aside {
  font-size: var(--t-small);
  color: var(--c-muted);
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-sm);
}

.feat {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.35rem;
  padding: var(--s-lg) var(--s-sm);
  text-align: center;
  background: var(--c-white);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-md);
  box-shadow: 0 10px 26px -20px var(--c-shadow-strong);
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

.feat b {
  margin-top: var(--s-xs);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--c-ink);
}

.feat > span:last-child {
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--c-muted);
}

.tile {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 auto;
  border-radius: 0.8rem;
  color: var(--c-white);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.35), 0 8px 16px -8px var(--tile-glow, var(--c-shadow-strong));
  transition: transform var(--dur-short) var(--ease-spring);
}

.tile svg {
  width: 1.45rem;
  height: 1.45rem;
}

.tile--round {
  border-radius: var(--r-pill);
}

.tile--sm {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.5rem;
}

.tile--sm svg {
  width: 1rem;
  height: 1rem;
}

.tile--text {
  font-size: var(--t-xs);
  font-weight: 800;
}

.tile--green { background: linear-gradient(160deg, var(--c-tile-green), oklch(56% 0.16 150)); }
.tile--purple { background: linear-gradient(160deg, var(--c-tile-purple), oklch(50% 0.21 290)); }
.tile--blue { background: linear-gradient(160deg, var(--c-tile-blue), var(--c-blue-deep)); }
.tile--orange { background: linear-gradient(160deg, var(--c-tile-orange), oklch(64% 0.18 45)); }
.tile--red { background: linear-gradient(160deg, var(--c-tile-red), oklch(56% 0.2 18)); }
.tile--violet { background: linear-gradient(160deg, var(--c-tile-violet), oklch(52% 0.2 295)); }
.tile--cyan { background: linear-gradient(160deg, var(--c-tile-cyan), oklch(62% 0.15 235)); }
.tile--gold { background: linear-gradient(160deg, var(--c-tile-gold), oklch(70% 0.17 60)); }

@media (hover: hover) and (pointer: fine) {
  .feat:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -20px var(--c-shadow-strong);
  }

  .feat:hover .tile,
  .privacy__list li:hover .tile,
  .future__cards li:hover .tile {
    transform: scale(1.1) rotate(-4deg);
  }
}

/* ---------- Connect ---------- */

.connect {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--s-xl) + var(--wave-h));
  background:
    radial-gradient(60% 80% at 85% 40%, oklch(88% 0.07 240) 0%, transparent 70%),
    linear-gradient(180deg, var(--c-ice) 0%, var(--c-ice-2) 100%);
}

.connect__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-xl);
  align-items: center;
}

.connect h2 {
  font-size: calc(var(--t-h2) * 1.05);
}

.connect__lead {
  max-width: 30rem;
  margin-top: var(--s-md);
  color: var(--c-ink-soft);
}

.connect__art {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
}

.connect__row {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2rem);
}

.tg {
  display: grid;
  place-items: center;
  width: clamp(5.5rem, 12vw, 8.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--c-white);
  background: radial-gradient(circle at 35% 30%, oklch(78% 0.13 230), var(--c-blue) 55%, var(--c-blue-deep));
  box-shadow: 0 20px 40px -18px var(--c-glow-blue), inset 0 2px 0 oklch(100% 0 0 / 0.35);
}

.tg svg {
  width: 52%;
  height: 52%;
  transform: translateX(-4%);
}

html.has-motion .tg {
  animation: float 5s var(--ease-in-out) infinite;
}

.swap {
  width: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--c-blue);
}

html.has-motion .swap svg {
  animation: swap-nudge 2.4s var(--ease-in-out) infinite;
}

.connect__row img {
  width: clamp(7rem, 15vw, 11rem);
  height: auto;
  filter: drop-shadow(0 16px 24px var(--c-shadow-strong));
}

html.has-motion .connect__row img {
  animation: float 5s var(--ease-in-out) 0.8s infinite;
}

.connect figcaption {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  color: var(--c-ink);
}

/* ---------- Risk password ---------- */

.risk {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-xl) calc(var(--s-xl) + var(--wave-h));
  color: var(--c-night-text);
  background:
    radial-gradient(50% 70% at 20% 90%, oklch(35% 0.14 262 / 0.6), transparent 70%),
    radial-gradient(40% 60% at 90% 30%, oklch(35% 0.16 295 / 0.5), transparent 70%),
    linear-gradient(180deg, var(--c-night), var(--c-night-2));
}

.risk__grid {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
}

.risk h2 {
  display: grid;
  gap: 0.2rem;
  font-size: calc(var(--t-h2) * 1.1);
  color: var(--c-white);
}

.risk h2 small {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--c-white);
}

.risk__copy > p:not(.eyebrow) {
  max-width: 32rem;
  margin-top: var(--s-md);
}

.risk__list {
  display: grid;
  gap: var(--s-md);
  margin-top: var(--s-lg);
}

.risk__list li {
  display: flex;
  align-items: center;
  gap: var(--s-md);
}

.risk__list b {
  display: block;
  font-weight: 700;
  color: var(--c-white);
}

.risk__list span:not(.orb) {
  font-size: var(--t-small);
}

.orb {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--c-night-line);
}

.orb svg {
  width: 1.4rem;
  height: 1.4rem;
}

.orb--gold {
  color: var(--c-gold);
  background: radial-gradient(circle, oklch(32% 0.08 262), var(--c-night));
  box-shadow: 0 0 18px -4px var(--c-glow-blue);
}

.orb--blue {
  color: var(--c-white);
  background: radial-gradient(circle, var(--c-blue), var(--c-blue-deep));
  box-shadow: 0 0 18px -4px var(--c-glow-blue);
}

.orb--violet {
  color: var(--c-white);
  background: radial-gradient(circle, var(--c-violet-soft), var(--c-violet));
  box-shadow: 0 0 18px -4px var(--c-glow-violet);
}

.risk__art {
  display: grid;
  gap: var(--s-sm);
}

.risk__tags,
.risk__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
  padding-inline: 6%;
}

.risk__tags {
  justify-items: center;
}

.tag {
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-white);
  white-space: nowrap;
}

.tag--blue {
  background: var(--c-blue);
  box-shadow: 0 0 18px -2px var(--c-glow-blue);
}

.tag--violet {
  background: var(--c-violet);
  box-shadow: 0 0 18px -2px var(--c-glow-violet);
}

.risk__art img {
  width: 100%;
  border-radius: var(--r-lg);
  -webkit-mask-image: radial-gradient(farthest-side, black 78%, transparent 100%);
  mask-image: radial-gradient(farthest-side, black 78%, transparent 100%);
}

.note {
  padding: var(--s-sm);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  line-height: 1.45;
  text-align: center;
  color: var(--c-white);
}

.note--blue {
  background: var(--c-note-blue);
  border: 1px solid oklch(60% 0.15 255 / 0.5);
}

.note--violet {
  background: var(--c-note-violet);
  border: 1px solid oklch(60% 0.18 295 / 0.5);
}

html.has-motion .tag {
  animation: glow-pulse 2.8s var(--ease-in-out) infinite;
}

html.has-motion .tag--violet {
  animation-delay: 1.4s;
}

/* ---------- Privacy ---------- */

.privacy {
  padding-block: var(--s-2xl);
  background: linear-gradient(180deg, var(--c-white), var(--c-ice));
}

.privacy__grid {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
}

.privacy__lead {
  max-width: 30rem;
  margin-top: var(--s-sm);
}

.privacy__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-lg) var(--s-md);
  margin-top: var(--s-xl);
}

.privacy__list li {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
}

.privacy__list b {
  margin-top: var(--s-xs);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--c-ink);
}

.privacy__list span:not(.tile) {
  font-size: var(--t-xs);
  color: var(--c-muted);
}

.privacy__art img {
  width: 100%;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side at 62% 50%, black 70%, transparent 100%);
  mask-image: radial-gradient(closest-side at 62% 50%, black 70%, transparent 100%);
}

html.has-motion .privacy__art img {
  animation: float 7s var(--ease-in-out) infinite;
}

/* ---------- Uses ---------- */

.uses {
  padding-block: var(--s-2xl);
  background: var(--c-ice);
}

.uses h2 {
  margin-bottom: var(--s-lg);
}

.use-grid {
  display: grid;
  gap: var(--s-md);
}

.use {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-sm);
  overflow: hidden;
  padding: var(--s-sm) var(--s-md) 0 var(--s-sm);
  background: var(--c-card);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 28px -22px var(--c-shadow-strong);
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

.use img {
  align-self: end;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 20%;
  mix-blend-mode: multiply;
  transition: transform var(--dur-long) var(--ease-out);
}

.use b {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-ink);
}

.use span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--t-xs);
  color: var(--c-muted);
}

@media (hover: hover) and (pointer: fine) {
  .use:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 36px -22px var(--c-shadow-strong);
  }

  .use:hover img {
    transform: scale(1.06);
  }
}

/* ---------- Future ---------- */

.future {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-2xl);
  background:
    radial-gradient(50% 70% at 55% 50%, oklch(90% 0.05 285) 0%, transparent 70%),
    linear-gradient(180deg, var(--c-ice), var(--c-lilac));
}

.future__grid {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
}

.future__lead {
  max-width: 30rem;
  margin-top: var(--s-sm);
}

.mini {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-top: var(--s-lg);
}

.mini li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  border-radius: var(--r-sm);
  background: var(--c-white);
  border: 1px solid var(--c-card-line);
  box-shadow: 0 8px 18px -16px var(--c-shadow-strong);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-ink);
  white-space: nowrap;
}

.future__art {
  justify-self: center;
  width: min(100%, 22rem);
}

.future__art img {
  width: 100%;
  -webkit-mask-image: radial-gradient(closest-side, black 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, black 72%, transparent 100%);
}

html.has-motion .future__art img {
  animation: float 5.5s var(--ease-in-out) infinite;
}

.future__cards {
  display: grid;
  gap: var(--s-sm);
}

.future__cards li {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  background: var(--c-card);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 26px -22px var(--c-shadow-strong);
  transition: transform var(--dur-short) var(--ease-out);
}

.future__cards b {
  display: block;
  font-size: var(--t-small);
  font-weight: 800;
  color: var(--c-ink);
}

.future__cards span:not(.tile) {
  display: block;
  font-size: var(--t-xs);
  color: var(--c-muted);
}

@media (hover: hover) and (pointer: fine) {
  .future__cards li:hover {
    transform: translateX(-4px);
  }
}

/* ---------- CTA footer ---------- */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--s-xl) + var(--wave-h)) var(--s-2xl);
  color: var(--c-white);
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, oklch(30% 0.12 262 / 0.85) 0%, oklch(38% 0.14 258 / 0.55) 45%, transparent 75%);
}

.cta__grid {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
}

.cta__brand {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cta__brand img {
  width: clamp(4rem, 7vw, 5.5rem);
  height: auto;
}

.cta h2 {
  margin-top: var(--s-sm);
  color: var(--c-white);
  font-size: calc(var(--t-h2) * 0.95);
}

.cta__copy > p {
  margin-top: var(--s-xs);
  color: var(--c-hero-text);
}

.cta .stores {
  margin-top: var(--s-lg);
}

.qr {
  justify-self: start;
  display: grid;
  justify-items: center;
  gap: var(--s-xs);
}

.qr img {
  width: 10rem;
  padding: var(--s-xs);
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 18px 40px -20px oklch(10% 0.05 262 / 0.7);
}

.qr figcaption {
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  background: oklch(20% 0.07 262 / 0.6);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}

html.has-motion .qr img {
  animation: float 6s var(--ease-in-out) infinite;
}

/* ---------- Reveal ---------- */

html.has-motion .rise {
  opacity: 0;
  transform: translateY(16px);
}

html.has-motion .rise.is-in {
  animation: rise 650ms var(--ease-out) forwards;
}

html.has-motion .feat-grid .rise.is-in:nth-child(2),
html.has-motion .use-grid .rise.is-in:nth-child(2),
html.has-motion .privacy__list .rise.is-in:nth-child(2),
html.has-motion .future__cards .rise.is-in:nth-child(2) { animation-delay: 70ms; }
html.has-motion .feat-grid .rise.is-in:nth-child(3),
html.has-motion .use-grid .rise.is-in:nth-child(3),
html.has-motion .privacy__list .rise.is-in:nth-child(3),
html.has-motion .future__cards .rise.is-in:nth-child(3) { animation-delay: 140ms; }
html.has-motion .feat-grid .rise.is-in:nth-child(4),
html.has-motion .use-grid .rise.is-in:nth-child(4),
html.has-motion .privacy__list .rise.is-in:nth-child(4) { animation-delay: 210ms; }
html.has-motion .feat-grid .rise.is-in:nth-child(5) { animation-delay: 280ms; }
html.has-motion .feat-grid .rise.is-in:nth-child(6) { animation-delay: 350ms; }
html.has-motion .feat-grid .rise.is-in:nth-child(7) { animation-delay: 420ms; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes sheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes wave-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2.5%) scaleX(1.05); }
}

@keyframes swap-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes glow-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Support handoff ---------- */

.support-fab {
  position: fixed;
  z-index: 45;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--c-white);
  background: linear-gradient(180deg, var(--c-blue), var(--c-blue-deep));
  box-shadow: 0 12px 24px -10px var(--c-glow-blue);
  cursor: pointer;
}

.support-fab svg {
  width: 1.45rem;
  height: 1.45rem;
}

.support-fab:hover {
  transform: translateY(-2px);
}

.support-fab[aria-expanded="true"] {
  transform: none;
}

.support {
  position: fixed;
  z-index: 46;
  right: 1.25rem;
  bottom: 5.6rem;
  width: min(24rem, calc(100vw - 2rem));
}

.support__card {
  display: grid;
  gap: var(--s-md);
  padding: var(--s-lg);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: 0 24px 50px -24px var(--c-shadow-strong);
}

html.has-motion .support:not([hidden]) .support__card {
  animation: pop-in 220ms var(--ease-out);
}

.support__head {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
}

.support__head img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.support__head b {
  display: block;
  color: var(--c-blue-deep);
  font-size: 1rem;
  line-height: 1.2;
}

.support__head span {
  display: block;
  color: var(--c-muted);
  font-size: var(--t-xs);
  font-weight: 600;
}

.support__x {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
}

.support__x svg {
  width: 1rem;
  height: 1rem;
}

.support__x:hover {
  background: var(--c-ice);
  color: var(--c-ink);
}

.support__ask,
.support__done {
  display: grid;
  gap: var(--s-sm);
}

.support__ask[hidden],
.support__done[hidden] {
  display: none;
}

.support__lead {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: var(--t-small);
  line-height: 1.45;
}

.support__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
}

.support__chips button {
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.75rem;
  background: var(--c-ice);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
}

.support__chips button[aria-pressed="true"] {
  border-color: transparent;
  color: var(--c-white);
  background: linear-gradient(180deg, var(--c-blue), var(--c-blue-deep));
}

.support__field textarea {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-md);
  padding: var(--s-sm) var(--s-md);
  background: var(--c-paper);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-small);
}

.support__field textarea:focus-visible,
.support__chips button:focus-visible,
.support-fab:focus-visible,
.support__x:focus-visible,
.support__go:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.support__go {
  width: 100%;
}

.support__go.is-off {
  opacity: 0.45;
  box-shadow: none;
  pointer-events: none;
}

.support__done {
  justify-items: center;
  text-align: center;
  padding-block: var(--s-sm);
}

.support__nick {
  margin: 0;
  color: var(--c-blue-deep);
  font-size: 1.15rem;
  font-weight: 800;
}

/* ---------- Responsive ---------- */

@media (max-width: 26rem) {
  .top__brand span {
    display: none;
  }

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

@media (min-width: 40rem) {
  .feat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

@media (min-width: 60rem) {
  .top__links {
    display: flex;
  }

  .lang {
    margin-inline-start: 0;
  }

  .hero__inner {
    min-height: min(44rem, calc(100vh - var(--top-h)));
    align-content: center;
    padding-block: var(--s-2xl) var(--s-3xl);
  }

  .hero__inner > * {
    max-width: 36rem;
  }

  .hero__inner > .stores {
    max-width: 36rem;
  }

  .head--split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

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

  .connect__grid,
  .privacy__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .risk__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

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

  .future__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.75fr) minmax(0, 0.95fr);
  }

  .cta__grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .qr {
    justify-self: center;
    margin-inline-end: 12%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.has-motion .rise,
  html.has-motion .rise.is-in {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .wave__back,
  .wave__mid,
  .hero__logo,
  .tg,
  .swap svg,
  .connect__row img,
  .privacy__art img,
  .future__art img,
  .qr img,
  .tag,
  .store:hover::before,
  .lang__menu {
    animation: none !important;
  }

  .store,
  .store svg,
  .pill,
  .feat,
  .tile,
  .use,
  .use img,
  .future__cards li,
  .top__links a::after {
    transition: none;
  }

  .store:hover,
  .pill:hover,
  .feat:hover,
  .use:hover,
  .use:hover img,
  .future__cards li:hover {
    transform: none;
  }
}