/* Страница «Import z USA».
 *
 * Исходный макет был отдельной страницей со своими body/header/nav/footer
 * и классами .container/.btn/.card. На сайте такие селекторы уже заняты —
 * подключённые как есть, они ломают общую шапку и подвал. Поэтому здесь
 * ВСЁ живёт внутри .import-page, а собственные шапка и подвал макета
 * выброшены: их роль выполняет base.html.
 *
 * Палитра сведена к сайтовой: золото #d8b074 вместо #c9a45c из макета.
 */

.import-page {
  --ip-gold: #d8b074;
  --ip-bg: #0d0d0d;
  --ip-panel: #141414;
  --ip-line: #272727;
  --ip-text: #f2f2f2;
  --ip-muted: #9a9a9a;

  background: var(--ip-bg);
  color: var(--ip-text);
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.import-page * { box-sizing: border-box; }

.import-page__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.import-page a { text-decoration: none; }

.import-page__section {
  padding: 84px 0;
  border-bottom: 1px solid var(--ip-line);
}

.import-page__eyebrow {
  color: var(--ip-gold);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.import-page h2 {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0 0 14px;
  color: #fff;
}

.import-page__intro {
  color: var(--ip-muted);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 720px;
  margin: 0;
}

/* Шапка сайта закреплена (nav.navbar-affix, 70px высотой). Без этого отступа
   переход по якорю «Poproś o wycenę» приводит секцию ровно под шапку и
   срезает надзаголовок. */
.import-page__section[id] { scroll-margin-top: 86px; }

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

.import-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 54px;
  padding: 70px 0 80px;
}

.import-hero h1 {
  font-size: 60px;
  line-height: 1.02;
  letter-spacing: -2px;
  margin: 0 0 22px;
  color: #fff;
}

.import-hero h1 span { color: #8c8c8c; display: block; }

.import-hero__lead {
  font-size: 17.5px;
  line-height: 1.7;
  color: #c4c4c4;
  margin: 0;
}

.import-hero__photo {
  position: relative;
  height: 520px;
  background: #1a1a1a center/cover no-repeat;
  border-radius: 4px;
  overflow: hidden;
}

.import-hero__photo:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .8));
}

.import-hero__tag {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 22px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, .72);
  border: 1px solid #4a4a4a;
  font-size: 11.5px;
  letter-spacing: 1.4px;
}

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

.import-page__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px;
}

.import-btn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  border: 1px solid var(--ip-gold);
  background: var(--ip-gold);
  color: #141414;
  cursor: pointer;
  transition: filter .15s, background .15s, color .15s;
}

.import-btn:hover { filter: brightness(1.08); color: #141414; }

.import-btn--ghost {
  background: transparent;
  border-color: #454545;
  color: #fff;
}

.import-btn--ghost:hover { border-color: var(--ip-gold); color: var(--ip-gold); }

/* --- Цифры -------------------------------------------------------------- */

.import-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ip-line);
  border-bottom: 1px solid var(--ip-line);
}

.import-stats__item {
  padding: 28px 30px;
  border-right: 1px solid var(--ip-line);
}

.import-stats__item:last-child { border-right: 0; }
.import-stats__item strong { font-size: 26px; color: var(--ip-gold); }
.import-stats__item span {
  display: block;
  margin-top: 7px;
  color: var(--ip-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- Карточки этапов ---------------------------------------------------- */

.import-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 38px;
}

.import-card {
  background: var(--ip-panel);
  border: 1px solid var(--ip-line);
  padding: 28px;
  min-height: 230px;
}

.import-card__num {
  color: var(--ip-gold);
  font-size: 11px;
  letter-spacing: 2px;
}

.import-card h3 { font-size: 19px; margin: 26px 0 11px; color: #fff; }
.import-card p { font-size: 13.5px; color: var(--ip-muted); line-height: 1.6; margin: 0; }

/* --- Плитки категорий --------------------------------------------------- */

.import-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 38px;
}

.import-tile {
  position: relative;
  height: 340px;
  background: #1a1a1a center/cover no-repeat;
  overflow: hidden;
  border-radius: 4px;
}

.import-tile:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 32%, rgba(0, 0, 0, .9));
}

.import-tile__body { position: absolute; z-index: 2; left: 26px; bottom: 26px; right: 26px; }
.import-tile h3 { font-size: 26px; margin: 0 0 7px; color: #fff; }
.import-tile p { margin: 0; color: #c6c6c6; font-size: 14px; }

/* --- Процесс ------------------------------------------------------------ */

.import-process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: start;
}

.import-steps { margin-top: 30px; }

.import-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ip-line);
}

.import-step b { color: var(--ip-gold); font-size: 13px; }
.import-step h3 { margin: 0 0 6px; font-size: 17px; color: #fff; }
.import-step p { margin: 0; color: var(--ip-muted); line-height: 1.55; font-size: 13.5px; }

.import-process__photo {
  height: 560px;
  background: #1a1a1a center/cover no-repeat;
  border-radius: 4px;
}

/* --- Калькуляция -------------------------------------------------------- */

.import-calc {
  background: var(--ip-panel);
  border: 1px solid var(--ip-line);
  padding: 34px;
  margin-top: 34px;
}

.import-calc__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid #262626;
  color: #bdbdbd;
  font-size: 14.5px;
}

.import-calc__row span:last-child { color: var(--ip-gold); white-space: nowrap; }

.import-calc__row--total {
  border-bottom: 0;
  padding-top: 22px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.import-calc__note {
  margin: 14px 0 0;
  font-size: 12px;
  color: #757575;
  line-height: 1.55;
}

/* --- Реализации --------------------------------------------------------- */

.import-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 36px;
}

.import-case {
  background: var(--ip-panel);
  border: 1px solid var(--ip-line);
  overflow: hidden;
}

.import-case__photo { height: 210px; background: #1a1a1a center/cover no-repeat; }
.import-case__body { padding: 20px; }
.import-case__body h3 { margin: 0 0 6px; font-size: 19px; color: #fff; }
.import-case__body p { color: var(--ip-muted); margin: 0 0 14px; font-size: 13.5px; }
.import-case__link { color: var(--ip-gold); font-size: 13px; font-weight: 700; }

/* --- Контакты и форма --------------------------------------------------- */

.import-contact {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 44px;
  align-items: start;
}

.import-contact__list { margin-top: 26px; }

.import-contact__item {
  padding: 17px 0;
  border-bottom: 1px solid var(--ip-line);
}

.import-contact__item span {
  display: block;
  color: #858585;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}

.import-contact__item strong { font-size: 18px; color: #fff; }
.import-contact__item a { color: #fff; }
.import-contact__item a:hover { color: var(--ip-gold); }

.import-form-box {
  background: var(--ip-panel);
  border: 1px solid var(--ip-line);
  padding: 34px;
}

.import-form-box h2 { font-size: 27px; margin-bottom: 20px; }

.import-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.import-form__field { display: flex; flex-direction: column; }
.import-form__field--full { grid-column: 1 / -1; }

.import-form label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ip-muted);
  margin-bottom: 6px;
}

.import-form__req { color: var(--ip-gold); }

.import-page .import-form input,
.import-page .import-form select,
.import-page .import-form textarea {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #333;
  border-radius: 3px;
  color: #fff;
  padding: 13px 14px;
  font-size: 14.5px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}

.import-page .import-form select {
  /* Своя стрелка: родная у тёмного select в Safari почти не видна. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ip-gold) 50%),
    linear-gradient(135deg, var(--ip-gold) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.import-page .import-form textarea { min-height: 112px; resize: vertical; }

.import-page .import-form input::placeholder,
.import-page .import-form textarea::placeholder { color: #5f5f5f; }

.import-page .import-form input:focus,
.import-page .import-form select:focus,
.import-page .import-form textarea:focus {
  outline: none;
  border-color: var(--ip-gold);
  box-shadow: 0 0 0 3px rgba(216, 176, 116, .3);
}

.import-page .import-form input.is-invalid,
.import-page .import-form textarea.is-invalid { border-color: #e2564d; }

.import-form__error {
  display: none;
  margin-top: 5px;
  font-size: 12.5px;
  color: #e2564d;
}

.import-form__error.is-visible { display: block; }

.import-form__error--form.is-visible {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 9px 12px;
  background: rgba(226, 86, 77, .1);
  border-left: 3px solid #e2564d;
  border-radius: 3px;
}

.import-form__submit { grid-column: 1 / -1; width: 100%; margin-top: 4px; }

.import-form__note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 12px;
  color: #757575;
  line-height: 1.5;
}

.import-form__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(20, 20, 20, .3);
  border-top-color: #141414;
  border-radius: 50%;
  animation: import-spin .7s linear infinite;
}

@keyframes import-spin { to { transform: rotate(360deg); } }

/* Ловушка для ботов — убрана из потока, но не display:none:
   часть спам-скриптов такие поля пропускает. */
.import-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.import-done { text-align: center; padding: 26px 8px 14px; }

.import-done__icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border: 2px solid var(--ip-gold);
  border-radius: 50%;
  color: var(--ip-gold);
  font-size: 27px;
  line-height: 50px;
}

.import-done h3 { margin: 0 0 8px; color: #fff; font-size: 20px; }
.import-done p { margin: 0 0 6px; color: var(--ip-muted); font-size: 14px; }
.import-done a { color: var(--ip-gold); font-weight: 600; }

/* --- Финальный призыв --------------------------------------------------- */

.import-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  background: #ededed;
  color: #111;
  padding: 52px 48px;
  border-radius: 4px;
}

.import-cta h2 { margin: 0 0 6px; font-size: 33px; color: #111; }
.import-cta p { margin: 0; color: #4a4a4a; font-size: 15px; }

.import-cta .import-btn {
  background: #111;
  border-color: #111;
  color: #fff;
  white-space: nowrap;
}

.import-cta .import-btn:hover { color: #fff; }

/* --- Планшет ------------------------------------------------------------ */

@media (max-width: 991px) {
  .import-hero,
  .import-process,
  .import-contact { grid-template-columns: 1fr; gap: 34px; }

  .import-hero { padding: 44px 0 54px; }
  .import-hero h1 { font-size: 44px; letter-spacing: -1.2px; }
  .import-hero__photo { height: 380px; }
  .import-process__photo { height: 340px; }
  .import-cards { grid-template-columns: 1fr 1fr; }
  .import-cases { grid-template-columns: 1fr 1fr; }
  .import-page h2 { font-size: 34px; }
  .import-page__section { padding: 62px 0; }
}

/* --- Телефон ------------------------------------------------------------ */

@media (max-width: 767px) {
  .import-page__wrap { padding: 0 18px; }
  .import-hero h1 { font-size: 34px; letter-spacing: -.6px; }
  .import-hero__lead { font-size: 16px; }
  .import-hero__photo { height: 260px; }
  .import-page h2 { font-size: 27px; letter-spacing: -.4px; }
  .import-page__intro { font-size: 15.5px; }
  .import-page__section { padding: 48px 0; }

  .import-stats { grid-template-columns: 1fr; }
  .import-stats__item { border-right: 0; border-bottom: 1px solid var(--ip-line); }
  .import-stats__item:last-child { border-bottom: 0; }

  .import-cards,
  .import-cases,
  .import-tiles { grid-template-columns: 1fr; }

  .import-card { min-height: 0; padding: 24px; }
  .import-tile { height: 260px; }
  .import-calc { padding: 24px 20px; }
  .import-calc__row { font-size: 13.5px; }
  .import-form-box { padding: 24px 20px; }

  /* Ниже 16px iOS Safari зумит страницу при фокусе. */
  .import-page .import-form input,
  .import-page .import-form select,
  .import-page .import-form textarea { font-size: 16px; }

  .import-form { grid-template-columns: 1fr; }

  .import-cta { display: block; padding: 32px 24px; }
  .import-cta h2 { font-size: 25px; }
  .import-cta .import-btn { margin-top: 18px; }

  .import-page__buttons .import-btn { flex: 1 1 100%; text-align: center; }
}