/* ===========================================================
   7k249.team — концепт «Метрополитен»
   Префикс классов: .trellis-
   Заголовки — Rubik 700, текст — Literata
   =========================================================== */

:root{
  --tr-bg:#101013;
  --tr-surf:#191920;
  --tr-line:#26262e;
  --tr-acc:#ded3c4;
  --tr-acc2:#4fb87a;
  --tr-tx:#ecebe6;
  --tr-mut:#97969e;
  --tr-rad:3px;
  --tr-max:1220px;
  --tr-gap:clamp(14px,2vw,24px);
}

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

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--tr-bg);
  color:var(--tr-tx);
  font-family:'Literata',Georgia,serif;
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  background-image:
    repeating-linear-gradient(90deg,rgba(222,211,196,.028) 0 1px,transparent 1px 84px);
}

/* --- Явный заголовочный шрифт: Rubik не должен попадать в body-цепочку --- */
h1,h2,h3,h4,
.trellis-logo__t,.trellis-kpi__n,.trellis-step__n,.trellis-fact span,
.trellis-over,.trellis-cta,.trellis-chip,.trellis-foot__brand,
.trellis-faq summary,.trellis-tbl th,.trellis-quote__a,.trellis-slot__p,.trellis-lv__s,
.trellis-final__h{
  font-family:'Rubik','Trebuchet MS',sans-serif;
}

h1,h2,h3,h4{font-weight:700;letter-spacing:-.012em;margin:0 0 .55em;}
h1{font-size:clamp(27px,3.5vw,42px);line-height:1.16;}
h2{font-size:clamp(22px,2.5vw,31px);line-height:1.2;}
h3{font-size:clamp(17px,1.5vw,20px);line-height:1.28;}
p{margin:0 0 1.05em;}
a{color:var(--tr-acc);}

.trellis-skip{
  position:absolute;left:-9999px;top:0;background:var(--tr-acc);color:#101013;
  padding:10px 16px;z-index:99;
}
.trellis-skip:focus{left:8px;top:8px;}

/* ============================ ШАПКА ============================ */
.trellis-bar{
  display:flex;align-items:center;gap:var(--tr-gap);
  max-width:var(--tr-max);margin:0 auto;padding:16px clamp(14px,3vw,28px);
  border-bottom:1px solid var(--tr-line);
  flex-wrap:wrap;
}
.trellis-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tr-tx);}
.trellis-logo__svg{width:40px;height:40px;flex:none;}
.trellis-logo__t{display:flex;flex-direction:column;font-weight:700;font-size:19px;letter-spacing:.02em;}
.trellis-logo__sub{font-size:11.5px;font-weight:500;color:var(--tr-mut);letter-spacing:.05em;text-transform:uppercase;}
.trellis-nav{display:flex;gap:clamp(10px,1.6vw,22px);margin-left:auto;flex-wrap:wrap;}
.trellis-nav a{
  color:var(--tr-mut);text-decoration:none;font-family:'Rubik',sans-serif;font-size:14px;font-weight:500;
  padding-bottom:3px;border-bottom:2px solid transparent;
}
.trellis-nav a:hover{color:var(--tr-tx);border-bottom-color:var(--tr-acc2);}

/* ============================ КНОПКИ ============================ */
.trellis-cta{
  display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:var(--tr-rad);
  background:var(--tr-acc);color:#101013;
  border:1px solid var(--tr-acc);
  box-shadow:inset 0 -3px 0 rgba(16,16,19,.18);
  transition:transform .12s ease,background .12s ease;
}
.trellis-cta:hover{background:#efe7dc;transform:translateY(-1px);}
.trellis-cta--lg{padding:16px 30px;font-size:17px;}
.trellis-cta--sm{padding:10px 16px;font-size:13.5px;}
.trellis-cta--tiny{padding:8px 13px;font-size:12.5px;background:var(--tr-acc2);border-color:var(--tr-acc2);color:#0d1b12;}
.trellis-cta--tiny:hover{background:#63c98c;}
.trellis-cta--ghost{
  background:transparent;color:var(--tr-tx);border:1px solid var(--tr-line);box-shadow:none;
}
.trellis-cta--ghost:hover{background:var(--tr-surf);border-color:var(--tr-acc2);}

/* ============================ HERO (split) ============================ */
.trellis-hero{
  max-width:var(--tr-max);margin:0 auto;padding:clamp(30px,5vw,64px) clamp(14px,3vw,28px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,52px);align-items:center;
}
.trellis-hero__left{
  border-left:4px solid var(--tr-acc);
  padding-left:clamp(16px,2.4vw,30px);
}
.trellis-chip{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tr-acc2);border:1px solid var(--tr-line);background:var(--tr-surf);
  padding:6px 12px;border-radius:var(--tr-rad);margin-bottom:16px;
}
.trellis-hero__sub{color:#cfcdc6;font-size:16.5px;}
.trellis-hero__btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.trellis-hero__fig{
  margin:0;padding-left:clamp(16px,2.4vw,34px);
  border-left:1px solid var(--tr-line);
}
.trellis-hero__fig svg{width:100%;height:auto;display:block;}
.trellis-hero__fig figcaption{
  margin-top:12px;color:var(--tr-mut);font-size:13.5px;line-height:1.5;
}

/* ============================ KPI ============================ */
.trellis-kpi{
  max-width:var(--tr-max);margin:0 auto;padding:0 clamp(14px,3vw,28px) clamp(24px,4vw,44px);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;
  background:transparent;
}
.trellis-kpi__c{
  background:var(--tr-surf);border-top:3px solid var(--tr-acc2);
  padding:16px 14px;display:flex;flex-direction:column;gap:4px;
}
.trellis-kpi__n{font-size:22px;font-weight:700;color:var(--tr-tx);line-height:1.1;}
.trellis-kpi__l{font-size:12.5px;color:var(--tr-mut);line-height:1.35;}

/* ============================ СЕКЦИИ ============================ */
.trellis-sec{
  max-width:var(--tr-max);margin:0 auto;padding:clamp(34px,5vw,66px) clamp(14px,3vw,28px);
  border-top:1px solid var(--tr-line);
}
.trellis-sec--alt{background:linear-gradient(180deg,rgba(25,25,32,.9),rgba(16,16,19,0));}
.trellis-over{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tr-acc2);margin:0 0 10px;
}
.trellis-over::before{content:"— ";color:var(--tr-mut);}
.trellis-lead{font-size:17px;color:#d8d6ce;max-width:78ch;}

/* --- Шаги --- */
.trellis-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tr-gap);margin:26px 0;}
.trellis-step{
  background:var(--tr-surf);border:1px solid var(--tr-line);border-top:3px solid var(--tr-acc);
  border-radius:var(--tr-rad);padding:20px;
}
.trellis-step__n{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--tr-acc2);margin-bottom:8px;
}
.trellis-step p{margin:0;font-size:15px;color:#cfcdc6;}

/* --- Карточки 3 в ряд --- */
.trellis-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tr-gap);margin:26px 0;}
.trellis-card{
  background:var(--tr-surf);border:1px solid var(--tr-line);border-left:3px solid var(--tr-acc2);
  border-radius:var(--tr-rad);padding:20px;
}
.trellis-card p{margin:0;font-size:15px;color:#cfcdc6;}

/* --- Таблицы --- */
.trellis-tbl{overflow-x:auto;margin:24px 0;border:1px solid var(--tr-line);border-radius:var(--tr-rad);}
.trellis-tbl table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px;}
.trellis-tbl caption{
  text-align:left;padding:14px 16px;color:var(--tr-mut);font-size:13px;letter-spacing:.04em;
  border-bottom:1px solid var(--tr-line);
}
.trellis-tbl th{
  text-align:left;padding:12px 16px;font-size:13px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tr-acc);background:rgba(222,211,196,.05);
}
.trellis-tbl td{padding:12px 16px;border-top:1px solid var(--tr-line);color:#d5d3cc;vertical-align:top;}
.trellis-tbl tbody tr:nth-child(odd) td{background:rgba(25,25,32,.55);}
.trellis-tbl td:first-child{color:var(--tr-tx);font-weight:500;}

/* --- Плитки-факты --- */
.trellis-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:24px 0;}
.trellis-fact{
  background:var(--tr-surf);padding:15px 13px;font-size:12.5px;color:var(--tr-mut);
  display:flex;flex-direction:column;gap:5px;border-bottom:3px solid var(--tr-line);
}
.trellis-fact span{font-size:19px;font-weight:700;color:var(--tr-acc);line-height:1.1;}

/* --- Каталог --- */
.trellis-cat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tr-gap);margin:26px 0;}
.trellis-slot{
  background:var(--tr-surf);border:1px solid var(--tr-line);border-radius:var(--tr-rad);
  padding:18px;display:flex;flex-direction:column;gap:6px;
  position:relative;
}
.trellis-slot::before{
  content:"";position:absolute;left:0;top:18px;width:3px;height:26px;background:var(--tr-acc2);
}
.trellis-slot h3{margin:0 0 2px;padding-left:10px;}
.trellis-slot__p{
  margin:0;padding-left:10px;font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tr-mut);
}
.trellis-slot p:not(.trellis-slot__p){margin:0;font-size:14.5px;color:#cfcdc6;padding-left:10px;}
.trellis-slot .trellis-cta{align-self:flex-start;margin:8px 0 0 10px;}

/* --- Живой зал --- */
.trellis-live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tr-gap);margin:26px 0;}
.trellis-lv{
  background:var(--tr-surf);border:1px solid var(--tr-line);border-radius:var(--tr-rad);padding:18px;
  border-bottom:3px solid var(--tr-acc);
}
.trellis-lv h3{margin:0 0 2px;}
.trellis-lv__s{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tr-acc2);}
.trellis-lv p:not(.trellis-lv__s){margin:0;font-size:14.5px;color:#cfcdc6;}

/* --- Блок ответственной игры --- */
.trellis-guard{
  margin-top:26px;padding:22px clamp(16px,2.4vw,28px);
  background:var(--tr-surf);border:1px solid var(--tr-line);border-left:4px solid var(--tr-acc);
  border-radius:var(--tr-rad);
}
.trellis-guard h3{margin-top:0;}
.trellis-guard p{color:#cfcdc6;font-size:15.5px;}
.trellis-guard p:last-child{margin-bottom:0;}

/* --- Отзывы --- */
.trellis-rev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tr-gap);margin-top:26px;}
.trellis-quote{
  background:var(--tr-surf);border:1px solid var(--tr-line);border-radius:var(--tr-rad);padding:20px;
}
.trellis-quote__st{margin:0 0 10px;color:var(--tr-acc);letter-spacing:.16em;font-size:14px;}
.trellis-quote__off{color:var(--tr-line);}
.trellis-quote p{font-size:15px;color:#cfcdc6;}
.trellis-quote__m{
  display:flex;align-items:center;gap:10px;margin:0;font-size:13px;color:var(--tr-mut);
  border-top:1px solid var(--tr-line);padding-top:12px;
}
.trellis-quote__a{
  width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--tr-acc2);color:#0d1b12;font-weight:700;font-size:14px;
}

/* --- FAQ --- */
.trellis-faq{margin-top:24px;border-top:1px solid var(--tr-line);}
.trellis-faq details{border-bottom:1px solid var(--tr-line);}
.trellis-faq summary{
  cursor:pointer;list-style:none;padding:16px 40px 16px 0;position:relative;
  font-size:16px;font-weight:600;color:var(--tr-tx);
}
.trellis-faq summary::-webkit-details-marker{display:none;}
.trellis-faq summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--tr-acc2);border-bottom:2px solid var(--tr-acc2);
  transform:translateY(-70%) rotate(45deg);transition:transform .16s ease;
}
.trellis-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg);}
.trellis-faq summary:hover{color:var(--tr-acc);}
.trellis-faq details p{margin:0 0 18px;font-size:15.5px;color:#cfcdc6;max-width:88ch;}

/* --- Заметка автора --- */
.trellis-note p{color:#cfcdc6;font-size:15.5px;max-width:92ch;}

/* --- Пре-футер --- */
.trellis-final{
  max-width:var(--tr-max);margin:0 auto;padding:clamp(34px,5vw,60px) clamp(14px,3vw,28px);
  border-top:1px solid var(--tr-line);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);
  align-items:center;
}
.trellis-final__h{
  grid-column:1/-1;max-width:26ch;border-left:4px solid var(--tr-acc2);padding-left:18px;
  font-size:clamp(22px,2.5vw,31px);font-weight:700;line-height:1.2;letter-spacing:-.012em;
  color:var(--tr-tx);margin:0 0 .3em;
}
.trellis-final p{margin:0;color:#cfcdc6;}
.trellis-final__btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}

/* --- Футер --- */
.trellis-foot{
  border-top:1px solid var(--tr-line);background:var(--tr-surf);
}
.trellis-foot__row{
  max-width:var(--tr-max);margin:0 auto;padding:clamp(26px,4vw,44px) clamp(14px,3vw,28px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);
}
.trellis-foot__brand{
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tr-acc);
  margin:0 0 10px;
}
.trellis-foot__col p{font-size:14px;color:var(--tr-mut);}
.trellis-foot__low{
  max-width:var(--tr-max);margin:0 auto;padding:0 clamp(14px,3vw,28px) 28px;
  font-size:13px;color:var(--tr-mut);
}

/* ============================ АДАПТИВ ============================ */
@media (max-width:1080px){
  .trellis-cat{grid-template-columns:repeat(3,minmax(0,1fr));}
  .trellis-kpi{grid-template-columns:repeat(3,minmax(0,1fr));}
  .trellis-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .trellis-hero{grid-template-columns:minmax(0,1fr);}
  .trellis-hero__fig{border-left:0;padding-left:0;border-top:1px solid var(--tr-line);padding-top:22px;}
}

@media (max-width:860px){
  body{font-size:16px;}
  .trellis-nav{order:3;margin-left:0;width:100%;border-top:1px solid var(--tr-line);padding-top:12px;}
  .trellis-bar .trellis-cta--sm{margin-left:auto;}
  .trellis-cat{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trellis-live{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trellis-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trellis-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trellis-rev{grid-template-columns:minmax(0,1fr);}
  .trellis-foot__row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trellis-final{grid-template-columns:minmax(0,1fr);}
  .trellis-final__btns{justify-content:flex-start;}
}

@media (max-width:620px){
  .trellis-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trellis-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trellis-cat{grid-template-columns:minmax(0,1fr);}
  .trellis-live{grid-template-columns:minmax(0,1fr);}
  .trellis-grid3{grid-template-columns:minmax(0,1fr);}
  .trellis-steps{grid-template-columns:minmax(0,1fr);}
  .trellis-foot__row{grid-template-columns:minmax(0,1fr);}
  .trellis-hero__left{border-left-width:3px;padding-left:14px;}
  .trellis-final__h{max-width:none;}
  h1{font-size:26px;}
}