/* =========================================================
   TWEETLIX — SINGLE CASE
   ========================================================= */

.twl-case-page {
  --twl-case-bg: #050711;
  --twl-case-bg-deep: #02030a;

  --twl-case-text: #f7f8ff;
  --twl-case-secondary: #b0b6cf;
  --twl-case-muted: #747c9c;

  --twl-case-blue: #6473ff;
  --twl-case-violet: #7768ff;
  --twl-case-lavender: #bbc2ff;

  --twl-case-border:
    rgba(150, 160, 255, 0.15);

  --twl-case-border-strong:
    rgba(160, 170, 255, 0.28);

  position: relative;
  min-width: 320px;
  overflow: hidden;

  color:
    var(--twl-case-text);

  background:
    var(--twl-case-bg-deep);

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  line-height: 1.6;
}


.twl-case-page *,
.twl-case-page *::before,
.twl-case-page *::after {
  box-sizing: border-box;
}


.twl-case-container {
  position: relative;
  z-index: 2;

  width:
    min(
      calc(100% - 80px),
      1400px
    );

  margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.twl-case-hero {
  position: relative;
  overflow: hidden;

  padding:
    clamp(96px, 7vw, 118px)
    0
    clamp(64px, 6vw, 92px);

  background:
    linear-gradient(
      135deg,
      #050711 0%,
      #070916 48%,
      #0a091b 100%
    );
}


.twl-case-hero__grid-bg {
  position: absolute;
  inset: 0;

  opacity: 0.28;

  background-image:
    linear-gradient(
      rgba(134, 144, 255, 0.045)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(134, 144, 255, 0.045)
      1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  -webkit-mask-image:
    radial-gradient(
      circle at 70% 45%,
      #000,
      transparent 70%
    );

  mask-image:
    radial-gradient(
      circle at 70% 45%,
      #000,
      transparent 70%
    );

  pointer-events: none;
}


.twl-case-hero__glow {
  position: absolute;

  width: 620px;
  height: 620px;

  right: -170px;
  top: -100px;

  border-radius: 50%;

  background:
    rgba(100, 115, 255, 0.11);

  filter:
    blur(150px);

  pointer-events: none;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.twl-case-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom:
    clamp(26px, 3vw, 40px);

  color:
    var(--twl-case-muted);

  font:
    500
    10px/1.5
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.twl-case-breadcrumbs a {
  color:
    var(--twl-case-secondary);

  text-decoration: none;

  transition:
    color 180ms ease;
}


.twl-case-breadcrumbs a:hover {
  color:
    var(--twl-case-lavender);
}


/* =========================================================
   HERO GRID
   ========================================================= */

.twl-case-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(380px, 0.96fr);

  gap:
    clamp(48px, 4.5vw, 72px);

  align-items: center;
}


.twl-case-hero__content {
  min-width: 0;
}


.twl-case-hero__aside {
  min-width: 0;

  display: grid;
  gap: 18px;

  align-self: center;
}


.twl-case-hero__code,
.twl-case-technologies__code {
  margin:
    0
    0
    20px;

  color:
    var(--twl-case-lavender);

  font:
    600
    11px/1.4
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


/* =========================================================
   SERVICE TAGS
   ========================================================= */

.twl-case-hero__services {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-bottom: 24px;
}


.twl-case-tag {
  padding:
    6px 9px;

  border:
    1px solid
    var(--twl-case-border);

  border-radius:
    8px;

  background:
    rgba(100, 115, 255, 0.035);

  color:
    #929bd0;

  font:
    500
    10px/1.4
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.twl-case-hero__title {
  max-width: none;

  margin: 0;

  color:
    var(--twl-case-text);

  font-size:
    clamp(40px, 4.55vw, 68px);

  font-weight: 600;
  line-height: 1.035;

  letter-spacing:
    -0.05em;

  text-wrap:
    balance;
}


/* =========================================================
   HERO LEAD
   ========================================================= */

.twl-case-hero__lead {
  max-width: 760px;

  margin-top: 28px;

  color:
    var(--twl-case-secondary);

  font-size:
    clamp(16px, 1.4vw, 20px);

  line-height: 1.72;
}


.twl-case-hero__lead p {
  margin: 0;
}


/* =========================================================
   HERO META
   ========================================================= */

.twl-case-hero__meta {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 0;
  row-gap: 0;

  margin: 0;
  padding: 0;

  border-top:
    1px solid
    var(--twl-case-border);

  border-bottom:
    1px solid
    var(--twl-case-border);

  background: transparent;
}


.twl-case-hero__meta-item {
  min-width: 0;

  padding:
    13px
    0;

  background: transparent;
}


.twl-case-hero__meta-item:nth-child(odd) {
  padding-right: 18px;
}


.twl-case-hero__meta-item:nth-child(even) {
  padding-left: 18px;

  border-left:
    1px solid
    rgba(150, 160, 255, 0.11);
}


.twl-case-hero__meta-item:nth-child(n + 3) {
  border-top:
    1px solid
    rgba(150, 160, 255, 0.11);
}


.twl-case-hero__meta dt {
  color:
    var(--twl-case-muted);

  font:
    500
    10px/1.35
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.twl-case-hero__meta dd {
  margin:
    6px
    0
    0;

  color:
    #d4d7e8;

  font-size: 13px;
  line-height: 1.5;

  overflow-wrap: anywhere;
}


/* =========================================================
   STATUS
   ========================================================= */

.twl-case-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}


.twl-case-status i {
  width: 6px;
  height: 6px;

  flex:
    0 0 6px;

  border-radius: 50%;

  background:
    var(--twl-case-blue);

  box-shadow:
    0 0 12px
    rgba(100, 115, 255, 0.7);
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.twl-case-hero__visual {
  position: relative;

  min-width: 0;

  padding: 14px;

  border:
    1px solid
    rgba(151, 160, 255, 0.18);

  border-radius:
    28px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 19, 39, 0.88),
      rgba(8, 10, 22, 0.9)
    );

  box-shadow:
    0
    30px
    80px
    rgba(0, 0, 0, 0.25);
}


.twl-case-hero__visual::before {
  content: "";

  position: absolute;
  inset: -1px;

  z-index: -1;

  border-radius: inherit;

  background:
    radial-gradient(
      circle at 65% 20%,
      rgba(100, 115, 255, 0.18),
      transparent 50%
    );

  filter:
    blur(25px);
}


.twl-case-hero__image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio:
    16 / 10;

  object-fit: cover;

  border-radius:
    18px;

  background:
    #0b0e1c;
}


.twl-case-hero__visual-line {
  position: absolute;

  right: 28px;
  bottom: 28px;

  width: 66px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--twl-case-lavender)
    );

  opacity: 0.6;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.twl-case-main {
  position: relative;

  padding:
    clamp(54px, 5vw, 72px)
    0
    clamp(38px, 4vw, 58px);

  background:
    linear-gradient(
      180deg,
      #080a18 0%,
      #050711 100%
    );
}


.twl-case-content {
  min-width: 0;
}


/* =========================================================
   TECHNOLOGIES
   ========================================================= */

.twl-case-technologies {
  padding:
    clamp(48px, 5vw, 72px)
    0
    clamp(34px, 4vw, 52px);

  background:
    linear-gradient(
      180deg,
      #050711 0%,
      #080a18 100%
    );
}


.twl-case-technologies__box {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.52fr)
    minmax(0, 1.48fr);

  gap:
    clamp(24px, 3vw, 48px);

  align-items: center;

  padding:
    clamp(24px, 2.8vw, 34px);

  border:
    1px solid
    var(--twl-case-border);

  border-radius:
    22px;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(100, 115, 255, 0.075),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(15, 19, 39, 0.92),
      rgba(8, 10, 22, 0.92)
    );
}


.twl-case-technologies__title {
  margin: 0;

  color:
    var(--twl-case-text);

  font-size:
    clamp(26px, 3vw, 42px);

  font-weight: 600;
  line-height: 1.08;

  letter-spacing:
    -0.04em;
}


.twl-case-technologies__list {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  justify-content:
    flex-start;
}


.twl-case-technology {
  appearance: none;
  -webkit-appearance: none;

  min-height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    9px 13px;

  border:
    1px solid
    var(--twl-case-border);

  border-radius:
    10px;

  background:
    rgba(100, 115, 255, 0.045);

  color:
    var(--twl-case-secondary);

  font:
    500
    11px/1.4
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.035em;

  text-align: left;

  cursor: pointer;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
}


.twl-case-technology:hover,
.twl-case-technology:focus,
.twl-case-technology:focus-visible {
  color:
    var(--twl-case-text);

  border-color:
    rgba(185, 193, 255, 0.38);

  background:
    rgba(100, 115, 255, 0.11);

  box-shadow:
    inset 0 0 0 1px
    rgba(185, 193, 255, 0.08);
}


.twl-case-technology:focus {
  outline: none;
}


.twl-case-technology:focus-visible {
  outline:
    2px solid
    rgba(187, 194, 255, 0.76);

  outline-offset:
    3px;
}


.twl-case-technology:active {
  transform:
    translateY(1px);

  background:
    rgba(100, 115, 255, 0.15);
}


/* =========================================================
   FRONTEND GUTENBERG POLISH
   Scoped to single case only.
   case-content.css remains the shared editor/frontend base.
   ========================================================= */

.twl-case-page .twl-case-block {
  margin-bottom:
    clamp(88px, 7vw, 108px);
}


.twl-case-page .twl-case-block__title {
  margin-bottom:
    clamp(30px, 3vw, 40px) !important;
}


/* Starting Task: natural card heights and asymmetric information balance. */
.twl-case-page .twl-case-task__grid {
  grid-template-columns:
    minmax(0, 0.74fr)
    minmax(0, 1.02fr);

  gap: 18px;

  align-items: start;
}


.twl-case-page .twl-case-task__column {
  align-self: start;
}


/* Process: count-aware without JS. */
.twl-case-page .twl-case-process__list {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}


.twl-case-page
.twl-case-process__list:has(> .twl-case-step:only-child) {
  grid-template-columns:
    minmax(0, 1fr);
}


.twl-case-page
.twl-case-process__list:has(> .twl-case-step:nth-child(3):last-child),
.twl-case-page
.twl-case-process__list:has(> .twl-case-step:nth-child(5):last-child),
.twl-case-page
.twl-case-process__list:has(> .twl-case-step:nth-child(6):last-child) {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


.twl-case-page .twl-case-step {
  display: grid;

  grid-template-columns:
    42px minmax(0, 1fr);

  column-gap: 14px;
  row-gap: 18px;

  align-content: start;

  padding:
    clamp(22px, 2.35vw, 30px);

  background:
    rgba(10, 13, 27, 0.62);

  border-color:
    rgba(150, 160, 255, 0.13);
}


.twl-case-page .twl-case-step__content {
  display: contents;
}


.twl-case-page .twl-case-step__number {
  grid-column: 1;
  grid-row: 1;

  align-self: start;

  padding-top: 5px;
}


.twl-case-page .twl-case-step__title {
  grid-column: 2;
  grid-row: 1;

  min-width: 0;

  font-size:
    clamp(18px, 1.45vw, 22px);
}


.twl-case-page .twl-case-step__description {
  grid-column:
    1 / -1;

  grid-row: 2;

  margin-top:
    0 !important;

  max-width:
    100%;
}


/* Gallery secondary controls. */
.twl-case-page .twl-case-gallery__counter {
  color:
    #858daa;

  font-size: 11px;
}


.twl-case-page .twl-case-gallery__counter-current {
  color:
    var(--twl-case-text);

  font-size: 14px;
  font-weight: 600;
}


.twl-case-page .twl-case-gallery__progress.swiper-pagination {
  height: 3px;

  background:
    rgba(160, 170, 255, 0.16);
}


.twl-case-page .twl-case-gallery__button {
  border-color:
    rgba(160, 170, 255, 0.22);

  background:
    rgba(255, 255, 255, 0.03);
}


.twl-case-page .twl-case-gallery__button:hover:not(:disabled) {
  border-color:
    rgba(185, 193, 255, 0.38);

  background:
    rgba(100, 115, 255, 0.085);
}


/* Challenges: filled title = 30/70, empty title = one text column. */
.twl-case-page .twl-case-challenge {
  grid-template-columns:
    minmax(170px, 0.55fr)
    minmax(0, 1.45fr);

  gap:
    clamp(28px, 4vw, 56px);

  align-items: start;
}


.twl-case-page
.twl-case-challenge:has(> .twl-case-challenge__title:empty) {
  grid-template-columns:
    minmax(0, 840px);

  justify-content: start;
}


.twl-case-page
.twl-case-challenge:has(> .twl-case-challenge__title:empty)
.twl-case-challenge__title {
  display: none;
}


.twl-case-page
.twl-case-challenge:has(> .twl-case-challenge__title:empty)
.twl-case-challenge__description {
  max-width: 840px;
}


/* Related card typography for the current universal card markup. */
.twl-case-related .case-card__category {
  margin-bottom: 14px;

  color: #858fc3;

  font:
    500
    10px/1.4
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}


.twl-case-related .case-card__meta dt {
  color:
    var(--twl-case-muted);

  font:
    500
    10px/1.3
    "IBM Plex Mono",
    monospace;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}


.twl-case-related .case-card__meta dd {
  margin:
    6px
    0
    0;

  color: #c7cada;

  font-size: 12px;
  line-height: 1.5;
}


.twl-case-related .case-card__link {
  padding-top: 18px;

  color:
    var(--twl-case-lavender);

  font-size: 13px;
  font-weight: 600;
}


/* =========================================================
   CASE NAVIGATION — STEP 3
   ========================================================= */

.twl-case-navigation {
  padding:
    clamp(26px, 3vw, 42px)
    0
    clamp(42px, 4.5vw, 64px);

  background:
    #050711;
}


.twl-case-navigation__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0;

  border-block:
    1px solid
    var(--twl-case-border);
}


/* One real link always uses the full container width. */
.twl-case-navigation__grid
> .twl-case-navigation__item:only-child {
  grid-column:
    1 / -1;
}


.twl-case-navigation__item {
  min-width: 0;
  min-height: 96px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    24px
    clamp(4px, 1.2vw, 16px);

  border: 0;
  border-radius: 0;

  background:
    transparent;

  color:
    inherit;

  text-decoration: none;

  transition:
    background 180ms ease,
    color 180ms ease;
}


/* Divider exists only when both real links are present. */
.twl-case-navigation__item
+ .twl-case-navigation__item {
  border-left:
    1px solid
    var(--twl-case-border);
}


.twl-case-navigation__item--previous {
  align-items:
    flex-start;

  padding-right:
    clamp(24px, 3vw, 48px);

  text-align:
    left;
}


.twl-case-navigation__item--next {
  align-items:
    flex-end;

  padding-left:
    clamp(24px, 3vw, 48px);

  text-align:
    right;
}


.twl-case-navigation__grid
> .twl-case-navigation__item:only-child {
  padding-inline:
    clamp(4px, 1.2vw, 16px);

  border-left: 0;
}


.twl-case-navigation__label {
  display: block;

  margin-bottom:
    9px;

  color:
    #858daa;

  font:
    600
    10px/1.4
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;

  transition:
    color 180ms ease;
}


.twl-case-navigation__item strong {
  display:
    -webkit-box;

  max-width:
    620px;

  overflow:
    hidden;

  color:
    var(--twl-case-text);

  font-size:
    clamp(18px, 1.55vw, 22px);

  font-weight:
    600;

  line-height:
    1.24;

  letter-spacing:
    -0.025em;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}


@media (hover: hover) and (pointer: fine) {

  .twl-case-navigation__item:hover {
    background:
      rgba(100, 115, 255, 0.028);
  }


  .twl-case-navigation__item:hover
  .twl-case-navigation__label {
    color:
      var(--twl-case-lavender);
  }

}


.twl-case-navigation__item:focus-visible {
  outline:
    2px solid
    var(--twl-case-lavender);

  outline-offset:
    -2px;
}


/* =========================================================
   MERMAID / FRONTEND VIEWER — STEP 2
   =========================================================
 *
 * case-content.css одновременно используется в Gutenberg,
 * поэтому frontend-only поведение архитектурной схемы
 * переопределяем здесь, внутри контекста single case.
 */

.twl-case-page .twl-case-architecture__canvas {
  position: relative;
}


/*
 * Controls остаются теми же элементами saved markup,
 * но больше не воспринимаются как отдельная toolbar-row.
 */
.twl-case-page .twl-case-architecture__toolbar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;

  min-height: 0;

  gap: 6px;

  padding: 0;

  border: 0;

  background: transparent;
}


.twl-case-page .twl-case-architecture__tool {
  min-width: 34px;
  height: 34px;

  padding:
    0 9px;

  border-color:
    rgba(160, 170, 255, 0.18);

  border-radius:
    9px;

  background:
    rgba(5, 7, 17, 0.78);

  color:
    #b9bfd8;

  backdrop-filter:
    blur(10px);
}


.twl-case-page .twl-case-architecture__tool--reset {
  min-width: 60px;

  color:
    var(--twl-case-text);
}


.twl-case-page
.twl-case-architecture__tool:hover:not(:disabled) {
  border-color:
    rgba(185, 193, 255, 0.34);

  background:
    rgba(100, 115, 255, 0.1);
}


/*
 * DEFAULT / ZOOM-OUT:
 * diagram определяет высоту viewport самостоятельно.
 * Никакого внутреннего viewer-scroll на 100% и ниже.
 */
.twl-case-page .twl-case-architecture__viewport {
  min-height: 0;
  max-height: none;

  padding:
    70px
    clamp(24px, 4vw, 48px)
    clamp(28px, 4vw, 48px);

  overflow: hidden;

  overscroll-behavior: auto;

  scrollbar-width: thin;

  /*
   * Mermaid canvas интерактивен:
   * Ctrl + wheel — zoom,
   * Shift + wheel — horizontal pan,
   * ЛКМ drag — pan при zoom > 100%.
   */
  cursor: grab;
}


.twl-case-page
.twl-case-architecture__viewport.is-panning {
  cursor: grabbing;

  user-select: none;
  -webkit-user-select: none;
}


.twl-case-page
.twl-case-architecture__viewport.is-panning * {
  cursor: grabbing !important;
}


.twl-case-page .twl-case-architecture__diagram {
  min-width: 0;

  transition:
    width 180ms ease;
}


.twl-case-page
.twl-case-architecture__diagram svg {
  display: block;

  width: 100% !important;
  height: auto !important;

  max-width: none !important;

  margin-inline: auto;
}


/*
 * ZOOM > 100%:
 * пользователь сознательно увеличил diagram — только тогда
 * viewport становится scroll/pan area.
 */
.twl-case-page
.twl-case-architecture.is-zoomed-in
.twl-case-architecture__viewport {
  max-height:
    min(78vh, 900px);

  overflow: auto;

  overscroll-behavior:
    contain;

  scrollbar-color:
    rgba(160, 170, 255, 0.28)
    rgba(255, 255, 255, 0.025);
}


/*
 * На уменьшенном масштабе diagram остаётся по центру,
 * а scroll не появляется.
 */
.twl-case-page
.twl-case-architecture.is-zoomed-out
.twl-case-architecture__diagram {
  margin-inline: auto;
}


@media (hover: hover) and (pointer: fine) {

  .twl-case-page
  .twl-case-architecture__viewport:hover {
    cursor: grab;
  }


  .twl-case-page
  .twl-case-architecture__viewport.is-panning:hover {
    cursor: grabbing;
  }

}


@media
(max-width: 767px) {

  .twl-case-page .twl-case-architecture__toolbar {
    top: 10px;
    right: 10px;
  }


  .twl-case-page .twl-case-architecture__tool {
    min-width: 40px;
    height: 40px;

    padding:
      0 10px;
  }


  .twl-case-page .twl-case-architecture__tool--reset {
    min-width: 64px;
  }


  .twl-case-page .twl-case-architecture__viewport {
    padding:
      64px
      16px
      22px;
  }


  .twl-case-page
  .twl-case-architecture.is-zoomed-in
  .twl-case-architecture__viewport {
    max-height:
      min(72vh, 680px);
  }

}



/* =========================================================
   RELATED CASES
   ========================================================= */

.twl-case-related {
  padding:
    clamp(52px, 5.5vw, 76px)
    0
    clamp(68px, 7vw, 96px);

  background:
    linear-gradient(
      180deg,
      #050711,
      #080a18
    );
}


.twl-case-related__heading {
  max-width: 850px;

  margin-bottom:
    clamp(34px, 4vw, 48px);
}


.twl-case-related__code,
.twl-case-cta__code {
  margin:
    0
    0
    18px;

  color:
    var(--twl-case-lavender);

  font:
    600
    11px/1.4
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.twl-case-related__title {
  margin: 0;

  color:
    var(--twl-case-text);

  font-size:
    clamp(34px, 4vw, 58px);

  font-weight: 600;
  line-height: 1.06;

  letter-spacing:
    -0.045em;
}


.twl-case-related__lead {
  max-width: 720px;

  margin:
    20px
    0
    0;

  color:
    var(--twl-case-secondary);

  font-size:
    clamp(15px, 1.25vw, 18px);

  line-height:
    1.7;
}


.twl-case-related__grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 18px;

  align-items:
    stretch;
}


/* =========================================================
   CASE CARD
   ========================================================= */

.twl-case-related .case-card {
  position: relative;

  min-width: 0;
  height: 100%;

  display: flex;

  flex-direction:
    column;

  overflow: hidden;

  border:
    1px solid
    var(--twl-case-border);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 19, 39, 0.94),
      rgba(8, 10, 22, 0.94)
    );

  transition:
    transform 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}


.twl-case-related .case-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(166, 176, 255, 0.32);

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.18);
}


/* =========================================================
   CASE CARD IMAGE
   ========================================================= */

.twl-case-related .case-card__media {
  display: block;

  overflow: hidden;

  width: 100%;

  aspect-ratio:
    16 / 9;

  background:
    #0b0e1c;
}


.twl-case-related .case-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit:
    cover;

  transition:
    transform 500ms ease;
}


.twl-case-related
.case-card:hover
.case-card__image {
  transform:
    scale(1.025);
}


/* =========================================================
   CASE CARD BODY
   ========================================================= */

.twl-case-related .case-card__body {
  position: relative;

  flex: 1;

  display: flex;

  flex-direction:
    column;

  padding:
    24px;
}


/* =========================================================
   CASE CARD META
   ========================================================= */

.twl-case-related .case-card__meta {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  align-items: start;

  gap: 14px;

  margin:
    20px
    0;

  padding:
    15px
    0;

  border-block:
    1px solid
    rgba(150, 160, 255, 0.11);

  color:
    var(--twl-case-muted);
}




/* =========================================================
   CASE CARD TITLE
   ========================================================= */

.twl-case-related .case-card__title {
  max-width: 100%;

  margin: 0;

  color:
    var(--twl-case-text);

  font-size:
    clamp(21px, 1.7vw, 27px);

  font-weight: 600;
  line-height: 1.12;

  letter-spacing:
    -0.035em;

  text-wrap:
    balance;
}




/* =========================================================
   CASE CARD EXCERPT
   ========================================================= */

.twl-case-related .case-card__excerpt {
  max-width: 100%;

  margin:
    14px
    0
    0;

  color:
    var(--twl-case-secondary);

  font-size: 14px;
  line-height: 1.62;
}




/* =========================================================
   CTA
   ========================================================= */

.twl-case-cta {
  padding:
    0
    0
    clamp(76px, 8vw, 118px);

  background:
    #080a18;
}


.twl-case-cta__box {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  padding:
    clamp(42px, 6vw, 76px);

  border:
    1px solid
    rgba(160, 170, 255, 0.24);

  border-radius:
    28px;

  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(100, 115, 255, 0.15),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(15, 19, 39, 0.96),
      rgba(7, 9, 22, 0.97)
    );
}


.twl-case-cta__grid {
  position: absolute;
  inset: 0;

  z-index: -1;

  opacity: 0.32;

  background-image:
    linear-gradient(
      rgba(134, 144, 255, 0.055)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(134, 144, 255, 0.055)
      1px,
      transparent 1px
    );

  background-size:
    58px 58px;

  -webkit-mask-image:
    radial-gradient(
      circle at 75% 45%,
      #000,
      transparent 70%
    );

  mask-image:
    radial-gradient(
      circle at 75% 45%,
      #000,
      transparent 70%
    );
}


.twl-case-cta__content {
  max-width:
    760px;
}


.twl-case-cta__title {
  margin: 0;

  color:
    var(--twl-case-text);

  font-size:
    clamp(36px, 4.8vw, 68px);

  font-weight: 600;
  line-height: 1.04;

  letter-spacing:
    -0.05em;
}


.twl-case-cta__text {
  max-width:
    650px;

  margin:
    22px
    0
    0;

  color:
    var(--twl-case-secondary);

  font-size:
    clamp(16px, 1.35vw, 19px);

  line-height:
    1.7;
}


.twl-case-cta__button {
  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  margin-top:
    30px;

  padding:
    12px 18px;

  border:
    1px solid transparent;

  border-radius:
    14px;

  background:
    linear-gradient(
      135deg,
      #6876ff 0%,
      #725fff 100%
    );

  color: #fff;

  font-size:
    14px;

  font-weight:
    600;

  text-decoration:
    none;

  box-shadow:
    0 12px 40px
    rgba(94, 89, 255, 0.2);

  transition:
    transform 180ms ease,
    box-shadow 280ms ease;
}


.twl-case-cta__button span {
  transition:
    transform 180ms ease;
}


.twl-case-cta__button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 16px 46px
    rgba(94, 89, 255, 0.32);
}


.twl-case-cta__button:hover span {
  transform:
    translate(2px, -2px);
}


/* =========================================================
   FOCUS
   ========================================================= */

.twl-case-page a:focus-visible {
  outline:
    2px solid
    var(--twl-case-lavender);

  outline-offset:
    4px;
}


/* =========================================================
   RESPONSIVE SYSTEM
   ========================================================= */

/* ---------------------------------------------------------
   LARGE / TABLET LANDSCAPE
   --------------------------------------------------------- */

@media
(max-width: 1180px) {

  .twl-case-hero__title {
    font-size:
      clamp(38px, 5vw, 60px);
  }


  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:nth-child(3):last-child),
  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:nth-child(5):last-child),
  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:nth-child(6):last-child) {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media
(max-width: 1024px) {

  .twl-case-container {
    width:
      min(
        calc(100% - 48px),
        1400px
      );
  }


  .twl-case-hero {
    padding:
      92px
      0
      58px;
  }


  .twl-case-breadcrumbs {
    margin-bottom:
      30px;
  }


  .twl-case-hero__layout {
    grid-template-columns:
      1fr;

    gap:
      36px;
  }


  .twl-case-hero__content,
  .twl-case-hero__aside {
    width: 100%;
    max-width: 850px;
  }


  .twl-case-hero__title {
    max-width:
      780px;

    font-size:
      clamp(36px, 6.4vw, 52px);
  }


  .twl-case-hero__lead {
    max-width:
      720px;
  }


  .twl-case-hero__aside {
    gap:
      16px;
  }


  .twl-case-hero__visual {
    width:
      100%;

    max-width:
      850px;
  }


  .twl-case-technologies__box {
    grid-template-columns:
      1fr;

    gap:
      18px;
  }


  .twl-case-page .twl-case-block {
    margin-bottom:
      clamp(72px, 8vw, 86px);
  }


  .twl-case-page .twl-case-process__list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:only-child) {
    grid-template-columns:
      1fr;
  }


  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:nth-child(3):last-child),
  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:nth-child(5):last-child),
  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:nth-child(6):last-child) {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .twl-case-related__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ---------------------------------------------------------
   TABLET PORTRAIT
   --------------------------------------------------------- */

@media
(max-width: 900px) {

  .twl-case-page .twl-case-task__grid,
  .twl-case-page .twl-case-challenge {
    grid-template-columns:
      1fr;
  }


  .twl-case-hero__services {
    margin-bottom:
      18px;
  }


  .twl-case-hero__lead {
    margin-top:
      18px;

    font-size:
      16px;
  }


  .twl-case-hero__visual {
    padding:
      9px;

    border-radius:
      21px;
  }


  .twl-case-hero__image {
    border-radius:
      14px;
  }


  .twl-case-main {
    padding:
      40px
      0
      52px;
  }


  .twl-case-technologies {
    padding:
      38px
      0
      28px;
  }


  .twl-case-technologies__box {
    padding:
      20px;

    border-radius:
      18px;
  }


  .twl-case-navigation {
    padding:
      18px
      0
      42px;
  }


  .twl-case-navigation__grid {
    grid-template-columns:
      1fr;
  }


  .twl-case-navigation__item {
    min-height:
      84px;

    padding:
      18px 0;
  }


  .twl-case-navigation__item
  + .twl-case-navigation__item {
    border-left: 0;

    border-top:
      1px solid
      var(--twl-case-border);
  }


  .twl-case-navigation__item--previous,
  .twl-case-navigation__item--next {
    align-items:
      flex-start;

    padding-inline:
      0;

    text-align:
      left;
  }


  .twl-case-navigation__item strong {
    max-width:
      100%;

    font-size:
      19px;
  }


  .twl-case-related {
    padding:
      64px
      0
      72px;
  }


  .twl-case-cta {
    padding-bottom:
      68px;
  }


  .twl-case-cta__box {
    padding:
      30px 24px;

    border-radius:
      20px;
  }

}


/* ---------------------------------------------------------
   MOBILE LANDSCAPE / SMALL TABLET
   --------------------------------------------------------- */

@media
(max-width: 700px) {

  .twl-case-container {
    width:
      calc(100% - 32px);
  }


  .twl-case-hero {
    padding:
      86px
      0
      48px;
  }


  .twl-case-breadcrumbs {
    gap:
      6px;

    margin-bottom:
      24px;

    font-size:
      9px;

    line-height:
      1.45;
  }


  .twl-case-hero__layout {
    gap:
      28px;
  }


  .twl-case-hero__code {
    margin-bottom:
      14px;

    font-size:
      10px;
  }


  .twl-case-hero__services {
    gap:
      6px;

    margin-bottom:
      16px;
  }


  .twl-case-tag {
    padding:
      5px 8px;

    font-size:
      9px;
  }


  .twl-case-hero__title {
    font-size:
      clamp(32px, 8.5vw, 42px);

    line-height:
      1.045;
  }


  .twl-case-hero__lead {
    margin-top:
      16px;

    font-size:
      15px;

    line-height:
      1.65;
  }


  .twl-case-hero__aside {
    gap:
      14px;
  }


  .twl-case-hero__visual {
    padding:
      7px;

    border-radius:
      18px;
  }


  .twl-case-hero__image {
    border-radius:
      12px;
  }


  .twl-case-hero__visual-line {
    right:
      18px;

    bottom:
      18px;

    width:
      48px;
  }


  .twl-case-hero__meta-item {
    padding:
      11px
      0;
  }


  .twl-case-hero__meta dt {
    font-size:
      9px;
  }


  .twl-case-hero__meta dd {
    font-size:
      12.5px;
  }


  .twl-case-technologies {
    padding:
      32px
      0
      24px;
  }


  .twl-case-technologies__box {
    padding:
      18px;

    gap:
      16px;
  }


  .twl-case-technologies__code {
    margin-bottom:
      12px;

    font-size:
      10px;
  }


  .twl-case-technologies__title {
    font-size:
      clamp(24px, 7vw, 32px);
  }


  .twl-case-technology {
    min-height:
      34px;

    padding:
      8px
      11px;

    font-size:
      10px;
  }


  .twl-case-main {
    padding:
      34px
      0
      46px;
  }


  .twl-case-page .twl-case-block {
    margin-bottom:
      62px;
  }


  .twl-case-page .twl-case-block__title {
    margin-bottom:
      24px !important;
  }


  .twl-case-page .twl-case-process__list,
  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:only-child),
  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:nth-child(3):last-child),
  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:nth-child(5):last-child),
  .twl-case-page
  .twl-case-process__list:has(> .twl-case-step:nth-child(6):last-child) {
    grid-template-columns:
      1fr;
  }


  .twl-case-page .twl-case-step {
    grid-template-columns:
      38px minmax(0, 1fr);

    column-gap:
      12px;

    row-gap:
      14px;

    padding:
      20px;
  }


  .twl-case-page .twl-case-step__number {
    padding-top:
      4px;
  }


  .twl-case-page .twl-case-step__title {
    font-size:
      19px;
  }


  .twl-case-page .twl-case-gallery__controls {
    grid-template-columns:
      auto minmax(72px, 1fr) auto;

    gap:
      10px;

    margin-top:
      14px;
  }


  .twl-case-page .twl-case-gallery__button {
    width:
      42px;

    height:
      42px;
  }


  .twl-case-page .twl-case-gallery__counter {
    min-width:
      64px;
  }


  .twl-case-related {
    padding:
      54px
      0
      64px;
  }


  .twl-case-related__grid {
    grid-template-columns:
      1fr;
  }


  .twl-case-related__heading {
    margin-bottom:
      30px;
  }


  .twl-case-related__title {
    font-size:
      clamp(30px, 8vw, 42px);
  }


  .twl-case-related .case-card__body {
    padding:
      20px;
  }


  .twl-case-related .case-card__title {
    font-size:
      22px;
  }


  .twl-case-related .case-card__meta {
    gap:
      10px;

    margin:
      18px
      0;

    padding:
      13px
      0;
  }


  .twl-case-cta {
    padding-bottom:
      56px;
  }


  .twl-case-cta__box {
    padding:
      26px
      20px;

    border-radius:
      18px;
  }


  .twl-case-cta__title {
    font-size:
      clamp(31px, 9vw, 44px);
  }


  .twl-case-cta__text {
    margin-top:
      16px;

    font-size:
      15px;
  }


  .twl-case-cta__button {
    min-height:
      46px;

    margin-top:
      22px;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media
(max-width: 480px) {

  .twl-case-container {
    width:
      calc(100% - 28px);
  }


  .twl-case-hero {
    padding-top:
      82px;
  }


  .twl-case-breadcrumbs {
    margin-bottom:
      20px;
  }


  .twl-case-hero__title {
    font-size:
      clamp(30px, 9.6vw, 38px);
  }


  .twl-case-hero__lead {
    font-size:
      14px;
  }


  .twl-case-hero__meta {
    column-gap:
      0;
  }


  .twl-case-hero__meta-item:nth-child(odd) {
    padding-right:
      12px;
  }


  .twl-case-hero__meta-item:nth-child(even) {
    padding-left:
      12px;
  }


  .twl-case-page .twl-case-task__column,
  .twl-case-page .twl-case-result,
  .twl-case-page .twl-case-slide {
    border-radius:
      17px;
  }


  .twl-case-page .twl-case-task__column {
    padding:
      20px;
  }


  .twl-case-page .twl-case-gallery__controls {
    grid-template-columns:
      auto 1fr auto;
  }


  .twl-case-navigation__label {
    font-size:
      9px;
  }


  .twl-case-navigation__item strong {
    font-size:
      18px;
  }

}


/* ---------------------------------------------------------
   MINIMUM SAFETY VIEWPORT
   --------------------------------------------------------- */

@media
(max-width: 360px) {

  .twl-case-container {
    width:
      calc(100% - 24px);
  }


  .twl-case-hero {
    padding-top:
      78px;
  }


  .twl-case-hero__title {
    font-size:
      29px;
  }


  .twl-case-hero__meta {
    grid-template-columns:
      1fr;
  }


  .twl-case-hero__meta-item:nth-child(odd),
  .twl-case-hero__meta-item:nth-child(even) {
    padding-inline:
      0;

    border-left:
      0;
  }


  .twl-case-hero__meta-item:nth-child(n + 2) {
    border-top:
      1px solid
      rgba(150, 160, 255, 0.11);
  }


  .twl-case-technologies__list {
    gap:
      6px;
  }


  .twl-case-technology {
    min-height:
      32px;

    padding:
      7px 9px;

    font-size:
      9px;
  }


  .twl-case-page .twl-case-step {
    padding:
      18px;
  }


  .twl-case-page .twl-case-gallery__button {
    width:
      40px;

    height:
      40px;
  }


  .twl-case-cta__box {
    padding:
      24px
      18px;
  }

}