/* =====================================================================
   Nebo Pro — головна сторінка (доповнення до site.css).
   Лише transform/opacity в анімаціях; усе статичне без JS і з reduced-motion.
   ===================================================================== */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mock { position: absolute; inset: 0; }
.ico svg, .i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html:not(.js) .scene-switch, html:not(.js) .js-only { display: none !important; }

/* ---------- Пауза поза екраном / у фоновій вкладці ---------- */
.paused, .paused *, .tab-hidden *, .tab-hidden *::before, .tab-hidden *::after,
.paused *::before, .paused *::after { animation-play-state: paused !important; }

/* ---------- Поява з каскадом ---------- */
.stagger > .reveal:nth-child(2) { --d: .08s; }
.stagger > .reveal:nth-child(3) { --d: .16s; }
.stagger > .reveal:nth-child(4) { --d: .24s; }
.stagger > .reveal:nth-child(5) { --d: .32s; }
.stagger > .reveal:nth-child(6) { --d: .40s; }

/* ---------- Дзеркальний відблиск скла за курсором ---------- */
.spec::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 255, 176, .09), rgba(255, 255, 255, .03) 40%, transparent 65%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.spec.lit::after { opacity: 1; }
.spec > * { position: relative; z-index: 2; }

/* ---------- Hero ---------- */
.hero { overflow-x: clip; }
.hero h1 .ln { display: block; }
.js .hero .h-in { animation: h-in 1.1s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes h-in { from { opacity: 0; transform: translateY(26px); } }
.hud-strip .v.ok { color: var(--signal); }
.stage-hud { z-index: 1; }
.stage-hud.bl { left: 0; bottom: 6%; }
.radar .blip-label.t { transform: translate(-50%, -190%); }
@media (max-width: 520px) { .radar .blip-label { display: none; } }
.hud-strip .tm-inline { font-size: 13px; color: #FF8A80; margin-left: 6px; }

.stage { --tx: 0; --ty: 0; }
.stage .radar { transform: translate(-50%, -50%) translate3d(calc(var(--tx) * 10px), calc(var(--ty) * 8px), 0); }
.stage .iphone { transform: translate3d(calc(var(--tx) * -14px), calc(var(--ty) * -10px), 0); transition: transform .5s var(--ease); }
.stage .radar, .stage .iphone { will-change: transform; }
.radar .blip-label {
  position: absolute; z-index: 2; white-space: nowrap;
  left: calc(50% + var(--r) * sin(var(--a) * 1deg) * 0.5%); top: calc(50% - var(--r) * cos(var(--a) * 1deg) * 0.5%);
  transform: translate(12px, -140%);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #FF8A80;
  padding: 3px 7px; border-radius: 7px; background: rgba(11, 15, 10, .72); border: 1px solid rgba(227, 59, 46, .4);
}
.radar .ring-pulse {
  position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%;
  border: 1px solid rgba(200, 255, 77, .35); opacity: 0; animation: ring-out 6s var(--ease) infinite;
}
.radar .ring-pulse.b { animation-delay: 3s; }
@keyframes ring-out { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }

/* Dynamic Island, що «оживає» під час тривоги */
.iphone .island { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--pt) * 13); transition: width .6s var(--ease); }
.island .isl { display: flex; align-items: center; gap: calc(var(--pt) * 5); opacity: 0; transition: opacity .25s; font-family: var(--rounded); font-weight: 800; font-size: calc(var(--pt) * 13); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.island .isl svg { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); color: var(--red); }
[data-scene="alert"] .island, .island.wide { width: calc(var(--pt) * 200); }
[data-scene="alert"] .island .isl, .island.wide .isl { opacity: 1; transition-delay: .3s; }

/* Мапа в мокапі */
.app-map .ua-map .kpin { fill: var(--signal); }
.kpin-ring { fill: none; stroke: var(--signal); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: kping 2.4s var(--ease) infinite; }
[data-scene="alert"] .app-map .kpin { fill: #fff; }
[data-scene="alert"] .kpin-ring { stroke: #fff; }
@keyframes kping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
.app-title .logo { color: var(--signal); }
.status-t .big.ok { color: var(--signal); }
.status-t .big.red { color: #FF6B5E; }
.advice .meter { margin-left: auto; }

/* ---------- Цифри ---------- */
.stats-zero { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; text-align: center; color: #C9CBB8; }
.stats-zero b { font-family: var(--mono); font-size: 22px; color: var(--signal); }

/* ---------- Жива мапа ---------- */
.map-wrap { overflow: hidden; border-radius: 18px; }
.map-scan {
  position: absolute; top: 0; bottom: 0; left: 0; width: 18%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(200, 255, 77, .07) 70%, rgba(200, 255, 77, .35) 99%, transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
.map-wrap .pin { z-index: 2; }
.map-wrap .pin-label { z-index: 3; font-size: 10px; }
.map-wrap .pin.sev { width: 10px; height: 10px; margin: -5px; }
.map-wrap .pin.sev::before, .map-wrap .pin.sev::after { animation: none; opacity: 0; }
.map-wrap .pin-label.l { transform: translate(calc(-100% - 12px), -50%); }
.map-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-top: 4px; }
.map-foot .legend { margin-top: 14px; }
.map-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
@media (max-width: 520px) { .map-wrap .pin-label { font-size: 9px; padding: 2px 6px; } }

/* ---------- Сектор ---------- */
.sector-viz .pt-core { fill: var(--signal); }
.sector-viz .pt-ring { fill: none; stroke: var(--signal); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: kping 2.6s var(--ease) infinite; }
.sector-viz .pt-ring.b { animation-delay: 1.3s; }
.sector-viz .scan-ring { fill: none; stroke: rgba(200, 255, 77, .25); stroke-width: 1; stroke-dasharray: 3 6; transform-box: fill-box; transform-origin: center; animation: sweep 40s linear infinite; }
.sector-viz .lbl { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; fill: var(--khaki); }
.sector-viz .lbl.on { fill: var(--signal); }
.sector-viz .grid-s { stroke: rgba(168, 159, 122, .08); stroke-width: 1; }
.sector-viz .vhud { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sector-viz .vhud .tag { font-size: 10px; }
.sector-viz .row b { overflow-wrap: anywhere; }

/* ---------- «Стежу» ---------- */
.watch-list .search { margin-bottom: 8px; }
.watch-list .search .typed { color: var(--white); }
.place .who { display: grid; gap: 1px; min-width: 0; }
.place .nm { overflow-wrap: anywhere; }
.tgl { position: relative; width: 40px; height: 24px; border-radius: 99px; flex: none; background: rgba(255, 255, 255, .14); }
.tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .3s var(--ease); }
.tgl.on { background: #34C759; }
.tgl.on::after { transform: translateX(16px); }
.place .st { margin-left: auto; }
@media (max-width: 420px) { .place .st { font-size: 10px; } .place { gap: 9px; } }

/* ---------- Вітрина: від тривоги до відбою (sticky) ---------- */
.show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); }
.show-steps { display: grid; }
.step { min-height: 78vh; display: flex; align-items: center; }
.step:first-child { min-height: 64vh; align-items: flex-start; padding-top: 6vh; }
.step:last-child { min-height: 70vh; }
.step-card { padding: clamp(22px, 3vw, 32px); max-width: 520px; transition: border-color .5s, box-shadow .5s; }
.step-card .num { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--khaki); }
.step-card h3 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 10px; }
.step-card p { color: #C2C4B0; margin: 0; }
.step-card .di-stack { margin-top: 22px; justify-items: start; }
.js .step .step-card { opacity: .45; transition: opacity .5s var(--ease), border-color .5s; }
.js .step.is-active .step-card { opacity: 1; border-color: rgba(200, 255, 77, .28); }

.show-rail { position: sticky; top: 84px; height: calc(100vh - 100px); min-height: 560px; display: grid; place-items: center; align-self: start; }
.show-phone { display: grid; justify-items: center; gap: 18px; perspective: 1600px; }
.show-phone .iphone { --w: min(300px, 74vw, calc((100vh - 200px) * 393 / 852)); }
.show-phone .screen > .layer { position: absolute; inset: 0; opacity: 0; transform: translateY(3%) scale(.97); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.show-phone .screen > .layer.on { opacity: 1; transform: none; }
.show-phone .island { z-index: 30; }
/* справжній скриншот уже має свій статус-бар */
.show-phone .screen:has(> .layer.on.has-shot) > .statusbar, .show-phone .screen:has(> .layer.on.has-shot) > .home-ind { visibility: hidden; }
.show[data-active="2"] .show-phone .island { width: calc(var(--pt) * 200); }
.show[data-active="2"] .show-phone .island .isl { opacity: 1; transition-delay: .3s; }
.show-dots { display: flex; gap: 8px; align-items: center; }
.show-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); transition: width .4s var(--ease), background .4s; }
.show-dots i.on { width: 26px; background: var(--signal); }
.show-cap { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--khaki); text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .show-phone .iphone { transform: rotateY(calc((var(--p, .5) - .5) * -16deg)) rotateX(3deg) translateY(calc((var(--p, .5) - .5) * -14px)); }
}
html:not(.js) .show-rail { position: relative; top: 0; height: auto; min-height: 0; }
html:not(.js) .step { min-height: 0; padding: 14px 0; }

/* мобільна вітрина: iPhone прилипає вгорі, картки проходять під ним */
@media (max-width: 900px) {
  .show { grid-template-columns: 1fr; gap: 0; }
  .show-rail { order: -1; top: 70px; height: auto; min-height: 0; z-index: 1; padding: 6px 0 10px; }
  .show-phone { gap: 10px; }
  .show-phone .iphone { --w: min(176px, 44vw, calc((100vh - 330px) * 393 / 852)); }
  .show-steps { position: relative; z-index: 2; }
  .step, .step:first-child, .step:last-child { min-height: 72vh; align-items: flex-end; padding: 0 0 4vh; }
  .step:first-child { min-height: 46vh; }
  .step-card { background: linear-gradient(180deg, rgba(20, 27, 20, .92), rgba(14, 20, 16, .94)); }
  .show-dots i { width: 6px; height: 6px; } .show-dots i.on { width: 20px; }
}

/* екрани блокування */
.notif.n1, .la.n1 { top: calc(var(--pt) * 292); }
.notif .ic.ok { background: #22C055; }
.notif .ts.ok { color: #7DF29A; }
.siren {
  position: absolute; left: calc(var(--pt) * 22); right: calc(var(--pt) * 22); top: calc(var(--pt) * 440);
  display: flex; align-items: center; gap: calc(var(--pt) * 10);
  font-family: var(--mono); font-weight: 700; font-size: calc(var(--pt) * 10.5); letter-spacing: .1em; color: rgba(255, 255, 255, .8);
}
.siren .bars { display: flex; align-items: center; gap: calc(var(--pt) * 3); height: calc(var(--pt) * 26); }
.siren .bars i { width: calc(var(--pt) * 3.5); height: 100%; border-radius: 2px; background: #FF8A80; transform-origin: center; animation: bar 1.1s ease-in-out infinite; }
.siren .bars i:nth-child(2n) { animation-delay: -.3s; } .siren .bars i:nth-child(3n) { animation-delay: -.6s; } .siren .bars i:nth-child(5n) { animation-delay: -.85s; }
@keyframes bar { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.lock-chip {
  position: absolute; left: 50%; top: calc(var(--pt) * 440); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 6); white-space: nowrap;
  padding: calc(var(--pt) * 7) calc(var(--pt) * 14); border-radius: 99px;
  font-family: var(--mono); font-weight: 800; font-size: calc(var(--pt) * 11); letter-spacing: .1em; color: var(--signal);
}
.lock-chip::before { content: ""; width: calc(var(--pt) * 7); height: calc(var(--pt) * 7); border-radius: 50%; background: currentColor; }
.lock .torch, .lock .cam {
  position: absolute; bottom: calc(var(--pt) * 46); width: calc(var(--pt) * 50); height: calc(var(--pt) * 50); border-radius: 50%;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1);
}
.lock .torch { left: calc(var(--pt) * 46); } .lock .cam { right: calc(var(--pt) * 46); }
.app-map .zoom-map { position: absolute; width: 124%; max-width: none; left: -12%; top: calc(var(--pt) * 105); }
.status-t .big.red { font-size: calc(var(--pt) * 21); }
.zoom-map use { stroke-width: .7 !important; }
.zoom-map .kpin { fill: #fff; }
.zoom-map .kpin-ring { stroke: #fff; stroke-width: 1.2; }
.zoom-map .zl { font-family: var(--mono); font-size: 6px; font-weight: 700; letter-spacing: .1em; fill: rgba(255, 255, 255, .8); }

/* ---------- Вібро ---------- */
.vibe-tabs[role="tablist"] { scrollbar-width: none; }
.vibe-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
.vibe-side { display: grid; gap: 18px; }

/* ---------- Apple Watch ---------- */
.watch-stage { position: relative; display: flex; gap: clamp(18px, 4vw, 40px); justify-content: center; align-items: center; flex-wrap: wrap; padding: 20px 0; }
.watch-stage .wcol { display: grid; justify-items: center; }
.watch-stage .watch.sm { --w: min(190px, 44vw); }
.haptic { position: absolute; inset: -14%; border-radius: 34%; border: 1.5px solid rgba(200, 255, 77, .5); opacity: 0; pointer-events: none; animation: hap 2.8s var(--ease) infinite; }
.haptic.b { animation-delay: .25s; }
@keyframes hap { 0% { transform: scale(.82); opacity: 0; } 8% { opacity: .9; } 40% { transform: scale(1.08); opacity: 0; } 100% { opacity: 0; } }
.wscreen .w-btn { margin-left: calc(var(--pt) * 10); margin-right: calc(var(--pt) * 10); }
.w-card .t { text-transform: uppercase; }
.comp-c .ring + b { position: relative; }

/* ---------- Ще можливості ---------- */
.span2 { grid-column: span 2; }
@media (max-width: 640px) { .span2 { grid-column: auto; } }
.mini .big-t { font-family: var(--mono); font-weight: 800; font-size: 28px; color: var(--white); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.mini .reply { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(185, 179, 140, .2); color: #D5D7C6; }
.mini .muted { color: var(--muted); font-size: 13px; }
.mini .wx-src { margin-top: 10px; font-size: 12px; color: var(--muted); }
.mini .off svg { width: 22px; height: 22px; color: var(--khaki-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 7px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--white);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset; }

/* ---------- Тарифи / приватність / джерело ---------- */
.tiers .card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tiers .card li span:last-child { white-space: nowrap; }
.tiers .card li .yes { color: var(--signal); font-weight: 700; }
.privacy-band h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.025em; margin: 14px 0 12px; }
.privacy-band p { color: #C2C4B0; }
.privacy-band .checks { margin-top: 18px; }
.privacy-band .btn { margin-top: 24px; }
.privacy-band .lock-ico { align-self: start; }
.source { padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.source h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.015em; margin-top: 6px; }
.source p { margin: 6px 0 0; color: #C2C4B0; }

/* ---------- Фінал ---------- */
.final .accent { background: linear-gradient(100deg, var(--signal) 0%, #E8FFB0 45%, var(--khaki-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final .lead { margin-inline: auto; }
.final .radar { width: min(760px, 130vw); -webkit-mask: radial-gradient(circle closest-side, #000 60%, transparent 99%); mask: radial-gradient(circle closest-side, #000 60%, transparent 99%); }

/* ---------- Менше руху ---------- */
@media (prefers-reduced-motion: reduce) {
  .stage .radar { transform: translate(-50%, -50%); }
  .stage .iphone { transform: none; }
  .map-scan, .radar .ring-pulse, .haptic { display: none; }
  .js .step .step-card { opacity: 1; }
  .siren .bars i { transform: scaleY(.6); }
}