/* ==========================================================================
   7k3453.fun — шаблон loom, namespace .lm*, hue 223 + триада 343
   Основа/уток/раппорт перекрашены в синий с малиновым утком.
   ========================================================================== */

:root{
  --lm-h:223;
  --lm-h2:343;

  --lm-bg:hsl(223 32% 8%);
  --lm-bg2:hsl(223 30% 11%);
  --lm-panel:hsl(223 26% 15%);
  --lm-panel2:hsl(223 24% 19%);
  --lm-line:hsl(223 18% 33%);
  --lm-ink:hsl(223 20% 95%);
  --lm-mut:hsl(223 14% 76%);
  --lm-acc:hsl(223 85% 74%);
  --lm-acc-d:hsl(223 62% 44%);
  --lm-acc2:hsl(343 80% 74%);
  --lm-acc2-d:hsl(343 40% 30%);

  /* нити переплетения: цвет и alpha меняются только парой */
  --lm-warp:hsl(223 45% 44% / .5);
  --lm-weft:hsl(343 42% 48% / .3);
  --lm-knot:hsl(223 52% 60% / .18);

  --lm-fd:"Ubuntu Sans",system-ui,"Segoe UI",Arial,sans-serif;
  --lm-fb:"Jost",system-ui,"Segoe UI",Arial,sans-serif;

  --lm-rad:3px;
  --lm-gut:clamp(14px,3vw,30px);
  --lm-max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--lm-bg);
  color:var(--lm-ink);
  font-family:var(--lm-fb);
  font-size:17px;
  line-height:1.68;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto}
a{color:var(--lm-acc2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- основа: вертикальные нити через всю страницу ---------- */
.lmwarp{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--lm-warp) 0 1px,transparent 1px 15px),
    repeating-linear-gradient(90deg,transparent 0 89px,var(--lm-knot) 89px 91px);
  opacity:.8;
}

/* ---------- поля с катушками-бобинами ---------- */
.lmrail{
  position:fixed;top:0;bottom:0;width:52px;z-index:1;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-around;align-items:center;
  color:var(--lm-acc);
  background:linear-gradient(180deg,transparent,hsl(223 40% 6% / .55),transparent);
}
.lmrail--l{left:0}
.lmrail--r{right:0;color:var(--lm-acc2)}
.lmbob{width:26px;height:54px;opacity:.5;display:block}
.lmbob__core{fill:none;stroke:currentColor;stroke-width:2}
.lmbob__cap{fill:currentColor;opacity:.75}
.lmbob__wind{stroke:currentColor;stroke-width:1.4;opacity:.65}

/* ---------- полотно ---------- */
.lmloom{position:relative;z-index:2}
.lmshell{max-width:var(--lm-max);margin:0 auto;padding:0 var(--lm-gut)}

/* ---------- шапка ---------- */
.lmhead{
  position:relative;
  border-bottom:1px solid var(--lm-line);
  background:linear-gradient(180deg,hsl(223 34% 9% / .96),hsl(223 34% 6% / .92));
  backdrop-filter:blur(3px);
}
.lmhead__in{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0;
}
.lmloom .lmmark{
  display:flex;align-items:center;gap:11px;min-width:0;min-height:44px;
  color:var(--lm-ink);text-decoration:none;
}
.lmloom .lmmark:hover{text-decoration:none;color:var(--lm-acc)}
.lmmark__sh{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--lm-acc-d);border-radius:var(--lm-rad);
  background:
    repeating-linear-gradient(90deg,hsl(223 60% 58% / .5) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(0deg,hsl(343 58% 52% / .45) 0 2px,transparent 2px 6px),
    var(--lm-panel);
}
.lmmark__t{font-family:var(--lm-fd);font-weight:800;font-size:19px;letter-spacing:.02em;line-height:1.1}
.lmmark__s{display:block;font-family:var(--lm-fb);font-weight:400;font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lm-mut)}
.lmnav{display:flex;gap:4px 16px;flex-wrap:wrap;margin-left:auto}
.lmloom .lmnav a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--lm-mut);font-size:14.5px;padding:6px 2px;border-bottom:1px solid transparent;
}
.lmloom .lmnav a:hover{color:var(--lm-ink);border-bottom-color:var(--lm-acc);text-decoration:none}

/* ---------- полосы переплетения ---------- */
.lmband{position:relative;padding:44px 0 40px;border-bottom:1px solid var(--lm-line)}
.lmband::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,var(--lm-weft) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(0deg,var(--lm-knot) 0 2px,transparent 2px 60px);
  opacity:.9;
}
.lmband:nth-of-type(2n){background:hsl(223 36% 6% / .72)}
.lmband:nth-of-type(2n)::before{
  background:repeating-linear-gradient(0deg,var(--lm-weft) 0 1px,transparent 1px 18px);
}
.lmband:nth-of-type(3n)::before{
  background:
    repeating-linear-gradient(0deg,var(--lm-weft) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(90deg,hsl(223 45% 48% / .16) 0 1px,transparent 1px 44px);
}

/* разделитель-раппорт: саржевая диагональ */
.lmrapport{
  height:14px;border:0;margin:0;
  background:
    repeating-linear-gradient(45deg,
      var(--lm-acc-d) 0 3px,
      transparent 3px 8px,
      var(--lm-acc2-d) 8px 11px,
      transparent 11px 16px);
  opacity:.75;
}

/* ---------- заголовки ---------- */
.lmh{
  font-family:var(--lm-fd);font-weight:800;line-height:1.16;
  margin:0 0 14px;letter-spacing:-.005em;
}
h1.lmh{font-size:clamp(27px,4.6vw,45px)}
h2.lmh{font-size:clamp(21px,2.9vw,31px);padding-left:16px;position:relative}
h2.lmh::before{
  content:"";position:absolute;left:0;top:.22em;bottom:.18em;width:5px;
  background:linear-gradient(180deg,var(--lm-acc),var(--lm-acc2));
}
h3.lmh{font-size:clamp(17.5px,2vw,21px);font-weight:600;margin-top:6px;color:var(--lm-ink)}
h4.lmh{font-size:16px;font-weight:600;margin:0 0 6px;font-family:var(--lm-fd)}
.lmkick{
  font-family:var(--lm-fd);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--lm-acc2);margin:0 0 12px;
}
p{margin:0 0 14px}
.lmlead{font-size:clamp(17px,1.9vw,20px);color:var(--lm-ink);max-width:62ch}
.lmmut{color:var(--lm-mut)}
.lmem{color:var(--lm-acc);font-weight:400}
.lmem2{color:var(--lm-acc2)}
.lmnum{font-family:var(--lm-fd);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- герой ---------- */
.lmhero{padding:38px 0 34px}
.lmhero__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:26px;align-items:start}
.lmhero__card{
  border:1px solid var(--lm-line);border-radius:var(--lm-rad);
  background:
    repeating-linear-gradient(90deg,hsl(223 45% 50% / .13) 0 1px,transparent 1px 9px),
    var(--lm-panel);
  padding:18px;min-width:0;
}
.lmhero__card dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.lmhero__card dt{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--lm-mut)}
.lmhero__card dd{margin:0 0 8px;font-family:var(--lm-fd);font-size:17px;font-weight:600}

/* ---------- CTA ----------
   Цвет текста кнопок задан через .lmloom .lmbtn — иначе a{color:…} перебивает
   правило по специфичности и надпись сливается с подложкой. */
.lmcta{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 24px}
.lmbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:12px 26px;border-radius:var(--lm-rad);
  font-family:var(--lm-fd);font-size:16.5px;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;text-align:center;
}
.lmloom .lmbtn--w{
  color:#fff;
  background:linear-gradient(160deg,hsl(223 68% 46%),hsl(223 76% 33%));
  border-color:hsl(223 62% 62%);
  box-shadow:0 0 0 1px hsl(223 40% 16%),0 10px 26px hsl(223 45% 5% / .8);
}
.lmloom .lmbtn--w:hover{filter:brightness(1.12);text-decoration:none;color:#fff}
.lmloom .lmbtn--g{color:var(--lm-ink);border-color:var(--lm-line);background:var(--lm-panel)}
.lmloom .lmbtn--g:hover{border-color:var(--lm-acc2);text-decoration:none;color:var(--lm-ink)}

/* ---------- KPI-лента ---------- */
.lmkpi{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;
}
.lmkpi li{
  min-width:0;padding:12px 14px;border:1px solid var(--lm-line);border-radius:var(--lm-rad);
  background:linear-gradient(180deg,var(--lm-panel2),var(--lm-panel));
}
.lmkpi .lmkpi__v{
  display:block;font-family:var(--lm-fd);font-weight:800;font-size:22px;color:var(--lm-acc);
  font-variant-numeric:tabular-nums;
}
.lmkpi span{display:block;font-size:13px;color:var(--lm-mut);line-height:1.35}

/* ---------- сетки ---------- */
.lmgrid{display:grid;gap:14px}
.lmgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lmgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lmgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lmcard{
  min-width:0;padding:16px;border:1px solid var(--lm-line);border-radius:var(--lm-rad);
  background:var(--lm-panel);
}
.lmcard--thread{
  border-left:4px solid var(--lm-acc-d);
  background:
    repeating-linear-gradient(0deg,hsl(343 52% 46% / .12) 0 1px,transparent 1px 10px),
    var(--lm-panel);
}
.lmcard p{font-size:15.5px;color:var(--lm-mut)}
.lmcard p:last-child{margin-bottom:0}

/* ---------- таблицы ---------- */
.lmscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;min-width:0}
table.lmtab{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
table.lmtab caption{
  caption-side:top;text-align:left;font-family:var(--lm-fd);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lm-mut);padding:0 0 8px;
}
table.lmtab th,table.lmtab td{
  border:1px solid var(--lm-line);padding:9px 12px;text-align:left;vertical-align:top;
}
table.lmtab thead th{
  background:linear-gradient(180deg,var(--lm-acc2-d),hsl(343 34% 16%));
  color:var(--lm-ink);font-family:var(--lm-fd);font-weight:600;font-size:14px;
  letter-spacing:.04em;
}
table.lmtab tbody tr:nth-child(2n){background:hsl(223 34% 10% / .8)}
table.lmtab td .lmnum{color:var(--lm-acc)}

/* ---------- ступени лояльности ---------- */
.lmtiers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;list-style:none;margin:0 0 16px;padding:0}
.lmtiers li{
  min-width:0;text-align:center;padding:12px 8px;border:1px solid var(--lm-line);
  border-radius:var(--lm-rad);background:var(--lm-panel);
}
.lmtiers li:nth-child(2n){background:var(--lm-panel2)}
.lmtiers .lmtiers__n{display:block;font-family:var(--lm-fd);font-weight:800;font-size:15px}
.lmtiers .lmtiers__c{display:block;font-size:13px;color:var(--lm-acc);font-variant-numeric:tabular-nums}
.lmtiers .lmtiers__r{display:block;font-size:12px;color:var(--lm-mut)}

/* ---------- отзывы ---------- */
.lmrev{
  min-width:0;margin:0;padding:16px;border:1px solid var(--lm-line);border-radius:var(--lm-rad);
  background:
    repeating-linear-gradient(90deg,hsl(223 45% 50% / .1) 0 1px,transparent 1px 7px),
    var(--lm-panel);
}
.lmrev__h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.lmrev__n{font-family:var(--lm-fd);font-weight:600}
.lmrev__c{font-size:13px;color:var(--lm-acc2);letter-spacing:.06em}
.lmrev__d{font-size:12.5px;color:var(--lm-mut);margin-left:auto}
.lmrev blockquote{margin:0}
.lmrev p{margin:0;font-size:15.5px}

/* ---------- FAQ ---------- */
.lmfaq{border-top:1px solid var(--lm-line)}
.lmfaq details{border-bottom:1px solid var(--lm-line);padding:2px 0}
.lmfaq summary{
  cursor:pointer;list-style:none;padding:13px 34px 13px 2px;position:relative;
  font-family:var(--lm-fd);font-weight:600;font-size:16.5px;min-height:44px;
}
.lmfaq summary::-webkit-details-marker{display:none}
.lmfaq summary::after{
  content:"";position:absolute;right:8px;top:22px;width:12px;height:2px;
  background:var(--lm-acc);box-shadow:5px -5px 0 0 var(--lm-acc),5px 5px 0 0 var(--lm-acc);
  transform:none;
}
.lmfaq details[open] summary::after{background:var(--lm-acc2);box-shadow:5px 0 0 0 var(--lm-acc2),-5px 0 0 0 var(--lm-acc2)}
.lmfaq details p{margin:0 0 14px;padding-right:8px;color:var(--lm-mut)}

/* ---------- заметка автора ---------- */
.lmnote{
  border:1px solid var(--lm-line);border-left:5px solid var(--lm-acc2);
  border-radius:var(--lm-rad);padding:18px;background:var(--lm-bg2);
}
.lmnote__who{font-size:14px;color:var(--lm-mut);margin:0}

/* ---------- подвал ---------- */
.lmfoot{
  padding:28px 0 40px;border-top:2px solid var(--lm-acc-d);
  background:hsl(223 38% 5%);font-size:14.5px;color:var(--lm-mut);
}
.lmfoot__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lmfoot h4{color:var(--lm-ink)}
.lmage{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:2px solid var(--lm-acc);border-radius:50%;
  font-family:var(--lm-fd);font-weight:800;font-size:14px;color:var(--lm-acc);flex:none;
}
.lmfoot__bot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--lm-line)}
.lmfoot__bot span:last-child{flex:1 1 320px;min-width:0}

/* ---------- адаптив: полотно схлопывается в колонку ---------- */
@media (max-width:1120px){
  .lmrail{display:none}
}
@media (max-width:900px){
  .lmhero__grid{grid-template-columns:minmax(0,1fr)}
  .lmgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lmgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lmkpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lmtiers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lmfoot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .lmband{padding:32px 0 28px}
  .lmhero{padding:24px 0 26px}
  .lmgrid--2,.lmgrid--3,.lmgrid--4{grid-template-columns:minmax(0,1fr)}
  .lmtiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lmfoot__grid{grid-template-columns:minmax(0,1fr)}
  .lmnav{width:100%;margin-left:0;gap:2px 12px}
  /* тач-цели: ссылки шапки и марка держат 44px и на узком экране */
  .lmloom .lmnav a{font-size:13.5px;min-height:44px;padding:8px 2px}
  .lmloom .lmmark{min-height:44px}
  .lmbtn{width:100%}
  h2.lmh{padding-left:12px}
  .lmwarp{background:repeating-linear-gradient(90deg,var(--lm-warp) 0 1px,transparent 1px 19px)}
}