/* ============ спокойная сталь ============ */
:root{
  --bg:#F7F8FA; --card:#FFFFFF; --alt:#F1F3F7;
  --line:#E3E7EE; --line2:#C8D0DD;
  --t1:#0D1320; --t2:#3A4457; --t3:#626C80;
  --acc:#18202F; --acc-t:#FFFFFF;
  --ok:#15795A; --warn:#9A5B12;
  --metal:linear-gradient(100deg,#1C2430 12%,#3A4557 30%,#8593A8 46%,#3A4557 62%,#1C2430 80%);
  --r:14px;
  --sh:0 14px 30px -22px rgba(13,19,32,.55);
  --haze1:#8D9AAD; --haze2:#C9BCA6; --haze3:#5B6577;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0A0D14; --card:#121722; --alt:#171D2A;
    --line:#232B3B; --line2:#343E53;
    --t1:#EEF1F6; --t2:#C2C9D6; --t3:#8B94A6;
    --acc:#EEF1F6; --acc-t:#0A0D14;
    --ok:#38B48A; --warn:#D99A4E;
    --metal:linear-gradient(100deg,#E6EAF2 12%,#AEB8C8 30%,#FFFFFF 46%,#AEB8C8 62%,#E6EAF2 80%);
    --sh:0 14px 30px -22px rgba(0,0,0,.9);
    --haze1:#2A3547; --haze2:#4A4234; --haze3:#1B2331;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0D14; --card:#121722; --alt:#171D2A;
  --line:#232B3B; --line2:#343E53;
  --t1:#EEF1F6; --t2:#C2C9D6; --t3:#8B94A6;
  --acc:#EEF1F6; --acc-t:#0A0D14;
  --ok:#38B48A; --warn:#D99A4E;
  --metal:linear-gradient(100deg,#E6EAF2 12%,#AEB8C8 30%,#FFFFFF 46%,#AEB8C8 62%,#E6EAF2 80%);
  --sh:0 14px 30px -22px rgba(0,0,0,.9);
  --haze1:#2A3547; --haze2:#4A4234; --haze3:#1B2331;
}
:root[data-theme="light"]{
  --bg:#F7F8FA; --card:#FFFFFF; --alt:#F1F3F7;
  --line:#E3E7EE; --line2:#C8D0DD;
  --t1:#0D1320; --t2:#3A4457; --t3:#626C80;
  --acc:#18202F; --acc-t:#FFFFFF;
  --ok:#15795A; --warn:#9A5B12;
  --metal:linear-gradient(100deg,#1C2430 12%,#3A4557 30%,#8593A8 46%,#3A4557 62%,#1C2430 80%);
  --sh:0 14px 30px -22px rgba(13,19,32,.55);
  --haze1:#8D9AAD; --haze2:#C9BCA6; --haze3:#5B6577;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--t1);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
a{color:inherit;text-decoration:none}
.hidden{display:none !important}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative}
.num{font-variant-numeric:tabular-nums}

/* ---------- эффект 1: дымка только в шапке ---------- */
.haze{position:absolute;inset:0 0 auto;height:128vh;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 96%)}
.haze i{position:absolute;display:block;border-radius:50%;filter:blur(130px);opacity:.42}
.haze i:nth-child(1){width:60vw;height:60vw;left:-10vw;top:-14vh;background:var(--haze1);animation:drift1 34s ease-in-out infinite alternate}
.haze i:nth-child(2){width:52vw;height:52vw;right:-8vw;top:6vh;background:var(--haze2);animation:drift2 42s ease-in-out infinite alternate}
.haze i:nth-child(3){width:46vw;height:46vw;left:34vw;top:44vh;background:var(--haze3);animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.14)}}
@keyframes drift2{to{transform:translate3d(-11vw,10vh,0) scale(1.09)}}
@keyframes drift3{to{transform:translate3d(6vw,-8vh,0) scale(1.17)}}

/* ---------- эффект 2: зерно ---------- */
.grain{position:absolute;inset:0 0 auto;height:128vh;pointer-events:none;z-index:1;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

main,header,footer{position:relative;z-index:2}

/* ---------- типографика ---------- */
h1{margin:0 0 20px;font-size:clamp(36px,5.2vw,56px);line-height:1.09;letter-spacing:-.033em;font-weight:640;
  text-wrap:balance;max-width:17ch}
h2{margin:0 0 14px;font-size:clamp(24px,3vw,33px);line-height:1.18;letter-spacing:-.026em;font-weight:640;text-wrap:balance}
h3{font-weight:640;letter-spacing:-.02em}
.lead{margin:0 0 30px;font-size:17.5px;line-height:1.6;color:var(--t2);max-width:54ch}
.lead b{color:var(--t1);font-weight:600}
.sec-lead{margin:0 0 34px;color:var(--t2);font-size:16px;max-width:54ch}
.eyebrow{font-size:11.5px;font-weight:680;letter-spacing:.17em;text-transform:uppercase;color:var(--t3);margin-bottom:14px}

/* ---------- эффект 3: металлический блик по одной фразе ---------- */
.metal{background:var(--metal);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 14s linear infinite}
@keyframes sheen{to{background-position:280% 0}}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:66px}
.logo{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:640;letter-spacing:-.02em}
.mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--acc);color:var(--acc-t);font-size:15px;font-weight:680;letter-spacing:-.02em}
.top nav{margin-left:auto;display:flex;gap:26px;align-items:center;font-size:14.5px;color:var(--t2)}
.top nav a:hover{color:var(--t1)}
@media (max-width:820px){.top nav a.nav-hide{display:none}}
.theme{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;cursor:pointer;color:var(--t2);flex:0 0 auto}
.theme svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme:hover{border-color:var(--line2)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;cursor:pointer;
  border-radius:11px;padding:14px 22px;font:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;
  background:var(--acc);color:var(--acc-t);transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(13,19,32,.7)}
.btn:active{transform:none}
.btn.ghost{background:var(--card);color:var(--t1);border-color:var(--line2)}
.btn.ghost:hover{background:var(--alt)}
.btn.g{background:var(--ok);color:#fff}
.btn.sm{padding:10px 16px;font-size:14px;border-radius:10px}
.btn.wide{width:100%}
.btn:focus-visible{outline:2px solid var(--t1);outline-offset:3px}

/* ---------- секции ---------- */
.hero{padding:92px 0 64px}
section{padding:76px 0;border-top:1px solid var(--line)}
@media (max-width:760px){.hero{padding:60px 0 44px}section{padding:52px 0}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- карточки ---------- */
.card,.step,.f12,.plan,.vs-col,.lcard,.leads-stats div,details,.turnkey,.tbl-hold{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.step,.f12,.plan,.lcard,.card{position:relative;overflow:hidden;transition:transform .22s,border-color .22s}
.step:hover,.f12:hover,.plan:hover,.lcard:hover{transform:translateY(-3px);border-color:var(--line2)}

/* ---------- эффект 5: блик за курсором ---------- */
.glow::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(120,140,170,.13),transparent 62%)}
.glow:hover::after{opacity:1}

/* ---------- эффект 6: появление при скролле ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.rise.in{opacity:1;transform:none}

/* ---------- шаги ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:14px}
.step{padding:22px}
.step .k{font-size:11.5px;font-weight:680;letter-spacing:.17em;color:var(--t3);margin-bottom:14px}
.step h3{margin:0 0 8px;font-size:16.5px;line-height:1.3}
.step p{margin:0;font-size:14.5px;color:var(--t2);line-height:1.6}

/* ---------- тарифы ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;align-items:start}
.plan{padding:26px 24px;display:flex;flex-direction:column;gap:18px}
.plan.hot{border-color:var(--line2)}
.plan .tag{position:absolute;top:0;right:0;background:var(--alt);color:var(--t2);
  font-size:11.5px;font-weight:680;letter-spacing:.13em;text-transform:uppercase;padding:6px 14px;border-radius:0 var(--r) 0 12px}
.plan h3{margin:0;font-size:17px}
.price{display:flex;align-items:baseline;gap:7px}
.price b{font-size:36px;line-height:1;font-weight:640;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.price span{color:var(--t3);font-size:14px}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;font-size:14.5px;color:var(--t2)}
.plan li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.plan li svg{width:16px;height:16px;flex:0 0 auto;margin-top:4px;stroke:var(--ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.plan .foot{margin-top:auto;font-size:12.5px;color:var(--t3);line-height:1.5}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px}
details{padding:17px 20px;box-shadow:none}
details[open]{border-color:var(--line2)}
summary{cursor:pointer;font-size:15.5px;font-weight:600;line-height:1.45;list-style:none;display:flex;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:1.6px solid var(--t3);
  border-bottom:1.6px solid var(--t3);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
details p{margin:12px 0 0;color:var(--t2);font-size:14.5px;max-width:54ch}

/* ---------- финал, подвал, липкая ---------- */
.final{text-align:center}
.final h1,.final h2{max-width:20ch;margin-inline:auto}
.final .sec-lead{margin-inline:auto}
footer{border-top:1px solid var(--line);padding:34px 0 92px;color:var(--t3);font-size:13.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.foot-tag{font-size:15px;color:var(--t2);font-weight:600;letter-spacing:-.02em}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:11px 20px calc(11px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  display:none;gap:12px;align-items:center}
.sticky .p{font-size:12.5px;color:var(--t3);line-height:1.35}
.sticky .p b{display:block;color:var(--t1);font-size:14px;font-weight:600}
@media (max-width:760px){.sticky{display:flex}footer{padding-bottom:112px}}

/* ---------- модалка ---------- */
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,13,20,.55);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal .box{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);
  padding:30px 26px;max-width:440px;width:100%;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  animation:pop .3s cubic-bezier(.2,.8,.3,1) both}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 10px;font-size:23px;line-height:1.2;letter-spacing:-.028em}
.modal p{margin:0 0 20px;color:var(--t2);font-size:14.5px}
.modal .sum{background:var(--alt);border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal .sum b{font-size:21px;font-weight:640;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.modal .x{position:absolute;top:16px;right:20px;color:var(--t3);font-size:24px;cursor:pointer;line-height:1}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rise{opacity:1;transform:none}
}