/* SpyMeLive: 3D-система. Всё, кроме текста, выглядит как объёмный «глиняный» предмет:
   плита с толщиной (боковая грань), верхним бликом, внутренней тенью и падающей тенью.
   Подключается последним и переопределяет плоские стили из site.css / app.css. */

:root {
  --slab-top: #262c50;
  --slab-mid: #181c37;
  --slab-bot: #12152b;
  --edge: #090b16;            /* цвет боковой грани («толщина» плиты) */
  --thick: 8px;               /* толщина обычной плиты */
  --slab-bg: linear-gradient(158deg, var(--slab-top) 0%, var(--slab-mid) 52%, var(--slab-bot) 100%);
  --slab-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .16),
    inset 0 -14px 22px rgba(0, 0, 0, .26),
    inset 1.5px 0 0 rgba(255, 255, 255, .05),
    0 var(--thick) 0 -1px var(--edge),
    0 calc(var(--thick) + 12px) 26px -8px rgba(0, 0, 0, .75),
    0 calc(var(--thick) + 32px) 60px -22px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(255, 255, 255, .06);
  --slab-shadow-sm:
    inset 0 1.2px 0 rgba(255, 255, 255, .16),
    inset 0 -8px 14px rgba(0, 0, 0, .24),
    0 4px 0 -1px var(--edge),
    0 10px 18px -6px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(255, 255, 255, .06);
}

/* ------------------------------------------------------------------ */
/* Плиты                                                               */
/* ------------------------------------------------------------------ */
.step, .card, .prem, .safe-list li, .faq-i, .cta-band, .prem-list li,
.chat, .modal-card, .toast, .banner {
  background: var(--slab-bg);
  border: 0;
  box-shadow: var(--slab-shadow);
}
.chips li, .kicker, .pill, .seg, .dock-mock, .lang select, .reason, .icon-btn, .burger, .zero {
  background: var(--slab-bg);
  border: 0;
  box-shadow: var(--slab-shadow-sm);
}
.zero { background: linear-gradient(158deg, #4a1f2e, #2c1420); color: #ffc1cd; }
.step, .card, .safe-list li, .faq-i { --thick: 7px; }
.prem, .cta-band, .modal-card { --thick: 12px; }
.card.b1 { background: linear-gradient(150deg, #5a2b26 0%, #2a1f33 45%, var(--slab-bot) 100%); }
.card.b6 { background: linear-gradient(150deg, #17504f 0%, #182a3c 45%, var(--slab-bot) 100%); }
.prem { background: linear-gradient(150deg, #5c2c25 0%, #21203f 50%, var(--slab-bot) 100%); }
.cta-band { background: linear-gradient(150deg, #6a2f27 0%, #241f3f 46%, #14314a 100%); overflow: visible; }
.faq-i[open] { transform: translateY(3px); --thick: 3px; }

/* Шапка: стеклянная объёмная планка */
.site-h.scrolled, body.nav-open .site-h {
  background: linear-gradient(180deg, rgba(38, 44, 80, .82), rgba(18, 21, 43, .86));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 10px 0 -6px #070813, 0 18px 30px -10px rgba(0, 0, 0, .65);
  border-color: transparent;
}

/* Поле ввода: «вдавленное» */
.chat-f input {
  background: linear-gradient(180deg, #0c0e1e, #14172d);
  border: 0;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .65), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .06);
}

/* ------------------------------------------------------------------ */
/* Кнопки: выпуклые, нажимаются вниз                                    */
/* ------------------------------------------------------------------ */
.btn { transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .15s; }
.btn-primary, .dk-next, .tap-play {
  background: linear-gradient(180deg, #ff8a63 0%, #ff6a4d 45%, #ffa94a 130%);
  color: #2a120a;
  border: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -5px 10px rgba(170, 52, 20, .35),
    0 6px 0 #b6432a,
    0 14px 24px -4px rgba(255, 106, 77, .5);
  transform: translateY(0);
}
.btn-primary:hover, .dk-next:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -5px 10px rgba(170, 52, 20, .35), 0 8px 0 #b6432a, 0 20px 30px -4px rgba(255, 106, 77, .55); }
.btn-primary:active, .dk-next:active, .tap-play:active { transform: translateY(5px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 8px rgba(170, 52, 20, .35), 0 1px 0 #b6432a, 0 4px 8px -2px rgba(255, 106, 77, .4); }
.btn-primary:disabled { transform: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 4px 0 #6d3a2e; }
.btn-ghost {
  background: var(--slab-bg);
  border: 0;
  box-shadow: var(--slab-shadow-sm);
}
.btn-ghost:hover { transform: translateY(-2px); background: linear-gradient(158deg, #313864, #1c2142 55%, #14172f); }
.btn-ghost:active { transform: translateY(4px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06); }
.btn .i3 { width: 30px; height: 30px; margin: -4px 0; }
.btn-sm .i3 { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ */
/* 3D-картинки и иконки                                                 */
/* ------------------------------------------------------------------ */
.i3 { display: inline-block; object-fit: contain; flex: none; height: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); -webkit-user-drag: none; user-select: none; }
.logo-mark { display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); transition: transform .5s var(--ease); }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.08); }

.step-ic, .card-ic { width: auto; height: auto; background: none; border-radius: 0; margin-bottom: 18px; display: block; transform-style: preserve-3d; }
.step-ic .i3, .card-ic .i3 { width: 84px; height: 84px; transition: transform .35s var(--ease); }
.safe-list .card-ic { margin: 0; flex: none; background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; }
.safe-list .card-ic .i3 { width: 68px; height: 68px; }
.step-n { color: rgba(255, 255, 255, .05); -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(255, 255, 255, .04); }
.chips .i3 { width: 26px; height: 26px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.prem-list .i3 { width: 34px; height: 34px; }
.badge { background: linear-gradient(180deg, #4a3a2a, #2b2230); color: #ffd28a; box-shadow: var(--slab-shadow-sm); }
.badge .i3 { width: 22px; height: 22px; }
.shield { background: none !important; width: auto !important; height: auto !important; }
.shield .i3 { width: 150px; height: 150px; animation: bob3d 5s ease-in-out infinite; }

/* Плавающие 3D-шары фона */
body.v-landing, body.v-doc { position: relative; overflow-x: clip; }
.orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; will-change: transform; }
.orb.o1 { width: 220px; height: 220px; left: -130px; top: 26%; background: radial-gradient(circle at 32% 28%, #ffd0b8 0%, #ff6a4d 38%, #a03a26 78%, #5b1f14 100%); box-shadow: inset -14px -18px 34px rgba(0, 0, 0, .4), 0 40px 60px -20px rgba(0, 0, 0, .7); opacity: .9; animation: drift 14s ease-in-out infinite; }
.orb.o2 { width: 170px; height: 170px; right: -105px; top: 47%; background: radial-gradient(circle at 32% 28%, #d4fff6 0%, #2dd4bf 40%, #12756a 80%, #0a3f3a 100%); box-shadow: inset -10px -14px 28px rgba(0, 0, 0, .4), 0 30px 50px -18px rgba(0, 0, 0, .7); opacity: .85; animation: drift 11s ease-in-out infinite reverse; }
.orb.o3 { width: 90px; height: 90px; right: -32px; top: 8%; background: radial-gradient(circle at 32% 28%, #fff1cf 0%, #ffb84d 45%, #a86d16 88%); box-shadow: inset -8px -10px 20px rgba(0, 0, 0, .35), 0 20px 30px -12px rgba(0, 0, 0, .6); opacity: .8; animation: drift 9s ease-in-out infinite; }
@media (max-width: 1240px) { .orbs { display: none; } }
.orb.o4 { width: 130px; height: 130px; left: -78px; top: 72%; background: radial-gradient(circle at 32% 28%, #fff1cf 0%, #ffb84d 45%, #a86d16 88%); box-shadow: inset -9px -12px 24px rgba(0, 0, 0, .35), 0 24px 40px -14px rgba(0, 0, 0, .65); opacity: .85; animation: drift 12s ease-in-out infinite; }
@keyframes drift { 50% { transform: translate3d(14px, -26px, 0) rotate(8deg); } }
@keyframes bob3d { 50% { transform: translateY(-10px) rotateY(14deg); } }
body.v-landing main, body.v-landing .site-f, body.v-doc main, body.v-doc .site-f { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/* Герой: 3D-сцена с параллаксом                                        */
/* ------------------------------------------------------------------ */
.scene { position: relative; width: 100%; max-width: 580px; margin-inline: auto; perspective: 1400px; }
.scene-in { position: relative; transform-style: preserve-3d; transition: transform .25s var(--ease);
  transform: rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)); }
.hero-img { position: relative; width: 100%; height: auto; z-index: 1; transform: translateZ(0);
  filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .55)); animation: heroFloat 7s ease-in-out infinite; }
.glow-floor { position: absolute; left: 12%; right: 12%; bottom: -3%; height: 12%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 106, 77, .5), transparent 72%); filter: blur(14px); transform: translateZ(-40px); }
.fl { position: absolute; z-index: 2; transition: transform .2s var(--ease);
  transform: translate3d(calc(var(--px, 0) * var(--d, 30) * 1px), calc(var(--py, 0) * var(--d, 30) * 1px), calc(var(--d, 30) * 1px)); }
.fl .i3 { animation: bob3d 6s ease-in-out infinite; }
.fl-1 { --d: 46; left: -4%; top: 6%; }
.fl-2 { --d: 70; right: -6%; bottom: 20%; }
.fl-2 .i3 { animation-delay: -2s; }
.fl-3 { --d: 30; left: 4%; bottom: 6%; }
.fl-3 .i3 { animation-delay: -4s; }
@keyframes heroFloat { 50% { transform: translateY(-12px); } }

.cta-fl { position: absolute; top: 50%; z-index: 2; }
.cta-l { left: clamp(-30px, -2vw, 0px); transform: translateY(-50%) rotate(-10deg); }
.cta-r { right: clamp(-30px, -2vw, 0px); transform: translateY(-50%) rotate(10deg); }
.cta-fl .i3 { animation: bob3d 6s ease-in-out infinite; }
.cta-r .i3 { animation-delay: -3s; }
.cta-band { position: relative; }

/* ------------------------------------------------------------------ */
/* Наклон карточек под курсором                                         */
/* ------------------------------------------------------------------ */
[data-tilt] { transform-style: preserve-3d; position: relative;
  transform: perspective(1000px) rotateX(calc(var(--tx, 0) * 1deg)) rotateY(calc(var(--ty, 0) * 1deg)) translateZ(0);
  transition: transform .25s var(--ease), box-shadow .3s; }
[data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .13), transparent 55%); }
[data-tilt].tilting { transition: transform .06s linear, box-shadow .3s; }
[data-tilt].tilting::after { opacity: 1; }
[data-tilt].tilting .i3 { transform: translateZ(46px) scale(1.06); }
.js-reveal [data-tilt].in { transform: perspective(1000px) rotateX(calc(var(--tx, 0) * 1deg)) rotateY(calc(var(--ty, 0) * 1deg)) !important; }

/* ------------------------------------------------------------------ */
/* Приложение: 3D-сцена, панели, кнопки                                 */
/* ------------------------------------------------------------------ */
.v-app .stage {
  border: 0;
  background: #05060b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 10px 0 -1px var(--edge), 0 30px 50px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
}
.pip { border: 0; border-radius: 20px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 6px 0 -1px var(--edge), 0 16px 26px -6px rgba(0, 0, 0, .8); }
[data-phase="ready"] .pip { box-shadow: none; border-radius: 0; }
.pip-off .i3 { width: 64px; height: 64px; }
.pip-mute { background: none; width: auto; height: auto; }
.pip-mute .i3 { width: 26px; height: 26px; }

.icon-btn { width: 44px; height: 44px; }
.icon-btn .i3 { width: 24px; height: 24px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.icon-btn:active, .dk:active { transform: translateY(3px); }

.dk { width: 62px; height: 62px; border: 0; background: var(--slab-bg);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .2), inset 0 -8px 14px rgba(0, 0, 0, .26), 0 6px 0 -1px var(--edge), 0 14px 22px -6px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s; }
.dk:hover { background: linear-gradient(158deg, #343b6a, #1d2244 55%, #14172f); transform: translateY(-2px); }
.dk:active { transform: translateY(5px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .5), 0 1px 0 -1px var(--edge), 0 0 0 1px rgba(255, 255, 255, .06); }
.dk .i3 { width: 36px; height: 36px; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5)); transition: transform .25s var(--ease); }
.dk:hover .i3 { transform: scale(1.12) rotate(-4deg); }
.dk.is-off { background: linear-gradient(158deg, #5a2233, #2d1420); }
.dk-next { width: auto; height: 64px; padding: 0 30px 0 22px; }
.dk-next .i3 { width: 34px; height: 34px; }
.dk-stop { background: linear-gradient(158deg, #4a2030, #241320); }
.unread { box-shadow: 0 3px 0 #99321f, 0 6px 10px rgba(0, 0, 0, .5); background: linear-gradient(180deg, #ff8a63, #ff6a4d); }

.ov-ic { width: auto; height: auto; background: none; margin-bottom: 10px; }
.ov-ic .i3 { width: 96px; height: 96px; }
.modal-sm .ov-ic .i3 { width: 110px; height: 110px; }
.badge-18 { width: auto; height: auto; background: none; margin-bottom: 8px; }
.badge-18 .i3 { width: 96px; height: 96px; }
.ov-ready .wave { display: inline-block; margin-bottom: 4px; animation: wave 2.6s ease-in-out infinite; transform-origin: 70% 80%; }
.ov-ready .wave .i3 { width: 76px; height: 76px; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.radar span { background: none; box-shadow: none; inset: 24px; perspective: 600px; }
.radar span .i3 { width: 100%; height: 100%; animation: spin3d 6s linear infinite; }
@keyframes spin3d { to { transform: rotateY(360deg); } }
.radar i { border-color: rgba(255, 184, 77, .5); }
.checks .i3 { width: 24px; height: 24px; margin-top: 0; filter: none; }
.seg-b .i3 { width: 18px; height: 18px; filter: none; }
.seg { --thick: 4px; }
.seg-b.on { background: linear-gradient(180deg, #fff, #ded9d0); color: #1a1420; box-shadow: 0 3px 0 #a9a39a, 0 6px 10px rgba(0, 0, 0, .4); }
.reason.on { background: linear-gradient(158deg, #6a2f27, #3b1e28); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4), 0 0 0 2px var(--coral); }
.remote-off { background: var(--slab-bg); box-shadow: var(--slab-shadow); }
.remote-off .i3 { width: 64px; height: 64px; }
.tap-play .i3 { width: 28px; height: 28px; }
.send { background: var(--slab-bg); box-shadow: var(--slab-shadow-sm); }
.send .i3 { width: 28px; height: 28px; filter: none; }
.send:active { transform: translateY(3px); }
.send:disabled { opacity: .5; }

/* Сообщения: объёмные «капсулы» */
.msgs .me { background: linear-gradient(180deg, #ff8a63, #ff6a4d 60%, #ffa04a 140%); color: #2a120a;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .5), 0 3px 0 #b6432a, 0 8px 12px -4px rgba(0, 0, 0, .5); }
.msgs .them { background: linear-gradient(158deg, #2e355f, #1c2142); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .14), 0 3px 0 #0a0c18, 0 8px 12px -4px rgba(0, 0, 0, .5); }
.float li { background: linear-gradient(158deg, rgba(46, 53, 95, .92), rgba(28, 33, 66, .92)); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .14), 0 3px 0 #0a0c18, 0 8px 12px -4px rgba(0, 0, 0, .6); }

@media (max-width: 959px) {
  .chat { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .16), 0 -8px 0 -1px var(--edge), 0 -20px 60px rgba(0, 0, 0, .6); }
  .v-app .stage { box-shadow: none; }
  .dk { width: 56px; height: 56px; }
  .dk .i3 { width: 32px; height: 32px; }
  .dk-next { height: 58px; padding: 0 24px 0 18px; }
  .orbs { display: none; }
}
@media (max-width: 1020px) {
  .scene { max-width: 480px; margin-top: 16px; }
}
@media (max-width: 560px) {
  .btn .i3 { width: 28px; height: 28px; }
  .step-ic .i3, .card-ic .i3 { width: 72px; height: 72px; }
  .fl-2 { right: -2%; } .fl-1 { left: -2%; }
  .fl .i3 { width: 62px; height: 62px; }
  .cta-fl .i3 { width: 78px; height: 78px; }
  .cta-l { left: -8px; top: 12%; } .cta-r { right: -8px; top: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img, .fl .i3, .orb, .shield .i3, .cta-fl .i3, .wave, .radar span .i3 { animation: none !important; }
  [data-tilt], .scene-in { transform: none !important; }
}
@media (hover: none) { [data-tilt] { transform: none !important; } }

/* ------------------------------------------------------------------ */
/* Исправления по результатам проверки на телефоне                      */
/* ------------------------------------------------------------------ */
.dk.dk-next {
  width: auto; height: 64px; padding: 0 28px 0 18px; gap: 8px;
  background: linear-gradient(180deg, #ff8a63 0%, #ff6a4d 45%, #ffa94a 130%);
  color: #2a120a; font-weight: 800; font-size: 18px; white-space: nowrap;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -5px 10px rgba(170, 52, 20, .35), 0 6px 0 #b6432a, 0 14px 24px -4px rgba(255, 106, 77, .5);
}
.dk.dk-next:hover { background: linear-gradient(180deg, #ff9670 0%, #ff6a4d 45%, #ffa94a 130%); transform: translateY(-2px); }
.dk.dk-next:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 1px 0 #b6432a, 0 4px 8px -2px rgba(255, 106, 77, .4); }
.pip { z-index: 6; }
[data-phase="ready"] .pip { z-index: 1; }

@media (max-width: 959px) {
  .dock { gap: clamp(4px, 1.6vw, 10px); flex-wrap: nowrap; box-sizing: border-box; max-width: 100%;
    padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .dk { flex: 1 1 0; min-width: 0; max-width: 56px; width: auto; height: auto; aspect-ratio: 1 / 1; }
  .dk .i3 { width: clamp(20px, 7vw, 32px); height: clamp(20px, 7vw, 32px); }
  .dk.dk-next { flex: 0 1 auto; max-width: none; aspect-ratio: auto; height: clamp(46px, 14vw, 58px); padding: 0 clamp(12px, 3.6vw, 22px) 0 clamp(8px, 2.6vw, 14px); font-size: clamp(15px, 4.2vw, 18px); gap: 4px; }
  .dk.dk-next .i3 { width: clamp(22px, 7vw, 32px); height: clamp(22px, 7vw, 32px); }
}
/* Во время разговора 7 кнопок: на узком экране «Дальше» становится иконкой-капсулой */
@media (max-width: 560px) {
  [data-phase="connected"] .dk.dk-next { flex: 1.4 1 0; max-width: 78px; height: clamp(38px, 12.2vw, 56px); aspect-ratio: auto; padding: 0; justify-content: center; }
  [data-phase="connected"] .dk.dk-next > span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .dk { max-width: 46px; }
}
@media (max-width: 520px) {
  .a-top .logo-t { display: none; }
  .a-top { gap: 8px; }
}