/* ЦИФРОВОЙ РЕЙС — слой 3D и анимаций (14.09.2026)
   Подключается после site.css, только усиления — базовая вёрстка работает и без него */

:root {
  --glow:     0 0 0 1px rgba(194,120,60,.18), 0 10px 30px rgba(194,120,60,.18), 0 30px 70px rgba(28,25,23,.14);
  --deep:     0 2px 4px rgba(28,25,23,.05), 0 8px 16px rgba(28,25,23,.06), 0 20px 40px rgba(28,25,23,.08), 0 40px 80px rgba(28,25,23,.09);
  --ease3d:   cubic-bezier(.16,1,.3,1);
}

/* ============ ЖИВОЙ ФОН ============ */
body { position: relative; overflow-x: hidden; }
body::before,
body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(90px);
  will-change: transform;
}
body::before {
  width: 52vw; height: 52vw; top: -14vw; left: -12vw;
  background: radial-gradient(circle at 40% 40%, rgba(224,149,88,.34) 0%, rgba(194,120,60,.14) 45%, transparent 72%);
  animation: fxFloatA 22s ease-in-out infinite;
}
body::after {
  width: 44vw; height: 44vw; bottom: -16vw; right: -10vw;
  background: radial-gradient(circle at 60% 60%, rgba(28,25,23,.22) 0%, rgba(120,113,108,.1) 48%, transparent 74%);
  animation: fxFloatB 28s ease-in-out infinite;
}
@keyframes fxFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vw, 5vw, 0) scale(1.12); }
}
@keyframes fxFloatB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5vw, -4vw, 0) scale(1.1); }
}

/* ============ ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ============ */
.rv {
  opacity: 0; transform: translate3d(0, 30px, 0) scale(.97);
  transition: opacity .75s var(--ease3d), transform .75s var(--ease3d);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }

/* ============ ТИПОГРАФИКА ============ */
.hero h1 {
  background: linear-gradient(155deg, #1C1917 0%, #44403C 42%, #8a5226 78%, #C2783C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.sec h2 { position: relative; }
.sec:not(.dark) h2::after {
  content: ''; display: block; width: 72px; height: 4px; margin-top: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e09558 0%, #C2783C 55%, rgba(194,120,60,0) 100%);
  box-shadow: 0 2px 8px rgba(194,120,60,.5);
}
.sec.dark h2::after {
  content: ''; display: block; width: 72px; height: 4px; margin-top: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f5c090 0%, #C2783C 60%, rgba(194,120,60,0) 100%);
  box-shadow: 0 0 18px rgba(245,192,144,.45);
}

/* ============ 3D-КАРТОЧКИ ============ */
.grid3, .grid4, .price, .roi-grid, .hero-in, .cta-in { perspective: 1400px; }

.pcard, .fcard, .prcard, .hero-card, .cta-card, .roi-form, .roi-out, .fq, .tbl-wrap, .scard, .vcard {
  transform-style: preserve-3d;
  position: relative;
}
.pcard, .fcard, .prcard, .hero-card, .cta-card, .roi-form, .roi-out, .tbl-wrap {
  box-shadow: var(--deep);
}

/* верхний блик — стеклянная грань */
.pcard::after, .fcard::after, .prcard::after, .hero-card::after, .cta-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.12) 26%, transparent 52%);
  opacity: .9;
}

/* tilt под мышиным курсором — углы ставит fx.js */
.tilt {
  --rx: 0deg; --ry: 0deg; --tz: 0px;
  transition: transform .25s var(--ease3d), box-shadow .25s var(--ease3d);
}
.tilt.on {
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, -8px, var(--tz));
  box-shadow: var(--glow);
}
.tilt.on > * { transform: translateZ(24px); }

/* блик, идущий за курсором */
.shine::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.55), transparent 62%);
  opacity: 0; transition: opacity .3s ease; z-index: 1;
}
.shine.on::before { opacity: 1; }

/* ============ ИКОНКИ-КУБИКИ ============ */
.fic {
  border-radius: 14px;
  background: linear-gradient(150deg, #f2ab74 0%, #e09558 20%, #c2783c 58%, #96551f 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -2px 0 rgba(0,0,0,.28) inset,
    0 3px 0 #7a4a1c,
    0 8px 20px rgba(194,120,60,.5),
    0 18px 36px rgba(194,120,60,.24);
  transition: transform .3s var(--ease3d), box-shadow .3s var(--ease3d);
}
.fcard:hover .fic {
  transform: translateZ(34px) rotateX(-12deg) rotateY(12deg) scale(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 4px 0 #7a4a1c,
    0 16px 32px rgba(194,120,60,.55),
    0 30px 56px rgba(194,120,60,.3);
}

/* ============ КНОПКИ ============ */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-acc::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg); z-index: -1;
}
.btn-acc:hover::after { animation: fxSweep .75s ease; }
@keyframes fxSweep {
  from { left: -80%; }
  to   { left: 130%; }
}
.btn-acc:hover { transform: translateY(-4px) scale(1.02); }
.btn-ghost:hover { transform: translateY(-3px) scale(1.01); }

/* ============ HERO ============ */
.hero-card {
  border-radius: 22px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.96) 0%, rgba(247,243,237,.9) 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
}
.hero-card .hc-row b { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 3px 10px rgba(28,25,23,.12); }
.tag { animation: fxPulse 3.4s ease-in-out infinite; }
@keyframes fxPulse {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 2px 6px rgba(28,25,23,.1); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 6px 18px rgba(194,120,60,.4); }
}

/* ============ ТЁМНАЯ СЕКЦИЯ ============ */
.sec.dark { position: relative; overflow: hidden; }
.sec.dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(194,120,60,.28) 0%, transparent 46%),
    radial-gradient(ellipse at 88% 92%, rgba(224,149,88,.16) 0%, transparent 44%);
}
.sec.dark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}
.sec.dark .wrap { position: relative; z-index: 1; }
.scard { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.snum {
  display: inline-block;
  background: linear-gradient(180deg, #f5c090 0%, #C2783C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(194,120,60,.45));
}

/* ============ ТАРИФЫ ============ */
.prcard.hot { transform: translateY(-10px); z-index: 2; }
.prcard.hot::before {
  content: 'Популярный';
  position: absolute; top: 16px; right: -1px;
  padding: 5px 14px 5px 16px; border-radius: 22px 0 0 22px;
  background: linear-gradient(180deg, #e09558 0%, #a86628 100%); color: #fff;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  box-shadow: 0 2px 0 #7a4a1c, 0 6px 16px rgba(194,120,60,.45);
  z-index: 2;
}
.prval {
  background: linear-gradient(165deg, #C2783C 0%, #8a5226 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.prval small { -webkit-text-fill-color: var(--ink3); }

/* ============ ТАБЛИЦА ============ */
.tbl thead th { backdrop-filter: blur(10px); }
.tbl td.y { text-shadow: 0 2px 8px rgba(22,163,74,.35); }

/* ============ КАЛЬКУЛЯТОР ============ */
.ro-row.net b { text-shadow: 0 3px 14px rgba(22,163,74,.4); }
.ro-row.tot b { text-shadow: 0 3px 14px rgba(194,120,60,.35); }
.ro-kpi div { transition: transform .28s var(--ease3d), box-shadow .28s var(--ease3d); }
.ro-kpi div:hover {
  transform: translateY(-5px) rotateX(6deg);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px rgba(194,120,60,.3);
}

/* ============ АККОРДЕОН И ЧИПСЫ ============ */
.fq { transition: transform .3s var(--ease3d), box-shadow .3s var(--ease3d); }
.fq:hover { transform: translateY(-3px); box-shadow: var(--glow); }
.fq.open { box-shadow: 0 0 0 2px rgba(194,120,60,.3), 0 14px 34px rgba(28,25,23,.12); }
.chips li { transform-style: preserve-3d; }
.chips li:hover { transform: translateY(-4px) rotateX(8deg) scale(1.04); }

/* ============ ШАПКА И ЛОГОТИП ============ */
.brand-img {
  transition: transform .4s var(--ease3d), box-shadow .4s var(--ease3d);
  box-shadow: 0 3px 10px rgba(28,25,23,.25), 0 10px 24px rgba(28,25,23,.15);
}
.brand:hover .brand-img {
  transform: rotateY(18deg) rotateX(-8deg) scale(1.07);
  box-shadow: -6px 8px 20px rgba(28,25,23,.28), 0 16px 34px rgba(194,120,60,.28);
}
.hdr.scrolled { background: rgba(250,247,242,.92); }

/* ============ ПОДВАЛ И ПРОЧЕЕ ============ */
.ftr { position: relative; overflow: hidden; }
.ftr::before {
  content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 70vw; height: 70vw; pointer-events: none;
  background: radial-gradient(circle, rgba(194,120,60,.16) 0%, transparent 62%);
}
.ftr-in, .ftr-bot { position: relative; z-index: 1; }

::selection { background: rgba(194,120,60,.28); }

@media (max-width: 1000px) {
  .prcard.hot { transform: none; }
  .tbl thead th { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  body::before, body::after, .tag { animation: none; }
  .tilt.on { transform: none; }
}