/* Inter объявлен в router-home.css (селф-хост) — грузится на всех страницах */

/* ===========================================================
   MKR · Лендинг MK-O2 — тёмная премиум-тема
   Формат «инструкция с вплетёнными УТП» (док 14).
   Акценты — фирменный градиент сайта; луч осциллограммы — ЖЁЛТЫЙ,
   как канал CH1 на реальном экране прибора (решение владельца 17.08:
   никакого голубого).
   Оболочка (шапка/подвал) приходит из router-home.css. Scope: .mkr-o2
   =========================================================== */
/* Токены объявлены и на body (mkr-o2-page): sticky-бар и попап прошивки
   живут ВНЕ main.mkr-o2 — без этого var(--grad) там пустой (кнопка «Купить»
   в баре была без подложки). */
body.mkr-o2-page,.mkr-o2{
  --ink:#f8faff; --muted:rgba(216,222,234,.74); --muted-2:rgba(216,222,234,.5);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --grad:linear-gradient(135deg,#2e69f6 0%,#6942fb 48%,#d45cff 100%);
  --grad-dim:linear-gradient(135deg,rgba(46,105,246,.6) 0%,rgba(105,66,251,.6) 48%,rgba(212,92,255,.6) 100%);
  --grad-wb:linear-gradient(135deg,#cb11ab 0%,#7a1fa2 100%);
  --grad-ym:linear-gradient(135deg,#ffd23d 0%,#ff9d00 100%);
  --trace:#ffd23d;                /* луч = цвет канала CH1 на экране прибора */
  --ch1:#ffd23d; --ch2:#4f8bff;   /* цвета каналов как на приборе */
  --star:#ffd23d;
  --ease:cubic-bezier(.22,1,.36,1);
  --frame:calc(100vw - clamp(40px,5vw,96px));
  --radius:8px; --radius-l:16px; --radius-xl:22px;
  --card:linear-gradient(180deg,rgba(15,18,28,.72),rgba(7,9,16,.86));
  position:relative;isolation:isolate;color:var(--ink);
  font-family:"Inter","Akzidenz-Grotesk Pro","Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"ss01","cv05","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
  background:
    radial-gradient(circle at 50% 6%,rgba(105,66,251,.12),transparent 34vw),
    radial-gradient(circle at 88% 24%,rgba(46,105,246,.10),transparent 36vw),
    radial-gradient(circle at 6% 52%,rgba(105,66,251,.10),transparent 38vw),
    radial-gradient(circle at 84% 74%,rgba(46,105,246,.08),transparent 38vw),
    radial-gradient(circle at 14% 92%,rgba(212,92,255,.07),transparent 34vw),
    linear-gradient(180deg,#030409 0%,#07080d 46%,#050608 100%);
}
.mkr-o2 *{box-sizing:border-box}
.mkr-o2 :where(p){margin:0;color:var(--muted);text-wrap:pretty}
.mkr-o2 :where(h1,h2,h3,h4){margin:0;color:var(--ink);letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
.mkr-o2 :where(a){color:inherit;text-decoration:none}
.mkr-o2 :where(img,svg,video){display:block;max-width:100%;height:auto}
.mkr-o2 [hidden]{display:none !important}

.o2-wrap{width:var(--frame);max-width:1280px;margin:0 auto}
.o2-section{position:relative;padding:clamp(64px,9vw,140px) 0}
.o2-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(216,222,234,.82)}
/* чёрточка кикера — ТОЛЬКО слева (решение владельца, вся линейка) */
.o2-eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--grad)}
.o2-head{max-width:880px;margin-bottom:clamp(34px,5vw,60px)}
.o2-head h2{font-size:clamp(2.1rem,4.4vw,4.4rem);font-weight:720;line-height:1.02;margin-top:16px}
.o2-head--center{margin-left:auto;margin-right:auto;text-align:center}
.o2-head__lead{margin-top:16px}
.o2-lead{font-size:clamp(1.06rem,1.4vw,1.34rem);line-height:1.5;max-width:820px;color:var(--muted)}
.o2-lead b{color:var(--ink)}
.o2-grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.o2-note{margin-top:20px;padding:16px 18px;border-radius:var(--radius-l);border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:.94rem;line-height:1.55;color:var(--muted-2)}
.o2-note a,.mkr-o2 .mkr-ilink{color:var(--ink);border-bottom:1px solid rgba(216,222,234,.4)}
.o2-warn{margin-top:20px;padding:14px 18px;border-radius:var(--radius-l);font-size:.9rem;line-height:1.55;
  color:var(--muted);background:rgba(255,210,61,.07);border:1px solid rgba(255,210,61,.22)}

/* ---------- Эталонная CTA сайта (копия .m4-cta; подписи ≥206px) ---------- */
.o2-cta{display:inline-grid;grid-template-columns:minmax(0,auto) 40px;gap:7px;width:max-content;max-width:100%;
  text-decoration:none;outline:none;border:0;padding:0;background:none;cursor:pointer;font-family:inherit}
.o2-cta__label,.o2-cta__icon{
  --c:linear-gradient(135deg,#2e69f6 0%,#6942fb 48%,#d45cff 100%);
  --cdim:linear-gradient(135deg,rgba(46,105,246,.6) 0%,rgba(105,66,251,.6) 48%,rgba(212,92,255,.6) 100%);
  min-height:40px;border:1px solid transparent;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(5,6,8,.82),rgba(5,6,8,.82)) padding-box, var(--cdim) border-box;
  backdrop-filter:blur(10px);transition:background 320ms ease;color:#f8faff}
.o2-cta:hover .o2-cta__label,.o2-cta:hover .o2-cta__icon,
.o2-cta:focus-visible .o2-cta__label,.o2-cta:focus-visible .o2-cta__icon{
  background:linear-gradient(180deg,rgba(5,6,8,.82),rgba(5,6,8,.82)) padding-box, var(--c) border-box}
.o2-cta__label{display:flex;flex-direction:column;justify-content:center;min-width:206px;padding-inline:26px;
  font-size:.98rem;font-weight:680;line-height:1.1;letter-spacing:.005em;white-space:nowrap}
.o2-cta__icon{position:relative;display:grid;place-items:center;width:40px;height:40px;overflow:hidden}
.o2-arrow{position:absolute;left:50%;top:50%;width:18px;height:18px;fill:none;stroke:#f8faff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transform:translate(-50%,-50%);transition:transform 420ms cubic-bezier(.4,0,.2,1)}
.o2-arrow--next{transform:translate(calc(-50% - 36px),calc(-50% + 36px))}
.o2-cta:hover .o2-arrow,.o2-cta:focus-visible .o2-arrow{transform:translate(calc(-50% + 36px),calc(-50% - 36px))}
.o2-cta:hover .o2-arrow--next,.o2-cta:focus-visible .o2-arrow--next{transform:translate(-50%,-50%)}
.o2-cta--primary .o2-cta__label,.o2-cta--primary .o2-cta__icon{--cdim:linear-gradient(135deg,rgba(46,105,246,.72) 0%,rgba(105,66,251,.72) 48%,rgba(212,92,255,.72) 100%)}
.o2-cta--ghost .o2-cta__label,.o2-cta--ghost .o2-cta__icon{--c:linear-gradient(135deg,rgba(46,105,246,.55),rgba(212,92,255,.55));--cdim:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.16))}
.o2-cta--wb .o2-cta__label,.o2-cta--wb .o2-cta__icon{--c:var(--grad-wb);--cdim:linear-gradient(135deg,rgba(203,17,171,.6),rgba(122,31,162,.6))}
.o2-cta--ym .o2-cta__label,.o2-cta--ym .o2-cta__icon{--c:var(--grad-ym);--cdim:linear-gradient(135deg,rgba(255,210,61,.62),rgba(255,157,0,.62))}

/* лёгкая кнопка-документ (инструкция, файлы O1) */
.o2-doc{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--muted);
  font-size:.9rem;font-weight:640;letter-spacing:.005em;text-decoration:none;
  transition:border-color .2s,background .2s,color .2s}
.o2-doc:hover,.o2-doc:focus-visible{border-color:rgba(212,92,255,.5);background:rgba(212,92,255,.08);color:var(--ink)}
.o2-doc svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ================= 01. HERO ================= */
.o2-hero{position:relative;overflow:hidden;padding:clamp(104px,13vh,168px) 0 clamp(48px,7vh,88px)}
.o2-hero__bg{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 76% 40%,rgba(46,105,246,.16),transparent 44%),
    radial-gradient(circle at 20% 15%,rgba(105,66,251,.16),transparent 40%),
    linear-gradient(180deg,#030510 0%,#050710 60%,#050608 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
/* координатная сетка осциллографа поверх фона */
.o2-hero__bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background:
    linear-gradient(rgba(216,222,234,.045) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(216,222,234,.045) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(circle at 70% 45%,#000 20%,transparent 75%);
          mask-image:radial-gradient(circle at 70% 45%,#000 20%,transparent 75%)}
.o2-hero__inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,70px);align-items:center}
.o2-hero__title{margin:18px 0 20px;font-size:clamp(2.6rem,5.8vw,5.2rem);font-weight:740;letter-spacing:-.03em;line-height:1.02}
.o2-hero__lead{max-width:620px}
.o2-chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.o2-chips li{padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted);font-size:.9rem}
.o2-chips b{color:var(--ink);font-weight:700}
.o2-chips__star i{font-style:normal;color:var(--star)}
.o2-price{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}
.o2-price__row{display:flex;align-items:baseline;gap:9px}
.o2-price__now{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.o2-price__mp{font-size:.84rem;color:var(--muted-2)}
.o2-price__row--wb .o2-price__mp{color:#d9a2ff}
.o2-price__row--ym .o2-price__mp{color:#ffcf5c}
.o2-price__row--av .o2-price__mp{color:#9fe870}

/* CTA-кнопка (открывает попап покупки): та же геометрия, что у <a>.o2-cta */
.o2-cta--btn{border:0;margin:0;padding:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
/* тема красит button:hover серым — у составной кнопки это вылезало в зазоре между подписью и стрелкой */
.o2-cta--btn:hover,.o2-cta--btn:focus,.o2-cta--btn:active{background:none;box-shadow:none;outline:none}
.o2-hero__cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px;max-width:590px}
.o2-hero__cta .o2-cta{width:100%;grid-template-columns:minmax(0,1fr) 40px}
.o2-hero__cta .o2-cta__label{min-width:0;align-items:center;text-align:center;padding-inline:14px}
.o2-hero__media{position:relative;display:flex;justify-content:center}
.o2-hero__media::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:88%;height:70%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(105,66,251,.22),transparent 68%);filter:blur(52px)}
.o2-hero__media img{max-width:min(100%,470px);border-radius:var(--radius-xl);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}

/* ================= 02. УРОК 0: зачем ================= */
.o2-why__duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.o2-why__card{position:relative;padding:clamp(22px,3vw,34px);border-radius:var(--radius-l);border:1px solid var(--line);
  background:var(--card);display:flex;flex-direction:column;gap:16px}
.o2-why__card--osc{border-color:transparent;background:var(--card) padding-box,var(--grad-dim) border-box}
.o2-why__tag{align-self:flex-start;padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.06)}
.o2-why__tag--hot{color:#fff;background:var(--grad)}
/* «экран мультиметра»: просто цифра */
.o2-why__lcd{display:flex;align-items:center;justify-content:center;gap:8px;height:90px;border-radius:12px;
  border:1px solid var(--line);background:#0a0e14;
  font-size:2.6rem;font-weight:740;letter-spacing:.04em;color:#d7e6d9;
  font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(151,222,168,.35)}
.o2-why__lcd i{font-style:normal;font-size:1.2rem;color:rgba(215,230,217,.6)}
/* «экран осциллографа»: провалы на той же шине */
.o2-why__wave{height:90px;width:100%;border-radius:12px;border:1px solid var(--line);background:#0a0e14}
.o2-why__grid{stroke:rgba(216,222,234,.09);stroke-width:1;fill:none}
.o2-why__trace{stroke:var(--trace);stroke-width:2.2;fill:none;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,210,61,.5))}

/* ================= 03. ТРИ ПРИБОРА ================= */
.o2-modes__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.o2-mode{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vw,32px);border-radius:var(--radius-l);
  border:1px solid var(--line);background:var(--card);transition:transform .4s var(--ease),border-color .3s}
.o2-mode:hover{transform:translateY(-4px);border-color:rgba(105,66,251,.55)}
.o2-mode h3{font-size:1.2rem;font-weight:720}
.o2-mode p{font-size:.95rem;line-height:1.5}
.o2-ico{width:40px;height:40px;stroke:#8f7bfc;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.o2-mode__when{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted-2)}

/* ================= 04. УРОК 1: шаги ================= */
.o2-steps__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,70px);align-items:start}
.o2-steps__media{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.o2-frame{overflow:hidden;border-radius:var(--radius-xl);border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.o2-frame img{width:100%;height:100%;object-fit:cover}
.o2-frame--second{max-height:360px}
.o2-steps{counter-reset:o2step;list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.o2-steps li{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 18px 16px 64px;
  border-radius:var(--radius-l);border:1px solid var(--line);background:rgba(255,255,255,.025)}
.o2-steps li::before{counter-increment:o2step;content:counter(o2step);position:absolute;left:16px;top:50%;
  transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  font-size:.95rem;font-weight:760;color:#fff;background:var(--grad)}
.o2-steps b{font-size:1rem;font-weight:700;color:var(--ink)}
.o2-steps span{font-size:.9rem;line-height:1.5;color:var(--muted)}

/* ================= 05. УРОК 2: экран ================= */
.o2-screen__inner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.o2-screen__media img{border-radius:var(--radius-xl);border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.45);max-width:min(100%,440px);margin:0 auto}
.o2-screen__callouts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.o2-screen__callouts li{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:2px;
  padding:14px 16px;border-radius:var(--radius-l);border:1px solid var(--line);background:rgba(255,255,255,.025)}
.o2-screen__num{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;align-self:center;border-radius:10px;
  font-size:.9rem;font-weight:760;color:#fff;background:var(--grad)}
.o2-screen__callouts b{font-size:.92rem;font-weight:700;color:var(--ink)}
.o2-screen__note{font-size:.8rem;line-height:1.45;color:var(--muted-2)}

/* ================= 06. УРОК 3: триггер ================= */
.o2-trigger__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.o2-trig{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,32px);border-radius:var(--radius-l);
  border:1px solid var(--line);background:var(--card)}
.o2-trig__name{align-self:flex-start;padding:5px 14px;border-radius:999px;font-size:.8rem;font-weight:740;letter-spacing:.06em;
  color:#fff;background:var(--grad)}
.o2-trig b{font-size:1.06rem;font-weight:720;color:var(--ink)}
.o2-trig p{font-size:.92rem;line-height:1.5}

/* ================= 07. УРОК 4: мультиметр ================= */
.o2-mm__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,70px);align-items:center}
.o2-checklist{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.o2-checklist li{position:relative;padding-left:34px;font-size:1rem;line-height:1.55;color:var(--muted)}
.o2-checklist li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:6px;
  background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.o2-checklist b{color:var(--ink)}
.o2-mm__ports{margin-top:26px;padding:20px 22px;border-radius:var(--radius-l);border:1px solid var(--line);background:rgba(255,255,255,.025)}
.o2-mm__ports h3{font-size:1rem;font-weight:720;margin-bottom:12px}
.o2-mm__ports ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.o2-mm__ports li{display:flex;flex-direction:column;gap:2px}
.o2-mm__ports b{font-size:.95rem;font-weight:760;color:#d45cff;font-variant-numeric:tabular-nums}
.o2-mm__ports span{font-size:.8rem;line-height:1.4;color:var(--muted-2)}
.o2-mm__media .o2-frame img{max-height:560px}

/* ================= 08. УРОК 5: генератор ================= */
.o2-gen__waves{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:26px}
.o2-gen__waves svg{width:100%;height:64px;padding:10px 12px;border-radius:var(--radius-l);border:1px solid var(--line);
  background:#0a0e14;stroke:var(--ch1);stroke-width:2.4;fill:none;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 1px rgba(255,210,61,.4))}
.o2-gen__honest{max-width:820px;padding:16px 18px;border-radius:var(--radius-l);border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:.95rem;line-height:1.55;color:var(--muted)}

/* ================= 09. ПРОШИВКИ ================= */
.o2-fw-card{position:relative;overflow:hidden;padding:clamp(30px,5vw,64px);border-radius:var(--radius-xl);
  border:1px solid transparent;background:var(--card) padding-box,var(--grad-dim) border-box}
.o2-fw-card__pattern{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(rgba(216,222,234,.05) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(216,222,234,.05) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(circle at 85% 20%,#000 10%,transparent 70%);
          mask-image:radial-gradient(circle at 85% 20%,#000 10%,transparent 70%)}
.o2-fw-card__text{position:relative;max-width:760px}
.o2-fw-card__text h2{font-size:clamp(1.9rem,3.6vw,3.2rem);font-weight:720;margin-top:14px}
.o2-fw-card__text .o2-lead{margin-top:16px}
.o2-fw-card__cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:26px}
.o2-fw-card__note{font-size:.84rem;color:var(--muted-2)}

/* ================= 10. ХАРАКТЕРИСТИКИ ================= */
.o2-specs__grid{display:flex;flex-direction:column;gap:14px;max-width:960px;margin:0 auto}
.o2-spec{border:1px solid var(--line);border-radius:var(--radius-l);background:var(--card);overflow:hidden}
.o2-spec summary{display:flex;align-items:center;gap:14px;padding:20px 24px;cursor:pointer;list-style:none}
.o2-spec summary::-webkit-details-marker{display:none}
.o2-spec summary h3{font-size:1.15rem;font-weight:720}
.o2-spec summary i{margin-left:auto;width:10px;height:10px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.o2-spec[open] summary i{transform:rotate(-135deg)}
.o2-spec[open] summary{border-bottom:1px solid var(--line)}
.o2-spec__table{width:100%;border-collapse:collapse}
.o2-spec__table th,.o2-spec__table td{padding:12px 24px;font-size:.92rem;line-height:1.5;text-align:left;vertical-align:top}
.o2-spec__table th{width:38%;font-weight:640;color:var(--muted-2);border-top:1px solid var(--line)}
.o2-spec__table td{color:var(--ink);border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.o2-spec__table tr:first-child th,.o2-spec__table tr:first-child td{border-top:0}

/* ================= 11. КОМУ ================= */
.o2-personas__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.o2-persona{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vw,34px);border-radius:var(--radius-l);
  border:1px solid var(--line);background:var(--card)}
.o2-persona h3{font-size:1.2rem;font-weight:720}
.o2-persona p{font-size:.95rem;line-height:1.55}
.o2-persona blockquote{margin:auto 0 0;padding:14px 16px;border-left:2px solid #6942fb;border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(105,66,251,.08);font-size:.86rem;line-height:1.5;color:var(--muted-2);font-style:italic}

/* ================= 12. КОМПЛЕКТ ================= */
.o2-kit__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,70px);align-items:center}
.o2-kit__list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.o2-kit__list li{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:var(--radius-l);
  border:1px solid var(--line);background:rgba(255,255,255,.025)}
.o2-kit__list b{font-size:.98rem;font-weight:700;color:var(--ink)}
.o2-kit__list span{font-size:.84rem;line-height:1.45;color:var(--muted-2)}
.o2-kit .o2-doc{margin-top:20px}

/* ================= 13. ОТЗЫВЫ ================= */
.o2-reviews__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.o2-review{display:flex;flex-direction:column;gap:12px;margin:0;padding:clamp(20px,2.6vw,28px);border-radius:var(--radius-l);
  border:1px solid var(--line);background:var(--card)}
.o2-stars{color:var(--star);letter-spacing:.14em;font-size:.95rem}
.o2-review blockquote{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted)}
.o2-review figcaption{margin-top:auto;font-size:.78rem;color:var(--muted-2)}
.o2-reviews__cta{display:flex;justify-content:center;margin-top:30px}

/* ================= 14. СРАВНЕНИЕ ================= */
.o2-vs__scroll{overflow-x:auto;border-radius:var(--radius-l);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(12,14,22,.72),rgba(6,7,13,.72))}
.o2-cmp{width:100%;min-width:640px;border-collapse:collapse}
.o2-cmp th,.o2-cmp td{padding:14px 18px;font-size:.92rem;text-align:center;border-top:1px solid var(--line)}
.o2-cmp thead th{font-weight:720;color:var(--ink);border-top:0}
.o2-cmp thead a{border-bottom:1px dashed rgba(216,222,234,.4)}
.o2-cmp tbody th{text-align:left;font-weight:640;color:var(--muted)}
.o2-cmp__o2{background:rgba(105,66,251,.12)}
.o2-cmp thead .o2-cmp__o2{color:#d9a2ff}
.o2-yn{display:inline-flex;align-items:center;gap:8px}
.o2-ic{width:18px;height:18px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.o2-ic--yes{stroke:#5be49b}
.o2-ic--no{stroke:rgba(216,222,234,.35)}
.o2-yn__lbl{font-size:.78rem;color:var(--muted-2)}

/* ================= 15. FAQ =================
   Единый стиль сайта (1 в 1 с m4-faq): карточный градиентный фон,
   градиентный ПЛЮС вместо шеврона, [open] подсвечивает рамку. */
.o2-faq__inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,70px);align-items:start}
.o2-faq-list{display:grid;gap:12px}
.o2-faq-list details{border:1px solid var(--line);border-radius:var(--radius-l);
  background:linear-gradient(180deg,rgba(15,18,28,.6),rgba(7,9,16,.8));overflow:hidden;transition:border-color .25s}
.o2-faq-list details[open]{border-color:var(--line-2)}
.o2-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;cursor:pointer;
  color:var(--ink);font-weight:660;font-size:clamp(1rem,1.3vw,1.16rem);list-style:none}
.o2-faq-list summary::-webkit-details-marker{display:none}
.o2-faq-list summary i{position:relative;flex:0 0 18px;width:18px;height:18px}
.o2-faq-list summary i::before,.o2-faq-list summary i::after{content:"";position:absolute;inset:0;margin:auto;background:var(--grad);border-radius:2px}
.o2-faq-list summary i::before{width:16px;height:2px}
.o2-faq-list summary i::after{width:2px;height:16px;transition:transform .25s var(--ease)}
.o2-faq-list details[open] summary i::after{transform:rotate(90deg);opacity:0}
.o2-faq-list details p{padding:0 22px 20px;max-width:780px;font-size:.95rem;line-height:1.6;color:var(--muted)}
.o2-faq-list details p b{color:var(--ink)}

/* ================= 16. ФИНАЛ =================
   Единый стиль сайта (как m4-final): фирменный узор mkr-pattern + свечение. */
.o2-final__card{position:relative;text-align:center;overflow:hidden;padding:clamp(40px,6vw,88px) clamp(24px,5vw,68px);
  border-radius:var(--radius-xl);border:1px solid var(--line-2);
  background:radial-gradient(circle at 50% 0,rgba(105,66,251,.3),transparent 60%),linear-gradient(180deg,#0b0d16,#060710);
  box-shadow:0 40px 100px rgba(0,0,0,.5)}
.o2-final__pattern{position:absolute;inset:0;background-image:url("img/mkr-pattern.webp");background-size:300px;
  filter:grayscale(1) brightness(.7);opacity:.1;pointer-events:none}
.o2-final__card h2,.o2-final__card p,.o2-final__cta{position:relative;z-index:1}
.o2-final__card h2{font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:730}
.o2-final__card .o2-lead{max-width:640px;margin:16px auto 30px}
.o2-final__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ================= 17. МАЛЫЙ БЛОК MK-O1 ================= */
.o2-o1{padding-top:0}
.o2-o1__card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(24px,3.4vw,40px);border-radius:var(--radius-l);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.o2-o1__card h2{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:720}
.o2-o1__card p{margin-top:10px;font-size:.92rem;line-height:1.55;color:var(--muted-2)}
.o2-o1__cta{display:flex;flex-direction:column;gap:10px}
.o2-o1__cta .o2-doc{width:100%}

/* ================= Попап «Прошивка MK-O2» =================
   Копия паттерна pro-fw с /profi/ в палитре лендинга. */
.o2-fw{position:fixed;z-index:120;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px);background:rgba(3,4,9,.88);backdrop-filter:blur(10px)}
.o2-fw[hidden]{display:none}
.o2-fw__box{position:relative;width:min(600px,100%);max-height:min(92vh,820px);overflow:auto;overscroll-behavior:contain;
  padding:22px 26px 20px;border-radius:var(--radius-xl,22px);border:1px solid rgba(255,255,255,.18);
  background:radial-gradient(circle at 50% 0,rgba(105,66,251,.22),transparent 55%),linear-gradient(180deg,#0b0d16,#060710);
  box-shadow:0 40px 100px rgba(0,0,0,.6);animation:o2FwIn .32s cubic-bezier(.22,1,.36,1);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;color:#f8faff}
@keyframes o2FwIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.o2-fw__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.o2-fw__logo{width:auto;height:15px;opacity:.92}
.o2-fw__close{width:36px;height:36px;display:grid;place-items:center;flex:none;
  padding:0;cursor:pointer;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.04)}
.o2-fw__close svg{width:16px;height:16px;fill:none;stroke:#f8faff;stroke-width:2.2;stroke-linecap:round}
.o2-fw__close:hover{background:rgba(255,255,255,.12)}
.o2-fw__title{font-size:1.3rem;font-weight:730;letter-spacing:-.02em;margin:0}
.o2-fw__sub{margin-top:5px;font-size:.88rem;line-height:1.5;color:rgba(216,222,234,.54)}
.o2-fw__latest{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding:14px 16px;border:1px solid transparent;border-radius:12px;
  background:linear-gradient(180deg,rgba(5,6,8,.82),rgba(5,6,8,.82)) padding-box,var(--grad) border-box}
.o2-fw__latest-info{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.o2-fw__latest-info b{font-size:1.5rem;font-weight:780;letter-spacing:-.02em}
.o2-fw__badge{padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.02em;
  color:#e6d5ff;background:rgba(105,66,251,.35)}
.o2-fw__meta{font-size:.78rem;color:rgba(216,222,234,.54)}
.o2-fw__dl{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:10px;border:0;
  font-size:.9rem;font-weight:700;color:#fff;text-decoration:none;background:var(--grad);
  transition:filter .2s,transform .2s}
.o2-fw__dl:hover,.o2-fw__dl:focus-visible{filter:brightness(1.12);transform:translateY(-1px)}
.o2-fw__dl svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.o2-fw__dl--sm{padding:8px 14px;font-size:.82rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#f8faff}
.o2-fw__dl--sm:hover{background:rgba(105,66,251,.3);filter:none}
.o2-fw__latest-notes{margin:10px 0 0;padding-left:18px;font-size:.85rem;line-height:1.55;color:rgba(216,222,234,.74)}
.o2-fw__latest-notes li{margin-top:3px}
.o2-fw__steps{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.o2-fw__steps h4,.o2-fw__history h4{margin:0 0 10px;font-size:.98rem;font-weight:720}
.o2-fw__steps ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;
  font-size:.87rem;line-height:1.55;color:rgba(216,222,234,.74)}
.o2-fw__steps ol b{color:#f8faff;font-weight:680}
.o2-fw__hint{margin-top:12px;padding:11px 14px;border-radius:10px;font-size:.82rem;line-height:1.55;
  color:rgba(216,222,234,.74);background:rgba(255,210,61,.07);border:1px solid rgba(255,210,61,.22)}
.o2-fw__history{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.o2-fw__item{border:1px solid rgba(255,255,255,.1);border-radius:10px;margin-top:7px;background:rgba(255,255,255,.02)}
.o2-fw__item summary{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;list-style:none;
  font-size:.88rem;color:rgba(216,222,234,.74)}
.o2-fw__item summary::-webkit-details-marker{display:none}
.o2-fw__item summary b{font-weight:700;color:#f8faff}
.o2-fw__item summary i{margin-left:auto;width:9px;height:9px;flex:none;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease}
.o2-fw__item[open] summary i{transform:rotate(-135deg) translate(-2px,-2px)}
.o2-fw__item[open] summary{border-bottom:1px solid rgba(255,255,255,.1)}
.o2-fw__item-body{padding:12px 14px 14px}
.o2-fw__item-body ul{margin:0 0 12px;padding-left:18px;font-size:.84rem;line-height:1.55;color:rgba(216,222,234,.74)}
.o2-fw__item-body li{margin-top:3px}
.o2-fw__foot{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem;line-height:1.55;color:rgba(216,222,234,.54)}

/* ================= Sticky-бар покупки (мобила) ================= */
.o2-buybar{position:fixed;z-index:80;left:0;right:0;bottom:0;display:none;align-items:center;gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,8,13,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line-2)}
.o2-buybar__info{display:flex;flex-direction:column;min-width:0}
.o2-buybar__info b{font-size:.92rem;font-weight:720;color:var(--ink)}
.o2-buybar__info span{font-size:.78rem;color:var(--muted-2)}
/* кнопка — 1 в 1 с M6: WB-градиент со свечением (ведёт на Wildberries) */
.o2-buybar__btn{margin-left:auto;flex:none;display:grid;place-items:center;min-width:132px;min-height:44px;
  padding:0 22px;border-radius:var(--radius);
  font-size:.96rem;font-weight:700;color:#fff;background:var(--grad-wb);box-shadow:0 10px 30px rgba(203,17,171,.35)}

/* ================= reveal ================= */
.mkr-o2 [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.mkr-o2 [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mkr-o2 [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ================= Адаптив ================= */
@media(max-width:1024px){
  .o2-hero__inner{grid-template-columns:1fr;gap:34px}
  .o2-hero__media img{max-width:min(100%,380px)}
  .o2-steps__inner,.o2-mm__inner,.o2-kit__inner,.o2-screen__inner{grid-template-columns:1fr;gap:34px}
  .o2-steps__media{position:static;flex-direction:row}
  .o2-steps__media .o2-frame{flex:1;min-width:0}
  .o2-frame--second{max-height:280px}
  .o2-mm__media{order:-1}
  .o2-reviews__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o2-gen__waves{grid-template-columns:repeat(3,minmax(0,1fr))}
  .o2-faq__inner{grid-template-columns:1fr;gap:26px}
}
@media(max-width:720px){
  .o2-why__duo,.o2-modes__grid,.o2-trigger__grid,.o2-personas__grid,.o2-reviews__grid{grid-template-columns:1fr}
  .o2-screen__callouts{grid-template-columns:1fr}
  .o2-gen__waves{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o2-hero__cta{grid-template-columns:1fr}
  .o2-mm__ports ul{grid-template-columns:1fr}
  .o2-o1__card{grid-template-columns:1fr}
  .o2-steps__media{flex-direction:column}
  .o2-buybar.is-on{display:flex}
  .o2-fw{align-items:flex-end;padding:0}
  .o2-fw__box{width:100%;max-height:90dvh;border-radius:22px 22px 0 0;border-bottom:0;
    padding-bottom:calc(22px + env(safe-area-inset-bottom));animation-name:o2FwUp}
  @keyframes o2FwUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .o2-fw__latest{flex-direction:column;align-items:stretch}
  .o2-fw__dl{justify-content:center}
}

/* ===== Доработки по правкам владельца 17.08 ===== */

/* Урок 2: пины прямо на фото прибора; цвет пина CH1/CH2 = цвет луча на экране */
.o2-screen__stage{position:relative;max-width:min(100%,440px);margin:0 auto}
.o2-pin{position:absolute;z-index:2;width:26px;height:26px;display:grid;place-items:center;
  transform:translate(-50%,-50%);border-radius:50%;
  font-size:.82rem;font-weight:760;color:#fff;background:#6942fb;
  border:2px solid rgba(248,250,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.55);
  animation:o2PinPulse 2.6s var(--ease) infinite}
@keyframes o2PinPulse{0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.55),0 0 0 0 rgba(105,66,251,.5)}
  50%{box-shadow:0 2px 10px rgba(0,0,0,.55),0 0 0 9px rgba(105,66,251,0)}}
.o2-pin--ch1{background:var(--ch1);color:#231a00}
.o2-pin--ch2{background:var(--ch2);color:#04122e}
/* та же цифра в списке — статичная, в потоке */
.o2-pin--flat{position:static;transform:none;animation:none;grid-row:1/3;align-self:center;
  width:30px;height:30px;border-width:0;border-radius:9px;box-shadow:none}
.o2-screen__cap{margin-top:12px;font-size:.8rem;line-height:1.5;color:var(--muted-2);text-align:center}
.o2-screen__callouts li{grid-template-columns:30px minmax(0,1fr)}

/* Урок 1: подписи под кадрами — кадры больше не «ни о чём» */
.o2-frame{margin:0}
.o2-frame figcaption{padding:10px 14px;font-size:.8rem;line-height:1.5;color:var(--muted-2);
  border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.o2-frame--tall img{aspect-ratio:3/4;object-fit:cover}

/* Карточка прошивок: правая панель вместо пустоты — версия крупно + мини-история */
.o2-fw-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center}
.o2-fw-card__text{order:-1}
.o2-fw-card__panel{position:relative;display:flex;flex-direction:column;gap:14px;
  padding:clamp(20px,2.6vw,30px);border-radius:var(--radius-l);border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(10,12,20,.85),rgba(5,6,10,.9))}
.o2-fw-card__badge{align-self:flex-start;padding:5px 12px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--grad)}
.o2-fw-card__ver{font-size:clamp(2.6rem,4.6vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.o2-fw-card__log{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.o2-fw-card__log li{display:flex;gap:10px;align-items:baseline;padding-top:8px;border-top:1px solid var(--line);
  font-size:.8rem;line-height:1.45;color:var(--muted-2)}
.o2-fw-card__log b{flex:none;font-weight:740;color:var(--ink);font-variant-numeric:tabular-nums}
.o2-fw-card__log li:first-child b{color:#d9a2ff}

/* Попап: актуальная версия — ЕДИНСТВЕННЫЙ яркий акцент окна */
.o2-fw__latest{border-width:2px;background:
    radial-gradient(circle at 20% 0,rgba(105,66,251,.28),transparent 60%),
    linear-gradient(180deg,rgba(10,10,20,.94),rgba(6,6,12,.94)) padding-box,
    var(--grad) border-box;
  box-shadow:0 12px 40px rgba(105,66,251,.28)}
.o2-fw__latest-info b{font-size:2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.o2-fw__dl{padding:13px 24px;font-size:.95rem}
.o2-fw__history .o2-fw__item{opacity:.85}

@media(max-width:900px){
  .o2-fw-card{grid-template-columns:1fr}
  .o2-fw-card__panel{order:2}
}

/* ===== Правки владельца, заход 2 (17.08): анимации и hero-баннер ===== */

/* (3) Баг: h2 уроков вне .o2-head были мелкими — выравниваем со всеми */
.o2-steps__text h2,.o2-mm__text h2,.o2-kit__text h2{font-size:clamp(2.1rem,4.4vw,4.4rem);font-weight:720;line-height:1.02;margin-top:16px}
.o2-steps__text .o2-eyebrow+h2{margin-top:16px}

/* (9) Hero-баннер: одна большая фотография как на M4/M5/M6 —
   прибор в правой трети кадра, слева фото гаснет в чёрный под текст */
.o2-hero{min-height:min(86vh,780px);display:flex;align-items:center}
.o2-hero__bg{background:
    linear-gradient(90deg,rgba(3,5,12,.97) 0%,rgba(3,5,12,.92) 30%,rgba(3,5,12,.58) 52%,rgba(3,5,12,.1) 72%,rgba(3,5,12,0) 100%),
    linear-gradient(0deg,rgba(3,5,12,.55) 0%,rgba(3,5,12,0) 34%),
    url("img/hero-banner.webp") center right / cover no-repeat #04070f;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
.o2-hero__bg::after{content:none}
.o2-hero__inner{grid-template-columns:minmax(0,1fr);max-width:1280px}
.o2-hero__text{max-width:640px}
.o2-scrollcue{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  color:var(--muted-2);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.o2-scrollcue span{width:1px;height:36px;background:linear-gradient(180deg,#6942fb,transparent);animation:o2Cue 2.6s var(--ease) infinite}
@keyframes o2Cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Каскадное всплытие карточек внутри секции (везде, где .o2-stagger) */
.o2-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in .o2-stagger>*{opacity:1;transform:none}
.o2-stagger>*:nth-child(1){transition-delay:.05s}
.o2-stagger>*:nth-child(2){transition-delay:.17s}
.o2-stagger>*:nth-child(3){transition-delay:.29s}
.o2-stagger>*:nth-child(4){transition-delay:.41s}
.o2-stagger>*:nth-child(5){transition-delay:.53s}
.o2-stagger>*:nth-child(6){transition-delay:.65s}

/* (8) Урок 0: луч рисуется по кругу, как скан осциллографа */
[data-reveal].is-in .o2-why__trace{stroke-dasharray:100 100;animation:o2Sweep 3.4s linear infinite}
@keyframes o2Sweep{0%{stroke-dashoffset:100}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* (7) Режимы MODE: номер как у болей на /profi/, живые иконки, кант при ховере */
.o2-mode{position:relative;border-color:transparent;background:var(--card) padding-box,linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05)) border-box;
  transition:transform .4s var(--ease),background .3s}
.o2-mode:hover{transform:translateY(-5px);background:var(--card) padding-box,var(--grad) border-box}
.o2-mode__no{position:absolute;top:18px;right:22px;font-size:2rem;font-weight:800;letter-spacing:-.02em;
  color:rgba(216,222,234,.14);transition:color .3s}
.o2-mode:hover .o2-mode__no{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.o2-ico--wave path{stroke-dasharray:100 100;stroke-dashoffset:0}
.o2-mode:hover .o2-ico--wave path{animation:o2IcoDraw 1.2s var(--ease)}
@keyframes o2IcoDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* (4) Триггер-карточки: ховер как у режимов */
.o2-trig{border-color:transparent;background:var(--card) padding-box,linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05)) border-box;
  transition:transform .4s var(--ease),background .3s}
.o2-trig:hover{transform:translateY(-5px);background:var(--card) padding-box,var(--grad) border-box}

/* (2) Генератор: волны отрисовываются лучом по очереди */
[data-reveal].is-in .o2-gen__waves path{stroke-dasharray:100 100;animation:o2WaveDraw 2.8s var(--ease) infinite}
@keyframes o2WaveDraw{0%{stroke-dashoffset:100}45%{stroke-dashoffset:0}80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.o2-gen__waves svg:nth-child(1) path{animation-delay:0s}
.o2-gen__waves svg:nth-child(2) path{animation-delay:.25s}
.o2-gen__waves svg:nth-child(3) path{animation-delay:.5s}
.o2-gen__waves svg:nth-child(4) path{animation-delay:.75s}
.o2-gen__waves svg:nth-child(5) path{animation-delay:1s}
.o2-gen__waves svg:nth-child(6) path{animation-delay:1.25s}

/* (5) Урок 2: hover-связь пинов и карточек */
.o2-pin{transition:transform .25s var(--ease),opacity .25s,box-shadow .25s}
.o2-screen__stage.has-hover .o2-pin:not(.is-hot){opacity:.35;animation-play-state:paused}
.o2-pin.is-hot{transform:translate(-50%,-50%) scale(1.35);z-index:3;
  box-shadow:0 2px 10px rgba(0,0,0,.55),0 0 0 6px rgba(105,66,251,.35)}
.o2-pin--flat.is-hot{transform:scale(1.15)}
.o2-screen__callouts li{transition:border-color .25s,background .25s;cursor:default}
.o2-screen__callouts li.is-hot{border-color:rgba(105,66,251,.6);background:rgba(105,66,251,.1)}

/* (1) Характеристики: плитки ключевых цифр над таблицами (стиль полосы цифр M6) */
.o2-specs__stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;list-style:none;margin:0 0 26px;padding:0}
.o2-specs__stats li{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2.2vw,28px);border-radius:var(--radius-l);border:1px solid transparent;
  background:var(--card) padding-box,var(--grad-dim) border-box;
  box-shadow:0 24px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04);transition:transform .4s var(--ease)}
.o2-specs__stats li:hover{transform:translateY(-4px)}
.o2-specs__stats b{font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:780;letter-spacing:-.02em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.o2-specs__stats b i{font-style:normal;font-size:.62em;margin-left:.14em}
.o2-specs__stats span{font-size:.8rem;line-height:1.4;color:var(--muted-2)}
/* аккордеоны характеристик — плюсики как в FAQ, а не «просто список» */
.o2-spec{background:linear-gradient(180deg,rgba(15,18,28,.6),rgba(7,9,16,.8));transition:border-color .25s}
.o2-spec[open]{border-color:var(--line-2)}
.o2-spec summary i{border:0;transform:none;position:relative;flex:0 0 18px;width:18px;height:18px;margin-left:auto}
.o2-spec summary i::before,.o2-spec summary i::after{content:"";position:absolute;inset:0;margin:auto;background:var(--grad);border-radius:2px}
.o2-spec summary i::before{width:16px;height:2px}
.o2-spec summary i::after{width:2px;height:16px;transition:transform .25s var(--ease)}
.o2-spec[open] summary i{transform:none}
.o2-spec[open] summary i::after{transform:rotate(90deg);opacity:0}

@media (prefers-reduced-motion:reduce){
  .o2-stagger>*{opacity:1;transform:none;transition:none}
  .o2-why__trace,.o2-gen__waves path,.o2-ico--wave path{animation:none !important;stroke-dasharray:none}
  .o2-scrollcue span{animation:none}
}
@media(max-width:1024px){
  .o2-specs__stats{grid-template-columns:repeat(3,1fr)}
  .o2-hero{min-height:0}
}
@media(max-width:720px){
  .o2-specs__stats{grid-template-columns:repeat(2,1fr)}
  .o2-specs__stats li:last-child{grid-column:1/-1}
  .o2-gen__waves{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Hero на мобиле — паттерн /profi/: вертикальный баннер фоном сверху,
   текст поверх в тёмной нижней зоне кадра (отдельный кадр hero-mobile.webp) */
@media(max-width:900px){
  .o2-hero{min-height:0;padding-top:0;padding-bottom:24px}
  .o2-hero__bg{
    position:absolute;left:0;right:0;top:0;bottom:auto;height:86svh;
    background:
      linear-gradient(180deg,rgba(3,4,9,.86) 0%,rgba(3,4,9,.5) 10%,rgba(3,4,9,.06) 24%,rgba(3,4,9,0) 46%,rgba(3,4,9,.3) 62%,rgba(5,6,8,.78) 78%,#050608 100%),
      url("img/hero-mobile.webp") center 9svh / cover no-repeat #04070f; /* кадр приспущен: кикер над прибором, не поверх */
    -webkit-mask-image:none;mask-image:none}
  .o2-hero__inner{display:flex;flex-direction:column;min-height:96svh;padding-top:52svh}
  .o2-hero__text{max-width:none}
  .o2-hero__lead{display:none}                  /* лид на мобиле лишний — как на /profi/ */
  .o2-hero .o2-eyebrow{position:absolute;top:clamp(78px,10.4vh,102px);left:0;margin:0}
  .o2-hero .o2-eyebrow,.o2-hero__title{text-shadow:0 2px 22px rgba(3,4,9,.7)}
  .o2-hero__title{margin:0 0 6px;font-size:clamp(2rem,8.4vw,2.9rem)}
  .o2-hero__cta{margin-top:16px}
  .o2-scrollcue{display:none}
}

/* Тема GeneratePress красит button:hover серым (#3f4047) — наши CTA-кнопки
   <button> получали серую подложку при наведении. Перебиваем. */
.mkr-o2 button.o2-cta:hover,.mkr-o2 button.o2-cta:focus{background:none;background-color:transparent;color:#f8faff}