/* ============================================================================
   BuhAI · theme 2026-10 — сине-голубая палитра, видео-фоны разделов,
   стеклянные карточки, реалистичный документ в hero
   ============================================================================ */

/* ---------- section video backgrounds ---------- */
.vsec { position: relative; isolation: isolate; overflow: hidden; }
.vsec > .bgv, .has-v > .bgv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
.vsec > .bgveil, .has-v > .bgveil { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v-light > .bgveil { background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(247,250,255,.48)); }
.v-hero > .bgveil { background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 38%, rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 100%); }
.v-dark > .bgveil { background: radial-gradient(ellipse at center, rgba(10,22,48,.62), rgba(10,22,48,.9)); }
.vsec::before { z-index: -1; }              /* existing glow layers stay above the video */
.vsec > .container { position: relative; }
.cta-final.vsec { background: var(--bg-dark); }

/* dark chat block and featured ERP card carry their own loop */
.has-v { position: relative; isolation: isolate; overflow: hidden; }
.chat-block.has-v > .bgveil { background: linear-gradient(90deg, rgba(10,22,48,.9) 0%, rgba(10,22,48,.62) 60%, rgba(10,22,48,.4) 100%); }
.p3-featured.has-v > .bgveil { background: linear-gradient(180deg, rgba(10,22,48,.55) 0%, rgba(10,22,48,.8) 60%, rgba(10,22,48,.94) 100%); }

/* ---------- glass cards so the section video shows through ---------- */
.industry-card, .pain, .product3-card:not(.p3-featured), .chain, .compare, .fact-card, .feature-card,
.form-block, .incex-col, .pipeline-step, .plan, .problem-card, .scenario, .scenario-detailed,
.security-list li, .tier:not(.featured), .card:not(.section-dark .card) {
  background: rgba(255,255,255,.76) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

/* ---------- brand bits ---------- */
.zeus-link { font-size: 13px; font-weight: 700; padding: 0 6px; color: #F1F1EE !important; white-space: nowrap; }
.zeus-link b { color: #D9A94E; font-weight: 700; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.badges .m-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.badges .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple-700); }

/* consultant photo in chat header */
.chat-head .ava { position: relative; flex: none; width: 40px; height: 40px; }
.chat-head .ava img { width: 40px; height: 40px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.4); }
.chat-head .ava i { position: absolute; right: -1px; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 2px #0A1630; }

/* ---------- hero machine: real document → проводка ---------- */
.machine { position: relative; height: 520px; perspective: 1400px; max-width: 640px; justify-self: end; width: 100%; }
.machine .doc { position: absolute; left: 0; top: 18px; width: 300px; height: 430px; background: #F3F0E9 url(../assets/paper.jpg) center/cover; border-radius: 3px; color: #1C1C22; font: 9.4px/1.45 'PT Serif', Georgia, 'Times New Roman', serif; padding: 22px; transform: rotateY(16deg) rotateX(4deg) rotateZ(-3deg); transform-origin: left center; box-shadow: 0 1px 2px rgba(10,22,48,.25), 0 24px 50px rgba(11,58,140,.22), 0 50px 90px rgba(10,22,48,.18); transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.machine .doc::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none; background: linear-gradient(115deg, #fff 0%, #e1eaf6 100%); }
.machine .doc h4 { font: 700 10.5px 'PT Serif', Georgia, serif; text-align: center; margin: 0 0 2px; letter-spacing: .04em; color: #1C1C22; }
.machine .doc .no { text-align: center; font-size: 8.6px; margin-bottom: 10px; }
.machine .doc .r { display: flex; gap: 6px; margin: 3px 0; }
.machine .doc .r b { font-weight: 700; min-width: 70px; }
.machine .doc table { color: #1C1C22; width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 8.4px; }
.machine .doc td, .machine .doc th { border: .6px solid #444; padding: 2px 4px; text-align: left; }
.machine .doc th { font-weight: 700; }
.machine .doc td.n { text-align: right; font-variant-numeric: tabular-nums; }
.machine .doc .tot { display: flex; justify-content: flex-end; gap: 14px; margin-top: 4px; }
.machine .doc .sig { position: absolute; bottom: 26px; left: 22px; right: 22px; display: flex; justify-content: space-between; font-size: 8.4px; }
.machine .doc .stamp { position: absolute; right: 30px; bottom: 44px; width: 66px; height: 66px; border-radius: 50%; border: 1.6px solid rgba(40,70,170,.55); box-shadow: inset 0 0 0 4px #F3F0E9, inset 0 0 0 5px rgba(40,70,170,.45); color: rgba(40,70,170,.6); font: 700 6px var(--font-sans); display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-12deg); mix-blend-mode: multiply; }
.machine .hl { border-radius: 2px; background-image: linear-gradient(var(--hc), var(--hc)); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .45s cubic-bezier(.3,.7,.2,1); mix-blend-mode: multiply; padding: 0 1px; }
.machine .hl.on { background-size: 100% 100%; }
.machine .laser { position: absolute; left: -8px; right: -8px; height: 2px; top: 0; background: #E6F7FF; box-shadow: 0 0 10px 2px rgba(14,165,233,.95), 0 0 30px 6px rgba(29,95,224,.45); opacity: 0; z-index: 2; }
.machine .laser::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 70px; background: linear-gradient(0deg, rgba(14,165,233,.22), rgba(14,165,233,0)); }
.machine .ledger { position: absolute; right: 0; top: 150px; width: min(350px, 54%); border-radius: 18px; padding: 20px 22px; color: var(--text); background: linear-gradient(155deg, rgba(255,255,255,.86), rgba(255,255,255,.62) 55%, rgba(225,240,255,.7)); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(29,95,224,.10), 0 2px 4px rgba(10,22,48,.06), 0 18px 40px rgba(29,95,224,.16), 0 40px 80px rgba(10,22,48,.10); }
.machine .ledger .cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); }
.machine .ledger .cap .st { color: var(--purple-700); background: var(--purple-light); padding: 3px 8px; border-radius: 999px; letter-spacing: .3px; white-space: nowrap; }
.machine .ledger dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; margin: 16px 0 0; font-size: 14px; }
.machine .ledger dt { color: var(--text-muted); font-size: 13px; }
.machine .ledger dd { margin: 0; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; opacity: .18; transition: opacity .4s; }
.machine .ledger dd.on { opacity: 1; }
.machine .entry { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 14px; display: grid; grid-template-columns: auto auto 1fr; gap: 6px 14px; align-items: baseline; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; }
.machine .entry .dk { color: var(--purple-700); } .machine .entry .kt { color: #0891B2; }
.machine .entry .sum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.machine .entry .row { display: contents; }
.machine .entry .row > * { opacity: .18; transition: opacity .4s; }
.machine .entry .row.on > * { opacity: 1; }
.machine .sync { margin-top: 16px; font-size: 12.5px; color: var(--text-muted); }
.machine .sync .lbl { display: flex; justify-content: space-between; margin-bottom: 6px; }
.machine .sync .bar { height: 6px; border-radius: 999px; background: var(--purple-light); overflow: hidden; }
.machine .sync .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--purple-700), #0EA5E9); border-radius: 999px; }
.machine .done { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); opacity: .25; transition: opacity .4s; }
.machine .done.on { opacity: 1; }
.machine .done i { width: 20px; height: 20px; border-radius: 50%; background: #DCFCE7; color: #15803D; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 700; }
.machine .done b { color: var(--text); font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.machine .chips { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.machine .chip { position: absolute; font: 500 12px 'JetBrains Mono', ui-monospace, Menlo, monospace; padding: 5px 10px; border-radius: 999px; background: var(--bg-dark); color: #fff; box-shadow: 0 8px 24px rgba(29,95,224,.35); white-space: nowrap; transition: transform .9s cubic-bezier(.5,0,.2,1), opacity .3s; }
@media (max-width: 1024px) { .machine { justify-self: start; } }
@media (max-width: 560px) {
  .machine { height: auto; display: flex; flex-direction: column; gap: 18px; }
  .machine .doc { position: relative; width: min(300px, 86%); height: 410px; font-size: 8.6px; padding: 18px; transform: rotateZ(-2deg) !important; }
  .machine .ledger { position: relative; top: 0; width: 100%; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bgv { display: none; } .machine * { transition: none !important; } }

/* ---------- stronger section video visibility ---------- */
.v-light > .bgveil { background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(247,250,255,.38)) !important; }

/* ---------- real platform recordings ---------- */
.demo-wrap { margin-top: 40px; display: grid; gap: 14px; justify-items: center; }
.demo-frame { width: 100%; max-width: 980px; border-radius: 16px; overflow: hidden; background: #0A1630; box-shadow: 0 2px 4px rgba(10,22,48,.08), 0 24px 60px rgba(10,22,48,.22); border: 1px solid rgba(10,22,48,.12); }
.demo-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: linear-gradient(180deg, #F4F7FC, #E8EEF7); border-bottom: 1px solid #DCE7F7; }
.demo-bar i { width: 11px; height: 11px; border-radius: 50%; background: #F87171; }
.demo-bar i:nth-child(2) { background: #FBBF24; } .demo-bar i:nth-child(3) { background: #34D399; }
.demo-bar span { margin-left: 12px; flex: 1; max-width: 340px; height: 22px; border-radius: 6px; background: #fff; border: 1px solid #DCE7F7; font: 500 12px var(--font-sans); color: #5b6b85; display: flex; align-items: center; padding: 0 10px; }
.demo-frame video { display: block; width: 100%; height: auto; background: #fff; }
.demo-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--text-muted); text-align: center; }
.demo-cap b { color: var(--text); }
.demo-cap .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #15803D; background: #DCFCE7; padding: 4px 9px; border-radius: 999px; }
.demo-cap .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; }
.section-dark .demo-cap, .cta-final .demo-cap { color: rgba(255,255,255,.7); } 
.btn-watch { display: inline-flex; align-items: center; gap: 10px; }
.btn-watch svg { width: 18px; height: 18px; }
/* overview lightbox */
.ov-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(10,22,48,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; }
.ov-modal.is-open { display: flex; }
.ov-modal .box { position: relative; width: min(1100px, 100%); }
.ov-modal video { width: 100%; border-radius: 14px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ov-modal .x { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; cursor: pointer; }

/* featured ERP card sits on a dark video — light type */
.product3-card.p3-featured.has-v { background: #0A1630 !important; border-color: rgba(125,211,252,.35); color: #fff; }
.product3-card.p3-featured.has-v h3 { color: #fff; }
.product3-card.p3-featured.has-v .p3-desc { color: rgba(255,255,255,.82); }
.product3-card.p3-featured.has-v .p3-tags span { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #E0F2FE; }
.product3-card.p3-featured.has-v .p3-who { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.product3-card.p3-featured.has-v .p3-who .lbl { color: rgba(255,255,255,.6); }
.product3-card.p3-featured.has-v .p3-who .val { color: #fff; }
.product3-card.p3-featured.has-v .p3-cta { color: #7DD3FC; }
.product3-card.p3-featured.has-v .m-eyebrow { background: rgba(125,211,252,.18); color: #E0F2FE; }