/* CrowX website. The app's night-sky look: near-black indigo, one hot
   gradient from indigo through violet into pink kept for what matters, and
   white type. Phones are drawn in CSS 3D (see .phone). */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0a0a1d;
  --bg-deep: #060613;
  --surface: #14142b;
  --surface-high: #1b1b38;
  --edge: rgba(255, 255, 255, 0.08);
  --edge-strong: rgba(255, 255, 255, 0.16);
  --indigo: #5b5bf7;
  --violet: #8a4dff;
  --pink: #e445f0;
  --blue: #4c7dff;
  --gold: #ffc542;
  --online: #2bd46f;
  --ink: #ffffff;
  --ink-soft: #cfcfe6;
  --ink-muted: #9393b5;
  --ink-faint: #5e5e80;
  --brand: linear-gradient(90deg, #5b5bf7 0%, #8a4dff 55%, #e445f0 100%);
  --mark: linear-gradient(135deg, #4c7dff 10%, #8a4dff 45%, #e445f0 80%);
  --radius: 22px;
  --page: min(1180px, calc(100vw - 40px));
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
main { overflow-x: clip; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #000; padding: 10px 14px; border-radius: 10px;
  text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

/* ── The sky behind everything ─────────────────────────────────────────── */

.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% 8%, rgba(91, 91, 247, 0.28), transparent 70%),
    radial-gradient(50vw 50vh at 92% 22%, rgba(228, 69, 240, 0.18), transparent 70%),
    radial-gradient(70vw 60vh at 60% 100%, rgba(138, 77, 255, 0.2), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── Type and common pieces ────────────────────────────────────────────── */

.wrap { width: var(--page); margin: 0 auto; }
section { position: relative; padding: 110px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow::before {
  content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--brand);
}
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.05; }
h1 { font-size: clamp(44px, 7vw, 88px); font-weight: 900; }
h2 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 850; margin-top: 14px; }
h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); max-width: 560px; }
.grad {
  background: var(--brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.muted { color: var(--ink-muted); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 0; border-radius: 999px; padding: 15px 24px; font-weight: 800; font-size: 16px;
  text-decoration: none; transition: transform 0.25s var(--spring), box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-brand {
  background: var(--brand); color: #fff;
  box-shadow: 0 10px 30px -8px rgba(138, 77, 255, 0.7), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.btn-ghost { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--edge-strong); }
.btn svg { width: 18px; height: 18px; }

.store {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--edge-strong); text-decoration: none;
}
.store svg { width: 24px; height: 24px; flex: none; }
.store small { display: block; font-size: 11px; color: var(--ink-muted); font-weight: 600; line-height: 1.1; }
.store b { display: block; font-size: 16px; line-height: 1.2; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; }

/* Things that come in as they are scrolled to. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── Header ────────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  background: rgba(6, 6, 19, 0.55);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s;
}
.top.scrolled { border-color: var(--edge); background: rgba(6, 6, 19, 0.78); }
.top .wrap { display: flex; align-items: center; gap: 22px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 21px; letter-spacing: -0.02em; }
.logo svg { width: 34px; height: 34px; }
.top nav { display: flex; gap: 4px; margin-left: auto; }
.top nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 650; font-size: 15px;
  padding: 8px 12px; border-radius: 10px; transition: background 0.2s, color 0.2s;
}
.top nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.lang {
  text-decoration: none; font-weight: 800; font-size: 13px; padding: 7px 11px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--edge-strong); color: var(--ink-soft);
}
.soon-pill {
  font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 999px;
  background: var(--brand); white-space: nowrap;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero { padding: 54px 0 40px; min-height: calc(100vh - 68px); display: flex; align-items: center; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 30px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--edge-strong);
  font-size: 14px; font-weight: 700; color: var(--ink-soft);
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 4px rgba(43, 212, 111, 0.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(43, 212, 111, 0); } }
.hero h1 { margin: 22px 0 22px; }
.hero h1 span { display: block; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 26px; }
.stage {
  position: relative; height: 700px; perspective: 1800px;
  display: flex; align-items: center; justify-content: center;
}
.stage .phone { position: absolute; }
.stage .p-main { --w: 290px; z-index: 3; }
.stage .p-left { --w: 236px; transform: translate(-190px, 40px); z-index: 1; }
.stage .p-right { --w: 236px; transform: translate(190px, 60px); z-index: 2; }
.stage .p-left .phone-body { --base-ry: 24deg; --base-rz: -6deg; }
.stage .p-right .phone-body { --base-ry: -24deg; --base-rz: 6deg; }
.float-wrap { width: 100%; height: 100%; transform-style: preserve-3d; }
.stage .float-wrap { animation: float 7s ease-in-out infinite; }
.stage .p-left .float-wrap { animation-delay: -2.3s; }
.stage .p-right .float-wrap { animation-delay: -4.6s; }
@keyframes float { 50% { transform: translateY(-16px); } }
.hint {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; color: var(--ink-muted); display: flex; gap: 8px; align-items: center;
  white-space: nowrap;
}
.hint svg { width: 16px; height: 16px; }

/* Bubbles floating round the phones, like messages in the air. */
.air {
  position: absolute; z-index: 4; padding: 10px 14px; border-radius: 18px; font-weight: 700; font-size: 14px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
  white-space: nowrap; animation: float 6s ease-in-out infinite;
}
.air.theirs { background: linear-gradient(110deg, #3b34a8, #a24bb3); border-bottom-left-radius: 6px; }
.air.mine { background: var(--brand); border-bottom-right-radius: 6px; }
.air.a1 { left: 2%; top: 14%; animation-delay: -1s; }
.air.a2 { right: 0; top: 30%; animation-delay: -3s; }
.air.a3 { left: 8%; bottom: 18%; animation-delay: -5s; }

/* The real 3D phone (hero3d.js), in place of the CSS one once it is ready. */
.stage canvas.hero3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; transition: opacity 0.8s var(--ease); cursor: grab; touch-action: pan-y; }
.stage canvas.hero3d.dragging { cursor: grabbing; }
.stage.has3d canvas.hero3d { opacity: 1; }
.stage .p-main { transition: opacity 0.6s var(--ease); }
.stage.has3d .p-main { opacity: 0; pointer-events: none; }

/* ── The 3D phone ──────────────────────────────────────────────────────── */
/* As a real phone is built: a front glass (the screen in a thin black
   border and a metal rim), a back glass, and between them a rounded metal
   band made of slices (see build.mjs), with the buttons standing out of
   it. About 8 mm thick on 71 mm wide. --rx/--ry come from the pointer,
   --spin from dragging. */

.phone {
  --w: 280px;
  --rim: calc(var(--w) * 0.011);
  --pad: calc(var(--w) * 0.03);
  --h: calc((var(--w) - 2 * var(--pad)) * 2.168 + 2 * var(--pad));
  --r: calc(var(--w) * 0.16);
  --d: calc(var(--w) * 0.105);
  position: relative; width: var(--w); height: var(--h); flex: none;
  perspective: 1700px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.phone.tilt .phone-body { --base-rx: 8deg; --base-ry: -14deg; --base-rz: 3deg; }
.tile:hover .phone.tilt .phone-body { --base-ry: -4deg; --base-rz: 0deg; }
.cta .wrap > svg { width: 84px; height: 84px; display: block; margin: 0 auto 22px; filter: drop-shadow(0 10px 30px rgba(138, 77, 255, 0.5)); }
/* Its shadow on the floor. */
.phone::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -54px; height: 46px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.2) 60%, transparent);
  filter: blur(8px); z-index: -1;
}
.phone-body {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--base-rx, 6deg) + var(--rx, 0deg)))
    rotateY(calc(var(--base-ry, -10deg) + var(--ry, 0deg) + var(--spin, 0deg)))
    rotateZ(var(--base-rz, 0deg));
  transition: transform 0.6s var(--ease);
  will-change: transform;
}
.phone.dragging .phone-body, .phone.live .phone-body { transition: none; }
.phone[data-spin] { cursor: grab; }
.phone.dragging { cursor: grabbing; }
.phone-front, .phone-back, .phone-edge { position: absolute; inset: 0; border-radius: var(--r); }

/* The band: titanium, lighter where it bulges out, with the light running
   along it. */
.phone-edge {
  inset: var(--in, 0);
  border-radius: calc(var(--r) - var(--in, 0px));
  transform: translateZ(var(--z));
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.32), transparent 22%, transparent 48%, rgba(255, 255, 255, 0.18) 62%, transparent 78%, rgba(255, 255, 255, 0.26)),
    hsl(248 9% var(--l, 30%));
}
.phone-key {
  position: absolute; width: calc(var(--w) * 0.012); border-radius: 2px;
  transform: translateZ(var(--z));
  background: linear-gradient(90deg, #2a2a33, #8b8b98 45%, #3a3a46);
}
.phone-key.l { left: calc(var(--w) * -0.009); }
.phone-key.r { right: calc(var(--w) * -0.009); }

.phone-front {
  transform: translateZ(calc(var(--d) / 2));
  padding: var(--pad);
  border: var(--rim) solid transparent;
  background:
    linear-gradient(#050507, #050507) padding-box,
    linear-gradient(140deg, #b9b9c6, #4a4a57 22%, #8d8d9b 48%, #33333d 72%, #a3a3b1) border-box;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.phone-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--r) - var(--pad) - var(--rim)); background: var(--bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9);
}
.phone-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.phone-screen img.off { opacity: 0; transform: scale(1.04); }
/* Light on the glass, moving as the phone turns. */
.phone-screen .glare {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.11) 42%, rgba(255, 255, 255, 0.03) 50%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%);
  background-size: 260% 100%, 100% 100%;
  background-position: calc(50% - var(--ry, 0deg) / 1deg * 2.4%) 0, 0 0;
  mix-blend-mode: screen;
}
.phone-island {
  position: absolute; z-index: 7; top: calc(var(--pad) + var(--w) * 0.026); left: 50%;
  width: 31%; height: calc(var(--w) * 0.088); transform: translateX(-50%);
  background: #000; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.phone-island::after {
  content: ""; position: absolute; right: 16%; top: 50%; width: 22%; aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2b3350, #07080d 60%);
}

/* The back: frosted glass in deep purple, the mark pressed into it. */
.phone-back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  transform-style: preserve-3d;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: var(--rim) solid transparent;
  background:
    radial-gradient(130% 70% at 85% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(165deg, #3a3357 0%, #2a2442 40%, #221d36 70%, #2f2749 100%) padding-box,
    linear-gradient(140deg, #b9b9c6, #4a4a57 22%, #8d8d9b 48%, #33333d 72%, #a3a3b1) border-box;
  box-shadow: inset 0 0 calc(var(--w) * 0.08) rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; justify-content: center;
}
.phone-back .mark {
  width: 22%; opacity: 0.55; mix-blend-mode: overlay;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.4));
}
.phone-back .mark { color: #e9e6ff; }
/* The camera island, raised from the glass. */
.phone-back .cams {
  position: absolute; top: 3.2%; left: 6%; width: 40%; aspect-ratio: 1; border-radius: 28%;
  transform: translateZ(calc(var(--w) * 0.008));
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.2), transparent 50%),
    linear-gradient(160deg, #453d66, #2a2442);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.22);
}
.phone-back .lens {
  position: absolute; width: 40%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgba(140, 170, 255, 0.55) 0 7%, transparent 9%),
    radial-gradient(circle at 50% 50%, #0a0c18 0 34%, #1b2140 42%, #070810 54%, #22222c 56%, #0c0c12 64%, #8a8a98 70%, #3a3a46 80%, #9a9aa8 90%, #2c2c36 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.phone-back .lens.a { left: 7%; top: 7%; }
.phone-back .lens.b { left: 7%; bottom: 7%; }
.phone-back .lens.c { right: 7%; top: 30%; }
.phone-back .flash {
  position: absolute; right: 16%; top: 9%; width: 14%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff9e6, #e8d9a8 55%, #8a7a50);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.phone-back .mic {
  position: absolute; right: 20%; bottom: 12%; width: 6%; aspect-ratio: 1; border-radius: 50%;
  background: #0b0a12; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8);
}
/* A back that is another screen: the look turned round. */
.phone-back.screen-back {
  padding: var(--pad); display: block;
  background: linear-gradient(#050507, #050507) padding-box, linear-gradient(140deg, #b9b9c6, #4a4a57 22%, #8d8d9b 48%, #33333d 72%, #a3a3b1) border-box;
  box-shadow: none;
}

/* ── Facts ─────────────────────────────────────────────────────────────── */

.facts { padding: 30px 0 40px; }
.facts .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.fact {
  padding: 26px 24px; border-radius: var(--radius); background: rgba(20, 20, 43, 0.7);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.fact b { display: block; font-size: clamp(38px, 4.5vw, 54px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.fact span { color: var(--ink-muted); font-weight: 650; }

/* ── How it works ──────────────────────────────────────────────────────── */

.how .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 40px; }
.how .sticky { position: sticky; top: 110px; height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; }
.how .sticky .phone { --w: 300px; }
.steps { display: flex; flex-direction: column; gap: 22vh; padding: 12vh 0 22vh; }
.step {
  padding: 30px; border-radius: var(--radius); background: rgba(20, 20, 43, 0.6);
  box-shadow: inset 0 0 0 1px var(--edge); transition: background 0.4s, box-shadow 0.4s, transform 0.5s var(--ease);
  opacity: 0.55;
}
.step.on { opacity: 1; background: rgba(27, 27, 56, 0.9); box-shadow: inset 0 0 0 1px var(--edge-strong), 0 30px 60px -30px rgba(138, 77, 255, 0.5); transform: translateX(-6px); }
.step .num {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  font-weight: 900; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--edge-strong);
}
.step.on .num { background: var(--brand); box-shadow: none; }
.step p { color: var(--ink-soft); margin: 10px 0 0; }
.step .shot { display: none; }

/* ── The demo ──────────────────────────────────────────────────────────── */

.demo .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; margin-top: 10px; }
.demo .controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 28px; }
.seg {
  display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--edge-strong);
}
.seg button {
  border: 0; background: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 750; font-size: 14px; color: var(--ink-soft);
}
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.demo .stage-demo { display: flex; justify-content: center; perspective: 1800px; }
.demo .phone { --w: 340px; }
.demo .phone .phone-body { --base-ry: -8deg; --base-rx: 4deg; }

/* The app inside the demo phone. */
.app {
  --a-bg: #0a0a1d; --a-surface: #14142b; --a-high: #1b1b38; --a-edge: rgba(255, 255, 255, 0.09);
  --a-mine: linear-gradient(110deg, #5b5bf7, #8a4dff 55%, #e445f0);
  --a-theirs: linear-gradient(110deg, #3b34a8, #a24bb3);
  --a-mine-ink: #fff; --a-accent: var(--brand);
  position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 14px;
  background:
    radial-gradient(80% 50% at 10% 0%, rgba(91, 91, 247, 0.35), transparent 70%),
    radial-gradient(70% 40% at 100% 100%, rgba(228, 69, 240, 0.18), transparent 70%),
    var(--a-bg);
  transition: background 0.5s;
  text-align: left;
}
.app.neum {
  --a-bg: #060606; --a-surface: #111; --a-high: #1a1a1a; --a-edge: rgba(255, 255, 255, 0.14);
  --a-mine: linear-gradient(135deg, #fff, #f2f2f2 55%, #dcdcdc);
  --a-theirs: linear-gradient(110deg, #2a2a2a, #3a3a3a);
  --a-mine-ink: #050505; --a-accent: linear-gradient(135deg, #fff, #dcdcdc);
  background: radial-gradient(80% 50% at 10% 0%, rgba(255, 255, 255, 0.07), transparent 70%), var(--a-bg);
}
.app-status { height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0; font-weight: 800; font-size: 14px; }
.app-status .icons { display: flex; gap: 5px; align-items: center; }
.app-status svg { width: 15px; height: 15px; }
.app-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; }
.app-head .back { width: 22px; height: 22px; opacity: 0.85; }
.face {
  width: 44px; height: 44px; border-radius: 50%; flex: none; position: relative;
  background: #1c1c36; overflow: hidden; box-shadow: 0 0 0 2px #0a0a1d, 0 0 0 4px #8a4dff;
}
.app.neum .face { box-shadow: 0 0 0 2px #060606, 0 0 0 4px #fff; }
.face img { width: 100%; height: 100%; }
.app-head .who { flex: 1; min-width: 0; }
.app-head .who b { display: flex; align-items: center; gap: 5px; font-size: 16px; color: var(--gold); }
.app.neum .app-head .who b { color: #fff; }
.app-head .who b svg { width: 15px; height: 15px; }
.app-head .who span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--online); font-weight: 650; }
.app-head .who span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--online); }
.timer {
  display: inline-flex; gap: 6px; align-items: center; padding: 6px 11px; border-radius: 999px; font-weight: 800; font-size: 13px;
  box-shadow: inset 0 0 0 1px var(--a-edge); background: rgba(255, 255, 255, 0.04); font-variant-numeric: tabular-nums;
}
.timer svg { width: 14px; height: 14px; }
.app-common {
  flex: none; display: flex; gap: 6px; align-items: center; padding: 8px 12px; font-size: 12px; font-weight: 750;
  background: rgba(138, 77, 255, 0.1); border-block: 1px solid var(--a-edge); color: var(--ink-soft); overflow: hidden;
}
.app.neum .app-common { background: rgba(255, 255, 255, 0.04); }
.app-common em { font-style: normal; padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--a-edge-strong, rgba(255, 255, 255, 0.2)); color: #fff; white-space: nowrap; }
.app-msgs {
  flex: 1; overflow-y: auto; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: none; scroll-behavior: smooth;
}
.app-msgs::-webkit-scrollbar { display: none; }
.kept {
  font-size: 11.5px; color: var(--ink-muted); padding: 9px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--a-edge); margin: auto 0 4px;
}
.msg {
  max-width: 78%; padding: 9px 13px 7px; border-radius: 18px; line-height: 1.35; font-weight: 520;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28); animation: pop 0.45s var(--spring) both; word-wrap: break-word;
}
.msg small { display: block; text-align: right; font-size: 10.5px; opacity: 0.75; margin-top: 2px; }
.msg.theirs { align-self: flex-start; background: var(--a-theirs); border-bottom-left-radius: 6px; transform-origin: 0 100%; }
.msg.mine { align-self: flex-end; background: var(--a-mine); color: var(--a-mine-ink); border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
@keyframes pop { from { opacity: 0; transform: scale(0.6) translateY(10px); } }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--a-theirs); animation: pop 0.3s var(--spring) both; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: 0.4; transform: none; } }

.card {
  align-self: stretch; margin: 4px 6px; padding: 14px; border-radius: 20px; background: var(--a-high);
  box-shadow: inset 0 0 0 1px var(--a-edge), 0 14px 30px -18px rgba(0, 0, 0, 0.8); animation: pop 0.5s var(--spring) both;
}
.card .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.card .tag svg { width: 14px; height: 14px; }
.card .q { font-weight: 800; font-size: 15px; margin: 8px 0 12px; line-height: 1.3; }
.card .emoji { font-size: 34px; letter-spacing: 6px; text-align: center; margin: 4px 0 12px; }
.opts { display: grid; gap: 8px; }
.opts.two { grid-template-columns: 1fr 1fr; }
.opt {
  cursor: pointer; border: 0; padding: 11px 10px; border-radius: 14px; font-weight: 750; font-size: 13.5px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--a-edge); transition: transform 0.2s var(--spring), background 0.2s;
  position: relative;
}
.opt:hover:not(:disabled) { transform: scale(1.03); background: rgba(255, 255, 255, 0.1); }
.opt:disabled { cursor: default; }
.opt.pick { background: var(--a-mine); color: var(--a-mine-ink); box-shadow: none; }
.opt.right { background: linear-gradient(110deg, #1f9d5c, #2bd46f); color: #fff; box-shadow: none; }
.opt.wrong { animation: shake 0.4s; opacity: 0.45; }
.opt .by { position: absolute; top: -8px; right: -6px; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #1c1c36; box-shadow: 0 0 0 2px var(--a-high); }
.opt.wait { animation: nudge 2.4s infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.card .result { margin-top: 10px; font-weight: 800; font-size: 13px; text-align: center; min-height: 18px; }

.app-replies { flex: none; display: flex; gap: 6px; padding: 4px 12px 6px; overflow-x: auto; scrollbar-width: none; }
.app-replies button {
  flex: none; cursor: pointer; border: 0; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--a-edge); animation: pop 0.4s var(--spring) both;
}
.app-replies button:hover { background: rgba(255, 255, 255, 0.12); }
.app-compose { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 26px; border-top: 1px solid var(--a-edge); }
.app-compose .box {
  flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 999px;
  color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--a-edge); background: rgba(255, 255, 255, 0.03); font-size: 13.5px;
}
.app-compose .round {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--a-edge); background: rgba(255, 255, 255, 0.04);
}
.app-compose .send { background: var(--a-accent); box-shadow: none; color: var(--a-mine-ink); }
.app-compose svg { width: 18px; height: 18px; }
.app-home { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 36%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.85); }

/* ── The island ────────────────────────────────────────────────────────── */
/* As in the app: a round drop falls, springs open into a pill, and closes
   back into the drop before it goes. Different people, different islands,
   one under another. */

.islands {
  position: absolute; z-index: 8; left: 0; right: 0; top: calc(var(--w, 340px) * 0.024);
  display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none;
}
.island {
  pointer-events: auto; background: #0a0a0e; color: #fff; border-radius: 999px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 14px 30px -10px rgba(0, 0, 0, 0.8);
  width: 36px; height: 36px; transform: translateY(-50px); opacity: 0;
  transition: width 0.55s var(--spring), height 0.45s var(--spring), border-radius 0.45s, transform 0.45s var(--spring), opacity 0.25s;
}
.island.drop { transform: none; opacity: 1; }
.island.open { width: calc(100% - 20px); height: var(--ih, 58px); border-radius: 24px; }
.island.close { width: 36px; height: 36px; border-radius: 999px; transition-duration: 0.25s; }
.island.gone { transform: translateY(-50px); opacity: 0; }
.island .in { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 9px; width: 100%; opacity: 0; transition: opacity 0.25s; white-space: nowrap; }
.island.open .in { opacity: 1; transition-delay: 0.18s; }
.island.close .in { opacity: 0; transition-delay: 0s; }
.island .face { width: 34px; height: 34px; box-shadow: none; }
.island .t { flex: 1; min-width: 0; line-height: 1.2; }
.island .t b { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.island .t span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.7); overflow: hidden; text-overflow: ellipsis; }
.island .go { border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; background: #fff; color: #000; }
.island .go.soft { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* An ask: its words in full, the buttons on a line of their own. */
.island.ask .in { flex-wrap: wrap; white-space: normal; }
.island.ask .t { flex: 1 1 calc(100% - 50px); }
.island.ask .acts { flex: 1 0 100%; display: flex; justify-content: flex-end; gap: 8px; }
.island .ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.island .ico svg { width: 18px; height: 18px; }
.island .count { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 9px; background: rgba(183, 155, 255, 0.2); color: #b79bff; }
.flag { width: 16px; height: 11px; border-radius: 2px; flex: none; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.3); }

.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 9; overflow: hidden; }
.confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; top: 40%; left: 50%; animation: burst 1.2s var(--ease) forwards; }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

/* ── Features ──────────────────────────────────────────────────────────── */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(240px, auto); gap: 16px; margin-top: 46px; }
.tile {
  position: relative; overflow: hidden; border-radius: 28px; padding: 30px;
  background: linear-gradient(180deg, rgba(27, 27, 56, 0.85), rgba(20, 20, 43, 0.85));
  box-shadow: inset 0 0 0 1px var(--edge); display: flex; flex-direction: column;
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.tile:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--edge-strong), 0 30px 60px -30px rgba(138, 77, 255, 0.45); }
.tile p { color: var(--ink-soft); margin: 10px 0 0; font-size: 15.5px; }
.tile .ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--edge-strong); }
.tile .ic svg { width: 22px; height: 22px; }
.t-games { grid-column: span 3; }
.t-voice { grid-column: span 3; }
.t-passport, .t-today, .t-store { grid-column: span 2; grid-row: span 2; }
.t-look { grid-column: span 3; grid-row: span 2; }
.t-notice { grid-column: span 3; grid-row: span 2; }
.tile .art { margin-top: auto; padding-top: 24px; display: flex; justify-content: center; }
.tile .art .phone { --w: 200px; }
.tile .art.crop { margin-bottom: -150px; }
.t-look .art .phone { --w: 230px; }
.t-look .art .phone .phone-body { --base-ry: 0deg; --base-rx: 0deg; transition: transform 1s var(--spring); }
.t-look.flipped .art .phone .phone-body { --spin: 180deg; }
.t-look .flip { margin-top: 16px; align-self: flex-start; }

/* Little game cards dealt across the games tile. */
.deal { position: relative; height: 150px; margin-top: auto; }
.deal span {
  position: absolute; bottom: 0; padding: 12px 16px; border-radius: 18px; font-weight: 800; font-size: 14px;
  background: var(--surface-high); box-shadow: inset 0 0 0 1px var(--edge-strong), 0 16px 30px -14px rgba(0, 0, 0, 0.8);
  transition: transform 0.6s var(--spring); white-space: nowrap;
}
.deal span:nth-child(1) { left: 0; transform: rotate(-8deg); }
.deal span:nth-child(2) { left: 22%; bottom: 46px; transform: rotate(5deg); background: linear-gradient(110deg, #3b34a8, #a24bb3); }
.deal span:nth-child(3) { left: 46%; transform: rotate(-3deg); }
.deal span:nth-child(4) { right: 0; bottom: 56px; transform: rotate(7deg); background: var(--brand); }
.t-games:hover .deal span:nth-child(1) { transform: rotate(-14deg) translate(-6px, -10px); }
.t-games:hover .deal span:nth-child(2) { transform: rotate(10deg) translateY(-14px); }
.t-games:hover .deal span:nth-child(3) { transform: rotate(-8deg) translateY(-8px); }
.t-games:hover .deal span:nth-child(4) { transform: rotate(12deg) translate(6px, -12px); }

/* A voice note playing. */
.wave { margin-top: auto; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 22px; background: var(--brand); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); align-self: flex-start; }
.wave .play { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #8a4dff; display: grid; place-items: center; }
.wave .play svg { width: 16px; height: 16px; }
.wave .bars { display: flex; align-items: center; gap: 3px; height: 34px; }
.wave .bars i { width: 3.5px; border-radius: 3px; background: rgba(255, 255, 255, 0.9); height: var(--h); animation: bar 1.1s ease-in-out infinite; animation-delay: var(--d); }
@keyframes bar { 50% { transform: scaleY(0.4); } }
.wave b { font-size: 13px; font-variant-numeric: tabular-nums; }

/* The notices tile: islands from three people, again and again. */
.t-notice .sky-mini {
  margin-top: auto; position: relative; height: 270px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(80% 60% at 20% 0%, rgba(91, 91, 247, 0.35), transparent 70%), #0a0a1d;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.t-notice .islands { --w: 300px; top: 16px; padding: 0 4px; }

/* ── Safety ────────────────────────────────────────────────────────────── */

.safe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 46px; }
.safe div { padding: 26px; border-radius: var(--radius); background: rgba(20, 20, 43, 0.65); box-shadow: inset 0 0 0 1px var(--edge); }
.safe svg { width: 26px; height: 26px; margin-bottom: 14px; stroke: url(#g-brand); }
.safe p { color: var(--ink-soft); margin: 8px 0 0; font-size: 15.5px; }

/* ── Last call ─────────────────────────────────────────────────────────── */

.cta { text-align: center; padding: 120px 0 140px; overflow: hidden; }
.cta h2 { font-size: clamp(42px, 6.4vw, 84px); }
.cta .stores { justify-content: center; margin-top: 30px; }
.cta .orbit { position: absolute; inset: 0; z-index: -1; }
.cta .orbit img {
  position: absolute; width: 64px; height: 64px; border-radius: 50%; background: #1c1c36;
  box-shadow: 0 0 0 3px #0a0a1d, 0 0 0 5px rgba(138, 77, 255, 0.7); animation: float 6s ease-in-out infinite;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--edge); padding: 40px 0 50px; color: var(--ink-muted); font-size: 14.5px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; }
footer nav a:hover { color: var(--ink); }
footer .fine { width: 100%; font-size: 13px; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }

/* ── Legal pages ───────────────────────────────────────────────────────── */

.doc { padding: 70px 0 100px; }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: clamp(38px, 5vw, 56px); }
.doc .date { color: var(--ink-muted); margin: 14px 0 40px; font-weight: 600; }
.doc article { padding: 34px; border-radius: 26px; background: rgba(20, 20, 43, 0.7); box-shadow: inset 0 0 0 1px var(--edge); }
.doc h2 { font-size: 22px; margin: 30px 0 10px; letter-spacing: -0.01em; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--ink-soft); font-size: 16px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc .note { padding: 16px 18px; border-radius: 16px; background: rgba(138, 77, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(138, 77, 255, 0.35); color: var(--ink); }
.doc .back { display: inline-flex; margin-top: 30px; }

/* ── Smaller screens ───────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  .top nav { display: none; }
  .top .lang { margin-left: auto; }
  .hero { min-height: 0; }
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero .lead { margin: 0 auto; }
  .hero .actions, .hero .stores { justify-content: center; }
  .stage { height: 560px; }
  .facts .wrap { grid-template-columns: repeat(2, 1fr); }
  .how .grid { grid-template-columns: 1fr; gap: 0; }
  .how .sticky { display: none; }
  .steps { gap: 18px; padding: 10px 0 0; }
  .step { opacity: 1; }
  .step .shot { display: flex; justify-content: center; margin-top: 24px; }
  .step .shot .phone { --w: 230px; }
  .demo .grid { grid-template-columns: 1fr; text-align: center; }
  .demo .lead { margin: 0 auto; }
  .demo .controls { justify-content: center; }
  .bento { grid-template-columns: 1fr 1fr; }
  .t-games, .t-voice, .t-look, .t-notice { grid-column: span 2; }
  .t-passport, .t-today, .t-store { grid-column: span 1; }
  .safe { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 80px 0; }
  .wrap { width: calc(100vw - 32px); }
  .soon-pill { display: none; }
  .stage { height: 560px; transform: scale(0.82); margin: 10px -16px -40px; }
  .stage .p-left { transform: translate(-110px, 40px); }
  .stage .p-right { transform: translate(110px, 60px); }
  .air { display: none; }
  .demo .phone { --w: min(330px, calc(100vw - 48px)); }
  .bento { grid-template-columns: 1fr; }
  .t-games, .t-voice, .t-look, .t-notice, .t-passport, .t-today, .t-store { grid-column: span 1; grid-row: auto; }
  .safe { grid-template-columns: 1fr; }
  .doc article { padding: 22px; }
  .deal span { font-size: 12.5px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}