/* ==========================================================================
   ДНК клиента — стили публичного сервиса Owlex.
   Токены те же, что на owlex.tech: фон #0B0F17, лаймовый акцент #ccff00.
   ========================================================================== */

:root{
  --bg:#0B0F17;
  --bg-2:#0e141f;
  --line:#1b2432;
  --line-2:#2a3547;
  --text:#e8edf5;
  --muted:#93a0b4;
  --lime:#ccff00;
  --lime-soft:rgba(204,255,0,.12);
  --radius:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.15;font-weight:750;letter-spacing:-.02em}
p{margin:0}
b,strong{font-weight:700}
.mono{font-family:ui-monospace,SFMono-Regular,"Source Code Pro",Menlo,monospace}

/* Атрибут hidden должен побеждать display:flex — иначе оверлей загрузки
   висит поверх квиза сразу при загрузке страницы (проверено и починено). */
[hidden]{display:none !important}

/* Орбы на фоне */
.ow-orb{position:fixed;border-radius:9999px;filter:blur(80px);pointer-events:none;z-index:0}
.ow-orb--1{width:520px;height:520px;top:-180px;right:-140px;background:rgba(204,255,0,.10);animation:owGlow 6s ease-in-out infinite}
.ow-orb--2{width:420px;height:420px;bottom:-160px;left:-120px;background:rgba(60,120,255,.10);animation:owGlow 8s ease-in-out infinite}

main{position:relative;z-index:1;max-width:840px;margin:0 auto;padding:0 20px 80px}

/* Шапка */
.ow-top{position:relative;z-index:2;max-width:840px;margin:0 auto;padding:20px;display:flex;align-items:center;justify-content:space-between}
.ow-logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em}
.ow-logo__mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--lime);color:#0B0F17;font-size:13px;font-weight:900}
.ow-logo__text{font-size:16px}
.ow-top__nav{display:flex;gap:18px;font-size:14px;color:var(--muted)}
.ow-top__nav a:hover{color:var(--lime)}
@media(max-width:560px){.ow-top__nav{display:none}}

/* Хиро */
.ow-hero{padding:34px 0 26px;animation:owIn .8s var(--ease) both}
.ow-badge{display:inline-block;background:var(--lime-soft);border:1px solid rgba(204,255,0,.3);color:var(--lime);font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:20px}
.ow-h1{font-size:clamp(30px,5.4vw,52px);margin-bottom:16px}
.ow-hl{position:relative;color:var(--lime)}
.ow-lead{color:var(--muted);font-size:clamp(15px,1.6vw,18px);max-width:720px}
.ow-facts{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.ow-fact b{display:block;font-size:24px;color:var(--lime)}
.ow-fact span{font-size:13px;color:var(--muted)}

/* Карточка квиза */
.ow-card{background:linear-gradient(180deg,var(--bg-2),rgba(11,15,23,.6));border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-top:8px;animation:owIn .9s var(--ease) .1s both}
@media(max-width:560px){.ow-card{padding:18px}}
.ow-progress{height:6px;background:#141b28;border-radius:999px;overflow:hidden}
.ow-progress__bar{height:100%;width:14%;background:linear-gradient(90deg,var(--lime),#9dff4d);transition:width .45s var(--ease)}
.ow-progress__meta{display:flex;justify-content:space-between;gap:14px;margin:10px 0 22px;font-size:13px;color:var(--muted)}
.ow-progress__hint{text-align:right;max-width:58%}
@media(max-width:620px){.ow-progress__hint{display:none}}

.ow-step{display:none}
.ow-step.is-active{display:block;animation:owSwap .45s var(--ease) both}
.ow-step__title{display:flex;align-items:center;gap:12px;font-size:clamp(19px,2.4vw,24px);margin-bottom:8px}
.ow-step__num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--lime-soft);border:1px solid rgba(204,255,0,.3);color:var(--lime);font-size:14px;font-weight:800;flex:0 0 auto}
.ow-step__hint{color:var(--muted);font-size:14px;margin-bottom:18px}
.ow-sub{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 10px;font-weight:700}

/* Поля */
.ow-input{width:100%;background:#0a0f18;border:1px solid var(--line);border-radius:12px;color:var(--text);font:inherit;padding:14px 16px;outline:none;transition:border-color .2s,box-shadow .2s}
.ow-input:focus{border-color:rgba(204,255,0,.6);box-shadow:0 0 0 3px rgba(204,255,0,.12)}
.ow-input--area{resize:vertical;min-height:88px;margin-bottom:4px}
.ow-input--short{width:130px;display:inline-block}

/* Чипы */
.ow-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ow-chip{background:#101725;border:1px solid var(--line);color:var(--text);font:inherit;font-size:14px;padding:9px 14px;border-radius:999px;cursor:pointer;transition:all .18s var(--ease)}
.ow-chip:hover{border-color:var(--line-2);transform:translateY(-1px)}
.ow-chip.is-on{background:var(--lime);border-color:var(--lime);color:#0B0F17;font-weight:700}

/* Навигация */
.ow-nav{display:flex;gap:12px;align-items:center;margin-top:26px}
.ow-btn{position:relative;overflow:hidden;background:var(--lime);color:#0B0F17;border:1px solid var(--lime);font:inherit;font-weight:750;padding:13px 22px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .18s var(--ease),filter .2s}
.ow-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.ow-btn[disabled]{opacity:.55;cursor:default;transform:none}
.ow-btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.ow-btn--ghost:hover{border-color:var(--line-2)}
.ow-btn--go{background:linear-gradient(90deg,var(--lime),#9dff4d)}
.ow-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-140%) skewX(-18deg);opacity:0}
.ow-btn:hover::after{opacity:1;animation:owSweep .9s ease-out}
.ow-arrow{font-weight:800}
.ow-captcha{margin-top:6px}
.ow-captcha label{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.ow-captcha b{color:var(--lime)}
.ow-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ow-summary{margin-top:18px;font-size:13px;color:var(--muted);display:none}
.ow-summary.is-on{display:block;animation:owSwap .4s var(--ease) both}
.ow-summary b{color:var(--text);font-weight:600}
.ow-error{margin-top:16px;background:rgba(255,70,70,.09);border:1px solid rgba(255,70,70,.35);color:#ffb4b4;border-radius:12px;padding:12px 14px;font-size:14px}

/* Что будет в разборе */
.ow-how{margin-top:56px}
.ow-h2{font-size:clamp(22px,3vw,30px);margin-bottom:18px}
.ow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.ow-tile{background:linear-gradient(180deg,var(--bg-2),rgba(11,15,23,.5));border:1px solid var(--line);border-radius:14px;padding:16px;transition:transform .25s var(--ease),border-color .25s}
.ow-tile:hover{transform:translateY(-3px);border-color:var(--line-2)}
.ow-tile b{display:block;margin-bottom:6px}
.ow-tile span{color:var(--muted);font-size:14px}

/* Загрузка */
.ow-loading{position:fixed;inset:0;background:rgba(7,10,16,.94);backdrop-filter:blur(6px);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center}
.ow-loading__ring{width:64px;height:64px;border-radius:999px;border:3px solid rgba(204,255,0,.18);border-top-color:var(--lime);animation:owSpin 1s linear infinite;position:relative}
.ow-loading__ring span{position:absolute;inset:10px;border-radius:999px;background:rgba(204,255,0,.06);animation:owGlow 2.4s ease-in-out infinite}
.ow-loading__text b{display:block;font-size:19px;margin-bottom:6px}
.ow-loading__text span{color:var(--muted);font-size:14px}
.ow-loading__lines{width:min(420px,90vw)}
.ow-linebar{height:6px;background:#141b28;border-radius:999px;overflow:hidden;margin-bottom:10px}
.ow-linebar i{display:block;height:100%;width:var(--w,40%);background:linear-gradient(90deg,rgba(204,255,0,.5),var(--lime));animation:owBarPulse 2s ease-in-out infinite}
.ow-loading__note{color:var(--muted);font-size:13px;max-width:520px}

/* Результат */
.ow-result{margin-top:10px;animation:owIn .7s var(--ease) both}
.ow-result__head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.ow-sec{margin-top:30px}
.ow-sec__title{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--lime);font-weight:800;margin-bottom:12px}
.ow-quote{background:linear-gradient(180deg,rgba(204,255,0,.07),rgba(11,15,23,.4));border:1px solid rgba(204,255,0,.28);border-radius:16px;padding:20px;font-size:clamp(18px,2.4vw,24px);font-weight:700;line-height:1.3}
.ow-quote small{display:block;margin-top:10px;font-size:14px;font-weight:400;color:var(--muted);line-height:1.5}
.ow-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.ow-card-s{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px}
.ow-card-s__top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px}
.ow-card-s__who{font-weight:700}
.ow-score{font-size:12px;font-weight:800;color:#0B0F17;background:var(--lime);border-radius:999px;padding:3px 9px;flex:0 0 auto}
.ow-card-s p{color:var(--muted);font-size:14px;margin-top:6px}
.ow-card-s p b{color:var(--text);font-weight:600}
.ow-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ow-list li{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:12px;padding:14px 16px}
.ow-list li p{color:var(--muted);font-size:14px;margin-top:6px}
.ow-hooks{display:grid;gap:10px}
.ow-hook{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-weight:650}
.ow-hook em{font-style:normal;color:var(--lime);background:rgba(204,255,0,.1);border-radius:5px;padding:1px 6px}
.ow-screens{display:grid;gap:12px}
.ow-screen{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;grid-template-columns:38px 1fr;gap:14px}
.ow-screen__n{font-family:ui-monospace,monospace;color:var(--lime);font-weight:800}
.ow-screen h4{margin:0 0 6px;font-size:16px}
.ow-screen ul{margin:8px 0 10px 18px;padding:0;color:var(--muted);font-size:14px}
.ow-screen .ow-cta{display:inline-block;background:var(--lime-soft);border:1px solid rgba(204,255,0,.3);color:var(--lime);font-size:13px;font-weight:700;border-radius:999px;padding:5px 12px}
.ow-locked{position:relative}
.ow-locked__blur{filter:blur(5px);opacity:.5;user-select:none;pointer-events:none}
.ow-locked__veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:linear-gradient(180deg,rgba(11,15,23,.35),rgba(11,15,23,.9));border-radius:14px;padding:20px}
.ow-locked__veil b{font-size:18px}
.ow-locked__veil span{color:var(--muted);font-size:14px;max-width:420px}
.ow-form{margin-top:8px;background:linear-gradient(180deg,var(--bg-2),rgba(11,15,23,.5));border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.ow-form__row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.ow-form__row{grid-template-columns:1fr}}
.ow-form label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px}
.ow-form .ow-field{margin-bottom:12px}
.ow-note{font-size:13px;color:var(--muted);margin-top:12px}
.ow-foot{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.ow-foot a:hover{color:var(--lime)}
.ow-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--lime);color:#0B0F17;font-weight:700;padding:12px 20px;border-radius:12px;z-index:60;animation:owSwap .3s var(--ease) both}
.ow-chips-note{font-size:12px;color:var(--muted);margin-top:8px}

/* Форма заявки в открытом разборе */
.ow-lead{margin-top:34px}
.ow-step--final .ow-hint{color:var(--muted);font-size:14px}

/* Анимации */
@keyframes owIn{0%{opacity:0;transform:translateY(22px) scale(.99)}100%{opacity:1;transform:none}}
@keyframes owSwap{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
@keyframes owGlow{0%,100%{opacity:.4}50%{opacity:.85}}
@keyframes owPulse{0%{box-shadow:0 0 0 0 rgba(204,255,0,.4)}70%{box-shadow:0 0 0 14px rgba(204,255,0,0)}100%{box-shadow:0 0 0 0 rgba(204,255,0,0)}}
@keyframes owSweep{0%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
@keyframes owSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes owBarPulse{0%,100%{opacity:.55}50%{opacity:1}}
.ow-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ow-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .ow-reveal{opacity:1;transform:none}
}
@media print{
  .ow-top,.ow-nav,.ow-form,.ow-loading,.ow-how,.ow-foot{display:none !important}
  body{background:#fff;color:#000}
  .ow-locked__blur{filter:none;opacity:1}
  .ow-locked__veil{display:none}
}

/* ── Телефон: 80% клиентов смотрят разбор с мобильного ─────────────────────
   Широкий разбор на телефоне = простыня нечитаемого текста, поэтому здесь
   одиночные колонки, меньше кегль, меньше воздуха. */
@media(max-width:700px){
  main{padding:0 14px 56px}
  .ow-top{padding:14px}
  .ow-h1{font-size:27px;line-height:1.15}
  .ow-lead{font-size:15px}
  .ow-fact b{font-size:19px}
  .ow-card{padding:16px}
  .ow-cards,.ow-grid{grid-template-columns:1fr}
  .ow-sec{margin-top:24px}
  .ow-quote{padding:16px;font-size:19px}
  .ow-hook{font-size:15px;padding:12px 14px}
  .ow-list li{padding:12px 14px}
  .ow-screen{grid-template-columns:28px 1fr;gap:10px;padding:13px}
  .ow-screen h4{font-size:15px}
  .ow-result__head{gap:8px}
  .ow-actions{gap:8px}
}
@media(max-width:430px){
  .ow-h1{font-size:24px}
  .ow-quote{font-size:17px}
  .ow-progress__meta{font-size:12px}
  .ow-chip{padding:9px 12px;font-size:14px}
}

/* ── Режим встраивания в iframe (?embed=1) ───────────────────────────────────
   Страница живёт внутри блока на owlex.tech: свой фон/шапку/подвал и орбы
   убираем, иначе внутри блока появляется «сайт в сайте». Высоту подгоняет
   родитель по postMessage из quiz.php. */
html.ow-embed,html.ow-embed body{background:transparent}
html.ow-embed .ow-orb{display:none}
/* Внутри чужой страницы свой hero и витрину «что будет в разборе» не показываем:
   контекст даёт родительская страница, иначе получается «сайт в сайте». */
html.ow-embed .ow-hero,html.ow-embed .ow-how{display:none}
html.ow-embed .ow-card{border-radius:18px}
html.ow-embed main{max-width:none;padding:0 0 8px}
html.ow-embed .ow-quiz{padding-top:0}
@media(max-width:700px){html.ow-embed main{padding:0 0 4px}}