/* 7k-play.site — концепт «Ткацкий станок». Префикс .loom- */

:root{
  --loom-bg:#120f11;
  --loom-surf:#1b1719;
  --loom-line:#2a2426;
  --loom-acc:#6d7fe0;
  --loom-sec:#e8b04b;
  --loom-tx:#efe9eb;
  --loom-mut:#a1959a;
  --loom-rad:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    repeating-linear-gradient(90deg,rgba(109,127,224,.045) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(232,176,75,.035) 0 1px,transparent 1px 26px),
    var(--loom-bg);
  color:var(--loom-tx);
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;
  line-height:1.68;
}

/* Заголовочный шрифт — явным правилом. В body только Open Sans. */
h1,h2,h3,h4,
.loom-logo__t,.loom-kpi__n,.loom-card__n,.loom-step__n,.loom-slot__t,
.loom-lv__t,.loom-tbl th,.loom-foot__t,.loom-rev__n{
  font-family:'Kelly Slab',Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:.1px;
}

h1{font-size:2.15rem;line-height:1.2;margin:.1em 0 .5em}
h2{font-size:1.62rem;line-height:1.26;margin:.1em 0 .7em}
h3{font-size:1.28rem;line-height:1.3;margin:.1em 0 .5em}
p{margin:0 0 1em}
a{color:var(--loom-acc)}

.loom-skip{
  position:absolute;left:-9999px;top:0;background:var(--loom-acc);color:#0d0b0c;
  padding:10px 16px;border-radius:0 0 10px 0;z-index:20;
}
.loom-skip:focus{left:0}

/* ── шапка ───────────────────────────────────────── */
.loom-bar{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:16px 30px;
  border-bottom:1px solid var(--loom-line);
  background:linear-gradient(180deg,rgba(27,23,25,.96),rgba(18,15,17,.92));
  position:sticky;top:0;z-index:15;backdrop-filter:blur(7px);
}
.loom-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--loom-tx)}
.loom-logo__svg{width:44px;height:44px;flex:none}
.loom-logo__t{display:flex;flex-direction:column;font-size:1.16rem;line-height:1.15}
.loom-logo__sub{
  font-family:'Open Sans',sans-serif;font-size:.7rem;color:var(--loom-mut);
  letter-spacing:.4px;margin-top:3px;
}
.loom-nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.loom-nav a{
  color:var(--loom-mut);text-decoration:none;font-size:.92rem;
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.loom-nav a:hover{color:var(--loom-tx);border-bottom-color:var(--loom-sec)}

/* ── кнопки ──────────────────────────────────────── */
.loom-cta{
  display:inline-block;text-decoration:none;text-align:center;
  background:linear-gradient(115deg,var(--loom-acc),#8b9bf0);
  color:#0e0c0f;font-weight:700;font-size:.98rem;
  padding:14px 26px;border-radius:10px;
  border:1px solid rgba(232,176,75,.35);
  box-shadow:0 6px 20px rgba(109,127,224,.18);
}
.loom-cta:hover{filter:brightness(1.08)}
.loom-cta--sm{padding:10px 18px;font-size:.88rem;margin-left:6px}
.loom-cta--ghost{
  background:transparent;color:var(--loom-sec);
  border:1px solid var(--loom-sec);box-shadow:none;
}
.loom-cta--wide{display:block;width:100%;margin-top:24px}
.loom-cta--big{padding:18px 40px;font-size:1.08rem}
.loom-link{color:var(--loom-mut);font-size:.92rem;align-self:center}

/* ── hero: зеркальный (иллюстрация слева) ────────── */
.loom-hero{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:44px;align-items:center;
  max-width:1240px;margin:0 auto;padding:56px 30px 30px;
}
.loom-hero__art svg{width:100%;height:auto;border-radius:var(--loom-rad);border:1px solid var(--loom-line)}
.loom-hero__txt{min-width:0}
.loom-ovrline{
  font-size:.74rem;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--loom-sec);margin:0 0 12px;
}
.loom-lead{color:#ded5d8;font-size:1.06rem}
.loom-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}
.loom-kpi__i{
  background:var(--loom-surf);border:1px solid var(--loom-line);
  border-top:2px solid var(--loom-acc);
  border-radius:10px;padding:13px 14px;
}
.loom-kpi__n{display:block;font-size:1.32rem;color:var(--loom-sec)}
.loom-kpi__c{display:block;font-size:.78rem;color:var(--loom-mut);margin-top:4px;line-height:1.4}
.loom-hero__act{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.loom-quick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.loom-quick li{
  font-size:.86rem;color:var(--loom-mut);
  padding:10px 14px;border-left:3px solid var(--loom-sec);
  background:rgba(27,23,25,.7);border-radius:0 8px 8px 0;
}
.loom-quick span{display:block;color:var(--loom-tx);font-size:.92rem}

/* ── секции ──────────────────────────────────────── */
.loom-sec{max-width:1180px;margin:0 auto;padding:46px 30px;border-top:1px solid var(--loom-line)}
.loom-sec p{max-width:78ch}
.loom-note{
  color:var(--loom-mut);font-size:.94rem;
  border-left:3px solid var(--loom-acc);padding:4px 0 4px 16px;margin-top:20px;
}

.loom-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.loom-card{
  background:var(--loom-surf);border:1px solid var(--loom-line);
  border-radius:var(--loom-rad);padding:20px 20px 16px;
  background-image:repeating-linear-gradient(135deg,rgba(232,176,75,.05) 0 2px,transparent 2px 9px);
}
.loom-card__tag{font-size:.76rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--loom-sec);margin:0 0 8px}
.loom-card__n{font-size:2rem;color:var(--loom-acc);margin:0 0 8px}
.loom-card__x{font-size:.93rem;color:#d9d0d3;margin:0}

.loom-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 24px}
.loom-step{border:1px solid var(--loom-line);border-radius:var(--loom-rad);padding:18px;background:rgba(27,23,25,.55)}
.loom-step__n{font-size:1.5rem;color:var(--loom-sec);margin:0 0 6px}
.loom-step__t{margin:0 0 6px;font-weight:700}
.loom-step__x{font-size:.92rem;color:var(--loom-mut);margin:0}

/* ── каталог ─────────────────────────────────────── */
.loom-cat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.loom-slot{
  border:1px solid var(--loom-line);border-radius:12px;padding:15px;
  background:linear-gradient(180deg,var(--loom-surf),rgba(18,15,17,.85));
  border-left:3px solid var(--loom-acc);
}
.loom-slot:nth-child(3n+2){border-left-color:var(--loom-sec)}
.loom-slot:nth-child(3n){border-left-color:#8d84a8}
.loom-slot__t{font-size:1rem;margin:0 0 5px;line-height:1.25}
.loom-slot__p{font-size:.79rem;color:var(--loom-sec);margin:0 0 10px}
.loom-slot__m{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.loom-slot__m span{
  font-size:.73rem;color:var(--loom-mut);
  border:1px solid var(--loom-line);border-radius:20px;padding:3px 9px;
}

/* ── живой зал: лента ────────────────────────────── */
.loom-live{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 24px}
.loom-lv{
  border:1px solid var(--loom-line);border-radius:var(--loom-rad);padding:18px;
  background:var(--loom-surf);position:relative;overflow:hidden;
}
.loom-lv::after{
  content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;
  border-radius:50%;background:radial-gradient(circle,rgba(109,127,224,.22),transparent 70%);
}
.loom-lv__t{font-size:1.05rem;margin:0 0 4px}
.loom-lv__p{font-size:.78rem;color:var(--loom-sec);margin:0 0 10px;letter-spacing:.6px}
.loom-lv__x{font-size:.9rem;color:var(--loom-mut);margin:0}

/* ── таблицы ─────────────────────────────────────── */
.loom-tblwrap{overflow-x:auto;margin:22px 0 8px;border:1px solid var(--loom-line);border-radius:var(--loom-rad)}
.loom-tbl{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
.loom-tbl th{
  text-align:left;padding:13px 16px;background:rgba(109,127,224,.12);
  color:var(--loom-tx);font-size:.9rem;letter-spacing:.5px;
  border-bottom:1px solid var(--loom-line);
}
.loom-tbl td{padding:12px 16px;border-bottom:1px solid var(--loom-line);color:#ddd4d7}
.loom-tbl tbody tr:nth-child(even){background:rgba(232,176,75,.045)}
.loom-tbl tbody tr:last-child td{border-bottom:none}

/* ── отзывы ──────────────────────────────────────── */
.loom-rev{
  border:1px solid var(--loom-line);border-radius:var(--loom-rad);
  padding:18px;background:var(--loom-surf);
}
.loom-rev__top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.loom-rev__av{
  width:40px;height:40px;flex:none;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--loom-acc),var(--loom-sec));color:#100e10;font-weight:700;
}
.loom-rev__id{display:flex;flex-direction:column}
.loom-rev__n{font-size:1rem}
.loom-rev__c{font-size:.76rem;color:var(--loom-mut)}
.loom-rev__st{margin-left:auto;color:var(--loom-sec);font-size:.88rem;letter-spacing:1px}
.loom-rev__x{font-size:.92rem;color:#d8cfd2;margin:0}

/* ── FAQ в две колонки ───────────────────────────── */
.loom-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
.loom-faq details{
  border:1px solid var(--loom-line);border-radius:12px;
  background:rgba(27,23,25,.65);padding:12px 16px;
}
.loom-faq summary{cursor:pointer;font-weight:600;color:var(--loom-tx);font-size:.97rem}
.loom-faq summary::marker{color:var(--loom-sec)}
.loom-faq details[open]{border-color:rgba(109,127,224,.5)}
.loom-faq p{margin:10px 0 2px;font-size:.92rem;color:var(--loom-mut)}

/* ── author + prefooter ──────────────────────────── */
.loom-author{
  max-width:1180px;margin:0 auto;padding:34px 30px;border-top:1px solid var(--loom-line);
}
.loom-author p:last-child{font-size:.93rem;color:var(--loom-mut);max-width:96ch}
.loom-prefoot{
  max-width:1180px;margin:34px auto 0;padding:38px 30px;text-align:center;
  border:1px solid var(--loom-line);border-radius:18px;
  background:
    repeating-linear-gradient(135deg,rgba(109,127,224,.07) 0 3px,transparent 3px 12px),
    var(--loom-surf);
}
.loom-prefoot p{max-width:64ch;margin-left:auto;margin-right:auto}

/* ── подвал ──────────────────────────────────────── */
.loom-foot{border-top:1px solid var(--loom-line);margin-top:40px;padding:34px 30px 46px}
.loom-foot__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:30px}
.loom-foot__t{font-size:1.05rem;margin:0 0 8px}
.loom-foot__x{font-size:.86rem;color:var(--loom-mut);margin:0}
.loom-foot__c{max-width:1180px;margin:26px auto 0;font-size:.8rem;color:#7d7276}

/* ── адаптив ─────────────────────────────────────── */
@media (max-width:1080px){
  .loom-hero{grid-template-columns:1fr;gap:28px;padding-top:36px}
  .loom-cat{grid-template-columns:repeat(3,1fr)}
  .loom-kpi{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  body{font-size:16px}
  h1{font-size:1.78rem}
  h2{font-size:1.4rem}
  .loom-nav{display:none}
  .loom-cta--sm{margin-left:auto}
  .loom-grid3,.loom-steps,.loom-live{grid-template-columns:repeat(2,1fr)}
  .loom-cat{grid-template-columns:repeat(2,1fr)}
  .loom-faq{grid-template-columns:1fr}
  .loom-foot__grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .loom-bar{padding:12px 16px;gap:12px}
  .loom-hero{padding:26px 16px 18px}
  .loom-sec,.loom-author{padding:32px 16px}
  .loom-prefoot{padding:28px 16px;margin:26px 16px 0}
  .loom-grid3,.loom-steps,.loom-live,.loom-cat,.loom-quick{grid-template-columns:1fr}
  .loom-kpi{grid-template-columns:1fr 1fr}
  .loom-hero__act{flex-direction:column;align-items:stretch}
  .loom-cta{padding:13px 18px}
  .loom-foot{padding:26px 16px 36px}
}