/* ===== Сигвер — phone-video demo block (shared) =====
   max.ru-style phone mockup: CSS phone frame + cover video + lava-lamp glow.
   Uses theme.css tokens only (terracotta/green/cream). Both themes supported. */

/* ---- feature row ---- */
.dm-sec{position:relative;padding:84px 0 88px;overflow:hidden}
.dm-row{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;position:relative;z-index:2}
.dm-row.rev .dm-textcol{order:2}
.dm-row.rev .dm-phonewrap{order:1}
@media(max-width:780px){
  .dm-sec{padding:60px 0 64px}
  .dm-row{grid-template-columns:1fr;gap:36px;text-align:center}
  .dm-row.rev .dm-textcol{order:1}
  .dm-row.rev .dm-phonewrap{order:2}
}

/* ---- text column ---- */
.dm-text{opacity:0;transform:translateY(25px);transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1)}
.dm-text.in{opacity:1;transform:none}
.dm-kicker{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);font-weight:500;margin-bottom:16px}
.dm-text h2{font-family:var(--serif,'Fraunces',serif);font-size:clamp(28px,4.2vw,44px);line-height:1.1;letter-spacing:-1px;margin-bottom:18px;color:var(--ink)}
.dm-text h2 em{font-style:italic;color:var(--acc);font-weight:500}
.dm-text p{font-size:17px;color:var(--ink2);line-height:1.6;max-width:440px;margin-bottom:4px}
@media(max-width:780px){.dm-text p{margin-left:auto;margin-right:auto}}

/* ---- phone column ---- */
.dm-phonewrap{position:relative;display:flex;justify-content:center;align-items:center}

/* lava-lamp glow — terracotta / green / cream, NOT neon */
.dm-lava{position:absolute;inset:-12% -6%;z-index:0;filter:blur(58px);opacity:.62;pointer-events:none}
.dm-blob{position:absolute;border-radius:50%}
.dm-b1{width:300px;height:300px;background:var(--acc);opacity:.30;top:2%;left:6%;animation:dmlava1 19s ease-in-out infinite}
.dm-b2{width:260px;height:260px;background:var(--acc2);opacity:.26;bottom:4%;right:4%;animation:dmlava2 23s ease-in-out infinite}
.dm-b3{width:220px;height:220px;background:#E7C9A8;opacity:.42;top:34%;right:20%;animation:dmlava3 27s ease-in-out infinite}
.dm-b4{width:180px;height:180px;background:var(--acc);opacity:.18;bottom:18%;left:14%;animation:dmlava1 31s ease-in-out infinite reverse}
[data-theme="dark"] .dm-lava{opacity:.5}
[data-theme="dark"] .dm-b3{background:#6b513a}
@keyframes dmlava1{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(26px,-22px) rotate(180deg) scale(1.12)}}
@keyframes dmlava2{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(-30px,18px) rotate(-160deg) scale(1.08)}}
@keyframes dmlava3{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(18px,28px) rotate(140deg) scale(1.16)}}
@media(prefers-reduced-motion:reduce){.dm-blob{animation:none}}

/* phone frame */
.dm-phone{position:relative;z-index:2;width:300px;max-width:84vw;aspect-ratio:900/1950;background:#111;border-radius:9%/4.15%;
  padding:11px;box-shadow:0 2px 6px rgba(28,26,23,.18),0 26px 50px -18px rgba(28,26,23,.42),0 50px 90px -40px rgba(28,26,23,.5)}
[data-theme="dark"] .dm-phone{background:#000;box-shadow:0 2px 6px rgba(0,0,0,.5),0 30px 60px -18px rgba(0,0,0,.7)}
@media(max-width:780px){.dm-phone{width:280px}}
.dm-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:34%;height:20px;background:#111;border-bottom-left-radius:11px;border-bottom-right-radius:11px;z-index:3;display:flex;align-items:center;justify-content:center}
.dm-cam{width:7px;height:7px;border-radius:50%;background:#2a2a2a;box-shadow:inset 0 0 0 1px #3a3a3a}
.dm-screen{position:relative;width:100%;height:100%;border-radius:6.6%/3%;overflow:hidden;background:#FAF7F2}
.dm-screen video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;object-fit:cover;display:block}

/* ---- wide company panel (ai page) — text on top, full-width video card ---- */
.dm-widehead{max-width:760px;margin:0 auto 46px;text-align:center}
.dm-widehead p{max-width:600px;margin-left:auto;margin-right:auto}
.dm-widewrap{position:relative;display:flex;justify-content:center;z-index:2}
.dm-widewrap .dm-lava{inset:-16% -8%}
.dm-widepanel{position:relative;z-index:2;width:100%;background:var(--card);border:1px solid var(--bd2);border-radius:22px;padding:10px;
  box-shadow:0 2px 6px rgba(28,26,23,.1),0 28px 60px -26px rgba(28,26,23,.34),0 54px 100px -48px rgba(28,26,23,.4)}
[data-theme="dark"] .dm-widepanel{background:#1e1a16;border-color:rgba(255,255,255,.1);box-shadow:0 2px 6px rgba(0,0,0,.4),0 32px 70px -24px rgba(0,0,0,.65)}
.dm-widescreen{height:auto;aspect-ratio:1600/1000;border-radius:14px}
[data-theme="dark"] .dm-widescreen{background:#14120f}
@media(max-width:780px){
  .dm-widehead{margin-bottom:32px}
  .dm-widepanel{border-radius:15px;padding:6px}
  .dm-widescreen{border-radius:10px}
}

/* ---- hero variant (homepage: centered text over wide panel) ---- */
.hero.dm-hero .wrap{display:flex;flex-direction:column;align-items:center;gap:44px;text-align:center}
.hero.dm-hero .hero-textcol{position:relative;z-index:2;max-width:780px}
.hero.dm-hero .lead{margin-left:auto;margin-right:auto}
.hero.dm-hero .hbtns{justify-content:center}
.hero.dm-hero .dm-widewrap{width:100%;max-width:1000px}
/* legacy phone-wrap rules (kept harmless if markup ever reused) */
.dm-hero-phonewrap{position:relative;display:flex;justify-content:center;align-items:center}
.dm-hero-phonewrap .dm-phone{width:280px}
@media(max-width:780px){
  .hero.dm-hero .wrap{gap:32px}
  .dm-hero-phonewrap .dm-phone{width:270px;max-width:80vw}
}