/* базовые */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  -webkit-text-size-adjust: 100%;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  color: #000;
}

/* фоновые линии (не влияют на высоту) */
.bg-lines { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.bg-lines svg { position: absolute; width: 120%; height: 100%; left: -10%; }
.bg-lines path { fill: none; stroke: rgba(0,0,0,0.06); stroke-width: 1; animation: wave 12s ease-in-out infinite alternate; }
.bg-lines svg:nth-child(2) path { stroke: rgba(0,0,0,0.08); animation-duration: 16s; }
@keyframes wave { 0%{ transform: translateX(0); } 100%{ transform: translateX(40px); } }

/* верх */
.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 0; font-size: 18px; }
.note { color: #333; }
.lang { display: flex; align-items: center; gap: 6px; }
.lang .sep { color: #888; }
.lang-btn { border: 0; background: #f6f6f6; padding: 4px 8px; border-radius: 6px; cursor: pointer; color: #444; font: inherit; }
.lang-btn.active { background: #000; color: #fff; }

/* центрирование общего блока: высота — 100svh минус хедер */
.center-wrap {
  display: flex; justify-content: center; align-items: center;
  min-height: calc(100svh - var(--header-h, 56px));
  padding: 12px 16px 20px;
}

/* домен + ряд */
.domain-block { display: inline-flex; flex-direction: column; align-items: flex-start; }
.domain {
  margin: 12px 0 20px;
  font-weight: 300;
  font-size: clamp(40px, 9vw, 124px);
  letter-spacing: 0.02em; line-height: 1.04; text-align: left;
}

/* ряд: на десктопе — симметрия по высоте */
.row { display: flex; align-items: stretch; gap: 22px; flex-wrap: wrap; }

/* кнопка */
.btn {
  display: flex; align-items: center; justify-content: center;
  padding: 0 20px;
  text-decoration: none; background: #000; color: #fff;
  border-radius: 12px;
  font-weight: 600; font-size: 17px; transition: background .2s ease;
}
.btn:hover { background: #222; }

/* цены */
.price { text-align: left; position: relative; }
#main-price { font-size: 32px; font-weight: 700; line-height: 1.2; }
.sub { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; color: #666; margin-top: 6px; position: relative; }
#sub-text { white-space: nowrap; }

/* “?” */
.rate-help {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  font-weight: 700; background: #000; color: #fff;
  cursor: pointer; line-height: 1; padding: 0; font-size: 12px;
}

/* поповер (на десктопе — одна строка) */
.popover[hidden]{ display:none; }
.popover{ position:absolute; top:calc(100% + 8px); left:0; z-index:10;
  background:#fff; border:1px solid #e6e6e6; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); padding:10px 12px;
  max-width:none; width:max-content; }
.popover::before{ content:""; position:absolute; top:-6px; left:12px; width:10px; height:10px; background:#fff; border-left:1px solid #e6e6e6; border-top:1px solid #e6e6e6; transform:rotate(45deg); }
.popover-content{ font-size:14px; color:#222; white-space:nowrap; }

/* ------ MOBILE ------ */
@media (max-width: 600px) {
  .domain-block { align-items: center; text-align: center; }
  .domain { margin-bottom: 12px; font-size: clamp(34px, 10.5vw, 64px); }
  .row { flex-direction: column; align-items: center; gap: 10px; }  /* НЕ растягиваем */
  .btn { height:auto; padding: 10px 16px; font-size: 16px; width: min(92vw, 360px); }
  .price { text-align: center; }
  #main-price { font-size: 26px; }
  .sub { font-size: 15px; justify-content: center; }

  /* поповер — центрируем и ограничиваем ширину, перенос вы отключили — оставляем nowrap */
  .popover { left:50% !important; transform:translateX(-50%) !important; max-width:min(92vw, 360px) !important; }
}