/* Kharkiv Air Monitor — landing
   Layout concept: a calm night city seen from above. One radar motif (you + 5 km + 10 km rings)
   recurs in every section; content sits in a 12-column grid with generous air. Dark is primary. */

:root {
  /* colour — dark (primary) */
  --bg: #05070D;
  --bg-2: #090E18;
  --card: rgba(18, 24, 37, 0.72);
  --card-solid: #111826;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --fg: #F3F6FB;
  --fg-2: #A7B1C0;
  --fg-3: #7D889A;
  --accent: #3D8BFF;
  --accent-ink: #7AA9FF;
  --btn-a: #2E6FE8;
  --btn-b: #1C55C9;
  --brand-a: #0B3E8F;
  --brand-b: #2E7DF0;
  --gold: #F2B33D;
  --danger: #FF5A4E;
  --warn: #FF9F0A;
  --safe: #32D74B;
  --map-bg: #0A1120;
  --map-line: rgba(130, 165, 230, 0.16);
  --map-line-2: rgba(130, 165, 230, 0.07);
  --map-river: rgba(70, 120, 210, 0.55);
  --app-bg: #06080C;
  --app-card: rgba(24, 30, 44, 0.95);
  --nt-bg: rgba(32, 38, 54, 0.88);
  --lock-a: #10244D;
  --lock-b: #05070D;
  --lock-fg: #F3F6FB;
  --glow: rgba(61, 139, 255, 0.30);
  --grid: rgba(130, 165, 230, 0.055);
  --shadow-lg: 0 40px 100px rgba(0, 0, 0, 0.55);
  --noise-op: 0.07;
  color-scheme: dark;

  /* type */
  --f-sans: 'Nunito Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --t-display: clamp(2.55rem, 1.4rem + 4.6vw, 5.25rem);
  --t-h2: clamp(2rem, 1.25rem + 2.9vw, 3.6rem);
  --t-h3: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem);
  --t-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --r-xl: 32px;
  --r-lg: 24px;
  --nav-h: 68px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F3F6FB; --bg-2: #E8EEF7; --card: rgba(255, 255, 255, 0.74); --card-solid: #FFFFFF;
    --line: rgba(16, 36, 72, 0.08); --line-2: rgba(16, 36, 72, 0.15);
    --fg: #0B1424; --fg-2: #475467; --fg-3: #5D6879; --accent: #1F5FD6; --accent-ink: #1F5FD6;
    --gold: #B07D14; --danger: #D8231B; --warn: #C77209; --safe: #1D8B3C;
    --map-bg: #E4EAF4; --map-line: rgba(30, 70, 140, 0.17); --map-line-2: rgba(30, 70, 140, 0.07); --map-river: rgba(60, 120, 210, 0.45);
    --app-bg: #F3F6FB; --app-card: #FFFFFF; --nt-bg: rgba(255, 255, 255, 0.9);
    --lock-a: #C9DBFF; --lock-b: #EEF3FB; --lock-fg: #0B1424;
    --glow: rgba(31, 95, 214, 0.16); --grid: rgba(16, 36, 72, 0.05); --shadow-lg: 0 30px 80px rgba(20, 40, 80, 0.18); --noise-op: 0.035;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F3F6FB; --bg-2: #E8EEF7; --card: rgba(255, 255, 255, 0.74); --card-solid: #FFFFFF;
  --line: rgba(16, 36, 72, 0.08); --line-2: rgba(16, 36, 72, 0.15);
  --fg: #0B1424; --fg-2: #475467; --fg-3: #5D6879; --accent: #1F5FD6; --accent-ink: #1F5FD6;
  --gold: #B07D14; --danger: #D8231B; --warn: #C77209; --safe: #1D8B3C;
  --map-bg: #E4EAF4; --map-line: rgba(30, 70, 140, 0.17); --map-line-2: rgba(30, 70, 140, 0.07); --map-river: rgba(60, 120, 210, 0.45);
  --app-bg: #F3F6FB; --app-card: #FFFFFF; --nt-bg: rgba(255, 255, 255, 0.9);
  --lock-a: #C9DBFF; --lock-b: #EEF3FB; --lock-fg: #0B1424;
  --glow: rgba(31, 95, 214, 0.16); --grid: rgba(16, 36, 72, 0.05); --shadow-lg: 0 30px 80px rgba(20, 40, 80, 0.18); --noise-op: 0.035;
  color-scheme: light;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--card-solid); color: var(--fg); }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.wrap {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-left: max(clamp(20px, 4vw, 40px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 4vw, 40px), env(safe-area-inset-right, 0px));
}
.section { position: relative; padding-block: clamp(72px, 8.5vw, 136px); }

/* ------------------------------------------------------------------ atmosphere */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg__aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 35% at 70% 18%, color-mix(in srgb, var(--brand-b) 34%, transparent), transparent 70%),
    radial-gradient(38% 40% at 18% 60%, color-mix(in srgb, var(--brand-a) 42%, transparent), transparent 70%),
    radial-gradient(30% 30% at 85% 85%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  opacity: 0.55;
  animation: aurora 38s var(--ease) infinite alternate;
  will-change: transform;
}
.bg__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
}
.bg__noise {
  position: absolute; inset: 0; opacity: var(--noise-op);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-4%, 3%, 0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(3%, -2%, 0) rotate(-6deg) scale(1.02); }
}

/* ------------------------------------------------------------------ nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .5s var(--ease), background-color .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav__inner {
  height: var(--nav-h); display: flex; align-items: center; gap: 24px;
  width: min(1240px, 100%); margin-inline: auto;
  padding-left: max(clamp(20px, 4vw, 40px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 4vw, 40px), env(safe-area-inset-right, 0px));
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 800; letter-spacing: -0.01em; }
.brand__icon { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 6px 18px rgba(11, 62, 143, .45); }
.brand__name { font-size: 1rem; white-space: nowrap; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a { color: var(--fg-2); text-decoration: none; font-size: .95rem; font-weight: 600; padding: 8px 12px; border-radius: 10px; transition: color .2s, background-color .2s; }
.nav__links a:hover { color: var(--fg); background: var(--line); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; color: var(--fg); }
.icon-btn .ico { grid-area: 1 / 1; width: 18px; height: 18px; transition: transform .5s var(--ease), opacity .3s; }
.theme-toggle .ico--sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="light"] .theme-toggle .ico--sun { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-toggle .ico--moon { opacity: 0; transform: rotate(60deg) scale(.6); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .ico--sun { opacity: 1; transform: none; }
  :root:not([data-theme="dark"]) .theme-toggle .ico--moon { opacity: 0; transform: rotate(60deg) scale(.6); }
}
@media (max-width: 900px) { .nav__links { display: none; } .nav__actions { margin-left: auto; } }
@media (max-width: 400px) { .brand__name { display: none; } }

/* ------------------------------------------------------------------ type */
.display { font-size: var(--t-display); line-height: 1.02; font-weight: 800; letter-spacing: -0.028em; }
.h1-line { display: block; }
.h1-line--accent { color: var(--accent-ink); }
.h1-line--accent .line__in { color: transparent; background-image: linear-gradient(100deg, var(--accent-ink) 0%, color-mix(in srgb, var(--accent-ink) 50%, var(--fg)) 70%, var(--fg) 100%); -webkit-background-clip: text; background-clip: text; padding-right: .04em; }
.js-motion [data-lines].pre:not(.is-split) { opacity: 0; }
.h2 { font-size: var(--t-h2); line-height: 1.06; font-weight: 800; letter-spacing: -0.022em; }
.h3 { font-size: var(--t-h3); line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.lead { font-size: var(--t-lead); color: var(--fg-2); max-width: 36em; line-height: 1.55; }
.eyebrow { font-family: var(--f-mono); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.micro { font-size: .9rem; color: var(--fg-3); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); max-width: 820px; }
.sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head--center .lead { margin-inline: auto; }
.tone-danger { color: var(--danger); } .tone-warn { color: var(--warn); } .tone-safe { color: var(--safe); }
.tone-muted { color: var(--fg-3); } .tone-accent { color: var(--accent-ink); }

/* line mask reveal */
.line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.line__in { display: inline-block; will-change: transform; }
.js-motion [data-lines].pre .line__in { transform: translate3d(0, 108%, 0); }
.js-motion [data-lines] .line__in { transition: transform 1s var(--ease); transition-delay: calc(var(--li, 0) * 90ms); }
.js-motion [data-reveal].pre { opacity: 0; transform: translate3d(0, 22px, 0); }
.js-motion [data-reveal] { transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--rd, 0ms); }

/* ------------------------------------------------------------------ chips, pills, dots, buttons */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .86rem; font-weight: 700; color: var(--fg); white-space: nowrap; width: fit-content; }
.chip--tiny { height: auto; padding: .35em .8em; font-size: inherit; gap: .5em; backdrop-filter: none; -webkit-backdrop-filter: none; }
.chip--free { color: var(--safe); border-color: color-mix(in srgb, var(--safe) 40%, transparent); background: color-mix(in srgb, var(--safe) 10%, transparent); }
.chip--free .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 0 color-mix(in srgb, var(--safe) 60%, transparent); animation: live 2.4s ease-out infinite; flex-shrink: 0; }
.chip--tiny .live-dot { width: .6em; height: .6em; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--safe) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); flex-shrink: 0; display: inline-block; }
.cdot--danger { background: var(--danger); } .cdot--warn { background: var(--warn); } .cdot--safe { background: var(--safe); }
.cdot--accent { background: var(--accent); } .cdot--muted { background: var(--fg-3); }
.zdot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.zdot--in { background: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.zdot--out { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.zdot--city { box-shadow: inset 0 0 0 1.5px var(--fg-3); background-image: radial-gradient(circle, var(--fg-3) 2px, transparent 2.5px); }
.zdot--rest { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pill { display: inline-flex; align-items: center; gap: .45em; padding: .4em .8em; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.pill i { width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.pill--danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.pill--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 800; text-decoration: none; border: 0; cursor: pointer; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .92rem; }
.btn--primary { color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 10px 24px rgba(31, 95, 214, .32); }
.btn--primary:hover { filter: brightness(1.08); }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 22px 0 18px; border-radius: 16px;
  color: var(--fg); background: var(--card-solid); border: 1px solid var(--line-2); text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .5s var(--ease), border-color .3s, box-shadow .3s;
}
.store:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 22%, transparent); }
.store .ico { width: 22px; height: 22px; color: var(--accent-ink); }
.store span { display: grid; line-height: 1.1; }
.store small { font-size: .74rem; color: var(--fg-3); font-weight: 600; }
.store b { font-size: 1.1rem; letter-spacing: -0.01em; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* ------------------------------------------------------------------ phone shell */
.phone {
  --pw: 300px;
  --cq: calc(var(--pw) * .00944);
  position: relative; width: var(--pw); flex-shrink: 0;
  aspect-ratio: 1170 / 2532; padding: calc(var(--pw) * .028);
  border-radius: calc(var(--pw) * .16);
  background: linear-gradient(145deg, #50545a 0%, #1f2124 20%, #3b3e43 48%, #17191b 76%, #464a50 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.phone__screen {
  position: relative; height: 100%; overflow: hidden; container-type: inline-size;
  border-radius: calc(var(--pw) * .135);
  background: var(--app-bg);
  color: var(--fg);
}
.phone__island { position: absolute; z-index: 5; top: 2.6cqw; left: 50%; width: 30cqw; height: 8.6cqw; margin-left: -15cqw; border-radius: 5cqw; background: #000; }

/* lock screen */
.lock { background:
  radial-gradient(90% 42% at 88% 104%, color-mix(in srgb, var(--brand-b) 50%, transparent), transparent 72%),
  radial-gradient(70% 34% at -6% 92%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
  radial-gradient(120% 70% at 30% 0%, var(--lock-a), var(--lock-b) 70%); color: var(--lock-fg); display: flex; flex-direction: column; align-items: center; }
.lock--dim { filter: saturate(.7) brightness(.82); }
.lock__date { order: -1; margin-top: 17cqw; font-size: 4.4cqw; font-weight: 700; opacity: .8; }
.lock__time { font-size: 21cqw; line-height: 1; font-weight: 700; letter-spacing: -0.03em; margin-top: 1cqw; }
.lock:not(:has(.lock__date)) .lock__time { margin-top: 17cqw; }
.lock__slot { width: 100%; padding: 6cqw 3.4cqw 0; }
.lock__calm { position: absolute; left: 50%; bottom: 14cqw; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 1.6cqw; padding: 2cqw 3.6cqw; border-radius: 99px; background: color-mix(in srgb, var(--lock-fg) 10%, transparent); font-size: 3.4cqw; font-weight: 700; white-space: nowrap; transition: opacity .6s var(--ease); }
.lock__calm .ico { width: 3.6cqw; height: 3.6cqw; }
.lock__silent { margin-top: 18cqw; display: grid; justify-items: center; gap: 1.6cqw; text-align: center; padding: 0 8cqw; }
.lock__silent .ico { width: 10cqw; height: 10cqw; opacity: .8; }
.lock__silent b { font-size: 6cqw; }
.lock__silent span { font-size: 3.8cqw; opacity: .7; }

/* notification card — sized in --u so it works inside phones (cqw) and on its own (px) */
.nt {
  --u: 1cqw;
  position: relative; display: flex; gap: calc(var(--u) * 3); align-items: flex-start;
  padding: calc(var(--u) * 3.2) calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * 6.2);
  background: var(--nt-bg);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0, 0, 0, .35);
  color: var(--fg); text-align: left;
}
.nt--big { --u: clamp(3.3px, 1vw, 4.2px); width: min(100%, calc(var(--u) * 100)); }
.nt__icon { flex-shrink: 0; width: calc(var(--u) * 9.6); height: calc(var(--u) * 9.6); border-radius: calc(var(--u) * 2.3); overflow: hidden; outline: calc(var(--u) * .55) solid color-mix(in srgb, var(--danger) 0%, transparent); outline-offset: calc(var(--u) * .5); transition: outline-color .8s var(--ease); }
.nt__icon img { width: 100%; height: 100%; }
.nt.is-urgent .nt__icon { outline-color: color-mix(in srgb, var(--danger) 85%, transparent); }
.nt.is-resolved .nt__icon { outline-color: color-mix(in srgb, var(--safe) 85%, transparent); }
.nt__body { flex: 1; min-width: 0; display: grid; gap: calc(var(--u) * .5); }
.nt__meta { display: flex; justify-content: space-between; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 3); line-height: 1.3; color: var(--fg-3); }
.nt__meta b { letter-spacing: .05em; font-weight: 800; }
.nt__title { font-size: calc(var(--u) * 3.8); line-height: 1.3; font-weight: 800; }
.nt__text { font-size: calc(var(--u) * 3.5); line-height: 1.35; color: var(--fg-2); }
.morph { display: grid; }
.morph > * { grid-area: 1 / 1; display: grid; gap: calc(var(--u) * .5); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); }
.morph__b { opacity: 0; filter: blur(6px); transform: translateY(4px); }
.is-resolved .morph__a { opacity: 0; filter: blur(6px); transform: translateY(-4px); }
.is-resolved .morph__b { opacity: 1; filter: none; transform: none; }

@keyframes nt-in {
  0% { transform: translate3d(0, -140%, 0) scale(.94); opacity: 0; }
  55% { transform: translate3d(0, 7%, 0) scale(1.01); opacity: 1; }
  78% { transform: translate3d(0, -2%, 0) scale(1); }
  100% { transform: none; opacity: 1; }
}
@keyframes buzz {
  0%, 100% { translate: 0 0; } 15% { translate: -1.6% 0; } 30% { translate: 1.6% 0; } 45% { translate: -1.2% 0; } 60% { translate: 1.2% 0; } 75% { translate: -.6% 0; }
}
@keyframes nt-out { to { transform: translate3d(0, -40%, 0) scale(.96); opacity: 0; } }

/* ------------------------------------------------------------------ 1. hero */
.hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(28px, 6vw, 72px)); padding-bottom: clamp(56px, 8vw, 110px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { display: grid; gap: 26px; min-width: 0; }
.hero__copy .chip--live { color: var(--fg-2); }
.hero__scene { --px: 0; --py: 0; position: relative; min-width: 0; padding-bottom: 8%; }
.radar { position: relative; width: min(100%, 580px); aspect-ratio: 1; margin-inline: auto; transform: translate3d(calc(var(--px) * -10px), calc(var(--py) * -10px), 0); transition: transform .8s var(--ease); }
.radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 46%, var(--bg) 71%); pointer-events: none; }
.radar__map { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.radar__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.radar__breath { transform-box: fill-box; transform-origin: center; animation: breathe 6s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.018); } }
.ring { stroke-width: 1.6; transition: stroke 1s var(--ease), fill 1s var(--ease); }
.ring--outer { fill: color-mix(in srgb, var(--accent) 5%, transparent); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-dasharray: 5 7; }
.ring--inner { fill: color-mix(in srgb, var(--accent) 11%, transparent); stroke: color-mix(in srgb, var(--accent) 75%, transparent); }
.radar.is-warm .ring--outer { stroke: var(--warn); fill: color-mix(in srgb, var(--warn) 9%, transparent); }
.radar.is-hot .ring--inner { stroke: var(--danger); fill: color-mix(in srgb, var(--danger) 15%, transparent); }
.wave { fill: none; stroke: var(--danger); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.radar.is-wave .wave { animation: wave 1.8s var(--ease) forwards; }
@keyframes wave { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(2.15); } }
.trail { fill: none; stroke: var(--warn); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .85; transition: opacity .8s; }
.radar.is-hot .trail { stroke: var(--danger); }
.tgt { fill: var(--fg-3); opacity: .55; }
.tgt--main { fill: var(--warn); opacity: 1; transition: fill .6s; }
.radar.is-hot .tgt--main { fill: var(--danger); }
.tgt-halo { fill: none; stroke: currentColor; }
.you-dot { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.you-halo { fill: color-mix(in srgb, var(--accent) 30%, transparent); transform-box: fill-box; transform-origin: center; animation: halo 2.8s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.rl { font: 600 13px var(--f-mono); fill: var(--fg-2); text-anchor: middle; letter-spacing: .04em; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.rl--you { fill: var(--fg); font-family: var(--f-sans); font-weight: 800; font-size: 14px; }
.rp { font: 700 12px var(--f-sans); fill: var(--fg-3); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; opacity: .85; }
.phone--hero { --pw: clamp(170px, 16vw, 236px); position: absolute; right: 0; bottom: 0; z-index: 2; transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 16px), 0) rotate(4deg); transition: transform .8s var(--ease); }
.phone--hero .nt { opacity: 0; transform: translate3d(0, -140%, 0); }
.phone--hero .nt.is-in { animation: nt-in .8s var(--ease) forwards, buzz .45s .75s linear 2; }
.phone--hero .nt.is-out { animation: nt-out .6s var(--ease) forwards; }
.phone--hero.has-alert .lock__calm { opacity: 0; }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__scene { max-width: 560px; margin-inline: auto; width: 100%; }
  .phone--hero { --pw: clamp(140px, 34vw, 200px); right: -2%; }
}

/* ------------------------------------------------------------------ 2. how */
.how__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(32px, 6vw, 96px); }
.how__steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-block: 24px; opacity: .32; transition: opacity .6s var(--ease); }
.step.is-active { opacity: 1; }
.step p, .zones { color: var(--fg-2); max-width: 30em; }
.step__num { font: 600 .8rem var(--f-mono); letter-spacing: .1em; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--accent-ink); background: var(--card); }
.step.is-active .step__num { border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); }
.zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zones li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: baseline; }
.zones b { color: var(--fg); }
.slider { display: grid; gap: 8px; max-width: 380px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); margin-top: 6px; }
.slider__top { display: flex; justify-content: space-between; font-weight: 700; }
.slider__top output { font-family: var(--f-mono); color: var(--accent-ink); }
.slider__scale { display: flex; justify-content: space-between; font: 500 .78rem var(--f-mono); color: var(--fg-3); }
.slider input { --val: 100%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.slider input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) var(--val), var(--line-2) var(--val)); }
.slider input::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) var(--val), var(--line-2) var(--val)); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.slider input::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.how__stage { position: relative; }
.how__sticky { position: sticky; top: max(calc(var(--nav-h) + 24px), calc(50vh - 330px)); display: grid; justify-items: center; gap: 22px; }
.phone--app { --pw: clamp(250px, 24vw, 300px); }
.how__progress { position: relative; display: grid; grid-template-columns: repeat(3, 44px); gap: 8px; }
.how__progress span { height: 4px; border-radius: 4px; background: var(--line-2); }
.how__progress i { position: absolute; left: 0; top: 0; height: 4px; border-radius: 4px; background: var(--accent); width: calc(var(--p, 0) * 148px); transition: width .2s linear; }
.step__frame { display: none; }

/* app screen inside phones */
.app { display: flex; flex-direction: column; font-size: calc(var(--cq) * 3.6); }
.app__bar { display: flex; justify-content: space-between; align-items: center; padding: 15cqw 5cqw 3cqw; font-weight: 800; font-size: 5.4cqw; }
.app__bar .chip--tiny { font-size: 2.9cqw; }
.mini-map { position: relative; margin: 0 4cqw; aspect-ratio: 1; border-radius: 6cqw; overflow: hidden; background: var(--map-bg); }
.mini-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-ring { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease), fill .8s, r .5s var(--ease); }
.mm-ring--in { stroke-width: 2.5; }
.mm-ring--out { stroke-opacity: .6; }
.s1 .mm-ring { stroke-dashoffset: 0; }
.s1 .mm-ring--in { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.s1 .mm-ring--out { fill: color-mix(in srgb, var(--accent) 6%, transparent); }
.mm-ripple { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.s0 .mm-ripple { animation: ripple 1.6s .45s var(--ease) both; }
@keyframes ripple { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
.mm-pin { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; transform: translate(-50%, -100%); opacity: 0; color: var(--accent); }
.mm-pin .ico { width: 12cqw; height: 12cqw; fill: color-mix(in srgb, var(--accent) 30%, var(--map-bg)); stroke-width: 2.2; filter: drop-shadow(0 2cqw 2cqw rgba(0, 0, 0, .35)); }
.mm-pin span { position: absolute; top: -6cqw; padding: .6cqw 2.2cqw; border-radius: 99px; background: var(--app-card); color: var(--fg); font-size: 3cqw; font-weight: 800; white-space: nowrap; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .2); }
.s0 .mm-pin { animation: pin-drop .9s var(--ease) both; }
@keyframes pin-drop { 0% { opacity: 0; transform: translate(-50%, -260%); } 55% { opacity: 1; transform: translate(-50%, -88%); } 75% { transform: translate(-50%, -110%); } 100% { opacity: 1; transform: translate(-50%, -100%); } }
.mm-label { position: absolute; font: 600 3cqw var(--f-mono); padding: .5cqw 1.8cqw; border-radius: 99px; background: var(--app-card); color: var(--fg); opacity: 0; transition: opacity .6s .4s; }
.mm-label--in { left: 64%; top: 30%; }
.mm-label--out { left: 74%; top: 10%; }
.s1 .mm-label { opacity: 1; }
.app__sheet { margin: 4cqw; padding: 3.4cqw 4cqw; border-radius: 5cqw; background: var(--app-card); border: 1px solid var(--line); display: grid; gap: 2.4cqw; }
.app__sheet-title { font-size: 3cqw; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.app__row { display: grid; grid-template-columns: auto 1fr auto; gap: 2.4cqw; align-items: center; font-size: 3.7cqw; font-weight: 700; }
.app__row b { color: var(--accent-ink); font-family: var(--f-mono); font-weight: 600; }
.app__row .zdot { width: 3cqw; height: 3cqw; }
.nt--app { position: absolute; left: 3.4cqw; right: 3.4cqw; top: 13cqw; z-index: 4; opacity: 0; transform: translate3d(0, -140%, 0); }
.s2 .nt--app { animation: nt-in .8s var(--ease) forwards, buzz .45s .75s linear 2; }
.s2 .nt--app .nt__icon { outline-color: color-mix(in srgb, var(--danger) 85%, transparent); }
@media (max-width: 900px) {
  .how__grid { grid-template-columns: minmax(0, 1fr); }
  .how__stage { display: none; }
  .step { min-height: 0; opacity: 1; padding-block: 28px; }
  .step__frame { display: grid; justify-items: center; margin-top: 18px; }
  .step__frame .phone { --pw: min(68vw, 260px); }
}

/* ------------------------------------------------------------------ oblast map (shared) */
.oblast { width: 100%; height: auto; overflow: visible; }
.raion { fill: color-mix(in srgb, var(--accent) 5%, transparent); stroke: var(--map-line); stroke-width: 1.5; stroke-linejoin: round; transition: fill 1s var(--ease); }
.raion-label { font: 700 13px var(--f-sans); fill: var(--fg-3); text-anchor: middle; opacity: .9; }
.city { fill: var(--fg); }
.city-label { font: 800 15px var(--f-sans); fill: var(--fg); text-anchor: start; paint-order: stroke; stroke: var(--map-bg); stroke-width: 4px; }
.ev { fill: var(--warn); opacity: 0; transform-box: fill-box; transform-origin: center; animation: ev 4.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ev--red { fill: var(--danger); }
@keyframes ev { 0%, 100% { opacity: 0; transform: scale(.4); } 20%, 55% { opacity: .9; transform: scale(1); } 80% { opacity: 0; transform: scale(1.6); } }
.ev-near { fill: var(--danger); }
.ev-ring { fill: color-mix(in srgb, var(--danger) 14%, transparent); stroke: var(--danger); stroke-width: 1.5; }
.you-ring { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-width: 1.5; }

/* ------------------------------------------------------------------ 3. calm vs noise */
.compare { --split: 50%; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--map-bg); box-shadow: var(--shadow-lg); user-select: none; touch-action: pan-y; }
.compare__pane { position: absolute; inset: 0; background: var(--map-bg); }
.compare__pane--near { clip-path: inset(0 0 0 var(--split)); }
.compare__map { position: absolute; left: 3%; top: 8%; width: 64%; }
.compare__tag { position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-weight: 800; font-size: .92rem; white-space: nowrap; }
.compare__tag--right { left: auto; right: 18px; }
.phone--mini { --pw: clamp(120px, 17vw, 220px); position: absolute; right: 7%; top: 50%; transform: translateY(-50%); }
.phone--mini .nt { --u: 1cqw; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 4; width: 44px; margin-left: -22px; padding: 0; background: transparent; border: 0; cursor: ew-resize; touch-action: none; }
.compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(transparent, var(--fg) 15%, var(--fg) 85%, transparent); opacity: .8; }
.compare__grip { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: var(--fg); color: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.compare__grip .ico { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .compare { aspect-ratio: 3 / 4; }
  .compare__map { left: -6%; top: 14%; width: 112%; }
  .phone--mini { --pw: clamp(110px, 34vw, 170px); right: 6%; top: auto; bottom: 5%; transform: none; }
  .compare__tag { font-size: .8rem; top: 12px; left: 12px; padding: 6px 10px; }
  .compare__tag--right { left: auto; right: 12px; }
}

/* ------------------------------------------------------------------ 4. alerts */
.alerts__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.alerts__copy { display: grid; gap: 22px; }
.silent { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 22px; margin-top: 10px; }
.silent p { color: var(--fg-2); margin-top: 6px; }
.silent__demo { position: relative; width: 112px; height: 84px; border-radius: 18px; background: color-mix(in srgb, var(--fg) 5%, transparent); display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 16px; overflow: hidden; }
.silent__switch { position: relative; width: 16px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--fg) 18%, transparent); }
.silent__switch i { position: absolute; left: 2px; right: 2px; top: 2px; height: 18px; border-radius: 8px; background: var(--fg-2); animation: mute 4s var(--ease) infinite; }
@keyframes mute { 0%, 20% { transform: none; background: var(--fg-2); } 30%, 100% { transform: translateY(18px); background: var(--warn); } }
.silent__speaker { color: var(--accent-ink); position: relative; z-index: 1; }
.silent__speaker .ico { width: 30px; height: 30px; }
.silent__wave { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 6px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: swave 4s ease-out infinite; }
.silent__wave--2 { animation-delay: .5s; }
@keyframes swave { 0%, 32% { opacity: 0; transform: scale(.6); } 40% { opacity: .8; } 100% { opacity: 0; transform: scale(3.2); } }
.alerts__stage { position: relative; display: grid; justify-items: center; gap: 22px; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: radial-gradient(120% 90% at 30% 0%, var(--lock-a), var(--lock-b) 75%); border: 1px solid var(--line); min-height: 420px; overflow: hidden; }
.alerts__stage::before { content: "9:41"; font-size: clamp(64px, 9vw, 104px); font-weight: 700; letter-spacing: -0.03em; color: var(--lock-fg); opacity: .9; line-height: 1; }
.stack { position: relative; width: min(100%, 420px); height: 250px; }
.stack__card { position: absolute; left: 0; right: 0; top: 0; margin-inline: auto; opacity: 0; transform: translate3d(0, -120%, 0) scale(.96); transition: transform .9s var(--spring), opacity .6s var(--ease); }
.stack__card.is-front { opacity: 1; transform: none; z-index: 2; }
.stack__card.is-back { opacity: .5; transform: translate3d(0, 34%, 0) scale(.93); z-index: 1; filter: saturate(.8); }
.stack__card.is-gone { opacity: 0; transform: translate3d(0, 60%, 0) scale(.88); }
.stack__caption { color: var(--fg-2); font-size: .95rem; }
.stack__caption b { font-weight: 800; }
@media (max-width: 900px) { .alerts__grid { grid-template-columns: minmax(0, 1fr); } .alerts__stage { order: -1; } }
@media (max-width: 480px) { .silent { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ 5. now */
.now__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.now__stage { display: grid; justify-items: center; position: relative; }
.now__stage::before { content: ""; position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 62%); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; }
.now__copy { display: grid; gap: 22px; }
.app--home { padding: 0 calc(var(--cq) * 4.2); gap: calc(var(--cq) * 3.4); font-size: calc(var(--cq) * 3.6); }
.home__head { display: flex; align-items: center; gap: 3cqw; margin-top: 15cqw; }
.home__head b { display: block; font-size: 7.4cqw; line-height: 1.05; }
.home__head span { font-size: 3.6cqw; color: var(--fg-3); }
.home__tile img { width: 10cqw; height: 10cqw; border-radius: 2.6cqw; }
.home__live { display: flex; align-items: center; gap: 2.4cqw; font-size: 3.1cqw; color: var(--fg-3); }
.home__upd { font-variant-numeric: tabular-nums; }
.home__card { padding: 4.4cqw; border-radius: 6cqw; background: var(--app-card); border: 1px solid var(--line); display: grid; gap: 2.4cqw; }
.home__cardhead { display: flex; justify-content: space-between; font-size: 2.8cqw; font-weight: 800; letter-spacing: .04em; color: var(--fg-3); }
.home__big { display: flex; align-items: center; gap: 3cqw; color: var(--fg-2); line-height: 1.2; font-size: 3.6cqw; }
.count { font-size: 24cqw; line-height: .9; font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; display: inline-block; min-width: .6em; }
.count.is-counting { filter: blur(1.2px); }
.home__chips { display: flex; gap: 2cqw; flex-wrap: wrap; font-size: 3.1cqw; }
.home__chips .pill { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js-motion .now__stage:not(.is-played) .home__chips .pill { opacity: 0; transform: translateY(8px); }
.home__chips .pill:nth-child(2) { transition-delay: 90ms; }
.home__sub { font-size: 4.6cqw; font-weight: 800; margin-top: 1cqw; }
.home__list { border-radius: 5cqw; background: var(--app-card); border: 1px solid var(--line); overflow: hidden; }
.home__row { display: grid; grid-template-columns: auto 1fr auto; gap: 2.6cqw; align-items: center; padding: 3.2cqw 3.6cqw; }
.home__row + .home__row { border-top: 1px solid var(--line); }
.home__row .cdot { width: 2.2cqw; height: 2.2cqw; }
.home__row b { display: block; font-size: 3.5cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home__row span { font-size: 2.9cqw; color: var(--fg-3); }
.home__row em { font-style: normal; font-weight: 800; font-size: 3.8cqw; white-space: nowrap; }
.phone--now { --pw: clamp(250px, 26vw, 320px); }
.honest { padding: 20px; display: grid; gap: 16px; margin-top: 6px; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.seg button { position: relative; z-index: 1; min-height: 40px; border: 0; background: transparent; border-radius: 10px; font-weight: 700; font-size: .92rem; color: var(--fg-2); cursor: pointer; transition: color .3s; }
.seg button[aria-selected="true"] { color: var(--fg); }
.seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--card-solid); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transition: transform .55s var(--spring); }
.seg.is-b .seg__thumb { transform: translateX(100%); }
.honest__state { display: grid; }
.honest__state > div { grid-area: 1 / 1; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--fg) 4%, transparent); transition: opacity .55s var(--ease), filter .55s var(--ease), transform .55s var(--ease); }
.honest__state p { color: var(--fg-2); font-size: .95rem; }
.honest__state b { font-size: .8rem; letter-spacing: .08em; }
.honest__b { opacity: 0; filter: blur(6px); transform: translateY(6px); }
.honest__state[data-state="stale"] .honest__a { opacity: 0; filter: blur(6px); transform: translateY(-6px); }
.honest__state[data-state="stale"] .honest__b { opacity: 1; filter: none; transform: none; }
.honest__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.tone-safe-bg { color: var(--safe); background: color-mix(in srgb, var(--safe) 14%, transparent); }
.tone-warn-bg { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.honest__note { color: var(--fg-3); font-size: .92rem; }
@media (max-width: 900px) { .now__grid { grid-template-columns: minmax(0, 1fr); } .now__stage { order: 2; } }

/* ------------------------------------------------------------------ 6. map */
.mapcard { margin: 0; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--map-bg); overflow: hidden; position: relative; box-shadow: var(--shadow-lg); }
.mapcard__view { padding: clamp(16px, 4vw, 48px) clamp(8px, 4vw, 56px) 0; overflow: hidden; }
.oblast--big { animation: drift 22s ease-in-out infinite alternate; transform-origin: 48% 40%; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.05) translate(-1%, 1%); } }
.js-motion .mapcard .raion { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mapcard.is-played .raion { animation: draw 1.8s var(--ease) forwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.raion--alert { transition: fill 1.2s var(--ease) 1.2s; }
.mapcard.is-played .raion--alert, .no-motion .raion--alert { fill: color-mix(in srgb, var(--danger) 26%, transparent); stroke: color-mix(in srgb, var(--danger) 80%, transparent); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--danger) 45%, transparent)); }
.alert-mark { transform-box: fill-box; transform-origin: center; }
.alert-pulse { fill: none; stroke: var(--danger); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.mapcard.is-played .alert-pulse { animation: apulse 2.8s 2s ease-out infinite; }
@keyframes apulse { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
.obj { fill: var(--card-solid); stroke: var(--warn); stroke-width: 2; }
.obj-label { font: 800 11px var(--f-sans); fill: var(--warn); text-anchor: middle; }
.dir { fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.mapcard__legend { position: absolute; top: 18px; right: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; font-size: .85rem; }
.mapcard__legend .chip--tiny { background: var(--card); border: 1px solid var(--line-2); font-weight: 800; }
.legend { display: inline-flex; align-items: center; gap: 8px; padding: .35em .8em; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-weight: 700; color: var(--fg-2); }
.legend .ico { color: var(--warn); width: 16px; height: 16px; }
.mapcard__note { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 18px clamp(18px, 3vw, 28px); border-top: 1px solid var(--line); background: var(--card); color: var(--fg-2); font-size: .98rem; }
.mapcard__note .ico { color: var(--accent-ink); margin-top: 3px; }
.mapcard__note b { color: var(--fg); }
@media (max-width: 640px) { .mapcard__legend { position: static; padding: 14px 16px 0; justify-content: flex-start; } }

/* ------------------------------------------------------------------ 7. bento */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile {
  --mx: 50%; --my: 0%; --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-solid), var(--card-solid)) padding-box,
    radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 65%, transparent), var(--line) 45%) border-box;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease), opacity .9s var(--ease);
}
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%); pointer-events: none; opacity: 0; transition: opacity .4s; }
.tile:hover::before { opacity: 1; }
.tile > * { position: relative; }
.tile p { color: var(--fg-2); font-size: .98rem; }
.tile__viz { height: 150px; margin: -2px -2px 10px; border-radius: 16px; background: color-mix(in srgb, var(--fg) 4%, transparent); position: relative; overflow: hidden; }
.tile--types { grid-column: span 2; }
.tile--feed { grid-row: span 2; }
.tile--feed .tile__viz { height: auto; flex: 1; min-height: 280px; }
.tile--theme { grid-column: span 2; }
.marquee { display: grid; align-content: center; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__row { display: flex; gap: 10px; width: max-content; animation: marquee 34s linear infinite; }
.marquee__row--rev { animation-direction: reverse; animation-duration: 28s; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--line-2); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.feed { -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.feed__track { display: grid; gap: 8px; padding: 10px; animation: feed 16s linear infinite; }
@keyframes feed { to { transform: translateY(-50%); } }
.feed__row { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.feed__row b { font-size: .9rem; }
.feed__row span { grid-column: 2; font-size: .78rem; color: var(--fg-3); }
.official { display: grid; place-content: center; justify-items: center; gap: 10px; }
.official__state { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; background: var(--card); border: 1px solid var(--line-2); font-weight: 800; }
.official__state .cdot { width: 10px; height: 10px; background: var(--warn); animation: offdot 9s ease-in-out infinite; }
.official__state b { display: inline-block; }
.official__b { position: absolute; left: 36px; opacity: 0; }
.official__a { animation: offa 9s ease-in-out infinite; }
.official__b { animation: offb 9s ease-in-out infinite; }
@keyframes offdot { 0%, 45% { background: var(--warn); box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 20%, transparent); } 55%, 95% { background: var(--safe); box-shadow: 0 0 0 6px color-mix(in srgb, var(--safe) 20%, transparent); } 100% { background: var(--warn); } }
@keyframes offa { 0%, 45% { opacity: 1; filter: none; } 52%, 95% { opacity: 0; filter: blur(4px); } 100% { opacity: 1; } }
@keyframes offb { 0%, 45% { opacity: 0; filter: blur(4px); } 52%, 95% { opacity: 1; filter: none; } 100% { opacity: 0; } }
.official__where { font-size: .82rem; color: var(--fg-3); font-family: var(--f-mono); }
.quiet { display: grid; place-content: center; justify-items: center; gap: 12px; }
.quiet__moon { position: relative; color: var(--gold); }
.quiet__moon .ico { width: 48px; height: 48px; fill: color-mix(in srgb, var(--gold) 25%, transparent); animation: sleep 6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes sleep { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) scale(.96); } }
.quiet__z { position: absolute; right: -12px; top: -8px; font-style: normal; font-weight: 800; font-size: 14px; color: var(--fg-2); opacity: 0; animation: zz 3.6s ease-out infinite; }
.quiet__z--2 { animation-delay: 1.2s; font-size: 12px; } .quiet__z--3 { animation-delay: 2.4s; font-size: 10px; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(16px, -30px); } }
.quiet__time { font-family: var(--f-mono); font-size: .85rem; color: var(--fg-2); }
.themeviz { display: flex; align-items: center; justify-content: center; gap: 28px; }
.themeviz__toggle { width: 74px; height: 40px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 12%, transparent); position: relative; animation: tv-track 6s var(--ease) infinite; }
.themeviz__toggle i { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #0B1424; animation: tv-knob 6s var(--ease) infinite; }
.themeviz__toggle .ico { grid-area: 1 / 1; width: 18px; height: 18px; }
.themeviz__toggle .ico--sun { animation: tv-sun 6s var(--ease) infinite; }
.themeviz__toggle .ico--moon { animation: tv-moon 6s var(--ease) infinite; }
.themeviz__ui { width: 120px; height: 96px; border-radius: 16px; padding: 12px; display: grid; gap: 8px; align-content: start; animation: tv-ui 6s var(--ease) infinite; border: 1px solid var(--line-2); }
.themeviz__ui b { height: 14px; width: 60%; border-radius: 6px; background: currentColor; opacity: .9; }
.themeviz__ui i { height: 10px; border-radius: 5px; background: currentColor; opacity: .3; }
@keyframes tv-knob { 0%, 40% { transform: none; } 50%, 90% { transform: translateX(34px); } 100% { transform: none; } }
@keyframes tv-sun { 0%, 40% { opacity: 1; transform: none; } 50%, 90% { opacity: 0; transform: rotate(90deg) scale(.5); } 100% { opacity: 1; } }
@keyframes tv-moon { 0%, 40% { opacity: 0; transform: rotate(-90deg) scale(.5); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tv-track { 0%, 40% { background: #F2B33D; } 50%, 90% { background: #1F5FD6; } 100% { background: #F2B33D; } }
@keyframes tv-ui { 0%, 40% { background: #F3F6FB; color: #0B1424; } 50%, 90% { background: #0A0F1A; color: #F3F6FB; } 100% { background: #F3F6FB; color: #0B1424; } }
.guest { display: flex; align-items: center; justify-content: center; gap: 18px; }
.guest__avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }
.guest__avatar .ico { width: 30px; height: 30px; }
.guest__opts { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; }
.guest__opts i { text-align: center; }
.guest__opts i { font-style: normal; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--fg-3); }
.guest__opts .guest__hl { color: var(--accent-ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); animation: guest 4s var(--ease) infinite; }
@keyframes guest { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile--feed { grid-row: auto; } .tile--theme { grid-column: span 1; } }
@media (max-width: 620px) { .bento { grid-template-columns: minmax(0, 1fr); } .tile--types, .tile--theme { grid-column: auto; } .tile--feed .tile__viz { min-height: 200px; } }

/* ------------------------------------------------------------------ 8. plans */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.plans__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl); background: var(--card-solid); border: 1px solid var(--line); overflow: hidden; }
.plan__kicker { font: 600 .78rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.plan--premium .plan__kicker { color: var(--gold); }
.plan__title { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
.plan--premium {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card-solid), var(--card-solid)) padding-box,
    conic-gradient(from var(--ang), color-mix(in srgb, var(--gold) 30%, transparent), var(--gold) 12%, color-mix(in srgb, var(--gold) 25%, transparent) 26%, color-mix(in srgb, var(--gold) 30%, transparent) 60%, #FFE3A1 72%, color-mix(in srgb, var(--gold) 30%, transparent) 84%) border-box;
  animation: spin 7s linear infinite;
}
@keyframes spin { to { --ang: 360deg; } }
.plan__glow { position: absolute; inset: auto -30% -40% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent), transparent 65%); pointer-events: none; }
.plan__demos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan__viz { position: relative; height: 170px; border-radius: 18px; overflow: hidden; background: var(--map-bg); border: 1px solid var(--line); }
.plan__viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan__viz > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-ring { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.5; }
.pv-ring--in { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); }
.pv-dot { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }
.pv-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: grid; justify-items: center; color: var(--gold); }
.pv-pin .ico { width: 26px; height: 26px; fill: color-mix(in srgb, var(--gold) 30%, var(--map-bg)); stroke-width: 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.pv-pin em { font-style: normal; font-size: .7rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: var(--card-solid); color: var(--fg); margin-top: 2px; }
.plan__viz--free .pv-pin { color: var(--accent); }
.plan__viz--free .pv-pin .ico { fill: color-mix(in srgb, var(--accent) 30%, var(--map-bg)); }
.plan__viz--pins .pv-pin { opacity: 0; }
.plan__viz--pins.is-drop .pv-pin { animation: pv-drop .8s var(--ease) both; animation-delay: calc(var(--i) * 260ms); }
.no-motion .plan__viz--pins .pv-pin { opacity: 1; }
@keyframes pv-drop { 0% { opacity: 0; transform: translate(-50%, -260%); } 60% { opacity: 1; transform: translate(-50%, -88%); } 80% { transform: translate(-50%, -106%); } 100% { opacity: 1; transform: translate(-50%, -100%); } }
.route { fill: none; stroke: color-mix(in srgb, var(--gold) 70%, transparent); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.beta { position: absolute; top: 10px; right: 10px; font: 700 .7rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.beta--inline { position: static; display: inline-block; vertical-align: 2px; margin-inline: 2px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--fg-2); }
.ticks .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--accent-ink); stroke-width: 2.4; }
.plan--premium .ticks .ico { color: var(--gold); }
.plan__price { margin-top: auto; font-size: .9rem; color: var(--fg-3); }
@media (max-width: 900px) { .plans__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .plan__demos { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ 9. limits */
.limits__box { padding: clamp(28px, 5vw, 64px); border-radius: var(--r-xl); background: color-mix(in srgb, var(--fg) 3%, transparent); border: 1px solid var(--line); }
.limits__box .sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.limits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.limit { display: grid; gap: 12px; align-content: start; }
.limit p { color: var(--fg-2); }
.limit__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg-2); }
.limit__ico .ico { width: 24px; height: 24px; }
.gps { position: relative; height: 140px; border-radius: 18px; overflow: hidden; background: var(--map-bg); border: 1px solid var(--line); }
.gps canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gps__dot { position: absolute; left: 50%; top: 56%; width: 18px; height: 18px; margin: -9px 0 0 -9px; animation: gps-jump 7s steps(1, end) infinite; }
.gps__dot i { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent); animation: gps-glitch 7s linear infinite; }
.gps__pin { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -100%); display: grid; justify-items: center; color: var(--fg); opacity: 0; animation: gps-pin 7s var(--ease) infinite; }
.gps__pin .ico { width: 26px; height: 26px; fill: color-mix(in srgb, var(--fg) 18%, var(--map-bg)); }
.gps__pin em { font-style: normal; font-size: .7rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: var(--card-solid); }
@keyframes gps-jump { 0% { transform: translate(0, 0); } 12% { transform: translate(-70px, -28px); } 24% { transform: translate(64px, 22px); } 36% { transform: translate(-34px, 34px); } 48% { transform: translate(80px, -36px); } 62%, 100% { transform: translate(0, 0); } }
@keyframes gps-glitch { 0%, 60% { filter: none; } 11%, 23%, 35%, 47% { filter: drop-shadow(3px 0 0 var(--danger)) drop-shadow(-3px 0 0 var(--accent)); } 13%, 25%, 37%, 49% { filter: none; } 62%, 100% { filter: none; } }
@keyframes gps-pin { 0%, 52% { opacity: 0; transform: translate(-50%, -180%); } 60%, 92% { opacity: 1; transform: translate(-50%, -100%); } 100% { opacity: 0; transform: translate(-50%, -100%); } }
@media (max-width: 900px) { .limits__grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ 10. faq */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .sec-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq__list { display: grid; gap: 10px; }
.qa { border-radius: 18px; border: 1px solid var(--line); background: var(--card); overflow: hidden; transition: border-color .3s, background-color .3s; }
.qa[open] { border-color: var(--line-2); background: var(--card-solid); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: color-mix(in srgb, var(--fg) 7%, transparent); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--fg-2); transition: transform .45s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa__a { padding: 0 22px 20px; color: var(--fg-2); max-width: 44em; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } .faq .sec-head { position: static; } }

/* ------------------------------------------------------------------ 11. cta */
.cta__box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: clamp(32px, 6vw, 80px); border-radius: 40px; overflow: hidden; border: 1px solid var(--line-2); background: radial-gradient(90% 120% at 15% 0%, color-mix(in srgb, var(--brand-b) 30%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--brand-a) 35%, var(--bg)), var(--bg)); }
.cta__rings { position: absolute; right: -10%; top: 50%; width: 70%; aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.cta__rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); opacity: 0; animation: cta-ring 9s ease-out infinite; }
.cta__rings i:nth-child(2) { animation-delay: 3s; } .cta__rings i:nth-child(3) { animation-delay: 6s; }
@keyframes cta-ring { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.cta__copy { position: relative; display: grid; gap: 28px; justify-items: start; }
.cta__icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 18px 40px rgba(11, 62, 143, .5); }
.cta .h2 { max-width: 15em; }
.qr { position: relative; display: none; justify-items: center; gap: 12px; padding: 18px; border-radius: 24px; background: var(--card-solid); border: 1px solid var(--line-2); width: 210px; text-align: center; }
.qr p { font-size: .82rem; color: var(--fg-3); }
.qr__code { width: 172px; height: 172px; border-radius: 12px; background: #fff; padding: 10px; }
.qr__code svg { width: 100%; height: 100%; }
@media (min-width: 1024px) and (hover: hover) { .qr.is-ready { display: grid; } }
@media (max-width: 760px) { .cta__box { grid-template-columns: minmax(0, 1fr); border-radius: 28px; } .cta__rings { right: -40%; width: 120%; } }

/* ------------------------------------------------------------------ 12. footer */
.footer { padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 40px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__mark { width: 30px; height: auto; }
.footer__brand p { color: var(--fg-3); font-size: .88rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; }
.footer__links a { color: var(--fg-2); text-decoration: none; font-size: .92rem; font-weight: 600; }
.footer__links a:hover { color: var(--fg); text-decoration: underline; }
.footer__meta { color: var(--fg-3); font-size: .88rem; }
.footer__mail { user-select: all; }
@media (max-width: 860px) { .footer__inner { grid-template-columns: minmax(0, 1fr); } .footer__links { justify-content: flex-start; } }

/* ------------------------------------------------------------------ motion control */
.scene:not(.is-visible) *, .scene:not(.is-visible)::before, .scene:not(.is-visible)::after { animation-play-state: paused !important; }
@media (hover: none), (max-width: 900px) { .tile { transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .marquee__row, .feed__track { animation: none !important; }
  .radar, .phone--hero { transform: none !important; }
  .phone--hero { transform: rotate(4deg) !important; }
}

/* ------------------------------------------------------------------ v2 polish */
.lock__btn { position: absolute; bottom: 6cqw; width: 11.5cqw; height: 11.5cqw; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--lock-fg) 14%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--lock-fg); }
.lock__btn .ico { width: 5.2cqw; height: 5.2cqw; stroke-width: 1.8; }
.lock__btn--l { left: 8cqw; } .lock__btn--r { right: 8cqw; }
.lock__calm { bottom: 22cqw; }

.zones li > span { min-width: 0; }

/* how phone: status + target */
.app__status { position: relative; margin: 0 4cqw; min-height: 15cqw; }
.st { position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr; gap: 3cqw; align-items: center; padding: 3cqw 3.6cqw; border-radius: 5cqw; border: 1px solid var(--line); background: var(--app-card); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.st b { display: block; font-size: 3.7cqw; font-weight: 800; }
.st small { display: block; font-size: 3cqw; color: var(--fg-3); margin-top: .4cqw; }
.st__ico { width: 8.4cqw; height: 8.4cqw; border-radius: 2.6cqw; display: grid; place-items: center; }
.st__ico .ico { width: 4.6cqw; height: 4.6cqw; stroke-width: 2.6; }
.st--calm .st__ico { background: color-mix(in srgb, var(--safe) 16%, transparent); color: var(--safe); }
.st--alert { opacity: 0; transform: translateY(2cqw); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 9%, var(--app-card)); }
.st--alert .st__ico { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.s2 .st--calm { opacity: 0; transform: translateY(-2cqw); }
.s2 .st--alert { opacity: 1; transform: none; transition-delay: .9s; }
.app__quiet { display: flex; align-items: center; gap: 2cqw; margin: 3.4cqw 5cqw 0; font-size: 3cqw; color: var(--fg-3); }
.app__quiet .ico { width: 3.6cqw; height: 3.6cqw; }
.mm-trail { fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.mm-target { opacity: 0; transform: translate(292px, 8px); }
.mm-target__dot { fill: var(--warn); stroke: #fff; stroke-width: 1.5; }
.mm-target__halo { fill: color-mix(in srgb, var(--warn) 22%, transparent); }
.s2 .mm-trail { animation: mm-trail 1.6s .2s var(--ease) forwards; }
.s2 .mm-target { animation: mm-target 1.6s .2s var(--ease) forwards; }
.s2 .mm-target__dot { animation: mm-hot .3s 1.8s forwards; }
.s2 .mm-target__halo { animation: mm-halo 1.4s 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mm-trail { to { stroke-dashoffset: 0; } }
@keyframes mm-target { 0% { opacity: 0; transform: translate(292px, 8px); } 15% { opacity: 1; } 100% { opacity: 1; transform: translate(178px, 128px); } }
@keyframes mm-hot { to { fill: var(--danger); } }
@keyframes mm-halo { 0% { transform: scale(.6); opacity: .9; fill: color-mix(in srgb, var(--danger) 30%, transparent); } 100% { transform: scale(2.2); opacity: 0; } }

/* compare tags on narrow screens */
@media (max-width: 640px) {
  .compare__tag { font-size: .78rem; padding: 6px 11px; }
  .compare__tag--right { top: auto; bottom: 14px; }
}
.app__tabs { position: absolute; left: 50%; bottom: 6cqw; transform: translateX(-50%); display: flex; gap: 2cqw; padding: 1.8cqw; border-radius: 99px; background: color-mix(in srgb, var(--app-card) 88%, transparent); border: 1px solid var(--line); box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.app__tabs span { width: 13cqw; height: 9.6cqw; border-radius: 99px; display: grid; place-items: center; color: var(--fg-3); }
.app__tabs span.is-on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); }
.app__tabs .ico { width: 4.8cqw; height: 4.8cqw; }

/* skip layout/paint of off-screen sections until they approach the viewport */
.section { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
/* hero copy: CSS-only entrance, independent of JS and fonts */
.js-motion .hero-in, .js-motion .hero__scene { animation: hero-in 1s var(--ease) both; animation-delay: calc(var(--hi, 0) * 90ms + 120ms); }
.js-motion .hero__scene { --hi: 2; animation-name: hero-scene; animation-duration: 1.4s; }
@keyframes hero-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes hero-scene { from { opacity: 0; transform: scale(.96); } }

/* ================================================================== v3: real app screenshots */
/* screenshots are from the dark app theme: keep in-phone overlays dark in both site themes */
.phone--real {
  --nt-bg: rgba(32, 38, 54, 0.9); --fg: #F3F6FB; --fg-2: #A7B1C0; --fg-3: #7D889A; --line: rgba(255, 255, 255, 0.1);
  --accent: #3D8BFF; --accent-ink: #7AA9FF; color-scheme: dark;
}
.phone--real .phone__screen { background: #000; color: var(--fg); }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .7s var(--ease), transform .9s var(--ease); -webkit-user-drag: none; user-select: none; }
.phone--real .phone__island { z-index: 7; }

/* hero: calm home → active home + banner while the target is close */
.phone--hero { --pw: clamp(180px, 18vw, 262px); }
.phone--hero .shot--active { opacity: 0; }
.phone--hero.has-alert .shot--active { opacity: 1; }
.nt--banner { position: absolute; left: 3cqw; right: 3cqw; top: 12.6cqw; z-index: 6; }
@media (max-width: 960px) { .phone--hero { --pw: clamp(150px, 38vw, 220px); } }

/* how: three real screens, one per step */
.phone--how { --pw: clamp(260px, 25vw, 318px); }
.phone--how .shot { opacity: 0; transform: scale(1.02); }
.phone--how .shot[data-s="0"] { opacity: 1; transform: none; }
.phone--how.s1 .shot[data-s="0"] { opacity: 0; transform: scale(.985); }
.phone--how.s1 .shot[data-s="1"] { opacity: 1; transform: none; }
.phone--how.s2 .shot[data-s="1"] { opacity: 0; transform: scale(.985); }
.phone--how.s2 .shot[data-s="2"] { opacity: 1; transform: none; }
.spot { position: absolute; z-index: 3; pointer-events: none; opacity: 0; }
.spot--pin { left: var(--x); top: var(--y); width: 18cqw; height: 18cqw; margin: -9cqw 0 0 -9cqw; border-radius: 50%; border: 2px solid var(--accent); }
.phone--how.s0:not(.s1) .spot--pin { animation: spot-pulse 1.9s .5s ease-out infinite; }
@keyframes spot-pulse { 0% { opacity: .95; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.7); } }
.spot--box { left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 5.6cqw; border: 2px solid var(--accent); box-shadow: 0 0 0 100vmax rgba(2, 4, 9, .5), 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent); transform: scale(1.03); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.phone--how.s1:not(.s2) .spot--box { opacity: 1; transform: none; transition-delay: .45s; }

/* numbered annotations on a real screen, synced with a list */
.mk { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 3; border-radius: 4.6cqw; border: 2px solid transparent; transition: border-color .45s var(--ease), box-shadow .45s var(--ease); }
.mk.is-on { z-index: 2; border-color: var(--accent); box-shadow: 0 0 0 100vmax rgba(2, 4, 9, .48), 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent); }
.mk i { position: absolute; left: -3cqw; top: -3cqw; width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; font: 800 3.6cqw/1 var(--f-sans); font-style: normal; color: #fff; background: color-mix(in srgb, var(--accent) 70%, #0b1424); box-shadow: 0 0 0 1.1cqw color-mix(in srgb, var(--accent) 22%, transparent); transition: transform .45s var(--spring), background .45s; }
.mk.is-on i { background: var(--accent); transform: scale(1.15); }
.mk--ring { width: 15cqw; height: 15cqw; margin: -7.5cqw 0 0 -7.5cqw; border-radius: 50%; }
.mk--ring.is-on { animation: ring-breathe 1.8s ease-in-out infinite; }
@keyframes ring-breathe { 50% { transform: scale(1.12); } }
.annot { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: an; }
.annot li { counter-increment: an; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); transition: border-color .45s var(--ease), background .45s var(--ease); cursor: default; }
.annot li::before { content: counter(an); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem/1 var(--f-sans); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); transition: background .45s, color .45s; }
.annot li b { font-weight: 800; line-height: 1.3; }
.annot li span { color: var(--fg-2); font-size: .95rem; line-height: 1.45; }
.annot li.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.annot li.is-on::before { background: var(--accent); color: #fff; }

/* now */
.phone--now { --pw: clamp(260px, 25vw, 318px); }
.now__copy .annot { margin-top: -4px; }

/* map */
.mapgrid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.mapgrid__stage { display: grid; justify-items: center; position: relative; }
.mapgrid__stage::before { content: ""; position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 62%); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; }
.phone--map { --pw: clamp(260px, 25vw, 318px); }
.mapgrid__copy { display: grid; gap: 18px; }
.mapnote { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--line-2); color: var(--fg-2); font-size: .95rem; line-height: 1.5; }
.mapnote .ico { color: var(--accent-ink); margin-top: 3px; }
.mapnote b { color: var(--fg); }
@media (max-width: 900px) { .mapgrid { grid-template-columns: minmax(0, 1fr); } }

/* bento: real events list ↔ event detail */
.shotviz { background: #000; }
.shotviz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shotviz__a { object-position: 50% 4%; animation: shot-a 9s var(--ease) infinite; }
.shotviz__b { object-position: 50% 86%; animation: shot-b 9s var(--ease) infinite; }
@keyframes shot-a { 0%, 42% { opacity: 1; transform: none; } 50%, 92% { opacity: 0; transform: scale(.98); } 100% { opacity: 1; } }
@keyframes shot-b { 0%, 42% { opacity: 0; transform: translateY(6%); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.shotviz::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }

/* bento: quiet-time switch (as in the app settings) */
.quiet__switch { display: inline-flex; align-items: center; gap: 14px; padding: 10px 14px 10px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.quiet__switch b { font-weight: 700; }
.quiet__toggle { position: relative; width: 50px; height: 30px; border-radius: 99px; background: var(--line-2); animation: qt-bg 6s var(--ease) infinite; }
.quiet__toggle i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); animation: qt-knob 6s var(--ease) infinite; }
@keyframes qt-bg { 0%, 25% { background: var(--line-2); } 35%, 85% { background: var(--accent); } 95%, 100% { background: var(--line-2); } }
@keyframes qt-knob { 0%, 25% { transform: none; } 35%, 85% { transform: translateX(20px); } 95%, 100% { transform: none; } }
.guest__opts { grid-template-columns: auto; }

/* real map under the premium pins and the GPS demo */
.viz-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.92); }