/* ════════════════════════════════════════════════════════════════════════
   «До встречи» — маркетинговый лендинг (recreate из design_handoff_landing).
   Тёмная тема = канон прод Mini App. Все значения — токены из tokens.css
   (link'ается отдельно перед этим файлом). Здесь: self-hosted Manrope,
   keyframes/reveal/parallax-окружение, адаптив, hover/card/phone-классы.
   Источник правды дизайна — design/design_handoff_landing/README.md.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Manrope (self-hosted, subset по unicode-range — кириллица + латиница) ─── */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/landing/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/landing/fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/landing/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/landing/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ─── Base ─── */
*{box-sizing:border-box}
html{font-family:var(--p-font-family-sans);scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--surface-canvas)}

#lv-root{
  --glow-hero:0 0 200px 40px var(--p-color-teal-a07);
  --shadow-card:0 1px 2px rgba(0,0,0,.20),0 10px 30px rgba(0,0,0,.22);
  --shadow-float:0 20px 54px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.30);
  --glass-nav:color-mix(in srgb, var(--surface-base) 72%, transparent);
  --glass-card:color-mix(in srgb, var(--surface-overlay) 80%, transparent);
  font-family:var(--p-font-family-sans);
  background:var(--surface-canvas);
  color:var(--text-primary);
  position:relative;
  overflow-x:clip;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
#lv-root ::selection{background:var(--brand-soft);color:var(--text-primary)}

/* ─── Reveal-on-scroll (включается классом .lv-anim из app.js) ─── */
#lv-root [data-reveal]{opacity:1;transform:none;will-change:auto}
#lv-root.lv-anim [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--p-easing-out),transform .7s var(--p-easing-out)}

/* ─── Ambient keyframes ─── */
@keyframes lvFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes lvFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes lvFloatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes lvPulse{0%,100%{opacity:.45}50%{opacity:.85}}
@keyframes lvPin{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes lvSpin{to{transform:rotate(360deg)}}
@keyframes lvSpinR{to{transform:rotate(-360deg)}}

.lv-flank{transition:transform .3s var(--p-easing-out)}
@media (max-width:900px){ .lv-flank{display:none!important} }

/* tweak: motion=Спокойно freezes ambient float/pulse/pin animations */
#lv-root.lv-calm *{animation-play-state:paused!important}
/* tweak: density overrides section rhythm */
#lv-root.lv-dense main>section{padding-top:clamp(34px,5vw,60px)!important;padding-bottom:clamp(34px,5vw,60px)!important}
#lv-root.lv-airy main>section{padding-top:clamp(76px,11vw,132px)!important;padding-bottom:clamp(76px,11vw,132px)!important}

/* ─── Hover-эффекты (вынесены из inline onmouseover — CSP-safe) ─── */
.lv-navlink{color:var(--text-secondary);transition:color .15s var(--p-easing-out)}
.lv-navlink:hover{color:var(--text-primary)}
.lv-link-arrow{border-bottom:1px solid transparent;transition:border-color .15s var(--p-easing-out)}
.lv-link-arrow:hover{border-bottom-color:var(--brand-default)}
.lv-flink{color:var(--text-secondary);transition:color .15s var(--p-easing-out)}
.lv-flink:hover{color:var(--text-primary)}

/* Карточка-бенто (Возможности): база + hover-подъём с бренд-бордером и свечением */
.lv-card{
  position:relative;overflow:hidden;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:var(--p-radius-lg);
  padding:var(--p-space-6);
  box-shadow:var(--shadow-card);
  transition:transform .25s var(--p-easing-out),border-color .25s var(--p-easing-out),box-shadow .25s var(--p-easing-out);
}
.lv-card:hover{
  transform:translateY(-4px);
  border-color:var(--brand-default);
  box-shadow:var(--shadow-card),0 0 0 1px var(--brand-soft),0 24px 60px var(--brand-softer);
}

/* Карточка-ссылка (Ресурсы) */
.lv-res-card{
  display:block;text-decoration:none;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:var(--p-radius-lg);
  padding:var(--p-space-5);
  box-shadow:var(--shadow-card);
  transition:transform .25s var(--p-easing-out),border-color .25s var(--p-easing-out);
}
.lv-res-card:hover{transform:translateY(-4px);border-color:var(--brand-default)}

/* ─── Рамка телефона (рендерится phones.js; здесь — only screen-fit) ─── */
.lv-phone{display:inline-block;line-height:0}
.lv-phone-screen img,
.lv-phone-screen video{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-base)}

/* ─── Адаптив ─── */
@media (max-width:980px){
  #lv-hero-grid{grid-template-columns:1fr!important;text-align:center}
  #lv-hero-copy{align-items:center!important}
  #lv-hero-cta{justify-content:center!important}
  #lv-trustrow{justify-content:center!important}
  #lv-proof{margin-inline:auto}
  .lv-spot{grid-template-columns:1fr!important}
  .lv-spot-media{order:-1}
  .lv-side-phone{display:none!important}
}
@media (max-width:760px){
  .lv-bento{grid-template-columns:1fr!important}
  .lv-bento-lg,.lv-bento-tall{grid-column:auto!important;grid-row:auto!important}
  .lv-fan{transform:none!important;margin:0!important}
  .lv-pin{display:none!important}
  .lv-res{grid-template-columns:1fr!important}
  #lv-sticky{display:flex!important}
  .lv-navlinks{display:none!important}
  #lv-root{padding-bottom:84px}
  #lv-final-grid{grid-template-columns:1fr!important}
  .lv-footer-grid{grid-template-columns:1fr 1fr!important}
}
@media (max-width:520px){
  .lv-footer-grid{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){
  #lv-root *{animation:none!important}
  html{scroll-behavior:auto!important}
  #lv-root [data-reveal]{opacity:1!important;transform:none!important}
}