/* Wrisper — site styles.
   One committed dark look in the app icon's violet, with the watch drawn in
   CSS rather than shipped as a picture. No web fonts, no scripts and no
   third-party requests: the site keeps the same promise as the app, which is
   that nothing about you goes anywhere. */

:root {
  --bg: #0b0918;
  --bg-raised: #141029;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-hi: rgba(255, 255, 255, 0.075);
  --border: rgba(255, 255, 255, 0.09);
  --border-hi: rgba(255, 255, 255, 0.17);
  --text: #f2f0ff;
  --muted: #aca6d0;
  --faint: #8882ad;
  /* The icon's gradient, light end to deep end. */
  --violet: #a594ff;
  --accent: #7c6df4;
  --indigo: #462ed1;
  --radius: 20px;
  --max: 1080px;
  /* One easing and one duration everywhere, so hovers feel like one object. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 180ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #c5baff; }

::selection { background: rgba(124, 109, 244, 0.4); color: #fff; }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 9, 24, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none; font-weight: 650; font-size: 18px;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.site-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.site-nav a { color: var(--muted); text-decoration: none; transition: color var(--fast) var(--ease); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav .lang {
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 13px; letter-spacing: 0.04em;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.site-nav .lang:hover { border-color: var(--violet); color: var(--violet); }

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

.hero {
  position: relative; overflow: hidden;
  /* The hero owns its own vertical rhythm: the generic section padding below
     would stack on top of the wrap's. */
  padding: 0; border-top: 0;
  background:
    radial-gradient(55% 60% at 76% 42%, rgba(124, 109, 244, 0.30), transparent 70%),
    radial-gradient(45% 45% at 8% 0%, rgba(70, 46, 209, 0.28), transparent 70%);
}
.hero .wrap {
  display: grid; gap: 48px; align-items: center;
  grid-template-columns: 1.1fr 0.9fr;
  padding-top: 88px; padding-bottom: 96px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--violet);
}
h1 {
  font-size: clamp(40px, 5.6vw, 64px); line-height: 1.04;
  letter-spacing: -0.025em; margin: 14px 0 20px; font-weight: 750;
  text-wrap: balance;
}
h1 .accent {
  background: linear-gradient(100deg, #c9bfff, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede {
  font-size: clamp(18px, 2vw, 21px); color: var(--muted);
  max-width: 32em; margin: 0 0 32px; text-wrap: pretty;
}

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 15px; font-weight: 550;
}
.pill .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--violet);
  box-shadow: 0 0 0 4px rgba(165, 148, 255, 0.2);
  animation: breathe 3.2s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 4px rgba(165, 148, 255, 0.2); }
  50% { box-shadow: 0 0 0 7px rgba(165, 148, 255, 0.06); }
}

/* The watch. Drawn in CSS so the text on its screen stays sharp, can be
   translated, and weighs nothing. The band runs off the top and bottom of the
   hero, as it does off the edges of the app icon. */
.stage { position: relative; display: grid; place-items: center; padding: 8px 0; }
.stage::before {
  content: ""; position: absolute; left: 50%; top: -200px; bottom: -200px;
  width: 196px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(165, 148, 255, 0.05), rgba(165, 148, 255, 0.17) 50%, rgba(165, 148, 255, 0.05));
  border-inline: 1px solid rgba(255, 255, 255, 0.05);
}
.watch {
  position: relative; width: 276px; aspect-ratio: 416 / 496;
  padding: 11px; border-radius: 68px;
  background: linear-gradient(150deg, #4a4470, #1a1631 55%, #0f0c20);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 40px 90px -20px rgba(0, 0, 0, 0.85),
    0 0 120px -10px rgba(124, 109, 244, 0.45);
}
/* Digital crown. */
.watch::after {
  content: ""; position: absolute; right: -9px; top: 25%;
  width: 12px; height: 48px; border-radius: 3px 6px 6px 3px;
  background: linear-gradient(90deg, #211c3b, #5d5687 60%, #3a3458);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.watch-screen {
  height: 100%; border-radius: 57px; background: #000; overflow: hidden;
  padding: 16px 17px 0;
  display: flex; flex-direction: column; gap: 10px;
  /* The watch has its own type scale, whatever the page around it does. */
  font-size: 16px; line-height: 1.22; color: #fff;
}
.watch-bar { display: flex; align-items: flex-start; justify-content: space-between; }
.watch-bar .round {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.watch-bar .round svg { width: 20px; height: 20px; }
.watch-bar .clock { text-align: center; font-weight: 600; font-size: 16px; line-height: 1.15; }
.watch-bar .clock span { display: block; color: #8a7cff; }
.watch-q { margin: 0; color: #9a9aa2; font-size: 14px; }
.watch-a { margin: 0; animation: answer 900ms var(--ease) 500ms both; }
@keyframes answer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.watch-ask {
  margin-top: 2px; flex: none; height: 54px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #7c6df4; font-weight: 650; font-size: 19px;
}
.watch-ask svg { width: 20px; height: 20px; }

/* ---------- Sections ---------- */

section { padding: 96px 0; }
section + section { border-top: 1px solid var(--border); }
/* The sticky header is 64px tall, so anchored sections need room above them
   or their heading lands underneath it. */
section[id] { scroll-margin-top: 64px; }
.section-head { max-width: 40em; margin-bottom: 48px; }
h2 {
  font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1;
  letter-spacing: -0.02em; margin: 10px 0 16px; text-wrap: balance;
}
.section-head p { color: var(--muted); font-size: 19px; margin: 0; text-wrap: pretty; }

.why { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; letter-spacing: -0.01em;
  max-width: 30em; margin: 0; font-weight: 500; text-wrap: pretty; }
.why em { font-style: normal; color: var(--violet); }

/* How it works */
.steps { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.step { position: relative; padding: 28px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border); }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  margin-bottom: 16px; font-weight: 700; font-size: 15px;
  background: linear-gradient(140deg, var(--violet), var(--accent)); color: #120c33;
  box-shadow: 0 0 0 5px rgba(124, 109, 244, 0.14);
}
.step h3 { margin: 0 0 6px; font-size: 19px; }
.step p { margin: 0; color: var(--muted); text-wrap: pretty; }
.note { margin: 24px 0 0; color: var(--faint); font-size: 15px; max-width: 78ch; }

/* Feature cards */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.card {
  position: relative;
  /* A hair of light from the top edge, so a card looks lit rather than filled. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}
.card:hover {
  border-color: var(--border-hi); transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
}
.card h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--muted); text-wrap: pretty; }
.card .icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: rgba(124, 109, 244, 0.16); color: var(--violet);
  box-shadow: inset 0 0 0 1px rgba(165, 148, 255, 0.26);
}
.card .icon svg { width: 22px; height: 22px; }

/* Good to know: two plain lists side by side. */
.facts { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.facts .panel {
  padding: 28px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
}
.facts h3 { margin: 0 0 14px; font-size: 19px; }
.facts ul { margin: 0; padding-left: 20px; color: var(--muted); }
.facts li { margin: 8px 0; text-wrap: pretty; }
.facts li::marker { color: var(--accent); }

/* Privacy band */
.privacy-band {
  background: linear-gradient(180deg, var(--bg-raised), var(--bg));
  border-top-color: var(--border-hi);
}
.privacy-band .wrap { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: center; }
.privacy-band p { color: var(--muted); font-size: 19px; margin: 0; text-wrap: pretty; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; }
.checks li::before {
  content: "✓"; flex: none;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  margin-top: 2px; font-size: 13px; font-weight: 700;
  background: rgba(124, 109, 244, 0.2); color: var(--violet);
  box-shadow: inset 0 0 0 1px rgba(165, 148, 255, 0.3);
}

/* ---------- Prose pages (privacy, support) ---------- */

.prose { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
.prose h1 { font-size: clamp(34px, 4.5vw, 48px); margin-bottom: 8px; }
.prose .updated { color: var(--faint); margin: 0 0 40px; font-size: 15px; }
.prose h2 { font-size: 24px; margin: 48px 0 12px; }
.prose p, .prose li { color: #d9d5f0; text-wrap: pretty; }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--accent); }
.summary {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 20px 24px; margin: 0 0 8px; font-size: 18px;
}
.summary p { margin: 0; color: var(--text); }

details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 22px; margin: 12px 0;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
details:hover { border-color: var(--border-hi); }
details[open] { background: var(--surface-hi); border-color: var(--border-hi); }
details summary {
  cursor: pointer; font-weight: 600; font-size: 18px; list-style: none;
  /* Room for the marker, which is absolutely placed rather than floated so a
     two-line question cannot wrap underneath it. */
  position: relative; padding-right: 28px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; position: absolute; right: 0; top: -1px;
  color: var(--violet); font-weight: 400; font-size: 20px; line-height: 1;
}
details[open] summary::after { content: "–"; }
details p { margin: 12px 0 0; }

.contact-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px; margin: 8px 0 32px;
}
.contact-card p { margin: 0; flex: 1 1 18em; }
.button {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 650; text-decoration: none;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}
.button:hover {
  background: #8d80f8; color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(124, 109, 244, 0.8);
}
.button:active { transform: translateY(0); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--border); padding: 36px 0 48px; color: var(--faint); font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; transition: color var(--fast) var(--ease); }
.site-footer a:hover { color: var(--text); }

/* ---------- Small screens ---------- */

@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero .wrap, .privacy-band .wrap, .facts { grid-template-columns: 1fr; }
  .hero .wrap { padding-top: 48px; padding-bottom: 72px; gap: 56px; }
  .grid, .steps { grid-template-columns: 1fr; }
  section { padding: 72px 0; }
  .prose { padding-top: 56px; }
}

@media (max-width: 480px) {
  .pill { font-size: 14px; padding: 10px 16px; }
  .site-nav { gap: 16px; font-size: 14px; }
  .site-nav .hide-sm { display: none; }
  .checks li { font-size: 17px; }
  .contact-card { padding: 22px; }
  .watch { width: 248px; }
  .watch-screen { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}