/* СКЛАДИС — единый стиль. Мотив: разметка складского пола и сетка боксов. */

:root{
  --ink:#16242B;
  --ink-2:#4B5A61;
  --ink-3:#7B8A90;
  --bg:#F1F3F2;
  --surface:#FFFFFF;
  --line:#D2D9D8;
  --line-strong:#A9B5B4;
  --mark:#F5B301;
  --mark-deep:#B98600;
  --deep:#1F6F5C;

  --sp:1rem;
  --wrap:68rem;
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  font-feature-settings:"tnum" 0;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--mark-deep)}

:focus-visible{outline:3px solid var(--mark-deep);outline-offset:2px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}

/* ---------- шапка ---------- */

.top{
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.top__in{
  display:flex;align-items:center;gap:1.5rem;
  padding:.9rem 0;flex-wrap:wrap;
}
.brand{display:flex;align-items:baseline;gap:.75rem;text-decoration:none}
.brand__name{
  font-size:1.375rem;font-weight:700;letter-spacing:.06em;
}
.brand__desc{
  font-size:.8125rem;color:var(--ink-2);line-height:1.35;max-width:22ch;
}
.top nav{margin-left:auto;display:flex;gap:1.25rem;flex-wrap:wrap}
.top nav a{font-size:.9375rem;text-decoration:none;color:var(--ink-2)}
.top nav a:hover{color:var(--ink);text-decoration:underline}

/* разметочная полоса — мотив пола склада */
.stripe{
  height:6px;
  background:repeating-linear-gradient(
    135deg,var(--mark) 0 14px,#16242B00 14px 28px),
    var(--bg);
  border-bottom:1px solid var(--line);
}

/* ---------- герой ---------- */

.hero{padding:3.5rem 0 3rem}
.hero__grid{display:grid;gap:2.5rem}
@media(min-width:56rem){
  .hero__grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:3.5rem}
}

h1{
  font-size:clamp(2rem,5.2vw,3.25rem);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:700;
  margin:0 0 1rem;
  text-wrap:balance;
}
.lede{font-size:1.125rem;color:var(--ink-2);margin:0 0 1.5rem;max-width:44ch}

.status{
  display:inline-block;border:1px solid var(--line-strong);
  background:var(--surface);
  padding:.55rem .85rem;font-size:.875rem;color:var(--ink-2);
  border-left:4px solid var(--mark);
}

/* сетка боксов — план этажа */
.floor{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:4.25rem;
  gap:4px;
  background:var(--line);
  border:1px solid var(--line-strong);
  padding:4px;
}
.cell{
  background:var(--surface);
  display:flex;flex-direction:column;justify-content:center;
  padding:.5rem .65rem;
}
.cell b{font-size:1.25rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cell span{font-size:.75rem;color:var(--ink-3);line-height:1.25;margin-top:.3rem}
.cell--mark{background:var(--mark)}
.cell--mark span{color:#5C4600}
.cell--corridor{
  background:var(--bg);
  border:none;
}
.c2{grid-column:span 2}
.c3{grid-column:span 3}
.c4{grid-column:span 4}
.c6{grid-column:span 6}
.r2{grid-row:span 2}
.floor__note{font-size:.8125rem;color:var(--ink-3);margin-top:.75rem}

/* ---------- секции ---------- */

section{padding:3rem 0}
section + section{border-top:1px solid var(--line)}

h2{
  font-size:clamp(1.375rem,3vw,1.875rem);
  line-height:1.2;letter-spacing:-.01em;margin:0 0 1rem;font-weight:700;
}
h3{font-size:1.125rem;margin:2rem 0 .5rem;font-weight:700}
p{margin:0 0 1rem;max-width:70ch}
ul,ol{max-width:70ch;padding-left:1.25rem}
li{margin-bottom:.45rem}

.cols{display:grid;gap:2rem}
@media(min-width:48rem){.cols{grid-template-columns:repeat(3,1fr)}}
.cols h3{margin-top:0}
.cols p{font-size:.9375rem;color:var(--ink-2)}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:1.5rem;
}

/* кнопка — сигнальная разметка */
.btn{
  display:inline-block;
  background:var(--mark);
  color:var(--ink);
  border:1px solid var(--mark-deep);
  padding:.7rem 1.25rem;
  font-weight:600;font-size:1rem;
  text-decoration:none;
}
.btn:hover{background:#FFC526}
.btn--ghost{background:transparent;border-color:var(--line-strong);font-weight:500}
.btn--ghost:hover{background:var(--surface)}

.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}

/* таблица */
table{border-collapse:collapse;width:100%;font-size:.9375rem;margin:1.25rem 0}
th,td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;background:var(--surface);border-bottom:2px solid var(--line-strong)}
td:first-child{font-variant-numeric:tabular-nums;white-space:nowrap}

/* статья */
.article{padding:2.5rem 0 3rem;max-width:44rem}
.article h1{font-size:clamp(1.75rem,4.2vw,2.5rem);margin-bottom:1rem}
.article .lede{font-size:1.0625rem}
.crumbs{font-size:.8125rem;color:var(--ink-3);margin:0 0 1.25rem}
.crumbs a{color:var(--ink-3)}

.callout{
  border-left:4px solid var(--deep);
  background:var(--surface);
  padding:1rem 1.25rem;margin:1.5rem 0;
}
.callout p:last-child{margin-bottom:0}

.faq dt{font-weight:600;margin-top:1.25rem}
.faq dd{margin:.35rem 0 0;color:var(--ink-2)}

/* ---------- подвал ---------- */

.foot{
  border-top:1px solid var(--line);
  background:var(--surface);
  padding:2.5rem 0;font-size:.9375rem;color:var(--ink-2);
}
.foot__grid{display:grid;gap:1.75rem}
@media(min-width:48rem){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h4{font-size:.9375rem;margin:0 0 .6rem;font-weight:600;color:var(--ink)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.4rem}
.foot a{color:var(--ink-2)}
.foot__legal{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-3)}

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