/* ============================================================
   ПЕРВЫЙ ЭКРАН MVP (30.09.2026): ноутбук-окно + телефон, продукт
   переключается (кабинет → запись → школа → подписка). У каждого вида
   свой оттенок акцента (--k), экран собирается плашками по очереди.
   ============================================================ */
.mvh__bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 50% at 78% 40%, rgba(var(--accent-rgb), .12), transparent 70%),
    linear-gradient(135deg, transparent 49.6%, rgba(var(--accent-rgb), .08) 49.6% 50.4%, transparent 50.4%) 0 0 / 46px 46px;
  -webkit-mask-image:radial-gradient(60% 80% at 76% 45%, #000 25%, transparent 78%);
          mask-image:radial-gradient(60% 80% at 76% 45%, #000 25%, transparent 78%);
}
.mvh__scene{ position:relative; padding-bottom:40px; }
.mvh__lap{
  position:relative; aspect-ratio:16 / 10.5; border-radius:12px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(80,20,90,.45);
}
.mvh__bar{ display:flex; align-items:center; gap:12px; height:36px; padding:0 14px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.mvh__bar span{ display:flex; gap:6px; } .mvh__bar span i{ width:8px; height:8px; border-radius:50%; background:#d6d8e0; }
.mvh__url{ font:500 12px/1 var(--font); color:var(--fg-lead); }
.mvh__scr{ position:absolute; inset:36px 0 0; display:grid; grid-template-columns:26% 1fr; opacity:0; visibility:hidden; transition:opacity .35s, visibility 0s linear .35s; }
.mvh__scr.is-on{ opacity:1; visibility:visible; transition:opacity .35s, visibility 0s; }
.mvh__scr--1{ --k:var(--accent-1); } .mvh__scr--2{ --k:#1f8f7a; } .mvh__scr--3{ --k:#c2661f; } .mvh__scr--4{ --k:#3568de; }
.mvh__side{ display:grid; align-content:start; gap:6px; padding:16px 12px; background:#171b24; }
.mvh__side b{ display:block; width:60%; height:10px; margin-bottom:12px; border-radius:3px; background:var(--k); }
.mvh__side span{ padding:8px 9px; border-radius:4px; font:500 12px/1 var(--font); color:rgba(255,255,255,.6); }
.mvh__side span.on{ background:rgba(255,255,255,.1); color:#fff; }
.mvh__main{ display:grid; align-content:start; gap:12px; padding:16px; }
.mvh__h{ margin:0; font:700 clamp(15px, 1.25vw, 19px)/1.2 var(--font); color:var(--fg); }
.mvh__cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.mvh__cards i{ height:64px; border-radius:8px; background:linear-gradient(160deg, color-mix(in srgb, var(--k) 18%, #fff), #fff); border:1px solid var(--line); }
.mvh__rows{ display:grid; gap:7px; }
.mvh__rows i{ height:24px; border-radius:5px; background:var(--surface-2); }
.mvh__rows i:nth-child(odd){ background:#f7f8fa; }
.mvh__cta{ justify-self:end; width:30%; height:28px; border-radius:5px; background:var(--k); }
/* сборка плашками при появлении экрана */
.mvh__scr.is-on .mvh__cards i, .mvh__scr.is-on .mvh__rows i, .mvh__scr.is-on .mvh__cta{ animation:mvh-in .45s cubic-bezier(.2,.8,.2,1) both; }
.mvh__scr.is-on .mvh__cards i:nth-child(2){ animation-delay:.06s; } .mvh__scr.is-on .mvh__cards i:nth-child(3){ animation-delay:.12s; }
.mvh__scr.is-on .mvh__rows i:nth-child(1){ animation-delay:.18s; } .mvh__scr.is-on .mvh__rows i:nth-child(2){ animation-delay:.22s; }
.mvh__scr.is-on .mvh__rows i:nth-child(3){ animation-delay:.26s; } .mvh__scr.is-on .mvh__rows i:nth-child(4){ animation-delay:.3s; }
.mvh__scr.is-on .mvh__cta{ animation-delay:.36s; }
@keyframes mvh-in{ from{ opacity:0; transform:translateY(8px); } }

.mvh__phone{
  position:absolute; right:-3%; bottom:0; width:24%; aspect-ratio:9 / 18.5; padding:6px;
  border-radius:20px; background:#11161c; box-shadow:0 24px 48px -16px rgba(0,0,0,.45);
  rotate:5deg;
}
.mvh__pscr{ position:absolute; inset:6px; border-radius:15px; background:#fff; padding:14px 10px; display:grid; align-content:start; gap:7px; opacity:0; transition:opacity .35s; }
.mvh__pscr.is-on{ opacity:1; }
.mvh__pscr p{ margin:0 0 4px; font:700 10.5px/1.2 var(--font); color:var(--fg); }
.mvh__pscr i{ height:26px; border-radius:5px; background:var(--surface-2); }
.mvh__pscr em{ height:20px; margin-top:6px; border-radius:5px; background:var(--accent-1); }
.mvh__dots{ position:absolute; left:0; bottom:6px; display:flex; gap:8px; }
.mvh__dots button{ width:26px; height:6px; padding:0; border:0; border-radius:3px; background:var(--line); cursor:pointer; transition:background .3s, width .3s; }
.mvh__dots button.is-on{ width:44px; background:var(--accent-1); }
.mvh__dots button:focus-visible{ outline:2px solid var(--accent-1); outline-offset:3px; }
@media (max-width: 640px){ .mvh__side span{ font-size:10px; padding:6px; } .mvh__phone{ width:28%; } }
@media (prefers-reduced-motion: reduce){ .mvh__scr.is-on *{ animation:none !important; } }