/* =========================================================================
   ВЕРНИ САЙТ, стили. Разметка в index.html, поведение в script.js.
   Тёмный технический сайт: почти чёрный холст, один акцент, никаких
   фотографий. Всё держится на типографике, линиях и воздухе.
   ========================================================================= */
:root{
  --bg:#0a0b0d;
  --alt:#0e1015;          /* фон чередующихся блоков */
  --panel:#14161b;
  --ink:#f2f3f6;
  --dim:#98a0ab;
  --accent:#ff6b35;
  --accent-ink:#170b05;
  --line:rgba(242,243,246,.12);
  --line-2:rgba(242,243,246,.22);
  --radius:12px;
  --pill:999px;
  --wrap:74rem;
  --side:clamp(1.25rem,4vw,3rem);
  --ease:cubic-bezier(.23,1,.32,1);
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --fs:clamp(1rem,.96rem + .2vw,1.09rem);
  --fs-sm:clamp(.875rem,.84rem + .16vw,.95rem);
  --fs-xs:clamp(.75rem,.72rem + .14vw,.82rem);
  --h1:clamp(2.1rem,4.6vw,4rem);
  --h2:clamp(1.6rem,2.6vw,2.4rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;      /* якоря не прячутся под липкой шапкой */
  scrollbar-color:rgba(242,243,246,.26) transparent;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 var(--fs)/1.6 "Golos Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;              /* страховка от случайной горизонтальной прокрутки */
}
h1,h2,h3{ font-family:Manrope,"Segoe UI",system-ui,sans-serif; text-wrap:balance; }
h1,h2,h3,p,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
button,input,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.mono{ font-family:var(--mono); font-size:.92em; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--side); }
.narrow{ max-width:52rem; }
.muted{ color:var(--dim); }

/* ------------------------------------------------------------------ шапка */
.bar{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.bar__in{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  min-height:4.25rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.5rem;
  font:800 1rem/1 Manrope,"Segoe UI",system-ui,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  white-space:nowrap;
}
.brand::before{ content:""; width:.6rem; height:.6rem; border-radius:2px; background:var(--accent); }
.bar__nav{ display:flex; gap:clamp(1rem,2.4vw,2rem); margin-inline:auto; font-size:var(--fs-sm); }
.bar__nav a{ color:var(--dim); text-decoration:none; }
.bar__nav a:hover{ color:var(--ink); }
.bar__side{ display:flex; align-items:center; gap:1rem; margin-left:auto; }
.bar__tel{ font-size:var(--fs-sm); color:var(--dim); text-decoration:none; white-space:nowrap; }
.bar__tel:hover{ color:var(--ink); }

/* ---------------------------------------------------------------- кнопки -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1.3rem;
  border:1px solid transparent; border-radius:var(--pill);
  font-size:var(--fs-sm); font-weight:600; line-height:1.2;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform 140ms var(--ease), background-color 140ms var(--ease),
             border-color 140ms var(--ease), color 140ms var(--ease);
}
.btn--main{ background:var(--accent); color:var(--accent-ink); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); }
.btn:active{ transform:scale(.975); }
.btn[disabled]{ opacity:.6; cursor:progress; }
@media (hover:hover) and (pointer:fine){
  .btn--main:hover{ background:color-mix(in oklab,var(--accent) 88%,white); }
  .btn--ghost:hover{ border-color:rgba(242,243,246,.42); background:rgba(242,243,246,.07); }
}
@media (pointer:coarse){ .btn{ padding-block:.85rem; } }

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.actions--center{ justify-content:center; }

/* ----------------------------------------------------------- первый экран */
.hero{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5.5rem); }
.hero__in{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1.05fr .95fr;
  align-items:start;
}
.eyebrow{
  font:400 var(--fs-xs)/1.5 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.hero h1{
  margin-top:.75rem;
  font-size:var(--h1); font-weight:800; line-height:1.02; letter-spacing:-.03em;
}
.lede{
  margin-top:1.1rem;
  max-width:46ch;
  font-size:clamp(1.02rem,1.3vw,1.2rem);
  line-height:1.5; color:var(--dim);
}
.marks{ margin-top:1.5rem; display:grid; gap:.55rem; font-size:var(--fs-sm); }
/* Маркер абсолютный, а не флекс: иначе строка со вставками вроде .htaccess
   не даёт себя сжать и раздувает колонку на узком экране. */
.marks li{ position:relative; padding-left:1.05rem; }
.marks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.45rem; height:.45rem; border-radius:50%; background:var(--accent);
}

/* ------------------------------------------------------------ блоки страницы */
.section{ padding-block:clamp(3.5rem,7vw,6rem); }
.section--alt{ background:var(--alt); border-block:1px solid var(--line); }
.section h2{ font-size:var(--h2); font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.section__lede{ margin-top:.9rem; max-width:56ch; color:var(--dim); }

.cells{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid; gap:clamp(1.4rem,2.6vw,2.2rem) clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:repeat(3,1fr);
}
.cells > li{ border-top:1px solid var(--line); padding-top:1.1rem; min-width:0; }
.cells h3{ font-size:1.06rem; font-weight:700; }
.cells p{ margin-top:.45rem; font-size:var(--fs-sm); color:var(--dim); }

.split{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1.3fr .7fr; align-items:start;
}
.split > *{ min-width:0; }
.ticks{
  margin-top:clamp(1.5rem,3vw,2.2rem);
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem 2rem;
  font-size:var(--fs-sm);
}
.ticks li{ position:relative; padding-left:1.25rem; }
.ticks li::before{ content:""; position:absolute; left:0; top:.78em; width:.7rem; height:1px; background:var(--accent); }

.note{
  background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.2rem,2.2vw,1.7rem);
}
.note h3{ font-size:1.06rem; font-weight:700; }
.note p{ margin-top:.7rem; font-size:var(--fs-sm); color:var(--dim); }

/* ---------------------------------------------------- как это работает --- */
/* Пять шагов в строку, а не столбиком: номер, засечка на линии, короткий
   текст. Ниже 1100px укладываются в три колонки, дальше в две и в одну. */
.steps{
  counter-reset:s;
  margin-top:clamp(2rem,4vw,3rem);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}
.steps > li{
  counter-increment:s;
  position:relative;
  min-width:0;
  border-top:1px solid var(--line);
  padding-top:2.1rem;
}
.steps > li::after{
  content:""; position:absolute; top:-1px; left:0;
  width:2.5rem; height:1px; background:var(--accent);
}
.steps > li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; top:.9rem; left:0;
  font:400 .8rem/1 var(--mono); letter-spacing:.12em; color:var(--accent);
}
.steps h3{ font-size:1rem; font-weight:700; }
.steps p{ margin-top:.45rem; font-size:var(--fs-sm); color:var(--dim); }

#price p + p{ margin-top:1rem; }
#price p{ color:var(--dim); max-width:62ch; }
#price p:first-of-type{ color:var(--ink); }

/* ------------------------------------------------------------- вопросы --- */
#faq details{ border-top:1px solid var(--line); }
#faq details:last-of-type{ border-bottom:1px solid var(--line); }
#faq summary{
  position:relative; cursor:pointer; list-style:none;
  padding:1.15rem 2.5rem 1.15rem 0;
  font-family:Manrope,"Segoe UI",system-ui,sans-serif;
  font-weight:600; font-size:1.02rem;
}
#faq summary::-webkit-details-marker{ display:none; }
#faq summary::after{
  content:"+"; position:absolute; right:.3rem; top:1.05rem;
  color:var(--accent); font-size:1.35rem; line-height:1;
}
#faq details[open] summary::after{ content:"–"; }
#faq details p{ padding:0 0 1.3rem; max-width:66ch; color:var(--dim); font-size:var(--fs-sm); }

/* ------------------------------------------------------------ контакты --- */
.contact__row{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.contact__item{
  display:grid; gap:.35rem;
  border-top:1px solid var(--line); padding-top:1rem;
  text-decoration:none;
}
.contact__cap{ font-size:var(--fs-xs); color:var(--dim); }
.contact__val{ font-family:Manrope,"Segoe UI",system-ui,sans-serif; font-weight:700; font-size:1.06rem; }
.contact__item:hover .contact__val{ color:var(--accent); }

/* ------------------------------------------------------------- подвал ---- */
.foot{ border-top:1px solid var(--line); padding-block:clamp(2rem,4vw,3rem); }
.foot__in{ display:grid; gap:1rem; }
.foot__brand{
  font:800 .95rem/1 Manrope,"Segoe UI",system-ui,sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
}
.foot__note{ max-width:74ch; font-size:var(--fs-sm); color:var(--dim); }
.foot__links{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:var(--fs-sm); color:var(--dim); }
.foot__links a:hover{ color:var(--ink); }

/* -------------------------------------------------------------- заявка --- */
.lead{
  display:grid; gap:1rem;
  padding:clamp(1.25rem,2.4vw,1.9rem);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 4px rgba(0,0,0,.24), 0 10px 24px -6px rgba(0,0,0,.34),
             inset 0 1px 0 rgba(242,243,246,.08);
}
.lead h2{ font-size:clamp(1.3rem,1.15rem + .8vw,1.7rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.lead__hint{ font-size:var(--fs-sm); color:var(--dim); }
.field{ display:grid; gap:.35rem; min-width:0; }
.field label{ font-size:var(--fs-sm); color:var(--dim); }
.opt{ font-size:var(--fs-xs); color:rgba(152,160,171,.7); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.ctl{
  width:100%; padding:.62rem .75rem;
  background:rgba(10,11,13,.72);
  border:1px solid var(--line-2); border-radius:6px;
  transition:border-color 140ms var(--ease);
}
.ctl::placeholder{ color:rgba(152,160,171,.7); }
.ctl:hover{ border-color:rgba(242,243,246,.34); }
.ctl:focus-visible{ border-color:var(--accent); }
textarea.ctl{ min-height:4.6rem; resize:vertical; }
.consent{ display:flex; gap:.55rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--dim); cursor:pointer; }
.consent input{ flex:0 0 auto; width:1.05rem; height:1.05rem; margin:.18rem 0 0; accent-color:var(--accent); }
.err{ font-size:var(--fs-xs); color:#ffa184; }
.err[hidden]{ display:none; }
.lead__foot{ display:grid; gap:.5rem; }
.status{ font-size:var(--fs-sm); color:var(--dim); }
.status a{ color:var(--ink); }
.fine{ font-size:var(--fs-xs); color:var(--dim); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ------------------------------------------------------------- движение -- */
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hero__text > *{ animation:rise .55s var(--ease) both; }
.hero__text > *:nth-child(1){ animation-delay:.02s; }
.hero__text > *:nth-child(2){ animation-delay:.06s; }
.hero__text > *:nth-child(3){ animation-delay:.12s; }
.hero__text > *:nth-child(4){ animation-delay:.18s; }
.hero__text > *:nth-child(5){ animation-delay:.24s; }
.hero__form{ animation:rise .55s var(--ease) .1s both; }

/* ------------------------------------------------------------ адаптив --- */
@media (max-width:1080px){
  .bar__nav{ display:none; }
  .hero__in{ grid-template-columns:1fr; }
  .hero__form{ max-width:34rem; }
  .cells{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .contact__row{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px){
  .cells{ grid-template-columns:1fr; }
  .ticks{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .bar__tel{ display:none; }
  .steps{ grid-template-columns:1fr 1fr; }
}
/* узкие телефоны: шапка обязана влезать в 320px */
@media (max-width:420px){
  :root{ --side:1.1rem; }
  .brand{ font-size:.85rem; letter-spacing:.1em; }
  .bar__side{ gap:.6rem; }
  .bar__side .btn{ padding-inline:1rem; font-size:var(--fs-xs); }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero__text > *, .hero__form{ animation:none; }
}