/* ===== Глобальные переменные и базовая типографика ===== */
:root{
  --bg:#ffffff; --bg-alt:#f7f7f8; --fg:#0f172a; --muted:#6b7280; --accent:#2563eb; --accent-2:#16a34a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:18px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Контейнеры ===== */
.wrap{width:100%;padding:0 20px}
.section{padding:40px 0}
.section.alt{background:var(--bg-alt)}

/* ===== Шапка / меню (плоско, без теней/линий) ===== */
.topbar{position:sticky;top:0;z-index:10;background:var(--bg)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px}
.menu{display:flex;gap:14px;flex-wrap:wrap}
.logo{font-weight:800;letter-spacing:.3px}
.tag{font-size:12px;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#3730a3}

/* ===== Кнопки ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:12px;
  background:var(--accent);color:#fff;border:0;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent)}

.btn.msg{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px;
  border-radius:14px;               /* как на скрине */
  font-weight:700; color:#fff;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:transform .06s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn.msg:active{ transform: translateY(1px); }


.btn.msg .ico{ width:18px; height:18px; display:inline-block; color:#fff; }


.btn.msg.wa{ background: linear-gradient(135deg, #00D4FF, #7B68EE, #8B00FF) } 
.btn.msg.wa:hover{ filter:brightness(.95); }

.btn.msg.tg{ background:#27A7E7; }  
.btn.msg.tg:hover{ filter:brightness(.95); }


.btn.msg.lg{ padding:12px 20px; border-radius:16px; }
.btn.msg.lg .ico{ width:20px; height:20px; }

.btn .i{ width:18px; height:18px; display:inline-block; }
.btn.ghost .i{ color:currentColor; }
.btn.line{background:transparent;color:#ffffff;border:2px solid #e5e7eb}
.btn.small{padding:8px 12px;border-radius:10px}

.hero{padding:44px 0 28px;  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url('/img/header-bg-buyback1.webp') center/cover no-repeat;}
.hero-inner{display:grid;gap:20px;max-width:1280px;margin:0 auto;text-align:center}
.h1{font-size:38px;line-height:1.15;margin:0;color: #fff;}
.lead{color:#c1c1c1;margin:6px 0 0}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}

/* Компактная форма в герое */
.hero-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.hero-form input{flex:1 1 260px;min-width:220px;max-width:360px;padding:14px 14px;border:2px solid #e5e7eb;border-radius:12px}
.hero-form button{min-width:180px}

/* ===== Плоские списки/блоки без рамок ===== */
.h2{font-size:28px;margin:0 0 10px}
.h3{font-size:20px;margin:10px 0}
.note {
    font-size: 16px;
    color: #000;
}
.list{margin:0;padding-left:18px}
.flat{max-width:1280px;margin:0 auto}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#ecfeff;color:#0369a1;font-weight:700;justify-content: space-around;}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill {
    padding: 8px 10px;
    border-radius: 9px;
    background: #656567;
    color: #ffffff;
    font-weight: 600;
}

/* Галерея примеров фото — просто «плашки» без бордеров */
.ph{display:grid;place-items:center;height:120px;background:#f2f4f7;border-radius:12px;color:#475569}

/* ===== Таблица цен без линий (мягкие полосы) ===== */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{text-align:left;font-weight:700;padding:8px 10px;color:#111827}
.table td{padding:14px 10px;background:#f7f7f8;border-radius:10px}
.table tr td:first-child{font-weight:700}

/* ===== FAQ (плоский) ===== */
.faq details{padding:12px 0}
.faq summary{cursor:pointer}

/* ===== Футер (плоский) ===== */
footer{background:var(--bg-alt);padding:28px 0;color:#374151}

/* ===== Плавающие CTAs ===== */
.cta-bar{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px}
.cta-bar .btn{border-radius:10px}

/* ===== Адаптив ===== */
@media (max-width: 960px){
  .row{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .h1{font-size:30px}
}
.ph{
  position:relative;
  height:220px;            /* нужная высота баннера */
  overflow:hidden;
}
.ph img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;        /* заполняет весь блок */
  object-position:center;  /* центрируем важную область */
}

.calc-layout{
  display:grid;
  grid-template-columns: minmax(420px, 1.8fr) minmax(280px, 1fr); /* 2:1 */
  gap:50px;
  align-items:start;
}

/* если надо ещё шире (3:1) — раскомментируй
.calc-layout{ grid-template-columns: minmax(480px, 3fr) minmax(260px, 1fr); }
*/

@media (max-width: 960px){
  .calc-layout{ grid-template-columns: 1fr; }
}
.how-col ol li {
    font-size: 15px;
    margin: 20px 0 20px 0;
    color: #3e3e3e;
}
/* iOS-friendly поля: крупнее шрифт, выше клик-зона, своя стрелка */
select, input, textarea{
  font-size:16px;                /* >=16px убирает зум на iPhone */
  line-height:1.25;
  padding:14px 40px 14px 12px;   /* extra справа под стрелку */
  min-height:48px;               /* комфортный тап-таргет */
  border:2px solid #e5e7eb;
  border-radius:12px;
  background-color:#fff;
  outline:none;
}

/* красивая стрелка для select (работает в iOS) */
select{
  -webkit-appearance:none;       /* скрыть системную стрелку */
  appearance:none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position: right 12px center;
  background-size:16px 16px;
}

/* фокус/hover */
select:focus, input:focus, textarea:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(147,197,253,.35);
}

/* плотнее сетка в калькуляторе на мобильном */
@media (max-width: 480px){
  .row[id=""]{}
  /* если где-то остались инлайны - переопределим */
  #calc select, #calc input{ width:100%; }
}

/* (не обязательно) убираем спин-кнопки в number в WebKit */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none; margin: 0;
}
form#heroForm .btn {
    font-size: 15px;
}
div#calc .btn {
    font-size: 15px;
}
/* десктоп — как было: 2 колонки */
#calc > .row{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px; }

/* мобилка — в один столбик. !important перекрывает inline-стиль */
@media (max-width: 960px){
  #calc > .row{ grid-template-columns:1fr !important; }
}
#calc select,
#calc input{
  width:100%;
  font-size:16px;
  padding:14px 12px;
  min-height:48px;
  border:2px solid #e5e7eb;
  border-radius:12px;
}
#calc label{ display:block; margin-bottom:6px; }
.rims-layout{
  display:grid;
  grid-template-columns: 1.15fr 1fr; /* слева шире таблица, справа уже контент */
  gap:24px;
  align-items:start;
}
@media (max-width: 960px){
  .rims-layout{ grid-template-columns:1fr; }
}
.table{
  width:100%;
  border-collapse: collapse;         /* важный момент */
}
.table th, .table td{
  padding:12px 10px;
  border-bottom:1px solid #e5e7eb;   /* линия под каждой строкой */
}
.table tr:last-child td{ border-bottom:0; } /* без линии у последней */
.accept-box li {
    font-size: 16px;
    margin: 10px 0 10px 0;
}
.rims-layout .grid-4{
  display:grid;
  grid-template-columns: repeat(2, 1fr); /* 2 колонки */
  gap:12px;                              /* отступ между ними */
}
form#contactForm .note {
    color: #ff0000;
}
.hero-form .note {
	color: #ff0000;
}
input[name="phone"]::placeholder{ color:#9aa4b2; }

.logo {
    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.logo2 {
    width: 15%;
}
@media (max-width: 960px){
  .logo {
    width: 70%;
}
.logo2 {
    width: 70%;
}
}