/* ===========================================================
   Доп. страницы: заявка на расчёт, стать дилером,
   успешная отправка, ошибка отправки.
   Переиспользуют шрифты (fonts.css) и ассеты хедера.
   =========================================================== */
:root{
  --dark:#1F201D;
  --cyan:#5FC4E5;
  --lime:#C3D200;
  /* высота шапки (картинка header.svg, 1920x270). Контент страницы
     всегда начинается ниже этой высоты, чтобы не налезать на хедер. */
  --header-h:clamp(190px, 14.0625vw, 270px);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ min-height:100%; overflow-x:hidden; }
body{
  font-family:'Cygre', sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  color:#fff; min-height:100vh; position:relative; overflow-x:hidden;
  background:#0e1820;
  background-image:
    radial-gradient(70% 80% at 12% 55%, rgba(95,196,229,.34), transparent 60%),
    radial-gradient(80% 90% at 92% 100%, rgba(95,196,229,.30), transparent 55%),
    linear-gradient(180deg,#16242e 0%, #0e1a22 60%, #0b141a 100%);
  background-attachment:fixed;
}
a{ color:inherit; }

/* ---------------- ШАПКА ---------------- */
.pg-shape{
  position:absolute; left:0; top:0; width:100%;
  /* белый блок в header.svg — это верхняя половина (135/270).
     Чтобы лого/кнопка/иконки всегда оставались на белом, не даём
     фигуре сжиматься ниже высоты, при которой белая часть вмещает контент. */
  height:var(--header-h);
  object-fit:cover; object-position:top center;
  z-index:0; pointer-events:none; display:block;
}
.pg-header{
  position:relative; z-index:3; display:flex; align-items:flex-start;
  min-height:var(--header-h);
  max-width:1760px; margin:0 auto; padding:32px clamp(20px,4vw,60px) 0;
}
.pg-logo{ flex:0 0 auto; width:clamp(116px,11vw,141px); height:auto; display:block; }
.pg-logo img{ width:100%; height:auto; display:block; }
/* кнопка + иконки группируются справа, как в макете */
.pg-dealer{ margin-left:auto; }
.pg-icons{ display:flex; align-items:center; gap:clamp(16px,2.2vw,30px); flex:0 0 auto; margin-left:clamp(26px,4.5vw,60px); }
.pg-ic{ position:relative; display:block; width:clamp(40px,4.4vw,52px); height:clamp(40px,4.4vw,52px); }
.pg-ic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.pg-ic .h{ opacity:0; transition:opacity .2s ease; }
.pg-ic:hover .d{ opacity:0; }
.pg-ic:hover .h{ opacity:1; }

/* кнопки-пилюли */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 28px; border-radius:100px; box-sizing:border-box;
  border:1px solid transparent; background:#fff; cursor:pointer; text-decoration:none;
  font-family:'Cygre'; font-weight:700; font-size:15px; line-height:1; text-transform:uppercase;
  white-space:nowrap; transition:background .2s ease, color .2s ease;
}
.pill--lime{ border-color:var(--lime); color:var(--lime); }
.pill--lime:hover{ background:var(--lime); color:#fff; }
.pill--cyan{ border-color:var(--cyan); color:var(--cyan); }
.pill--cyan:hover{ background:var(--cyan); color:#fff; }

/* ---------------- КОНТЕНТ ---------------- */
.pg-body{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:30px 24px 90px; }

/* кнопка «назад» (круглая стрелка-картинка) */
.pg-back{
  width:54px; height:54px; border:none; cursor:pointer; padding:0;
  background:url(../assets/img/back-arrow-cyan.png) no-repeat center / contain;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s ease, filter .2s ease;
}
.pg-back:hover{ filter:brightness(1.05); transform:translateX(-2px); }
/* белая стрелка уже встроена в картинку — скрываем старую svg */
.pg-back svg{ display:none; }
body.acc-lime .pg-back{ background-image:url(../assets/img/back-arrow-lime.png); }
/* z-index:5 — поверх заголовка (.pg-title из-за анимации fade-up создаёт
   свой контекст наложения и перекрывал кликабельную область кнопки) */
.pg-back--corner{ position:absolute; left:24px; top:16px; z-index:5; }
@media (max-width:720px){ .pg-back--corner{ position:static; margin-bottom:16px; } }

.pg-title{
  text-align:center; margin:6px 0 38px;
  font-family:'Cygre ExtraBold'; font-weight:800; font-size:56px; line-height:1.05;
  text-transform:uppercase; color:#fff; letter-spacing:.5px;
  /* заголовок некликабельный — его прозрачный бокс не должен перехватывать
     клики по кнопкам, которые он визуально перекрывает */
  pointer-events:none;
}

/* форма */
.pg-form{ max-width:636px; margin:0 auto; }
.pg-row{ display:flex; gap:18px; }
.pg-row > .field{ flex:1; }
.field{ position:relative; margin-bottom:18px; }
.field input, .field textarea{
  width:100%; border:none; border-radius:12px; background:#fff; color:var(--dark);
  font-family:'Cygre'; font-weight:600; font-size:15px; outline:none;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.field input{ height:54px; padding:0 22px; }
.field textarea{ min-height:118px; padding:16px 22px; resize:vertical; line-height:1.4; }
.field input:focus, .field textarea:focus{ box-shadow:0 0 0 2px rgba(95,196,229,.5); }
body.acc-lime .field input:focus, body.acc-lime .field textarea:focus{ box-shadow:0 0 0 2px rgba(195,210,0,.5); }
/* кастомный плейсхолдер с красной звёздочкой */
.field .ph{
  position:absolute; left:22px; top:27px; transform:translateY(-50%);
  color:#9aa6ac; font-size:14px; font-weight:600; pointer-events:none; transition:opacity .15s ease;
}
.field textarea ~ .ph{ top:18px; transform:none; }
.field input:not(:placeholder-shown) ~ .ph,
.field textarea:not(:placeholder-shown) ~ .ph{ opacity:0; }
.req{ color:#e5484d; }

/* нижняя строка: кнопка + согласие */
.pg-actions{ display:flex; align-items:center; gap:26px; margin-top:6px; }
.btn-submit{
  height:54px; padding:0 42px; border-radius:100px; border:none; cursor:pointer;
  background:#fff; color:#5b6b72; font-family:'Cygre'; font-weight:700; font-size:14px;
  text-transform:uppercase; transition:background .2s ease, color .2s ease;
}
.btn-submit:hover{ background:var(--cyan); color:#fff; }
body.acc-lime .btn-submit:hover{ background:var(--lime); color:#13160a; }

.consent{ display:flex; align-items:flex-start; gap:10px; max-width:260px;
  font-family:'Cygre Medium'; font-weight:500; font-size:13px; line-height:1.35; color:#dbe7ec; }
.consent input{ width:20px; height:20px; flex:0 0 auto; margin-top:1px; accent-color:var(--cyan); cursor:pointer; }
body.acc-lime .consent input{ accent-color:var(--lime); }
.consent a{ color:var(--cyan); text-decoration:underline; }
body.acc-lime .consent a{ color:var(--lime); }

/* ---------------- СТРАНИЦЫ-СООБЩЕНИЯ ---------------- */
.pg-msg{ text-align:center; padding-top:34px; }
.pg-msg .pg-back{ display:flex; margin:0 auto 40px; }
.msg-graffiti{
  position:relative; display:inline-block; max-width:90vw;
  font-family:'Sprite Graffiti'; font-weight:400; line-height:1;
  font-size:clamp(46px, 8vw, 104px); color:#fff; text-transform:uppercase; white-space:nowrap;
}
.msg-brush{
  position:absolute; left:50%; top:60%; transform:translate(-50%,-50%);
  width:116%; aspect-ratio:1056 / 158; z-index:-1;
  background:url(../assets/img/brush-cyan.png) no-repeat center / 100% 100%;
}
.msg-sub{ margin-top:46px; color:#cfe0e6; font-family:'Cygre Medium'; font-weight:500; font-size:clamp(16px,2vw,22px); }

/* плавное появление */
.fade-up{ opacity:0; transform:translateY(18px); animation:pgUp .6s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes pgUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .fade-up{ animation:none; opacity:1; transform:none; } }

/* планшеты: чуть плотнее, но в одну строку */
@media (max-width:900px){
  .pill{ height:46px; padding:0 20px; font-size:13px; }
  .pg-icons{ margin-left:clamp(16px,3vw,28px); }
}

/* ---------------- БУРГЕР + МОБИЛЬНОЕ МЕНЮ (доп. страницы) ----------------
   (объявляем ДО мобильной медиа-вышки, чтобы display:block внутри неё победил) */
.pg-burger{ display:none; width:40px; height:40px; border:0; background:transparent; padding:0; cursor:pointer; position:relative; }
.pg-burger span{ position:absolute; left:6px; width:28px; height:4px; border-radius:8px; background:#1F201D; transition:transform .2s ease, opacity .2s ease; }
.pg-burger span:nth-child(1){ top:11px; }
.pg-burger span:nth-child(2){ top:18px; }
.pg-burger span:nth-child(3){ top:25px; }
.pg-burger--close span:nth-child(1){ top:18px; transform:rotate(45deg); }
.pg-burger--close span:nth-child(2){ opacity:0; }
.pg-burger--close span:nth-child(3){ top:18px; transform:rotate(-45deg); }

.pg-menu{ position:fixed; inset:0; z-index:200; display:none; }
.pg-menu.is-open{ display:block; }
.pg-menu-backdrop{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer;
  background:rgba(31,32,29,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.pg-menu-panel{ position:absolute; left:0; top:0; width:100%; background:#1F201D; border-radius:0 0 20px 20px;
  padding-bottom:30px; overflow:hidden; }
.pg-menu-shape{ position:absolute; left:0; top:0; width:100%; height:120px; object-fit:cover; object-position:top center; pointer-events:none; }
.pg-menu-logo{ position:absolute; left:20px; top:20px; width:120px; z-index:2; display:block; }
.pg-menu-logo img{ width:100%; height:auto; display:block; }
.pg-menu-panel .pg-burger--close{ display:block; position:absolute; right:18px; top:18px; z-index:3; }
.pg-menu-icons{ position:relative; z-index:2; display:flex; gap:18px; padding:150px 20px 0; }
.pg-menu-icons a{ width:44px; height:44px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; }
.pg-menu-icons img{ width:24px; height:24px; object-fit:contain; }
.pg-menu-dealer{ display:inline-flex !important; width:auto; margin:22px 20px 0; }

/* мобильные: в шапке только лого + бургер (как на главной), остальное — в меню */
@media (max-width:600px){
  :root{ --header-h:120px; }
  .pg-shape{ width:100%; height:120px; object-fit:cover; object-position:top center; }
  .pg-header{ position:relative; flex-wrap:nowrap; padding-top:20px; }
  .pg-logo{ order:1; }
  .pg-icons{ display:none; }
  .pg-dealer{ display:none; }
  .pg-burger{ display:block; position:absolute; right:18px; top:18px; z-index:6; }
  .pg-title{ font-size:34px; }
  .pg-row{ flex-direction:column; gap:0; }
}