/*
 * home.css — главная okeysait.ru (редизайн 04.10.2026, v=4). Подключается только из main.tpl.
 * Палитра и шапка — в okeano-site.css (--os-*). Здесь: белый фон, чернильный текст, фиолетовый — только на действии.
 * Движение: вступление первого экрана (CSS), появление блоков при прокрутке ([data-r] + js/okeano-site.js),
 * набор адреса в рамке, линия шагов, счётчик цены. Без JS и при reduced-motion всё видно сразу.
 */
.oh{color:var(--os-ink);overflow-wrap:anywhere}
.oh *,.oh *::before,.oh *::after{box-sizing:border-box}
.oh section{padding:72px 0}
.oh h1,.oh h2,.oh h3,.oh p,.oh ul,.oh ol{margin:0;padding:0}
.oh h1,.oh h2,.oh h3{font-weight:700;color:var(--os-ink)}
.oh h2{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.02em}
.oh h3{font-size:19px;line-height:1.3;letter-spacing:-.01em}
.oh p{font-size:16.5px;line-height:1.55;color:var(--os-mut)}

/* кнопка и ссылка-стрелка */
.oh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:14px;background:var(--os-vio);color:#fff!important;font-size:16.5px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none!important;transition:background .2s,transform .25s var(--os-ease),box-shadow .25s,border-color .2s,color .2s}
.oh-btn:hover{background:var(--os-vio-d);transform:translateY(-2px);box-shadow:0 12px 26px rgba(106,46,232,.28)}
.oh-btn:active{transform:translateY(0) scale(.98);box-shadow:none;transition-duration:.08s}
.oh-btn--ghost{background:#fff;color:var(--os-ink)!important;border:1.5px solid var(--os-line)}
.oh-btn--ghost:hover{background:#fff;border-color:var(--os-vio);color:var(--os-vio)!important;box-shadow:0 10px 22px rgba(29,22,64,.08)}
.oh-link{display:inline-flex;align-items:center;gap:7px;font-size:16.5px;font-weight:700;color:var(--os-vio)!important;text-decoration:none!important}
.oh-link svg{width:16px;height:16px;transition:transform .3s var(--os-ease)}
.oh-link:hover svg{transform:translateX(4px)}
.oh a:focus-visible,.oh button:focus-visible{outline:2px solid var(--os-vio);outline-offset:3px;border-radius:8px}

/* ——— первый экран ——— */
main:has(> .oh){padding-top:0!important;padding-bottom:0!important}
.oh .oh-hero{padding:56px 0 64px}
.oh-hero__in{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
.oh-hero h1{font-size:clamp(40px,5.6vw,72px);line-height:.98;letter-spacing:-.035em}
.oh-hero h1 span{display:block;color:var(--os-vio)}
.oh-hero__lead{margin-top:22px!important;max-width:27em;font-size:19px!important;line-height:1.5!important}
.oh-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.oh-hero__note{margin-top:16px!important;font-size:14.5px!important}

/* рамка-браузер со снимком магазина */
.oh-shot{display:block;border-radius:18px;border:1px solid var(--os-line);background:#fff;overflow:hidden;box-shadow:0 30px 70px -20px rgba(29,22,64,.28),0 2px 6px rgba(29,22,64,.05);text-decoration:none!important;transition:transform .5s var(--os-ease),box-shadow .5s var(--os-ease)}
.oh-shot:hover{transform:translateY(-6px);box-shadow:0 44px 80px -24px rgba(29,22,64,.34),0 2px 6px rgba(29,22,64,.05)}
.oh-shot__bar,.oh-live__bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;background:var(--os-mist);border-bottom:1px solid var(--os-line)}
.oh-shot__bar i,.oh-live__bar i{flex:none;width:9px;height:9px;border-radius:50%;background:#d6cfee}
.oh-shot__url,.oh-live__bar span{margin-left:10px;padding:5px 12px;border-radius:8px;background:#fff;font-size:13px;line-height:1.2;color:var(--os-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oh-shot__url b{font-weight:700;color:var(--os-ink)}
.oh-shot__url em{display:none;width:1.5px;height:13px;margin:0 1px -2px;background:var(--os-vio);animation:ohBlink 1s steps(1) infinite}
.oh-shot.is-typing .oh-shot__url em{display:inline-block}
.oh-shot img{display:block;width:100%;height:auto}
@keyframes ohBlink{50%{opacity:0}}

/* вступление: строки поднимаются по очереди, рамка выезжает следом */
@keyframes ohRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ohShot{from{opacity:0;transform:translateY(34px) scale(.975)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .oh-hero h1{animation:ohRise .7s var(--os-ease) both}
  .oh-hero__lead{animation:ohRise .7s .08s var(--os-ease) both}
  .oh-hero__cta{animation:ohRise .7s .16s var(--os-ease) both}
  .oh-hero__note{animation:ohRise .7s .24s var(--os-ease) both}
  .oh-shot{animation:ohShot .9s .12s var(--os-ease) both}
}

/* ——— три шага: настоящая последовательность, поэтому с номерами и линией ——— */
.oh .oh-steps{padding:0 0 72px}
.oh-steps__list{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;position:relative;padding-top:0}
.oh-steps__list li{counter-increment:s;position:relative;padding-top:52px}
.oh-steps__list li::before{content:counter(s);position:absolute;top:0;left:0;z-index:1;width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid var(--os-line);font-size:15px;font-weight:700;line-height:33px;text-align:center;color:var(--os-ink);transition:border-color .4s .25s,color .4s .25s,background .4s .25s}
.oh-steps__list li::after{content:"";position:absolute;top:17.5px;left:44px;right:-24px;height:1.5px;background:var(--os-line);transform-origin:left;transition:transform .7s .3s var(--os-ease)}
.oh-steps__list li:last-child::after{content:none}
.oh-steps__list b{display:block;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.oh-steps__list p{margin-top:6px!important;font-size:15.5px!important;max-width:22em}
.oh-steps__list li.r-wait::after{transform:scaleX(0)}
.oh-steps__list li:not(.r-wait)::before{border-color:var(--os-vio);color:var(--os-vio)}

/* ——— живой магазин ——— */
.oh .oh-live{background:var(--os-mist)}
.oh-live__in{display:grid!important;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:48px;align-items:center}
.oh-live__frame{border-radius:18px;border:1px solid var(--os-line);background:#fff;overflow:hidden;box-shadow:0 24px 60px -24px rgba(29,22,64,.22)}
.oh-live__body{padding:14px;min-height:420px}
.oh-live__txt p{margin:14px 0 22px!important}

/* ——— что есть в магазине ——— */
.oh-feats__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:34px}
.oh-feat{padding-top:20px;border-top:1.5px solid var(--os-ink)}
.oh-feat p{margin-top:8px!important}
.oh-feats__more{margin-top:28px!important}
.oh-own{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:48px;padding:24px 28px;border-radius:18px;background:var(--os-mist)}
.oh-own p{max-width:38em}
.oh-own b{color:var(--os-ink)}
.oh-own .oh-btn{flex:none;min-height:46px;padding:0 20px;font-size:15.5px;background:transparent}

/* ——— тарифы ——— */
.oh .oh-plans{padding-top:24px}
.oh-plans__lead{margin-top:10px!important}
.oh-plans__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px;align-items:stretch}
.oh-plan{display:flex;flex-direction:column;padding:28px;border-radius:20px;border:1px solid var(--os-line);background:#fff;transition:border-color .25s,box-shadow .35s var(--os-ease),transform .35s var(--os-ease)}
.oh-plan:hover{border-color:#cfc5f2;box-shadow:0 18px 44px -18px rgba(29,22,64,.20);transform:translateY(-3px)}
.oh-plan h3{font-size:17px;color:var(--os-mut)}
.oh-plan__price{margin-top:12px;font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.oh-plan__term{margin-top:8px;min-height:2.9em;font-size:15px;line-height:1.45;color:var(--os-mut)}
.oh-plan ul{list-style:none;margin:14px 0 24px!important;display:grid;gap:9px}
.oh-plan li{position:relative;padding-left:26px;font-size:16px;line-height:1.4}
.oh-plan li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--os-vio);border-bottom:2px solid var(--os-vio);transform:rotate(-45deg)}
.oh-plan > .oh-btn{margin-top:auto;width:100%}
.oh-pick{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 24px}
.oh-pick__b{height:38px;padding:0 13px;border:1.5px solid var(--os-line);border-radius:10px;background:#fff;font:inherit;font-size:14.5px;font-weight:600;color:var(--os-ink);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s,color .2s,transform .2s var(--os-ease)}
.oh-pick__b:hover{border-color:var(--os-vio)}
.oh-pick__b:active{transform:scale(.95)}
.oh-pick__b.is-on{background:var(--os-ink);border-color:var(--os-ink);color:#fff}
.oh-extras{display:grid;margin-top:8px}
.oh-extra{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--os-line)}
.oh-extra:last-child{border-bottom:0;padding-bottom:0}
.oh-extra b{display:block;font-size:17px;line-height:1.3}
.oh-extra span{display:block;margin-top:3px;font-size:14.5px;line-height:1.4;color:var(--os-mut)}
.oh-extra__p{font-size:17px;font-weight:700;text-align:right;white-space:nowrap}
.oh-extra__p small{display:block;font-size:13px;font-weight:400;color:var(--os-mut)}
.oh-extra a{grid-column:1/-1;justify-self:start;margin-top:4px;font-size:15px;font-weight:700;color:var(--os-vio)!important;text-decoration:none!important;background:linear-gradient(currentColor,currentColor) left bottom/0 1.5px no-repeat;transition:background-size .3s var(--os-ease)}
.oh-extra a:hover{background-size:100% 1.5px}

/* ——— финал ——— */
.oh .oh-end{padding:24px 0 88px;text-align:center}
.oh-end .container{padding:56px 24px;border-radius:24px;background:var(--os-mist)}
.oh-end p{margin:12px auto 26px!important;max-width:30em}

/* ——— появление при прокрутке: класс r-wait ставит и снимает скрипт, без него всё видно ——— */
.oh [data-r]{transition:opacity .7s var(--os-ease),transform .7s var(--os-ease);transition-delay:var(--rd,0s)}
.oh [data-r].r-wait{opacity:0;transform:translateY(22px)}
.oh .oh-plan[data-r]:not(.r-wait){transition:opacity .7s var(--os-ease) var(--rd,0s),border-color .25s,box-shadow .35s var(--os-ease),transform .35s var(--os-ease)}

@media (max-width:980px){
  .oh section{padding:56px 0}
  .oh .oh-hero{padding:32px 0 48px}
  .oh-hero__in{grid-template-columns:minmax(0,1fr);gap:36px}
  .oh-live__in{grid-template-columns:minmax(0,1fr);gap:28px}
  .oh-live__txt{order:-1}
  .oh-feats__grid{gap:24px}
  .oh-plans__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oh-plans__grid .oh-plan:last-child{grid-column:1/-1}
}
@media (max-width:700px){
  .oh section{padding:44px 0}
  .oh .oh-hero{padding:22px 0 40px}
  .oh-hero h1{font-size:clamp(38px,11.5vw,52px)}
  .oh-hero__lead{font-size:17.5px!important;margin-top:16px!important}
  .oh-hero__cta{flex-direction:column;align-items:stretch;gap:16px;margin-top:24px}
  .oh-hero__cta .oh-btn{width:100%}
  .oh-hero__cta .oh-link{justify-content:center}
  .oh-hero__note{text-align:center}
  .oh-shot,.oh-live__frame{border-radius:14px}
  .oh-shot__bar,.oh-live__bar{height:34px}
  .oh .oh-steps{padding:0 0 48px}
  .oh-steps__list{grid-template-columns:minmax(0,1fr);gap:0}
  .oh-steps__list li{padding:4px 0 26px 54px}
  .oh-steps__list li:last-child{padding-bottom:0}
  .oh-steps__list li::after{top:40px;bottom:-0px;left:17.5px;right:auto;width:1.5px;height:auto;transform-origin:top}
  .oh-steps__list li.r-wait::after{transform:scaleY(0)}
  .oh-live__body{padding:12px;min-height:360px}
  .oh-feats__grid{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:24px}
  .oh-feat{padding-top:16px}
  .oh-own{flex-direction:column;align-items:stretch;margin-top:36px;padding:20px}
  .oh .oh-plans{padding-top:8px}
  .oh-plans__grid{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:24px}
  .oh-plan{padding:22px}
  .oh-plan__term{min-height:0}
  .oh-plan__price{font-size:40px}
  .oh-pick__b{height:42px;padding:0 14px}
  .oh .oh-end{padding:8px 0 56px}
  .oh-end .container{padding:36px 18px;border-radius:18px}
  .oh-end .oh-btn{width:100%}
}
@media (hover:none){
  .oh-shot:hover,.oh-plan:hover,.oh-btn:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .oh *,.oh *::before,.oh *::after{animation:none!important;transition:none!important}
  .oh [data-r].r-wait{opacity:1;transform:none}
  .oh-steps__list li.r-wait::after{transform:none}
}