/* ═══════════════════════════════════════════════════════════════
   Рондель-М — черновик сайта. Первый экран + блок «Знакомая ситуация?»
   Референс композиции: arix.framer.website (тёмное, крупная типографика,
   много воздуха). Палитра и знак — из фирменных брошюр компании.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Тёмная тема построена затемнением фирменного синего #0F2986,
     акцент #4F77FD взят из брошюр без изменений. */
  --bg:        #060D1F;
  --bg-2:      #0A1633;
  --bg-3:      #101F45;
  --accent:    #4F77FD;
  --accent-2:  #91AAFF;
  --accent-dim:rgba(79,119,253,.12);
  --text:      #EEF2FF;
  --muted:     #8D9CC4;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.18);

  --ff-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --ff-text:   "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Шаг сетки — 4px */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --wrap:1240px;
  --radius:14px;
  --hdr-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.65 var(--ff-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,p,dl,dd,ol{margin:0}
ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}

/* ── Мелкие общие элементы ─────────────────────────────────── */
.eyebrow{
  /* flex-start, а не center: при переносе на две строки маркер
     должен оставаться у первой строки, а не уезжать в середину. */
  display:flex;align-items:flex-start;gap:var(--s2);
  margin:0 0 var(--s5);
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.dot{
  width:6px;height:6px;margin-top:.45em;border-radius:50%;
  background:var(--accent);flex:none;
  box-shadow:0 0 0 4px var(--accent-dim);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);
  padding:12px 22px;
  border:1px solid transparent;border-radius:999px;
  font:500 15px/1 var(--ff-text);
  cursor:pointer;white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn--lg{padding:16px 30px;font-size:16px}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:#6A8CFF}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{border-color:var(--line-2);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-2)}
.btn--ghost:active{transform:translateY(1px)}

.h2{
  font:900 clamp(34px,6vw,58px)/1.05 var(--ff-display);
  letter-spacing:-.015em;margin:0 0 var(--s5);
}

/* ── Шапка (sticky) ────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(6,13,31,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr__in{
  min-height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.brand{display:flex;align-items:center;gap:var(--s3);flex:none;min-width:0}
.brand__mark{width:auto;height:34px;opacity:.95;flex:none}
/* До 480px в шапку не помещается всё сразу (знак + вордмарк + телефон + CTA).
   Жертвуем вордмарком: знак узнаваем, телефон и CTA по ТЗ важнее. */
.brand__name{display:none;font:700 19px/1 var(--ff-display);letter-spacing:.01em}
.hdr__right{display:flex;align-items:center;gap:var(--s3);min-width:0}
/* Мобильный трафик основной, поэтому телефон в шапке есть всегда:
   до 720px — иконкой с тач-зоной 44px, дальше — номером с подписью. */
.hdr__tel{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:calc(var(--s2) * -1);
  border-radius:50%;color:var(--text);
  transition:background .18s ease,color .18s ease;
}
.hdr__tel:hover{background:rgba(255,255,255,.07);color:var(--accent-2)}
.hdr__tel-txt{display:none}
.hdr__tel-num{display:block;font-weight:500;font-size:15px}
.hdr__tel-cap{display:block;font-size:11px;color:var(--muted)}
.hdr__cta{padding:10px 16px;font-size:14px}

/* ── Первый экран ──────────────────────────────────────────── */
.hero{position:relative;padding:var(--s8) 0 var(--s9);overflow:hidden}
.hero__glow{
  position:absolute;inset:-30% -10% auto -10%;height:900px;
  background:radial-gradient(60% 55% at 50% 0%, rgba(79,119,253,.28), transparent 70%);
  pointer-events:none;
}
.hero__in{position:relative;display:grid;gap:var(--s8)}

.hero__h1{margin:0 0 var(--s5)}
.hero__kicker{
  display:block;margin-bottom:var(--s2);
  font:500 clamp(13px,2.4vw,15px)/1 var(--ff-text);
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent-2);
}
.hero__big{
  display:block;
  font:900 clamp(42px,10vw,92px)/.98 var(--ff-display);
  letter-spacing:-.025em;
}
.hero__big--accent{color:var(--accent-2)}
.hero__tail{
  display:block;margin-top:var(--s4);max-width:34ch;
  font:400 clamp(14px,2.6vw,16px)/1.5 var(--ff-text);
  color:var(--muted);
}
.hero__lead{max-width:52ch;margin-bottom:var(--s6);color:#C3CCE6}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s8)}

.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s5);
  padding-top:var(--s5);border-top:1px solid var(--line);
}
.stats__n{
  font:900 30px/1 var(--ff-display);letter-spacing:-.02em;
}
.stats__n span{font-size:16px;color:var(--muted);font-weight:400}
.stats__c{margin:var(--s2) 0 0;font-size:13px;line-height:1.45;color:var(--muted)}

/* Кадр с регистратора */
.screen{
  margin:0;
  border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--bg-2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(79,119,253,.08);
  overflow:hidden;
}
.screen__bar{
  display:flex;align-items:center;gap:var(--s3);
  padding:10px var(--s4);
  border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.screen__rec{display:flex;align-items:center;gap:6px;color:#FF6B6B}
.screen__rec i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.8s infinite}
.screen__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen__time{font-variant-numeric:tabular-nums}
.screen__view{aspect-ratio:642/336;background:#000}
.screen__view img{width:100%;height:100%;object-fit:cover}
.screen__cap{
  padding:var(--s3) var(--s4);
  font-size:12.5px;line-height:1.45;color:var(--muted);
  border-top:1px solid var(--line);
}
@keyframes blink{0%,45%{opacity:1}55%,100%{opacity:.15}}

/* ── Разделитель ───────────────────────────────────────────── */
.divider{padding:var(--s6) 0;color:var(--accent);opacity:.5}
.rule{display:block;width:100%}
.rule__fill{fill:url(#p-merlon)}
html[data-divider="wave"]  .rule__fill{fill:url(#p-wave)}
html[data-divider="rhomb"] .rule__fill{fill:url(#p-rhomb)}
html[data-divider="none"]  .divider{opacity:0;padding:var(--s5) 0}

/* ── Знакомая ситуация? ────────────────────────────────────── */
.pains{padding:var(--s8) 0 var(--s9)}
.pains__in{display:grid;gap:var(--s7)}
.pains__lead{max-width:46ch;color:var(--muted)}

/* Переключатель сегмента */
.seg{
  position:relative;display:inline-flex;
  padding:4px;margin:0 0 var(--s5);
  border:1px solid var(--line-2);border-radius:999px;
  background:rgba(255,255,255,.03);
}
.seg__btn{
  position:relative;z-index:1;
  padding:10px 20px;border:0;border-radius:999px;background:none;
  font:500 14.5px/1 var(--ff-text);color:var(--muted);
  cursor:pointer;transition:color .2s ease;
}
.seg__btn[aria-pressed="true"]{color:#fff}
.seg__thumb{
  position:absolute;top:4px;left:4px;z-index:0;
  height:calc(100% - 8px);border-radius:999px;
  background:var(--accent);
  transition:transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
}

/* Список болей */
.plist{display:grid;gap:2px}
.plist__i{
  display:flex;gap:var(--s4);align-items:baseline;
  padding:var(--s5) var(--s4) var(--s5) 0;
  border-bottom:1px solid var(--line);
}
.plist__i:first-child{border-top:1px solid var(--line)}
.plist__n{
  flex:none;width:34px;
  font:500 13px/1 var(--ff-text);letter-spacing:.08em;
  color:var(--accent);
}
.plist__i p{margin:0;font-size:17px;line-height:1.5}

.shot{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2)}
.shot img{width:100%;height:auto}
.shot figcaption{padding:var(--s4);font-size:13px;line-height:1.5;color:var(--muted)}

/* Переключение по сегменту.
   data-segment на <html> задан в разметке — без JS видна «стройка». */
html[data-segment="stroyka"] [data-seg="poselok"],
html[data-segment="poselok"] [data-seg="stroyka"]{display:none}

/* ── Заглушка «дальше будет» ───────────────────────────────── */
.stub{
  padding-block:var(--s8);
  border-top:1px dashed var(--line-2);
  color:var(--muted);font-size:14px;text-align:center;
}

/* ── Служебная панель черновика ────────────────────────────── */
.draft{
  position:fixed;right:var(--s4);bottom:var(--s4);z-index:60;
  display:flex;flex-direction:column;gap:var(--s2);
  padding:10px 12px;
  border:1px solid var(--line-2);border-radius:12px;
  background:rgba(10,22,51,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.draft__label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.draft__row{display:flex;gap:4px}
.draft button{
  padding:6px 10px;border:1px solid transparent;border-radius:7px;
  background:rgba(255,255,255,.06);color:var(--muted);
  font:500 12px/1 var(--ff-text);cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.draft button:hover{background:rgba(255,255,255,.12);color:var(--text)}
.draft button[aria-pressed="true"]{background:var(--accent);color:#fff}

/* ── Крупный телефон ───────────────────────────────────────── */
@media (min-width:480px){
  .brand__name{display:block}
}

/* ── Планшет ───────────────────────────────────────────────── */
@media (min-width:720px){
  .hdr__right{gap:var(--s4)}
  .wrap{padding-inline:var(--s6)}
  .hdr__tel{width:auto;height:auto;margin-right:0;border-radius:8px;padding:4px 6px}
  .hdr__tel:hover{background:none}
  .hdr__tel-ico{display:none}
  .hdr__tel-txt{display:block;text-align:right;line-height:1.25}
  .hero{padding:var(--s9) 0 var(--s10)}
  .pains__body{display:grid;grid-template-columns:1fr;gap:var(--s7)}
}

/* ── Десктоп ───────────────────────────────────────────────── */
@media (min-width:1024px){
  .hero__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:var(--s8)}
  .pains__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s9)}
  .pains__head{position:sticky;top:calc(var(--hdr-h) + var(--s6));align-self:start}
  .pains__body{grid-template-columns:1fr;gap:var(--s6)}
  .stats{gap:var(--s6)}
}

/* ── Уважаем настройку «меньше движения» ───────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}