/* ============================================================
   Denver Moving Works — denvermoving.online
   Асимметричная сетка, крупные цифры, секции внахлёст.
   Палитра: глубокий зелёный #0f766e + песок #fef3c7.
   Шрифты: Bricolage Grotesque (заголовки) + Karla (текст).
   Никаких теней — только заливки, линии и смещения.
   ============================================================ */

:root{
  --green:#0f766e;
  --green-deep:#0b544e;
  --green-ink:#083b37;
  --sand:#fef3c7;
  --sand-2:#fdf8e8;
  --amber:#d97706;
  --paper:#fffdf7;
  --panel:#ffffff;
  --ink:#10201d;
  --ink-2:#44554f;
  --muted:#7a8a84;
  --line:#e2ded0;
  --line-2:#cfd8d4;
  --r:4px;
  --gut:clamp(20px,4vw,40px);
}
[data-theme="dark"]{
  --green:#34b3a6;
  --green-deep:#54ccbe;
  --green-ink:#0d2a27;
  --sand:#3a3418;
  --sand-2:#241f0f;
  --amber:#f0a13a;
  --paper:#0c1412;
  --panel:#121d1a;
  --ink:#eef5f2;
  --ink-2:#adbdb7;
  --muted:#7f8f89;
  --line:#22332f;
  --line-2:#2c403b;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:Karla,-apple-system,"Segoe UI",system-ui,sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.62;font-size:17px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background .2s linear,color .2s linear;
}
h1,h2,h3,h4,.num,.brand,.rate{
  font-family:"Bricolage Grotesque",Karla,system-ui,sans-serif;
  font-weight:700;letter-spacing:-.025em;line-height:1.04;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* сетка-обёртка: 12 колонок, всё внутри выравнивается по ней */
.shell{width:100%;max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:0 28px}

.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-bottom:14px;
}
.lede{font-size:clamp(18px,2vw,21px);color:var(--ink-2);line-height:1.55}

/* ── кнопки: прямоугольные, 4px, без теней ───────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  padding:14px 26px;border-radius:var(--r);border:2px solid transparent;
  font-family:Karla,sans-serif;font-weight:700;font-size:16px;text-decoration:none;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-solid{background:var(--green);color:#fff}
.btn-solid:hover{background:var(--green-deep)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-sand{background:var(--sand);color:var(--green-ink);border-color:var(--sand)}
.btn-sand:hover{background:#fbe79c;border-color:#fbe79c}
[data-theme="dark"] .btn-sand{color:var(--sand);background:transparent;border-color:var(--sand)}
[data-theme="dark"] .btn-solid{color:var(--green-ink)}

/* ── шапка ───────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:80;background:var(--paper);border-bottom:2px solid var(--ink)}
.hdr .bar{display:flex;align-items:center;gap:22px;padding-block:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:20px;flex:none}
.brand img{width:36px;height:36px;border-radius:var(--r)}
.brand span{white-space:nowrap}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-size:15px;font-weight:600;color:var(--ink-2);padding-block:4px}
.nav a:hover{color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}
.hdr-side{display:flex;align-items:center;gap:12px;flex:none}
.hdr-tel{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;
  color:var(--ink);white-space:nowrap;letter-spacing:-.02em;
}
.hdr-tel:hover{color:var(--green)}
.hdr-tel svg{width:18px;height:18px;color:var(--green)}
.tsw{
  width:34px;height:34px;border:2px solid var(--line-2);border-radius:var(--r);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  font-size:15px;line-height:1;flex:none;padding:0;
}
.tsw:hover{border-color:var(--green);color:var(--green)}
.tsw .m{display:none}
[data-theme="dark"] .tsw .s{display:none}
[data-theme="dark"] .tsw .m{display:block}
@media(max-width:1060px){.nav{display:none}}
@media(max-width:560px){
  .hdr .bar{gap:10px}
  .brand{font-size:16px;gap:8px}.brand img{width:30px;height:30px}
  .hdr-tel span{display:none}
  .hdr-tel{padding:8px;border:2px solid var(--green);border-radius:var(--r)}
}

/* ── герой: асимметрия 7/5, фото уходит за край ──────────── */
.hero{position:relative;padding-top:clamp(40px,6vw,76px);background:var(--paper)}
.hero .grid12{align-items:start}
.hero-txt{grid-column:1/8}
.hero h1{font-size:clamp(38px,5.6vw,70px);margin-bottom:22px;line-height:1.08}
.hero h1 .hl{
  background:linear-gradient(transparent 76%,var(--sand) 76%,var(--sand) 97%,transparent 97%);
  padding-inline:1px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
[data-theme="dark"] .hero h1 .hl{background:none;color:var(--green)}
.hero .lede{max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-pic{grid-column:8/13;position:relative;margin-top:14px}
.hero-pic img{width:100%;height:clamp(300px,34vw,440px);object-fit:cover;border-radius:var(--r)}
.hero-pic .badge{
  position:absolute;left:-42px;bottom:-26px;background:var(--green);color:#fff;
  padding:16px 20px;border-radius:var(--r);max-width:230px;
}
.hero-pic .badge b{font-family:"Bricolage Grotesque",sans-serif;font-size:30px;display:block;line-height:1}
.hero-pic .badge span{font-size:13px;line-height:1.35;display:block;margin-top:6px;opacity:.92}
[data-theme="dark"] .hero-pic .badge{color:var(--green-ink)}
@media(max-width:900px){
  .hero-txt{grid-column:1/13}
  .hero-pic{grid-column:1/13;margin-top:34px}
  .hero-pic .badge{left:auto;right:14px;bottom:-20px;max-width:200px}
}

/* ── лента цифр: внахлёст на герой ───────────────────────── */
.numbers{position:relative;margin-top:clamp(44px,6vw,70px);background:var(--green);color:#fff}
.numbers .row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.numbers .cell{padding:30px 26px;border-left:1px solid rgba(255,255,255,.2)}
.numbers .cell:first-child{border-left:0;padding-left:0}
.num{font-size:clamp(34px,4.2vw,50px);display:block;color:var(--sand)}
.numbers p{font-size:14px;line-height:1.45;margin-top:8px;opacity:.9;max-width:24ch}
[data-theme="dark"] .numbers{color:var(--green-ink)}
[data-theme="dark"] .numbers .cell{border-color:rgba(8,59,55,.22)}
[data-theme="dark"] .num{color:var(--green-ink)}
@media(max-width:820px){
  .numbers .row{grid-template-columns:repeat(2,1fr)}
  .numbers .cell{padding:22px 18px;border-top:1px solid rgba(255,255,255,.2)}
  .numbers .cell:nth-child(-n+2){border-top:0}
  .numbers .cell:nth-child(odd){border-left:0;padding-left:0}
}

/* ── общая секция ────────────────────────────────────────── */
section{padding-block:clamp(56px,7vw,96px)}
.sec-head{grid-column:1/8;margin-bottom:44px}
.sec-head h2{font-size:clamp(30px,4.2vw,50px);margin-bottom:14px}
.sec-head p{color:var(--ink-2);max-width:56ch}
.sec-aside{grid-column:9/13;align-self:end;margin-bottom:44px;
  font-size:15px;color:var(--muted);border-left:2px solid var(--green);padding-left:16px}
@media(max-width:900px){
  .sec-head{grid-column:1/13}
  .sec-aside{grid-column:1/13;margin-top:-26px}
}

/* ── услуги: смещённая кладка ────────────────────────────── */
.svc-list{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
.svc{
  grid-column:span 4;background:var(--panel);border:2px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  transition:border-color .15s,transform .15s;
}
.svc:nth-child(1),.svc:nth-child(4){grid-column:span 5}
.svc:nth-child(3),.svc:nth-child(6){grid-column:span 3}
.svc:nth-child(4){margin-top:-28px}
.svc:nth-child(5){margin-top:22px}
.svc:hover{border-color:var(--green);transform:translateY(-3px)}
.svc img{width:100%;height:168px;object-fit:cover}
.svc .in{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.svc .idx{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--green)}
.svc h3{font-size:22px}
.svc p{font-size:15px;color:var(--ink-2);line-height:1.5;flex:1}
.svc .go{font-size:14px;font-weight:700;color:var(--green)}
@media(max-width:980px){
  .svc,.svc:nth-child(n){grid-column:span 6;margin-top:0}
}
@media(max-width:620px){
  .svc,.svc:nth-child(n){grid-column:span 12}
}

/* ── шаги: крупные цифры слева ───────────────────────────── */
.steps{grid-column:1/13;display:grid;gap:0}
.step{
  display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start;
  padding-block:28px;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step .sn{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(42px,5vw,64px);
  line-height:.9;color:var(--sand);-webkit-text-stroke:1px var(--green);
}
[data-theme="dark"] .step .sn{color:transparent}
.step h3{font-size:22px;margin-bottom:8px}
.step p{color:var(--ink-2);max-width:66ch}
@media(max-width:700px){
  .step{grid-template-columns:1fr;gap:6px}
  .step .sn{font-size:34px}
}

/* ── прайс: 4 колонки, одна выделена заливкой ────────────── */
.price-wrap{grid-column:1/13;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pcard{border:2px solid var(--line);border-radius:var(--r);padding:26px 22px;background:var(--panel);
  display:flex;flex-direction:column;gap:10px}
.pcard.hot{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-16px)}
[data-theme="dark"] .pcard.hot{color:var(--green-ink)}
.pcard .crew{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.pcard.hot .crew{color:var(--sand)}
[data-theme="dark"] .pcard.hot .crew{color:var(--green-ink);opacity:.8}
.rate{font-size:44px;line-height:1}
.rate small{font-family:Karla,sans-serif;font-size:15px;font-weight:600;letter-spacing:0}
.pcard .fit{font-weight:700;font-size:16px}
.pcard .det{font-size:14.5px;color:var(--ink-2);line-height:1.5;flex:1}
.pcard.hot .det,.pcard.hot .fit{color:inherit;opacity:.94}
@media(max-width:1000px){.price-wrap{grid-template-columns:repeat(2,1fr)}.pcard.hot{transform:none}}
@media(max-width:560px){.price-wrap{grid-template-columns:1fr}}

.included{grid-column:1/13;margin-top:34px;background:var(--sand-2);border-radius:var(--r);
  padding:26px 28px;border:2px solid var(--sand)}
.included h3{font-size:20px;margin-bottom:16px}
.included ul{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 24px}
.included li{font-size:15px;color:var(--ink-2);padding-left:22px;position:relative}
.included li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:2px;background:var(--green)}
@media(max-width:900px){.included ul{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.included ul{grid-template-columns:1fr}}

/* ── города: плотный список-таблица ──────────────────────── */
.cities{grid-column:1/13;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.city-row{display:flex;gap:18px;align-items:baseline;padding-block:18px;
  border-top:1px solid var(--line);text-decoration:none}
.city-row:hover .cn{color:var(--green)}
.city-row .ci{font-size:12px;font-weight:700;color:var(--muted);width:26px;flex:none;padding-top:4px}
.cn{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:21px;white-space:nowrap}
.city-row .cd{font-size:14px;color:var(--muted);line-height:1.4}
@media(max-width:820px){.cities{grid-template-columns:1fr}}

/* ── отзывы: masonry-колонки ─────────────────────────────── */
.rev-wrap{grid-column:1/13;column-count:3;column-gap:24px}
.rev{
  break-inside:avoid;background:var(--panel);border:2px solid var(--line);border-radius:var(--r);
  padding:20px;margin-bottom:24px;
}
.rev .stars{color:var(--amber);font-size:14px;letter-spacing:2px;margin-bottom:9px}
.rev p{font-size:15px;color:var(--ink-2);line-height:1.55}
.rev .who{margin-top:13px;font-size:14px;font-weight:700}
.rev .who em{font-style:normal;font-weight:400;color:var(--muted)}
.rev-more{grid-column:1/13;margin-top:8px;text-align:center}
#rev-extra{display:none;column-count:3;column-gap:24px;grid-column:1/13}
#rev-extra.on{display:block}
@media(max-width:980px){.rev-wrap,#rev-extra.on{column-count:2}}
@media(max-width:620px){.rev-wrap,#rev-extra.on{column-count:1}}

/* ── форма ───────────────────────────────────────────────── */
.quote{background:var(--green-ink);color:#fff}
[data-theme="dark"] .quote{background:var(--panel);border-block:2px solid var(--line)}
.quote .sec-head h2,.quote .sec-head p{color:#fff}
[data-theme="dark"] .quote .sec-head h2{color:var(--ink)}
[data-theme="dark"] .quote .sec-head p{color:var(--ink-2)}
.quote .eyebrow{color:var(--sand)}
.q-side{grid-column:1/5}
.q-side ul{margin-top:24px;display:grid;gap:12px}
.q-side li{font-size:15px;padding-left:24px;position:relative;opacity:.9}
.q-side li::before{content:"→";position:absolute;left:0;color:var(--sand)}
[data-theme="dark"] .q-side li{color:var(--ink-2);opacity:1}
[data-theme="dark"] .q-side li::before{color:var(--green)}
.q-side .q-tel{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:26px;
  color:var(--sand);text-decoration:none;white-space:nowrap}
.q-side .q-tel svg{width:24px;height:24px;flex:none}
[data-theme="dark"] .q-side .q-tel{color:var(--green)}
form.lead{grid-column:6/13;background:var(--paper);border-radius:var(--r);padding:clamp(22px,3vw,34px);color:var(--ink)}
[data-theme="dark"] form.lead{background:var(--paper);border:2px solid var(--line)}
form.lead h3{font-size:24px;margin-bottom:6px}
form.lead .hint{font-size:15px;color:var(--muted);margin-bottom:22px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fields .wide{grid-column:1/-1}
.fields label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink-2)}
.fields input,.fields select,.fields textarea{
  width:100%;padding:12px 14px;border:2px solid var(--line-2);border-radius:var(--r);
  font-family:Karla,sans-serif;font-size:16px;background:var(--panel);color:var(--ink);
}
.fields textarea{resize:vertical;min-height:88px}
.fields input:focus,.fields select:focus,.fields textarea:focus{outline:0;border-color:var(--green)}
form.lead .btn{width:100%;margin-top:20px;padding-block:16px}
form.lead .legal{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}
.sent-msg{display:none;padding:26px 0;text-align:center}
.sent-msg b{font-family:"Bricolage Grotesque",sans-serif;font-size:22px;display:block;margin-bottom:8px}
.sent-msg span{color:var(--ink-2);font-size:15px}
form.lead.sent .fields,form.lead.sent .btn,form.lead.sent .hint,form.lead.sent .legal{display:none}
form.lead.sent .sent-msg{display:block}
@media(max-width:900px){
  .q-side{grid-column:1/13}
  form.lead{grid-column:1/13;margin-top:32px}
}
@media(max-width:520px){.fields{grid-template-columns:1fr}}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{grid-column:1/13;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
details.qa{border-top:1px solid var(--line);padding-block:6px}
details.qa summary{
  cursor:pointer;list-style:none;padding-block:16px;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:18px;display:flex;gap:14px;align-items:flex-start;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";margin-left:auto;color:var(--green);font-size:22px;line-height:1}
details.qa[open] summary::after{content:"–"}
details.qa p{font-size:15.5px;color:var(--ink-2);padding-bottom:18px;max-width:62ch}
@media(max-width:820px){.faq{grid-template-columns:1fr}}

/* ── внутренние страницы ─────────────────────────────────── */
.crumbs{grid-column:1/13;font-size:13px;color:var(--muted);padding-top:22px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--green)}
.page-hero{padding-block:clamp(26px,3.6vw,44px) 0}
.ph-txt{grid-column:1/8}
.ph-txt h1{font-size:clamp(32px,5vw,58px);margin-bottom:18px}
.ph-pic{grid-column:8/13;align-self:center}
.ph-pic img{width:100%;height:clamp(220px,24vw,300px);object-fit:cover;border-radius:var(--r)}
.ph-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media(max-width:900px){.ph-txt,.ph-pic{grid-column:1/13}.ph-pic{margin-top:28px}}

.article{grid-column:1/9}
.article p{margin-bottom:20px;color:var(--ink-2);font-size:17px}
.article h2{font-size:clamp(24px,3vw,34px);margin:38px 0 16px}
.side{grid-column:10/13}
.side-box{background:var(--sand-2);border:2px solid var(--sand);border-radius:var(--r);padding:22px;position:sticky;top:96px}
.side-box h3{font-size:19px;margin-bottom:12px}
.side-box ul{display:grid;gap:9px;margin-bottom:18px}
.side-box li{font-size:14.5px;color:var(--ink-2);padding-left:20px;position:relative}
.side-box li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--green)}
.side-box .btn{width:100%}
.side-box .rate-line{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:30px;margin-bottom:4px}
.side-box .rate-sub{font-size:14px;color:var(--muted);margin-bottom:16px}
@media(max-width:900px){.article,.side{grid-column:1/13}.side{margin-top:36px}.side-box{position:static}}

.other{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.other a{border:2px solid var(--line);border-radius:var(--r);padding:16px 18px;text-decoration:none;
  font-weight:700;font-size:16px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.other a:hover{border-color:var(--green);color:var(--green)}
.other a span{color:var(--muted);font-weight:400;font-size:13px}
@media(max-width:820px){.other{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.other{grid-template-columns:1fr}}

.band{background:var(--sand);color:var(--green-ink)}
[data-theme="dark"] .band{background:var(--panel);color:var(--ink);border-block:2px solid var(--line)}
.band .inner{grid-column:1/13;display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.band h2{font-size:clamp(24px,3.2vw,38px);max-width:22ch}
.band p{margin-top:8px;font-size:16px;opacity:.85;max-width:46ch}
.band .acts{display:flex;flex-wrap:wrap;gap:12px}

/* простой текст (privacy / 404) */
.doc{grid-column:1/9;padding-block:clamp(34px,5vw,60px)}
.doc h1{font-size:clamp(30px,4.4vw,48px);margin-bottom:10px}
.doc .upd{color:var(--muted);font-size:14px;margin-bottom:32px}
.doc h2{font-size:22px;margin:30px 0 12px}
.doc p,.doc li{color:var(--ink-2);margin-bottom:14px}
.doc ul{padding-left:20px;list-style:disc}
.doc a{color:var(--green)}
.nf{grid-column:1/13;text-align:center;padding-block:clamp(60px,10vw,120px)}
.nf .code{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(76px,16vw,180px);
  line-height:.9;color:var(--sand);-webkit-text-stroke:2px var(--green)}
[data-theme="dark"] .nf .code{color:transparent}
.nf h1{font-size:clamp(26px,4vw,40px);margin:18px 0 12px}
.nf p{color:var(--ink-2);max-width:52ch;margin:0 auto 26px}
.nf .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── подвал ──────────────────────────────────────────────── */
footer{background:var(--green-ink);color:#fff;padding-block:clamp(46px,6vw,70px) 0}
[data-theme="dark"] footer{background:var(--panel);border-top:2px solid var(--line);color:var(--ink)}
.f-cols{grid-column:1/13;display:grid;grid-template-columns:2.2fr 1fr 1fr 1.4fr;gap:34px}
.f-brand{display:flex;align-items:center;gap:11px;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:21px;text-decoration:none;margin-bottom:14px}
.f-brand img{width:38px;height:38px;border-radius:var(--r)}
.f-cols p{font-size:15px;opacity:.78;line-height:1.55;max-width:38ch}
.f-cols h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:14px}
[data-theme="dark"] .f-cols h4{color:var(--green)}
.f-cols li{margin-bottom:9px}
.f-cols a{font-size:15px;text-decoration:none;opacity:.82}
.f-cols a:hover{opacity:1;color:var(--sand)}
[data-theme="dark"] .f-cols a:hover{color:var(--green)}
.f-tel{display:inline-flex;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:24px;text-decoration:none;margin-bottom:10px}
.f-bot{grid-column:1/13;margin-top:40px;border-top:1px solid rgba(255,255,255,.18);
  padding-block:20px 22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:13.5px;opacity:.7}
[data-theme="dark"] .f-bot{border-color:var(--line);opacity:.8}
.f-bot a{text-decoration:none}
@media(max-width:900px){.f-cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-cols{grid-template-columns:1fr}}

/* ── мобильное нижнее меню ───────────────────────────────── */
.mbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--paper);border-top:2px solid var(--ink);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.mbar .in{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mbar a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;
  font-size:11px;font-weight:700;color:var(--ink-2);padding:6px 2px;border-radius:var(--r)}
.mbar a svg{width:20px;height:20px}
.mbar a.on{color:var(--green);background:var(--sand-2)}
@media(max-width:760px){
  .mbar{display:block}
  body{padding-bottom:78px}
}

/* пузырь чата поднят над нижним меню */
.woot-widget-bubble{bottom:100px!important}
.woot-widget-holder{bottom:170px!important}
