/* ENCOM — итоговая дизайн-система на базе Concept B «Картотека»
   Чёрно-красно-светлая версия. Светлый фон остаётся основой; красный — акцент,
   чёрный — типографика/структура. Токены переиспользуются всеми страницами. */
:root{
  /* surfaces */
  --paper:#F4F2EE;       /* базовый светлый фон сайта (как в Concept B) */
  --paper-2:#E9E6DE;     /* второй, чуть темнее светлый слой (картотека/каталог) */
  --milk:#FFFFFF;        /* карточки/поверхности поверх фона */
  --ink:#111111;         /* чёрный — типографика, навигация, границы, контролы */
  --ink-2:#1B1B1B;       /* тёмная поверхность (футер, лидер-блок) */
  --muted:#686C66;
  --dim:#8A8D86;
  --hair:#D8D5CC;        /* тонкие границы на светлом */
  --hair-dark:rgba(255,255,255,.16);

  /* brand red — из логотипа ENCOM_Logos_Pack */
  --red:#DE3438;
  --red-dark:#B22226;
  --red-tint:#FBE7E7;

  --ease:cubic-bezier(.19,1,.22,1);
  --radius-s:4px;
  --radius-m:10px;
  --radius-l:20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--paper);color:var(--ink);font-family:'Geist',system-ui,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{overflow-x:hidden;width:100%;max-width:100%}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:1500px;margin:0 auto;padding:0 44px}

h1,h2,h3{font-family:'Unbounded',sans-serif}
h1{font-weight:200;font-size:clamp(36px,6.2vw,92px);letter-spacing:-.05em;line-height:1.02}
h2{font-weight:200;font-size:clamp(26px,3.7vw,52px);letter-spacing:-.045em;line-height:1.08}
h3{font-weight:300;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.03em;line-height:1.22}
.lab{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
p{color:#3C4038;max-width:60ch}
.muted{color:var(--muted)}
.accent{color:var(--red)}

.link-u{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid #AAA79F;transition:border-color .4s var(--ease),color .3s}
.link-u:hover{border-color:var(--red);color:var(--red)}
.link-u i{font-style:normal;transition:transform .4s var(--ease)}
.link-u:hover i{transform:translate(4px,-4px)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink);transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

section{padding:120px 0;position:relative}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:40px;padding-bottom:24px;border-bottom:1px solid var(--hair);margin-bottom:56px}

.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}

.pill{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;border:1px solid var(--hair);border-radius:999px;color:var(--muted)}
.pill.is-red{border-color:var(--red);color:var(--red)}

@media(max-width:640px){
  .wrap{padding:0 20px}
  section{padding:72px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}