/* ============================================================
   Лендинг сбора заявок — audit.wnbstudio.ru
   Стилистика наследует основной сайт wnbstudio.ru: те же шрифт,
   палитра, свечение фона, зерно и виньетка.
   ============================================================ */

:root{
  --bg:      #0a0809;
  --fg:      #f4efe9;
  --muted:   #a2988f;
  --line:    rgba(255,255,255,.12);
  --accent:  #d1934f;
  --accent2: #6b3f86;
  --ease:    cubic-bezier(.22,.68,.28,1);
  --pad:     clamp(20px, 5vw, 90px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--fg);
  font-family:"Manrope", system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; cursor:pointer; }

/* ---------- фоновые слои ---------- */

.ambient{
  position:fixed; inset:-15%; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 42% at 50% 0%,  color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%),
    radial-gradient(58% 50% at 12% 70%, color-mix(in srgb, var(--accent2) 40%, transparent), transparent 74%),
    radial-gradient(50% 44% at 92% 38%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%);
  filter:blur(36px) saturate(1.15);
  opacity:.6;
}
.stars{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.4;
  background-image:
    radial-gradient(1.3px 1.3px at 34px 26px,  rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px   1px   at 148px 92px, rgba(255,255,255,.34), transparent 100%),
    radial-gradient(1.1px 1.1px at 232px 44px, rgba(255,255,255,.26), transparent 100%);
  background-size: 340px 240px, 517px 383px, 271px 199px;
}
.vignette{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:radial-gradient(82% 70% at 50% 40%, transparent 44%, rgba(0,0,0,.55) 100%);
}
.grain{
  position:fixed; inset:-60%; z-index:61; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- шапка ---------- */

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:16px var(--pad);
  background:rgba(10,8,9,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand .logo{ width:27px; height:27px; flex:0 0 auto; color:var(--fg); }
.brand-txt{ display:flex; flex-direction:column; gap:4px; }
.brand b{ font-size:12.5px; font-weight:800; letter-spacing:.17em; }
.brand small{ font-size:7.5px; font-weight:500; letter-spacing:.26em; color:var(--muted); }
.nav{ display:flex; gap:26px; }
.nav a{
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); transition:color .3s;
}
.nav a:hover{ color:var(--fg); }
.nav-out span{ color:var(--accent); }

/* ---------- кнопки ---------- */

.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:13px 27px; border-radius:999px;
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.05);
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg); backdrop-filter:blur(8px);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.pill:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.5); transform:translateY(-2px); }
.pill svg{ width:9px; height:9px; flex:0 0 auto; }
.pill-sm{ padding:10px 19px; font-size:9px; }
.pill-lg{
  padding:17px 38px; font-size:11.5px;
  background:var(--accent); border-color:var(--accent); color:#1a1108;
}
.pill-lg:hover{ background:#e0a35c; border-color:#e0a35c; }

/* ---------- общая типографика блоков ---------- */

.overline{
  font-size:9.5px; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent);
}
h1{
  margin-top:22px;
  font-size:clamp(34px, 6.4vw, 68px); line-height:1.04;
  font-weight:800; letter-spacing:-.02em; text-transform:uppercase;
}
h2{
  margin-top:16px;
  font-size:clamp(25px, 3.6vw, 40px); line-height:1.15;
  font-weight:800; letter-spacing:-.015em;
}
h3{ font-size:17px; font-weight:700; line-height:1.3; }
.lead{
  margin-top:20px; font-size:clamp(17px, 2.2vw, 23px); line-height:1.45;
  font-weight:600; color:var(--fg);
}
.sub{
  margin-top:18px; max-width:640px;
  font-size:15px; line-height:1.7; color:var(--muted); font-weight:400;
}
.sub.center{ margin-left:auto; margin-right:auto; text-align:center; }
.note{ margin-top:18px; font-size:12.5px; color:var(--muted); }

section{ position:relative; z-index:2; }
.block{ padding:clamp(56px, 8vw, 104px) var(--pad); }
.band{ background:rgba(255,255,255,.022); border-block:1px solid var(--line); }

/* ---------- первый экран ---------- */

.hero{
  padding:clamp(54px, 9vw, 112px) var(--pad) clamp(56px, 8vw, 100px);
  max-width:980px;
}
.hero .sub{ margin-top:22px; }
.hero .pill-lg{ margin-top:34px; }

/* ---------- сетка карточек ---------- */

.grid-4{
  margin-top:44px; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
/* три карточки — шире, текста в них больше */
.grid-3{
  margin-top:44px; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
}
#uslugi .pill{ margin-top:36px; }
.card{
  padding:28px 26px; border-radius:16px;
  border:1px solid var(--line); background:rgba(255,255,255,.025);
}
.card .ico{
  display:block; width:30px; height:30px; margin-bottom:16px;
  color:var(--accent);
}
.card h3{ margin-bottom:11px; }
.card p{ font-size:14px; line-height:1.65; color:var(--muted); }

/* ---------- кейс с цифрами ---------- */

.case{
  margin:48px auto 0; max-width:960px; padding:32px clamp(22px, 3vw, 38px);
  border-radius:18px; border:1px solid rgba(209,147,79,.3);
  background:linear-gradient(140deg, rgba(209,147,79,.09), rgba(107,63,134,.07));
}
.case-nums{
  margin-top:22px; display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.case-nums b{ display:block; font-size:clamp(24px, 3.2vw, 34px); font-weight:800; letter-spacing:-.01em; }
.case-nums span{ display:block; margin-top:6px; font-size:11.5px; line-height:1.45; color:var(--muted); }
.case-nums .up b{ color:var(--accent); }
.case-text{ margin-top:24px; font-size:14.5px; line-height:1.7; color:#cabfb7; }
.case-text b{ color:var(--fg); font-weight:700; }

/* ---------- плитка работ ---------- */

.works{
  margin:38px 0 32px; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}
.work{
  padding:17px 19px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.work:hover{ border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.05); transform:translateY(-2px); }
.work b{ display:block; font-size:13.5px; font-weight:700; }
.work span{ display:block; margin-top:5px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

.band .pill{ display:inline-flex; }

/* ---------- шаги ---------- */

.steps{ margin-top:40px; list-style:none; max-width:820px; }
.steps li{
  display:grid; grid-template-columns:70px 1fr; gap:18px;
  padding:26px 0; border-top:1px solid var(--line);
}
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps .no{ font-size:26px; font-weight:800; color:var(--accent); line-height:1; }
.steps h3{ margin-bottom:9px; }
.steps p{ font-size:14.5px; line-height:1.65; color:var(--muted); }

/* ---------- форма ---------- */

.form-wrap{
  max-width:960px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 56px); align-items:start;
}
.form-intro .sub{ max-width:none; }
.form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field > span{
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.field > span i{ font-style:normal; text-transform:none; letter-spacing:.04em; opacity:.75; }
.field input{
  padding:14px 16px; border-radius:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--fg); font:inherit; font-size:15px;
  transition:border-color .3s, background .3s;
}
.field input::placeholder{ color:#6d635c; }
.field input:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.07); }
.field input.bad{ border-color:#d9534f; }

/* ловушка для ботов: уводим за край экрана, а не гасим display:none */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.consent{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; }
.consent input{
  flex:0 0 auto; width:17px; height:17px; margin-top:2px;
  accent-color:var(--accent); cursor:pointer;
}
.consent span{ font-size:12.5px; line-height:1.55; color:var(--muted); }
.consent a{ color:var(--fg); text-decoration:underline; text-underline-offset:2px; }
.consent.bad span{ color:#e08480; }

.submit{ margin-top:6px; border:0; }
.submit[disabled]{ opacity:.6; cursor:progress; }
.err{
  font-size:13px; line-height:1.5; color:#e08480;
  padding:11px 14px; border-radius:10px;
  border:1px solid rgba(224,132,128,.3); background:rgba(224,132,128,.08);
}

/* экран благодарности */
.thanks{ grid-column:1 / -1; text-align:center; padding:16px 0 6px; }
.thanks .ok{
  display:grid; place-items:center; width:58px; height:58px; margin:0 auto 22px;
  border-radius:50%; background:var(--accent); color:#1a1108; font-size:26px; font-weight:800;
}
.thanks h2{ margin-top:0; }
.thanks > p{ margin-top:14px; font-size:16px; line-height:1.6; color:var(--muted); }
.thanks > p b{ color:var(--fg); }
.thanks-contacts a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.thanks .pill{ margin-top:26px; }

/* ---------- FAQ ---------- */

.faq{ margin-top:36px; max-width:820px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:22px 46px 22px 0;
  font-size:16px; font-weight:700; line-height:1.4;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq p{ padding:0 20px 24px 0; font-size:14.5px; line-height:1.7; color:var(--muted); }

/* ---------- футер ---------- */

.footer{ position:relative; z-index:2; padding:clamp(44px, 6vw, 70px) var(--pad) 30px; border-top:1px solid var(--line); }
.foot-main{ display:grid; gap:32px; grid-template-columns:2fr 1fr 1fr; }
.foot-brand{ font-size:13px; font-weight:800; letter-spacing:.17em; }
.foot-main p{ margin-top:13px; max-width:380px; font-size:13.5px; line-height:1.65; color:var(--muted); }
.foot-links{ display:flex; flex-direction:column; gap:10px; }
.foot-t{ font-size:9.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.foot-links a{ font-size:14px; transition:color .3s; }
.foot-links a:hover{ color:var(--accent); }
.foot-legal{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  font-size:11.5px; color:#7e746d;
}

/* ---------- адаптив ---------- */

@media (max-width: 900px){
  .form-wrap{ grid-template-columns:1fr; }
  .foot-main{ grid-template-columns:1fr 1fr; }
  .foot-main > div:first-child{ grid-column:1 / -1; }
}
@media (max-width: 680px){
  .topbar{ gap:14px; }
  .nav{ display:none; }
  .brand small{ display:none; }
  .steps li{ grid-template-columns:46px 1fr; gap:12px; padding:22px 0; }
  .steps .no{ font-size:20px; }
  .case-nums{ grid-template-columns:1fr 1fr; gap:16px; }
  .foot-main{ grid-template-columns:1fr; }
  /* ужимаем трекинг, иначе длинная надпись переносится на две строки */
  .pill-lg{ width:100%; font-size:9.5px; letter-spacing:.14em; padding:17px 18px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}