/* Łukomski - rozwód LP. Palette and type taken from kancelaria.lukomski.law */

:root{
  --gold:#cda568;
  --gold-d:#a8834b;
  --black:#000;
  --ink:#111;
  --ink-2:#222;
  --ink-3:#2c2c2c;
  --paper:#fff;
  --paper-2:#f4f2ee;
  --txt:#1a1a1a;
  --txt-mut:#5c5c5c;
  --txt-inv:#fff;
  --txt-inv-mut:#b3b3b3;
  --line:rgba(205,165,104,.42);
  --line-soft:rgba(0,0,0,.12);
  --hdr-h:104px;
  --wrap:1240px;
  --f:'Roboto',-apple-system,'Segoe UI',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--f);font-weight:300;
  color:var(--txt);background:var(--paper);
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:500;line-height:1.16;margin:0;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;
}
.h-sect{font-size:clamp(28px,3.6vw,46px);max-width:22ch}
.h-sect--center{margin-left:auto;margin-right:auto;text-align:center;max-width:26ch}
.lead-sub{margin-top:22px;max-width:66ch;color:var(--txt-mut);font-size:18px}
.hair{display:block;width:44px;height:1px;background:var(--gold);margin:18px 0}
/* ключевая строка первого экрана длиннее обычного надзаголовка, трекинг мельче */
.eyebrow--hero{letter-spacing:.13em;font-size:12.5px;margin-bottom:18px}
@media (max-width:680px){.eyebrow--hero{letter-spacing:.08em;font-size:11.5px;margin-bottom:14px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:17px 34px;font-size:13.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;transition:background .25s,color .25s,border-color .25s;
  cursor:pointer;font-family:var(--f);white-space:nowrap;
}
.btn--gold{background:var(--gold);color:#141414;border-color:var(--gold)}
.btn--gold:hover{background:#dcb87f;border-color:#dcb87f}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.sect--light .btn--ghost{color:var(--txt);border-color:var(--line-soft)}
.sect--light .btn--ghost:hover{border-color:var(--gold);color:var(--gold-d)}
.btn--sm{padding:13px 22px;font-size:12px}
.btn--full{width:100%;padding:19px 24px}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60}
.hdr__top{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr__top-in{display:flex;gap:28px;align-items:center;height:38px}
.hdr__mini{font-size:13px;color:var(--txt-inv-mut);text-decoration:none;letter-spacing:.01em}
.hdr__mini:hover{color:var(--gold)}
.hdr__main{background:var(--ink-2);border-bottom:1px solid rgba(255,255,255,.07)}
.hdr__main-in{display:flex;align-items:center;gap:34px;height:66px}
.hdr__logo{flex:none;display:block}
.hdr__logo img{width:46px;height:46px}
.hdr__nav{display:flex;gap:26px;margin-right:auto}
.hdr__nav a{
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#e6e6e6;text-decoration:none;font-weight:400;transition:color .2s;
}
.hdr__nav a:hover{color:var(--gold)}
.hdr__act{display:flex;align-items:center;gap:16px}
.hdr__tel{
  font-size:15px;color:#fff;text-decoration:none;font-weight:400;
  border:1px solid rgba(255,255,255,.28);padding:11px 18px;transition:border-color .2s,color .2s;
}
.hdr__tel:hover{border-color:var(--gold);color:var(--gold)}
.hdr__tel-mob{display:none;color:var(--gold);padding:8px}
.hdr__burger{
  display:none;background:none;border:0;padding:10px 8px;cursor:pointer;
  flex-direction:column;gap:5px;margin-left:auto;
}
.hdr__burger span{display:block;width:22px;height:1.5px;background:#e8e8e8;transition:transform .28s,opacity .2s}
.hdr__burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hdr__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.hdr__drop{
  display:none;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.1);
  padding:6px 20px 14px;
}
.hdr__drop.open{display:block}
.hdr__drop a{
  display:block;padding:13px 0;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:#e0e0e0;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.07);
}
.hdr__drop a:last-child{border-bottom:0;text-transform:none;letter-spacing:0;color:var(--gold)}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--black);color:var(--txt-inv);
  padding-top:clamp(140px,15vh,180px);padding-bottom:56px;
  min-height:100vh;display:flex;flex-direction:column;justify-content:safe center;
  overflow:hidden;
}

.hero__in{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:56px;align-items:safe center;
}
.hero h1{font-size:clamp(29px,3.7vw,49px);max-width:18ch;letter-spacing:-.02em}
.hero__lead{margin-top:22px;font-size:clamp(17px,1.5vw,21px);color:#e2e2e2;max-width:44ch;line-height:1.55}
.hero__price{
  margin-top:26px;padding:14px 20px;font-size:15.5px;color:var(--gold);
  border:1px solid var(--line);display:inline-block;max-width:52ch;line-height:1.45;
}
.hero__bul{margin-top:26px;display:grid;gap:10px}
.hero__bul li{
  position:relative;padding-left:26px;font-size:15.5px;color:#d6d6d6;line-height:1.45;
}
.hero__bul li::before{
  content:"";position:absolute;left:0;top:9px;width:11px;height:1px;background:var(--gold);
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.hero__note{margin-top:20px;font-size:13.5px;color:#8f8f8f;max-width:50ch;line-height:1.5}

.hero__fig{position:relative;align-self:end;justify-self:center;max-width:520px;width:100%}
.hero__fig>img{
  width:auto;max-width:100%;height:auto;object-fit:contain;margin:0 auto;
  /* высота фигуры не должна выталкивать кнопки за фолд на низких экранах */
  max-height:calc(100vh - 290px);
  /* фон кадра чистый чёрный, поэтому просто растворяем низ в секции */
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 80%,transparent 99%);
}
.hero__card{position:relative;margin-top:-24px;text-align:center;z-index:3}
.hero__name{font-size:21px;font-weight:400;font-style:italic}
.hero__role{font-size:14px;color:#a8a8a8;margin-top:3px}
.hero__stars{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:11px}
.hero__stars img{width:auto;height:19px}
.hero__stars span{font-size:14px;color:#d4d4d4}

.quote-bar{background:var(--black);padding:0 0 30px}
.hero__quote{
  position:relative;z-index:2;margin:0 auto;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.hero__quote p{font-size:clamp(15px,1.35vw,18px);font-style:italic;color:#cfcfcf;max-width:78ch;line-height:1.6}
.hero__quote img{width:126px;height:auto;opacity:.9}

/* ---------- sections ---------- */
.sect{padding:clamp(64px,8vw,116px) 0}
.sect--light{background:var(--paper);color:var(--txt)}
.sect--dark{background:var(--ink-2);color:var(--txt-inv)}
.sect--black{background:var(--black);color:var(--txt-inv)}
.sect--dark .eyebrow,.sect--black .eyebrow{color:var(--gold)}
.sect--dark .lead-sub,.sect--black .lead-sub{color:var(--txt-inv-mut)}

/* ---------- 2. four cards ---------- */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
.card4{background:var(--paper);padding:40px 30px 44px;border-top:2px solid var(--gold)}
.card4 h2{font-size:19px;line-height:1.32;min-height:2.64em}
.card4 p{font-size:15.5px;color:var(--txt-mut);line-height:1.6}
/* заголовки разной длины разгоняли волосяную линию по высоте, ровняем строками сетки */
@supports (grid-template-rows:subgrid){
  .cards4{grid-template-rows:auto auto auto}
  .card4{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
  .card4 h2{min-height:0}
  .card4 .hair{margin:18px 0}
}

/* ---------- 3. konsultacja ---------- */
.kons{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-rows:auto 1fr;gap:28px 64px;align-items:start;
}
.kons__head{grid-column:1;grid-row:1}
.kons__cta{grid-column:1;grid-row:2;align-self:start}
.kons__list{grid-column:2;grid-row:1 / span 2}
.kons__sub{margin-top:0;font-size:17px;color:var(--txt-inv-mut);max-width:46ch;line-height:1.6}
.kons__cta .btn{margin-top:26px}
.kons__list{display:grid;gap:1px;background:rgba(255,255,255,.1)}
.kons__list li{display:flex;gap:22px;align-items:baseline;background:var(--ink-2);padding:26px 4px}
.kons__list span{font-size:13px;letter-spacing:.16em;color:var(--gold);flex:none;width:30px}
.kons__list p{font-size:17px;color:#e4e4e4;line-height:1.55}

/* ---------- 4. numbers ---------- */
.nums-sect{padding:clamp(52px,6vw,84px) 0}
.nums{display:grid;grid-template-columns:repeat(4,1fr)}
.num{text-align:center;padding:12px 18px;border-left:1px solid var(--line-soft)}
.num:first-child{border-left:0}
.num b{font-size:clamp(42px,5.4vw,68px);font-weight:300;line-height:1;display:block;color:var(--txt)}
.num p{margin-top:12px;font-size:13.5px;letter-spacing:.05em;color:var(--txt-mut)}

/* ---------- 5. better call ---------- */
.bcl{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:60px;align-items:center}
.bcl__txt h2{margin-bottom:30px}
.bcl__txt p{font-size:17.5px;color:#d8d8d8;line-height:1.68;margin-bottom:18px;max-width:60ch}
.bcl__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.bcl__fig{position:relative}
.bcl__fig img{
  width:100%;filter:grayscale(1) contrast(1.15) brightness(.94);
  mix-blend-mode:screen;
}

/* ---------- 6. strategia ---------- */
.strat{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px}
.strat__it{border-top:1px solid var(--line);padding-top:26px}
.strat__it h3{font-size:19px;line-height:1.34;margin-bottom:14px}
.strat__it p{font-size:16px;color:var(--txt-mut);line-height:1.65}


/* ---------- звёзды и аватары отзывов ---------- */
.stars{
  display:inline-block;width:82px;height:15px;flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23cda568' d='M10 1.6l2.47 5.3 5.53.66-4.1 3.9 1.09 5.94L10 14.5l-4.99 2.9 1.09-5.94-4.1-3.9 5.53-.66z'/%3E%3C/svg%3E");
  background-size:16.4px 15px;background-repeat:repeat-x;
}
.hero__stars{gap:8px}
.hero__stars img{width:17px;height:17px}
.rev__head{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.rev__av{
  width:46px;height:46px;flex:none;border-radius:50%;object-fit:cover;
  filter:saturate(.8);border:1px solid rgba(205,165,104,.35);
}
.rev__who{min-width:0;display:grid;gap:5px}
.rev__g{width:18px;height:18px;flex:none;margin-left:auto;opacity:.9}
.rev figcaption{margin:0;font-size:15px;color:#fff;letter-spacing:0;font-weight:400}

/* ---------- 7. opinie ---------- */
.revs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px;
  align-items:start;
}
.rev{
  margin:0;background:var(--ink-3);padding:26px 26px 26px;
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;
}
.rev blockquote{margin:0;font-size:15.5px;color:#dcdcdc;line-height:1.62}
.revs__cta{display:flex;justify-content:center;margin-top:52px}

/* ---------- 8. team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px}
.tm__ph{aspect-ratio:3/4;overflow:hidden;background:#111;margin-bottom:20px}
.tm__ph img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(1);transition:filter .4s}
.tm:hover .tm__ph img{filter:grayscale(0)}
.tm h3{font-size:20px}
.tm__role{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);margin-top:7px}
.sect--dark .tm__role,.sect--black .tm__role{color:var(--gold)}
.sect--dark .tm__txt,.sect--black .tm__txt{color:var(--txt-inv-mut)}
.sect--dark .tm__ph,.sect--black .tm__ph{background:#000}
.tm__txt{margin-top:14px;font-size:15px;color:var(--txt-mut);line-height:1.6}

/* ---------- 9. faq ---------- */
.faq-wrap{max-width:960px}
.faq{margin-top:46px;border-top:1px solid rgba(255,255,255,.14)}
.faq details{border-bottom:1px solid rgba(255,255,255,.14)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-size:clamp(17px,1.7vw,21px);font-weight:400;color:#fff;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details>div{padding:0 44px 28px 0}
.faq details p{font-size:16.5px;color:#c4c4c4;line-height:1.66;max-width:78ch}

/* ---------- 10. kontakt ---------- */
.kont{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:66px;align-items:start}
.kont__lead{margin-top:24px;font-size:18px;color:#dedede;line-height:1.6;max-width:44ch}
.kont__quote{margin-top:26px;font-size:19px;font-style:italic;color:var(--gold)}
.kont__data{margin-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.kont__data li{
  display:flex;gap:20px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px;color:#e6e6e6;
}
.kont__data span{
  flex:none;width:96px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#8a8a8a;
}
.kont__data a{text-decoration:none;transition:color .2s}
.kont__data a:hover{color:var(--gold)}

.kont__form{background:#141414;border:1px solid rgba(255,255,255,.1);padding:38px 34px 34px}
.kont__form h3{font-size:24px}
.kont__form-sub{margin-top:12px;font-size:15px;color:#a5a5a5;line-height:1.55}
#lead-form{margin-top:26px;display:grid;gap:6px}
#lead-form label{font-size:13px;letter-spacing:.06em;color:#9c9c9c;margin-top:12px}
#lead-form input[type=text],#lead-form input[type=tel],#lead-form input[type=email],#lead-form textarea{
  width:100%;background:#1d1d1d;border:1px solid rgba(255,255,255,.14);color:#fff;
  padding:14px 15px;font-family:var(--f);font-size:16px;font-weight:300;transition:border-color .2s;
}
#lead-form input:focus,#lead-form textarea:focus{outline:none;border-color:var(--gold)}
#lead-form textarea{resize:vertical;min-height:104px}
.chk{display:flex!important;gap:12px;align-items:flex-start;margin-top:22px!important;font-size:12.5px!important;color:#8d8d8d!important;line-height:1.5;letter-spacing:0!important}
.chk input{flex:none;margin-top:3px;width:16px;height:16px;accent-color:var(--gold)}
.chk a{color:var(--gold)}
#lead-form .btn{margin-top:24px}
.form-msg{margin-top:14px;font-size:14.5px;min-height:20px;line-height:1.5}
.form-msg.ok{color:var(--gold)}
.form-msg.err{color:#e08b8b}
.field-bad{border-color:#a05555!important}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#a9a9a9;padding:56px 0 26px;font-size:14.5px}
.ftr__in{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:40px}
.ftr__brand{display:flex;gap:16px;align-items:flex-start;max-width:34ch}
.ftr__brand img{width:44px;height:44px;flex:none}
.ftr__nav,.ftr__cnt{display:grid;gap:10px;align-content:start}
.ftr__nav a,.ftr__cnt a{text-decoration:none;transition:color .2s}
.ftr__nav a:hover,.ftr__cnt a:hover{color:var(--gold)}
.ftr__btm{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;color:#767676;
}

/* ---------- mobile sticky bar ---------- */
.mbar{display:none}

/* ================= GEMINI POLISH ================= */
.js-on .card4, .js-on .kons__list li, .js-on .strat__it, .js-on .rev, .js-on .tm, .js-on .faq details, .js-on .num {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms cubic-bezier(.22,.61,.36,1), transform 650ms cubic-bezier(.22,.61,.36,1);
}
.js-on .card4.is-revealed, .js-on .kons__list li.is-revealed, .js-on .strat__it.is-revealed, .js-on .rev.is-revealed, .js-on .tm.is-revealed, .js-on .faq details.is-revealed, .js-on .num.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hairline accents on dark sections (eyebrow) */
.sect--dark .eyebrow, .sect--black .eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sect--dark .eyebrow::after, .sect--black .eyebrow::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 1px;
  background: rgba(205,165,104,0.35);
  transform-origin: left;
}
.js-on .sect--dark .eyebrow::after, .js-on .sect--black .eyebrow::after {
  transform: scaleX(0);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.js-on .sect--dark .eyebrow.is-revealed::after, .js-on .sect--black .eyebrow.is-revealed::after {
  transform: scaleX(1);
}

/* Hairline accent above .strat__it */
.strat__it { border-top: none; position: relative; }
.strat__it::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left;
}
.js-on .strat__it::before {
  transform: scaleX(0);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.js-on .strat__it.is-revealed::before {
  transform: scaleX(1);
}

/* Hairline accent in .kons (desktop vertical rule) */
@media (min-width: 921px) {
  .kons__head { position: relative; }
  .kons__head::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    right: -32px;
    width: 1px;
    background: rgba(205,165,104,0.35);
    transform-origin: top;
  }
  .js-on .kons__head::after {
    transform: scaleY(0);
    transition: transform 700ms cubic-bezier(.22,.61,.36,1);
  }
  .js-on .kons__head.is-revealed::after {
    transform: scaleY(1);
  }
}

/* Section numbers */
/* номер отдельной колонкой, иначе вторая строка текста подтекает под него */
.eyebrow[data-num]{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;align-items:baseline;
}
.eyebrow[data-num]::before {
  content: attr(data-num) / "";
  font-size: 11px;
  opacity: 0.6;
}

/* Numbers block */
.num { border-left: none; position: relative; }
.num::before {
  content: "";
  position: absolute;
  top: 12px; bottom: 12px; left: 0;
  width: 1px;
  background: var(--line-soft);
}
.num:first-child::before { display: none; }
.js-on .num::before {
  opacity: 0;
  transition: opacity 700ms ease 700ms;
}
.js-on .num.is-revealed::before { opacity: 1; }
.num b { position: relative; display: inline-block; padding-bottom: 2px; }
.num b::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform-origin: center;
}
.js-on .num b::after {
  transform: scaleX(0);
  transition: transform 1400ms cubic-bezier(.22,.61,.36,1);
}
.js-on .num.is-revealed b::after { transform: scaleX(1); }

/* Team cards */
.tm__ph::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.tm:hover .tm__ph::after { transform: scaleX(1); }
.tm__ph img {
  transform: scale(1);
  transition: filter 0.4s, transform 700ms cubic-bezier(.22,.61,.36,1);
}

/* FAQ Details height transition */
.faq details > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms cubic-bezier(.22,.61,.36,1);
  padding: 0;
}
.faq details[open] > div {
  grid-template-rows: 1fr;
}
.faq details > div > p {
  overflow: hidden;
  min-height: 0;
  padding: 0 44px 28px 0;
}
.faq details {
  position: relative;
  padding-left: 18px;
  margin-left: -18px;
}
.faq details::before {
  content: "";
  position: absolute;
  left: 0; top: 26px; bottom: 26px;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 400ms cubic-bezier(.22,.61,.36,1);
}
.faq details[open]::before { transform: scaleY(1); }

/* Header Scroll */
.hdr__main { transition: background 250ms ease, height 250ms ease; }
.hdr__main-in { transition: height 250ms ease; }
.hdr--scrolled .hdr__main { background: #111; }
.hdr--scrolled .hdr__main-in { height: 58px; }

/* Buttons */
.btn--gold { position: relative; overflow: hidden; z-index: 1; }
.btn--gold::before {
  content: "";
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0s;
  z-index: -1;
  pointer-events: none;
}
.btn--gold:hover::before {
  left: 100%;
  transition: left 300ms ease;
}
.btn--ghost { position: relative; }
.btn--ghost::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--gold);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.btn--ghost:hover::after { opacity: 1; }

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .cards4{grid-template-columns:repeat(2,1fr)}
  .card4 h2{min-height:0}
  .strat,.revs,.team{grid-template-columns:repeat(2,1fr)}
  .hero__in{gap:38px}
}

@media (max-width:920px){
  .hdr__nav,.hdr__act,.hdr__mini--addr{display:none}
  .hdr__burger{display:flex}
  .hdr__tel-mob{display:block;margin-left:0}
  .hdr__main-in{height:58px;gap:16px}
  .hdr__top-in{height:34px}
  .hero{padding-top:128px;min-height:auto;padding-bottom:48px}
  .hero__in{grid-template-columns:1fr;gap:34px}
  .hero__fig{order:2;max-width:400px;margin:0 auto}
  .hero__col{order:1}
  .kons,.bcl,.kont{grid-template-columns:1fr;gap:40px}
  .kons{display:flex;flex-direction:column;gap:32px}
  .kons__head{order:1}
  .kons__list{order:2}
  .kons__cta{order:3}
  .bcl__fig{max-width:340px}
  .nums{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .num:nth-child(3){border-left:0}
  .ftr__in{grid-template-columns:1fr;gap:32px}
}

@media (max-width:680px){
  body{font-size:16px}
  /* отзывы горизонтальной каруселью, чтобы не растить простыню */
  .revs{
    display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:-20px;margin-right:-20px;padding:0 20px 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .revs::-webkit-scrollbar{display:none}
  .rev{scroll-snap-align:start;padding:24px 20px 22px}
  /* карточки уезжают за край по горизонтали, наблюдатель их не видит и они остаются прозрачными */
  .js-on .rev{opacity:1!important;transform:none!important}
  .rev blockquote{font-size:15px}
  .revs__cta{margin-top:34px}
  /* команда в две колонки */
  .team{grid-template-columns:1fr 1fr;gap:22px 16px}
  .tm h3{font-size:16px}
  .tm__role{font-size:11px;letter-spacing:.09em}
  .tm__txt{font-size:13.5px;margin-top:10px}
  .tm__ph{margin-bottom:14px}
  .wrap{padding:0 20px}
  .sect{padding:56px 0}
  .cards4,.strat{grid-template-columns:1fr}
  .cards4{grid-template-rows:none}
  .card4{display:block;grid-row:auto}
  .card4 h2{min-height:0}
  .strat{gap:26px;margin-top:38px}
  .revs,.team{margin-top:38px}
  .card4{padding:28px 22px 30px}
  .hero h1{font-size:clamp(27px,7.4vw,34px)}
  .hero__cta{display:grid;grid-template-columns:1fr;gap:10px}
  .hero__cta .btn{width:100%}
  .quote-bar{padding:0 0 22px}
  .hero__quote{gap:14px;padding-top:20px;align-items:flex-start;flex-direction:column}
  .hero__quote p{font-size:15px}
  .hero__quote img{width:104px;margin-left:auto}
  .kont__form{padding:28px 20px 26px}
  .kont__data span{width:78px}
  .team .tm__ph{aspect-ratio:4/5}
  body{padding-bottom:72px}
  /* на телефоне цифры идут сразу за карточками, блок консультации уходит за них */
  body{display:flex;flex-direction:column}
  .hero{order:1}
  .quote-bar{order:2}
  #dlaczego{order:3}
  .nums-sect{order:4}
  #konsultacja{order:5}
  #omnie{order:6}
  #strategia{order:7}
  #zespol{order:8}
  #opinie{order:9}
  #faq{order:10}
  #kontakt{order:11}
  .ftr{order:12}

  /* на телефоне цифры встали сразу за карточками, поэтому меняем фоны местами */
  .nums-sect{background:var(--ink-2);color:var(--txt-inv)}
  .nums-sect .num{border-left-color:rgba(255,255,255,.14)}
  .nums-sect .num b{color:#fff}
  .nums-sect .num p{color:var(--txt-inv-mut)}

  #konsultacja{background:var(--paper);color:var(--txt)}
  #konsultacja .kons__sub{color:var(--txt-mut)}
  #konsultacja .kons__list{background:var(--line-soft)}
  #konsultacja .kons__list li{background:var(--paper)}
  #konsultacja .kons__list p{color:var(--txt)}
  .mbar{
    display:grid;grid-template-columns:1.35fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.14);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbar{transform:translateY(115%);transition:transform .28s ease}
  .mbar.show{transform:translateY(0)}
  .mbar a{
    display:flex;align-items:center;justify-content:center;height:58px;
    text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  }
  .mbar__form{background:var(--ink);color:#fff}
  .mbar__call{background:var(--gold);color:#141414}
}

/* низкие экраны. Зазор под шапкой держим, но ужимаем ритм, чтобы кнопки влезли в фолд */
@media (min-width:921px) and (max-height:880px){
  .hero{padding-top:132px;padding-bottom:40px}
  .hero h1{font-size:clamp(28px,3.3vw,43px)}
  .hero__lead{margin-top:18px;font-size:18px}
  .hero__price{margin-top:16px;padding:11px 16px;font-size:14.5px}
  .hero__bul{margin-top:20px;gap:8px}
  .hero__bul li{font-size:15px}
  .hero__cta{margin-top:24px}
  .hero__cta .btn{padding:15px 28px}
  .hero__card{margin-top:-20px}
}
@media (min-width:921px) and (max-height:780px){
  .hero{padding-top:124px;padding-bottom:32px}
  .hero h1{font-size:clamp(27px,3vw,38px)}
  .hero__lead{margin-top:15px;font-size:17px}
  .hero__price{margin-top:14px;font-size:14px}
  .hero__bul{margin-top:17px;gap:6px}
  .hero__bul li{font-size:14.5px}
  .hero__cta{margin-top:20px}
  .hero__cta .btn{padding:14px 26px;font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}