*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#17191a;
  background:#f4f4f2;
}

a{
  text-decoration:none;
  color:inherit;
}

button,
input,
select,
textarea{
  font:inherit;
}

.container{
  width:min(1320px,calc(100% - 56px));
  margin:auto;
}


/* =========================
   HEADER
========================= */

.nav{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:20;
  color:#fff;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:linear-gradient(
    180deg,
    rgba(4,7,9,.35),
    transparent
  );
}

.nav .container{
  display:flex;
  align-items:center;
  gap:30px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:auto;
  min-width:245px;
}

.brand-mark{
  width:54px;
  height:62px;
  display:grid;
  place-items:center;
  border:2px solid #c99a42;
  border-radius:7px;
  color:#c99a42;
  font-weight:900;
  font-size:20px;
  line-height:1;
}

.brand strong{
  display:block;
  font-size:22px;
  letter-spacing:.02em;
}

.brand small{
  display:block;
  font-size:11px;
  line-height:1.25;
  color:#c8c9c8;
  margin-top:5px;
}

.nav nav{
  display:flex;
  gap:26px;
  font-size:14px;
  white-space:nowrap;
}

.nav nav a{
  opacity:.92;
}

.nav-contact{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  white-space:nowrap;
  color:#f1f1f1;
}

.navbtn,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#c4933e;
  color:#fff;
  padding:15px 22px;
  font-weight:700;
  border:0;
  cursor:pointer;
}

.navbtn{
  border:1px solid #c4933e;
  background:rgba(0,0,0,.2);
  white-space:nowrap;
}


/* =========================
   HERO
========================= */

.hero{
  height:680px;
  min-height:640px;
  position:relative;
  overflow:hidden;
  color:#fff;
  background:#080c0f;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      ellipse at 76% 48%,
      rgba(63,75,82,.45),
      transparent 35%
    ),
    linear-gradient(
      115deg,
      #05080a 0%,
      #0c1215 46%,
      #11191d 100%
    );
}

.hero-bg:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(2,5,7,.96) 0%,
      rgba(3,6,8,.82) 42%,
      rgba(4,7,9,.35) 76%,
      rgba(3,6,8,.68) 100%
    );
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 72% 52%,
      rgba(198,151,66,.08),
      transparent 30%
    );
}

.hero-coat{
  position:absolute;
  z-index:1;
  right:4%;
  top:54%;
  transform:translateY(-50%);
  width:min(620px,48vw);
  height:min(620px,48vw);
  background:url("coat-of-arms.png") center/contain no-repeat;
  opacity:.22;
  filter:none;
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:3;
  padding-top:220px;
  max-width:900px;
}

.eyebrow{
  font-size:13px;
  letter-spacing:.2em;
  font-weight:700;
  color:#d0a04d;
  margin-bottom:18px;
}

.hero h1{
  font-size:64px;
  line-height:1.03;
  margin:0 0 25px;
  max-width:820px;
  text-transform:uppercase;
  letter-spacing:-.02em;
}

.hero h1 span{
  color:#fff;
}

.hero p{
  max-width:680px;
  font-size:20px;
  line-height:1.5;
  color:#d8dcdd;
  margin:0;
}

.actions{
  display:flex;
  gap:14px;
  margin-top:30px;
}

.ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #c4933e;
  padding:14px 21px;
  color:#fff;
  font-weight:700;
}


/* =========================
   VIDEO
========================= */

.video-section{
  background:#111518;
  color:#fff;
  padding:76px 0;
  border-top:1px solid #2b3135;
}

.video-section h2{
  font-size:44px;
  line-height:1.12;
  margin:0 0 12px;
}

.video-lead{
  color:#bfc5c8;
  font-size:17px;
  line-height:1.6;
  max-width:760px;
}

.video-box{
  margin-top:30px;
  background:#050708;
  border:1px solid #343b40;
  padding:8px;
}

.video-box video{
  display:block;
  width:100%;
  max-height:650px;
  background:#000;
}


/* =========================
   INTRO
========================= */

.intro{
  background:#fff;
  padding:72px 0;
}

.introgrid,
.about,
.accentin{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.intro h2,
.section h2,
.about h2,
.accent h2{
  font-size:42px;
  line-height:1.12;
  margin:0;
}

.intro p,
.about p{
  font-size:18px;
  line-height:1.7;
  color:#596064;
}


/* =========================
   SERVICES
========================= */

.section{
  padding:86px 0;
}

.services-section{
  background:#f7f7f5;
}

.services-section .eyebrow{
  color:#a8782d;
}

.cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  margin-top:32px;
  border-top:1px solid #d9d9d5;
  border-left:1px solid #d9d9d5;
}

.cards article{
  background:#fff;
  border-right:1px solid #d9d9d5;
  border-bottom:1px solid #d9d9d5;
  padding:26px 24px;
  min-height:225px;
  transition:.2s;
}

.cards article:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,25,28,.07);
  border-color:#c4933e;
  position:relative;
  z-index:2;
}

.cards b{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:2px solid #bd8934;
  border-radius:50%;
  color:#bd8934;
  font-size:22px;
  font-weight:500;
}

.cards h3{
  font-size:17px;
  line-height:1.35;
  margin:20px 0 10px;
}

.cards p{
  color:#6a7072;
  line-height:1.5;
  font-size:14px;
  min-height:62px;
  margin:0 0 13px;
}

.cards a{
  font-weight:700;
  color:#946c2b;
  font-size:13px;
}


/* =========================
   STEPS
========================= */

.dark{
  background:#151a1d;
  color:#fff;
}

.dark h2{
  color:#fff;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:40px;
}

.steps>div{
  padding:30px;
  border:1px solid #343a3e;
}

.steps i{
  font-style:normal;
  color:#c79c50;
  font-size:12px;
}

.steps h3{
  font-size:20px;
}

.steps p{
  color:#aeb4b7;
  line-height:1.55;
}


/* =========================
   ACCENT
========================= */

.accent{
  background:#d6b06a;
  padding:65px 0;
}

.accent .eyebrow{
  color:#55421e;
}

.accent h2{
  font-size:38px;
}

.accent p{
  font-size:17px;
  line-height:1.6;
  max-width:650px;
}

.accent .btn{
  background:#17191a;
}


/* =========================
   FAQ
========================= */

.faq{
  margin-top:30px;
  border-top:1px solid #d9d6ce;
}

.faq details{
  border-bottom:1px solid #d9d6ce;
  padding:20px 0;
}

.faq summary{
  font-weight:700;
  cursor:pointer;
  font-size:18px;
}

.faq p{
  color:#62686b;
  line-height:1.6;
  max-width:800px;
}


/* =========================================================
   ФОРМА ЗАЯВКИ
========================================================= */

.formsection{
  padding:90px 0;
  background:#eceae4;
}

.formbox{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:60px;
  background:#fff;
  padding:55px;
  align-items:start;
}

.form-intro{
  position:sticky;
  top:30px;
}

.formbox h2{
  font-size:40px;
  line-height:1.12;
  margin:0 0 18px;
}

.formbox p{
  color:#60676a;
  font-size:17px;
  line-height:1.6;
}

.form-intro > p{
  margin:0 0 28px;
}

.form-note{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:30px;
  padding:18px;
  background:#f8f7f4;
  border-left:3px solid #c4933e;
}

.form-note strong{
  font-size:14px;
  color:#25292b;
}

.form-note span{
  color:#707578;
  font-size:13px;
  line-height:1.55;
}


/* =========================
   ОСНОВНАЯ ФОРМА
========================= */

.lead-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}


/*
   Убираем визуальные заголовки старых блоков.
   Поля остаются, но форма выглядит единым
   аккуратным юридическим документом.
*/

.form-block{
  padding:0;
  background:transparent;
  border:0;
}


/* Старые заголовки блоков больше не нужны */

.form-block-title{
  display:none;
}

.form-block-description{
  display:none;
}


/* =========================
   СЕТКА ПОЛЕЙ
========================= */

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.form-field{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-full{
  grid-column:1 / -1;
}

.form-field label{
  display:block;
  font-size:13px;
  line-height:1.4;
  font-weight:700;
  color:#3b4042;
}

.form-field label span{
  color:#b27624;
}


/* =========================
   ИМЯ — ОТДЕЛЬНО
========================= */

.form-block:first-child .form-full{
  margin-bottom:0;
}


/* =========================
   INPUT / SELECT / TEXTAREA
========================= */

.formbox input,
.formbox select,
.formbox textarea{
  width:100%;
  max-width:100%;
  min-width:0;

  border:1px solid #d2cfc7;
  border-radius:0;

  padding:14px 15px;

  font:inherit;
  font-size:15px;

  background:#fff;
  color:#202426;

  outline:none;

  transition:
    border-color .2s,
    box-shadow .2s,
    background .2s;
}

.formbox input{
  height:50px;
}

.formbox select{
  height:50px;
  cursor:pointer;
  appearance:auto;
}

.formbox textarea{
  min-height:145px;
  resize:vertical;
  line-height:1.55;
}

.formbox input::placeholder,
.formbox textarea::placeholder{
  color:#8a8e90;
}

.formbox input:focus,
.formbox select:focus,
.formbox textarea:focus{
  border-color:#c4933e;
  box-shadow:0 0 0 2px rgba(196,147,62,.12);
}


/* =========================================================
   КОНТАКТЫ
========================================================= */

/*
   Делаем контакты компактными:
   Имя
   Телефон
   Telegram
   WhatsApp
   MAX
*/

.form-block:first-child{
  padding:22px;
  background:#f8f7f4;
  border:1px solid #dedbd3;
}


/* =========================
   TELEGRAM
========================= */

.telegram-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) 50px;
  gap:8px;
}

.telegram-field input{
  min-width:0;
}

.telegram-help{
  width:50px;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #d2cfc7;
  background:#fff;
  color:#a8782d;

  font-weight:700;
  font-size:17px;

  cursor:pointer;

  transition:
    background .2s,
    border-color .2s,
    color .2s;
}

.telegram-help:hover{
  background:#c4933e;
  border-color:#c4933e;
  color:#fff;
}

.telegram-help:active{
  transform:translateY(1px);
}


/*
   Подсказка Telegram.
   JS открывает/закрывает её по кнопке ?.
*/

.telegram-hint{
  margin-top:8px;
  padding:15px 16px;

  background:#f1eee7;
  border:1px solid #ddd8ce;

  color:#666c6e;

  font-size:13px;
  line-height:1.6;
}

.telegram-hint strong{
  color:#33383a;
}


/* =========================================================
   СИТУАЦИЯ
========================================================= */

.form-block:nth-child(2){
  padding:22px;
  background:#f8f7f4;
  border:1px solid #dedbd3;
}

.form-block:nth-child(2):before{
  content:"Опишите Вашу ситуацию";
  display:block;

  margin-bottom:18px;

  color:#25292b;
  font-size:17px;
  line-height:1.3;
  font-weight:700;
}


/*
   В новой форме нам не нужен старый select "Какая у Вас
   ситуация?". Основной текст — свободное описание.
*/

.form-block:nth-child(2) .form-field{
  width:100%;
}


/* Если select ситуации оставлен в HTML,
   он будет выглядеть нормально, но главное поле —
   описание ситуации. */

.form-block:nth-child(2) textarea{
  min-height:170px;
}


/* =========================================================
   ДОПОЛНИТЕЛЬНОЕ ФИО ДРУГОГО ЧЕЛОВЕКА
========================================================= */

#otherApplicant{
  margin-top:16px;
}

#otherApplicant .form-field{
  width:100%;
}


/* =========================================================
   ДОВЕРЕННОЕ ЛИЦО
========================================================= */

.trusted-block{
  padding:22px !important;

  background:#f8f7f4 !important;

  border:1px solid #dedbd3 !important;
}


/*
   Главная строка:
   ☑ Добавить доверенное лицо
*/

.trusted-toggle{
  display:flex;
  align-items:flex-start;
  gap:12px;

  cursor:pointer;

  color:#292d2f;
}

.trusted-toggle > input{
  width:18px;
  height:18px;

  flex:0 0 18px;

  margin:2px 0 0;

  accent-color:#c4933e;
  cursor:pointer;
}

.trusted-checkbox{
  display:none;
}

.trusted-label{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.trusted-label strong{
  font-size:15px;
  line-height:1.4;
}

.trusted-label small{
  color:#777d80;
  font-size:12px;
  font-weight:400;
  line-height:1.5;
}


/*
   Поля доверенного лица:

   Кем приходится
   ФИО
   Номер
   Telegram
   WhatsApp
   MAX
*/

.trusted-fields{
  margin-top:20px;
  padding-top:20px;

  border-top:1px solid #dedbd3;

  display:grid;
  gap:16px;
}


/* =========================================================
   PRIVACY
========================================================= */

.privacy-check{
  display:flex;
  align-items:flex-start;
  gap:10px;

  color:#777;
  font-size:11px;
  line-height:1.5;

  cursor:pointer;
}

.privacy-check input{
  width:16px;
  height:16px;

  flex:0 0 16px;

  margin:2px 0 0;

  accent-color:#c4933e;
  cursor:pointer;
}


/* =========================================================
   КНОПКА ОТПРАВКИ
========================================================= */

.formbox button.btn{
  width:100%;
  min-height:54px;

  padding:15px 22px;

  background:#c4933e;
  color:#fff;

  border:none;

  font-weight:700;
  font-size:15px;

  transition:
    background .2s,
    transform .15s,
    opacity .2s;
}

.formbox button.btn:hover{
  background:#a8782d;
}

.formbox button.btn:active{
  transform:translateY(1px);
}

.formbox button.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}


/* =========================================================
   СТАТУС ОТПРАВКИ
========================================================= */

.form-status{
  padding:15px 17px;

  border:1px solid #b9c7bc;

  background:#edf3ee;
  color:#33453a;

  font-size:14px;
  line-height:1.5;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
  background:#0c1012;
  color:#b8bdbe;
  padding:35px 0;
}

.foot{
  display:flex;
  align-items:center;
  gap:25px;
}

.foot b{
  color:#fff;
  letter-spacing:.04em;
  margin-right:auto;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1150px){

  .nav-contact{
    display:none;
  }

  .nav nav{
    gap:18px;
  }

  .cards{
    grid-template-columns:repeat(3,1fr);
  }

}


/* =========================================================
   900px
========================================================= */

@media(max-width:900px){

  .nav nav{
    display:none;
  }

  .hero{
    height:680px;
  }

  .hero h1{
    font-size:50px;
  }

  .hero-coat{
    right:-8%;
    width:520px;
    height:520px;
    opacity:.18;
  }

  .cards{
    grid-template-columns:1fr 1fr;
  }

  .steps{
    grid-template-columns:1fr 1fr;
  }

  .introgrid,
  .about,
  .accentin{
    grid-template-columns:1fr;
    gap:30px;
  }

  .formbox{
    grid-template-columns:1fr;
    gap:35px;
    padding:35px;
  }

  .form-intro{
    position:static;
  }

  .foot{
    flex-wrap:wrap;
  }

  .foot b{
    margin-right:0;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

  .container{
    width:min(100% - 28px,1320px);
  }


  /* HEADER */

  .nav{
    padding:12px 0;
  }

  .nav .container{
    gap:10px;
  }

  .brand{
    min-width:0;
  }

  .brand-mark{
    width:42px;
    height:49px;
    font-size:15px;
  }

  .brand strong{
    font-size:15px;
  }

  .brand small{
    font-size:8px;
  }

  .navbtn{
    padding:10px 12px;
    font-size:11px;
  }


  /* HERO */

  .hero{
    height:690px;
    min-height:650px;
  }

  .hero-content{
    padding-top:175px;
  }

  .hero h1{
    font-size:38px;
    line-height:1.06;
  }

  .hero p{
    font-size:17px;
    max-width:95%;
  }

  .hero-coat{
    right:-25%;
    top:58%;
    width:360px;
    height:360px;
    opacity:.14;
  }

  .actions{
    flex-direction:column;
    align-items:stretch;
  }

  .btn,
  .ghost{
    text-align:center;
  }


  /* SECTIONS */

  .video-section,
  .section,
  .formsection{
    padding:60px 0;
  }

  .video-section h2,
  .intro h2,
  .section h2,
  .about h2{
    font-size:32px;
  }


  /* SERVICES */

  .cards{
    grid-template-columns:1fr;
  }

  .cards article{
    min-height:0;
    padding:24px;
  }


  /* STEPS */

  .steps{
    grid-template-columns:1fr;
  }


  /* INTRO */

  .introgrid{
    gap:24px;
  }


  /* ACCENT */

  .accent{
    padding:52px 0;
  }

  .accent h2{
    font-size:32px;
  }


  /* =====================================================
     FORM MOBILE
  ===================================================== */

  .formsection{
    padding:55px 0;
  }

  .formbox{
    display:block;
    padding:25px 16px;
  }

  .form-intro{
    margin-bottom:30px;
  }

  .formbox h2{
    font-size:32px;
  }


  /*
     Все поля на мобильном идут строго друг под другом.
  */

  .form-grid{
    grid-template-columns:1fr;
    gap:15px;
  }

  .form-full{
    grid-column:auto;
  }


  /*
     Контактный блок
  */

  .form-block:first-child{
    padding:18px;
  }


  /*
     Поля
  */

  .formbox input,
  .formbox select{
    height:50px;
    font-size:16px;
  }

  .formbox textarea{
    min-height:150px;
    font-size:16px;
  }


  /*
     Telegram
  */

  .telegram-field{
    grid-template-columns:minmax(0,1fr) 48px;
  }

  .telegram-help{
    width:48px;
    height:50px;
  }

  .telegram-hint{
    font-size:12px;
    padding:14px;
  }


  /*
     Ситуация
  */

  .form-block:nth-child(2){
    padding:18px;
  }

  .form-block:nth-child(2):before{
    font-size:16px;
  }


  /*
     Доверенное лицо
  */

  .trusted-block{
    padding:18px !important;
  }

  .trusted-fields{
    margin-top:18px;
    padding-top:18px;

    grid-template-columns:1fr;
  }


  /*
     Согласие
  */

  .privacy-check{
    font-size:11px;
  }


  /*
     Кнопка
  */

  .formbox button.btn{
    min-height:54px;
    font-size:16px;
  }


  /*
     Footer
  */

  .foot{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
  }

}