/* ==========================================================================
   Koyke Visuals — redesign layer
   --------------------------------------------------------------------------
   Loaded after the compiled bundle stylesheet. The bundle ships deeply nested
   selectors (7+ levels) and there is no source to rebuild from, so overrides
   here are declared with !important rather than mirroring those chains.

   Direction: technical spec sheet, not storefront. Monochrome is kept, but
   contrast range is widened — a true near-white for display type, a deep
   ground, and everything else muted. Depth comes from hairlines and space
   instead of glows, medallions and stacked blurs. Geometry sits on a 16px
   grid with near-square corners.
   ========================================================================== */

:root {
  --kx-ground: #08080a;
  --kx-surface: #0d0d10;
  --kx-surface-hi: #131317;

  --kx-ink: #f4f4f5;
  --kx-ink-2: rgba(255, 255, 255, 0.62);
  --kx-ink-3: rgba(255, 255, 255, 0.38);
  --kx-ink-4: rgba(255, 255, 255, 0.2);

  --kx-line: rgba(255, 255, 255, 0.07);
  --kx-line-hi: rgba(255, 255, 255, 0.14);
  --kx-grid: rgba(255, 255, 255, 0.014);

  --kx-unit: 16px;
  --kx-r: 3px;
  --kx-r-sm: 2px;

  --kx-gutter: clamp(24px, 5vw, 72px);
  --kx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- foundation */

body {
  background: var(--kx-ground) !important;
}

/* The bundle disables selection globally, which reads as a locked-down demo
   rather than a product page. Text stays selectable; only chrome does not. */
p,
h1,
h2,
h3,
h4,
li,
span,
div[class*="description"],
div[class*="title"],
div[class*="text"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}

.lighrays,
.lighrays::before {
  opacity: 0.28 !important;
}

.noise {
  opacity: 0.5 !important;
}

.container {
  max-width: 1320px !important;
  padding-inline: var(--kx-gutter) !important;
}

/* -------------------------------------------------------------- typography  */

.welcome-text,
.advantages-title,
.youtube-title,
.faq-title,
.products-title {
  font-family: SILight !important;
  color: var(--kx-ink) !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

.welcome-description,
.advantages-description,
.youtube-description,
.faq-description,
.products-description {
  font-family: SILight !important;
  color: var(--kx-ink-2) !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  max-width: 58ch !important;
  text-align: left !important;
}

/* Eyebrow labels: the pill badge with pulsing halo is replaced by a plain
   tracked-out caption, which is what carries "spec sheet" rather than "promo". */
.advantages-pretitle,
.youtube-pretitle,
.faq-pretitle,
.products-pretitle {
  padding: 0 !important;
  outline: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: none !important;
  width: auto !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

.advantages-pretitle::before,
.advantages-pretitle::after,
.youtube-pretitle::before,
.youtube-pretitle::after,
.faq-pretitle::before,
.faq-pretitle::after,
.products-pretitle::before,
.products-pretitle::after {
  content: none !important;
  animation: none !important;
}

.advantages-glow,
.youtube-glow,
.faq-glow,
.products-glow,
.question-glow {
  display: none !important;
}

.advantages-text,
.youtube-text,
.faq-text,
.products-text {
  font-family: SIMedium !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--kx-ink-3) !important;
}

.advantages-icon,
.youtube-icon,
.faq-icon,
.products-icon {
  font-size: 13px !important;
  color: var(--kx-ink-4) !important;
}

/* Section heads become an asymmetric two-column band: label left, headline
   right. Centred stacks are what made every block read the same. */
.home-advantages,
.home-youtube,
.home-faq {
  align-items: stretch !important;
  gap: 0 !important;
  margin: clamp(96px, 12vh, 176px) 0 !important;
}

.home-advantages > .advantages-pretitle,
.home-youtube > .youtube-pretitle,
.home-faq > .faq-pretitle {
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--kx-line) !important;
  margin-bottom: 40px !important;
}

.advantages-title,
.youtube-title,
.faq-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) !important;
  align-items: end !important;
  gap: 32px clamp(32px, 6vw, 96px) !important;
  text-align: left !important;
  font-size: clamp(36px, 5vw, 68px) !important;
  margin-bottom: clamp(48px, 7vh, 88px) !important;
}

.advantages-description,
.youtube-description,
.faq-description {
  padding-bottom: 0.5em;
}

/* ------------------------------------------------------------------- header */

.header .header-content {
  border: 1px solid var(--kx-line) !important;
  border-radius: var(--kx-r) !important;
  background: rgba(10, 10, 12, 0.72) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.header .header-content .header-navigate nav li a,
.header .header-content .header-navigate nav li {
  color: var(--kx-ink-2) !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  transition: color 0.25s var(--kx-ease) !important;
}

.header .header-content .header-navigate nav li:hover,
.header .header-content .header-navigate nav li:hover a {
  color: var(--kx-ink) !important;
}

.header .header-content .header-navigate nav li .navigate-icon {
  font-size: 14px !important;
  opacity: 0.3 !important;
}

/* ------------------------------------------------------------------ buttons */

button.fill,
button.blur,
.welcome-actions a > button,
.product-button button {
  border-radius: var(--kx-r-sm) !important;
  font-family: SIMedium !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  padding: 12px 20px !important;
  transition: background 0.25s var(--kx-ease), color 0.25s var(--kx-ease),
    border-color 0.25s var(--kx-ease), transform 0.18s var(--kx-ease) !important;
}

/* Exactly one true-white element per view carries the whole palette. */
button.fill {
  background: var(--kx-ink) !important;
  border: 1px solid var(--kx-ink) !important;
  color: #0a0a0c !important;
  outline: 0 !important;
  box-shadow: none !important;
}

button.fill:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

button.blur {
  background: transparent !important;
  border: 1px solid var(--kx-line-hi) !important;
  color: var(--kx-ink-2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: 0 !important;
}

button.blur:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: var(--kx-ink) !important;
}

button.fill:active,
button.blur:active {
  transform: translateY(1px) !important;
}

/* --------------------------------------------------------------------- hero */

.home .home-welcome {
  display: block !important;
  margin: clamp(150px, 22vh, 260px) 0 clamp(96px, 14vh, 180px) !important;
}

.home .home-welcome .welcome-content {
  align-items: flex-start !important;
  gap: 28px !important;
}

.home .home-welcome .welcome-content .welcome-title {
  justify-content: flex-start !important;
  gap: 10px !important;
  /* The bundle ships clamp(25px, 4vw, 16px) here — an inverted range. */
  font-size: 11px !important;
  font-family: SIMedium !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--kx-ink-3) !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--kx-line) !important;
  width: 100% !important;
}

.home .home-welcome .welcome-content .welcome-title .welcome-icon {
  font-size: 13px !important;
  color: var(--kx-ink-4) !important;
  rotate: none !important;
  transform: none !important;
}

.home .home-welcome .welcome-content .welcome-text {
  align-items: flex-start !important;
  text-align: left !important;
  gap: 34px !important;
  font-size: clamp(44px, 7vw, 104px) !important;
  max-width: 17ch !important;
}

.home .home-welcome .welcome-content .welcome-text .welcome-description {
  max-width: 44ch !important;
  font-size: clamp(16px, 1.35vw, 20px) !important;
  line-height: 1.58 !important;
}

.home .home-welcome .welcome-content .welcome-actions {
  gap: 12px !important;
  margin-top: 8px !important;
}

/* -------------------------------------------------------------------- stats */

/* Four bordered boxes become one hairline-ruled band: the figures read as a
   specification, and the row stops competing with the hero above it. */
.home .home-information .information-tabs {
  gap: 0 !important;
  border-top: 1px solid var(--kx-line) !important;
  border-bottom: 1px solid var(--kx-line) !important;
  flex-wrap: nowrap !important;
}

.home .home-information .information-tabs .tab-info {
  background: none !important;
  border: 0 !important;
  border-left: 1px solid var(--kx-line) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  height: auto !important;
  padding: 30px 28px 32px !important;
  text-align: left !important;
  align-items: flex-start !important;
  gap: 10px !important;
  flex: 1 1 0 !important;
}

.home .home-information .information-tabs .tab-info:first-child {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.home .home-information .information-tabs .tab-info .tab-count {
  font-family: SILight !important;
  font-size: clamp(30px, 3.4vw, 46px) !important;
  color: var(--kx-ink) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.home .home-information .information-tabs .tab-info .tab-text {
  justify-content: flex-start !important;
  gap: 8px !important;
}

.home .home-information .information-tabs .tab-info .tab-text .tab-content {
  color: var(--kx-ink-3) !important;
  font-family: SIMedium !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.home .home-information .information-tabs .tab-info .tab-text .tab-icon {
  color: var(--kx-ink-4) !important;
  font-size: 12px !important;
}

/* --------------------------------------------------------------- advantages */

/* Six identical cards with tripled medallions are the most generic element on
   the page. As a single stack of full-width rows they ran ~700px tall and read
   as filler, so the same six entries sit in a two-column spec table instead:
   half the height, and the paired columns give the section a shape of its own.
   Column rule and row rules are hairlines, so the table needs no chrome. */
.home-advantages .advantages-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--kx-line) !important;
}

.home-advantages .advantages-tabs .advantage {
  position: relative !important;
  /* The bundle offsets the fifth card by -141.5px to fake a masonry column. */
  top: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 18px !important;
  row-gap: 10px !important;
  padding: 26px clamp(20px, 2.6vw, 40px) 28px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kx-line) !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.3s var(--kx-ease) !important;
}

.home-advantages .advantages-tabs .advantage:nth-child(even) {
  border-left: 1px solid var(--kx-line) !important;
  padding-right: 0 !important;
  padding-left: clamp(20px, 2.6vw, 40px) !important;
}

/* Padding cannot shift on hover here — it would break the column rule — so the
   row is tinted and the icon tile is what actually responds. */
.home-advantages .advantages-tabs .advantage:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 80%) !important;
}

/* The oversized icon medallion collapses to a single small glyph in the
   left column, spanning both text rows. */
.home-advantages .advantages-tabs .advantage .advantage-header {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

.home-advantages .advantages-tabs .advantage .advantage-header .advantage-background {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  height: auto !important;
}

.home-advantages .advantages-tabs .advantage .advantage-header .advantage-background svg {
  display: none !important;
}

.home-advantages .advantages-tabs .advantage .advantage-header .advantage-background .advantage-icons {
  position: static !important;
  transform: none !important;
  gap: 0 !important;
}

.home-advantages .advantages-tabs .advantage .advantage-header .advantage-background .advantage-icons .ad-icon:first-child,
.home-advantages .advantages-tabs .advantage .advantage-header .advantage-background .advantage-icons .ad-icon:last-child {
  display: none !important;
}

.home-advantages .advantages-tabs .advantage .advantage-header .advantage-background .advantage-icons .ad-icon {
  width: 36px !important;
  height: 36px !important;
  background: none !important;
  border: 1px solid var(--kx-line-hi) !important;
  border-radius: var(--kx-r-sm) !important;
  transition: border-color 0.3s var(--kx-ease) !important;
}

.home-advantages .advantages-tabs .advantage:hover .advantage-header .advantage-background .advantage-icons .ad-icon {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.home-advantages .advantages-tabs .advantage .advantage-header .advantage-background .advantage-icons .ad-icon::before,
.home-advantages .advantages-tabs .advantage .advantage-header .advantage-background .advantage-icons .ad-icon::after {
  content: none !important;
  outline: 0 !important;
}

.home-advantages .advantages-tabs .advantage .advantage-header .advantage-background .advantage-icons .ad-icon .icon-text {
  font-size: 15px !important;
  color: var(--kx-ink-2) !important;
  transition: color 0.3s var(--kx-ease) !important;
}

.home-advantages .advantages-tabs .advantage:hover .advantage-header .advantage-background .advantage-icons .ad-icon .icon-text {
  color: var(--kx-ink) !important;
}

.home-advantages .advantages-tabs .advantage .advantage-footer {
  display: contents !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.home-advantages .advantages-tabs .advantage .advantage-footer .advantage-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  justify-content: flex-start !important;
}

.home-advantages .advantages-tabs .advantage .advantage-footer .advantage-title .advantage-number {
  order: -1 !important;
  font-family: SIMedium !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  color: var(--kx-ink-4) !important;
  font-variant-numeric: tabular-nums !important;
}

.home-advantages .advantages-tabs .advantage .advantage-footer .advantage-title .advantage-text {
  font-family: SIRegular !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  letter-spacing: -0.015em !important;
  color: var(--kx-ink) !important;
  line-height: 1.25 !important;
}

.home-advantages .advantages-tabs .advantage .advantage-footer .advantage-description {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: auto !important;
  max-width: 46ch !important;
  font-family: SILight !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--kx-ink-2) !important;
  padding-top: 0 !important;
}

/* -------------------------------------------------------------------- video */

.home-youtube .youtube-watching {
  width: 100% !important;
}

.home-youtube .watching-iframe {
  position: relative !important;
  width: 100% !important;
  max-width: 1100px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  border-radius: var(--kx-r) !important;
  border: 1px solid var(--kx-line) !important;
  overflow: hidden !important;
  background: var(--kx-surface) !important;
}

.home-youtube .watching-iframe iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------------- faq */

/* The bundle lays questions out as a wrapping flex row, so pairs share a line
   and column widths drift between rows. One question per row instead. */
.home-faq .faq-questions {
  display: block !important;
  gap: 0 !important;
  border-top: 1px solid var(--kx-line) !important;
}

.home-faq .faq-questions .question {
  width: 100% !important;
  /* Individual questions carry hand-tuned max-widths (648px, 480px) used to
     build the old mosaic; they have to go for the rows to line up. */
  max-width: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kx-line) !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 28px 8px 30px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  align-items: start !important;
  gap: clamp(16px, 4vw, 64px) !important;
  transition: background 0.3s var(--kx-ease) !important;
}

.home-faq .faq-questions .question:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.026), transparent 72%) !important;
}

.home-faq .faq-questions .question .question-title {
  gap: 12px !important;
  align-items: baseline !important;
}

.home-faq .faq-questions .question .question-title .question-text {
  font-family: SIRegular !important;
  font-size: clamp(16px, 1.4vw, 20px) !important;
  letter-spacing: -0.012em !important;
  color: var(--kx-ink) !important;
  line-height: 1.3 !important;
}

.home-faq .faq-questions .question .question-title .question-icon {
  color: var(--kx-ink-4) !important;
  font-size: 13px !important;
}

.home-faq .faq-questions .question .question-description {
  font-family: SILight !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--kx-ink-2) !important;
  max-width: 60ch !important;
}

/* ----------------------------------------------------------------- products */

/* The catalog head is a centred stack in the bundle; left-aligning it keeps
   the page consistent with the section heads on the home page. */
.products {
  align-items: flex-start !important;
}

.products .products-pretitle {
  width: 100% !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--kx-line) !important;
  margin-bottom: 40px !important;
}

.products-title {
  display: block !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  text-align: left !important;
  align-items: flex-start !important;
}

.products-title .products-description {
  margin-top: 22px !important;
}

.products .product .product-duration {
  border-radius: var(--kx-r-sm) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--kx-ink-3) !important;
}

.products .products-catalog .product-version-group .product-version-title {
  font-family: SIMedium !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--kx-ink-3) !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--kx-line) !important;
  margin-bottom: 28px !important;
}

/* Pricing is the one place elevation earns its keep, so cards stay — but as
   flat panels with a single hairline, not blurred glass. */
.products .product {
  border: 1px solid var(--kx-line) !important;
  border-radius: var(--kx-r) !important;
  background: var(--kx-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 26px !important;
  transition: border-color 0.3s var(--kx-ease), background 0.3s var(--kx-ease) !important;
}

.products .product:hover {
  border-color: var(--kx-line-hi) !important;
  background: var(--kx-surface-hi) !important;
}

.products .product.featured {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: var(--kx-surface-hi) !important;
}

.products .product .product-badge {
  border-radius: var(--kx-r-sm) !important;
  font-family: SIMedium !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--kx-ink-3) !important;
  background: none !important;
  border: 1px solid var(--kx-line-hi) !important;
  padding: 5px 9px !important;
}

.products .product .product-title {
  font-family: SIRegular !important;
  font-size: 20px !important;
  letter-spacing: -0.015em !important;
  color: var(--kx-ink) !important;
}

.products .product .product-price {
  font-family: SILight !important;
  font-size: clamp(34px, 3vw, 46px) !important;
  letter-spacing: -0.035em !important;
  color: var(--kx-ink) !important;
  font-variant-numeric: tabular-nums !important;
}

.products .product .product-price span {
  font-family: SIMedium !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  color: var(--kx-ink-4) !important;
}

.products .product .product-description {
  font-family: SILight !important;
  color: var(--kx-ink-2) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.products .product .product-features .product-feature {
  color: var(--kx-ink-2) !important;
  font-size: 13.5px !important;
  border-top: 1px solid var(--kx-line) !important;
  padding: 11px 0 !important;
}

/* ------------------------------------------------------------------- footer */

/* The footer box is aligned to the same measure as .container so its top rule
   lines up with the content column instead of the viewport edge. The bundle
   sets `gap: 65px` on this flex column, which produced 130px of dead space
   between the three bands; the bands carry their own padding instead. */
.footer {
  width: 100% !important;
  max-width: 1320px !important;
  margin: clamp(96px, 12vh, 160px) auto 0 !important;
  padding: 0 var(--kx-gutter) !important;
  gap: 0 !important;
  border-top: 1px solid var(--kx-line) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* The brand mark, sized large and held at the threshold of visibility. It is
   the same outline asset the tab icon uses, so it reads as a watermark on a
   drawing rather than as decoration. */
.footer::after {
  content: "" !important;
  position: absolute !important;
  right: var(--kx-gutter) !important;
  bottom: 20px !important;
  z-index: -1 !important;
  width: clamp(96px, 11vw, 146px) !important;
  aspect-ratio: 226 / 256 !important;
  background: url("/logo-tab-clear.png") center / contain no-repeat !important;
  opacity: 0.06 !important;
  pointer-events: none !important;
}

.footer .footer-sides {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 40px clamp(32px, 6vw, 96px) !important;
  padding: 46px 0 44px !important;
}

.footer .footer-rightside {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  align-items: flex-start !important;
}

/* Logo lockup: the bundle renders the mark as the icon-font glyph "r", which
   lands as a stray letterform. The glyph is blanked and the real asset is
   drawn in its place, in a tile that matches the social buttons below it. */
.footer .rightside-icon {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  font-size: 0 !important;
  color: transparent !important;
  rotate: none !important;
  transform: none !important;
  border: 1px solid var(--kx-line-hi) !important;
  border-radius: var(--kx-r-sm) !important;
  background: url("/logo-tab-clear.png") center / 17px auto no-repeat !important;
}

.footer .rightside-title {
  display: flex !important;
  align-items: center !important;
}

.footer .rightside-text {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  font-family: SIMedium !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--kx-ink) !important;
  white-space: nowrap !important;
}

.footer .rightside-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.footer .side-links {
  display: flex !important;
  align-items: center !important;
}

.footer .side-links a {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
  border: 1px solid var(--kx-line) !important;
  border-radius: var(--kx-r-sm) !important;
  color: var(--kx-ink-3) !important;
  transition: border-color 0.25s var(--kx-ease), color 0.25s var(--kx-ease),
    background 0.25s var(--kx-ease) !important;
}

.footer .side-links a:hover {
  border-color: var(--kx-line-hi) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--kx-ink) !important;
}

/* The nav column reads as a stray list when stacked; a single right-aligned
   row keeps the footer a closing rule rather than a second menu. The bundle
   prefixes every entry with an icon glyph, which at 13px reads as noise. */
.footer .leftside-navigate nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 14px clamp(20px, 2.4vw, 34px) !important;
}

.footer .leftside-navigate nav li {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
}

.footer .fnav-icon {
  display: none !important;
}

.footer .leftside-navigate a {
  color: var(--kx-ink-2) !important;
  font-family: SILight !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
  padding-bottom: 3px !important;
  border-bottom: 1px solid transparent !important;
  transition: color 0.25s var(--kx-ease), border-color 0.25s var(--kx-ease) !important;
}

.footer .leftside-navigate a:hover {
  color: var(--kx-ink) !important;
  border-bottom-color: var(--kx-line-hi) !important;
  filter: none !important;
}

.footer .footer-hrline {
  background: var(--kx-line) !important;
  border: 0 !important;
  height: 1px !important;
  flex: 0 0 1px !important;
}

.footer .footer-allrightreserved {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 10px 28px !important;
  padding: 20px 0 30px !important;
  text-align: left !important;
  font-family: SILight !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  color: var(--kx-ink-4) !important;
}

.footer .footer-allrightreserved::after {
  content: "сделано с \2665, imbek" !important;
  font-family: SILight, "Segoe UI Symbol", "Apple Symbols", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: var(--kx-ink-3) !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------------- grid nod  */

/* A 16px rule grid sits behind the content sections at the threshold of
   visibility. It reads as a technical drawing and is the only place the
   subject matter shows up in the chrome itself. */
.home-advantages::before,
.home-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--kx-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kx-grid) 1px, transparent 1px);
  background-size: var(--kx-unit) var(--kx-unit);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
}

.home-advantages,
.home-faq {
  position: relative;
  isolation: isolate;
}

/* --------------------------------------------------------------- responsive */

/* Section heads: below this the second column has no room for a paragraph, so
   the label/headline/description stack rather than sit side by side. */
@media (max-width: 1180px) {
  .advantages-title,
  .youtube-title,
  .faq-title {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 20px !important;
  }
}

@media (max-width: 1024px) {
  /* Wrapping the stats row as flex left the third figure carrying a column
     rule mid-block; an explicit grid keeps rules on the cell boundaries. */
  .home .home-information .information-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-wrap: nowrap !important;
  }

  .home .home-information .information-tabs .tab-info {
    flex: none !important;
    width: auto !important;
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  .home .home-information .information-tabs .tab-info:nth-child(even) {
    border-left: 1px solid var(--kx-line) !important;
    padding-left: clamp(20px, 3vw, 28px) !important;
  }

  .home .home-information .information-tabs .tab-info:nth-child(n + 3) {
    border-top: 1px solid var(--kx-line) !important;
  }

  .home-faq .faq-questions .question {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Each spec column needs roughly 330px to keep a description under four lines,
   so the table holds two columns through tablet portrait and collapses below
   it — as one column the same six rows run close to 1000px tall. */
@media (max-width: 720px) {
  .home-advantages .advantages-tabs {
    grid-template-columns: 1fr !important;
  }

  .home-advantages .advantages-tabs .advantage,
  .home-advantages .advantages-tabs .advantage:nth-child(even) {
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .home-advantages .advantages-tabs .advantage .advantage-footer .advantage-description {
    max-width: 64ch !important;
  }
}

/* --------------------------------------------------------- header: collapsed */

/* The bundle only swaps in the burger at 768px, so from 1024px down the link
   row and the action buttons overlap — 108px of overlap at 769px, and at phone
   widths the two links it leaves visible pushed .header-content past the
   viewport edge, taking the burger with it. The burger takes over at 1024px
   instead, and since the bundle scopes the whole panel component to its own
   768px query, the collapsed and open states are declared here in full. */
@media (max-width: 1024px) {
  .header .header-content .header-navigate,
  .header .header-content .header-actions {
    display: none !important;
  }

  /* With the link row and actions removed, the bundle's flex-start alignment
     leaves the burger sitting against the logo. */
  .header .header-content {
    justify-content: space-between !important;
  }

  .header .header-content .header-bar {
    display: flex !important;
    gap: 5px !important;
  }

  .header .header-mobilecontent {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-top: 8px !important;
    padding: 0 18px !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border: 1px solid var(--kx-line) !important;
    border-radius: var(--kx-r) !important;
    background: rgba(10, 10, 12, 0.9) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    transition: height 0.32s var(--kx-ease), opacity 0.32s var(--kx-ease),
      padding 0.32s var(--kx-ease) !important;
  }

  /* The bundle's open state pins the panel to 190px and never resets the
     closed state's translateY(15%), which left it 50px clear of the header. */
  .header .header-mobilecontent.mobile {
    height: auto !important;
    max-height: calc(100dvh - 130px) !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    padding: 6px 18px 18px !important;
  }

  .header .header-mobilecontent nav {
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    width: 100% !important;
  }

  /* Four of the six entries are hidden by the bundle's `li:not(:first-child,
     :nth-child(5))` rule, which leaves the burger opening onto two links. */
  .header .header-mobilecontent nav li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--kx-line) !important;
  }

  .header .header-mobilecontent nav li:last-child {
    border-bottom: 0 !important;
  }

  .header .header-mobilecontent nav li a {
    color: var(--kx-ink-2) !important;
    font-size: 14px !important;
  }

  .header .header-mobilecontent nav li .navigate-icon {
    font-size: 13px !important;
    opacity: 0.3 !important;
  }

  .header .header-mobilecontent .header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 200px)) !important;
    justify-content: start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 18px !important;
  }

  .header .header-mobilecontent .header-actions a {
    display: block !important;
  }

  .header .header-mobilecontent .header-actions button {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 16px !important;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 18px 14px !important;
  }

  .header .header-content {
    padding: 10px 14px !important;
  }

  .header .header-content .header-bar span {
    width: 20px !important;
    height: 1.5px !important;
    border-radius: 0 !important;
    background: var(--kx-ink-2) !important;
  }

  .header .header-content .header-bar {
    gap: 5px !important;
  }

  .header .header-content .header-bar.active span:first-child {
    transform: translateY(6.5px) rotate(45deg) !important;
  }

  .header .header-content .header-bar.active span:last-child {
    transform: translateY(-6.5px) rotate(-45deg) !important;
  }

  /* Vertical rhythm compresses roughly 40% so sections stay one screen apart
     rather than several. */
  .home .home-welcome {
    margin: clamp(104px, 17vh, 150px) 0 clamp(60px, 9vh, 96px) !important;
  }

  .home .home-welcome .welcome-content .welcome-text {
    font-size: clamp(32px, 9.5vw, 56px) !important;
    max-width: none !important;
    gap: 24px !important;
  }

  .home .home-welcome .welcome-content .welcome-text .welcome-description {
    font-size: 15.5px !important;
    max-width: none !important;
  }

  .home-advantages,
  .home-youtube,
  .home-faq {
    margin: clamp(72px, 9vh, 112px) 0 !important;
  }

  .advantages-title,
  .youtube-title,
  .faq-title {
    font-size: clamp(29px, 7.6vw, 44px) !important;
    margin-bottom: 32px !important;
  }

  .home-advantages > .advantages-pretitle,
  .home-youtube > .youtube-pretitle,
  .home-faq > .faq-pretitle {
    margin-bottom: 30px !important;
  }

  .footer .footer-sides {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 34px 0 32px !important;
  }

  .footer .leftside-navigate nav {
    justify-content: flex-start !important;
    gap: 13px 22px !important;
  }

  .footer::after {
    width: 92px !important;
    bottom: 18px !important;
  }
}

@media (max-width: 560px) {
  .home .home-information .information-tabs {
    grid-template-columns: 1fr !important;
  }

  .home .home-information .information-tabs .tab-info,
  .home .home-information .information-tabs .tab-info:nth-child(even) {
    padding: 22px 0 24px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--kx-line) !important;
  }

  .home .home-information .information-tabs .tab-info:first-child {
    border-top: 0 !important;
  }

  /* Two side-by-side buttons at 14px padding fall under the 44px touch target
     once the labels wrap, so they take half the row each at full height. */
  .home .home-welcome .welcome-content .welcome-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .home .home-welcome .welcome-content .welcome-actions a {
    display: block !important;
  }

  .welcome-actions a > button {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 12px !important;
  }

  .home-advantages .advantages-tabs .advantage {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    padding-top: 22px !important;
    padding-bottom: 24px !important;
  }

  .home-advantages .advantages-tabs .advantage .advantage-header .advantage-background .advantage-icons .ad-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .home-advantages .advantages-tabs .advantage .advantage-header .advantage-background .advantage-icons .ad-icon .icon-text {
    font-size: 13px !important;
  }

  .home-faq .faq-questions .question {
    padding: 22px 0 24px !important;
  }

  .header .header-mobilecontent .header-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  .footer .rightside-text {
    font-size: 10.5px !important;
    letter-spacing: 0.16em !important;
    white-space: normal !important;
  }

  .footer .footer-allrightreserved {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

@media (max-width: 400px) {
  :root {
    --kx-gutter: 18px;
  }

  .home {
    margin: 0 18px !important;
  }

  .home .home-welcome .welcome-content .welcome-text {
    font-size: 31px !important;
  }

  button.fill,
  button.blur,
  .welcome-actions a > button {
    font-size: 12px !important;
  }
}