/* ============================================================
   ВОДОВОЗ · страница акции «Первая бутыль бесплатно»
   Отдельный от основного сайта стиль: синий с жёлтым, как
   ливрея доставочной машины. Живёт, пока идёт акция.
   Тема одна — намеренно: страница должна выглядеть одинаково
   у всех, потому что на неё ведёт реклама.
   ============================================================ */

:root{
  --blue:      #1443C3;
  --blue-dk:   #0D2C86;
  --blue-dp:   #091F63;
  --yel:       #FFC93C;
  --yel-dk:    #E5AF1E;
  --white:     #FFFFFF;
  --ink:       #091428;
  --dim:       rgba(255,255,255,.78);
  --dimmer:    rgba(255,255,255,.55);
  --hair:      rgba(255,255,255,.18);

  --head: "Unbounded", "Golos Text", system-ui, sans-serif;
  --body: "Golos Text", "Segoe UI", system-ui, sans-serif;

  --wrap: 1120px;
  --gut:  clamp(16px, 4vw, 36px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--blue);
  color:var(--white);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
button,input,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--yel)}
h1,h2,h3{margin:0; font-family:var(--head); font-weight:800; line-height:1.05; letter-spacing:-.025em; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0}
:focus-visible{outline:3px solid var(--yel); outline-offset:3px; border-radius:3px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}

/* ---------- Шапка ---------- */
.pnav{border-bottom:1px solid var(--hair)}
.pnav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:15px; flex-wrap:wrap}
.pnav__logo{
  font-family:var(--head); font-weight:800; font-size:17px; letter-spacing:.01em;
  color:var(--white); text-decoration:none; display:flex; align-items:center; gap:9px;
}
.pnav__logo svg{width:30px; height:30px}
.pnav__phone{
  font-family:var(--head); font-weight:600; font-size:17px; color:var(--white);
  text-decoration:none; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.pnav__back{font-size:14px; color:var(--dim); text-decoration:none}
.pnav__back:hover{color:var(--white)}

/* ---------- Первый экран ---------- */
.phero{padding-block:clamp(34px,5.5vw,64px)}
.phero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,52px); align-items:center}

.badge{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  background:var(--yel); color:var(--ink); border-radius:999px; padding:6px 17px 6px 7px;
  font-size:13px; font-weight:600; letter-spacing:.01em;
}
.badge b{
  font-family:var(--head); font-size:13px; background:var(--ink); color:var(--yel);
  border-radius:999px; padding:4px 11px; letter-spacing:0;
}

.phero h1{font-size:clamp(32px,5.6vw,54px); margin-bottom:18px}
.phero h1 u{text-decoration:none; color:var(--yel)}
.phero__sub{font-size:clamp(16px,2vw,18.5px); color:var(--dim); max-width:44ch; margin-bottom:26px}

.phero__art{position:relative; display:flex; align-items:center; justify-content:center; min-height:270px}
.phero__art svg{width:min(220px,54%)}
.phero__zero{
  position:absolute; right:0; top:8px; text-align:right;
  font-family:var(--head); font-weight:800; font-size:clamp(38px,6vw,58px); line-height:.92;
  color:var(--yel); letter-spacing:-.045em;
}
.phero__zero em{
  display:block; font-family:var(--body); font-style:normal; font-size:11.5px;
  font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--white);
  margin-top:5px;
}

/* ---------- Форма ---------- */
.pform{
  background:var(--white); color:var(--ink); border-radius:16px;
  padding:clamp(22px,3vw,30px); box-shadow:0 24px 60px -24px rgba(9,20,40,.6);
}
.pform h2{font-size:22px; color:var(--ink); margin-bottom:6px}
.pform__lead{font-size:14.5px; color:#5A6B80; margin-bottom:20px}
.pfield{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.pfield label{font-size:13.5px; font-weight:600; color:#39485C}
.pfield input{
  border:1px solid #D4DCE6; border-radius:8px; background:#F7F9FC;
  padding:13px 15px; font-size:16px; width:100%;
}
.pfield input:focus{background:var(--white)}
.pfield.is-error input{border-color:#C4441F; background:#FDF2EE}
.pfield__err{font-size:13px; color:#C4441F; display:none}
.pfield.is-error .pfield__err{display:block}

.btn-yel{
  background:var(--yel); color:var(--ink); border:0; border-radius:9px;
  padding:16px 30px; font-family:var(--body); font-weight:700; font-size:16.5px;
  width:100%; transition:background-color .15s ease;
}
.btn-yel:hover{background:var(--yel-dk)}
.btn-yel[disabled]{opacity:.6; cursor:not-allowed}
.pform__fine{font-size:12.5px; color:#7A8899; line-height:1.5; margin-top:12px}

.pform__ok{display:none; text-align:center; padding:12px 0}
.pform__ok b{font-family:var(--head); font-size:20px; color:var(--blue); display:block; margin-bottom:8px}
.pform__ok p{font-size:15px; color:#5A6B80; line-height:1.55}

/* ---------- Полоса доводов ---------- */
.pband{background:var(--blue-dk); border-block:1px solid var(--hair)}
.pband .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0}
.pband div{padding:20px clamp(16px,2.4vw,26px); border-left:1px solid var(--hair)}
.pband div:first-child{border-left:0; padding-inline-start:0}
.pband b{display:block; font-family:var(--head); font-size:15px; color:var(--yel); margin-bottom:4px}
.pband p{font-size:14px; color:var(--dim); line-height:1.5}

/* ---------- Как это работает ---------- */
.psection{padding-block:clamp(38px,5.5vw,68px)}
.psection h2{font-size:clamp(24px,3.6vw,36px); margin-bottom:10px}
.psection__lead{color:var(--dim); max-width:56ch; margin-bottom:clamp(22px,3vw,34px)}

.psteps{
  display:grid; gap:clamp(16px,3vw,28px); list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:ps;
}
.psteps li{padding-top:46px; position:relative}
.psteps li::before{
  counter-increment:ps; content:counter(ps);
  position:absolute; top:0; left:0; width:36px; height:36px; border-radius:50%;
  background:var(--yel); color:var(--ink);
  font-family:var(--head); font-weight:800; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.psteps b{display:block; font-family:var(--head); font-size:17px; margin-bottom:6px}
.psteps p{color:var(--dim); font-size:15px}

/* ---------- Условия ---------- */
.pterms{background:var(--blue-dp)}
.pterms .wrap{padding-block:clamp(30px,4.5vw,50px)}
.pterms h2{font-size:clamp(21px,2.8vw,27px); margin-bottom:16px}
.pterms ul{list-style:none; display:flex; flex-direction:column; gap:11px; max-width:64ch}
.pterms li{position:relative; padding-left:26px; font-size:15.5px; color:var(--dim); line-height:1.55}
.pterms li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:10px; height:10px; border-radius:2px; background:var(--yel);
}
.pterms__after{margin-top:20px; font-size:14.5px; color:var(--dimmer); max-width:64ch}

/* ---------- Подвал ---------- */
.pfoot{background:var(--blue-dp); border-top:1px solid var(--hair); padding-block:26px; font-size:14px; color:var(--dimmer)}
.pfoot .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
.pfoot a{color:var(--white); text-decoration:none}
.pfoot__phone{font-family:var(--head); font-weight:600; font-size:19px; color:var(--white); text-decoration:none; font-variant-numeric:tabular-nums}

@media (max-width: 880px){
  .phero .wrap{grid-template-columns:1fr}
  .phero__art{order:-1; min-height:210px}
  .pband div{border-left:0; border-top:1px solid var(--hair); padding-inline:0}
  .pband div:first-child{border-top:0}
}