/* ==========================================================================
   Hoverly — стили сайта. Перенесено из дизайна Hero.dc.html (1:1) и дополнено
   реальными правилами :hover / :focus (в дизайне они были динамическими).
   ========================================================================== */

*{ box-sizing:border-box; }

:root{
  --bg:#ffffff; --surface:#F7F7F8; --surface-2:#F0EEEF; --card:#ffffff; --chrome:#ECEBE6;
  --ink:#16160F; --on-ink:#ffffff;
  --muted:#5C5C54; --muted-2:#73736A; --faint:#9C9C92;
  --line:rgba(0,0,0,0.08); --line-2:rgba(0,0,0,0.15);
  --mock:#D8D8D2; --mock-2:#C4C4BC; --accent:#16160F;
}
:root[data-theme="dark"]{
  --bg:#121210; --surface:#1A1A17; --surface-2:#232320; --card:#1B1B18; --chrome:#2A2A26;
  --ink:#F1F0EA; --on-ink:#16160F;
  --muted:#B5B4AB; --muted-2:#9A998F; --faint:#76756C;
  --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.16);
  --mock:#3A3A35; --mock-2:#4A4A44; --accent:#F1F0EA;
}

html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:'Arial','Helvetica Neue',Helvetica,sans-serif; transition:background .4s ease, color .4s ease; }
html{ overflow-x:clip; }
body{ letter-spacing:-0.02em; }
::selection{ background:var(--accent,#2563EB); color:var(--on-ink); }

/* base host wrapper mirrors prototype root */
.app-root{ min-height:100vh; background:var(--bg); display:flex; flex-direction:column; }

[data-theme="dark"] .site-header.is-stuck{ background:rgba(18,18,16,0.6); box-shadow:0 1px 0 var(--line); }

/* navigation underline */
header nav a{ color:inherit; text-decoration:none; position:relative; }
header nav a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform .32s cubic-bezier(.65,.05,.36,1); }
header nav a:hover::after{ transform:scaleX(1); }
header nav a:hover{ color:var(--ink); }

/* ===== Адаптив (из дизайна) ===== */
@media (max-width:760px){ .proc-grid{ grid-template-columns:repeat(2, 1fr) !important; row-gap:44px; } }
@media (max-width:760px){
  .ha-h2{ white-space:nowrap; text-align:center; }
  .ha-h2-br{ display:none; }
  .ha-badge{ display:flex; width:fit-content; margin-left:auto; margin-right:auto; }
  .lead-h2{ text-align:center; }
  .ha-col, .lead-col{ text-align:center; }
  .ha-col .ha-tags{ justify-content:center; }
  .ha-col p{ margin-left:auto; margin-right:auto; }
  .lead-col p{ margin-left:auto; margin-right:auto; }
  .ha-mock-nav > span:not(:last-child){ display:none; }
  .proc-line{ height:4px; border-radius:2px; }
  .proc-line::after{ transform:scaleX(var(--prog,0)) !important; border-radius:2px; }
}
@media (max-width:560px){ .proc-grid{ grid-template-columns:1fr !important; } }

/* мобильная адаптация */
.hdr-burger{ display:none; }
.hdr-lang-mob{ display:none; }
.hero-cap{ display:none; }
.mob-menu{ display:none; }
@media (max-width:1024px){
  main.mpad-hero{ overflow-x:clip; }
  .hero-stage{ height:440px !important; }
  .hero-cta{ flex-wrap:nowrap !important; gap:10px !important; width:100% !important; justify-content:center !important; }
  .hero-cta > button{ flex:1 1 0 !important; min-width:0 !important; padding:0 12px !important; font-size:14px !important; }
  header nav.hdr-nav{ display:none !important; }
  .hdr-right{ display:none !important; }
  .hdr-burger{ display:inline-flex !important; }
  .hdr-lang-mob{ display:block !important; }
  .mob-menu{ display:block; }
  .site-header > div{ padding:15px 20px !important; }
}
@media (max-width:760px){
  .mpad{ padding-top:64px !important; padding-bottom:64px !important; padding-left:22px !important; padding-right:22px !important; }
  .mpadx{ padding-left:22px !important; padding-right:22px !important; }
  .mpad-hero{ padding:80px 22px 32px !important; }
  .nowrap-h{ white-space:normal !important; }
  main.mpad-hero{ overflow-x:clip; }
  .hero-claims{ display:none !important; }
  .hero-cta{ flex-wrap:nowrap !important; gap:10px !important; width:100% !important; margin-top:44px !important; }
  .hero-cta > button{ flex:1 1 0 !important; min-width:0 !important; padding:0 12px !important; font-size:14px !important; }
  .hero-cap{ display:none !important; }
  .hero-stage{ height:360px !important; margin-top:72px !important; }
  #lead{ grid-template-columns:1fr !important; gap:30px !important; }
  #about-grid{ gap:36px !important; }
  .cases-list{ gap:72px !important; }
  .case-row{ gap:32px !important; }
  .ftr-top{ gap:32px !important; }
  .ftr-links{ gap:10px 28px !important; }
}
@media (max-width:480px){
  .hero-stage{ height:320px !important; }
}

/* ===== Процесс ===== */
.proc-num{ display:inline-block; transition:transform .4s cubic-bezier(.2,.7,.3,1); }
.proc-step:hover .proc-num{ transform:translateY(-4px); }
.proc-line{ position:relative; height:2px; background:var(--line); overflow:hidden; }
.proc-line::after{ content:''; position:absolute; inset:0; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.proc-step:hover .proc-line::after{ transform:scaleX(1); }

/* ===== Карточки цен ===== */
.pc-wrap{ position:relative; }
.pc-bg{ position:absolute; inset:0; border-radius:22px; background:var(--ink); z-index:0; opacity:0; transform:translate(0,0) rotate(0deg); transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .45s ease; }
.pc-wrap:hover .pc-bg{ opacity:1; transform:translate(8px,10px) rotate(1.4deg); }
.pc-card{ position:relative; z-index:1; height:100%; transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease; }
.pc-wrap:hover .pc-card{ transform:translate(-3px,-5px); }
.pc-feat-row, .pc-feat-block{ cursor:default; }
.pc-num{ border:1.5px solid var(--mock); color:var(--faint); }
.pc-feat-row.is-hl .pc-num{ border-color:var(--ink); color:var(--ink); }
.pc-txt{ color:var(--ink); }
.pc-feat-row.is-hl .pc-txt{ color:var(--ink); font-weight:600; }
.pc-feat-block{ border:1.5px solid var(--line-2); }
.pc-feat-block.is-hl{ border-color:var(--ink); }
.pc-bnum{ color:var(--faint); }
.pc-feat-block.is-hl .pc-bnum{ color:var(--ink); font-weight:700; }
.pc-bline{ background:var(--mock); }
.pc-feat-tab{ width:18px; height:7px; border-radius:3px; background:var(--mock); border:1.5px solid transparent; cursor:default; transition:border-color .2s ease, background .2s ease; }
.pc-feat-tab.is-hl{ border-color:var(--ink); background:var(--mock-2); }
.pc-feat-cart{ width:11px; height:11px; border-radius:3px; border:1.5px solid var(--mock-2); cursor:default; transition:border-color .2s ease; }
.pc-feat-cart.is-hl{ border-color:var(--ink); }

/* ===== «О студии» — переворот + сборка ===== */
.why-wrap{ position:relative; margin-top:22px; }
.why-bg{ position:absolute; inset:0; border-radius:14px; background:var(--ink); z-index:0; opacity:0; transform:translate(0,0) rotate(0deg); transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .45s ease; }
.why-wrap:hover .why-bg{ opacity:1; transform:translate(6px,8px) rotate(1.2deg); }
.why-card{ position:relative; z-index:1; padding:18px 20px; background:var(--card); border:1px solid var(--line-2); border-radius:14px; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.why-wrap:hover .why-card{ transform:translateY(-2px); }

.ha-flip-inner{ transition:transform .85s cubic-bezier(.4,.08,.2,1); }
.ha-flip-inner.flipped{ transform:rotateY(180deg); }
.ha-asm{ opacity:0; transform:translateY(var(--y,-90px)); transition:opacity .35s ease var(--d,0s), transform .7s cubic-bezier(.4,.05,.5,1.1) var(--d,0s); }
.ha-asm.in{ opacity:1; transform:translateY(0); }
.ha-cur{ opacity:0; transform:translate(42px,30px); transition:opacity .55s ease var(--d,0s), transform .8s cubic-bezier(.22,1,.36,1) var(--d,0s); }
.ha-cur.in{ opacity:1; transform:translate(0,0); }
.ha-btn-primary{ transition:box-shadow .35s ease; }
.ha-btn-primary.ring{ box-shadow:0 0 0 3px var(--ha-line-strong, var(--mock)); }

/* ===== Шапка: стекло при скролле ===== */
.site-header{ background:var(--card); -webkit-backdrop-filter:blur(0px) saturate(1); backdrop-filter:blur(0px) saturate(1); box-shadow:0 1px 0 rgba(0,0,0,0); transition:background .3s ease, box-shadow .3s ease; }
.site-header.is-stuck{ background:rgba(255,255,255,0.6); -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6); box-shadow:0 1px 0 var(--line); }

/* ===== Прелоадер ===== */
.hp-overlay{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .55s ease; }
.hp-overlay.hp-hide{ opacity:0; pointer-events:none; }
.hp-flip{ width:60px; height:60px; perspective:720px; }
.hp-spin{ position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:hpFlip 3.2s ease-in-out infinite; }
.hp-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; display:flex; align-items:center; justify-content:center; }
.hp-back{ transform:rotate3d(1,1,0,180deg); }
@keyframes hpFlip{ 0%,10%{ transform:rotate3d(1,1,0,0deg); } 45%{ transform:rotate3d(1,1,0,180deg); } 55%{ transform:rotate3d(1,1,0,180deg); } 90%,100%{ transform:rotate3d(1,1,0,360deg); } }

/* ==========================================================================
   Реальные :hover / :focus утилиты (в дизайне их подставлял рантайм).
   Сами transition заданы инлайн на элементах — здесь только конечные состояния.
   ========================================================================== */
.h-lift:hover{ transform:translateY(-2px); }
.h-lift1:hover{ transform:translateY(-1px); }
.h-lift3:hover{ transform:translateY(-3px); }
.h-ghost:hover{ transform:translateY(-2px); border-color:var(--line-2); }
.h-ink:hover{ color:var(--ink); }
.h-border:hover{ border-color:var(--line-2); }
.lang-opt:hover{ background:#EEF1F5; }
[data-theme="dark"] .lang-opt:hover{ background:var(--surface-2); }
.fld:focus{ border-color:var(--ink); }

/* доступность: видимый фокус по клавиатуре */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--ink); outline-offset:2px;
}

/* На мобильных (нет :hover) эффект карточек цен/«почему» включается по
   попаданию в центральную область экрана — класс iv-on вешает JS. */
@media (max-width:1024px){
  .why-wrap.iv-on .why-bg{ opacity:1; transform:translate(6px,8px) rotate(1.2deg); }
  .why-wrap.iv-on .why-card{ transform:translateY(-2px); }
  .pc-wrap.iv-on .pc-bg{ opacity:1; transform:translate(8px,10px) rotate(1.4deg); }
  .pc-wrap.iv-on .pc-card{ transform:translate(-3px,-5px); }
}

/* служебное */
[hidden]{ display:none !important; }