.extra { --gap: 24px; --radius: 16px; --shadow: 0 6px 24px rgba(0,0,0,.06); }
.container.container1440 { max-width: 1440px; margin: 0 auto; padding: 0 16px; }

.extra-title { font-size: 2rem; margin: 0 0 2rem; }
.extra-lead { color: #4b5563; margin: 8px 0 16px; }
.extra-note { font-size: 14px; color: #6b7280; }
.extra-img-logo{ max-width: 100%;height: auto;max-height: 100%;display: block;margin: auto;}
.badge { display:inline-block; padding:4px 10px; background:#eef2ff; border-radius:999px; margin-right:8px; font-size:12px; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:#2563eb; color:#fff; text-decoration:none; }
.btn:hover { opacity:.9; }
.btn--ghost { background:transparent; color:#2563eb; border:1px solid #2563eb; }


.extra-hero {margin: 2rem auto 3rem;}




.extra-hero__grid { display:flex; gap:32px; align-items:center; }
.extra-hero__left { flex:1; }
.extra-hero__right { flex:1; display:flex; justify-content:center; }
.extra-hero__title { font-size:42px; margin:0 0 8px; }
.extra-hero__subtitle { font-size:18px; color:#334155; margin:0 0 16px; }
.extra-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.extra-hero__code { margin-top:12px; }
.extra-hero__img { width:100%; max-width:460px; height:280px; background:#0f172a; border-radius:var(--radius); box-shadow:var(--shadow); }

.extra-section {margin: 2rem auto 3rem;}


.extra-features {background-color: #e2eef4b3; padding: 4rem 0 5rem;}
.extra-requirements {background-color: #e2eef4b3; padding: 4rem 0 5rem;}
.extra-quickstart {background-color: #e2eef4b3; padding: 3rem 0 3rem;}
.extra-examples {background-color: #e2eef4b3; padding: 3rem 0 3rem;}
.extra-faq  {background-color: #e2eef4b3; padding: 3rem 0 3rem;}
.extra-configTabs {padding: 1rem 0 3rem;}
.extra-gallery {padding: 1rem 0 0rem;}

.req__item {padding: 0.5rem 0.7rem;}
.features { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.feature { padding: 1rem 1.8rem; border:1px solid #e5e7eb; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.feature__icon { font-size:24px; }
.feature__title { margin:8px 0; font-size:18px; }
.feature__text { color:#4b5563; }

.demo__tabs, .tabs__head { display:flex; gap:8px; flex-wrap:wrap;margin: 2rem 0rem; }
.demo__tab, .tabs__btn { padding:8px 12px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.demo__tab.is-active, .tabs__btn.is-active { background:#2563eb; color:#fff; border-color:#2563eb; }
.demo__panes, .tabs__body { border:1px solid #e5e7eb; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.demo__pane, .tabs__pane { display:none; padding:16px; }
.demo__pane.is-active, .tabs__pane.is-active { display:block; }
.demo__img { height:180px; background:#0f172a; border-radius:var(--radius); }

.req { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.req__list { margin:6px 0 0 1rem; padding-left:18px; }
.req__list--inline { display:flex; gap:10px; list-style:none; padding:0; margin:6px 0 0; }

.accordion .ac { border:1px solid #e5e7eb; border-radius:var(--radius); margin-bottom:10px; background:#fff; box-shadow:var(--shadow); }
.ac__head { width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:transparent; border:0; cursor:pointer; }
.ac__chev { width:10px; height:10px; border-right:2px solid #6b7280; border-bottom:2px solid #6b7280; transform:rotate(45deg); transition:.2s; }
.ac.is-open .ac__chev { transform:rotate(-135deg); }
.ac__body { display:none; }
.ac.is-open .ac__body { display:block; }
.ac__content { padding:0 1rem 1rem;    font-style: oblique; font-weight: 700; }

.table { width:100%; border:1px solid #e5e7eb; border-radius:var(--radius); overflow:hidden; }
.table__row { display:grid; grid-template-columns:1.2fr .6fr .8fr 2fr; gap:8px; padding:10px 12px; border-top:1px solid #e5e7eb; }
.table__row--head { background:#f8fafc; font-weight:600; border-top:0; }

.cards { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.card { border:1px solid #e5e7eb; border-radius:var(--radius); padding:16px; text-decoration:none; color:inherit; background:#fff; box-shadow:var(--shadow); }
.card__title { font-size:18px; margin:0 0 6px; }
.card__text { color:#4b5563; }

.gallery {position: relative;}
.gallery .swiper {padding: 1rem 0 5rem;}
.swiper-slide-item {height: 290px;display: flex;flex-direction: column;justify-content: space-between;gap: 1rem;}
.gallery__img { max-height:240px; height: auto;background:#0f172a; border-radius:var(--radius);max-width: 100%; display: block;margin: auto;}
.gallery__cap { font-size:14px; color:#475569; margin-top:6px; }

.gallery .swiper-pagination {bottom: 1rem;}
.extra-cta { margin:64px 0; }
.extra-cta__box { border:1px solid #e5e7eb; border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:12px; background:#fff; box-shadow:var(--shadow); }
.extra-cta__title { margin:0; font-size:28px; }
.extra-cta__actions { display:flex; gap:12px; flex-wrap:wrap; }
.extra-cta__sub { color:#6b7280; font-size:14px; }

/* ——— Адаптивы ——— */
@media (max-width: 1440px) {}
@media (max-width: 1240px) {
  .table__row { grid-template-columns:1fr .6fr .8fr 1fr; }
}
@media (max-width: 992px) {
  .extra-hero__grid { flex-direction:column; }
  .features { grid-template-columns: repeat(2,1fr); }
  .cards { grid-template-columns: repeat(2,1fr); }
  .req { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .table__row { grid-template-columns:1fr .5fr .7fr 1.2fr; }
  .extra-title { font-size: 1.5rem;}
}
@media (max-width: 575px) {
  .features, .cards { grid-template-columns:1fr; }
  .extra-hero__title { font-size:34px; }
}
@media (max-width: 390px) {
  .extra-hero__actions { flex-direction:column; align-items:flex-start; }
}