/* =========================================================
   TEILIORA — GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {
  --tl-bg: #0b0c0c;
  --tl-bg-soft: #101111;
  --tl-surface: rgba(255, 255, 255, 0.035);
  --tl-surface-hover: rgba(255, 255, 255, 0.06);
  --tl-line: rgba(255, 255, 255, 0.10);
  --tl-line-soft: rgba(255, 255, 255, 0.065);

  --tl-text: #f2f3ef;
  --tl-text-soft: rgba(242, 243, 239, 0.70);
  --tl-text-muted: rgba(242, 243, 239, 0.48);

  --tl-accent: #cfff00;
  --tl-accent-soft: rgba(207, 255, 0, 0.14);
  --tl-accent-line: rgba(207, 255, 0, 0.48);

  --tl-container: 1440px;
  --tl-side: 52px;

  --tl-radius-sm: 12px;
  --tl-radius-md: 18px;
  --tl-radius-lg: 26px;

  --tl-ease: cubic-bezier(.22, 1, .36, 1);
  --tl-shadow: 0 24px 80px rgba(0, 0, 0, 0.30);
}

/* ---------- Base ---------- */

html {
  scroll-behavior: smooth;
  background: var(--tl-bg);
}

body {
  margin: 0;
  background:
    radial-gradient(
      circle at 80% 5%,
      rgba(207, 255, 0, 0.035),
      transparent 25%
    ),
    var(--tl-bg);
  color: var(--tl-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
  font-family: "Inter Tight", Arial, sans-serif;
}

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

a {
  color: inherit;
  text-decoration: none;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  border: 0;
  outline: 0;
}

::selection {
  color: #0b0c0c;
  background: var(--tl-accent);
}

/* ---------- Page ---------- */

.tl-page {
  position: relative;
  width: 100%;
  color: var(--tl-text);
  background: transparent;
}

.tl-container {
  width: min(
    calc(100% - var(--tl-side) * 2),
    var(--tl-container)
  );
  margin: 0 auto;
}

.tl-section {
  position: relative;
  padding: 112px 0;
  border-top: 1px solid var(--tl-line-soft);
}

.tl-section--compact {
  padding-top: 80px;
  padding-bottom: 80px;
}

.tl-section-label {
  margin: 0 0 20px;
  color: var(--tl-accent);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tl-title {
  max-width: 980px;
  margin: 0;
  font-size: clamp(42px, 5vw, 82px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.tl-title--medium {
  max-width: 800px;
  font-size: clamp(34px, 3.8vw, 62px);
  line-height: 1.02;
}

.tl-title em {
  color: var(--tl-accent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
}

.tl-text {
  color: var(--tl-text-soft);
  font-size: 16px;
  line-height: 1.65;
}

.tl-text--large {
  font-size: 19px;
  line-height: 1.55;
}

/* ---------- Shared button ---------- */

.tl-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 205px;
  min-height: 54px;
  padding: 0 18px 0 22px;
  overflow: hidden;

  border: 1px solid var(--tl-accent-line);
  border-radius: 9px;

  color: var(--tl-text);
  background: rgba(10, 11, 11, 0.60);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;

  cursor: pointer;
  transition:
    color 0.4s var(--tl-ease),
    border-color 0.4s var(--tl-ease),
    transform 0.4s var(--tl-ease);
}

.tl-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tl-accent);
  transform: translateY(102%);
  transition: transform 0.45s var(--tl-ease);
}

.tl-button span,
.tl-button svg {
  position: relative;
  z-index: 1;
}

.tl-button svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--tl-ease);
}

.tl-button:hover {
  color: #090a09;
  border-color: var(--tl-accent);
  transform: translateY(-2px);
}

.tl-button:hover::before {
  transform: translateY(0);
}

.tl-button:hover svg {
  transform: translateX(4px);
}

/* ---------- Cards ---------- */

.tl-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-md);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.016)
    );
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);

  transition:
    border-color 0.45s var(--tl-ease),
    background 0.45s var(--tl-ease),
    transform 0.45s var(--tl-ease);
}

.tl-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -100px;
  bottom: -120px;
  border-radius: 50%;
  background: rgba(207, 255, 0, 0.12);
  filter: blur(55px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--tl-ease);
}

.tl-card:hover {
  transform: translateY(-5px);
  border-color: rgba(207, 255, 0, 0.26);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.022)
    );
}

.tl-card:hover::after {
  opacity: 1;
}

/* ---------- Reveal animation ---------- */

/*
По умолчанию элементы видимы.
Это важно для Tilda: контент не исчезнет,
даже если JavaScript загрузится позже.
*/

.tl-reveal {
  opacity: 1;
  transform: translateY(0);
}

/*
Анимация включается только после того,
как JavaScript подтвердил свою работу.
*/

html.tl-motion-ready .tl-reveal {
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity 0.8s var(--tl-ease),
    transform 0.8s var(--tl-ease);
}

html.tl-motion-ready .tl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Anchor correction ---------- */

[id^="tl-"] {
  scroll-margin-top: 94px;
}

/* ---------- Tilda corrections ---------- */

#allrecords {
  overflow: clip;
  background: transparent !important;
}

.t-rec {
  background-color: transparent;
}

.t-body {
  background: var(--tl-bg) !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {
  :root {
    --tl-side: 32px;
  }

  .tl-section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .tl-title {
    letter-spacing: -0.04em;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --tl-side: 20px;
    --tl-radius-md: 15px;
    --tl-radius-lg: 20px;
  }

  .tl-section {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .tl-section--compact {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .tl-section-label {
    margin-bottom: 14px;
    font-size: 10px;
  }

  .tl-title {
    font-size: clamp(36px, 11.8vw, 56px);
    line-height: 0.98;
    letter-spacing: -0.05em;
  }

  .tl-title--medium {
    font-size: clamp(32px, 9.6vw, 46px);
  }

  .tl-text {
    font-size: 15px;
  }

  .tl-text--large {
    font-size: 17px;
  }

  .tl-button {
    width: 100%;
    min-height: 56px;
  }

  [id^="tl-"] {
    scroll-margin-top: 76px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479px) {
  :root {
    --tl-side: 16px;
  }

  .tl-title {
    font-size: 35px;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .tl-reveal {
    opacity: 1;
    transform: none;
  }
}

/* MENU */
.tl-header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;

  background: rgba(11, 12, 12, 0);
  transition:
    background 0.45s var(--tl-ease),
    border-color 0.45s var(--tl-ease),
    transform 0.45s var(--tl-ease);
}

.tl-header.is-scrolled {
  border-color: var(--tl-line-soft);
  background: rgba(11, 12, 12, 0.82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.tl-header__inner {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  align-items: center;

  width: min(
    calc(100% - var(--tl-side) * 2),
    var(--tl-container)
  );
  min-height: 86px;
  margin: 0 auto;
}

.tl-header__logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
}

.tl-header__logo-icon {
  position: relative;
  width: 13px;
  height: 13px;
  border: 2px solid var(--tl-accent);
  transform: rotate(45deg);
}

.tl-header__logo-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--tl-accent);
}

.tl-header__logo-text {
  font-size: 21px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.tl-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.4vw, 58px);
}

.tl-header__nav a {
  position: relative;
  padding: 10px 0;

  color: rgba(242, 243, 239, 0.82);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;

  transition: color 0.3s var(--tl-ease);
}

.tl-header__nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--tl-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--tl-ease);
}

.tl-header__nav a:hover {
  color: var(--tl-text);
}

.tl-header__nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.tl-header__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  justify-self: end;

  width: 192px;
  min-height: 48px;
  padding: 0 15px 0 19px;
  overflow: hidden;

  border: 1px solid var(--tl-accent-line);
  border-radius: 9px;

  color: var(--tl-text);
  background: rgba(10, 11, 11, 0.50);

  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  transition:
    color 0.4s var(--tl-ease),
    transform 0.4s var(--tl-ease);
}

.tl-header__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tl-accent);
  transform: translateY(102%);
  transition: transform 0.45s var(--tl-ease);
}

.tl-header__cta span,
.tl-header__cta svg {
  position: relative;
  z-index: 1;
}

.tl-header__cta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.tl-header__cta:hover {
  color: #080908;
  transform: translateY(-2px);
}

.tl-header__cta:hover::before {
  transform: translateY(0);
}

.tl-header__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.tl-header__burger span {
  position: absolute;
  left: 9px;
  width: 26px;
  height: 1px;
  background: var(--tl-text);
  transition:
    top 0.35s var(--tl-ease),
    transform 0.35s var(--tl-ease);
}

.tl-header__burger span:first-child {
  top: 17px;
}

.tl-header__burger span:last-child {
  top: 26px;
}

.tl-header__burger.is-open span:first-child {
  top: 21px;
  transform: rotate(45deg);
}

.tl-header__burger.is-open span:last-child {
  top: 21px;
  transform: rotate(-45deg);
}

.tl-mobile-menu {
  display: none;
}

/* ---------- Tablet ---------- */

@media (max-width: 1199px) {
  .tl-header__inner {
    grid-template-columns: 190px 1fr 190px;
    min-height: 78px;
  }

  .tl-header__nav {
    gap: 22px;
  }

  .tl-header__nav a {
    font-size: 10px;
  }

  .tl-header__cta {
    width: 180px;
  }
}

.tl-header__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-header__logo-text {
  font-size: 20px;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: 0.015em;
}

.tl-header__logo-subtext {
  color: var(--tl-text-muted);
  font-size: 7px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .tl-header {
    background: rgba(11, 12, 12, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .tl-header__inner {
    display: flex;
    justify-content: space-between;
    min-height: 72px;
  }

  .tl-header__logo-text {
    font-size: 18px;
  }

  .tl-header__nav,
  .tl-header__cta {
    display: none;
  }

  .tl-header__burger {
    display: block;
  }

  .tl-mobile-menu {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100%;
    height: 100dvh;
    padding:
      118px
      var(--tl-side)
      32px;

    visibility: hidden;
    opacity: 0;
    background:
      radial-gradient(
        circle at 80% 20%,
        rgba(207, 255, 0, 0.09),
        transparent 34%
      ),
      #0b0c0c;

    transform: translateY(-12px);
    transition:
      visibility 0.45s,
      opacity 0.45s var(--tl-ease),
      transform 0.45s var(--tl-ease);
  }

  .tl-mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .tl-mobile-menu__links {
    display: flex;
    flex-direction: column;
  }

  .tl-mobile-menu__links a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 17px 0;

    border-bottom: 1px solid var(--tl-line-soft);

    color: var(--tl-text);
    font-size: clamp(30px, 9vw, 46px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.045em;
    text-transform: uppercase;
  }

  .tl-mobile-menu__links span {
    min-width: 24px;
    color: var(--tl-accent);
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  .tl-mobile-menu__button {
    flex: 0 0 auto;
  }

  body.tl-menu-open {
    overflow: hidden;
  }
}
@media (max-width: 900px) {
  .tl-header__logo-text {
    font-size: 17px;
  }

  .tl-header__logo-subtext {
    font-size: 6px;
    letter-spacing: 0.2em;
  }
}

/* FOOTER */
.tl-footer {
  position: relative;
  padding: 34px 0 28px;
  border-top: 1px solid var(--tl-line-soft);
  background: var(--tl-bg);
}

.tl-footer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}

.tl-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;

  font-size: 21px;
  line-height: 1;
  font-weight: 400;
}

.tl-footer__logo-icon {
  position: relative;
  width: 13px;
  height: 13px;
  border: 2px solid var(--tl-accent);
  transform: rotate(45deg);
}

.tl-footer__logo-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--tl-accent);
}

.tl-footer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.tl-footer__nav a,
.tl-footer__socials a,
.tl-footer__legal a {
  color: var(--tl-text-soft);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: color 0.3s var(--tl-ease);
}

.tl-footer__nav a:hover,
.tl-footer__socials a:hover,
.tl-footer__legal a:hover {
  color: var(--tl-accent);
}

.tl-footer__socials {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.tl-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;

  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--tl-line-soft);
}

.tl-footer__bottom p {
  margin: 0;
  color: var(--tl-text-muted);
  font-size: 10px;
  line-height: 1.5;
}

.tl-footer__bottom p:nth-child(2) {
  text-align: center;
}

.tl-footer__legal {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
}

/* ---------- Tablet ---------- */

@media (max-width: 1050px) {
  .tl-footer__top {
    grid-template-columns: 1fr auto;
  }

  .tl-footer__nav {
    display: none;
  }

  .tl-footer__bottom {
    grid-template-columns: 1fr 1fr;
  }

  .tl-footer__bottom p:nth-child(2) {
    display: none;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .tl-footer {
    padding-top: 28px;
  }

  .tl-footer__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .tl-footer__socials {
    justify-content: flex-start;
    gap: 28px;
  }

  .tl-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 28px;
  }

  .tl-footer__legal {
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 8px;
  }
}
.tl-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-footer__logo-text {
  color: var(--tl-text);
  font-size: 20px;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: 0.015em;
}

.tl-footer__logo-subtext {
  color: var(--tl-text-muted);
  font-size: 7px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
/* =========================================================
   TEILIORA — HERO
   ========================================================= */

.tl-hero {
  position: relative;
  min-height: 780px;
  padding-top: 86px;
  overflow: hidden;
  border-bottom: 1px solid var(--tl-line-soft);

  background:
    linear-gradient(
      90deg,
      rgba(11, 12, 12, 0.98) 0%,
      rgba(11, 12, 12, 0.95) 42%,
      rgba(11, 12, 12, 0.72) 67%,
      rgba(11, 12, 12, 0.96) 100%
    ),
    #0b0c0c;
}

.tl-hero::before {
  content: "";
  position: absolute;
  inset: 0;

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

  background-size: 88px 88px;
  mask-image:
    linear-gradient(
      to right,
      transparent,
      rgba(0, 0, 0, 0.35) 55%,
      rgba(0, 0, 0, 0.75)
    );

  pointer-events: none;
}

.tl-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}

.tl-hero__glow--one {
  top: 130px;
  right: 6%;
  width: 420px;
  height: 420px;
  background: rgba(207, 255, 0, 0.065);
}

.tl-hero__glow--two {
  right: 28%;
  bottom: -220px;
  width: 500px;
  height: 360px;
  background: rgba(255, 255, 255, 0.035);
}

.tl-hero__container {
  position: relative;
  display: grid;

  grid-template-columns:
    minmax(650px, 1.12fr)
    minmax(500px, 0.88fr);

  align-items: center;
  gap: 10px;

  min-height: calc(780px - 86px);
  padding-top: 54px;
  padding-bottom: 56px;
}
@media (max-width: 1350px) and (min-width: 1051px) {
  .tl-hero__container {
    grid-template-columns:
      minmax(590px, 1.08fr)
      minmax(430px, 0.92fr);
  }

  .tl-hero__title {
    font-size: clamp(48px, 4vw, 62px);
  }
}

.tl-hero__content {
  position: relative;
  z-index: 3;
  align-self: center;
  padding-bottom: 26px;
}

.tl-hero__label {
  margin-bottom: 22px;
}

.tl-hero__title {
  width: 100%;
  max-width: 820px;
  margin: 0;

  color: var(--tl-text);
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(52px, 4.25vw, 72px);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.042em;
  text-transform: uppercase;
}

.tl-hero__title span {
  display: block;
  white-space: nowrap;
}

.tl-hero__title em {
  color: var(--tl-accent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.08em;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.tl-hero__description {
  max-width: 520px;
  margin: 28px 0 0;

  color: var(--tl-text-soft);
  font-size: 15px;
  line-height: 1.7;
}

.tl-hero__actions {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-top: 38px;
}

.tl-hero__button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.tl-hero__proof {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tl-hero__proof p {
  margin: 0;
  color: var(--tl-text-muted);
  font-size: 11px;
  line-height: 1.55;
}

.tl-hero__avatars {
  display: flex;
  align-items: center;
}

.tl-avatar {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  margin-left: -8px;

  border: 2px solid #0b0c0c;
  border-radius: 50%;
  overflow: hidden;
}

.tl-avatar:first-child {
  margin-left: 0;
}

.tl-avatar::before,
.tl-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
}

.tl-avatar::before {
  top: 6px;
  width: 11px;
  height: 11px;
  background: rgba(255, 255, 255, 0.88);
}

.tl-avatar::after {
  bottom: -5px;
  width: 25px;
  height: 21px;
  background: rgba(255, 255, 255, 0.75);
}

.tl-avatar--one {
  background:
    linear-gradient(145deg, #454a43, #121413);
}

.tl-avatar--two {
  background:
    linear-gradient(145deg, #5a5450, #181817);
}

.tl-avatar--three {
  background:
    linear-gradient(145deg, #b7cf36, #202613);
}

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

.tl-hero__visual {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 650px;
  opacity: 1;
  visibility: visible;
}

.tl-hero-scene {
  position: absolute;
  top: 50%;
  left: 55%;

 width: 730px;
  height: 650px;

  transform:
    translate(-49%, -48%)
    perspective(1100px)
    rotateX(1deg)
    rotateY(-3deg);
}

.tl-hero-scene::before {
  content: "";
  position: absolute;
  inset: 14% 12% 4%;

  background:
    radial-gradient(
      circle at 45% 44%,
      rgba(207, 255, 0, 0.14),
      transparent 42%
    );

  filter: blur(30px);
}

.tl-hero-scene__frame {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 28px 70px rgba(0, 0, 0, 0.24);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.tl-hero-scene__frame--back {
  top: 16px;
  right: 32px;
  width: 238px;
  height: 320px;
  transform: skewY(28deg);
  opacity: 0.60;
}

.tl-hero-scene__frame--middle {
  top: 80px;
  left: 160px;
  width: 280px;
  height: 370px;
  transform: skewY(28deg);
  opacity: 0.88;
}

.tl-hero-scene__frame--front {
  top: 154px;
  left: 92px;
  width: 350px;
  height: 280px;
  transform: skewY(28deg);
  opacity: 0.92;
}

.tl-hero-scene__accent-panel {
  position: absolute;
  top: 124px;
  left: 175px;
  width: 176px;
  height: 250px;

  background:
    linear-gradient(
      150deg,
      rgba(207, 255, 0, 0.42),
      rgba(207, 255, 0, 0.035)
    );

  border-left: 1px solid rgba(207, 255, 0, 0.55);
  transform: skewY(28deg);
  filter: saturate(0.85);
}

.tl-hero-scene__line {
  position: absolute;
  z-index: 4;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.85),
      rgba(255, 255, 255, 0.08)
    );

  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.16);
}

.tl-hero-scene__line--one {
  top: 172px;
  left: 54px;
  width: 315px;
  transform: rotate(28deg);
}

.tl-hero-scene__line--two {
  top: 129px;
  left: 145px;
  width: 285px;
  transform: rotate(28deg);
  opacity: 0.72;
}

.tl-rock {
  position: absolute;
  z-index: 5;
  left: 104px;
  bottom: 90px;

  width: 350px;
  height: 330px;

  transform: rotate(-4deg);
  filter:
    drop-shadow(0 34px 45px rgba(0, 0, 0, 0.48));
}

.tl-rock__layer {
  position: absolute;
  display: block;
  inset: 0;

  background:
    radial-gradient(
      circle at 42% 18%,
      rgba(255, 255, 255, 0.36),
      transparent 22%
    ),
    radial-gradient(
      circle at 60% 42%,
      rgba(255, 255, 255, 0.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #5b5e58 0%,
      #2d302d 28%,
      #121413 72%,
      #070808 100%
    );

  clip-path: polygon(
    50% 2%,
    67% 12%,
    77% 28%,
    92% 44%,
    88% 66%,
    100% 84%,
    77% 100%,
    47% 93%,
    18% 100%,
    0 80%,
    10% 58%,
    7% 37%,
    28% 24%
  );
}

.tl-rock__layer--one {
  opacity: 1;
}

.tl-rock__layer--two {
  transform: scale(0.93) translate(18px, 26px);
  opacity: 0.52;
  filter: contrast(1.4);
}

.tl-rock__layer--three {
  transform: scale(0.83) translate(-16px, 50px);
  opacity: 0.30;
  mix-blend-mode: screen;
}

.tl-rock__highlight {
  position: absolute;
  top: 9%;
  left: 33%;

  width: 120px;
  height: 56px;

  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0)
    );

  clip-path: polygon(
    0 64%,
    38% 4%,
    100% 32%,
    71% 100%
  );

  opacity: 0.55;
  filter: blur(1px);
}

.tl-hero-scene__accent-line {
  position: absolute;
  z-index: 7;
  left: 333px;
  bottom: 82px;

  width: 3px;
  height: 258px;

  background: var(--tl-accent);
  box-shadow:
    0 0 18px rgba(207, 255, 0, 0.28);
}

.tl-hero-scene__floor {
  position: absolute;
  z-index: 1;
  right: -80px;
  bottom: 50px;

  width: 600px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.22),
      transparent
    );

  transform: rotate(-31deg);
}

.tl-hero__scroll {
  position: absolute;
  right: 0;
  bottom: 37px;

  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--tl-text-muted);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  transition: color 0.3s var(--tl-ease);
}

.tl-hero__scroll:hover {
  color: var(--tl-text);
}

.tl-hero__scroll-icon {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1px solid var(--tl-accent-line);
  border-radius: 50%;
}

.tl-hero__scroll-icon::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 5px;
  width: 1px;
  height: 5px;
  background: var(--tl-accent);
}

/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes tlHeroFloat {
  0%,
  100% {
    transform:
      translate(-49%, -48%)
      perspective(1100px)
      rotateX(1deg)
      rotateY(-3deg)
      translateY(0);
  }

  50% {
    transform:
      translate(-49%, -48%)
      perspective(1100px)
      rotateX(1deg)
      rotateY(-3deg)
      translateY(-10px);
  }
}

@keyframes tlAccentPulse {
  0%,
  100% {
    opacity: 0.78;
  }

  50% {
    opacity: 1;
  }
}

.tl-hero-scene {
  animation:
    tlHeroFloat 8s ease-in-out infinite;
}

.tl-hero-scene__accent-line {
  animation:
    tlAccentPulse 3.2s ease-in-out infinite;
}

/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1350px) {
  .tl-hero {
    min-height: 720px;
  }

  .tl-hero__container {
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.95fr);
    min-height: calc(720px - 86px);
  }

  .tl-hero__title {
    font-size: clamp(48px, 5vw, 72px);
  }

  .tl-hero-scene {
    width: 560px;
    height: 540px;
    transform:
      translate(-52%, -47%)
      scale(0.92)
      perspective(1100px)
      rotateX(1deg)
      rotateY(-3deg);
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {
  .tl-hero {
    min-height: auto;
    padding-top: 78px;
  }

  .tl-hero__container {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: auto;
    padding-top: 62px;
    padding-bottom: 74px;
  }

  .tl-hero__content {
    max-width: 760px;
    padding-bottom: 0;
  }

  .tl-hero__title {
    font-size: clamp(54px, 8vw, 78px);
  }

  .tl-hero__visual {
    min-height: 520px;
  }

  .tl-hero-scene {
    top: 48%;
    left: 56%;
    transform:
      translate(-50%, -50%)
      scale(0.90);
  }

  .tl-hero__scroll {
    display: none;
  }

  @keyframes tlHeroFloat {
    0%,
    100% {
      transform:
        translate(-50%, -50%)
        scale(0.90)
        translateY(0);
    }

    50% {
      transform:
        translate(-50%, -50%)
        scale(0.90)
        translateY(-8px);
    }
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-hero {
    padding-top: 72px;
  }

  .tl-hero::before {
    background-size: 54px 54px;
    opacity: 0.65;
  }

  .tl-hero__container {
    display: flex;
    flex-direction: column;
    padding-top: 42px;
    padding-bottom: 54px;
  }

  .tl-hero__content {
    width: 100%;
  }

  .tl-hero__label {
    margin-bottom: 17px;
  }

  .tl-hero__title {
    font-size: clamp(39px, 11.2vw, 58px);
    line-height: 0.99;
  }

  .tl-hero__description {
    max-width: 430px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.65;
  }

  .tl-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    margin-top: 30px;
  }

  .tl-hero__proof {
    justify-content: flex-start;
  }

  .tl-hero__visual {
    width: 100%;
    min-height: 390px;
    margin-top: 6px;
  }

  .tl-hero-scene {
    top: 48%;
    left: 51%;

    width: 560px;
    height: 520px;

    transform:
      translate(-50%, -50%)
      scale(0.66);
  }

  .tl-hero__glow--one {
    top: auto;
    right: -120px;
    bottom: 90px;
    width: 320px;
    height: 320px;
  }

  @keyframes tlHeroFloat {
    0%,
    100% {
      transform:
        translate(-50%, -50%)
        scale(0.66)
        translateY(0);
    }

    50% {
      transform:
        translate(-50%, -50%)
        scale(0.66)
        translateY(-7px);
    }
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479px) {
  .tl-hero__title {
    font-size: 37px;
  }

  .tl-hero__description br {
    display: none;
  }

  .tl-hero__visual {
    min-height: 340px;
  }

  .tl-hero-scene {
    left: 52%;
    transform:
      translate(-50%, -50%)
      scale(0.58);
  }

  @keyframes tlHeroFloat {
    0%,
    100% {
      transform:
        translate(-50%, -50%)
        scale(0.58)
        translateY(0);
    }

    50% {
      transform:
        translate(-50%, -50%)
        scale(0.58)
        translateY(-6px);
    }
  }
}
@media (max-width: 767px) {
  .tl-hero__title {
    font-size: clamp(39px, 11vw, 54px);
    line-height: 0.98;
  }

  .tl-hero__title span {
    display: inline;
    white-space: normal;
  }

  .tl-hero__title span::after {
    content: " ";
  }
}

/* =========================================================
   TEILIORA — SERVICES
   ========================================================= */

.tl-services {
  position: relative;
  overflow: hidden;
}

.tl-services::before {
  content: "";
  position: absolute;
  top: 12%;
  right: -180px;

  width: 440px;
  height: 440px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.045);
  filter: blur(120px);
  pointer-events: none;
}

.tl-services__head {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.55fr);

  align-items: end;
  gap: 72px;
  margin-bottom: 58px;
}

.tl-services__heading {
  min-width: 0;
}

.tl-services__intro {
  max-width: 470px;
  margin: 0 0 7px;

  color: var(--tl-text-soft);
  font-size: 15px;
  line-height: 1.7;
}

.tl-services__grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* ---------- Card ---------- */

.tl-service-card {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
  min-height: 350px;
  padding: 25px 25px 23px;

  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-md);

  color: inherit;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.042),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035);

  font: inherit;
  text-align: left;

  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;

  transition:
    transform 0.5s var(--tl-ease),
    border-color 0.5s var(--tl-ease),
    background 0.5s var(--tl-ease),
    box-shadow 0.5s var(--tl-ease);
}
.tl-service-card {
  text-decoration: none;
}

.tl-service-card:visited {
  color: inherit;
}

.tl-service-card::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;
  background: var(--tl-accent);

  transform: scaleX(0);
  transform-origin: left;

  transition:
    transform 0.5s var(--tl-ease);
}

.tl-service-card::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -100px;

  width: 230px;
  height: 230px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.13);
  filter: blur(70px);

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.5s var(--tl-ease);
}

.tl-service-card:hover {
  transform: translateY(-7px);

  border-color:
    rgba(207, 255, 0, 0.28);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.055),
    0 22px 55px rgba(0, 0, 0, 0.22);
}

.tl-service-card:hover::before {
  transform: scaleX(1);
}

.tl-service-card:hover::after {
  opacity: 1;
}

.tl-service-card:focus-visible {
  border-color: var(--tl-accent);

  outline: 2px solid
    rgba(207, 255, 0, 0.42);

  outline-offset: 4px;
}

/* ---------- Top ---------- */

.tl-service-card__top {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  width: 100%;
}

.tl-service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  border:
    1px solid rgba(207, 255, 0, 0.25);

  border-radius: 10px;

  background:
    rgba(207, 255, 0, 0.035);

  transition:
    transform 0.5s var(--tl-ease),
    background 0.5s var(--tl-ease),
    border-color 0.5s var(--tl-ease);
}

.tl-service-card__icon svg {
  width: 25px;
  height: 25px;

  fill: none;
  stroke: var(--tl-accent);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl-service-card:hover
.tl-service-card__icon {
  transform:
    rotate(-5deg)
    scale(1.04);

  border-color:
    rgba(207, 255, 0, 0.48);

  background:
    rgba(207, 255, 0, 0.08);
}

.tl-service-card__number {
  color: var(--tl-text-muted);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.07em;
}

/* ---------- Body ---------- */

.tl-service-card__body {
  position: relative;
  z-index: 2;

  display: block;
  width: 100%;

  margin-top: auto;
  padding-top: 58px;
}

.tl-service-card__title {
  display: block;
  max-width: 330px;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size:
    clamp(24px, 2vw, 32px);

  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.tl-service-card__text {
  display: block;
  max-width: 340px;
  margin-top: 18px;

  color: var(--tl-text-soft);
  font-size: 14px;
  line-height: 1.62;
}

/* ---------- Bottom ---------- */

.tl-service-card__bottom {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  margin-top: 28px;
}

.tl-service-card__action {
  color: var(--tl-text-muted);

  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;

  transition:
    color 0.4s var(--tl-ease);
}

.tl-service-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  border: 1px solid var(--tl-line);
  border-radius: 50%;

  transition:
    border-color 0.4s var(--tl-ease),
    background 0.4s var(--tl-ease),
    transform 0.4s var(--tl-ease);
}

.tl-service-card__arrow svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: var(--tl-text);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    stroke 0.4s var(--tl-ease),
    transform 0.4s var(--tl-ease);
}

.tl-service-card:hover
.tl-service-card__action {
  color: var(--tl-accent);
}

.tl-service-card:hover
.tl-service-card__arrow {
  border-color: var(--tl-accent);
  background: var(--tl-accent);
  transform: translateX(4px);
}

.tl-service-card:hover
.tl-service-card__arrow svg {
  stroke: #090a09;
  transform: translateX(2px);
}

/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1199px) {
  .tl-services__head {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.65fr);

    gap: 42px;
  }

  .tl-services__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .tl-service-card {
    min-height: 330px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .tl-services__head {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 44px;
  }

  .tl-services__intro {
    max-width: 620px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-services__head {
    gap: 22px;
    margin-bottom: 34px;
  }

  .tl-services__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tl-service-card {
    min-height: 292px;
    padding: 21px 20px 20px;
  }

  .tl-service-card__body {
    padding-top: 42px;
  }

  .tl-service-card__title {
    max-width: 290px;
    font-size: 27px;
  }

  .tl-service-card__text {
    max-width: 100%;
    margin-top: 14px;
    font-size: 14px;
  }

  .tl-service-card__bottom {
    margin-top: 22px;
  }

  .tl-service-card:hover {
    transform: none;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479px) {
  .tl-service-card {
    min-height: 278px;
  }

  .tl-service-card__title {
    font-size: 25px;
  }

  .tl-service-card__action {
    font-size: 9px;
  }
}

/* =========================================================
   TEILIORA — QZ101F POPUP
   ========================================================= */

/* ---------- Overlay ---------- */

.t-popup,
[class*="t-popup"] {
  font-family: "Inter Tight", Arial, sans-serif;
}

.t-popup {
  background: rgba(4, 5, 5, 0.88) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- Main popup container ---------- */

.t-popup__container,
.t-popup__container-static,
.t-popup .t-container {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 22px !important;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(207, 255, 0, 0.10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #171918 0%,
      #0d0f0e 55%,
      #090a0a 100%
    ) !important;

  box-shadow:
    0 35px 120px rgba(0, 0, 0, 0.70) !important;
}

/*
У QZ101F правая часть часто является
отдельной декоративной колонкой.
Красим её в тёмный цвет.
*/

.t-popup__container > div,
.t-popup__container-static > div {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

/* ---------- Quiz wrappers ---------- */

.t-popup .t-quiz,
.t-popup [class*="quiz"],
.t-popup .t-form,
.t-popup .t-form__inputsbox,
.t-popup .t-form__screen,
.t-popup [class*="form__screen"] {
  color: var(--tl-text) !important;
  background: transparent !important;
}

/*
Убираем белые и бежевые подложки,
которые назначены внутренним колонкам.
*/

.t-popup [style*="background-color"],
.t-popup [style*="background:"],
.t-popup .t-bgimg {
  background-color: transparent !important;
}

/* ---------- Right decorative column ---------- */

.t-popup [class*="__img"],
.t-popup [class*="__image"],
.t-popup [class*="__right"],
.t-popup [class*="__aside"] {
  border-color: rgba(255, 255, 255, 0.07) !important;
  background:
    radial-gradient(
      circle at 45% 35%,
      rgba(207, 255, 0, 0.11),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.008)
    ) !important;
}

/* ---------- Progress ---------- */

.t-popup [class*="progress"] {
  background: rgba(255, 255, 255, 0.08) !important;
}

.t-popup [class*="progress"] > div,
.t-popup [class*="progress"] span {
  background: var(--tl-accent) !important;
}

.t-popup [class*="progressbar"] {
  background: var(--tl-accent) !important;
}

/* ---------- Typography ---------- */

.t-popup .t-title,
.t-popup .t-heading,
.t-popup .t-input-title,
.t-popup .t-form__title,
.t-popup [class*="title"] {
  color: var(--tl-text) !important;
}

.t-popup .t-title,
.t-popup .t-form__title {
  font-family: "Inter Tight", Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
}

.t-popup .t-descr,
.t-popup .t-text,
.t-popup .t-input-subtitle,
.t-popup [class*="descr"],
.t-popup [class*="subtitle"] {
  color: var(--tl-text-soft) !important;
}

.t-popup .t-input-title {
  margin-bottom: 16px !important;

  color: var(--tl-text) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* ---------- Radio answer grid ---------- */

.t-popup .t-input-group_rd,
.t-popup .t-input-group_cb {
  color: var(--tl-text) !important;
}

.t-popup .t-radio__wrapper,
.t-popup .t-checkbox__wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.t-popup .t-radio__control,
.t-popup .t-checkbox__control {
  position: relative;

  display: flex !important;
  align-items: center !important;

  min-height: 66px !important;
  margin: 0 !important;
  padding: 16px 18px !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 11px !important;

  color: var(--tl-text-soft) !important;
  background:
    rgba(255, 255, 255, 0.035) !important;

  font-size: 14px !important;
  line-height: 1.35 !important;

  cursor: pointer;

  transition:
    color 0.3s var(--tl-ease),
    border-color 0.3s var(--tl-ease),
    background 0.3s var(--tl-ease),
    transform 0.3s var(--tl-ease);
}

.t-popup .t-radio__control:hover,
.t-popup .t-checkbox__control:hover {
  color: var(--tl-text) !important;

  border-color:
    rgba(207, 255, 0, 0.34) !important;

  background:
    rgba(207, 255, 0, 0.045) !important;

  transform: translateY(-2px);
}

/* ---------- Radio circles ---------- */

.t-popup .t-radio__indicator,
.t-popup .t-checkbox__indicator {
  position: relative !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-right: 12px !important;

  border:
    1px solid rgba(255, 255, 255, 0.28) !important;

  background:
    rgba(255, 255, 255, 0.02) !important;

  box-shadow: none !important;
}

.t-popup .t-radio__indicator {
  border-radius: 50% !important;
}

.t-popup .t-checkbox__indicator {
  border-radius: 4px !important;
}

/*
Поддержка разных вариантов разметки Tilda:
checked может стоять как рядом, так и внутри label.
*/

.t-popup input[type="radio"]:checked
  + .t-radio__indicator,
.t-popup input[type="checkbox"]:checked
  + .t-checkbox__indicator,
.t-popup .t-radio__control:has(input:checked),
.t-popup .t-checkbox__control:has(input:checked) {
  border-color: var(--tl-accent) !important;
}

.t-popup input[type="radio"]:checked
  + .t-radio__indicator,
.t-popup input[type="checkbox"]:checked
  + .t-checkbox__indicator {
  background: var(--tl-accent) !important;

  box-shadow:
    inset 0 0 0 4px #101210 !important;
}

.t-popup .t-radio__control:has(input:checked),
.t-popup .t-checkbox__control:has(input:checked) {
  color: var(--tl-text) !important;

  background:
    rgba(207, 255, 0, 0.075) !important;
}

/* ---------- Text fields ---------- */

.t-popup .t-input,
.t-popup textarea.t-input,
.t-popup select.t-input {
  width: 100% !important;
  min-height: 56px !important;

  border:
    1px solid rgba(255, 255, 255, 0.11) !important;

  border-radius: 10px !important;

  color: var(--tl-text) !important;
  background:
    rgba(255, 255, 255, 0.035) !important;

  font-family:
    "Inter Tight",
    Arial,
    sans-serif !important;

  font-size: 15px !important;

  box-shadow: none !important;
}

.t-popup textarea.t-input {
  min-height: 130px !important;
  padding-top: 16px !important;
}

.t-popup .t-input:focus,
.t-popup textarea.t-input:focus,
.t-popup select.t-input:focus {
  border-color:
    rgba(207, 255, 0, 0.55) !important;

  background:
    rgba(255, 255, 255, 0.052) !important;
}

.t-popup .t-input::placeholder,
.t-popup textarea.t-input::placeholder {
  color:
    rgba(242, 243, 239, 0.34) !important;
}

/* ---------- Bottom navigation ---------- */

.t-popup [class*="footer"],
.t-popup [class*="buttons"],
.t-popup [class*="btn-wrapper"] {
  border-color:
    rgba(255, 255, 255, 0.07) !important;
}

/* Общие кнопки квиза */

.t-popup .t-btn,
.t-popup button {
  font-family:
    "Inter Tight",
    Arial,
    sans-serif !important;
}

/* Next / submit */

.t-popup .t-submit,
.t-popup [class*="next"],
.t-popup button[type="submit"] {
  min-height: 56px !important;
  padding: 0 28px !important;

  border:
    1px solid var(--tl-accent) !important;

  border-radius: 9px !important;

  color: #090a09 !important;
  background: var(--tl-accent) !important;

  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;

  transition:
    transform 0.3s var(--tl-ease),
    box-shadow 0.3s var(--tl-ease) !important;
}

.t-popup .t-submit:hover,
.t-popup [class*="next"]:hover,
.t-popup button[type="submit"]:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 36px
    rgba(207, 255, 0, 0.13) !important;
}

/* Back button */

.t-popup [class*="prev"],
.t-popup [class*="back"] {
  min-width: 56px !important;
  min-height: 56px !important;

  border:
    1px solid rgba(255, 255, 255, 0.12) !important;

  border-radius: 9px !important;

  color: var(--tl-text) !important;
  background:
    rgba(255, 255, 255, 0.035) !important;

  box-shadow: none !important;
}

/* ---------- Step counter ---------- */

.t-popup [class*="step"],
.t-popup [class*="counter"] {
  color:
    var(--tl-text-muted) !important;
}

/* ---------- Close button ---------- */

.t-popup__close {
  top: 22px !important;
  right: 22px !important;

  width: 42px !important;
  height: 42px !important;

  border:
    1px solid rgba(255, 255, 255, 0.12) !important;

  border-radius: 50% !important;

  background:
    rgba(255, 255, 255, 0.035) !important;

  transition:
    border-color 0.3s var(--tl-ease),
    background 0.3s var(--tl-ease) !important;
}

.t-popup__close:hover {
  border-color:
    rgba(207, 255, 0, 0.45) !important;

  background:
    rgba(207, 255, 0, 0.07) !important;
}

.t-popup__close svg,
.t-popup__close path {
  stroke: var(--tl-text) !important;
}

/* ---------- Errors / success ---------- */

.t-popup .t-form__errorbox-wrapper {
  border-radius: 9px !important;

  color: var(--tl-text) !important;
  background:
    rgba(255, 80, 80, 0.08) !important;
}

.t-popup .t-form__successbox {
  padding: 24px !important;

  border:
    1px solid
    rgba(207, 255, 0, 0.25) !important;

  border-radius: 12px !important;

  color: var(--tl-text) !important;
  background:
    rgba(207, 255, 0, 0.06) !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .t-popup__container,
  .t-popup__container-static {
    width:
      calc(100% - 32px) !important;

    max-width: 760px !important;
  }

  .t-popup .t-radio__wrapper,
  .t-popup .t-checkbox__wrapper {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   QZ101F — FINAL LAYOUT FIX
   ========================================================= */

/* Убираем правую пустую колонку */
.t-popup .t-quiz__image,
.t-popup .t-quiz__img,
.t-popup .t-quiz__right,
.t-popup .t-quiz__aside,
.t-popup [class*="quiz__image"],
.t-popup [class*="quiz__img"],
.t-popup [class*="quiz__right"],
.t-popup [class*="quiz__aside"] {
  display: none !important;
}

/* Сам попап становится одной колонкой */
.t-popup .t-popup__container,
.t-popup .t-popup__container-static {
  width: min(960px, calc(100vw - 48px)) !important;
  max-width: 960px !important;
}

/* Растягиваем рабочую часть на всю ширину */
.t-popup .t-quiz,
.t-popup .t-quiz__wrapper,
.t-popup .t-quiz__content,
.t-popup .t-form,
.t-popup .t-form__inputsbox,
.t-popup [class*="quiz__content"],
.t-popup [class*="quiz__wrapper"] {
  width: 100% !important;
  max-width: none !important;
}

/* Убираем деление на две колонки */
.t-popup .t-quiz__wrapper,
.t-popup [class*="quiz__wrapper"] {
  display: block !important;
  grid-template-columns: 1fr !important;
}

/* Убираем внутренний скролл на десктопе */
.t-popup .t-popup__container,
.t-popup .t-popup__container-static,
.t-popup .t-quiz,
.t-popup .t-quiz__wrapper,
.t-popup .t-form,
.t-popup .t-form__inputsbox {
  overflow: visible !important;
  max-height: none !important;
}

/* Делаем внутренние отступы аккуратнее */
.t-popup .t-quiz__content,
.t-popup [class*="quiz__content"],
.t-popup .t-form__inputsbox {
  padding-right: 46px !important;
  padding-left: 46px !important;
}

/* Варианты ответа — две ровные колонки */
.t-popup .t-radio__wrapper,
.t-popup .t-checkbox__wrapper {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 12px !important;
}

/* Карточки ответов растягиваем */
.t-popup .t-radio__control,
.t-popup .t-checkbox__control {
  width: 100% !important;
  min-height: 70px !important;
}

/* Нижняя навигация */
.t-popup [class*="footer"],
.t-popup [class*="buttons"],
.t-popup [class*="btn-wrapper"] {
  width: 100% !important;
}


/* =========================================================
   TEILIORA — PORTFOLIO
   ========================================================= */

.tl-portfolio {
  position: relative;
  overflow: hidden;
}

.tl-portfolio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;

  width: 520px;
  height: 420px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  filter: blur(130px);
  pointer-events: none;
}

.tl-portfolio__head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;

  margin-bottom: 46px;
}

.tl-portfolio__heading {
  max-width: 680px;
}

.tl-portfolio__intro {
  max-width: 520px;
  margin: 22px 0 0;

  color: var(--tl-text-soft);
  font-size: 15px;
  line-height: 1.65;
}

.tl-portfolio__filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.tl-portfolio__filter {
  min-height: 42px;
  padding: 0 17px;

  border: 1px solid transparent;
  border-radius: 8px;

  color: var(--tl-text-soft);
  background: transparent;

  font-family: "Inter Tight", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.035em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    color 0.3s var(--tl-ease),
    border-color 0.3s var(--tl-ease),
    background 0.3s var(--tl-ease);
}

.tl-portfolio__filter:hover {
  color: var(--tl-text);
}

.tl-portfolio__filter.is-active {
  color: var(--tl-accent);
  border-color: var(--tl-accent-line);
  background: rgba(207, 255, 0, 0.035);
}

/* ---------- Grid ---------- */

.tl-portfolio__grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.tl-project-card {
  min-width: 0;
  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.013)
    );

  transition:
    opacity 0.4s var(--tl-ease),
    transform 0.45s var(--tl-ease),
    border-color 0.45s var(--tl-ease);
}

.tl-project-card--large {
  grid-column: span 3;
}

.tl-project-card--small {
  grid-column: span 2;
}

.tl-project-card.is-hidden {
  display: none;
}

.tl-project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(207, 255, 0, 0.28);
}

.tl-project-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ---------- Browser ---------- */

.tl-browser {
  padding: 7px 7px 0;
}

.tl-browser__bar {
  position: relative;

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

  height: 38px;
  padding: 0 14px;

  border-radius: 10px 10px 0 0;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    );
}

.tl-browser__dots {
  position: absolute;
  left: 14px;

  display: flex;
  gap: 6px;
}

.tl-browser__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tl-browser__dots i:nth-child(1) {
  background: #ef6a45;
}

.tl-browser__dots i:nth-child(2) {
  background: #e9bf3c;
}

.tl-browser__dots i:nth-child(3) {
  background: #52bd61;
}

.tl-browser__address {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 44%;
  height: 23px;
  padding: 0 18px;

  overflow: hidden;
  border-radius: 6px;

  color: var(--tl-text-muted);
  background: rgba(0, 0, 0, 0.18);

  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tl-browser__copy {
  position: absolute;
  right: 14px;
}

.tl-browser__copy svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: var(--tl-text-muted);
  stroke-width: 1.4;
}

.tl-browser__screen {
  position: relative;
  overflow: hidden;

  aspect-ratio: 16 / 8.3;

  background: #111;
}

.tl-project-card--small .tl-browser__screen {
  aspect-ratio: 16 / 8.6;
}

.tl-browser__screen::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0, 0, 0, 0.18)
    );

  pointer-events: none;
}

.tl-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    transform 0.8s var(--tl-ease),
    filter 0.8s var(--tl-ease);
}

.tl-project-card:hover .tl-browser__screen img {
  transform: scale(1.035);
  filter: brightness(0.88);
}

/* ---------- Meta ---------- */

.tl-project-card__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 46px;
  align-items: center;
  gap: 20px;

  min-height: 88px;
  padding: 16px 17px;
}

.tl-project-card--small .tl-project-card__meta {
  grid-template-columns: minmax(0, 1fr) auto 42px;
  gap: 12px;
}

.tl-project-card__name h3 {
  margin: 0;

  color: var(--tl-text);
  font-size: clamp(18px, 1.5vw, 25px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.tl-project-card__name > div {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.tl-project-card__name span {
  color: var(--tl-accent);
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.tl-project-card__name small {
  color: var(--tl-text-muted);
  font-size: 9px;
}

.tl-project-card__result {
  display: flex;
  align-items: center;
  gap: 13px;
}

.tl-project-card__result strong {
  color: var(--tl-accent);
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.05em;
}

.tl-project-card--small .tl-project-card__result strong {
  font-size: clamp(23px, 2vw, 34px);
}

.tl-project-card__result span {
  color: var(--tl-text-muted);
  font-size: 10px;
  line-height: 1.35;
}

.tl-project-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  border: 1px solid var(--tl-accent-line);
  border-radius: 50%;

  transition:
    background 0.4s var(--tl-ease),
    transform 0.4s var(--tl-ease);
}

.tl-project-card--small .tl-project-card__arrow {
  width: 42px;
  height: 42px;
}

.tl-project-card__arrow svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: var(--tl-accent);
  stroke-width: 1.5;

  transition:
    stroke 0.4s var(--tl-ease),
    transform 0.4s var(--tl-ease);
}

.tl-project-card:hover .tl-project-card__arrow {
  background: var(--tl-accent);
  transform: translateX(3px);
}

.tl-project-card:hover .tl-project-card__arrow svg {
  stroke: #090a09;
  transform: translateX(2px);
}

/* ---------- Footer ---------- */

.tl-portfolio__footer {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: 42px;
}

.tl-portfolio__all {
  min-width: 340px;
}

.tl-portfolio__all svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.tl-portfolio__footer p {
  margin: 15px 0 0;

  color: var(--tl-text-muted);
  font-size: 11px;
}

/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1199px) {
  .tl-portfolio__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .tl-portfolio__filters {
    justify-content: flex-start;
  }

  .tl-project-card--small {
    grid-column: span 3;
  }

  .tl-project-card--small:last-child {
    grid-column: 2 / span 4;
  }

  .tl-project-card__meta,
  .tl-project-card--small .tl-project-card__meta {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .tl-project-card__result {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tl-project-card__arrow {
    grid-column: 2;
    grid-row: 1;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .tl-project-card--large,
  .tl-project-card--small,
  .tl-project-card--small:last-child {
    grid-column: span 6;
  }

  .tl-browser__screen,
  .tl-project-card--small .tl-browser__screen {
    aspect-ratio: 16 / 8.5;
  }

  .tl-project-card__meta,
  .tl-project-card--small .tl-project-card__meta {
    grid-template-columns: minmax(0, 1fr) auto 46px;
  }

  .tl-project-card__result {
    grid-column: auto;
    grid-row: auto;
  }

  .tl-project-card__arrow {
    grid-column: auto;
    grid-row: auto;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-portfolio__head {
    gap: 30px;
    margin-bottom: 34px;
  }

  .tl-portfolio__filters {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding-bottom: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tl-portfolio__filters::-webkit-scrollbar {
    display: none;
  }

  .tl-portfolio__filter {
    flex: 0 0 auto;
  }

  .tl-portfolio__grid {
    gap: 12px;
  }

  .tl-browser {
    padding: 5px 5px 0;
  }

  .tl-browser__bar {
    height: 34px;
  }

  .tl-browser__address {
    max-width: 55%;
  }

  .tl-browser__screen,
  .tl-project-card--small .tl-browser__screen {
    aspect-ratio: 16 / 10;
  }

  .tl-project-card__meta,
  .tl-project-card--small .tl-project-card__meta {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 12px;
    padding: 15px;
  }

  .tl-project-card__result {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tl-project-card__arrow {
    grid-column: 2;
    grid-row: 1;
  }

  .tl-project-card__result strong,
  .tl-project-card--small .tl-project-card__result strong {
    font-size: 30px;
  }

  .tl-portfolio__all {
    width: 100%;
    min-width: 0;
  }

  .tl-portfolio__footer p {
    text-align: center;
  }
}

/* =========================================================
   TEILIORA — PROCESS
   ========================================================= */

.tl-process {
  position: relative;
  overflow: hidden;
}

.tl-process::before {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -220px;

  width: 520px;
  height: 420px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.045);
  filter: blur(130px);
  pointer-events: none;
}

/* ---------- Header ---------- */

.tl-process__head {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, 0.55fr);

  align-items: end;
  gap: 70px;

  margin-bottom: 72px;
}

.tl-process__heading {
  min-width: 0;
}

.tl-process__intro {
  max-width: 470px;
  margin: 0 0 6px;

  color: var(--tl-text-soft);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Steps ---------- */

.tl-process__list {
  position: relative;
  z-index: 2;

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

  gap: 0;
}

.tl-process-step {
  position: relative;
  min-width: 0;
  padding-right: 20px;
}

.tl-process-step__top {
  display: flex;
  align-items: center;
  min-height: 38px;
}

.tl-process-step__number {
  flex: 0 0 auto;

  color: var(--tl-accent);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: clamp(28px, 2.3vw, 39px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.045em;
}

.tl-process-step__line {
  position: relative;
  display: block;

  width: 100%;
  height: 1px;
  margin-left: 14px;

  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.tl-process-step__line::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      var(--tl-accent),
      rgba(207, 255, 0, 0.10)
    );

  transform: scaleX(0);
  transform-origin: left;

  transition:
    transform 0.85s var(--tl-ease);
}

.tl-process-step.is-visible
.tl-process-step__line::after {
  transform: scaleX(1);
}

.tl-process-step__content {
  padding-top: 24px;
  padding-right: 18px;
}

.tl-process-step__content h3 {
  margin: 0;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.tl-process-step__content p {
  max-width: 210px;
  margin: 14px 0 0;

  color: var(--tl-text-muted);
  font-size: 12px;
  line-height: 1.65;
}

/* ---------- Bottom ---------- */

.tl-process__bottom {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;

  margin-top: 74px;
  padding-top: 30px;

  border-top: 1px solid var(--tl-line-soft);
}

.tl-process__bottom p {
  max-width: 580px;
  margin: 0;

  color: var(--tl-text-soft);
  font-size: 15px;
  line-height: 1.65;
}

.tl-process__bottom .tl-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1199px) {
  .tl-process__head {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.6fr);

    gap: 42px;
  }

  .tl-process__list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    row-gap: 58px;
  }

  .tl-process-step:nth-child(3n) {
    padding-right: 0;
  }

  .tl-process-step:nth-child(3n)
  .tl-process-step__line {
    display: none;
  }

  .tl-process-step__content p {
    max-width: 260px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .tl-process__head {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 54px;
  }

  .tl-process__intro {
    max-width: 620px;
  }

  .tl-process__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-process__head {
    margin-bottom: 42px;
  }

  .tl-process__list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .tl-process-step {
    display: grid;
    grid-template-columns: 58px 1fr;

    padding: 0 0 34px;
  }

  .tl-process-step:last-child {
    padding-bottom: 0;
  }

  .tl-process-step__top {
    position: relative;
    display: block;
    min-height: 100%;
  }

  .tl-process-step__number {
    display: block;
    font-size: 30px;
  }

  .tl-process-step__line {
    position: absolute;
    top: 43px;
    bottom: 0;
    left: 15px;

    display: block !important;

    width: 1px;
    height: auto;
    margin: 0;
  }

  .tl-process-step__line::after {
    transform:
      scaleY(0);

    transform-origin:
      top;
  }

  .tl-process-step.is-visible
  .tl-process-step__line::after {
    transform:
      scaleY(1);
  }

  .tl-process-step__content {
    padding: 3px 0 0;
  }

  .tl-process-step__content h3 {
    font-size: 18px;
  }

  .tl-process-step__content p {
    max-width: 100%;
    margin-top: 11px;
    font-size: 14px;
  }

  .tl-process__bottom {
    margin-top: 54px;
  }

  .tl-process__bottom .tl-button {
    width: 100%;
  }
}

/* =========================================================
   TEILIORA — ABOUT / BENEFITS
   ========================================================= */

.tl-about {
  position: relative;
  overflow: hidden;
}

.tl-about::before {
  content: "";
  position: absolute;
  top: 24%;
  left: -220px;

  width: 520px;
  height: 520px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.04);
  filter: blur(140px);
  pointer-events: none;
}

/* ---------- Header ---------- */

.tl-about__head {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, 0.55fr);

  align-items: end;
  gap: 70px;

  margin-bottom: 58px;
}

.tl-about__intro {
  max-width: 470px;
  margin: 0 0 6px;

  color: var(--tl-text-soft);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Grid ---------- */

.tl-about__grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tl-about-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 410px;
  padding: 26px;

  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  transition:
    transform 0.5s var(--tl-ease),
    border-color 0.5s var(--tl-ease),
    background 0.5s var(--tl-ease);
}

.tl-about-card::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -110px;

  width: 240px;
  height: 240px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.12);
  filter: blur(75px);

  opacity: 0;

  transition:
    opacity 0.5s var(--tl-ease);
}

.tl-about-card:hover {
  transform: translateY(-7px);

  border-color:
    rgba(207, 255, 0, 0.28);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.018)
    );
}

.tl-about-card:hover::after {
  opacity: 1;
}

/* ---------- Visual ---------- */

.tl-about-card__visual {
  position: relative;

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

  width: 100%;
  min-height: 185px;

  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: 14px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(207, 255, 0, 0.09),
      transparent 34%
    ),
    rgba(255, 255, 255, 0.018);
}

.tl-about-card__visual::before,
.tl-about-card__visual::after {
  content: "";
  position: absolute;

  width: 62%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent
    );
}

.tl-about-card__visual::before {
  transform: rotate(28deg);
}

.tl-about-card__visual::after {
  transform: rotate(-28deg);
}

.tl-about-card__orb {
  position: absolute;

  width: 118px;
  height: 118px;

  border: 1px solid rgba(207, 255, 0, 0.22);
  border-radius: 50%;

  box-shadow:
    0 0 60px rgba(207, 255, 0, 0.07),
    inset 0 0 30px rgba(207, 255, 0, 0.045);

  transition:
    transform 0.7s var(--tl-ease),
    box-shadow 0.7s var(--tl-ease);
}

.tl-about-card__visual svg {
  position: relative;
  z-index: 2;

  width: 74px;
  height: 74px;

  fill: none;
  stroke: var(--tl-accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform 0.7s var(--tl-ease);
}

.tl-about-card:hover
.tl-about-card__orb {
  transform: scale(1.08);

  box-shadow:
    0 0 80px rgba(207, 255, 0, 0.12),
    inset 0 0 40px rgba(207, 255, 0, 0.065);
}

.tl-about-card:hover
.tl-about-card__visual svg {
  transform:
    rotate(-4deg)
    scale(1.04);
}

/* ---------- Content ---------- */

.tl-about-card__content {
  position: relative;
  z-index: 2;

  margin-top: auto;
  padding-top: 38px;
}

.tl-about-card__number {
  display: block;
  margin-bottom: 15px;

  color: var(--tl-accent);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.06em;
}

.tl-about-card__content h3 {
  max-width: 330px;
  margin: 0;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.tl-about-card__content p {
  max-width: 350px;
  margin: 18px 0 0;

  color: var(--tl-text-soft);
  font-size: 14px;
  line-height: 1.62;
}

/* ---------- Statement ---------- */

.tl-about__statement {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;

  margin-top: 16px;
  padding: 40px;

  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-md);

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );
}

.tl-about__statement::before {
  content: "";
  position: absolute;
  right: 12%;
  bottom: -150px;

  width: 320px;
  height: 260px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.08);
  filter: blur(100px);
}

.tl-about__statement-mark {
  position: relative;

  width: 76px;
  height: 76px;

  border: 1px solid var(--tl-accent-line);
  border-radius: 50%;
}

.tl-about__statement-mark span {
  position: absolute;
  top: 22px;

  width: 13px;
  height: 28px;

  border-top: 2px solid var(--tl-accent);
  border-left: 2px solid var(--tl-accent);

  transform: skewX(-10deg);
}

.tl-about__statement-mark span:first-child {
  left: 20px;
}

.tl-about__statement-mark span:last-child {
  right: 19px;
}

.tl-about__statement-text {
  position: relative;
  z-index: 2;
}

.tl-about__statement-text p {
  max-width: 760px;
  margin: 0;

  color: var(--tl-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.tl-about__statement-text strong {
  display: block;
  max-width: 820px;
  margin-top: 10px;

  color: var(--tl-text);
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.tl-about__statement .tl-button {
  position: relative;
  z-index: 2;
}

.tl-about__statement .tl-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1199px) {
  .tl-about__head {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.6fr);

    gap: 42px;
  }

  .tl-about-card {
    min-height: 390px;
  }

  .tl-about__statement {
    grid-template-columns: 76px 1fr;
  }

  .tl-about__statement .tl-button {
    grid-column: 2;
    width: fit-content;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .tl-about__head {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 44px;
  }

  .tl-about__intro {
    max-width: 620px;
  }

  .tl-about__grid {
    grid-template-columns: 1fr;
  }

  .tl-about-card {
    display: grid;
    grid-template-columns: minmax(240px, 0.7fr) 1fr;
    gap: 28px;

    min-height: 0;
  }

  .tl-about-card__content {
    margin-top: 0;
    padding-top: 10px;
    align-self: center;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-about__grid {
    gap: 12px;
  }

  .tl-about-card {
    display: flex;
    min-height: 390px;
    padding: 20px;
  }

  .tl-about-card__visual {
    min-height: 170px;
  }

  .tl-about-card__content {
    margin-top: auto;
    padding-top: 32px;
  }

  .tl-about-card__content h3 {
    font-size: 27px;
  }

  .tl-about__statement {
    grid-template-columns: 1fr;
    gap: 24px;

    margin-top: 12px;
    padding: 24px 20px;
  }

  .tl-about__statement-mark {
    width: 62px;
    height: 62px;
  }

  .tl-about__statement-mark span {
    top: 17px;
  }

  .tl-about__statement-mark span:first-child {
    left: 15px;
  }

  .tl-about__statement-mark span:last-child {
    right: 14px;
  }

  .tl-about__statement .tl-button {
    grid-column: auto;
    width: 100%;
  }
}

/* =========================================================
   TEILIORA — PROOF / REVIEWS
   ========================================================= */

.tl-proof {
  position: relative;
  overflow: hidden;
}

.tl-proof::before {
  content: "";
  position: absolute;
  right: -180px;
  top: 28%;

  width: 480px;
  height: 480px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.04);
  filter: blur(140px);

  pointer-events: none;
}

/* ---------- Header ---------- */

.tl-proof__head {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, 0.55fr);

  align-items: end;
  gap: 70px;

  margin-bottom: 52px;
}

.tl-proof__intro {
  max-width: 470px;
  margin: 0 0 6px;

  color: var(--tl-text-soft);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Stats ---------- */

.tl-proof__stats {
  position: relative;
  z-index: 2;

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

  margin-bottom: 14px;

  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.012)
    );
}

.tl-proof-stat {
  display: flex;
  align-items: center;
  gap: 20px;

  min-height: 124px;
  padding: 25px 28px;

  border-right: 1px solid var(--tl-line-soft);
}

.tl-proof-stat:last-child {
  border-right: 0;
}

.tl-proof-stat strong {
  color: var(--tl-accent);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: clamp(34px, 3vw, 50px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.055em;
}

.tl-proof-stat span {
  color: var(--tl-text-muted);
  font-size: 11px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

/* ---------- Reviews ---------- */

.tl-proof__grid {
  position: relative;
  z-index: 2;

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

  gap: 14px;
}

.tl-review-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 340px;
  padding: 27px;

  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  transition:
    transform 0.5s var(--tl-ease),
    border-color 0.5s var(--tl-ease),
    background 0.5s var(--tl-ease);
}

.tl-review-card::after {
  content: "";

  position: absolute;
  right: -100px;
  bottom: -100px;

  width: 220px;
  height: 220px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.11);
  filter: blur(70px);

  opacity: 0;

  transition:
    opacity 0.5s var(--tl-ease);
}

.tl-review-card:hover {
  transform: translateY(-6px);

  border-color:
    rgba(207, 255, 0, 0.26);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.017)
    );
}

.tl-review-card:hover::after {
  opacity: 1;
}

.tl-review-card__top {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.tl-review-card__quote {
  color: var(--tl-accent);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 54px;
  line-height: 0.75;
  font-weight: 400;
}

.tl-review-card__project {
  padding: 8px 10px;

  border: 1px solid var(--tl-line);
  border-radius: 7px;

  color: var(--tl-text-muted);

  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.tl-review-card blockquote {
  position: relative;
  z-index: 2;

  margin: 55px 0 0;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.25;
  font-weight: 300;
  letter-spacing: -0.025em;
}

.tl-review-card footer {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 13px;

  margin-top: auto;
  padding-top: 38px;
}

.tl-review-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  border: 1px solid var(--tl-accent-line);
  border-radius: 50%;

  color: var(--tl-accent);
  background: rgba(207, 255, 0, 0.04);

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

.tl-review-card footer strong {
  display: block;

  color: var(--tl-text);

  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
}

.tl-review-card footer span {
  display: block;
  margin-top: 4px;

  color: var(--tl-text-muted);

  font-size: 10px;
  line-height: 1.3;
}

/* ---------- CTA ---------- */

.tl-proof__cta {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 60px;

  margin-top: 14px;
  padding: 46px 42px;

  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-md);

  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(207, 255, 0, 0.09),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );
}

.tl-proof__cta::before {
  content: "";

  position: absolute;
  right: 15%;
  top: -110px;

  width: 280px;
  height: 280px;

  border-radius: 50%;
  border: 1px solid rgba(207, 255, 0, 0.13);
}

.tl-proof__cta-content {
  position: relative;
  z-index: 2;
}

.tl-proof__cta h3 {
  max-width: 760px;
  margin: 0;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: clamp(34px, 3.3vw, 56px);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.tl-proof__cta-content > p:last-child {
  max-width: 620px;
  margin: 20px 0 0;

  color: var(--tl-text-soft);
  font-size: 14px;
  line-height: 1.65;
}

.tl-proof__cta .tl-button {
  position: relative;
  z-index: 2;

  min-width: 230px;
}

.tl-proof__cta .tl-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1199px) {
  .tl-proof__head {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.6fr);

    gap: 42px;
  }

  .tl-proof__stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .tl-proof-stat:nth-child(2) {
    border-right: 0;
  }

  .tl-proof-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--tl-line-soft);
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .tl-proof__head {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 44px;
  }

  .tl-proof__intro {
    max-width: 620px;
  }

  .tl-proof__grid {
    grid-template-columns: 1fr;
  }

  .tl-review-card {
    min-height: 300px;
  }

  .tl-proof__cta {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .tl-proof__cta .tl-button {
    width: fit-content;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-proof__stats {
    grid-template-columns: 1fr;
  }

  .tl-proof-stat {
    min-height: 98px;

    border-right: 0;
    border-bottom: 1px solid var(--tl-line-soft);
  }

  .tl-proof-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--tl-line-soft);
  }

  .tl-proof-stat:last-child {
    border-bottom: 0;
  }

  .tl-review-card {
    min-height: 320px;
    padding: 22px 20px;
  }

  .tl-review-card blockquote {
    margin-top: 40px;
    font-size: 22px;
  }

  .tl-proof__cta {
    padding: 30px 22px;
  }

  .tl-proof__cta h3 {
    font-size: 34px;
  }

  .tl-proof__cta .tl-button {
    width: 100%;
  }
}

/* =========================================================
   TEILIORA — CONTACTS
   ========================================================= */

.tl-contacts {
  position: relative;
  overflow: hidden;
  padding-bottom: 34px;
}

.tl-contacts::before {
  content: "";
  position: absolute;
  right: -190px;
  bottom: -180px;

  width: 560px;
  height: 560px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.055);
  filter: blur(150px);

  pointer-events: none;
}

/* ---------- Main panel ---------- */

.tl-contacts__panel {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(380px, 0.72fr);

  gap: 72px;

  min-height: 620px;
  padding: 62px;

  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-lg);

  background:
    radial-gradient(
      circle at 88% 22%,
      rgba(207, 255, 0, 0.09),
      transparent 25%
    ),
    linear-gradient(
      130deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.04),
    0 35px 100px rgba(0, 0, 0, 0.22);
}

/* ---------- Content ---------- */

.tl-contacts__content {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
}

.tl-contacts__title {
  max-width: 820px;
  margin: 0;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size:
    clamp(48px, 5vw, 82px);

  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.tl-contacts__title em {
  color: var(--tl-accent);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 1.08em;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.tl-contacts__description {
  max-width: 560px;
  margin: 28px 0 0;

  color: var(--tl-text-soft);
  font-size: 16px;
  line-height: 1.7;
}

/* ---------- Contact links ---------- */

.tl-contacts__details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-top: auto;
  padding-top: 70px;
}

.tl-contact-link {
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;

  min-height: 94px;
  padding: 19px 20px;

  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.025);

  transition:
    transform 0.4s var(--tl-ease),
    border-color 0.4s var(--tl-ease),
    background 0.4s var(--tl-ease);
}

.tl-contact-link::after {
  content: "";

  position: absolute;
  right: -60px;
  bottom: -80px;

  width: 150px;
  height: 150px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.10);
  filter: blur(50px);

  opacity: 0;

  transition:
    opacity 0.4s var(--tl-ease);
}

.tl-contact-link:hover {
  transform: translateY(-4px);

  border-color:
    rgba(207, 255, 0, 0.30);

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

.tl-contact-link:hover::after {
  opacity: 1;
}

.tl-contact-link__label {
  position: relative;
  z-index: 2;

  grid-column: 1;

  color: var(--tl-text-muted);

  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tl-contact-link__value {
  position: relative;
  z-index: 2;

  grid-column: 1;
  align-self: end;

  color: var(--tl-text);

  font-size: 15px;
  line-height: 1.2;
}

.tl-contact-link__arrow {
  position: relative;
  z-index: 2;

  grid-column: 2;
  grid-row: 1 / span 2;

  align-self: center;

  color: var(--tl-accent);
  font-size: 20px;

  transition:
    transform 0.4s var(--tl-ease);
}

.tl-contact-link:hover
.tl-contact-link__arrow {
  transform: translate(3px, -3px);
}

/* ---------- Brief card ---------- */

.tl-contacts__brief {
  position: relative;
  z-index: 4;

  display: flex;
  flex-direction: column;

  min-height: 100%;
  padding: 30px;

  border:
    1px solid rgba(255, 255, 255, 0.11);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(21, 23, 22, 0.94),
      rgba(9, 10, 10, 0.94)
    );

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tl-contacts__brief::before {
  content: "";

  position: absolute;
  top: -90px;
  right: -80px;

  width: 220px;
  height: 220px;

  border-radius: 50%;
  background: rgba(207, 255, 0, 0.08);
  filter: blur(75px);

  pointer-events: none;
}

.tl-contacts__brief-top {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tl-contacts__brief-number {
  color: var(--tl-accent);

  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.tl-contacts__brief-status {
  display: inline-flex;
  align-items: center;

  min-height: 30px;
  padding: 0 11px;

  border:
    1px solid rgba(207, 255, 0, 0.24);

  border-radius: 20px;

  color: var(--tl-accent);
  background:
    rgba(207, 255, 0, 0.035);

  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* ---------- Brief content ---------- */

.tl-contacts__brief-main {
  position: relative;
  z-index: 2;

  margin-top: 72px;
}

.tl-contacts__brief-main > p {
  margin: 0;

  color: var(--tl-text);

  font-size: 21px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.tl-contacts__brief-main ul {
  display: grid;
  gap: 0;

  margin: 25px 0 0;
  padding: 0;

  list-style: none;
  border-top: 1px solid var(--tl-line-soft);
}

.tl-contacts__brief-main li {
  position: relative;

  padding:
    16px
    0
    16px
    28px;

  border-bottom:
    1px solid var(--tl-line-soft);

  color: var(--tl-text-soft);
  font-size: 13px;
  line-height: 1.5;
}

.tl-contacts__brief-main li::before {
  content: "";

  position: absolute;
  top: 22px;
  left: 3px;

  width: 7px;
  height: 7px;

  border: 1px solid var(--tl-accent);
  transform: rotate(45deg);
}

/* ---------- Submit ---------- */

.tl-contacts__submit {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 62px;
  margin-top: auto;
  padding: 0 20px 0 23px;

  overflow: hidden;

  border: 1px solid var(--tl-accent);
  border-radius: 10px;

  color: #090a09;
  background: var(--tl-accent);

  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  transition:
    transform 0.4s var(--tl-ease),
    box-shadow 0.4s var(--tl-ease);
}

.tl-contacts__submit::before {
  content: "";

  position: absolute;
  inset: 0;

  background: #e2ff5d;

  transform: translateY(102%);

  transition:
    transform 0.45s var(--tl-ease);
}

.tl-contacts__submit span,
.tl-contacts__submit svg {
  position: relative;
  z-index: 2;
}

.tl-contacts__submit svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;

  transition:
    transform 0.4s var(--tl-ease);
}

.tl-contacts__submit:hover {
  transform: translateY(-3px);

  box-shadow:
    0 18px 42px
    rgba(207, 255, 0, 0.14);
}

.tl-contacts__submit:hover::before {
  transform: translateY(0);
}

.tl-contacts__submit:hover svg {
  transform: translateX(4px);
}

.tl-contacts__privacy {
  position: relative;
  z-index: 2;

  margin: 13px 0 0;

  color: var(--tl-text-muted);
  font-size: 9px;
  line-height: 1.45;
}

/* ---------- Decorative glass ---------- */

.tl-contacts__decor {
  position: absolute;
  z-index: 1;

  top: 40px;
  right: 27%;

  width: 360px;
  height: 440px;

  pointer-events: none;

  opacity: 0.68;
}

.tl-contacts__glass {
  position: absolute;

  display: block;

  border:
    1px solid rgba(255, 255, 255, 0.13);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.008)
    );

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tl-contacts__glass--one {
  top: 18px;
  left: 100px;

  width: 180px;
  height: 260px;

  transform:
    rotate(14deg)
    skewY(18deg);
}

.tl-contacts__glass--two {
  top: 110px;
  left: 30px;

  width: 220px;
  height: 205px;

  transform:
    rotate(-7deg)
    skewY(16deg);
}

.tl-contacts__glass--three {
  right: 2px;
  bottom: 12px;

  width: 170px;
  height: 230px;

  transform:
    rotate(12deg)
    skewY(-14deg);
}

.tl-contacts__accent {
  position: absolute;
  top: 110px;
  right: 48px;

  width: 2px;
  height: 245px;

  background: var(--tl-accent);

  box-shadow:
    0 0 20px
    rgba(207, 255, 0, 0.26);
}

/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1199px) {
  .tl-contacts__panel {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(340px, 0.75fr);

    gap: 42px;
    padding: 48px;
  }

  .tl-contacts__title {
    font-size:
      clamp(45px, 5.2vw, 68px);
  }

  .tl-contacts__details {
    grid-template-columns: 1fr;
  }

  .tl-contacts__decor {
    right: 24%;
    transform: scale(0.84);
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .tl-contacts__panel {
    grid-template-columns: 1fr;

    min-height: 0;
    padding: 42px;
  }

  .tl-contacts__content {
    min-height: 520px;
  }

  .tl-contacts__details {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .tl-contacts__brief {
    min-height: 520px;
  }

  .tl-contacts__decor {
    top: 30px;
    right: 5%;

    transform: scale(0.72);
    transform-origin: top right;

    opacity: 0.48;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-contacts {
    padding-bottom: 18px;
  }

  .tl-contacts__panel {
    gap: 28px;
    padding: 26px 20px;

    border-radius: 19px;
  }

  .tl-contacts__content {
    min-height: 0;
  }

  .tl-contacts__title {
    font-size:
      clamp(38px, 11.2vw, 54px);
  }

  .tl-contacts__description {
    margin-top: 22px;

    font-size: 15px;
  }

  .tl-contacts__details {
    grid-template-columns: 1fr;

    padding-top: 42px;
  }

  .tl-contact-link {
    min-height: 86px;
  }

  .tl-contacts__brief {
    min-height: 510px;
    padding: 22px 19px;
  }

  .tl-contacts__brief-main {
    margin-top: 52px;
  }

  .tl-contacts__brief-main > p {
    font-size: 20px;
  }

  .tl-contacts__decor {
    display: none;
  }
}

/* =========================================================
   TEILIORA — PORTFOLIO PAGE HERO
   ========================================================= */

.tl-portfolio-page {
  background: var(--tl-bg);
}

.tl-portfolio-hero {
  position: relative;

  min-height: 760px;
  padding-top: 86px;

  overflow: hidden;

  border-bottom:
    1px solid var(--tl-line-soft);

  background:
    radial-gradient(
      circle at 80% 28%,
      rgba(207, 255, 0, 0.055),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #0b0c0c 0%,
      #0d0f0e 58%,
      #090a09 100%
    );
}

.tl-portfolio-hero__grid {
  position: absolute;
  inset: 0;

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

  background-size: 88px 88px;

  mask-image:
    linear-gradient(
      to right,
      transparent 4%,
      rgba(0, 0, 0, 0.22) 45%,
      rgba(0, 0, 0, 0.85)
    );

  pointer-events: none;
}

.tl-portfolio-hero__glow {
  position: absolute;
  top: 18%;
  right: 8%;

  width: 480px;
  height: 480px;

  border-radius: 50%;

  background:
    rgba(207, 255, 0, 0.055);

  filter: blur(140px);

  pointer-events: none;
}

.tl-portfolio-hero__container {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(620px, 1.05fr)
    minmax(420px, 0.75fr);

  align-items: center;
  gap: 54px;

  min-height:
    calc(760px - 86px);

  padding-top: 70px;
  padding-bottom: 70px;
}

/* ---------- Content ---------- */

.tl-portfolio-hero__content {
  position: relative;
  z-index: 3;
}

.tl-portfolio-hero__title {
  max-width: 850px;
  margin: 0;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size:
    clamp(58px, 5.5vw, 92px);

  line-height: 0.96;
  font-weight: 300;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}

.tl-portfolio-hero__title em {
  display: inline-block;

  color: var(--tl-accent);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 1.08em;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.tl-portfolio-hero__description {
  max-width: 590px;
  margin: 30px 0 0;

  color: var(--tl-text-soft);

  font-size: 16px;
  line-height: 1.72;
}

.tl-portfolio-hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;

  margin-top: 40px;
}

.tl-portfolio-hero__actions .tl-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.tl-portfolio-hero__brief {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 0;

  color: var(--tl-text-soft);

  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  transition:
    color 0.3s var(--tl-ease);
}

.tl-portfolio-hero__brief span {
  color: var(--tl-accent);

  font-size: 18px;

  transition:
    transform 0.3s var(--tl-ease);
}

.tl-portfolio-hero__brief:hover {
  color: var(--tl-text);
}

.tl-portfolio-hero__brief:hover span {
  transform:
    translate(3px, -3px);
}

/* ---------- Aside ---------- */

.tl-portfolio-hero__aside {
  position: relative;

  min-height: 560px;
}

.tl-portfolio-hero__stats {
  position: absolute;
  z-index: 5;

  top: 30px;
  right: 0;

  display: grid;
  gap: 10px;

  width: 210px;
}

.tl-portfolio-hero__stat {
  padding: 18px 20px;

  border:
    1px solid var(--tl-line-soft);

  border-radius: 12px;

  background:
    rgba(14, 16, 15, 0.72);

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.tl-portfolio-hero__stat strong {
  display: block;

  color: var(--tl-accent);

  font-size: 35px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.05em;
}

.tl-portfolio-hero__stat span {
  display: block;
  margin-top: 7px;

  color: var(--tl-text-muted);

  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Visual ---------- */

.tl-portfolio-hero__visual {
  position: absolute;

  top: 50%;
  left: 44%;

  width: 510px;
  height: 520px;

  transform:
    translate(-50%, -47%);

  animation:
    tlPortfolioFloat 8s
    ease-in-out infinite;
}

.tl-portfolio-hero__glass {
  position: absolute;

  display: block;

  border:
    1px solid rgba(255, 255, 255, 0.15);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.008)
    );

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

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.tl-portfolio-hero__glass--one {
  top: 40px;
  left: 150px;

  width: 250px;
  height: 330px;

  transform:
    rotate(10deg)
    skewY(18deg);
}

.tl-portfolio-hero__glass--two {
  top: 145px;
  left: 34px;

  width: 305px;
  height: 240px;

  transform:
    rotate(-9deg)
    skewY(17deg);
}

.tl-portfolio-hero__glass--three {
  right: 10px;
  bottom: 26px;

  width: 245px;
  height: 285px;

  transform:
    rotate(12deg)
    skewY(-15deg);
}

.tl-portfolio-hero__screen {
  position: absolute;
  z-index: 3;

  display: block;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      #30342f,
      #101211
    );

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.46);
}

.tl-portfolio-hero__screen::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 26px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);

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

.tl-portfolio-hero__screen::after {
  content: "";

  position: absolute;
  top: 10px;
  left: 11px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--tl-accent);

  box-shadow:
    10px 0 rgba(255, 255, 255, 0.18),
    20px 0 rgba(255, 255, 255, 0.12);
}

.tl-portfolio-hero__screen i {
  position: absolute;
  inset: 43px 18px 18px;

  display: block;

  border-radius: 5px;

  background:
    linear-gradient(
      135deg,
      rgba(207, 255, 0, 0.25),
      transparent 42%
    ),
    linear-gradient(
      165deg,
      #434a40,
      #141714
    );
}

.tl-portfolio-hero__screen--one {
  top: 112px;
  left: 32px;

  width: 330px;
  height: 220px;

  transform: rotate(-7deg);
}

.tl-portfolio-hero__screen--two {
  right: 15px;
  bottom: 70px;

  width: 280px;
  height: 190px;

  transform: rotate(9deg);
}

.tl-portfolio-hero__accent {
  position: absolute;
  z-index: 6;

  top: 108px;
  right: 92px;

  width: 2px;
  height: 300px;

  background:
    var(--tl-accent);

  box-shadow:
    0 0 22px
    rgba(207, 255, 0, 0.30);
}

@keyframes tlPortfolioFloat {
  0%,
  100% {
    transform:
      translate(-50%, -47%)
      translateY(0);
  }

  50% {
    transform:
      translate(-50%, -47%)
      translateY(-10px);
  }
}

/* =========================================================
   CATALOG HEADER
   ========================================================= */

.tl-portfolio-catalog-head {
  position: relative;

  border-bottom:
    1px solid var(--tl-line-soft);
}

.tl-portfolio-catalog-head__top {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(280px, 0.45fr);

  align-items: end;
  gap: 60px;

  margin-bottom: 42px;
}

.tl-portfolio-catalog-head__description {
  max-width: 420px;
  margin: 0 0 6px;

  color: var(--tl-text-soft);

  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Filters ---------- */

.tl-portfolio-page-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tl-portfolio-page-filter {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  min-height: 44px;
  padding: 0 17px;

  border:
    1px solid var(--tl-line-soft);

  border-radius: 9px;

  color: var(--tl-text-soft);

  background:
    rgba(255, 255, 255, 0.018);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    color 0.3s var(--tl-ease),
    border-color 0.3s var(--tl-ease),
    background 0.3s var(--tl-ease),
    transform 0.3s var(--tl-ease);
}

.tl-portfolio-page-filter span {
  color: var(--tl-text-muted);

  font-size: 8px;
}

.tl-portfolio-page-filter:hover {
  color: var(--tl-text);

  border-color:
    rgba(207, 255, 0, 0.22);

  transform: translateY(-2px);
}

.tl-portfolio-page-filter.is-active {
  color: #090a09;

  border-color:
    var(--tl-accent);

  background:
    var(--tl-accent);
}

.tl-portfolio-page-filter.is-active span {
  color:
    rgba(9, 10, 9, 0.58);
}

/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1199px) {
  .tl-portfolio-hero__container {
    grid-template-columns:
      minmax(540px, 1fr)
      minmax(360px, 0.72fr);

    gap: 30px;
  }

  .tl-portfolio-hero__title {
    font-size:
      clamp(52px, 5.6vw, 74px);
  }

  .tl-portfolio-hero__visual {
    left: 46%;

    transform:
      translate(-50%, -47%)
      scale(0.86);
  }

  .tl-portfolio-hero__stats {
    width: 180px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {
  .tl-portfolio-hero {
    min-height: auto;
    padding-top: 78px;
  }

  .tl-portfolio-hero__container {
    grid-template-columns: 1fr;

    min-height: auto;

    padding-top: 64px;
    padding-bottom: 70px;
  }

  .tl-portfolio-hero__content {
    max-width: 760px;
  }

  .tl-portfolio-hero__aside {
    min-height: 520px;
  }

  .tl-portfolio-hero__visual {
    left: 48%;
  }

  .tl-portfolio-hero__stats {
    top: 24px;
    right: 4%;
  }

  .tl-portfolio-catalog-head__top {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .tl-portfolio-catalog-head__description {
    max-width: 620px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-portfolio-hero {
    padding-top: 72px;
  }

  .tl-portfolio-hero__container {
    padding-top: 42px;
    padding-bottom: 52px;
  }

  .tl-portfolio-hero__title {
    font-size:
      clamp(40px, 11.5vw, 56px);

    line-height: 0.98;
  }

  .tl-portfolio-hero__description {
    margin-top: 24px;

    font-size: 15px;
  }

  .tl-portfolio-hero__actions {
    flex-direction: column;
    align-items: stretch;

    gap: 16px;
    margin-top: 32px;
  }

  .tl-portfolio-hero__brief {
    justify-content: center;
  }

  .tl-portfolio-hero__aside {
    min-height: 470px;
  }

  .tl-portfolio-hero__visual {
    top: 55%;
    left: 48%;

    transform:
      translate(-50%, -50%)
      scale(0.68);
  }

  .tl-portfolio-hero__stats {
    top: 0;
    right: 0;

    width: 152px;
  }

  .tl-portfolio-hero__stat {
    padding: 14px 15px;
  }

  .tl-portfolio-hero__stat strong {
    font-size: 28px;
  }

  .tl-portfolio-page-filters {
    flex-wrap: nowrap;

    width: 100%;
    padding-bottom: 8px;

    overflow-x: auto;

    scrollbar-width: none;
  }

  .tl-portfolio-page-filters::-webkit-scrollbar {
    display: none;
  }

  .tl-portfolio-page-filter {
    flex: 0 0 auto;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479px) {
  .tl-portfolio-hero__aside {
    min-height: 410px;
  }

  .tl-portfolio-hero__visual {
    left: 49%;

    transform:
      translate(-50%, -50%)
      scale(0.58);
  }

  .tl-portfolio-hero__stats {
    width: 135px;
  }
}

/* =========================================================
   TEILIORA — PORTFOLIO LIST
   ========================================================= */

.tl-portfolio-list {
  position: relative;
  padding-top: 42px;
}

.tl-portfolio-list__grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}

.tl-portfolio-item {
  min-width: 0;
  overflow: hidden;

  border:
    1px solid var(--tl-line-soft);

  border-radius:
    var(--tl-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  transition:
    opacity 0.4s var(--tl-ease),
    transform 0.5s var(--tl-ease),
    border-color 0.5s var(--tl-ease);
}

.tl-portfolio-item--wide {
  grid-column: span 2;
}

.tl-portfolio-item.is-hidden {
  display: none;
}

.tl-portfolio-item:hover {
  transform: translateY(-6px);

  border-color:
    rgba(207, 255, 0, 0.28);
}

.tl-portfolio-item__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ---------- Preview ---------- */

.tl-portfolio-item__preview {
  position: relative;
  overflow: hidden;

  aspect-ratio: 16 / 10;

  background: #111;
}

.tl-portfolio-item--wide
.tl-portfolio-item__preview {
  aspect-ratio: 16 / 7.2;
}

.tl-portfolio-item__preview::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      transparent 35%,
      rgba(0, 0, 0, 0.28)
    );

  pointer-events: none;
}

.tl-portfolio-item__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    transform 0.9s var(--tl-ease),
    filter 0.9s var(--tl-ease);
}

.tl-portfolio-item:hover
.tl-portfolio-item__preview img {
  transform: scale(1.035);
  filter: brightness(0.86);
}

/* ---------- Browser top ---------- */

.tl-portfolio-item__browser {
  position: absolute;
  z-index: 4;

  top: 14px;
  left: 50%;

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

  width: calc(100% - 28px);
  height: 38px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius: 9px;

  background:
    rgba(12, 13, 13, 0.68);

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  transform: translateX(-50%);
}

.tl-portfolio-item__dots {
  position: absolute;
  left: 13px;

  display: flex;
  gap: 5px;
}

.tl-portfolio-item__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tl-portfolio-item__dots i:nth-child(1) {
  background: #ef6a45;
}

.tl-portfolio-item__dots i:nth-child(2) {
  background: #e9bf3c;
}

.tl-portfolio-item__dots i:nth-child(3) {
  background: #52bd61;
}

.tl-portfolio-item__address {
  max-width: 60%;
  overflow: hidden;

  color:
    rgba(242, 243, 239, 0.55);

  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tl-portfolio-item__index {
  position: absolute;
  z-index: 4;

  right: 19px;
  bottom: 17px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 10px;
  letter-spacing: 0.08em;
}

/* ---------- Content ---------- */

.tl-portfolio-item__content {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    48px;

  align-items: center;
  gap: 28px;

  min-height: 172px;
  padding: 25px 27px;
}

.tl-portfolio-item__tags {
  display: block;

  color: var(--tl-accent);

  font-size: 9px;
  line-height: 1.3;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.tl-portfolio-item__main h2 {
  margin: 13px 0 0;

  color: var(--tl-text);

  font-size:
    clamp(27px, 2.3vw, 40px);

  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.tl-portfolio-item__main p {
  max-width: 690px;
  margin: 17px 0 0;

  color: var(--tl-text-soft);

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

.tl-portfolio-item__arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border:
    1px solid var(--tl-accent-line);

  border-radius: 50%;

  transition:
    background 0.4s var(--tl-ease),
    transform 0.4s var(--tl-ease);
}

.tl-portfolio-item__arrow svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: var(--tl-accent);
  stroke-width: 1.5;

  transition:
    stroke 0.4s var(--tl-ease),
    transform 0.4s var(--tl-ease);
}

.tl-portfolio-item:hover
.tl-portfolio-item__arrow {
  background: var(--tl-accent);
  transform: translateX(3px);
}

.tl-portfolio-item:hover
.tl-portfolio-item__arrow svg {
  stroke: #090a09;
  transform: translateX(2px);
}

/* ---------- Bottom ---------- */

.tl-portfolio-list__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;

  margin-top: 46px;
  padding-top: 30px;

  border-top:
    1px solid var(--tl-line-soft);
}

.tl-portfolio-list__more p {
  max-width: 540px;
  margin: 0;

  color: var(--tl-text-soft);

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

.tl-portfolio-list__more
.tl-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .tl-portfolio-item,
  .tl-portfolio-item--wide {
    grid-column: span 2;
  }

  .tl-portfolio-item__preview,
  .tl-portfolio-item--wide
  .tl-portfolio-item__preview {
    aspect-ratio: 16 / 9;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-portfolio-list {
    padding-top: 22px;
  }

  .tl-portfolio-list__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tl-portfolio-item,
  .tl-portfolio-item--wide {
    grid-column: auto;
  }

  .tl-portfolio-item__preview,
  .tl-portfolio-item--wide
  .tl-portfolio-item__preview {
    aspect-ratio: 4 / 3;
  }

  .tl-portfolio-item__browser {
    top: 9px;

    width:
      calc(100% - 18px);

    height: 34px;
  }

  .tl-portfolio-item__content {
    grid-template-columns:
      minmax(0, 1fr)
      42px;

    gap: 15px;

    min-height: 0;
    padding: 20px;
  }

  .tl-portfolio-item__main h2 {
    font-size: 27px;
  }

  .tl-portfolio-item__main p {
    font-size: 13px;
  }

  .tl-portfolio-item__arrow {
    width: 42px;
    height: 42px;
  }

  .tl-portfolio-list__more {
    flex-direction: column;
    align-items: flex-start;
  }

  .tl-portfolio-list__more
  .tl-button {
    width: 100%;
  }
}
/* =========================================================
   PORTFOLIO ARCHIVE
   ========================================================= */

.tl-portfolio-list--archive {
  padding-top: 0;
}

.tl-portfolio-list__archive-head {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.45fr);

  align-items: end;
  gap: 60px;

  margin-bottom: 42px;
  padding-top: 70px;

  border-top: 1px solid var(--tl-line-soft);
}

.tl-portfolio-list__archive-head > p {
  max-width: 430px;
  margin: 0 0 5px;

  color: var(--tl-text-soft);
  font-size: 15px;
  line-height: 1.7;
}


/* =========================================================
   PORTFOLIO FINAL CTA
   ========================================================= */

.tl-portfolio-final-cta {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 60px;

  margin-top: 18px;
  padding: 52px 44px;

  overflow: hidden;

  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-radius-md);

  background:
    radial-gradient(
      circle at 88% 40%,
      rgba(207, 255, 0, 0.10),
      transparent 29%
    ),
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.012)
    );
}

.tl-portfolio-final-cta::before {
  content: "";

  position: absolute;
  top: -130px;
  right: 13%;

  width: 310px;
  height: 310px;

  border: 1px solid rgba(207, 255, 0, 0.14);
  border-radius: 50%;

  pointer-events: none;
}

.tl-portfolio-final-cta__content {
  position: relative;
  z-index: 2;
}

.tl-portfolio-final-cta h2 {
  max-width: 850px;
  margin: 0;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: clamp(36px, 4vw, 64px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.tl-portfolio-final-cta__content > p:last-child {
  max-width: 650px;
  margin: 22px 0 0;

  color: var(--tl-text-soft);
  font-size: 15px;
  line-height: 1.7;
}

.tl-portfolio-final-cta .tl-button {
  position: relative;
  z-index: 2;

  min-width: 230px;
}

.tl-portfolio-final-cta .tl-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .tl-portfolio-list__archive-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tl-portfolio-list__archive-head > p {
    max-width: 620px;
  }

  .tl-portfolio-final-cta {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .tl-portfolio-final-cta .tl-button {
    width: fit-content;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-portfolio-list__archive-head {
    margin-bottom: 30px;
    padding-top: 48px;
  }

  .tl-portfolio-final-cta {
    margin-top: 12px;
    padding: 30px 21px;
  }

  .tl-portfolio-final-cta h2 {
    font-size: 35px;
  }

  .tl-portfolio-final-cta .tl-button {
    width: 100%;
  }
}

/* mobile button */
@media (max-width: 900px) {
  .tl-mobile-menu__button {
    display: none !important;
  }
}


/* =========================================================
   HOME PORTFOLIO — MOBILE IMAGES FIX
   ========================================================= */

@media (max-width: 767px) {

  .tl-project-card .tl-browser {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .tl-project-card .tl-browser__screen {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 210px !important;
    aspect-ratio: 16 / 10 !important;

    overflow: hidden !important;
    background: #151716 !important;
  }

  .tl-project-card .tl-browser__screen img {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

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

    max-width: none !important;

    object-fit: cover !important;
    object-position: center top !important;

    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* =========================================================
   PORTFOLIO PAGE — MOBILE IMAGES FIX
   ========================================================= */

@media (max-width: 767px) {

  .tl-portfolio-item__preview {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 245px !important;
    aspect-ratio: 4 / 3 !important;

    overflow: hidden !important;
    background: #151716 !important;
  }

  .tl-portfolio-item__preview > img {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

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

    max-width: none !important;

    object-fit: cover !important;
    object-position: center top !important;

    visibility: visible !important;
    opacity: 1 !important;
  }
}
.tl-filter-scroll-hint {
  display: none;
}

@media (max-width: 767px) {

  .tl-portfolio__filters {
    position: relative;

    padding-right: 52px;
    padding-bottom: 7px;

    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
  }

  .tl-portfolio__filter {
    scroll-snap-align: start;
  }

  .tl-filter-scroll-hint {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 7px 0 0;

    color: var(--tl-text-muted);

    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .tl-filter-scroll-hint span {
    color: var(--tl-accent);
    font-size: 16px;

    animation: tlFilterHint 1.5s ease-in-out infinite;
  }
}

@keyframes tlFilterHint {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}
@media (max-width: 767px) {

  .tl-portfolio-page-filters {
    position: relative;

    padding-right: 54px;
    padding-bottom: 8px;

    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
  }

  .tl-portfolio-page-filter {
    scroll-snap-align: start;
  }

  .tl-filter-scroll-hint--page {
    margin-top: 9px;
  }
}
@media (max-width: 767px) {

  .tl-portfolio__filters,
  .tl-portfolio-page-filters {
    mask-image:
      linear-gradient(
        90deg,
        #000 0%,
        #000 86%,
        transparent 100%
      );

    -webkit-mask-image:
      linear-gradient(
        90deg,
        #000 0%,
        #000 86%,
        transparent 100%
      );
  }
}

/* =========================================================
   MOBILE FILTER SCROLL HINT
   ========================================================= */

@media (max-width:767px){

  .tl-portfolio__filters,
  .tl-portfolio-page-filters{

      position:relative;

      overflow-x:auto;
      overflow-y:hidden;

      display:flex;
      flex-wrap:nowrap;

padding-top:22px;
    padding-right:80px;
    padding-bottom:8px;

      scroll-behavior:smooth;
      scroll-snap-type:x proximity;

      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;

      -webkit-mask-image:
      linear-gradient(
          90deg,
          #000 0,
          #000 calc(100% - 70px),
          transparent 100%
      );

      mask-image:
      linear-gradient(
          90deg,
          #000 0,
          #000 calc(100% - 70px),
          transparent 100%
      );
  }

  .tl-portfolio__filters::-webkit-scrollbar,
  .tl-portfolio-page-filters::-webkit-scrollbar{
      display:none;
  }

  .tl-portfolio__filter,
  .tl-portfolio-page-filter{
      flex:0 0 auto;
      scroll-snap-align:start;
  }

  /*
     стрелка
  */

.tl-portfolio__filters::after,
.tl-portfolio-page-filters::after{

    content:"➜";

    position:absolute;

    top:2px;
    right:2px;

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

    width:26px;
    height:26px;

    color:var(--tl-accent);

    background:rgba(9,10,9,.82);
    border-radius:50%;

    font-size:17px;
    line-height:1;

    pointer-events:none;

    animation:tlFilterArrow 1.4s ease-in-out infinite;
}

}

@keyframes tlFilterArrow{

0%,100%{
transform:translateX(0);
opacity:.45;
}

50%{
transform:translateX(6px);
opacity:1;
}
}
/* =========================================================
   PORTFOLIO PAGE — PROJECT META
   ========================================================= */

.tl-portfolio-item__meta {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    48px;

  align-items: center;
  gap: 24px;

  min-height: 98px;
  padding: 19px 20px;
}

.tl-portfolio-item__identity {
  min-width: 0;
}

.tl-portfolio-item__identity h2 {
  margin: 0;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.04em;
  text-transform: none;
}

.tl-portfolio-item__details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 8px;
}

.tl-portfolio-item__details span {
  color: var(--tl-accent);

  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.tl-portfolio-item__details small {
  color: var(--tl-text-muted);

  font-size: 9px;
  line-height: 1.2;
}

.tl-portfolio-item__feature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tl-portfolio-item__feature strong {
  color: var(--tl-accent);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: clamp(28px, 2.8vw, 43px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.tl-portfolio-item__feature span {
  color: var(--tl-text-muted);

  font-size: 9px;
  line-height: 1.35;
  white-space: nowrap;
}

.tl-portfolio-item__arrow {
  width: 44px;
  height: 44px;
}

@media (max-width: 1100px) {

  .tl-portfolio-item__meta {
    grid-template-columns:
      minmax(0, 1fr)
      44px;
  }

  .tl-portfolio-item__feature {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tl-portfolio-item__arrow {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 767px) {

  .tl-portfolio-item__meta {
    grid-template-columns:
      minmax(0, 1fr)
      42px;

    gap: 12px;

    min-height: 0;
    padding: 16px;
  }

  .tl-portfolio-item__identity h2 {
    font-size: 24px;
  }

  .tl-portfolio-item__feature {
    grid-column: 1 / -1;
    grid-row: 2;

    gap: 10px;
  }

  .tl-portfolio-item__feature strong {
    font-size: 29px;
  }

  .tl-portfolio-item__feature span {
    font-size: 9px;
  }

  .tl-portfolio-item__arrow {
    grid-column: 2;
    grid-row: 1;

    width: 42px;
    height: 42px;
  }
}

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

.tl-header__cta svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* На мобильных показываем только гамбургер */
@media (max-width: 900px) {

  /* Скрываем CTA только внутри фиксированной шапки */
  .tl-header > .tl-header__inner > .tl-header__cta {
    display: none !important;
  }

  .tl-header__nav {
    display: none !important;
  }

  .tl-header__burger {
    display: flex !important;
  }
}
/* =========================================================
   MOBILE CTA — RESTORE SECTION BUTTONS
   ========================================================= */

@media (max-width: 900px) {

  /* Подход / процесс */
  .tl-process__bottom .tl-button,

  /* Почему мы */
  .tl-about__statement .tl-button,

  /* Есть задача? */
  .tl-proof__cta .tl-button,

  /* Контактный блок */
  .tl-contacts__submit,

  /* Общие CTA внутри контента */
  main .tl-brief-open,
  .tl-page .tl-brief-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .tl-process__bottom .tl-button,
  .tl-about__statement .tl-button,
  .tl-proof__cta .tl-button {
    width: 100% !important;
    min-height: 56px !important;
  }
}
/* =========================================================
   QZ101F — CLEAN MOBILE LAYOUT
   ========================================================= */

@media (max-width: 767px) {

  /* Затемнение вокруг окна */
  .t-popup {
    padding: 8px !important;
    overflow: hidden !important;
  }

  /* Само окно */
  .t-popup .t-popup__container,
  .t-popup .t-popup__container-static {
    position: relative !important;

    width: calc(100vw - 16px) !important;
    max-width: none !important;

    height: calc(100dvh - 16px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;

    margin: 8px auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    border-radius: 16px !important;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /*
   Внутренние элементы не должны иметь
   отдельную фиксированную высоту.
  */
  .t-popup .t-quiz,
  .t-popup .t-quiz__wrapper,
  .t-popup .t-quiz__content,
  .t-popup .t-form,
  .t-popup .t-form__inputsbox,
  .t-popup .t-form__screen,
  .t-popup [class*="quiz__wrapper"],
  .t-popup [class*="quiz__content"],
  .t-popup [class*="quiz__step"],
  .t-popup [class*="form__screen"] {
    position: relative !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
    transform: none !important;
  }

  /* Внутренние отступы */
  .t-popup .t-quiz__content,
  .t-popup [class*="quiz__content"],
  .t-popup .t-form__inputsbox {
    padding-right: 18px !important;
    padding-left: 18px !important;
    padding-bottom: 24px !important;
  }

  /* Ответы одной колонкой */
  .t-popup .t-radio__wrapper,
  .t-popup .t-checkbox__wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
  }

  /* Карточки ответов */
  .t-popup .t-radio__control,
  .t-popup .t-checkbox__control {
    width: 100% !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 13px 14px !important;
  }

  /*
   Панель навигации должна идти
   в обычном потоке после ответов.
  */
  .t-popup .t-quiz__buttons,
  .t-popup .t-quiz__btn-wrapper,
  .t-popup [class*="quiz__buttons"],
  .t-popup [class*="quiz__btn-wrapper"],
  .t-popup [class*="btn-wrapper"],
  .t-popup .t-form__submit {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

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

    margin: 20px 0 0 !important;
    padding: 14px 0 0 !important;

    transform: none !important;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent !important;
  }

  /* Кнопки навигации не должны быть абсолютными */
  .t-popup .t-quiz__buttons > *,
  .t-popup .t-quiz__btn-wrapper > *,
  .t-popup [class*="quiz__buttons"] > *,
  .t-popup [class*="quiz__btn-wrapper"] > * {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
  }

  /* Назад */
  .t-popup [class*="prev"],
  .t-popup [class*="back"] {
    flex: 0 0 54px !important;

    width: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }

  /* Далее */
  .t-popup [class*="next"],
  .t-popup .t-submit,
  .t-popup button[type="submit"] {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 54px !important;

    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  /* Крестик */
  .t-popup__close {
    position: absolute !important;
    z-index: 50 !important;

    top: 10px !important;
    right: 10px !important;

    width: 36px !important;
    height: 36px !important;
  }
}
/* =========================================================
   CONSISTENT DIAGONAL ARROWS
   ========================================================= */

.tl-contact-link__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  color: var(--tl-accent);
  font-size: 0;
}

.tl-contact-link__arrow svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.4s var(--tl-ease);
}

.tl-contact-link:hover .tl-contact-link__arrow {
  transform: none;
}

.tl-contact-link:hover .tl-contact-link__arrow svg {
  transform: translate(3px, -3px);
}


/* Стрелка рядом с «Обсудить свой проект» */

.tl-portfolio-hero__brief-arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;

  fill: none;
  stroke: var(--tl-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.3s var(--tl-ease);
}

.tl-portfolio-hero__brief:hover
.tl-portfolio-hero__brief-arrow {
  transform: translate(3px, -3px);
}
/* =========================================================
   TEILIORA — DIGITAL HERO SCENE
   ========================================================= */

.tl-digital-scene {
  position: absolute;
  top: 50%;
  left: 52%;

  width: 690px;
  height: 610px;

  transform:
    translate(-50%, -49%)
    perspective(1200px)
    rotateX(1deg)
    rotateY(-3deg);

  transform-style: preserve-3d;

  animation:
    tlDigitalSceneFloat
    8s ease-in-out infinite;
}

.tl-digital-scene__glow {
  position: absolute;
  top: 17%;
  left: 20%;

  width: 430px;
  height: 390px;

  border-radius: 50%;

  background:
    rgba(207, 255, 0, 0.09);

  filter: blur(115px);

  pointer-events: none;
}

/* ---------- Glass planes ---------- */

.tl-digital-scene__glass {
  position: absolute;

  display: block;

  border:
    1px solid rgba(255, 255, 255, 0.14);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.008)
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 34px 90px rgba(0, 0, 0, 0.24);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.tl-digital-scene__glass--back {
  top: 30px;
  right: 35px;

  width: 280px;
  height: 350px;

  transform:
    rotate(9deg)
    skewY(15deg)
    translateZ(-70px);

  opacity: 0.58;
}

.tl-digital-scene__glass--middle {
  top: 125px;
  left: 42px;

  width: 330px;
  height: 300px;

  transform:
    rotate(-8deg)
    skewY(14deg)
    translateZ(-35px);

  opacity: 0.72;
}

.tl-digital-scene__glass--front {
  right: 20px;
  bottom: 36px;

  width: 280px;
  height: 300px;

  transform:
    rotate(12deg)
    skewY(-13deg)
    translateZ(10px);

  opacity: 0.64;
}

/* =========================================================
   DIGITAL SCREENS
   ========================================================= */

.tl-digital-screen {
  position: absolute;
  z-index: 4;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  background:
    linear-gradient(
      145deg,
      rgba(31, 34, 31, 0.97),
      rgba(10, 12, 11, 0.98)
    );

  box-shadow:
    0 42px 90px rgba(0, 0, 0, 0.48),
    inset 0 1px rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- Desktop ---------- */

.tl-digital-screen--desktop {
  top: 108px;
  left: 20px;

  width: 470px;
  height: 310px;

  border-radius: 14px;

  transform:
    rotate(-6deg)
    translateZ(55px);
}

.tl-digital-screen__bar {
  position: relative;

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

  height: 38px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.07);

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

.tl-digital-screen__dots {
  position: absolute;
  left: 14px;

  display: flex;
  gap: 5px;
}

.tl-digital-screen__dots i {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}

.tl-digital-screen__dots i:nth-child(1) {
  background: rgba(255, 255, 255, 0.38);
}

.tl-digital-screen__dots i:nth-child(2) {
  background: rgba(255, 255, 255, 0.22);
}

.tl-digital-screen__dots i:nth-child(3) {
  background: var(--tl-accent);
}

.tl-digital-screen__address {
  min-width: 180px;
  padding: 7px 18px;

  overflow: hidden;

  border-radius: 6px;

  color: rgba(242, 243, 239, 0.32);
  background: rgba(0, 0, 0, 0.20);

  font-size: 7px;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.04em;
}

.tl-digital-screen__content {
  position: relative;

  height: calc(100% - 38px);
  padding: 31px 29px;

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

  background-size: 44px 44px;
}

.tl-ui-label {
  display: block;

  color: var(--tl-accent);

  font-size: 7px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tl-ui-title {
  display: block;

  margin-top: 15px;

  color: var(--tl-text);

  font-size: 28px;
  line-height: 0.96;
  font-weight: 300;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.tl-ui-text {
  display: block;

  width: 160px;
  height: 4px;

  margin-top: 18px;

  border-radius: 20px;

  background:
    rgba(242, 243, 239, 0.18);
}

.tl-ui-text--short {
  width: 105px;
  margin-top: 8px;
}

.tl-ui-button {
  display: inline-flex;
  align-items: center;

  min-height: 28px;
  margin-top: 21px;
  padding: 0 12px;

  border:
    1px solid rgba(207, 255, 0, 0.42);

  border-radius: 5px;

  color: var(--tl-accent);

  font-size: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tl-ui-visual {
  position: absolute;
  top: 34px;
  right: 28px;

  width: 150px;
  height: 180px;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 9px;

  background:
    radial-gradient(
      circle at 48% 42%,
      rgba(207, 255, 0, 0.18),
      transparent 27%
    ),
    rgba(255, 255, 255, 0.025);
}

.tl-ui-visual i {
  position: absolute;

  display: block;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.008)
    );
}

.tl-ui-visual i:nth-child(1) {
  top: 24px;
  left: 34px;

  width: 72px;
  height: 104px;

  transform: rotate(13deg);
}

.tl-ui-visual i:nth-child(2) {
  top: 56px;
  left: 19px;

  width: 88px;
  height: 78px;

  transform: rotate(-8deg);
}

.tl-ui-visual i:nth-child(3) {
  top: 45px;
  right: 18px;

  width: 2px;
  height: 102px;

  border: 0;

  background: var(--tl-accent);

  box-shadow:
    0 0 14px rgba(207, 255, 0, 0.28);
}

/* ---------- Mobile screen ---------- */

.tl-digital-screen--mobile {
  z-index: 6;

  right: 30px;
  bottom: 46px;

  width: 185px;
  height: 340px;

  border-radius: 22px;

  transform:
    rotate(8deg)
    translateZ(95px);
}

.tl-digital-screen__mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 34px;
  padding: 0 16px;
}

.tl-digital-screen__mobile-top span {
  width: 34px;
  height: 4px;

  border-radius: 10px;

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

.tl-digital-screen__mobile-top i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--tl-accent);
}

.tl-digital-screen__mobile-content {
  padding: 15px;
}

.tl-mobile-label {
  display: block;

  width: 52px;
  height: 3px;

  border-radius: 10px;

  background: var(--tl-accent);
}

.tl-mobile-title {
  display: block;

  width: 120px;
  height: 9px;

  margin-top: 14px;

  border-radius: 10px;

  background:
    rgba(242, 243, 239, 0.72);
}

.tl-mobile-title--short {
  width: 84px;
  margin-top: 7px;
}

.tl-mobile-card {
  position: relative;

  display: block;

  height: 128px;
  margin-top: 22px;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 9px;

  background:
    radial-gradient(
      circle at 55% 45%,
      rgba(207, 255, 0, 0.16),
      transparent 28%
    ),
    rgba(255, 255, 255, 0.025);
}

.tl-mobile-card i {
  position: absolute;
  top: 23px;
  left: 41px;

  width: 72px;
  height: 85px;

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

  transform: rotate(13deg);
}

.tl-mobile-line {
  display: block;

  width: 100%;
  height: 4px;

  margin-top: 17px;

  border-radius: 10px;

  background:
    rgba(242, 243, 239, 0.15);
}

.tl-mobile-line--short {
  width: 70%;
  margin-top: 8px;
}

.tl-mobile-button {
  display: block;

  width: 100%;
  height: 28px;

  margin-top: 18px;

  border-radius: 6px;

  background: var(--tl-accent);
}

/* =========================================================
   UI PANEL
   ========================================================= */

.tl-digital-panel {
  position: absolute;
  z-index: 7;

  top: 45px;
  right: 55px;

  width: 190px;
  min-height: 150px;

  padding: 18px;

  border:
    1px solid rgba(255, 255, 255, 0.13);

  border-radius: 12px;

  background:
    rgba(16, 18, 17, 0.75);

  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.36);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transform:
    rotate(6deg)
    translateZ(110px);
}

.tl-digital-panel__label {
  color: var(--tl-text-muted);

  font-size: 7px;
  letter-spacing: 0.09em;
}

.tl-digital-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;

  margin-top: 15px;
}

.tl-digital-panel__grid i {
  height: 24px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 4px;

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

.tl-digital-panel__grid i:nth-child(2),
.tl-digital-panel__grid i:nth-child(5) {
  background:
    rgba(207, 255, 0, 0.08);

  border-color:
    rgba(207, 255, 0, 0.25);
}

.tl-digital-panel__colors {
  display: flex;
  gap: 7px;

  margin-top: 14px;
}

.tl-digital-panel__colors span {
  width: 16px;
  height: 16px;

  border-radius: 50%;

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

.tl-digital-panel__colors span:nth-child(2) {
  background:
    rgba(242, 243, 239, 0.68);
}

.tl-digital-panel__colors span:nth-child(3) {
  background: var(--tl-accent);
}

/* =========================================================
   DECORATIVE LINES
   ========================================================= */

.tl-digital-scene__line {
  position: absolute;
  z-index: 3;

  display: block;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.50),
      transparent
    );
}

.tl-digital-scene__line--one {
  top: 185px;
  left: 8px;

  width: 560px;

  transform: rotate(24deg);
}

.tl-digital-scene__line--two {
  top: 115px;
  left: 150px;

  width: 410px;

  opacity: 0.55;

  transform: rotate(24deg);
}

.tl-digital-scene__accent {
  position: absolute;
  z-index: 9;

  top: 105px;
  right: 11px;

  width: 2px;
  height: 350px;

  background: var(--tl-accent);

  box-shadow:
    0 0 22px rgba(207, 255, 0, 0.30);

  animation:
    tlDigitalAccentPulse
    3.2s ease-in-out infinite;
}

/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes tlDigitalSceneFloat {
  0%,
  100% {
    transform:
      translate(-50%, -49%)
      perspective(1200px)
      rotateX(1deg)
      rotateY(-3deg)
      translateY(0);
  }

  50% {
    transform:
      translate(-50%, -49%)
      perspective(1200px)
      rotateX(1deg)
      rotateY(-3deg)
      translateY(-10px);
  }
}

@keyframes tlDigitalAccentPulse {
  0%,
  100% {
    opacity: 0.68;
  }

  50% {
    opacity: 1;
  }
}

/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1350px) {
  .tl-digital-scene {
    left: 53%;

    transform:
      translate(-50%, -49%)
      scale(0.88);
  }

  @keyframes tlDigitalSceneFloat {
    0%,
    100% {
      transform:
        translate(-50%, -49%)
        scale(0.88)
        translateY(0);
    }

    50% {
      transform:
        translate(-50%, -49%)
        scale(0.88)
        translateY(-8px);
    }
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {
  .tl-digital-scene {
    top: 49%;
    left: 51%;

    transform:
      translate(-50%, -50%)
      scale(0.82);
  }

  @keyframes tlDigitalSceneFloat {
    0%,
    100% {
      transform:
        translate(-50%, -50%)
        scale(0.82)
        translateY(0);
    }

    50% {
      transform:
        translate(-50%, -50%)
        scale(0.82)
        translateY(-8px);
    }
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-hero__visual {
    min-height: 420px;
  }

  .tl-digital-scene {
    top: 50%;
    left: 50%;

    transform:
      translate(-50%, -50%)
      scale(0.58);
  }

  @keyframes tlDigitalSceneFloat {
    0%,
    100% {
      transform:
        translate(-50%, -50%)
        scale(0.58)
        translateY(0);
    }

    50% {
      transform:
        translate(-50%, -50%)
        scale(0.58)
        translateY(-6px);
    }
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479px) {
  .tl-hero__visual {
    min-height: 375px;
  }

  .tl-digital-scene {
    left: 51%;

    transform:
      translate(-50%, -50%)
      scale(0.51);
  }

  @keyframes tlDigitalSceneFloat {
    0%,
    100% {
      transform:
        translate(-50%, -50%)
        scale(0.51)
        translateY(0);
    }

    50% {
      transform:
        translate(-50%, -50%)
        scale(0.51)
        translateY(-5px);
    }
  }
}
/* =========================================================
   DIGITAL HERO — MOBILE INNER ANIMATION
   ========================================================= */

@media (max-width: 767px) {

  .tl-digital-screen--desktop {
    animation:
      tlMobileDesktopFloat
      5.8s ease-in-out infinite;
  }

  .tl-digital-screen--mobile {
    animation:
      tlMobilePhoneFloat
      5.2s ease-in-out infinite;
  }

  .tl-digital-panel {
    animation:
      tlMobilePanelFloat
      4.8s ease-in-out infinite;
  }

  .tl-ui-visual i:nth-child(1) {
    animation:
      tlMobileUiLayerOne
      4.6s ease-in-out infinite;
  }

  .tl-ui-visual i:nth-child(2) {
    animation:
      tlMobileUiLayerTwo
      5.1s ease-in-out infinite;
  }

  .tl-mobile-card i {
    animation:
      tlMobileCardFloat
      4.4s ease-in-out infinite;
  }

  .tl-digital-scene__accent {
    animation:
      tlDigitalAccentPulse
      2.6s ease-in-out infinite;
  }
}


/* ---------- Desktop screen ---------- */

@keyframes tlMobileDesktopFloat {
  0%,
  100% {
    transform:
      rotate(-6deg)
      translateZ(55px)
      translateY(0);
  }

  50% {
    transform:
      rotate(-5deg)
      translateZ(55px)
      translateY(-8px);
  }
}


/* ---------- Mobile screen ---------- */

@keyframes tlMobilePhoneFloat {
  0%,
  100% {
    transform:
      rotate(8deg)
      translateZ(95px)
      translateY(0);
  }

  50% {
    transform:
      rotate(10deg)
      translateZ(95px)
      translateY(-11px);
  }
}


/* ---------- UI panel ---------- */

@keyframes tlMobilePanelFloat {
  0%,
  100% {
    transform:
      rotate(6deg)
      translateZ(110px)
      translateY(0);
  }

  50% {
    transform:
      rotate(4deg)
      translateZ(110px)
      translateY(-7px);
  }
}


/* ---------- Desktop UI layers ---------- */

@keyframes tlMobileUiLayerOne {
  0%,
  100% {
    transform:
      rotate(13deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(10deg)
      translateY(-5px);
  }
}

@keyframes tlMobileUiLayerTwo {
  0%,
  100% {
    transform:
      rotate(-8deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(-5deg)
      translateY(5px);
  }
}


/* ---------- Phone card ---------- */

@keyframes tlMobileCardFloat {
  0%,
  100% {
    transform:
      rotate(13deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(9deg)
      translateY(-6px);
  }
}

/* TEILIORA — CASE PAGE */
.tl-case-page{overflow:hidden;color:var(--tl-text);background:var(--tl-bg)}
.tl-case-hero{position:relative;min-height:820px;padding-top:86px;overflow:hidden;border-bottom:1px solid var(--tl-line-soft);background:radial-gradient(circle at 82% 24%,rgba(207,255,0,.065),transparent 28%),linear-gradient(120deg,#0b0c0c 0%,#0d0f0e 58%,#090a09 100%)}
.tl-case-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(to right,transparent 3%,rgba(0,0,0,.28) 48%,#000);pointer-events:none}
.tl-case-hero__glow{position:absolute;top:18%;right:7%;width:520px;height:520px;border-radius:50%;background:rgba(207,255,0,.06);filter:blur(150px);pointer-events:none}
.tl-case-hero__container{position:relative;z-index:2;display:grid;grid-template-columns:minmax(420px,.72fr) minmax(620px,1.28fr);align-items:center;gap:58px;min-height:calc(820px - 86px);padding-top:70px;padding-bottom:70px}
.tl-case-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:54px;color:var(--tl-text-muted);font-size:10px;letter-spacing:.05em;text-transform:uppercase}.tl-case-back svg{width:17px;height:17px;fill:none;stroke:var(--tl-accent);stroke-width:1.5}
.tl-case-hero__title{margin:0;font-size:clamp(70px,7vw,118px);line-height:.84;font-weight:300;letter-spacing:-.065em;text-transform:uppercase}.tl-case-hero__title em{color:var(--tl-accent);font-family:"Cormorant Garamond",Georgia,serif;font-size:1.08em;font-weight:500}
.tl-case-hero__description{max-width:520px;margin:34px 0 0;color:var(--tl-text-soft);font-size:16px;line-height:1.7}.tl-case-hero__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}.tl-case-hero__meta span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--tl-line);border-radius:20px;color:var(--tl-text-muted);background:rgba(255,255,255,.022);font-size:9px;text-transform:uppercase}
.tl-case-hero__visual{position:relative;min-height:610px}.tl-case-browser{overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:#111;box-shadow:0 40px 100px rgba(0,0,0,.46)}.tl-case-browser--hero{position:absolute;z-index:4;top:50%;left:50%;width:760px;transform:translate(-50%,-50%) rotate(-3deg);animation:tlCaseBrowserFloat 8s ease-in-out infinite}
.tl-case-browser__bar{position:relative;display:flex;align-items:center;justify-content:center;height:42px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025))}.tl-case-browser__dots{position:absolute;left:15px;display:flex;gap:6px}.tl-case-browser__dots i{width:7px;height:7px;border-radius:50%}.tl-case-browser__dots i:nth-child(1){background:#ef6a45}.tl-case-browser__dots i:nth-child(2){background:#e9bf3c}.tl-case-browser__dots i:nth-child(3){background:#52bd61}.tl-case-browser__address{color:var(--tl-text-muted);font-size:8px}.tl-case-browser__screen{overflow:hidden;aspect-ratio:16/9}.tl-case-browser__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tl-case-hero__glass{position:absolute;display:block;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.008));backdrop-filter:blur(5px)}.tl-case-hero__glass--one{top:45px;right:-30px;width:300px;height:370px;transform:rotate(11deg) skewY(16deg)}.tl-case-hero__glass--two{left:10px;bottom:35px;width:350px;height:250px;transform:rotate(-8deg) skewY(13deg)}.tl-case-hero__accent{position:absolute;z-index:7;top:90px;right:18px;width:2px;height:390px;background:var(--tl-accent);box-shadow:0 0 20px rgba(207,255,0,.3)}
@keyframes tlCaseBrowserFloat{0%,100%{transform:translate(-50%,-50%) rotate(-3deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(-2deg) translateY(-10px)}}
.tl-case-overview__grid{display:grid;grid-template-columns:minmax(320px,.55fr) minmax(0,1fr);gap:100px}.tl-case-facts{border-top:1px solid var(--tl-line-soft)}.tl-case-fact{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--tl-line-soft)}.tl-case-fact span{color:var(--tl-text-muted);font-size:9px;text-transform:uppercase}.tl-case-fact strong{font-size:16px;font-weight:400}.tl-case-overview__content h2{margin:0;font-size:clamp(40px,4.3vw,68px);line-height:1.02;font-weight:300;letter-spacing:-.05em;text-transform:uppercase}.tl-case-overview__content>p:not(.tl-section-label){max-width:690px;margin:25px 0 0;color:var(--tl-text-soft);font-size:16px;line-height:1.75}
.tl-case-showcase__head,.tl-case-system__head,.tl-case-mobile__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.42fr);align-items:end;gap:70px;margin-bottom:44px}.tl-case-showcase__head>p,.tl-case-system__head>p,.tl-case-mobile__head>p{margin:0;color:var(--tl-text-soft);font-size:15px;line-height:1.7}.tl-case-browser--wide{width:100%;border-radius:18px}.tl-case-browser--wide .tl-case-browser__screen{aspect-ratio:16/8.2}
.tl-case-story__head,.tl-case-details__head{margin-bottom:52px}.tl-case-story__grid,.tl-case-system__grid,.tl-case-details__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tl-case-story-card,.tl-case-system-card{min-height:330px;padding:28px;border:1px solid var(--tl-line-soft);border-radius:var(--tl-radius-md);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}.tl-case-story-card{position:relative;overflow:hidden}.tl-case-story-card:before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background:var(--tl-accent);transform:scaleY(.18);transform-origin:top;transition:transform .55s var(--tl-ease)}.tl-case-story-card:hover:before{transform:scaleY(1)}.tl-case-story-card__number,.tl-case-system-card__label{color:var(--tl-accent);font-size:10px;text-transform:uppercase}.tl-case-story-card h3{margin:130px 0 0;font-size:clamp(28px,2.5vw,40px);font-weight:400;text-transform:uppercase}.tl-case-story-card p,.tl-case-system-card p{margin:20px 0 0;color:var(--tl-text-soft);font-size:14px;line-height:1.65}.tl-case-system-card>strong{display:block;margin-top:90px;color:var(--tl-accent);font-size:clamp(42px,4vw,68px);font-weight:300}.tl-case-palette{display:flex;align-items:flex-end;gap:10px;min-height:130px;margin-top:34px}.tl-case-palette span{display:block;flex:1;height:95px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:var(--swatch)}.tl-case-grid-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:42px}.tl-case-grid-demo i{height:58px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:rgba(255,255,255,.025)}
.tl-case-detail{overflow:hidden;border:1px solid var(--tl-line-soft);border-radius:var(--tl-radius-md);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}.tl-case-detail__visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:260px;overflow:hidden;border-bottom:1px solid var(--tl-line-soft);background:radial-gradient(circle at 50% 50%,rgba(207,255,0,.1),transparent 34%),rgba(255,255,255,.012)}.tl-case-detail__button{display:inline-flex;align-items:center;min-height:54px;padding:0 22px;border:1px solid var(--tl-accent);border-radius:9px;color:#090a09;background:var(--tl-accent);font-size:10px;font-weight:600;text-transform:uppercase}.tl-case-detail__visual--glass i{position:absolute;width:110px;height:150px;border:1px solid rgba(255,255,255,.15);background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.008))}.tl-case-detail__visual--glass i:nth-child(1){transform:translate(-55px,10px) rotate(-10deg)}.tl-case-detail__visual--glass i:nth-child(2){transform:translate(15px,-15px) rotate(8deg)}.tl-case-detail__visual--glass i:nth-child(3){width:2px;border:0;background:var(--tl-accent);transform:translate(75px,0)}.tl-case-detail__visual--motion i{position:absolute;width:150px;height:90px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.025)}.tl-case-detail__visual--motion i:first-child{transform:translate(-35px,18px) rotate(-5deg)}.tl-case-detail__visual--motion i:last-child{transform:translate(35px,-18px) rotate(6deg)}.tl-case-detail__content{padding:24px}.tl-case-detail__content>span{color:var(--tl-accent);font-size:9px}.tl-case-detail__content h3{margin:15px 0 0;font-size:26px;font-weight:400;text-transform:uppercase}.tl-case-detail__content p{margin:14px 0 0;color:var(--tl-text-soft);font-size:14px;line-height:1.6}
.tl-case-mobile__scene{position:relative;min-height:720px;overflow:hidden;border:1px solid var(--tl-line-soft);border-radius:var(--tl-radius-lg);background:radial-gradient(circle at 50% 50%,rgba(207,255,0,.095),transparent 31%),linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}.tl-case-phone{position:absolute;top:50%;left:50%;width:245px;height:510px;padding:8px;border:1px solid rgba(255,255,255,.16);border-radius:34px;background:#090a09;box-shadow:0 35px 90px rgba(0,0,0,.48)}.tl-case-phone__speaker{position:absolute;z-index:3;top:15px;left:50%;width:58px;height:5px;border-radius:10px;background:rgba(255,255,255,.13);transform:translateX(-50%)}.tl-case-phone__screen{width:100%;height:100%;overflow:hidden;border-radius:27px}.tl-case-phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}.tl-case-phone--one{transform:translate(-155%,-48%) rotate(-10deg)}.tl-case-phone--two{z-index:3;transform:translate(-50%,-52%)}.tl-case-phone--three{transform:translate(55%,-48%) rotate(10deg)}
.tl-case-result__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.55fr);gap:70px;padding:56px 50px;border:1px solid var(--tl-line-soft);border-radius:var(--tl-radius-lg);background:radial-gradient(circle at 88% 40%,rgba(207,255,0,.1),transparent 28%),linear-gradient(125deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}.tl-case-result__content h2{margin:0;font-size:clamp(40px,4.4vw,68px);font-weight:300;text-transform:uppercase}.tl-case-result__content>p:last-child{margin:22px 0 0;color:var(--tl-text-soft);line-height:1.7}.tl-case-result__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--tl-line-soft)}.tl-case-result__list li{position:relative;padding:17px 0 17px 28px;border-bottom:1px solid var(--tl-line-soft);color:var(--tl-text-soft);font-size:13px}.tl-case-result__list li:before{content:"";position:absolute;top:21px;left:3px;width:7px;height:7px;border:1px solid var(--tl-accent);transform:rotate(45deg)}
.tl-case-next{padding:0 0 90px}.tl-case-next__link{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:40px;padding:54px 48px;border:1px solid var(--tl-line-soft);border-radius:var(--tl-radius-lg);background:linear-gradient(125deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}.tl-case-next__link h2{margin:0;font-size:clamp(46px,6vw,92px);font-weight:300;text-transform:uppercase}.tl-case-next__link>div>span{display:block;margin-top:17px;color:var(--tl-text-muted);font-size:12px}.tl-case-next__arrow{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border:1px solid var(--tl-accent-line);border-radius:50%}.tl-case-next__arrow svg{width:23px;height:23px;fill:none;stroke:var(--tl-accent);stroke-width:1.5}
@media(max-width:1100px){.tl-case-hero__container{grid-template-columns:1fr;min-height:auto}.tl-case-hero__visual{min-height:580px}.tl-case-overview__grid{grid-template-columns:1fr;gap:60px}.tl-case-showcase__head,.tl-case-system__head,.tl-case-mobile__head{grid-template-columns:1fr;gap:24px}.tl-case-story__grid,.tl-case-system__grid,.tl-case-details__grid{grid-template-columns:1fr}.tl-case-result__panel{grid-template-columns:1fr}}
@media(max-width:767px){.tl-case-hero{min-height:auto;padding-top:72px}.tl-case-hero__container{gap:30px;padding-top:38px;padding-bottom:50px}.tl-case-back{margin-bottom:34px}.tl-case-hero__title{font-size:clamp(58px,19vw,82px)}.tl-case-hero__visual{min-height:360px}.tl-case-browser--hero{width:560px;transform:translate(-50%,-50%) rotate(-3deg) scale(.63)}.tl-case-fact{grid-template-columns:92px 1fr}.tl-case-overview__content h2,.tl-case-result__content h2{font-size:35px}.tl-case-browser--wide .tl-case-browser__screen{aspect-ratio:4/3}.tl-case-story-card,.tl-case-system-card{min-height:260px;padding:22px 20px}.tl-case-story-card h3{margin-top:66px;font-size:29px}.tl-case-system-card>strong{margin-top:65px;font-size:42px}.tl-case-detail__visual{min-height:220px}.tl-case-mobile__scene{min-height:520px}.tl-case-phone{width:185px;height:390px}.tl-case-phone--one{transform:translate(-137%,-47%) rotate(-10deg) scale(.78)}.tl-case-phone--two{transform:translate(-50%,-52%) scale(.86)}.tl-case-phone--three{transform:translate(37%,-47%) rotate(10deg) scale(.78)}.tl-case-result__panel{gap:38px;padding:30px 21px}.tl-case-next{padding-bottom:54px}.tl-case-next__link{grid-template-columns:minmax(0,1fr) 52px;gap:18px;padding:30px 21px}.tl-case-next__link h2{font-size:42px}.tl-case-next__arrow{width:50px;height:50px}}

/* =========================================================
   MILLENNIUM — CASE ACCENTS
   Добавить после общего CSS кейсов
   ========================================================= */

.tl-case-millennium {
  --tl-accent: #ffc65a;
  --tl-accent-line: rgba(255, 198, 90, 0.42);
}

.tl-case-millennium .tl-case-hero {
  background:
    radial-gradient(circle at 82% 24%, rgba(255,198,90,.10), transparent 28%),
    radial-gradient(circle at 68% 64%, rgba(169,83,40,.08), transparent 32%),
    linear-gradient(120deg, #050505 0%, #0a0908 58%, #030303 100%);
}

.tl-case-millennium .tl-case-hero__title {
  font-size: clamp(56px, 6vw, 102px);
  line-height: .9;
  letter-spacing: -.07em;
}

.tl-case-millennium .tl-case-browser--hero {
  transform: translate(-50%,-50%) rotate(3deg);
  animation: tlCaseMillenniumFloat 8s ease-in-out infinite;
}

.tl-case-millennium .tl-case-hero__glass {
  border-color: rgba(255,198,90,.14);
  background:
    linear-gradient(
      145deg,
      rgba(255,198,90,.05),
      rgba(255,255,255,.006)
    );
}

.tl-case-millennium .tl-case-hero__accent {
  background: #ffc65a;
  box-shadow: 0 0 22px rgba(255,198,90,.30);
}

.tl-case-millennium .tl-case-story-card::before,
.tl-case-millennium .tl-case-detail__visual--glass i:nth-child(3) {
  background: #ffc65a;
}

.tl-case-millennium .tl-case-detail__visual {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,198,90,.12), transparent 34%),
    rgba(255,255,255,.012);
}

.tl-case-millennium .tl-case-detail__button {
  border-color: #ffc65a;
  background: #ffc65a;
  color: #090705;
}

.tl-case-millennium .tl-case-system-card--colors .tl-case-palette span:nth-child(1) {
  background: #050505 !important;
}

.tl-case-millennium .tl-case-system-card--colors .tl-case-palette span:nth-child(2) {
  background: #f4f1ea !important;
}

.tl-case-millennium .tl-case-system-card--colors .tl-case-palette span:nth-child(3) {
  background: #ffc65a !important;
}

.tl-case-millennium .tl-case-system-card--colors .tl-case-palette span:nth-child(4) {
  background: #a95328 !important;
}

@keyframes tlCaseMillenniumFloat {
  0%,
  100% {
    transform: translate(-50%,-50%) rotate(3deg) translateY(0);
  }

  50% {
    transform: translate(-50%,-50%) rotate(2deg) translateY(-10px);
  }
}

@media (max-width: 767px) {
  .tl-case-millennium .tl-case-hero__title {
    font-size: clamp(45px, 13vw, 64px);
    line-height: .92;
  }

  @keyframes tlCaseMillenniumFloat {
    0%,
    100% {
      transform: translate(-50%,-50%) rotate(3deg) scale(.63) translateY(0);
    }

    50% {
      transform: translate(-50%,-50%) rotate(2deg) scale(.63) translateY(-8px);
    }
  }
}

/* =========================================================
   TEILIORA — ART CASE / ПРОУЮТ
   Добавить после общего CSS сайта
   ========================================================= */

.tl-artcase {
  --art-red: #8b120d;
  --art-red-dark: #390b0a;
  --art-blue: #6d97bd;
  --art-orange: #d99552;
  --art-cream: #efe0c9;
  --art-pink: #e8b4bd;

  overflow: hidden;
  color: var(--tl-text);
  background: #0b0909;
}

.tl-artcase img {
  display: block;
  max-width: 100%;
}

.tl-artcase h1,
.tl-artcase h2,
.tl-artcase h3,
.tl-artcase p,
.tl-artcase blockquote {
  box-sizing: border-box;
}

/* HERO */

.tl-artcase-hero {
  position: relative;
  min-height: 930px;
  padding-top: 86px;
  overflow: hidden;
  background: #120b0b;
}

.tl-artcase-hero__media,
.tl-artcase-hero__overlay,
.tl-artcase-hero__grain {
  position: absolute;
  inset: 0;
}

.tl-artcase-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(.96) brightness(.94) contrast(.98);
  transform: scale(1.015);
}

.tl-artcase-hero__overlay {
  background: none;
}

.tl-artcase-hero__grain {
  opacity: .12;
  background-image:
    repeating-radial-gradient(circle at 0 0, transparent 0, rgba(255,255,255,.4) 1px, transparent 2px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.tl-artcase-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: calc(930px - 86px);
  flex-direction: column;
  justify-content: space-between;
  padding-top: 40px;
  padding-bottom: 48px;
}

.tl-artcase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-artcase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.66);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-artcase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--art-pink);
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-artcase-back:hover svg {
  transform: translateX(-4px);
}

.tl-artcase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-artcase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.035);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tl-artcase-hero__content {
  max-width: 830px;
  margin-top: auto;
  padding-bottom: 95px;
}

.tl-artcase-proyut .tl-section-label {
  color: var(--art-pink);
}

.tl-artcase-hero h1 {
  margin: 0;
  color: var(--art-cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(92px, 12vw, 185px);
  line-height: .78;
  font-weight: 500;
  letter-spacing: -.06em;
}

.tl-artcase-hero__lead {
  margin: 40px 0 0;
  color: var(--art-pink);
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: .95;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-artcase-hero__description {
  max-width: 590px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.67);
  font-size: 16px;
  line-height: 1.75;
}

.tl-artcase-hero__scroll {
  position: absolute;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tl-artcase-hero__scroll span {
  display: block;
  width: 38px;
  height: 1px;
  background: var(--art-pink);
}

.tl-artcase-hero__scroll p {
  margin: 0;
  color: rgba(255,255,255,.48);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* MANIFEST */

.tl-artcase-manifest {
  background: var(--art-red);
}

.tl-artcase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.6fr);
  align-items: center;
  gap: 90px;
}

.tl-artcase-manifest__quote span {
  display: block;
  color: var(--art-orange);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(50px,6vw,90px);
  line-height: .9;
}

.tl-artcase-manifest__quote strong {
  display: block;
  margin-top: 15px;
  color: var(--art-cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(72px,9vw,145px);
  line-height: .77;
  font-weight: 500;
  letter-spacing: -.055em;
}

.tl-artcase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(239,224,201,.3);
}

.tl-artcase-manifest__text > p:not(.tl-section-label) {
  margin: 24px 0 0;
  color: rgba(239,224,201,.8);
  font-size: 15px;
  line-height: 1.75;
}

/* PHOTO */

.tl-artcase-photo {
  background: #160c0b;
}

.tl-artcase-photo__frame {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border-radius: 4px;
}

.tl-artcase-photo__frame img {
  width: 100%;
  height: 100%;
  min-height: 720px;
  object-fit: cover;
  object-position: center;
  filter: brightness(.72) saturate(.85);
}

.tl-artcase-photo__caption {
  position: absolute;
  left: 50px;
  bottom: 45px;
  max-width: 550px;
}

.tl-artcase-photo__caption span {
  color: var(--art-orange);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-artcase-photo__caption p {
  margin: 16px 0 0;
  color: var(--art-cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(40px,5vw,78px);
  line-height: .92;
}

/* FLOW */

.tl-artcase-flow {
  background: #100a09;
}

.tl-artcase-flow__head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.45fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 52px;
}

.tl-artcase-flow__head > p:last-child {
  margin: 0 0 5px;
  color: rgba(239,224,201,.64);
  font-size: 15px;
  line-height: 1.7;
}

.tl-artcase-flow__timeline {
  border-top: 1px solid rgba(239,224,201,.16);
}

.tl-artcase-flow__item {
  display: grid;
  grid-template-columns: 70px minmax(220px,.48fr) minmax(0,1fr);
  gap: 30px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid rgba(239,224,201,.16);
}

.tl-artcase-flow__item > span {
  color: var(--art-pink);
  font-size: 10px;
  letter-spacing: .08em;
}

.tl-artcase-flow__item h3 {
  margin: 0;
  color: var(--art-cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  line-height: 1;
  font-weight: 500;
}

.tl-artcase-flow__item p {
  max-width: 580px;
  margin: 0;
  color: rgba(239,224,201,.65);
  font-size: 14px;
  line-height: 1.65;
}

/* MOOD */

.tl-artcase-mood {
  background: var(--art-red);
}

.tl-artcase-mood__head,
.tl-artcase-mobile__head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.45fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 44px;
}

.tl-artcase-mood__head > p,
.tl-artcase-mobile__head > p {
  margin: 0 0 5px;
  color: rgba(239,224,201,.75);
  font-size: 15px;
  line-height: 1.7;
}

.tl-artcase-mood__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-artcase-mood-card {
  min-height: 390px;
  padding: 26px;
  border: 1px solid rgba(239,224,201,.18);
  background: rgba(40,4,4,.16);
}

.tl-artcase-mood-card > span {
  color: var(--art-pink);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-artcase-mood-card > p {
  margin: 28px 0 0;
  color: rgba(239,224,201,.72);
  font-size: 14px;
  line-height: 1.65;
}

.tl-artcase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 170px;
  margin-top: 45px;
}

.tl-artcase-palette i {
  display: block;
  flex: 1;
  height: 110px;
  border: 1px solid rgba(255,255,255,.1);
  background: var(--tone);
}

.tl-artcase-palette i:nth-child(2){height:145px}
.tl-artcase-palette i:nth-child(3){height:85px}
.tl-artcase-palette i:nth-child(4){height:125px}

.tl-artcase-mood-card--type strong {
  display: block;
  margin-top: 70px;
  color: var(--art-cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(46px,4.3vw,72px);
  line-height: .87;
  font-weight: 500;
}

.tl-artcase-mood-photo {
  height: 205px;
  margin-top: 38px;
  overflow: hidden;
}

.tl-artcase-mood-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) brightness(.8);
}

/* GALLERY */

.tl-artcase-gallery {
  background: #130a09;
}

.tl-artcase-gallery__head {
  margin-bottom: 45px;
}

.tl-artcase-gallery__grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
}

.tl-artcase-gallery__item {
  min-height: 420px;
  margin: 0;
  overflow: hidden;
}

.tl-artcase-gallery__item--wide {
  grid-row: span 2;
  min-height: 854px;
}

.tl-artcase-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) brightness(.82);
  transition: transform .8s var(--tl-ease);
}

.tl-artcase-gallery__item:hover img {
  transform: scale(1.035);
}

/* MOBILE */

.tl-artcase-mobile {
  background: var(--art-red);
}

.tl-artcase-mobile__composition {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border: 1px solid rgba(239,224,201,.15);
  background:
    radial-gradient(circle at 50% 45%, rgba(109,151,189,.16), transparent 30%),
    #4c0a08;
}

.tl-artcase-phone {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 530px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 35px;
  background: #090706;
  box-shadow: 0 35px 95px rgba(0,0,0,.45);
  transform: translate(-50%,-50%) rotate(-2deg);
}

.tl-artcase-phone__speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 5px;
  border-radius: 10px;
  background: rgba(255,255,255,.13);
  transform: translateX(-50%);
}

.tl-artcase-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
}

.tl-artcase-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-artcase-mobile__photo {
  position: absolute;
  top: 50%;
  width: 360px;
  height: 470px;
  overflow: hidden;
}

.tl-artcase-mobile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) brightness(.72);
}

.tl-artcase-mobile__photo--one {
  left: 8%;
  transform: translateY(-50%) rotate(-7deg);
}

.tl-artcase-mobile__photo--two {
  right: 8%;
  transform: translateY(-50%) rotate(7deg);
}

/* FINALE */

.tl-artcase-finale {
  position: relative;
  min-height: 820px;
  overflow: hidden;
}

.tl-artcase-finale__media,
.tl-artcase-finale__overlay {
  position: absolute;
  inset: 0;
}

.tl-artcase-finale__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) brightness(.5);
}

.tl-artcase-finale__overlay {
  background:
    linear-gradient(90deg, rgba(47,7,6,.88), rgba(47,7,6,.3)),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.6));
}

.tl-artcase-finale__container {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 820px;
  flex-direction: column;
  justify-content: center;
}

.tl-artcase-finale blockquote {
  max-width: 1000px;
  margin: 0;
  color: var(--art-cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(74px,9vw,140px);
  line-height: .8;
  font-weight: 500;
  letter-spacing: -.055em;
}

.tl-artcase-finale__signature {
  margin: 38px 0 0;
  color: var(--art-pink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  line-height: 1;
}

/* RESULT */

.tl-artcase-result {
  background: #110908;
}

.tl-artcase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.5fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid rgba(239,224,201,.15);
  background:
    radial-gradient(circle at 86% 42%, rgba(139,18,13,.22), transparent 30%),
    rgba(255,255,255,.02);
}

.tl-artcase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--art-cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px,5vw,82px);
  line-height: .9;
  font-weight: 500;
}

.tl-artcase-result__panel > div > p:last-child {
  max-width: 670px;
  margin: 24px 0 0;
  color: rgba(239,224,201,.67);
  font-size: 15px;
  line-height: 1.7;
}

.tl-artcase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(239,224,201,.16);
}

.tl-artcase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid rgba(239,224,201,.16);
  color: rgba(239,224,201,.7);
  font-size: 13px;
}

.tl-artcase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--art-pink);
  transform: rotate(45deg);
}

/* NEXT */

.tl-artcase-next {
  padding: 0 0 90px;
  background: #110908;
}

.tl-artcase-next__link {
  display: grid;
  grid-template-columns: minmax(0,1fr) 72px;
  align-items: center;
  gap: 40px;
  padding: 54px 48px;
  border: 1px solid rgba(239,224,201,.15);
  background: rgba(255,255,255,.02);
  transition: transform .4s var(--tl-ease), border-color .4s var(--tl-ease);
}

.tl-artcase-next__link:hover {
  transform: translateY(-5px);
  border-color: rgba(232,180,189,.32);
}

.tl-artcase-next__link h2 {
  margin: 0;
  color: var(--art-cream);
  font-size: clamp(52px,6vw,96px);
  line-height: .9;
  font-weight: 300;
  letter-spacing: -.06em;
}

.tl-artcase-next__link > div > span {
  display: block;
  margin-top: 17px;
  color: rgba(239,224,201,.58);
  font-size: 12px;
}

.tl-artcase-next__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(232,180,189,.4);
  border-radius: 50%;
}

.tl-artcase-next__arrow svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--art-pink);
  stroke-width: 1.5;
}

/* TABLET */

@media (max-width: 1050px) {
  .tl-artcase-manifest__grid,
  .tl-artcase-flow__head,
  .tl-artcase-mood__head,
  .tl-artcase-mobile__head,
  .tl-artcase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-artcase-mood__grid {
    grid-template-columns: 1fr;
  }

  .tl-artcase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(239,224,201,.3);
  }

  .tl-artcase-mobile__photo--one {
    left: -4%;
  }

  .tl-artcase-mobile__photo--two {
    right: -4%;
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-artcase-hero {
    min-height: 780px;
    padding-top: 72px;
  }

  .tl-artcase-hero__container {
    min-height: calc(780px - 72px);
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .tl-artcase-hero__top {
    align-items: flex-start;
  }

  .tl-artcase-hero__facts {
    max-width: 180px;
  }

  .tl-artcase-hero__content {
    padding-bottom: 60px;
  }

  .tl-artcase-hero h1 {
    font-size: clamp(82px,26vw,118px);
  }

  .tl-artcase-hero__lead {
    font-size: 34px;
  }

  .tl-artcase-hero__description {
    font-size: 14px;
  }

  .tl-artcase-hero__scroll {
    display: none;
  }

  .tl-artcase-manifest__grid {
    gap: 50px;
  }

  .tl-artcase-manifest__quote strong {
    font-size: 70px;
  }

  .tl-artcase-photo__frame,
  .tl-artcase-photo__frame img {
    min-height: 520px;
  }

  .tl-artcase-photo__caption {
    left: 20px;
    right: 20px;
    bottom: 24px;
  }

  .tl-artcase-photo__caption p {
    font-size: 39px;
  }

  .tl-artcase-flow__item {
    grid-template-columns: 38px 1fr;
    gap: 18px;
  }

  .tl-artcase-flow__item p {
    grid-column: 2;
  }

  .tl-artcase-flow__item h3 {
    font-size: 27px;
  }

  .tl-artcase-mood-card {
    min-height: 330px;
    padding: 22px 20px;
  }

  .tl-artcase-gallery__grid {
    grid-template-columns: 1fr;
  }

  .tl-artcase-gallery__item,
  .tl-artcase-gallery__item--wide {
    min-height: 430px;
  }

  .tl-artcase-mobile__composition {
    min-height: 560px;
  }

  .tl-artcase-phone {
    width: 185px;
    height: 400px;
  }

  .tl-artcase-mobile__photo {
    width: 220px;
    height: 310px;
  }

  .tl-artcase-mobile__photo--one {
    left: -15%;
  }

  .tl-artcase-mobile__photo--two {
    right: -15%;
  }

  .tl-artcase-finale,
  .tl-artcase-finale__container {
    min-height: 620px;
  }

  .tl-artcase-finale blockquote {
    font-size: 66px;
  }

  .tl-artcase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-artcase-result__panel h2 {
    font-size: 42px;
  }

  .tl-artcase-next {
    padding-bottom: 54px;
  }

  .tl-artcase-next__link {
    grid-template-columns: minmax(0,1fr) 52px;
    gap: 18px;
    padding: 30px 21px;
  }

  .tl-artcase-next__link h2 {
    font-size: 42px;
  }

  .tl-artcase-next__arrow {
    width: 50px;
    height: 50px;
  }
}

/* =========================================================
   ПРОУЮТ — ФИНАЛЬНЫЙ HERO И БЛОК ФИЛОСОФИИ
   Один чистый вариант без старых конфликтующих патчей
   ========================================================= */

/* ---------- HERO ---------- */

.tl-artcase-proyut .tl-artcase-hero--poster {
  min-height: 860px;
  padding-top: 86px;
  overflow: hidden;
  border-radius: 0 0 34px 34px;
  background: #160d0c;
}

.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__media,
.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__overlay,
.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__grain {
  inset: 0;
}

.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__media img {
  object-position: center 28%;
  filter: saturate(.96) brightness(.94) contrast(.98);
  transform: scale(1.015);
}

/* Никакой тёмной заливки поверх всей фотографии */
.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__overlay {
  background: none !important;
}

/* Лёгкая фактура остаётся, но почти незаметная */
.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__grain {
  opacity: .045;
}

.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__container {
  min-height: calc(860px - 86px);
  padding-top: 28px;
  padding-bottom: 42px;
}

.tl-artcase-proyut .tl-artcase-hero__year {
  color: rgba(239,224,201,.92);
  font-size: 12px;
  letter-spacing: .05em;
  text-shadow: 0 2px 16px rgba(0,0,0,.40);
}

.tl-artcase-proyut .tl-artcase-hero__main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(430px,.82fr) minmax(290px,.44fr);
  align-items: center;
  gap: 72px;
  flex: 1;
  min-height: 680px;
}

/* Стеклянная карточка только под текстом */
.tl-artcase-proyut .tl-artcase-hero__content {
  max-width: 610px;
  margin: 0;
  padding: 34px 36px 36px;
  border: 1px solid rgba(239,224,201,.18);
  border-radius: 22px;
  background: rgba(35,16,14,.42);
  box-shadow:
    0 28px 70px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.tl-artcase-proyut .tl-artcase-hero__content .tl-section-label {
  margin-bottom: 20px;
  color: var(--art-pink);
}

.tl-artcase-proyut .tl-artcase-hero__content h1 {
  margin: 0;
  color: #f4e7d6;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(88px,8.2vw,140px);
  line-height: .80;
  font-weight: 500;
  letter-spacing: -.06em;
  text-shadow: 0 3px 22px rgba(0,0,0,.18);
}

.tl-artcase-proyut .tl-artcase-hero__subtitle {
  margin: 30px 0 0;
  color: rgba(244,231,214,.94);
  font-size: clamp(22px,2vw,32px);
  line-height: 1.18;
  font-weight: 300;
  letter-spacing: -.025em;
}

.tl-artcase-proyut .tl-artcase-hero__divider {
  display: block;
  width: 48px;
  height: 1px;
  margin: 30px 0 25px;
  background: rgba(217,149,82,.76);
}

.tl-artcase-proyut .tl-artcase-hero__lead {
  margin: 0;
  color: rgba(244,231,214,.78);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.tl-artcase-proyut .tl-artcase-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 250px;
  min-height: 56px;
  margin-top: 34px;
  padding: 0 22px;
  border: 1px solid rgba(244,231,214,.55);
  border-radius: 30px;
  color: #3b1715;
  background: #f4e7d6;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition:
    transform .35s var(--tl-ease),
    box-shadow .35s var(--tl-ease);
}

.tl-artcase-proyut .tl-artcase-hero__button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.tl-artcase-proyut .tl-artcase-hero__button:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(0,0,0,.24);
}

/* Круглая кнопка полностью убрана */
.tl-artcase-proyut .tl-artcase-hero__play {
  display: none !important;
}

.tl-artcase-proyut .tl-artcase-hero__card {
  justify-self: end;
  width: min(100%,330px);
  padding: 24px 24px 18px;
  border: 1px solid rgba(217,149,82,.42);
  border-radius: 20px;
  background: rgba(43,20,17,.66);
  box-shadow: 0 32px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.tl-artcase-proyut .tl-artcase-hero__card-row {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(239,224,201,.12);
}

.tl-artcase-proyut .tl-artcase-hero__card-row:last-child {
  border-bottom: 0;
}

.tl-artcase-proyut .tl-artcase-hero__card-row span {
  color: rgba(217,149,82,.88);
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.tl-artcase-proyut .tl-artcase-hero__card-row strong {
  color: rgba(244,231,214,.92);
  font-size: 12px;
  line-height: 1.65;
  font-weight: 400;
}


/* ---------- БЛОК ФИЛОСОФИИ ---------- */

.tl-artcase-proyut .tl-artcase-manifest {
  background:
    radial-gradient(circle at 76% 42%, rgba(217,149,82,.10), transparent 31%),
    linear-gradient(180deg,#3d1915 0%,#2d1110 100%);
}

.tl-artcase-proyut .tl-artcase-manifest__layout {
  display: grid;
  grid-template-columns:
    minmax(350px,.88fr)
    minmax(300px,.58fr)
    minmax(360px,.74fr);
  align-items: center;
  gap: 48px;
}

.tl-artcase-proyut .tl-artcase-manifest__quote-card {
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: 48px 52px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg,#f3e7d5 0%,#e8d5bd 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.58),
    0 32px 70px rgba(0,0,0,.16);
}

.tl-artcase-proyut .tl-artcase-manifest__quote-card blockquote {
  margin: 0;
  color: #4d1818;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(60px,6.5vw,102px);
  line-height: .82;
  font-weight: 500;
  letter-spacing: -.055em;
}

.tl-artcase-proyut .tl-artcase-manifest__text {
  align-self: center;
  padding: 0;
  border: 0;
}

.tl-artcase-proyut .tl-artcase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(239,224,201,.84);
  font-size: 15px;
  line-height: 1.75;
}

.tl-artcase-proyut .tl-artcase-manifest__signature {
  display: block;
  margin-top: 30px;
  color: #d15d71;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 45px;
  line-height: 1;
  font-style: italic;
  transform: rotate(-4deg);
  transform-origin: left center;
}

.tl-artcase-proyut .tl-artcase-manifest__image {
  min-height: 500px;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 32px 70px rgba(0,0,0,.18);
}

.tl-artcase-proyut .tl-artcase-manifest__image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.94) brightness(.95);
}


/* ---------- ФИЛОСОФИЯ УЮТА НА ФОТО ---------- */

.tl-artcase-photo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(21,8,7,.40) 0%,
      rgba(21,8,7,.12) 42%,
      transparent 68%
    );
}

.tl-artcase-photo__caption {
  z-index: 2;
  max-width: 560px;
  padding: 28px 30px;
  border: 1px solid rgba(239,224,201,.18);
  border-radius: 18px;
  background: rgba(45,17,16,.78);
  box-shadow:
    0 24px 60px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tl-artcase-photo__caption span {
  color: var(--art-orange);
}

.tl-artcase-photo__caption p {
  margin-top: 14px;
  color: var(--art-cream);
  text-shadow: none;
}


/* ---------- АДАПТИВ ---------- */

@media (max-width: 1180px) {
  .tl-artcase-proyut .tl-artcase-hero__main {
    grid-template-columns: minmax(0,1fr) minmax(280px,.42fr);
    gap: 46px;
  }

  .tl-artcase-proyut .tl-artcase-manifest__layout {
    grid-template-columns: 1fr 1fr;
  }

  .tl-artcase-proyut .tl-artcase-manifest__image {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .tl-artcase-proyut .tl-artcase-hero--poster {
    min-height: auto;
  }

  .tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__container {
    min-height: auto;
  }

  .tl-artcase-proyut .tl-artcase-hero__main {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 64px;
    padding-bottom: 48px;
  }

  .tl-artcase-proyut .tl-artcase-hero__content {
    max-width: 680px;
  }

  .tl-artcase-proyut .tl-artcase-hero__card {
    justify-self: start;
    max-width: 560px;
  }

  .tl-artcase-proyut .tl-artcase-manifest__layout {
    grid-template-columns: 1fr;
  }

  .tl-artcase-proyut .tl-artcase-manifest__image {
    grid-column: auto;
  }
}

@media (max-width: 767px) {
  .tl-artcase-proyut .tl-artcase-hero--poster {
    min-height: auto;
    padding-top: 72px;
    border-radius: 0 0 22px 22px;
  }

  .tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__media img {
    object-position: 63% center;
    filter: saturate(.92) brightness(.82);
  }

  .tl-artcase-proyut .tl-artcase-hero__main {
    padding-top: 52px;
    padding-bottom: 32px;
  }

  .tl-artcase-proyut .tl-artcase-hero__content {
    padding: 24px 20px 26px;
    border-radius: 17px;
    background: rgba(35,16,14,.52);
  }

  .tl-artcase-proyut .tl-artcase-hero__content h1 {
    font-size: clamp(72px,23vw,102px);
  }

  .tl-artcase-proyut .tl-artcase-hero__subtitle {
    margin-top: 24px;
    font-size: 22px;
  }

  .tl-artcase-proyut .tl-artcase-hero__lead {
    font-size: 15px;
  }

  .tl-artcase-proyut .tl-artcase-hero__button {
    width: 100%;
    min-width: 0;
  }

  .tl-artcase-proyut .tl-artcase-hero__card {
    width: 100%;
    padding: 18px;
  }

  .tl-artcase-proyut .tl-artcase-hero__card-row {
    grid-template-columns: 88px 1fr;
  }

  .tl-artcase-proyut .tl-artcase-manifest__quote-card,
  .tl-artcase-proyut .tl-artcase-manifest__image {
    min-height: 390px;
  }

  .tl-artcase-proyut .tl-artcase-manifest__quote-card {
    padding: 34px 28px;
  }

  .tl-artcase-proyut .tl-artcase-manifest__quote-card blockquote {
    font-size: clamp(58px,18vw,78px);
  }

  .tl-artcase-proyut .tl-artcase-manifest__image img {
    height: 390px;
  }

  .tl-artcase-photo__caption {
    left: 16px;
    right: 16px;
    bottom: 18px;
    max-width: none;
    padding: 20px 18px;
    border-radius: 14px;
  }

  .tl-artcase-photo__caption p {
    font-size: 34px;
    line-height: .95;
  }
}
/* =========================================================
   ПРОУЮТ — ТЁМНАЯ ШАПКА + ФОТОГРАФИЯ НИЖЕ МЕНЮ
   ========================================================= */

.tl-artcase-proyut .tl-artcase-hero--poster {
  position: relative;
  padding-top: 86px;
  background: #0b0c0c !important;
}

/* Фотография начинается строго после шапки */
.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__media {
  top: 86px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* Убираем глобальную заливку поверх фотографии */
.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__overlay {
  top: 86px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  background: none !important;
}

/* Фактура тоже не заходит под меню */
.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__grain {
  top: 86px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* Убираем возможный просвет между шапкой и фотографией */
.tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {

  .tl-artcase-proyut .tl-artcase-hero--poster {
    padding-top: 72px;
  }

  .tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__media,
  .tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__overlay,
  .tl-artcase-proyut .tl-artcase-hero--poster .tl-artcase-hero__grain {
    top: 72px !important;
  }
}

/* TEILIORA — GAME CASE / УМНЫЕ */
.tl-gamecase{--game-bg:#0d0e10;--game-panel:#15171a;--game-accent:#f0ff3d;--game-pink:#ff5c7a;--game-blue:#5c7cff;--game-text:#f4f5ef;--game-muted:rgba(244,245,239,.6);overflow:hidden;color:var(--game-text);background:var(--game-bg)}
.tl-gamecase img{display:block;max-width:100%}
.tl-gamecase-hero{position:relative;min-height:900px;padding-top:86px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 78% 28%,rgba(92,124,255,.13),transparent 30%),radial-gradient(circle at 72% 68%,rgba(255,92,122,.08),transparent 28%),linear-gradient(135deg,#0d0e10 0%,#111317 58%,#0b0c0e 100%)}
.tl-gamecase-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 45%,#000);pointer-events:none}
.tl-gamecase-hero__container{position:relative;z-index:2;min-height:calc(900px - 86px);padding-top:40px;padding-bottom:65px}
.tl-gamecase-hero__top{display:flex;align-items:center;justify-content:space-between;gap:30px}
.tl-gamecase-back{display:inline-flex;align-items:center;gap:10px;color:var(--game-muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.tl-gamecase-back svg{width:18px;height:18px;fill:none;stroke:var(--game-accent);stroke-width:1.5;transition:transform .3s var(--tl-ease)}.tl-gamecase-back:hover svg{transform:translateX(-4px)}
.tl-gamecase-hero__facts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.tl-gamecase-hero__facts span,.tl-gamecase-hero__tags span{display:inline-flex;min-height:32px;align-items:center;padding:0 11px;border:1px solid rgba(255,255,255,.14);border-radius:20px;color:var(--game-muted);background:rgba(255,255,255,.03);font-size:8px;letter-spacing:.05em;text-transform:uppercase}
.tl-gamecase-hero__main{display:grid;grid-template-columns:minmax(420px,.72fr) minmax(620px,1.28fr);align-items:center;gap:62px;min-height:720px}.tl-gamecase-ymnie .tl-section-label{color:var(--game-accent)}
.tl-gamecase-hero__content h1{margin:0;color:var(--game-text);font-size:clamp(86px,9vw,145px);line-height:.8;font-weight:300;letter-spacing:-.075em}.tl-gamecase-hero__lead{max-width:650px;margin:34px 0 0;color:var(--game-accent);font-size:clamp(30px,3.3vw,52px);line-height:.98;font-weight:300;letter-spacing:-.045em;text-transform:uppercase}.tl-gamecase-hero__description{max-width:560px;margin:25px 0 0;color:var(--game-muted);font-size:15px;line-height:1.72}.tl-gamecase-hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}.tl-gamecase-hero__tags span{min-height:34px;border-color:rgba(240,255,61,.22)}
.tl-gamecase-hero__visual{position:relative;min-height:600px}.tl-gamecase-browser{overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:#111;box-shadow:0 44px 110px rgba(0,0,0,.48)}.tl-gamecase-hero__visual .tl-gamecase-browser{position:absolute;z-index:4;top:50%;left:50%;width:770px;transform:translate(-50%,-50%) rotate(3deg);animation:tlGameBrowserFloat 7.5s ease-in-out infinite}.tl-gamecase-browser__bar{position:relative;display:flex;height:42px;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025))}.tl-gamecase-browser__dots{position:absolute;left:15px;display:flex;gap:6px}.tl-gamecase-browser__dots i{width:7px;height:7px;border-radius:50%}.tl-gamecase-browser__dots i:nth-child(1){background:var(--game-pink)}.tl-gamecase-browser__dots i:nth-child(2){background:var(--game-accent)}.tl-gamecase-browser__dots i:nth-child(3){background:var(--game-blue)}.tl-gamecase-browser__address{color:rgba(244,245,239,.38);font-size:8px}.tl-gamecase-browser__screen{position:relative;overflow:hidden;aspect-ratio:16/9}.tl-gamecase-browser__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tl-gamecase-token{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;width:74px;height:74px;border:1px solid rgba(255,255,255,.18);border-radius:18px;color:#111;font-size:34px;font-weight:600;box-shadow:0 24px 60px rgba(0,0,0,.35)}.tl-gamecase-token--one{top:54px;right:55px;background:var(--game-accent);animation:tlGameTokenOne 4.8s ease-in-out infinite}.tl-gamecase-token--two{left:30px;bottom:58px;background:var(--game-pink);animation:tlGameTokenTwo 5.2s ease-in-out infinite}.tl-gamecase-token--three{right:105px;bottom:25px;color:var(--game-text);background:var(--game-blue);animation:tlGameTokenThree 4.5s ease-in-out infinite}
@keyframes tlGameBrowserFloat{0%,100%{transform:translate(-50%,-50%) rotate(3deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(2deg) translateY(-10px)}}@keyframes tlGameTokenOne{0%,100%{transform:rotate(9deg) translateY(0)}50%{transform:rotate(5deg) translateY(-12px)}}@keyframes tlGameTokenTwo{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(10px)}}@keyframes tlGameTokenThree{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(10deg) translateY(-8px)}}
.tl-gamecase-manifest{background:var(--game-accent)}.tl-gamecase-manifest__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.55fr);align-items:end;gap:90px}.tl-gamecase-manifest__quote span{color:rgba(13,14,16,.58);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.tl-gamecase-manifest__quote strong{display:block;margin-top:25px;color:#0d0e10;font-size:clamp(54px,6.4vw,100px);line-height:.92;font-weight:300;letter-spacing:-.055em;text-transform:uppercase}.tl-gamecase-manifest__text{padding-left:34px;border-left:1px solid rgba(13,14,16,.28)}.tl-gamecase-manifest__text .tl-section-label{color:rgba(13,14,16,.7)}.tl-gamecase-manifest__text>p:not(.tl-section-label){margin:22px 0 0;color:rgba(13,14,16,.74);font-size:15px;line-height:1.72}
.tl-gamecase-logic,.tl-gamecase-interactions,.tl-gamecase-result,.tl-gamecase-next{background:#0f1114}.tl-gamecase-showcase{background:#0b0c0e}.tl-gamecase-system,.tl-gamecase-mobile{background:#111317}.tl-gamecase-logic__head,.tl-gamecase-showcase__head,.tl-gamecase-system__head,.tl-gamecase-mobile__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.44fr);align-items:end;gap:70px;margin-bottom:46px}.tl-gamecase-logic__head>p:last-child,.tl-gamecase-showcase__head>p,.tl-gamecase-system__head>p,.tl-gamecase-mobile__head>p{margin:0 0 5px;color:var(--game-muted);font-size:15px;line-height:1.7}
.tl-gamecase-logic__steps{border-top:1px solid rgba(255,255,255,.09)}.tl-gamecase-step{display:grid;grid-template-columns:70px minmax(220px,.42fr) minmax(0,1fr);gap:30px;align-items:start;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.09)}.tl-gamecase-step>span{color:var(--game-accent);font-size:10px;letter-spacing:.08em}.tl-gamecase-step strong{color:var(--game-text);font-size:28px;line-height:1;font-weight:400}.tl-gamecase-step p{max-width:600px;margin:0;color:var(--game-muted);font-size:14px;line-height:1.65}
.tl-gamecase-browser--wide{width:100%;border-radius:18px}.tl-gamecase-browser--wide .tl-gamecase-browser__screen{aspect-ratio:16/8.2}
.tl-gamecase-system__grid,.tl-gamecase-interactions__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tl-gamecase-system-card{min-height:380px;padding:26px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025)}.tl-gamecase-system-card>span{color:var(--game-accent);font-size:9px;letter-spacing:.07em;text-transform:uppercase}.tl-gamecase-system-card>p{margin:28px 0 0;color:var(--game-muted);font-size:14px;line-height:1.65}.tl-gamecase-system-card--type strong{display:block;margin-top:70px;color:var(--game-text);font-size:clamp(44px,4.2vw,70px);line-height:.86;font-weight:300;letter-spacing:-.055em;text-transform:uppercase}.tl-gamecase-palette{display:flex;align-items:flex-end;gap:10px;min-height:180px;margin-top:38px}.tl-gamecase-palette i{display:block;flex:1;height:105px;border-radius:9px;background:var(--tone)}.tl-gamecase-palette i:nth-child(2){height:145px}.tl-gamecase-palette i:nth-child(3){height:85px}.tl-gamecase-palette i:nth-child(4){height:125px}.tl-gamecase-modules{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:50px}.tl-gamecase-modules i{display:flex;height:72px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.09);border-radius:10px;color:var(--game-text);background:rgba(255,255,255,.025);font-size:22px;font-style:normal}.tl-gamecase-modules i:nth-child(2),.tl-gamecase-modules i:nth-child(3){border-color:rgba(240,255,61,.24);background:rgba(240,255,61,.055)}
.tl-gamecase-interactions__head{margin-bottom:45px}.tl-gamecase-interaction{overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025)}.tl-gamecase-interaction__visual{position:relative;display:flex;min-height:260px;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 50% 50%,rgba(240,255,61,.11),transparent 32%),#121417}.tl-gamecase-interaction__visual button{min-height:54px;padding:0 24px;border:0;border-radius:10px;color:#111;background:var(--game-accent);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;animation:tlGameButton 2.6s ease-in-out infinite}@keyframes tlGameButton{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.tl-gamecase-interaction__visual--cards{gap:10px}.tl-gamecase-interaction__visual--cards i{display:flex;width:68px;height:88px;align-items:center;justify-content:center;border-radius:13px;color:#111;font-size:28px;font-style:normal;font-weight:700}.tl-gamecase-interaction__visual--cards i:nth-child(1){background:var(--game-accent);transform:rotate(-7deg)}.tl-gamecase-interaction__visual--cards i:nth-child(2){background:var(--game-pink);transform:translateY(-12px)}.tl-gamecase-interaction__visual--cards i:nth-child(3){background:var(--game-blue);transform:rotate(7deg)}.tl-gamecase-interaction__visual--progress{flex-direction:column;gap:16px}.tl-gamecase-interaction__visual--progress>div{width:72%;height:10px;overflow:hidden;border-radius:20px;background:rgba(255,255,255,.08)}.tl-gamecase-interaction__visual--progress>div span{display:block;width:82%;height:100%;background:linear-gradient(90deg,var(--game-blue),var(--game-accent));animation:tlGameProgress 2.8s ease-in-out infinite alternate}@keyframes tlGameProgress{from{width:35%}to{width:82%}}.tl-gamecase-interaction__visual--progress small{color:var(--game-muted);font-size:9px;letter-spacing:.07em;text-transform:uppercase}.tl-gamecase-interaction__content{padding:24px}.tl-gamecase-interaction__content>span{color:var(--game-accent);font-size:9px}.tl-gamecase-interaction__content h3{margin:15px 0 0;font-size:25px;font-weight:400;text-transform:uppercase}.tl-gamecase-interaction__content p{margin:14px 0 0;color:var(--game-muted);font-size:14px;line-height:1.6}
.tl-gamecase-mobile__scene{position:relative;min-height:720px;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:radial-gradient(circle at 50% 48%,rgba(92,124,255,.13),transparent 30%),linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}.tl-gamecase-phone{position:absolute;top:50%;left:50%;width:245px;height:510px;padding:8px;border:1px solid rgba(255,255,255,.16);border-radius:34px;background:#090a09;box-shadow:0 35px 90px rgba(0,0,0,.48)}.tl-gamecase-phone__speaker{position:absolute;z-index:3;top:15px;left:50%;width:58px;height:5px;border-radius:10px;background:rgba(255,255,255,.13);transform:translateX(-50%)}.tl-gamecase-phone__screen{width:100%;height:100%;overflow:hidden;border-radius:27px}.tl-gamecase-phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}.tl-gamecase-phone--one{transform:translate(-155%,-48%) rotate(-10deg)}.tl-gamecase-phone--two{z-index:3;transform:translate(-50%,-52%)}.tl-gamecase-phone--three{transform:translate(55%,-48%) rotate(10deg)}
.tl-gamecase-result__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.55fr);align-items:center;gap:70px;padding:56px 50px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:radial-gradient(circle at 86% 42%,rgba(240,255,61,.09),transparent 30%),rgba(255,255,255,.025)}.tl-gamecase-result__panel h2{margin:0;font-size:clamp(42px,4.5vw,72px);line-height:.96;font-weight:300;letter-spacing:-.052em;text-transform:uppercase}.tl-gamecase-result__panel>div>p:last-child{max-width:680px;margin:24px 0 0;color:var(--game-muted);font-size:15px;line-height:1.7}.tl-gamecase-result__panel ul{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.09)}.tl-gamecase-result__panel li{position:relative;padding:17px 0 17px 27px;border-bottom:1px solid rgba(255,255,255,.09);color:var(--game-muted);font-size:13px}.tl-gamecase-result__panel li:before{content:"";position:absolute;top:21px;left:2px;width:7px;height:7px;border:1px solid var(--game-accent);transform:rotate(45deg)}
.tl-gamecase-next{padding:0 0 90px}.tl-gamecase-next__link{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:40px;padding:54px 48px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.025)}.tl-gamecase-next__link h2{margin:0;font-size:clamp(48px,6vw,92px);line-height:.9;font-weight:300;letter-spacing:-.06em;text-transform:uppercase}.tl-gamecase-next__link>div>span{display:block;margin-top:17px;color:var(--game-muted);font-size:12px}.tl-gamecase-next__arrow{display:flex;width:68px;height:68px;align-items:center;justify-content:center;border:1px solid rgba(240,255,61,.35);border-radius:50%}.tl-gamecase-next__arrow svg{width:23px;height:23px;fill:none;stroke:var(--game-accent);stroke-width:1.5}
@media(max-width:1100px){.tl-gamecase-hero__main,.tl-gamecase-manifest__grid,.tl-gamecase-logic__head,.tl-gamecase-showcase__head,.tl-gamecase-system__head,.tl-gamecase-mobile__head,.tl-gamecase-result__panel{grid-template-columns:1fr}.tl-gamecase-hero__visual{min-height:580px}.tl-gamecase-system__grid,.tl-gamecase-interactions__grid{grid-template-columns:1fr}.tl-gamecase-manifest__text{padding-left:0;padding-top:30px;border-left:0;border-top:1px solid rgba(13,14,16,.28)}}
@media(max-width:767px){.tl-gamecase-hero{min-height:auto;padding-top:72px}.tl-gamecase-hero__container{min-height:auto;padding-top:24px;padding-bottom:48px}.tl-gamecase-hero__top{align-items:flex-start}.tl-gamecase-hero__facts{max-width:180px}.tl-gamecase-hero__main{gap:28px;min-height:auto;padding-top:50px}.tl-gamecase-hero__content h1{font-size:clamp(76px,24vw,108px)}.tl-gamecase-hero__lead{font-size:31px}.tl-gamecase-hero__visual{min-height:360px}.tl-gamecase-hero__visual .tl-gamecase-browser{width:560px;transform:translate(-50%,-50%) rotate(3deg) scale(.63)}.tl-gamecase-token{width:55px;height:55px;border-radius:14px;font-size:25px}.tl-gamecase-token--one{top:25px;right:6px}.tl-gamecase-token--two{left:0;bottom:25px}.tl-gamecase-token--three{right:35px;bottom:10px}.tl-gamecase-manifest__grid{gap:50px}.tl-gamecase-manifest__quote strong{font-size:47px}.tl-gamecase-step{grid-template-columns:38px 1fr;gap:18px}.tl-gamecase-step p{grid-column:2}.tl-gamecase-step strong{font-size:25px}.tl-gamecase-browser--wide .tl-gamecase-browser__screen{aspect-ratio:4/3}.tl-gamecase-system-card{min-height:330px;padding:22px 20px}.tl-gamecase-interaction__visual{min-height:220px}.tl-gamecase-mobile__scene{min-height:520px}.tl-gamecase-phone{width:185px;height:390px}.tl-gamecase-phone--one{transform:translate(-137%,-47%) rotate(-10deg) scale(.78)}.tl-gamecase-phone--two{transform:translate(-50%,-52%) scale(.86)}.tl-gamecase-phone--three{transform:translate(37%,-47%) rotate(10deg) scale(.78)}.tl-gamecase-result__panel{gap:38px;padding:30px 21px}.tl-gamecase-result__panel h2{font-size:38px}.tl-gamecase-next{padding-bottom:54px}.tl-gamecase-next__link{grid-template-columns:minmax(0,1fr) 52px;gap:18px;padding:30px 21px}.tl-gamecase-next__link h2{font-size:38px}.tl-gamecase-next__arrow{width:50px;height:50px}}

/* =========================================================
   CASE NAVIGATION
   ========================================================= */

.tl-case-navigation {
  padding: 0 0 90px;

  color: var(--tl-text);
  background: var(--tl-bg);
}

.tl-case-navigation__inner {
  display: grid;
  grid-template-columns:
    minmax(220px, 1fr)
    minmax(260px, auto)
    minmax(220px, 1fr);

  align-items: center;
  gap: 42px;

  padding: 42px 0;

  border-top: 1px solid var(--tl-line-soft);
  border-bottom: 1px solid var(--tl-line-soft);
}


/* ---------- Previous / next ---------- */

.tl-case-navigation__project {
  display: flex;
  align-items: center;
  gap: 14px;

  min-width: 0;

  color: var(--tl-text-muted);

  transition:
    color 0.35s var(--tl-ease),
    transform 0.35s var(--tl-ease);
}

.tl-case-navigation__project--next {
  justify-content: flex-end;
  text-align: right;
}

.tl-case-navigation__direction {
  flex: 0 0 auto;

  color: var(--tl-accent);

  font-size: 21px;
  line-height: 1;

  transition:
    transform 0.35s var(--tl-ease);
}

.tl-case-navigation__name {
  overflow: hidden;

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: clamp(18px, 1.8vw, 27px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.035em;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.tl-case-navigation__project:hover {
  color: var(--tl-text);
}

.tl-case-navigation__project--prev:hover
.tl-case-navigation__direction {
  transform: translateX(-5px);
}

.tl-case-navigation__project--next:hover
.tl-case-navigation__direction {
  transform: translateX(5px);
}


/* ---------- Progress ---------- */

.tl-case-navigation__progress {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 250px;
}

.tl-case-navigation__label {
  color: var(--tl-text-muted);

  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tl-case-navigation__counter {
  display: block;

  margin-top: 9px;

  color: var(--tl-text);

  font-family:
    "Inter Tight",
    Arial,
    sans-serif;

  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.tl-case-navigation__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 17px;
}

.tl-case-navigation__dot {
  display: block;

  width: 7px;
  height: 7px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;

  background: transparent;

  transform: scale(1);

  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s ease,
    opacity 0.35s ease;
}

.tl-case-navigation__dot.is-active {
  border-color: var(--tl-accent);
  background: var(--tl-accent);

  box-shadow:
    0 0 12px rgba(207, 255, 0, 0.22);
}


/* ---------- Tablet ---------- */

@media (max-width: 900px) {

  .tl-case-navigation__inner {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .tl-case-navigation__progress {
    grid-column: 1 / -1;
    grid-row: 1;

    min-width: 0;
  }

  .tl-case-navigation__project--prev {
    grid-column: 1;
    grid-row: 2;
  }

  .tl-case-navigation__project--next {
    grid-column: 2;
    grid-row: 2;
  }
}


/* ---------- Mobile ---------- */

@media (max-width: 767px) {

  .tl-case-navigation {
    padding-bottom: 54px;
  }

  .tl-case-navigation__inner {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;

    padding: 30px 0;
  }

  .tl-case-navigation__progress {
    grid-column: 1 / -1;
  }

  .tl-case-navigation__name {
    font-size: 17px;
    white-space: normal;
  }

  .tl-case-navigation__project {
    align-items: flex-start;
  }

  .tl-case-navigation__project--next {
    text-align: right;
  }

  .tl-case-navigation__direction {
    font-size: 18px;
  }

  .tl-case-navigation__dots {
    gap: 7px;
  }

  .tl-case-navigation__dot {
    width: 6px;
    height: 6px;
  }
}

/* =========================================================
   TEILIORA — CASE: ГРУППА БАЛАНС
   Светлая версия в стилистике реального сайта
   Основной акцент: #133273
   Навигация кейсов использует глобальный компонент
   ========================================================= */

.tl-balancecase {
  --balance-bg: #ffffff;
  --balance-bg-soft: #f5f7fb;
  --balance-panel: #edf2fb;
  --balance-text: #202938;
  --balance-text-dark: #111827;
  --balance-muted: rgba(32, 41, 56, .66);
  --balance-line: rgba(19, 50, 115, .13);
  --balance-line-strong: rgba(19, 50, 115, .24);
  --balance-accent: #133273;
  --balance-accent-light: #dfe7f6;

  overflow: hidden;
  color: var(--balance-text);
  background: var(--balance-bg);
}

.tl-balancecase img {
  display: block;
  max-width: 100%;
}

.tl-balancecase .tl-section-label {
  color: var(--balance-accent);
}

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

.tl-balancecase-hero {
  position: relative;
  min-height: 900px;
  padding-top: 86px;
  overflow: hidden;
  border-bottom: 1px solid var(--balance-line);
  background:
    radial-gradient(circle at 78% 30%, rgba(19, 50, 115, .09), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7f9fd 58%, #eef3fb 100%);
}

.tl-balancecase-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(19, 50, 115, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 50, 115, .045) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 48%, #000);
  pointer-events: none;
}

.tl-balancecase-hero__container {
  position: relative;
  z-index: 2;
  min-height: calc(900px - 86px);
  padding-top: 40px;
  padding-bottom: 65px;
}

.tl-balancecase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-balancecase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--balance-muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-balancecase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--balance-accent);
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-balancecase-back:hover {
  color: var(--balance-accent);
}

.tl-balancecase-back:hover svg {
  transform: translateX(-4px);
}

.tl-balancecase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-balancecase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--balance-line-strong);
  border-radius: 20px;
  color: var(--balance-accent);
  background: rgba(255,255,255,.72);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tl-balancecase-hero__main {
  display: grid;
  grid-template-columns: minmax(420px,.72fr) minmax(620px,1.28fr);
  align-items: center;
  gap: 62px;
  min-height: 720px;
}

.tl-balancecase-hero h1 {
  margin: 0;
  color: var(--balance-text-dark);
  font-size: clamp(72px,7.4vw,120px);
  line-height: .84;
  font-weight: 300;
  letter-spacing: -.067em;
  text-transform: uppercase;
}

.tl-balancecase-hero h1 em {
  color: var(--balance-accent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

.tl-balancecase-hero__lead {
  max-width: 610px;
  margin: 34px 0 0;
  color: var(--balance-accent);
  font-size: clamp(28px,3vw,48px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-balancecase-hero__description {
  max-width: 580px;
  margin: 25px 0 0;
  color: var(--balance-muted);
  font-size: 15px;
  line-height: 1.72;
}

.tl-balancecase-hero__visual {
  position: relative;
  min-height: 600px;
}

.tl-balancecase-browser {
  overflow: hidden;
  border: 1px solid rgba(19, 50, 115, .16);
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 44px 110px rgba(19, 50, 115, .16),
    0 8px 24px rgba(17, 24, 39, .08);
}

.tl-balancecase-hero__visual .tl-balancecase-browser {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 770px;
  transform: translate(-50%,-50%) rotate(-2deg);
  animation: tlBalanceBrowser 8s ease-in-out infinite;
}

.tl-balancecase-browser__bar {
  position: relative;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--balance-line);
  background: #f7f9fd;
}

.tl-balancecase-browser__dots {
  position: absolute;
  left: 15px;
  display: flex;
  gap: 6px;
}

.tl-balancecase-browser__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tl-balancecase-browser__dots i:nth-child(1){background:#133273}
.tl-balancecase-browser__dots i:nth-child(2){background:#8ea4cf}
.tl-balancecase-browser__dots i:nth-child(3){background:#dfe7f6}

.tl-balancecase-browser__address {
  color: rgba(19, 50, 115, .48);
  font-size: 8px;
}

.tl-balancecase-browser__screen {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.tl-balancecase-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-balancecase-hero__line {
  position: absolute;
  z-index: 2;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(19, 50, 115, .42), transparent);
}

.tl-balancecase-hero__line--one {
  top: 160px;
  left: 20px;
  width: 570px;
  transform: rotate(24deg);
}

.tl-balancecase-hero__line--two {
  right: 10px;
  bottom: 130px;
  width: 390px;
  transform: rotate(-20deg);
}

@keyframes tlBalanceBrowser {
  0%,100% {transform:translate(-50%,-50%) rotate(-2deg) translateY(0)}
  50% {transform:translate(-50%,-50%) rotate(-1deg) translateY(-10px)}
}

/* =========================================================
   SHARED HEAD
   ========================================================= */

.tl-balancecase-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 46px;
}

.tl-balancecase-head > p {
  margin: 0 0 5px;
  color: var(--balance-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-balancecase .tl-title {
  color: var(--balance-text-dark);
}

/* =========================================================
   MANIFEST
   ========================================================= */

.tl-balancecase-manifest {
  background: var(--balance-accent);
}

.tl-balancecase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: end;
  gap: 90px;
}

.tl-balancecase-manifest__quote span {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-balancecase-manifest__quote strong {
  display: block;
  margin-top: 25px;
  color: #ffffff;
  font-size: clamp(50px,5.8vw,92px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-balancecase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.28);
}

.tl-balancecase-manifest__text .tl-section-label {
  color: rgba(255,255,255,.72);
}

.tl-balancecase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.72;
}

/* =========================================================
   ARCHITECTURE / DETAILS
   ========================================================= */

.tl-balancecase-architecture,
.tl-balancecase-details,
.tl-balancecase-result {
  background: #ffffff;
}

.tl-balancecase-architecture__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.tl-balancecase-architecture__item,
.tl-balancecase-detail,
.tl-balancecase-system-card {
  padding: 28px;
  border: 1px solid var(--balance-line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(19, 50, 115, .045);
}

.tl-balancecase-architecture__item {
  min-height: 250px;
}

.tl-balancecase-architecture__item > span,
.tl-balancecase-detail > span,
.tl-balancecase-system-card > span {
  color: var(--balance-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-balancecase-architecture__item h3,
.tl-balancecase-detail h3 {
  margin: 75px 0 0;
  color: var(--balance-text-dark);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.tl-balancecase-architecture__item p,
.tl-balancecase-detail p,
.tl-balancecase-system-card p {
  margin: 18px 0 0;
  color: var(--balance-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* =========================================================
   SHOWCASE / SYSTEM / MOBILE
   ========================================================= */

.tl-balancecase-showcase,
.tl-balancecase-system,
.tl-balancecase-mobile {
  background: var(--balance-bg-soft);
}

.tl-balancecase-browser--wide {
  width: 100%;
  border-radius: 18px;
}

.tl-balancecase-browser--wide .tl-balancecase-browser__screen {
  aspect-ratio: 16/8.2;
}

.tl-balancecase-system__grid,
.tl-balancecase-details__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-balancecase-system-card {
  min-height: 370px;
}

.tl-balancecase-system-card > strong {
  display: block;
  margin-top: 78px;
  color: var(--balance-accent);
  font-size: clamp(42px,4vw,66px);
  line-height: .88;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-balancecase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  margin-top: 38px;
}

.tl-balancecase-palette i {
  display: block;
  flex: 1;
  height: 105px;
  border: 1px solid var(--balance-line);
  border-radius: 9px;
  background: var(--tone);
}

.tl-balancecase-palette i:nth-child(2){height:145px}
.tl-balancecase-palette i:nth-child(3){height:85px}
.tl-balancecase-palette i:nth-child(4){height:125px}

.tl-balancecase-modules {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 45px;
}

.tl-balancecase-modules i {
  height: 62px;
  border: 1px solid var(--balance-line);
  border-radius: 8px;
  background: var(--balance-bg-soft);
}

.tl-balancecase-modules i:nth-child(2),
.tl-balancecase-modules i:nth-child(5) {
  border-color: rgba(19, 50, 115, .34);
  background: var(--balance-accent-light);
}

.tl-balancecase-details__head {
  margin-bottom: 45px;
}

.tl-balancecase-detail {
  min-height: 290px;
}

/* =========================================================
   MOBILE DEVICES SCENE
   ========================================================= */

.tl-balancecase-mobile__scene {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--balance-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(19, 50, 115, .11), transparent 30%),
    linear-gradient(145deg, #ffffff, #edf2fb);
}

.tl-balancecase-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 245px;
  height: 510px;
  padding: 8px;
  border: 1px solid rgba(19, 50, 115, .18);
  border-radius: 34px;
  background: #ffffff;
  box-shadow: 0 35px 90px rgba(19, 50, 115, .16);
}

.tl-balancecase-phone__speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 5px;
  border-radius: 10px;
  background: rgba(19, 50, 115, .16);
  transform: translateX(-50%);
}

.tl-balancecase-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
}

.tl-balancecase-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-balancecase-phone--one {transform:translate(-155%,-48%) rotate(-10deg)}
.tl-balancecase-phone--two {z-index:3;transform:translate(-50%,-52%)}
.tl-balancecase-phone--three {transform:translate(55%,-48%) rotate(10deg)}

/* =========================================================
   RESULT
   ========================================================= */

.tl-balancecase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--balance-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 42%, rgba(19, 50, 115, .09), transparent 30%),
    #ffffff;
  box-shadow: 0 18px 48px rgba(19, 50, 115, .055);
}

.tl-balancecase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--balance-text-dark);
  font-size: clamp(42px,4.5vw,72px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.052em;
  text-transform: uppercase;
}

.tl-balancecase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--balance-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-balancecase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--balance-line);
}

.tl-balancecase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--balance-line);
  color: var(--balance-muted);
  font-size: 13px;
}

.tl-balancecase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--balance-accent);
  transform: rotate(45deg);
}

/* =========================================================
   CASE NAVIGATION OVERRIDE
   ========================================================= */

.tl-balancecase .tl-case-navigation {
  color: var(--balance-text);
  background: #f5f7fb;
}
.tl-balancecase .tl-case-navigation__inner {
  padding: 42px 28px;

  border: 1px solid var(--balance-line);
  border-radius: 18px;

  background: #f5f7fb;
}
.tl-balancecase .tl-case-navigation__inner {
  border-color: var(--balance-line);
}

.tl-balancecase .tl-case-navigation__project {
  color: var(--balance-muted);
}
.tl-balancecase .tl-case-navigation__label {
  color: rgba(32, 41, 56, 0.48) !important;
}
.tl-balancecase .tl-case-navigation__project:hover,
.tl-balancecase .tl-case-navigation__counter {
  color: var(--balance-text-dark);
}

.tl-balancecase .tl-case-navigation__direction {
  color: var(--balance-accent);
}

.tl-balancecase .tl-case-navigation__dot {
  border-color: rgba(19, 50, 115, .22);
}

.tl-balancecase .tl-case-navigation__dot.is-active {
  border-color: var(--balance-accent);
  background: var(--balance-accent);
  box-shadow: 0 0 12px rgba(19, 50, 115, .2);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .tl-balancecase-hero__main,
  .tl-balancecase-manifest__grid,
  .tl-balancecase-head,
  .tl-balancecase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-balancecase-hero__visual {
    min-height: 580px;
  }

  .tl-balancecase-system__grid,
  .tl-balancecase-details__grid {
    grid-template-columns: 1fr;
  }

  .tl-balancecase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.28);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .tl-balancecase-hero {
    min-height: auto;
    padding-top: 72px;
  }

  .tl-balancecase-hero__container {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .tl-balancecase-hero__top {
    align-items: flex-start;
  }

  .tl-balancecase-hero__facts {
    max-width: 180px;
  }

  .tl-balancecase-hero__main {
    gap: 28px;
    min-height: auto;
    padding-top: 50px;
  }

  .tl-balancecase-hero h1 {
    font-size: clamp(60px,18vw,82px);
  }

  .tl-balancecase-hero__lead {
    font-size: 30px;
  }

  .tl-balancecase-hero__visual {
    min-height: 360px;
  }

  .tl-balancecase-hero__visual .tl-balancecase-browser {
    width: 560px;
    transform: translate(-50%,-50%) rotate(-2deg) scale(.63);
  }

  @keyframes tlBalanceBrowser {
    0%,100% {transform:translate(-50%,-50%) rotate(-2deg) scale(.63) translateY(0)}
    50% {transform:translate(-50%,-50%) rotate(-1deg) scale(.63) translateY(-8px)}
  }

  .tl-balancecase-manifest__grid {
    gap: 50px;
  }

  .tl-balancecase-manifest__quote strong {
    font-size: 44px;
  }

  .tl-balancecase-architecture__grid {
    grid-template-columns: 1fr;
  }

  .tl-balancecase-architecture__item,
  .tl-balancecase-system-card,
  .tl-balancecase-detail {
    padding: 22px 20px;
  }

  .tl-balancecase-browser--wide .tl-balancecase-browser__screen {
    aspect-ratio: 4/3;
  }

  .tl-balancecase-mobile__scene {
    min-height: 520px;
  }

  .tl-balancecase-phone {
    width: 185px;
    height: 390px;
  }

  .tl-balancecase-phone--one {transform:translate(-137%,-47%) rotate(-10deg) scale(.78)}
  .tl-balancecase-phone--two {transform:translate(-50%,-52%) scale(.86)}
  .tl-balancecase-phone--three {transform:translate(37%,-47%) rotate(10deg) scale(.78)}

  .tl-balancecase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-balancecase-result__panel h2 {
    font-size: 38px;
  }
  @media (max-width: 767px) {
  .tl-balancecase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}
}
/* =========================================================
   TEILIORA — FINAL GLOBAL HEADER
   Одинаковая шапка на всех страницах
   ========================================================= */

#tl-header.tl-header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;

  color: #f2f3ef !important;

  background:
    linear-gradient(
      180deg,
      rgba(9, 10, 9, 0.94) 0%,
      rgba(9, 10, 9, 0.84) 100%
    ) !important;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.07) !important;

  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.14) !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;

  mix-blend-mode: normal !important;
  isolation: isolate;
}


/* Внутренняя часть */

#tl-header .tl-header__inner {
  color: #f2f3ef !important;
  background: transparent !important;
}


/* Логотип */

#tl-header .tl-header__logo,
#tl-header .tl-header__logo-text {
  color: #f2f3ef !important;
  opacity: 1 !important;
}

#tl-header .tl-header__logo-subtext {
  color: rgba(242, 243, 239, 0.48) !important;
  opacity: 1 !important;
}

#tl-header .tl-header__logo-icon {
  border-color: #cfff00 !important;
  opacity: 1 !important;
}

#tl-header .tl-header__logo-icon::before {
  background: #cfff00 !important;
}


/* Десктопное меню */

#tl-header .tl-header__nav,
#tl-header .tl-header__nav a {
  color: rgba(242, 243, 239, 0.7) !important;
  opacity: 1 !important;
}

#tl-header .tl-header__nav a:hover {
  color: #f2f3ef !important;
}

#tl-header .tl-header__nav a::after {
  background: #cfff00 !important;
}


/* Кнопка */

#tl-header .tl-header__cta {
  color: #f2f3ef !important;

  border:
    1px solid rgba(207, 255, 0, 0.5) !important;

  background:
    rgba(255, 255, 255, 0.025) !important;

  opacity: 1 !important;
}

#tl-header .tl-header__cta svg {
  fill: none !important;
  stroke: currentColor !important;
}

#tl-header .tl-header__cta:hover {
  color: #090a09 !important;
  background: #cfff00 !important;
}


/* Гамбургер */

#tl-header .tl-header__burger span {
  background: #f2f3ef !important;
}


/* Мобильное раскрывающееся меню */

#tl-header .tl-mobile-menu {
  color: #f2f3ef !important;
  background: rgba(9, 10, 9, 0.98) !important;
}

#tl-header .tl-mobile-menu__links a {
  color: #f2f3ef !important;
}

#tl-header .tl-mobile-menu__links a span {
  color: #cfff00 !important;
}

/* =========================================================
   TEILIORA — CASE: ТРОПА В УЮТ ТВОЕГО СЕРДЦА
   ========================================================= */

.tl-trailcase {
  --trail-bg: #f4efe7;
  --trail-paper: #fbf8f2;
  --trail-text: #243026;
  --trail-muted: rgba(36,48,38,.65);
  --trail-sage: #7f8b5f;
  --trail-forest: #586f56;
  --trail-lilac: #b184b0;
  --trail-sand: #d8c7a8;
  --trail-line: rgba(88,111,86,.16);

  overflow: hidden;
  color: var(--trail-text);
  background: var(--trail-bg);
}

.tl-trailcase img {
  display: block;
  max-width: 100%;
}

.tl-trailcase .tl-section-label {
  color: var(--trail-forest);
}

.tl-trailcase .tl-title {
  color: var(--trail-text);
}

/* HERO */

.tl-trailcase-hero {
  position: relative;
  min-height: 930px;
  padding-top: 86px;
  overflow: hidden;
  background: #26352b;
}

.tl-trailcase-hero__media,
.tl-trailcase-hero__overlay {
  position: absolute;
  inset: 0;
}

.tl-trailcase-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.78) brightness(.65);
  transform: scale(1.04);
}

.tl-trailcase-hero__overlay {
  background:
    linear-gradient(90deg, rgba(30,43,33,.9) 0%, rgba(30,43,33,.68) 38%, rgba(30,43,33,.18) 72%, rgba(30,43,33,.4) 100%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.48));
}

.tl-trailcase-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: calc(930px - 86px);
  flex-direction: column;
  justify-content: space-between;
  padding-top: 40px;
  padding-bottom: 48px;
}

.tl-trailcase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-trailcase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-trailcase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #d9c7d9;
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-trailcase-back:hover svg {
  transform: translateX(-4px);
}

.tl-trailcase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-trailcase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.035);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tl-trailcase-hero__content {
  max-width: 950px;
  margin-top: auto;
  padding-bottom: 90px;
}

.tl-trailcase-hero h1 {
  margin: 0;
  color: #f4efe7;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(76px,9vw,142px);
  line-height: .78;
  font-weight: 500;
  letter-spacing: -.06em;
}

.tl-trailcase-hero__lead {
  margin: 34px 0 0;
  color: #d9c7d9;
  font-size: clamp(30px,3.4vw,52px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-trailcase-hero__description {
  max-width: 600px;
  margin: 25px 0 0;
  color: rgba(255,255,255,.7);
  font-size: 15px;
  line-height: 1.72;
}

.tl-trailcase-hero__scroll {
  position: absolute;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tl-trailcase-hero__scroll span {
  display: block;
  width: 42px;
  height: 1px;
  background: #d9c7d9;
}

.tl-trailcase-hero__scroll p {
  margin: 0;
  color: rgba(255,255,255,.5);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* MANIFEST */

.tl-trailcase-manifest {
  background:
    linear-gradient(180deg, #e8e2d8 0%, var(--trail-bg) 100%);
}

.tl-trailcase-manifest__inner {
  max-width: 1180px;
  padding: 70px 0;
}

.tl-trailcase-manifest__inner > span {
  color: var(--trail-forest);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tl-trailcase-manifest h2 {
  max-width: 1050px;
  margin: 24px 0 0;
  color: var(--trail-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(64px,7vw,112px);
  line-height: .84;
  font-weight: 500;
  letter-spacing: -.055em;
}

.tl-trailcase-manifest p {
  max-width: 720px;
  margin: 30px 0 0 auto;
  color: var(--trail-muted);
  font-size: 16px;
  line-height: 1.75;
}

/* ROUTE */

.tl-trailcase-route {
  background: var(--trail-paper);
}

.tl-trailcase-route__head,
.tl-trailcase-mood__head,
.tl-trailcase-mobile__head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 48px;
}

.tl-trailcase-route__head > p,
.tl-trailcase-mood__head > p,
.tl-trailcase-mobile__head > p {
  margin: 0 0 5px;
  color: var(--trail-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-trailcase-route__line {
  position: relative;
  border-top: 1px solid var(--trail-line);
}

.tl-trailcase-route__line::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 22%;
  height: 2px;
  background: var(--trail-lilac);
}

.tl-trailcase-route__item {
  display: grid;
  grid-template-columns: 70px minmax(220px,.42fr) minmax(0,1fr);
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid var(--trail-line);
}

.tl-trailcase-route__item > span {
  color: var(--trail-lilac);
  font-size: 10px;
  letter-spacing: .08em;
}

.tl-trailcase-route__item h3 {
  margin: 0;
  color: var(--trail-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
}

.tl-trailcase-route__item p {
  max-width: 600px;
  margin: 0;
  color: var(--trail-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* PLACE */

.tl-trailcase-place {
  background: var(--trail-bg);
}

.tl-trailcase-place__frame {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border-radius: 22px;
}

.tl-trailcase-place__frame img {
  width: 100%;
  height: 100%;
  min-height: 720px;
  object-fit: cover;
  object-position: center;
  filter: saturate(.78) brightness(.8);
}

.tl-trailcase-place__card {
  position: absolute;
  right: 35px;
  bottom: 35px;
  width: min(390px, calc(100% - 70px));
  padding: 28px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 18px;
  background: rgba(244,239,231,.86);
  box-shadow: 0 24px 60px rgba(48,63,51,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.tl-trailcase-place__card > span {
  color: var(--trail-forest);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tl-trailcase-place__card strong {
  display: block;
  margin-top: 12px;
  color: var(--trail-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 48px;
  line-height: .9;
  font-weight: 500;
}

.tl-trailcase-place__card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.tl-trailcase-place__card small {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--trail-line);
  border-radius: 20px;
  color: var(--trail-muted);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* FEELINGS */

.tl-trailcase-feelings {
  background: var(--trail-forest);
}

.tl-trailcase-feelings__head {
  margin-bottom: 48px;
}

.tl-trailcase-feelings .tl-section-label {
  color: #d9c7d9;
}

.tl-trailcase-feelings .tl-title {
  color: #f4efe7;
}

.tl-trailcase-feelings__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.tl-trailcase-feeling {
  min-height: 290px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.tl-trailcase-feeling > span {
  color: #d9c7d9;
  font-size: 9px;
  letter-spacing: .08em;
}

.tl-trailcase-feeling strong {
  display: block;
  margin-top: 85px;
  color: #f4efe7;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px,4.4vw,70px);
  line-height: .88;
  font-weight: 500;
}

.tl-trailcase-feeling p {
  max-width: 480px;
  margin: 22px 0 0;
  color: rgba(244,239,231,.7);
  font-size: 14px;
  line-height: 1.65;
}

/* MOOD */

.tl-trailcase-mood {
  background: var(--trail-paper);
}

.tl-trailcase-mood__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-trailcase-mood-card {
  min-height: 390px;
  padding: 26px;
  border: 1px solid var(--trail-line);
  border-radius: 18px;
  background: #fffdf8;
}

.tl-trailcase-mood-card > span {
  color: var(--trail-forest);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-trailcase-mood-card > p {
  margin: 28px 0 0;
  color: var(--trail-muted);
  font-size: 14px;
  line-height: 1.65;
}

.tl-trailcase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  margin-top: 38px;
}

.tl-trailcase-palette i {
  display: block;
  flex: 1;
  height: 105px;
  border-radius: 9px;
  background: var(--tone);
}

.tl-trailcase-palette i:nth-child(2){height:145px}
.tl-trailcase-palette i:nth-child(3){height:85px}
.tl-trailcase-palette i:nth-child(4){height:125px}

.tl-trailcase-mood-card--type strong {
  display: block;
  margin-top: 70px;
  color: var(--trail-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px,4vw,68px);
  line-height: .87;
  font-weight: 500;
}

.tl-trailcase-rhythm {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 8px;
  margin-top: 42px;
}

.tl-trailcase-rhythm i {
  min-height: 74px;
  border-radius: 9px;
  background: var(--trail-bg);
}

.tl-trailcase-rhythm i:nth-child(1) {
  grid-row: span 2;
  min-height: 156px;
  background: var(--trail-lilac);
}

.tl-trailcase-rhythm i:nth-child(3) {
  background: var(--trail-sage);
}

/* =========================================================
   GUIDES — LARGE OVAL PORTRAITS
   ========================================================= */

.tl-trailcase-guides {
  background: var(--trail-bg);
}

.tl-trailcase-guides__head {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.44fr);

  align-items: end;
  gap: 70px;

  margin-bottom: 58px;
}

.tl-trailcase-guides__head .tl-section-label {
  grid-column: 1 / -1;
}

.tl-trailcase-guides__head h2 {
  margin: 0;
}

.tl-trailcase-guides__head > p:last-child {
  max-width: 480px;
  margin: 0 0 5px;

  color: var(--trail-muted);

  font-size: 15px;
  line-height: 1.7;
}


/* ---------- Grid ---------- */

.tl-trailcase-guides__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 34px);

  align-items: start;
}


/* ---------- Card ---------- */

.tl-trailcase-guide {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;

  padding: 0 10px;

  text-align: center;
}


/* ---------- Oval portrait ---------- */

.tl-trailcase-guide__portrait {
  position: relative;

  width: min(100%, 360px);
  aspect-ratio: 0.76;

  overflow: hidden;

  border:
    1px solid rgba(88, 111, 86, 0.18);

  border-radius: 50% / 42%;

  background:
    linear-gradient(
      145deg,
      rgba(177, 132, 176, 0.14),
      rgba(127, 139, 95, 0.12)
    );

  box-shadow:
    0 30px 70px rgba(48, 63, 51, 0.14);

  transform: translateZ(0);

  transition:
    transform 0.7s var(--tl-ease),
    box-shadow 0.7s var(--tl-ease),
    border-color 0.7s var(--tl-ease);
}

.tl-trailcase-guide__portrait::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);

  pointer-events: none;
}

.tl-trailcase-guide__portrait img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(0.9)
    contrast(0.98);

  transition:
    transform 0.9s var(--tl-ease),
    filter 0.9s var(--tl-ease);
}


/* ---------- Hover ---------- */

.tl-trailcase-guide:hover
.tl-trailcase-guide__portrait {
  border-color:
    rgba(177, 132, 176, 0.42);

  box-shadow:
    0 40px 90px rgba(48, 63, 51, 0.18);

  transform:
    translateY(-8px);
}

.tl-trailcase-guide:hover
.tl-trailcase-guide__portrait img {
  transform:
    scale(1.045);

  filter:
    saturate(1)
    contrast(1);
}


/* ---------- Content ---------- */

.tl-trailcase-guide__content {
  width: 100%;
  max-width: 370px;

  margin-top: 27px;
}

.tl-trailcase-guide__number {
  display: block;

  color: var(--trail-lilac);

  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.tl-trailcase-guide__content h3 {
  margin: 14px 0 0;

  color: var(--trail-text);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: clamp(32px, 2.7vw, 44px);
  line-height: 0.94;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.tl-trailcase-guide__role {
  margin: 13px 0 0 !important;

  color: var(--trail-forest) !important;

  font-size: 9px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.tl-trailcase-guide__description {
  max-width: 340px;
  margin: 17px auto 0 !important;

  color: var(--trail-muted) !important;

  font-size: 14px !important;
  line-height: 1.65 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .tl-trailcase-guides__head {
    grid-template-columns: 1fr;
    gap: 23px;
  }

  .tl-trailcase-guides__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 54px;
  }

  .tl-trailcase-guide:last-child {
    grid-column: 1 / -1;

    width: min(100%, 430px);
    margin: 0 auto;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .tl-trailcase-guides__head {
    margin-bottom: 42px;
  }

  .tl-trailcase-guides__grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .tl-trailcase-guide,
  .tl-trailcase-guide:last-child {
    grid-column: auto;

    width: 100%;
    padding: 0;
  }

  .tl-trailcase-guide__portrait {
    width: min(88vw, 330px);
  }

  .tl-trailcase-guide__content {
    margin-top: 23px;
  }

  .tl-trailcase-guide__content h3 {
    font-size: 36px;
  }
}

/* MOBILE */

.tl-trailcase-mobile {
  background: var(--trail-paper);
}

.tl-trailcase-mobile__scene {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--trail-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(177,132,176,.12), transparent 30%),
    linear-gradient(145deg, #f4efe7, #dce2d5);
}

.tl-trailcase-phone {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 245px;
  height: 510px;
  padding: 8px;
  border: 1px solid rgba(88,111,86,.18);
  border-radius: 34px;
  background: #1f2d23;
  box-shadow: 0 35px 90px rgba(48,63,51,.22);
  transform: translate(-50%,-50%) rotate(-2deg);
}

.tl-trailcase-phone__speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 5px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  transform: translateX(-50%);
}

.tl-trailcase-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
}

.tl-trailcase-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-trailcase-mobile__photo {
  position: absolute;
  top: 50%;
  width: 350px;
  height: 470px;
  overflow: hidden;
  border-radius: 18px;
}

.tl-trailcase-mobile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) brightness(.82);
}

.tl-trailcase-mobile__photo--left {
  left: 7%;
  transform: translateY(-50%) rotate(-7deg);
}

.tl-trailcase-mobile__photo--right {
  right: 7%;
  transform: translateY(-50%) rotate(7deg);
}

/* RESULT */

.tl-trailcase-result {
  background: var(--trail-bg);
}

.tl-trailcase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--trail-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 42%, rgba(177,132,176,.13), transparent 30%),
    var(--trail-paper);
}

.tl-trailcase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--trail-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px,5vw,82px);
  line-height: .9;
  font-weight: 500;
}

.tl-trailcase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--trail-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-trailcase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--trail-line);
}

.tl-trailcase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--trail-line);
  color: var(--trail-muted);
  font-size: 13px;
}

.tl-trailcase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--trail-lilac);
  transform: rotate(45deg);
}

/* NAVIGATION OVERRIDE */

.tl-trailcase .tl-case-navigation {
  color: var(--trail-text);
  background: var(--trail-bg);
}

.tl-trailcase .tl-case-navigation__inner {
  padding: 42px 28px;
  border: 1px solid var(--trail-line);
  border-radius: 18px;
  background: var(--trail-paper);
}

.tl-trailcase .tl-case-navigation__project {
  color: var(--trail-muted);
}

.tl-trailcase .tl-case-navigation__project:hover,
.tl-trailcase .tl-case-navigation__counter {
  color: var(--trail-text);
}

.tl-trailcase .tl-case-navigation__label {
  color: rgba(36,48,38,.48) !important;
}

.tl-trailcase .tl-case-navigation__direction {
  color: var(--trail-lilac);
}

.tl-trailcase .tl-case-navigation__dot {
  border-color: rgba(88,111,86,.24);
}

.tl-trailcase .tl-case-navigation__dot.is-active {
  border-color: var(--trail-lilac);
  background: var(--trail-lilac);
  box-shadow: 0 0 12px rgba(177,132,176,.2);
}

/* TABLET */

@media (max-width: 1050px) {
  .tl-trailcase-route__head,
  .tl-trailcase-mood__head,
  .tl-trailcase-mobile__head,
  .tl-trailcase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-trailcase-mood__grid,
  .tl-trailcase-guides__grid {
    grid-template-columns: 1fr;
  }

  .tl-trailcase-mobile__photo--left {
    left: -5%;
  }

  .tl-trailcase-mobile__photo--right {
    right: -5%;
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-trailcase-hero {
    min-height: 800px;
    padding-top: 72px;
  }

  .tl-trailcase-hero__container {
    min-height: calc(800px - 72px);
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .tl-trailcase-hero__top {
    align-items: flex-start;
  }

  .tl-trailcase-hero__facts {
    max-width: 180px;
  }

  .tl-trailcase-hero__content {
    padding-bottom: 56px;
  }

  .tl-trailcase-hero h1 {
    font-size: clamp(62px,19vw,88px);
  }

  .tl-trailcase-hero__lead {
    font-size: 30px;
  }

  .tl-trailcase-hero__scroll {
    display: none;
  }

  .tl-trailcase-manifest__inner {
    padding: 40px 0;
  }

  .tl-trailcase-manifest h2 {
    font-size: 58px;
  }

  .tl-trailcase-route__item {
    grid-template-columns: 38px 1fr;
    gap: 18px;
  }

  .tl-trailcase-route__item p {
    grid-column: 2;
  }

  .tl-trailcase-place__frame,
  .tl-trailcase-place__frame img {
    min-height: 520px;
  }

  .tl-trailcase-place__card {
    right: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
    padding: 22px;
  }

  .tl-trailcase-place__card strong {
    font-size: 39px;
  }

  .tl-trailcase-feelings__grid {
    grid-template-columns: 1fr;
  }

  .tl-trailcase-feeling {
    min-height: 250px;
  }

  .tl-trailcase-feeling strong {
    margin-top: 60px;
    font-size: 44px;
  }

  .tl-trailcase-mood-card {
    min-height: 330px;
    padding: 22px 20px;
  }

  .tl-trailcase-mobile__scene {
    min-height: 560px;
  }

  .tl-trailcase-phone {
    width: 185px;
    height: 400px;
  }

  .tl-trailcase-mobile__photo {
    width: 220px;
    height: 310px;
  }

  .tl-trailcase-mobile__photo--left {
    left: -15%;
  }

  .tl-trailcase-mobile__photo--right {
    right: -15%;
  }

  .tl-trailcase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-trailcase-result__panel h2 {
    font-size: 42px;
  }

  .tl-trailcase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}

/* =========================================================
   TEILIORA — CASE: ОРБИТАЛ
   ========================================================= */

.tl-orbitalcase {
  --orbital-bg: #ffffff;
  --orbital-bg-soft: #f3f5f7;
  --orbital-text: #111111;
  --orbital-muted: rgba(17,17,17,.62);
  --orbital-line: rgba(17,17,17,.12);
  --orbital-accent: #d66c3d;
  --orbital-steel: #dfe3e8;

  overflow: hidden;
  color: var(--orbital-text);
  background: var(--orbital-bg);
}

.tl-orbitalcase img {
  display: block;
  max-width: 100%;
}

.tl-orbitalcase .tl-section-label {
  color: var(--orbital-accent);
}

.tl-orbitalcase .tl-title {
  color: var(--orbital-text);
}

/* HERO */

.tl-orbitalcase-hero {
  position: relative;
  min-height: 900px;
  padding-top: 86px;
  overflow: hidden;
  border-bottom: 1px solid var(--orbital-line);
  background:
    radial-gradient(circle at 82% 32%, rgba(160,174,190,.16), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8f9fa 58%, #edf1f4 100%);
}

.tl-orbitalcase-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17,17,17,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.025) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 48%, #000);
  pointer-events: none;
}

.tl-orbitalcase-hero__container {
  position: relative;
  z-index: 2;
  min-height: calc(900px - 86px);
  padding-top: 40px;
  padding-bottom: 65px;
}

.tl-orbitalcase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-orbitalcase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orbital-muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-orbitalcase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--orbital-accent);
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-orbitalcase-back:hover svg {
  transform: translateX(-4px);
}

.tl-orbitalcase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-orbitalcase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--orbital-line);
  border-radius: 20px;
  color: var(--orbital-muted);
  background: rgba(255,255,255,.74);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tl-orbitalcase-hero__main {
  display: grid;
  grid-template-columns: minmax(400px,.68fr) minmax(640px,1.32fr);
  align-items: center;
  gap: 62px;
  min-height: 720px;
}

.tl-orbitalcase-hero h1 {
  margin: 0;
  color: var(--orbital-text);
  font-size: clamp(80px,8.4vw,136px);
  line-height: .82;
  font-weight: 300;
  letter-spacing: -.075em;
}

.tl-orbitalcase-hero__lead {
  max-width: 650px;
  margin: 34px 0 0;
  color: var(--orbital-text);
  font-size: clamp(27px,3vw,47px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-orbitalcase-hero__description {
  max-width: 570px;
  margin: 25px 0 0;
  color: var(--orbital-muted);
  font-size: 15px;
  line-height: 1.72;
}

.tl-orbitalcase-hero__visual {
  position: relative;
  min-height: 600px;
}

.tl-orbitalcase-browser {
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.14);
  border-radius: 17px;
  background: #fff;
  box-shadow:
    0 44px 110px rgba(44,55,66,.18),
    0 8px 24px rgba(17,17,17,.06);
}

.tl-orbitalcase-hero__visual .tl-orbitalcase-browser {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 790px;
  transform: translate(-50%,-50%) rotate(2deg);
  animation: tlOrbitalBrowser 8s ease-in-out infinite;
}

.tl-orbitalcase-browser__bar {
  position: relative;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--orbital-line);
  background: #f5f6f7;
}

.tl-orbitalcase-browser__dots {
  position: absolute;
  left: 15px;
  display: flex;
  gap: 6px;
}

.tl-orbitalcase-browser__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tl-orbitalcase-browser__dots i:nth-child(1){background:#d66c3d}
.tl-orbitalcase-browser__dots i:nth-child(2){background:#aeb6bf}
.tl-orbitalcase-browser__dots i:nth-child(3){background:#111111}

.tl-orbitalcase-browser__address {
  color: rgba(17,17,17,.4);
  font-size: 8px;
}

.tl-orbitalcase-browser__screen {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.tl-orbitalcase-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-orbitalcase-hero__shape {
  position: absolute;
  z-index: 2;
  display: block;
  border: 1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.44);
}

.tl-orbitalcase-hero__shape--one {
  top: 55px;
  right: 25px;
  width: 260px;
  height: 360px;
  transform: skewY(-18deg) rotate(7deg);
}

.tl-orbitalcase-hero__shape--two {
  left: 30px;
  bottom: 40px;
  width: 330px;
  height: 230px;
  transform: skewY(17deg) rotate(-5deg);
}

.tl-orbitalcase-hero__accent {
  position: absolute;
  z-index: 6;
  top: 100px;
  right: 10px;
  width: 2px;
  height: 350px;
  background: var(--orbital-accent);
}

@keyframes tlOrbitalBrowser {
  0%,100% {transform:translate(-50%,-50%) rotate(2deg) translateY(0)}
  50% {transform:translate(-50%,-50%) rotate(1deg) translateY(-10px)}
}

/* COMMON HEAD */

.tl-orbitalcase-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 46px;
}

.tl-orbitalcase-head > p {
  margin: 0 0 5px;
  color: var(--orbital-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* MANIFEST */

.tl-orbitalcase-manifest {
  color: #fff;
  background: #111;
}

.tl-orbitalcase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: end;
  gap: 90px;
}

.tl-orbitalcase-manifest__quote span {
  color: rgba(255,255,255,.52);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-orbitalcase-manifest__quote strong {
  display: block;
  margin-top: 25px;
  color: #fff;
  font-size: clamp(50px,5.8vw,92px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-orbitalcase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.tl-orbitalcase-manifest__text .tl-section-label {
  color: var(--orbital-accent);
}

.tl-orbitalcase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.72;
}

/* PRINCIPLES */

.tl-orbitalcase-principles,
.tl-orbitalcase-standard,
.tl-orbitalcase-result {
  background: #fff;
}

.tl-orbitalcase-principles__grid,
.tl-orbitalcase-system__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-orbitalcase-principle,
.tl-orbitalcase-system-card {
  min-height: 320px;
  padding: 28px;
  border: 1px solid var(--orbital-line);
  border-radius: 17px;
  background: #fff;
}

.tl-orbitalcase-principle > span,
.tl-orbitalcase-system-card > span {
  color: var(--orbital-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-orbitalcase-principle h3 {
  margin: 105px 0 0;
  color: var(--orbital-text);
  font-size: 29px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.tl-orbitalcase-principle p,
.tl-orbitalcase-system-card p {
  margin: 18px 0 0;
  color: var(--orbital-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* SHOWCASE */

.tl-orbitalcase-showcase,
.tl-orbitalcase-system,
.tl-orbitalcase-mobile {
  background: var(--orbital-bg-soft);
}

.tl-orbitalcase-browser--wide {
  width: 100%;
  border-radius: 18px;
}

.tl-orbitalcase-browser--wide .tl-orbitalcase-browser__screen {
  aspect-ratio: 16/8.2;
}

/* SYSTEM */

.tl-orbitalcase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  margin-top: 38px;
}

.tl-orbitalcase-palette i {
  display: block;
  flex: 1;
  height: 105px;
  border: 1px solid var(--orbital-line);
  border-radius: 9px;
  background: var(--tone);
}

.tl-orbitalcase-palette i:nth-child(2){height:145px}
.tl-orbitalcase-palette i:nth-child(3){height:85px}
.tl-orbitalcase-palette i:nth-child(4){height:125px}

.tl-orbitalcase-diagonal {
  position: relative;
  height: 180px;
  margin-top: 38px;
  overflow: hidden;
  border: 1px solid var(--orbital-line);
  border-radius: 10px;
  background: var(--orbital-steel);
}

.tl-orbitalcase-diagonal i {
  position: absolute;
  top: -25%;
  left: 38%;
  width: 44%;
  height: 150%;
  background: #fff;
  transform: rotate(28deg);
}

.tl-orbitalcase-system-card > strong {
  display: block;
  margin-top: 65px;
  color: var(--orbital-text);
  font-size: clamp(42px,4vw,66px);
  line-height: .88;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

/* STANDARD BLOCKS */

.tl-orbitalcase-standard__panel,
.tl-orbitalcase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--orbital-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 42%, rgba(214,108,61,.08), transparent 30%),
    #fff;
}

.tl-orbitalcase-standard__panel h2,
.tl-orbitalcase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--orbital-text);
  font-size: clamp(42px,4.5vw,72px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.052em;
  text-transform: uppercase;
}

.tl-orbitalcase-standard__panel > div > p:last-child,
.tl-orbitalcase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--orbital-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-orbitalcase-standard__steps {
  display: grid;
  gap: 10px;
}

.tl-orbitalcase-standard__steps span {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid var(--orbital-line);
  border-radius: 10px;
  color: var(--orbital-muted);
  background: var(--orbital-bg-soft);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* MOBILE */

.tl-orbitalcase-mobile__scene {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--orbital-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(160,174,190,.16), transparent 30%),
    linear-gradient(145deg, #fff, #e7ebef);
}

.tl-orbitalcase-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 245px;
  height: 510px;
  padding: 8px;
  border: 1px solid rgba(17,17,17,.15);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 35px 90px rgba(44,55,66,.18);
}

.tl-orbitalcase-phone__speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 5px;
  border-radius: 10px;
  background: rgba(17,17,17,.16);
  transform: translateX(-50%);
}

.tl-orbitalcase-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
}

.tl-orbitalcase-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-orbitalcase-phone--one {transform:translate(-155%,-48%) rotate(-10deg)}
.tl-orbitalcase-phone--two {z-index:3;transform:translate(-50%,-52%)}
.tl-orbitalcase-phone--three {transform:translate(55%,-48%) rotate(10deg)}

/* RESULT */

.tl-orbitalcase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--orbital-line);
}

.tl-orbitalcase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--orbital-line);
  color: var(--orbital-muted);
  font-size: 13px;
}

.tl-orbitalcase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--orbital-accent);
  transform: rotate(45deg);
}

/* NAVIGATION */

.tl-orbitalcase .tl-case-navigation {
  color: var(--orbital-text);
  background: #fff;
}

.tl-orbitalcase .tl-case-navigation__inner {
  padding: 42px 28px;
  border: 1px solid var(--orbital-line);
  border-radius: 18px;
  background: var(--orbital-bg-soft);
}

.tl-orbitalcase .tl-case-navigation__project {
  color: var(--orbital-muted);
}

.tl-orbitalcase .tl-case-navigation__project:hover,
.tl-orbitalcase .tl-case-navigation__counter {
  color: var(--orbital-text);
}

.tl-orbitalcase .tl-case-navigation__label {
  color: rgba(17,17,17,.45) !important;
}

.tl-orbitalcase .tl-case-navigation__direction {
  color: var(--orbital-accent);
}

.tl-orbitalcase .tl-case-navigation__dot {
  border-color: rgba(17,17,17,.2);
}

.tl-orbitalcase .tl-case-navigation__dot.is-active {
  border-color: var(--orbital-accent);
  background: var(--orbital-accent);
  box-shadow: 0 0 12px rgba(214,108,61,.18);
}

/* TABLET */

@media (max-width: 1100px) {
  .tl-orbitalcase-hero__main,
  .tl-orbitalcase-manifest__grid,
  .tl-orbitalcase-head,
  .tl-orbitalcase-standard__panel,
  .tl-orbitalcase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-orbitalcase-hero__visual {
    min-height: 580px;
  }

  .tl-orbitalcase-principles__grid,
  .tl-orbitalcase-system__grid {
    grid-template-columns: 1fr;
  }

  .tl-orbitalcase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-orbitalcase-hero {
    min-height: auto;
    padding-top: 72px;
  }

  .tl-orbitalcase-hero__container {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .tl-orbitalcase-hero__top {
    align-items: flex-start;
  }

  .tl-orbitalcase-hero__facts {
    max-width: 180px;
  }

  .tl-orbitalcase-hero__main {
    gap: 28px;
    min-height: auto;
    padding-top: 50px;
  }

  .tl-orbitalcase-hero h1 {
    font-size: clamp(70px,22vw,98px);
  }

  .tl-orbitalcase-hero__lead {
    font-size: 29px;
  }

  .tl-orbitalcase-hero__visual {
    min-height: 360px;
  }

  .tl-orbitalcase-hero__visual .tl-orbitalcase-browser {
    width: 570px;
    transform: translate(-50%,-50%) rotate(2deg) scale(.63);
  }

  @keyframes tlOrbitalBrowser {
    0%,100% {transform:translate(-50%,-50%) rotate(2deg) scale(.63) translateY(0)}
    50% {transform:translate(-50%,-50%) rotate(1deg) scale(.63) translateY(-8px)}
  }

  .tl-orbitalcase-manifest__grid {
    gap: 50px;
  }

  .tl-orbitalcase-manifest__quote strong {
    font-size: 44px;
  }

  .tl-orbitalcase-principle,
  .tl-orbitalcase-system-card {
    min-height: 300px;
    padding: 22px 20px;
  }

  .tl-orbitalcase-browser--wide .tl-orbitalcase-browser__screen {
    aspect-ratio: 4/3;
  }

  .tl-orbitalcase-standard__panel,
  .tl-orbitalcase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-orbitalcase-standard__panel h2,
  .tl-orbitalcase-result__panel h2 {
    font-size: 38px;
  }

  .tl-orbitalcase-mobile__scene {
    min-height: 520px;
  }

  .tl-orbitalcase-phone {
    width: 185px;
    height: 390px;
  }

  .tl-orbitalcase-phone--one {transform:translate(-137%,-47%) rotate(-10deg) scale(.78)}
  .tl-orbitalcase-phone--two {transform:translate(-50%,-52%) scale(.86)}
  .tl-orbitalcase-phone--three {transform:translate(37%,-47%) rotate(10deg) scale(.78)}

  .tl-orbitalcase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}

/* =========================================================
   TEILIORA — CASE: DM PRODUCTION
   ========================================================= */

.tl-dmcase {
  --dm-bg: #080808;
  --dm-panel: #111111;
  --dm-text: #f1f1ed;
  --dm-muted: rgba(241,241,237,.62);
  --dm-line: rgba(255,255,255,.1);
  --dm-accent: #d91e2b;

  overflow: hidden;
  color: var(--dm-text);
  background: var(--dm-bg);
}

.tl-dmcase img,
.tl-dmcase video {
  display: block;
  max-width: 100%;
}

.tl-dmcase .tl-section-label {
  color: var(--dm-accent);
}

.tl-dmcase .tl-title {
  color: var(--dm-text);
}

/* HERO */

.tl-dmcase-hero {
  position: relative;
  min-height: 930px;
  padding-top: 86px;
  overflow: hidden;
  background: #050505;
}

.tl-dmcase-hero__media,
.tl-dmcase-hero__overlay {
  position: absolute;
  inset: 0;
}

.tl-dmcase-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tl-dmcase-hero__overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.2) 76%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72));
}

.tl-dmcase-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: calc(930px - 86px);
  flex-direction: column;
  justify-content: space-between;
  padding-top: 40px;
  padding-bottom: 48px;
}

.tl-dmcase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-dmcase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.7);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-dmcase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--dm-accent);
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-dmcase-back:hover svg {
  transform: translateX(-4px);
}

.tl-dmcase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-dmcase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.035);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tl-dmcase-hero__content {
  max-width: 850px;
  margin-top: auto;
  padding-bottom: 90px;
}

.tl-dmcase-hero h1 {
  margin: 0;
  color: var(--dm-text);
  font-size: clamp(90px,11vw,170px);
  line-height: .78;
  font-weight: 300;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.tl-dmcase-hero__lead {
  max-width: 720px;
  margin: 34px 0 0;
  color: var(--dm-accent);
  font-size: clamp(30px,3.4vw,52px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-dmcase-hero__description {
  max-width: 620px;
  margin: 25px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.72;
}

.tl-dmcase-hero__scroll {
  position: absolute;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tl-dmcase-hero__scroll span {
  display: block;
  width: 42px;
  height: 1px;
  background: var(--dm-accent);
}

.tl-dmcase-hero__scroll p {
  margin: 0;
  color: rgba(255,255,255,.46);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* SHARED HEAD */

.tl-dmcase-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 46px;
}

.tl-dmcase-head > p {
  margin: 0 0 5px;
  color: var(--dm-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* MANIFEST */

.tl-dmcase-manifest {
  background: var(--dm-accent);
}

.tl-dmcase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: end;
  gap: 90px;
}

.tl-dmcase-manifest__quote span {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-dmcase-manifest__quote strong {
  display: block;
  margin-top: 25px;
  color: #fff;
  font-size: clamp(50px,5.8vw,92px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-dmcase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.28);
}

.tl-dmcase-manifest__text .tl-section-label {
  color: rgba(255,255,255,.72);
}

.tl-dmcase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.72;
}

/* FEATURE */

.tl-dmcase-feature,
.tl-dmcase-system,
.tl-dmcase-result {
  background: var(--dm-bg);
}

.tl-dmcase-video-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--dm-line);
  border-radius: 20px;
  background: #000;
}

.tl-dmcase-video-frame video {
  width: 100%;
  aspect-ratio: 16/8.5;
  object-fit: cover;
}

.tl-dmcase-video-frame__badge {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 220px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(5,5,5,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tl-dmcase-video-frame__badge span {
  color: var(--dm-accent);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-dmcase-video-frame__badge strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
}

/* STRUCTURE */

.tl-dmcase-structure,
.tl-dmcase-mobile {
  background: #101010;
}

.tl-dmcase-structure__grid,
.tl-dmcase-system__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.tl-dmcase-structure__item,
.tl-dmcase-system-card {
  min-height: 300px;
  padding: 28px;
  border: 1px solid var(--dm-line);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}

.tl-dmcase-structure__item > span,
.tl-dmcase-system-card > span {
  color: var(--dm-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-dmcase-structure__item h3 {
  margin: 95px 0 0;
  color: var(--dm-text);
  font-size: 31px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.tl-dmcase-structure__item p,
.tl-dmcase-system-card p {
  margin: 18px 0 0;
  color: var(--dm-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* SYSTEM */

.tl-dmcase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  margin-top: 38px;
}

.tl-dmcase-palette i {
  display: block;
  flex: 1;
  height: 105px;
  border: 1px solid var(--dm-line);
  border-radius: 9px;
  background: var(--tone);
}

.tl-dmcase-palette i:nth-child(2){height:145px}
.tl-dmcase-palette i:nth-child(3){height:85px}
.tl-dmcase-palette i:nth-child(4){height:125px}

.tl-dmcase-system-card > strong {
  display: block;
  margin-top: 72px;
  color: var(--dm-text);
  font-size: clamp(42px,4vw,68px);
  line-height: .86;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-dmcase-editing {
  display: grid;
  grid-template-columns: 1fr .55fr;
  gap: 8px;
  margin-top: 42px;
}

.tl-dmcase-editing i {
  min-height: 72px;
  border-radius: 8px;
  background: #202020;
}

.tl-dmcase-editing i:nth-child(1) {
  grid-row: span 2;
  min-height: 152px;
  background: var(--dm-accent);
}

.tl-dmcase-editing i:nth-child(3) {
  background: #444;
}

/* MOBILE */

.tl-dmcase-mobile__scene {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--dm-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(217,30,43,.12), transparent 30%),
    linear-gradient(145deg, #111, #060606);
}

.tl-dmcase-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 245px;
  height: 510px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 34px;
  background: #050505;
  box-shadow: 0 35px 90px rgba(0,0,0,.48);
}

.tl-dmcase-phone__speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 5px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  transform: translateX(-50%);
}

.tl-dmcase-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
}

.tl-dmcase-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: brightness(.78);
}

.tl-dmcase-phone--one {transform:translate(-155%,-48%) rotate(-10deg)}
.tl-dmcase-phone--two {z-index:3;transform:translate(-50%,-52%)}
.tl-dmcase-phone--three {transform:translate(55%,-48%) rotate(10deg)}

/* RESULT */

.tl-dmcase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--dm-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 42%, rgba(217,30,43,.1), transparent 30%),
    #111;
}

.tl-dmcase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--dm-text);
  font-size: clamp(42px,4.5vw,72px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.052em;
  text-transform: uppercase;
}

.tl-dmcase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--dm-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-dmcase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--dm-line);
}

.tl-dmcase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--dm-line);
  color: var(--dm-muted);
  font-size: 13px;
}

.tl-dmcase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--dm-accent);
  transform: rotate(45deg);
}

/* NAVIGATION */

.tl-dmcase .tl-case-navigation {
  color: var(--dm-text);
  background: var(--dm-bg);
}

.tl-dmcase .tl-case-navigation__inner {
  padding: 42px 28px;
  border: 1px solid var(--dm-line);
  border-radius: 18px;
  background: #111;
}

.tl-dmcase .tl-case-navigation__project {
  color: var(--dm-muted);
}

.tl-dmcase .tl-case-navigation__project:hover,
.tl-dmcase .tl-case-navigation__counter {
  color: var(--dm-text);
}

.tl-dmcase .tl-case-navigation__label {
  color: rgba(241,241,237,.42) !important;
}

.tl-dmcase .tl-case-navigation__direction {
  color: var(--dm-accent);
}

.tl-dmcase .tl-case-navigation__dot {
  border-color: rgba(255,255,255,.2);
}

.tl-dmcase .tl-case-navigation__dot.is-active {
  border-color: var(--dm-accent);
  background: var(--dm-accent);
  box-shadow: 0 0 12px rgba(217,30,43,.22);
}

/* TABLET */

@media (max-width: 1050px) {
  .tl-dmcase-manifest__grid,
  .tl-dmcase-head,
  .tl-dmcase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-dmcase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.28);
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-dmcase-hero {
    min-height: 800px;
    padding-top: 72px;
  }

  .tl-dmcase-hero__container {
    min-height: calc(800px - 72px);
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .tl-dmcase-hero__top {
    align-items: flex-start;
  }

  .tl-dmcase-hero__facts {
    max-width: 180px;
  }

  .tl-dmcase-hero__content {
    padding-bottom: 56px;
  }

  .tl-dmcase-hero h1 {
    font-size: clamp(72px,21vw,100px);
  }

  .tl-dmcase-hero__lead {
    font-size: 30px;
  }

  .tl-dmcase-hero__scroll {
    display: none;
  }

  .tl-dmcase-manifest__grid {
    gap: 50px;
  }

  .tl-dmcase-manifest__quote strong {
    font-size: 44px;
  }

  .tl-dmcase-video-frame video {
    aspect-ratio: 4/3;
  }

  .tl-dmcase-video-frame__badge {
    right: 14px;
    bottom: 14px;
    width: calc(100% - 28px);
  }

  .tl-dmcase-structure__grid,
  .tl-dmcase-system__grid {
    grid-template-columns: 1fr;
  }

  .tl-dmcase-structure__item,
  .tl-dmcase-system-card {
    min-height: 290px;
    padding: 22px 20px;
  }

  .tl-dmcase-mobile__scene {
    min-height: 520px;
  }

  .tl-dmcase-phone {
    width: 185px;
    height: 390px;
  }

  .tl-dmcase-phone--one {transform:translate(-137%,-47%) rotate(-10deg) scale(.78)}
  .tl-dmcase-phone--two {transform:translate(-50%,-52%) scale(.86)}
  .tl-dmcase-phone--three {transform:translate(37%,-47%) rotate(10deg) scale(.78)}

  .tl-dmcase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-dmcase-result__panel h2 {
    font-size: 38px;
  }

  .tl-dmcase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}

/* =========================================================
   TEILIORA — CASE: РЕМОНТ PRO ЕКБ
   ========================================================= */

.tl-remontcase {
  --remont-bg: #f4f0e8;
  --remont-paper: #fbf8f2;
  --remont-dark: #1f2326;
  --remont-text: #292d30;
  --remont-muted: rgba(41,45,48,.64);
  --remont-line: rgba(31,35,38,.13);
  --remont-accent: #c87745;
  --remont-stone: #a5a093;

  overflow: hidden;
  color: var(--remont-text);
  background: var(--remont-bg);
}

.tl-remontcase img {
  display: block;
  max-width: 100%;
}

.tl-remontcase .tl-section-label {
  color: var(--remont-accent);
}

.tl-remontcase .tl-title {
  color: var(--remont-dark);
}

/* HERO */

.tl-remontcase-hero {
  position: relative;
  min-height: 900px;
  padding-top: 86px;
  overflow: hidden;
  border-bottom: 1px solid var(--remont-line);
  background:
    radial-gradient(circle at 82% 30%, rgba(200,119,69,.1), transparent 29%),
    linear-gradient(135deg, #f8f4ed 0%, #efe9df 58%, #e4ddd2 100%);
}

.tl-remontcase-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(31,35,38,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,35,38,.028) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 48%, #000);
  pointer-events: none;
}

.tl-remontcase-hero__container {
  position: relative;
  z-index: 2;
  min-height: calc(900px - 86px);
  padding-top: 40px;
  padding-bottom: 65px;
}

.tl-remontcase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-remontcase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--remont-muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-remontcase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--remont-accent);
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-remontcase-back:hover svg {
  transform: translateX(-4px);
}

.tl-remontcase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-remontcase-hero__facts span,
.tl-remontcase-hero__tags span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--remont-line);
  border-radius: 20px;
  color: var(--remont-muted);
  background: rgba(255,255,255,.58);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tl-remontcase-hero__main {
  display: grid;
  grid-template-columns: minmax(430px,.72fr) minmax(610px,1.28fr);
  align-items: center;
  gap: 62px;
  min-height: 720px;
}

.tl-remontcase-hero h1 {
  margin: 0;
  color: var(--remont-dark);
  font-size: clamp(70px,7.3vw,116px);
  line-height: .84;
  font-weight: 300;
  letter-spacing: -.067em;
  text-transform: uppercase;
}

.tl-remontcase-hero h1 em {
  color: var(--remont-accent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

.tl-remontcase-hero__lead {
  max-width: 650px;
  margin: 34px 0 0;
  color: var(--remont-dark);
  font-size: clamp(28px,3vw,48px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-remontcase-hero__description {
  max-width: 570px;
  margin: 25px 0 0;
  color: var(--remont-muted);
  font-size: 15px;
  line-height: 1.72;
}

.tl-remontcase-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.tl-remontcase-hero__visual {
  position: relative;
  min-height: 600px;
}

.tl-remontcase-browser {
  overflow: hidden;
  border: 1px solid rgba(31,35,38,.14);
  border-radius: 17px;
  background: #fff;
  box-shadow:
    0 44px 110px rgba(83,65,49,.18),
    0 8px 24px rgba(31,35,38,.06);
}

.tl-remontcase-hero__visual .tl-remontcase-browser {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 760px;
  transform: translate(-50%,-50%) rotate(-2deg);
  animation: tlRemontBrowser 8s ease-in-out infinite;
}

.tl-remontcase-browser__bar {
  position: relative;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--remont-line);
  background: #f3efe9;
}

.tl-remontcase-browser__dots {
  position: absolute;
  left: 15px;
  display: flex;
  gap: 6px;
}

.tl-remontcase-browser__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tl-remontcase-browser__dots i:nth-child(1){background:#c87745}
.tl-remontcase-browser__dots i:nth-child(2){background:#a5a093}
.tl-remontcase-browser__dots i:nth-child(3){background:#1f2326}

.tl-remontcase-browser__address {
  color: rgba(31,35,38,.4);
  font-size: 8px;
}

.tl-remontcase-browser__screen {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.tl-remontcase-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-remontcase-hero__sample {
  position: absolute;
  z-index: 2;
  display: block;
  border: 1px solid rgba(31,35,38,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.42);
}

.tl-remontcase-hero__sample--one {
  top: 50px;
  right: 10px;
  width: 260px;
  height: 330px;
  transform: rotate(8deg);
}

.tl-remontcase-hero__sample--two {
  left: 10px;
  bottom: 35px;
  width: 320px;
  height: 220px;
  transform: rotate(-7deg);
}

.tl-remontcase-hero__accent {
  position: absolute;
  z-index: 6;
  top: 95px;
  right: 5px;
  width: 2px;
  height: 360px;
  background: var(--remont-accent);
}

@keyframes tlRemontBrowser {
  0%,100% {transform:translate(-50%,-50%) rotate(-2deg) translateY(0)}
  50% {transform:translate(-50%,-50%) rotate(-1deg) translateY(-10px)}
}

/* COMMON HEAD */

.tl-remontcase-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 46px;
}

.tl-remontcase-head > p {
  margin: 0 0 5px;
  color: var(--remont-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* MANIFEST */

.tl-remontcase-manifest {
  background: var(--remont-dark);
}

.tl-remontcase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: end;
  gap: 90px;
}

.tl-remontcase-manifest__quote span {
  color: rgba(255,255,255,.52);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-remontcase-manifest__quote strong {
  display: block;
  margin-top: 25px;
  color: #fff;
  font-size: clamp(50px,5.8vw,92px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-remontcase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.tl-remontcase-manifest__text .tl-section-label {
  color: var(--remont-accent);
}

.tl-remontcase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.72;
}

/* PATH */

.tl-remontcase-path,
.tl-remontcase-projects,
.tl-remontcase-result {
  background: var(--remont-paper);
}

.tl-remontcase-path__grid,
.tl-remontcase-system__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.tl-remontcase-path__item,
.tl-remontcase-system-card {
  min-height: 300px;
  padding: 28px;
  border: 1px solid var(--remont-line);
  border-radius: 18px;
  background: #fff;
}

.tl-remontcase-path__item > span,
.tl-remontcase-system-card > span {
  color: var(--remont-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-remontcase-path__item h3 {
  margin: 95px 0 0;
  color: var(--remont-dark);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.tl-remontcase-path__item p,
.tl-remontcase-system-card p {
  margin: 18px 0 0;
  color: var(--remont-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* QUIZ */

.tl-remontcase-quiz,
.tl-remontcase-system,
.tl-remontcase-mobile {
  background: var(--remont-bg);
}

.tl-remontcase-quiz__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap: 14px;
}

.tl-remontcase-quiz__screen,
.tl-remontcase-quiz__meta {
  border: 1px solid var(--remont-line);
  border-radius: 20px;
  background: #fff;
}

.tl-remontcase-quiz__screen {
  padding: 38px;
}

.tl-remontcase-quiz__step {
  color: var(--remont-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-remontcase-quiz__screen h3 {
  margin: 20px 0 0;
  color: var(--remont-dark);
  font-size: 34px;
  font-weight: 400;
}

.tl-remontcase-quiz__options {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
  margin-top: 28px;
}

.tl-remontcase-quiz__options span {
  display: flex;
  min-height: 64px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid var(--remont-line);
  border-radius: 12px;
  color: var(--remont-muted);
  background: var(--remont-paper);
  font-size: 13px;
}

.tl-remontcase-quiz__progress {
  height: 8px;
  margin-top: 30px;
  overflow: hidden;
  border-radius: 20px;
  background: #ece7df;
}

.tl-remontcase-quiz__progress i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--remont-accent);
}

.tl-remontcase-quiz__meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: var(--remont-dark);
}

.tl-remontcase-quiz__meta span {
  color: rgba(255,255,255,.48);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-remontcase-quiz__meta strong {
  margin-top: 14px;
  color: #fff;
  font-size: 46px;
  font-weight: 300;
}

.tl-remontcase-quiz__meta p {
  margin: 16px 0 0;
  color: rgba(255,255,255,.64);
  font-size: 14px;
  line-height: 1.65;
}

/* PROJECTS */

.tl-remontcase-projects__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-remontcase-project {
  overflow: hidden;
  border: 1px solid var(--remont-line);
  border-radius: 18px;
  background: #fff;
}

.tl-remontcase-project__image {
  height: 300px;
  overflow: hidden;
}

.tl-remontcase-project__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--tl-ease);
}

.tl-remontcase-project:hover .tl-remontcase-project__image img {
  transform: scale(1.04);
}

.tl-remontcase-project__content {
  padding: 22px;
}

.tl-remontcase-project__content > span {
  color: var(--remont-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-remontcase-project__content h3 {
  margin: 14px 0 0;
  color: var(--remont-dark);
  font-size: 25px;
  line-height: 1;
  font-weight: 400;
}

.tl-remontcase-project__content p {
  margin: 12px 0 0;
  color: var(--remont-muted);
  font-size: 13px;
}

/* SYSTEM */

.tl-remontcase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  margin-top: 38px;
}

.tl-remontcase-palette i {
  display: block;
  flex: 1;
  height: 105px;
  border: 1px solid var(--remont-line);
  border-radius: 9px;
  background: var(--tone);
}

.tl-remontcase-palette i:nth-child(2){height:145px}
.tl-remontcase-palette i:nth-child(3){height:85px}
.tl-remontcase-palette i:nth-child(4){height:125px}

.tl-remontcase-system-card > strong {
  display: block;
  margin-top: 72px;
  color: var(--remont-dark);
  font-size: clamp(42px,4vw,68px);
  line-height: .86;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-remontcase-modules {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
  margin-top: 42px;
}

.tl-remontcase-modules i {
  min-height: 72px;
  border: 1px solid var(--remont-line);
  border-radius: 9px;
  background: var(--remont-paper);
}

.tl-remontcase-modules i:nth-child(1),
.tl-remontcase-modules i:nth-child(4) {
  background: #e7d7c8;
}

/* MOBILE */

.tl-remontcase-mobile__scene {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--remont-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(200,119,69,.12), transparent 30%),
    linear-gradient(145deg, #f8f4ed, #e6ded2);
}

.tl-remontcase-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 245px;
  height: 510px;
  padding: 8px;
  border: 1px solid rgba(31,35,38,.15);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 35px 90px rgba(83,65,49,.2);
}

.tl-remontcase-phone__speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 5px;
  border-radius: 10px;
  background: rgba(31,35,38,.16);
  transform: translateX(-50%);
}

.tl-remontcase-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
}

.tl-remontcase-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-remontcase-phone--one {transform:translate(-155%,-48%) rotate(-10deg)}
.tl-remontcase-phone--two {z-index:3;transform:translate(-50%,-52%)}
.tl-remontcase-phone--three {transform:translate(55%,-48%) rotate(10deg)}

/* RESULT */

.tl-remontcase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--remont-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 42%, rgba(200,119,69,.1), transparent 30%),
    #fff;
}

.tl-remontcase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--remont-dark);
  font-size: clamp(42px,4.5vw,72px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.052em;
  text-transform: uppercase;
}

.tl-remontcase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--remont-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-remontcase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--remont-line);
}

.tl-remontcase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--remont-line);
  color: var(--remont-muted);
  font-size: 13px;
}

.tl-remontcase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--remont-accent);
  transform: rotate(45deg);
}

/* NAVIGATION */

.tl-remontcase .tl-case-navigation {
  color: var(--remont-text);
  background: var(--remont-paper);
}

.tl-remontcase .tl-case-navigation__inner {
  padding: 42px 28px;
  border: 1px solid var(--remont-line);
  border-radius: 18px;
  background: var(--remont-bg);
}

.tl-remontcase .tl-case-navigation__project {
  color: var(--remont-muted);
}

.tl-remontcase .tl-case-navigation__project:hover,
.tl-remontcase .tl-case-navigation__counter {
  color: var(--remont-dark);
}

.tl-remontcase .tl-case-navigation__label {
  color: rgba(41,45,48,.45) !important;
}

.tl-remontcase .tl-case-navigation__direction {
  color: var(--remont-accent);
}

.tl-remontcase .tl-case-navigation__dot {
  border-color: rgba(31,35,38,.2);
}

.tl-remontcase .tl-case-navigation__dot.is-active {
  border-color: var(--remont-accent);
  background: var(--remont-accent);
  box-shadow: 0 0 12px rgba(200,119,69,.2);
}

/* TABLET */

@media (max-width: 1050px) {
  .tl-remontcase-hero__main,
  .tl-remontcase-manifest__grid,
  .tl-remontcase-head,
  .tl-remontcase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-remontcase-hero__visual {
    min-height: 580px;
  }

  .tl-remontcase-quiz__panel {
    grid-template-columns: 1fr;
  }

  .tl-remontcase-projects__grid {
    grid-template-columns: 1fr;
  }

  .tl-remontcase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-remontcase-hero {
    min-height: auto;
    padding-top: 72px;
  }

  .tl-remontcase-hero__container {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .tl-remontcase-hero__top {
    align-items: flex-start;
  }

  .tl-remontcase-hero__facts {
    max-width: 180px;
  }

  .tl-remontcase-hero__main {
    gap: 28px;
    min-height: auto;
    padding-top: 50px;
  }

  .tl-remontcase-hero h1 {
    font-size: clamp(58px,18vw,82px);
  }

  .tl-remontcase-hero__lead {
    font-size: 29px;
  }

  .tl-remontcase-hero__visual {
    min-height: 360px;
  }

  .tl-remontcase-hero__visual .tl-remontcase-browser {
    width: 560px;
    transform: translate(-50%,-50%) rotate(-2deg) scale(.63);
  }

  @keyframes tlRemontBrowser {
    0%,100% {transform:translate(-50%,-50%) rotate(-2deg) scale(.63) translateY(0)}
    50% {transform:translate(-50%,-50%) rotate(-1deg) scale(.63) translateY(-8px)}
  }

  .tl-remontcase-manifest__grid {
    gap: 50px;
  }

  .tl-remontcase-manifest__quote strong {
    font-size: 44px;
  }

  .tl-remontcase-path__grid,
  .tl-remontcase-system__grid {
    grid-template-columns: 1fr;
  }

  .tl-remontcase-path__item,
  .tl-remontcase-system-card {
    min-height: 290px;
    padding: 22px 20px;
  }

  .tl-remontcase-quiz__screen {
    padding: 24px 20px;
  }

  .tl-remontcase-quiz__options {
    grid-template-columns: 1fr;
  }

  .tl-remontcase-project__image {
    height: 240px;
  }

  .tl-remontcase-mobile__scene {
    min-height: 520px;
  }

  .tl-remontcase-phone {
    width: 185px;
    height: 390px;
  }

  .tl-remontcase-phone--one {transform:translate(-137%,-47%) rotate(-10deg) scale(.78)}
  .tl-remontcase-phone--two {transform:translate(-50%,-52%) scale(.86)}
  .tl-remontcase-phone--three {transform:translate(37%,-47%) rotate(10deg) scale(.78)}

  .tl-remontcase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-remontcase-result__panel h2 {
    font-size: 38px;
  }

  .tl-remontcase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}

/* =========================================================
   TEILIORA — CASE: LEGAL TO BUSINESS
   ========================================================= */

.tl-legalcase {
  --legal-bg: #f7f5f2;
  --legal-paper: #ffffff;
  --legal-dark: #1f0f0a;
  --legal-text: #28211e;
  --legal-muted: rgba(40,33,30,.64);
  --legal-line: rgba(31,15,10,.13);
  --legal-accent: #ff6a2a;
  --legal-graphite: #30343a;

  overflow: hidden;
  color: var(--legal-text);
  background: var(--legal-bg);
}

.tl-legalcase img {
  display: block;
  max-width: 100%;
}

.tl-legalcase .tl-section-label {
  color: var(--legal-accent);
}

.tl-legalcase .tl-title {
  color: var(--legal-dark);
}

/* HERO */

.tl-legalcase-hero {
  position: relative;
  min-height: 900px;
  padding-top: 86px;
  overflow: hidden;
  border-bottom: 1px solid var(--legal-line);
  background:
    radial-gradient(circle at 82% 28%, rgba(255,106,42,.08), transparent 28%),
    linear-gradient(135deg, #fbfaf8 0%, #f1eeea 58%, #e6dfda 100%);
}

.tl-legalcase-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(31,15,10,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,15,10,.025) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 48%, #000);
  pointer-events: none;
}

.tl-legalcase-hero__container {
  position: relative;
  z-index: 2;
  min-height: calc(900px - 86px);
  padding-top: 40px;
  padding-bottom: 65px;
}

.tl-legalcase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-legalcase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--legal-muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-legalcase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--legal-accent);
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-legalcase-back:hover svg {
  transform: translateX(-4px);
}

.tl-legalcase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-legalcase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--legal-line);
  border-radius: 20px;
  color: var(--legal-muted);
  background: rgba(255,255,255,.65);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tl-legalcase-hero__main {
  display: grid;
  grid-template-columns: minmax(430px,.72fr) minmax(620px,1.28fr);
  align-items: center;
  gap: 62px;
  min-height: 720px;
}

.tl-legalcase-hero h1 {
  margin: 0;
  color: var(--legal-dark);
  font-size: clamp(68px,7vw,112px);
  line-height: .84;
  font-weight: 300;
  letter-spacing: -.067em;
  text-transform: uppercase;
}

.tl-legalcase-hero h1 em {
  color: var(--legal-accent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

.tl-legalcase-hero__lead {
  max-width: 660px;
  margin: 34px 0 0;
  color: var(--legal-dark);
  font-size: clamp(28px,3vw,48px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-legalcase-hero__description {
  max-width: 580px;
  margin: 25px 0 0;
  color: var(--legal-muted);
  font-size: 15px;
  line-height: 1.72;
}

.tl-legalcase-hero__visual {
  position: relative;
  min-height: 600px;
}

.tl-legalcase-browser {
  overflow: hidden;
  border: 1px solid rgba(31,15,10,.14);
  border-radius: 17px;
  background: #fff;
  box-shadow:
    0 44px 110px rgba(74,46,34,.17),
    0 8px 24px rgba(31,15,10,.06);
}

.tl-legalcase-hero__visual .tl-legalcase-browser {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 770px;
  transform: translate(-50%,-50%) rotate(-2deg);
  animation: tlLegalBrowser 8s ease-in-out infinite;
}

.tl-legalcase-browser__bar {
  position: relative;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--legal-line);
  background: #f3efec;
}

.tl-legalcase-browser__dots {
  position: absolute;
  left: 15px;
  display: flex;
  gap: 6px;
}

.tl-legalcase-browser__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tl-legalcase-browser__dots i:nth-child(1){background:#ff6a2a}
.tl-legalcase-browser__dots i:nth-child(2){background:#7d665d}
.tl-legalcase-browser__dots i:nth-child(3){background:#1f0f0a}

.tl-legalcase-browser__address {
  color: rgba(31,15,10,.4);
  font-size: 8px;
}

.tl-legalcase-browser__screen {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.tl-legalcase-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-legalcase-hero__line {
  position: absolute;
  z-index: 2;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,106,42,.5), transparent);
}

.tl-legalcase-hero__line--one {
  top: 155px;
  right: 20px;
  width: 420px;
  transform: rotate(20deg);
}

.tl-legalcase-hero__line--two {
  left: 10px;
  bottom: 90px;
  width: 500px;
  transform: rotate(-17deg);
}

@keyframes tlLegalBrowser {
  0%,100% {transform:translate(-50%,-50%) rotate(-2deg) translateY(0)}
  50% {transform:translate(-50%,-50%) rotate(-1deg) translateY(-10px)}
}

/* SHARED HEAD */

.tl-legalcase-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 46px;
}

.tl-legalcase-head > p {
  margin: 0 0 5px;
  color: var(--legal-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* MANIFEST */

.tl-legalcase-manifest {
  background: var(--legal-dark);
}

.tl-legalcase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: end;
  gap: 90px;
}

.tl-legalcase-manifest__quote span {
  color: rgba(255,255,255,.52);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-legalcase-manifest__quote strong {
  display: block;
  margin-top: 25px;
  color: #fff;
  font-size: clamp(50px,5.8vw,92px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-legalcase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.tl-legalcase-manifest__text .tl-section-label {
  color: var(--legal-accent);
}

.tl-legalcase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.72;
}

/* ARCHITECTURE */

.tl-legalcase-architecture,
.tl-legalcase-form,
.tl-legalcase-result {
  background: var(--legal-paper);
}

.tl-legalcase-architecture__grid,
.tl-legalcase-system__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.tl-legalcase-architecture__item,
.tl-legalcase-system-card {
  min-height: 300px;
  padding: 28px;
  border: 1px solid var(--legal-line);
  border-radius: 18px;
  background: #fff;
}

.tl-legalcase-architecture__item > span,
.tl-legalcase-system-card > span {
  color: var(--legal-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-legalcase-architecture__item h3 {
  margin: 95px 0 0;
  color: var(--legal-dark);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.tl-legalcase-architecture__item p,
.tl-legalcase-system-card p {
  margin: 18px 0 0;
  color: var(--legal-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* SHOWCASE */

.tl-legalcase-showcase,
.tl-legalcase-ai,
.tl-legalcase-system,
.tl-legalcase-mobile {
  background: var(--legal-bg);
}

.tl-legalcase-browser--wide {
  width: 100%;
  border-radius: 18px;
}

.tl-legalcase-browser--wide .tl-legalcase-browser__screen {
  aspect-ratio: 16/8.2;
}

/* AI */

.tl-legalcase-ai__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 14px;
}

.tl-legalcase-ai__flow,
.tl-legalcase-ai__text {
  border: 1px solid var(--legal-line);
  border-radius: 18px;
  background: #fff;
}

.tl-legalcase-ai__flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 36px;
}

.tl-legalcase-ai__flow span {
  display: flex;
  min-height: 56px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid var(--legal-line);
  border-radius: 12px;
  color: var(--legal-muted);
  background: var(--legal-bg);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}

.tl-legalcase-ai__flow i {
  width: 40px;
  height: 1px;
  background: var(--legal-accent);
}

.tl-legalcase-ai__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: var(--legal-dark);
}

.tl-legalcase-ai__text strong {
  color: #fff;
  font-size: 34px;
  font-weight: 300;
}

.tl-legalcase-ai__text p {
  margin: 16px 0 0;
  color: rgba(255,255,255,.64);
  font-size: 14px;
  line-height: 1.65;
}

/* FORM */

.tl-legalcase-form__demo {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--legal-line);
  border-radius: 20px;
  background: var(--legal-bg);
}

.tl-legalcase-form__page {
  display: grid;
  gap: 18px;
  width: 62%;
  padding: 54px;
}

.tl-legalcase-form__page span {
  height: 100px;
  border: 1px solid var(--legal-line);
  border-radius: 14px;
  background: #fff;
}

.tl-legalcase-form__drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 100%;
  padding: 44px 32px;
  background: var(--legal-dark);
}

.tl-legalcase-form__drawer small {
  color: var(--legal-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-legalcase-form__drawer strong {
  display: block;
  margin-top: 18px;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
}

.tl-legalcase-form__drawer input,
.tl-legalcase-form__drawer button {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin-top: 12px;
  border-radius: 10px;
}

.tl-legalcase-form__drawer input {
  border: 1px solid rgba(255,255,255,.14);
  padding: 0 14px;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.05);
}

.tl-legalcase-form__drawer button {
  border: 0;
  color: #fff;
  background: var(--legal-accent);
  text-transform: uppercase;
}

/* SYSTEM */

.tl-legalcase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  margin-top: 38px;
}

.tl-legalcase-palette i {
  display: block;
  flex: 1;
  height: 105px;
  border: 1px solid var(--legal-line);
  border-radius: 9px;
  background: var(--tone);
}

.tl-legalcase-palette i:nth-child(2){height:145px}
.tl-legalcase-palette i:nth-child(3){height:85px}
.tl-legalcase-palette i:nth-child(4){height:125px}

.tl-legalcase-system-card > strong {
  display: block;
  margin-top: 72px;
  color: var(--legal-dark);
  font-size: clamp(42px,4vw,68px);
  line-height: .86;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-legalcase-modules {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 42px;
}

.tl-legalcase-modules i {
  min-height: 64px;
  border: 1px solid var(--legal-line);
  border-radius: 9px;
  background: #fff;
}

.tl-legalcase-modules i:nth-child(2),
.tl-legalcase-modules i:nth-child(5) {
  background: rgba(255,106,42,.1);
}

/* MOBILE */

.tl-legalcase-mobile__scene {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--legal-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,106,42,.1), transparent 30%),
    linear-gradient(145deg, #fff, #eae4df);
}

.tl-legalcase-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 245px;
  height: 510px;
  padding: 8px;
  border: 1px solid rgba(31,15,10,.15);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 35px 90px rgba(74,46,34,.18);
}

.tl-legalcase-phone__speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 5px;
  border-radius: 10px;
  background: rgba(31,15,10,.16);
  transform: translateX(-50%);
}

.tl-legalcase-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
}

.tl-legalcase-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tl-legalcase-phone--one {transform:translate(-155%,-48%) rotate(-10deg)}
.tl-legalcase-phone--two {z-index:3;transform:translate(-50%,-52%)}
.tl-legalcase-phone--three {transform:translate(55%,-48%) rotate(10deg)}

/* RESULT */

.tl-legalcase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--legal-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 42%, rgba(255,106,42,.1), transparent 30%),
    #fff;
}

.tl-legalcase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--legal-dark);
  font-size: clamp(42px,4.5vw,72px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.052em;
  text-transform: uppercase;
}

.tl-legalcase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--legal-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-legalcase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--legal-line);
}

.tl-legalcase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--legal-line);
  color: var(--legal-muted);
  font-size: 13px;
}

.tl-legalcase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--legal-accent);
  transform: rotate(45deg);
}

/* NAVIGATION */

.tl-legalcase .tl-case-navigation {
  color: var(--legal-text);
  background: var(--legal-paper);
}

.tl-legalcase .tl-case-navigation__inner {
  padding: 42px 28px;
  border: 1px solid var(--legal-line);
  border-radius: 18px;
  background: var(--legal-bg);
}

.tl-legalcase .tl-case-navigation__project {
  color: var(--legal-muted);
}

.tl-legalcase .tl-case-navigation__project:hover,
.tl-legalcase .tl-case-navigation__counter {
  color: var(--legal-dark);
}

.tl-legalcase .tl-case-navigation__label {
  color: rgba(40,33,30,.45) !important;
}

.tl-legalcase .tl-case-navigation__direction {
  color: var(--legal-accent);
}

.tl-legalcase .tl-case-navigation__dot {
  border-color: rgba(31,15,10,.2);
}

.tl-legalcase .tl-case-navigation__dot.is-active {
  border-color: var(--legal-accent);
  background: var(--legal-accent);
  box-shadow: 0 0 12px rgba(255,106,42,.2);
}

/* TABLET */

@media (max-width: 1050px) {
  .tl-legalcase-hero__main,
  .tl-legalcase-manifest__grid,
  .tl-legalcase-head,
  .tl-legalcase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-legalcase-hero__visual {
    min-height: 580px;
  }

  .tl-legalcase-ai__panel {
    grid-template-columns: 1fr;
  }

  .tl-legalcase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-legalcase-hero {
    min-height: auto;
    padding-top: 72px;
  }

  .tl-legalcase-hero__container {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .tl-legalcase-hero__top {
    align-items: flex-start;
  }

  .tl-legalcase-hero__facts {
    max-width: 180px;
  }

  .tl-legalcase-hero__main {
    gap: 28px;
    min-height: auto;
    padding-top: 50px;
  }

  .tl-legalcase-hero h1 {
    font-size: clamp(54px,16vw,76px);
  }

  .tl-legalcase-hero__lead {
    font-size: 29px;
  }

  .tl-legalcase-hero__visual {
    min-height: 360px;
  }

  .tl-legalcase-hero__visual .tl-legalcase-browser {
    width: 560px;
    transform: translate(-50%,-50%) rotate(-2deg) scale(.63);
  }

  @keyframes tlLegalBrowser {
    0%,100% {transform:translate(-50%,-50%) rotate(-2deg) scale(.63) translateY(0)}
    50% {transform:translate(-50%,-50%) rotate(-1deg) scale(.63) translateY(-8px)}
  }

  .tl-legalcase-manifest__grid {
    gap: 50px;
  }

  .tl-legalcase-manifest__quote strong {
    font-size: 44px;
  }

  .tl-legalcase-architecture__grid,
  .tl-legalcase-system__grid {
    grid-template-columns: 1fr;
  }

  .tl-legalcase-architecture__item,
  .tl-legalcase-system-card {
    min-height: 290px;
    padding: 22px 20px;
  }

  .tl-legalcase-ai__flow {
    flex-direction: column;
    align-items: stretch;
  }

  .tl-legalcase-ai__flow i {
    width: 1px;
    height: 28px;
    margin: 0 auto;
  }

/* =========================================================
   REAL SIDEBAR FORM
   ========================================================= */

.tl-legalcase-form__demo{

    overflow:hidden;

    border:1px solid var(--legal-line);

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 24px 60px rgba(31,15,10,.08);

}

.tl-legalcase-form__demo img{

    display:block;

    width:100%;

    height:auto;

}

  .tl-legalcase-mobile__scene {
    min-height: 520px;
  }

  .tl-legalcase-phone {
    width: 185px;
    height: 390px;
  }

  .tl-legalcase-phone--one {transform:translate(-137%,-47%) rotate(-10deg) scale(.78)}
  .tl-legalcase-phone--two {transform:translate(-50%,-52%) scale(.86)}
  .tl-legalcase-phone--three {transform:translate(37%,-47%) rotate(10deg) scale(.78)}

  .tl-legalcase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-legalcase-result__panel h2 {
    font-size: 38px;
  }

  .tl-legalcase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}

/* =========================================================
   TEILIORA — CASE: КСК ГРУПП
   ========================================================= */

.tl-kskcase {
  --ksk-bg: #ffffff;
  --ksk-bg-soft: #eef3f8;
  --ksk-dark: #082f67;
  --ksk-text: #15324f;
  --ksk-muted: rgba(21,50,79,.64);
  --ksk-line: rgba(8,47,103,.13);
  --ksk-accent: #00a6df;

  overflow: hidden;
  color: var(--ksk-text);
  background: var(--ksk-bg);
}

.tl-kskcase img {
  display: block;
  max-width: 100%;
}

.tl-kskcase .tl-section-label {
  color: var(--ksk-accent);
}

.tl-kskcase .tl-title {
  color: var(--ksk-dark);
}

/* HERO */

.tl-kskcase-hero {
  position: relative;
  min-height: 930px;
  padding-top: 86px;
  overflow: hidden;
  background: #0a6ca8;
}

.tl-kskcase-hero__media,
.tl-kskcase-hero__overlay,
.tl-kskcase-hero__grid {
  position: absolute;
  inset: 0;
}

.tl-kskcase-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tl-kskcase-hero__overlay {
  background:
    linear-gradient(90deg, rgba(4,30,66,.93) 0%, rgba(4,30,66,.76) 38%, rgba(4,30,66,.12) 72%, rgba(4,30,66,.3) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.36));
}

.tl-kskcase-hero__grid {
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 50%, #000);
  pointer-events: none;
}

.tl-kskcase-hero__container {
  position: relative;
  z-index: 2;
  min-height: calc(930px - 86px);
  padding-top: 40px;
  padding-bottom: 60px;
}

.tl-kskcase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-kskcase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-kskcase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #6bd5f5;
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-kskcase-back:hover svg {
  transform: translateX(-4px);
}

.tl-kskcase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-kskcase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.04);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tl-kskcase-hero__main {
  display: grid;
  grid-template-columns: minmax(420px,.8fr) minmax(430px,.65fr);
  align-items: end;
  justify-content: space-between;
  gap: 80px;
  min-height: 740px;
}

.tl-kskcase-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(88px,10vw,154px);
  line-height: .78;
  font-weight: 300;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.tl-kskcase-hero h1 em {
  color: #6bd5f5;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

.tl-kskcase-hero__lead {
  max-width: 760px;
  margin: 34px 0 0;
  color: #fff;
  font-size: clamp(30px,3.3vw,52px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-kskcase-hero__description {
  max-width: 620px;
  margin: 25px 0 0;
  color: rgba(255,255,255,.7);
  font-size: 15px;
  line-height: 1.72;
}

.tl-kskcase-hero__metrics {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
  align-self: end;
  padding-bottom: 28px;
}

.tl-kskcase-hero__metrics article {
  min-height: 142px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  background: rgba(4,30,66,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tl-kskcase-hero__metrics strong {
  display: block;
  color: #fff;
  font-size: 44px;
  line-height: .9;
  font-weight: 300;
}

.tl-kskcase-hero__metrics span {
  display: block;
  margin-top: 16px;
  color: rgba(255,255,255,.58);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* SHARED HEAD */

.tl-kskcase-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 46px;
}

.tl-kskcase-head > p {
  margin: 0 0 5px;
  color: var(--ksk-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* MANIFEST */

.tl-kskcase-manifest {
  background: var(--ksk-dark);
}

.tl-kskcase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: end;
  gap: 90px;
}

.tl-kskcase-manifest__quote span {
  color: rgba(255,255,255,.52);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-kskcase-manifest__quote strong {
  display: block;
  margin-top: 25px;
  color: #fff;
  font-size: clamp(50px,5.8vw,92px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-kskcase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.tl-kskcase-manifest__text .tl-section-label {
  color: #6bd5f5;
}

.tl-kskcase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.72;
}

/* ECOSYSTEM */

.tl-kskcase-ecosystem,
.tl-kskcase-development,
.tl-kskcase-result {
  background: #fff;
}

.tl-kskcase-ecosystem__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.tl-kskcase-ecosystem__item,
.tl-kskcase-system-card,
.tl-kskcase-knowledge-card {
  padding: 28px;
  border: 1px solid var(--ksk-line);
  border-radius: 18px;
  background: #fff;
}

.tl-kskcase-ecosystem__item {
  min-height: 250px;
}

.tl-kskcase-ecosystem__item:last-child {
  grid-column: 1 / -1;
}

.tl-kskcase-ecosystem__item > span,
.tl-kskcase-system-card > span,
.tl-kskcase-knowledge-card > span {
  color: var(--ksk-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-kskcase-ecosystem__item h3 {
  margin: 70px 0 0;
  color: var(--ksk-dark);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.tl-kskcase-ecosystem__item p,
.tl-kskcase-system-card p,
.tl-kskcase-knowledge-card p {
  margin: 18px 0 0;
  color: var(--ksk-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* SHOWCASE */

.tl-kskcase-showcase,
.tl-kskcase-knowledge,
.tl-kskcase-system,
.tl-kskcase-mobile {
  background: var(--ksk-bg-soft);
}

.tl-kskcase-browser {
  overflow: hidden;
  border: 1px solid var(--ksk-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(8,47,103,.12);
}

.tl-kskcase-browser__bar {
  position: relative;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--ksk-line);
  background: #f4f7fa;
}

.tl-kskcase-browser__dots {
  position: absolute;
  left: 15px;
  display: flex;
  gap: 6px;
}

.tl-kskcase-browser__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tl-kskcase-browser__dots i:nth-child(1){background:#082f67}
.tl-kskcase-browser__dots i:nth-child(2){background:#00a6df}
.tl-kskcase-browser__dots i:nth-child(3){background:#a7b6c8}

.tl-kskcase-browser__address {
  color: rgba(8,47,103,.4);
  font-size: 8px;
}

.tl-kskcase-browser__screen {
  overflow: hidden;
  aspect-ratio: 16/8.2;
}

.tl-kskcase-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* KNOWLEDGE */

.tl-kskcase-knowledge__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-kskcase-knowledge-card {
  min-height: 260px;
}

.tl-kskcase-knowledge-card strong {
  display: block;
  margin-top: 68px;
  color: var(--ksk-dark);
  font-size: 29px;
  line-height: 1;
  font-weight: 400;
}

/* DEVELOPMENT */

.tl-kskcase-development__timeline {
  border-top: 1px solid var(--ksk-line);
}

.tl-kskcase-development__item {
  display: grid;
  grid-template-columns: 70px minmax(220px,.42fr) minmax(0,1fr);
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--ksk-line);
}

.tl-kskcase-development__item > span {
  color: var(--ksk-accent);
  font-size: 10px;
  letter-spacing: .08em;
}

.tl-kskcase-development__item h3 {
  margin: 0;
  color: var(--ksk-dark);
  font-size: 28px;
  font-weight: 400;
}

.tl-kskcase-development__item p {
  margin: 0;
  color: var(--ksk-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* SYSTEM */

.tl-kskcase-system__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-kskcase-system-card {
  min-height: 370px;
}

.tl-kskcase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  margin-top: 38px;
}

.tl-kskcase-palette i {
  display: block;
  flex: 1;
  height: 105px;
  border: 1px solid var(--ksk-line);
  border-radius: 9px;
  background: var(--tone);
}

.tl-kskcase-palette i:nth-child(2){height:145px}
.tl-kskcase-palette i:nth-child(3){height:85px}
.tl-kskcase-palette i:nth-child(4){height:125px}

.tl-kskcase-system-card > strong {
  display: block;
  margin-top: 72px;
  color: var(--ksk-dark);
  font-size: clamp(42px,4vw,66px);
  line-height: .87;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-kskcase-modules {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 42px;
}

.tl-kskcase-modules i {
  min-height: 64px;
  border: 1px solid var(--ksk-line);
  border-radius: 9px;
  background: #fff;
}

.tl-kskcase-modules i:nth-child(2),
.tl-kskcase-modules i:nth-child(5) {
  background: rgba(0,166,223,.12);
}

/* MOBILE */

.tl-kskcase-mobile__scene {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--ksk-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(0,166,223,.12), transparent 30%),
    linear-gradient(145deg, #fff, #dfe9f3);
}

.tl-kskcase-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 245px;
  height: 510px;
  padding: 8px;
  border: 1px solid rgba(8,47,103,.16);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 35px 90px rgba(8,47,103,.18);
}

.tl-kskcase-phone__speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 5px;
  border-radius: 10px;
  background: rgba(8,47,103,.16);
  transform: translateX(-50%);
}

.tl-kskcase-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
}

.tl-kskcase-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tl-kskcase-phone--one {transform:translate(-155%,-48%) rotate(-10deg)}
.tl-kskcase-phone--two {z-index:3;transform:translate(-50%,-52%)}
.tl-kskcase-phone--three {transform:translate(55%,-48%) rotate(10deg)}

/* RESULT */

.tl-kskcase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--ksk-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 42%, rgba(0,166,223,.1), transparent 30%),
    #fff;
}

.tl-kskcase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--ksk-dark);
  font-size: clamp(42px,4.5vw,72px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.052em;
  text-transform: uppercase;
}

.tl-kskcase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--ksk-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-kskcase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ksk-line);
}

.tl-kskcase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--ksk-line);
  color: var(--ksk-muted);
  font-size: 13px;
}

.tl-kskcase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--ksk-accent);
  transform: rotate(45deg);
}

/* NAVIGATION */

.tl-kskcase .tl-case-navigation {
  color: var(--ksk-text);
  background: #fff;
}

.tl-kskcase .tl-case-navigation__inner {
  padding: 42px 28px;
  border: 1px solid var(--ksk-line);
  border-radius: 18px;
  background: var(--ksk-bg-soft);
}

.tl-kskcase .tl-case-navigation__project {
  color: var(--ksk-muted);
}

.tl-kskcase .tl-case-navigation__project:hover,
.tl-kskcase .tl-case-navigation__counter {
  color: var(--ksk-dark);
}

.tl-kskcase .tl-case-navigation__label {
  color: rgba(21,50,79,.45) !important;
}

.tl-kskcase .tl-case-navigation__direction {
  color: var(--ksk-accent);
}

.tl-kskcase .tl-case-navigation__dot {
  border-color: rgba(8,47,103,.2);
}

.tl-kskcase .tl-case-navigation__dot.is-active {
  border-color: var(--ksk-accent);
  background: var(--ksk-accent);
  box-shadow: 0 0 12px rgba(0,166,223,.2);
}

/* TABLET */

@media (max-width: 1050px) {
  .tl-kskcase-hero__main,
  .tl-kskcase-manifest__grid,
  .tl-kskcase-head,
  .tl-kskcase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-kskcase-hero__metrics {
    max-width: 650px;
  }

  .tl-kskcase-knowledge__grid,
  .tl-kskcase-system__grid {
    grid-template-columns: 1fr;
  }

  .tl-kskcase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-kskcase-hero {
    min-height: auto;
    padding-top: 72px;
  }

  .tl-kskcase-hero__container {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .tl-kskcase-hero__top {
    align-items: flex-start;
  }

  .tl-kskcase-hero__facts {
    max-width: 180px;
  }

  .tl-kskcase-hero__main {
    gap: 42px;
    min-height: auto;
    padding-top: 70px;
  }

  .tl-kskcase-hero h1 {
    font-size: clamp(72px,22vw,100px);
  }

  .tl-kskcase-hero__lead {
    font-size: 29px;
  }

  .tl-kskcase-hero__metrics {
    grid-template-columns: 1fr 1fr;
  }

  .tl-kskcase-hero__metrics article {
    min-height: 120px;
    padding: 16px;
  }

  .tl-kskcase-hero__metrics strong {
    font-size: 33px;
  }

  .tl-kskcase-manifest__grid {
    gap: 50px;
  }

  .tl-kskcase-manifest__quote strong {
    font-size: 44px;
  }

  .tl-kskcase-ecosystem__grid {
    grid-template-columns: 1fr;
  }

  .tl-kskcase-ecosystem__item:last-child {
    grid-column: auto;
  }

  .tl-kskcase-ecosystem__item,
  .tl-kskcase-system-card,
  .tl-kskcase-knowledge-card {
    padding: 22px 20px;
  }

  .tl-kskcase-browser__screen {
    aspect-ratio: 4/3;
  }

  .tl-kskcase-development__item {
    grid-template-columns: 38px 1fr;
    gap: 18px;
  }

  .tl-kskcase-development__item p {
    grid-column: 2;
  }

  .tl-kskcase-mobile__scene {
    min-height: 520px;
  }

  .tl-kskcase-phone {
    width: 185px;
    height: 390px;
  }

  .tl-kskcase-phone--one {transform:translate(-137%,-47%) rotate(-10deg) scale(.78)}
  .tl-kskcase-phone--two {transform:translate(-50%,-52%) scale(.86)}
  .tl-kskcase-phone--three {transform:translate(37%,-47%) rotate(10deg) scale(.78)}

  .tl-kskcase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-kskcase-result__panel h2 {
    font-size: 38px;
  }

  .tl-kskcase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}

/* =========================================================
   TEILIORA — CASE: БИБЛИОТЕКА ЗНАНИЙ КСК
   ========================================================= */

.tl-librarycase {
  --lib-bg: #ffffff;
  --lib-bg-soft: #eef3f8;
  --lib-dark: #082f67;
  --lib-text: #163554;
  --lib-muted: rgba(22,53,84,.64);
  --lib-line: rgba(8,47,103,.13);
  --lib-accent: #00a6df;

  overflow: hidden;
  color: var(--lib-text);
  background: var(--lib-bg);
}

.tl-librarycase img {
  display: block;
  max-width: 100%;
}

.tl-librarycase .tl-section-label {
  color: var(--lib-accent);
}

.tl-librarycase .tl-title {
  color: var(--lib-dark);
}

/* HERO */

.tl-librarycase-hero {
  position: relative;
  min-height: 900px;
  padding-top: 86px;
  overflow: hidden;
  border-bottom: 1px solid var(--lib-line);
  background:
    radial-gradient(circle at 82% 28%, rgba(0,166,223,.1), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f4f8fb 58%, #e6eef6 100%);
}

.tl-librarycase-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8,47,103,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,47,103,.03) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 48%, #000);
  pointer-events: none;
}

.tl-librarycase-hero__container {
  position: relative;
  z-index: 2;
  min-height: calc(900px - 86px);
  padding-top: 40px;
  padding-bottom: 65px;
}

.tl-librarycase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-librarycase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lib-muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-librarycase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--lib-accent);
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-librarycase-back:hover svg {
  transform: translateX(-4px);
}

.tl-librarycase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-librarycase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--lib-line);
  border-radius: 20px;
  color: var(--lib-muted);
  background: rgba(255,255,255,.7);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tl-librarycase-hero__main {
  display: grid;
  grid-template-columns: minmax(430px,.72fr) minmax(620px,1.28fr);
  align-items: center;
  gap: 62px;
  min-height: 720px;
}

.tl-librarycase-hero h1 {
  margin: 0;
  color: var(--lib-dark);
  font-size: clamp(66px,6.8vw,110px);
  line-height: .84;
  font-weight: 300;
  letter-spacing: -.067em;
  text-transform: uppercase;
}

.tl-librarycase-hero h1 em {
  color: var(--lib-accent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

.tl-librarycase-hero__lead {
  max-width: 650px;
  margin: 34px 0 0;
  color: var(--lib-dark);
  font-size: clamp(28px,3vw,48px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-librarycase-hero__description {
  max-width: 580px;
  margin: 25px 0 0;
  color: var(--lib-muted);
  font-size: 15px;
  line-height: 1.72;
}

.tl-librarycase-hero__visual {
  position: relative;
  min-height: 600px;
}

.tl-librarycase-browser {
  overflow: hidden;
  border: 1px solid rgba(8,47,103,.14);
  border-radius: 17px;
  background: #fff;
  box-shadow:
    0 44px 110px rgba(8,47,103,.16),
    0 8px 24px rgba(8,47,103,.06);
}

.tl-librarycase-hero__visual .tl-librarycase-browser {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 770px;
  transform: translate(-50%,-50%) rotate(-2deg);
  animation: tlLibraryBrowser 8s ease-in-out infinite;
}

.tl-librarycase-browser__bar {
  position: relative;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--lib-line);
  background: #f3f7fa;
}

.tl-librarycase-browser__dots {
  position: absolute;
  left: 15px;
  display: flex;
  gap: 6px;
}

.tl-librarycase-browser__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tl-librarycase-browser__dots i:nth-child(1){background:#082f67}
.tl-librarycase-browser__dots i:nth-child(2){background:#00a6df}
.tl-librarycase-browser__dots i:nth-child(3){background:#a9bbcd}

.tl-librarycase-browser__address {
  color: rgba(8,47,103,.4);
  font-size: 8px;
}

.tl-librarycase-browser__screen {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.tl-librarycase-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tl-librarycase-hero__card {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid rgba(8,47,103,.16);
  border-radius: 14px;
  color: var(--lib-dark);
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 35px rgba(8,47,103,.12);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tl-librarycase-hero__card--one {
  top: 65px;
  right: 25px;
  transform: rotate(6deg);
}

.tl-librarycase-hero__card--two {
  left: 15px;
  bottom: 70px;
  transform: rotate(-7deg);
}

.tl-librarycase-hero__card--three {
  right: 95px;
  bottom: 22px;
  transform: rotate(4deg);
}

@keyframes tlLibraryBrowser {
  0%,100% {transform:translate(-50%,-50%) rotate(-2deg) translateY(0)}
  50% {transform:translate(-50%,-50%) rotate(-1deg) translateY(-10px)}
}

/* SHARED HEAD */

.tl-librarycase-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 46px;
}

.tl-librarycase-head > p {
  margin: 0 0 5px;
  color: var(--lib-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* MANIFEST */

.tl-librarycase-manifest {
  background: var(--lib-dark);
}

.tl-librarycase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: end;
  gap: 90px;
}

.tl-librarycase-manifest__quote span {
  color: rgba(255,255,255,.52);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-librarycase-manifest__quote strong {
  display: block;
  margin-top: 25px;
  color: #fff;
  font-size: clamp(50px,5.8vw,92px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-librarycase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.tl-librarycase-manifest__text .tl-section-label {
  color: #6bd5f5;
}

.tl-librarycase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.72;
}

/* SYSTEM */

.tl-librarycase-system,
.tl-librarycase-showcase,
.tl-librarycase-glossary,
.tl-librarycase-result {
  background: #fff;
}

.tl-librarycase-system__grid,
.tl-librarycase-visual__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-librarycase-format,
.tl-librarycase-visual-card,
.tl-librarycase-webinar {
  min-height: 290px;
  padding: 28px;
  border: 1px solid var(--lib-line);
  border-radius: 18px;
  background: #fff;
}

.tl-librarycase-format > span,
.tl-librarycase-visual-card > span,
.tl-librarycase-webinar > span {
  color: var(--lib-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-librarycase-format h3 {
  margin: 90px 0 0;
  color: var(--lib-dark);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.tl-librarycase-format p,
.tl-librarycase-visual-card p,
.tl-librarycase-webinar p {
  margin: 18px 0 0;
  color: var(--lib-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* EDITORIAL */

.tl-librarycase-editorial,
.tl-librarycase-webinars,
.tl-librarycase-visual,
.tl-librarycase-mobile {
  background: var(--lib-bg-soft);
}

.tl-librarycase-editorial__flow {
  display: grid;
  grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr;
  align-items: center;
  gap: 10px;
}

.tl-librarycase-editorial__flow article {
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--lib-line);
  border-radius: 16px;
  background: #fff;
}

.tl-librarycase-editorial__flow article span {
  color: var(--lib-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-librarycase-editorial__flow article strong {
  display: block;
  margin-top: 60px;
  color: var(--lib-dark);
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
}

.tl-librarycase-editorial__flow > i {
  height: 1px;
  background: var(--lib-accent);
}

/* SHOWCASE */

.tl-librarycase-browser--wide {
  width: 100%;
  border-radius: 18px;
}

.tl-librarycase-browser--wide .tl-librarycase-browser__screen {
  aspect-ratio: 16/8.2;
}

/* WEBINARS */

.tl-librarycase-webinars__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-librarycase-webinar strong {
  display: block;
  margin-top: 78px;
  color: var(--lib-dark);
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
}

/* GLOSSARY */

.tl-librarycase-glossary__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 14px;
}

.tl-librarycase-glossary__alphabet,
.tl-librarycase-glossary__example {
  border: 1px solid var(--lib-line);
  border-radius: 18px;
  background: #fff;
}

.tl-librarycase-glossary__alphabet {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 10px;
  padding: 28px;
}

.tl-librarycase-glossary__alphabet span {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lib-line);
  border-radius: 12px;
  color: var(--lib-dark);
  background: var(--lib-bg-soft);
  font-size: 22px;
}

.tl-librarycase-glossary__example {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: var(--lib-dark);
}

.tl-librarycase-glossary__example small {
  color: #6bd5f5;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-librarycase-glossary__example strong {
  margin-top: 14px;
  color: #fff;
  font-size: 54px;
  font-weight: 300;
}

.tl-librarycase-glossary__example p {
  margin: 16px 0 0;
  color: rgba(255,255,255,.64);
  font-size: 14px;
  line-height: 1.65;
}

/* VISUAL */

.tl-librarycase-visual-card {
  min-height: 370px;
}

.tl-librarycase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  margin-top: 38px;
}

.tl-librarycase-palette i {
  display: block;
  flex: 1;
  height: 105px;
  border: 1px solid var(--lib-line);
  border-radius: 9px;
  background: var(--tone);
}

.tl-librarycase-palette i:nth-child(2){height:145px}
.tl-librarycase-palette i:nth-child(3){height:85px}
.tl-librarycase-palette i:nth-child(4){height:125px}

.tl-librarycase-visual-card > strong {
  display: block;
  margin-top: 72px;
  color: var(--lib-dark);
  font-size: clamp(42px,4vw,66px);
  line-height: .87;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-librarycase-modules {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 42px;
}

.tl-librarycase-modules i {
  min-height: 64px;
  border: 1px solid var(--lib-line);
  border-radius: 9px;
  background: #fff;
}

.tl-librarycase-modules i:nth-child(2),
.tl-librarycase-modules i:nth-child(5) {
  background: rgba(0,166,223,.12);
}

/* MOBILE */

.tl-librarycase-mobile__scene {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--lib-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(0,166,223,.12), transparent 30%),
    linear-gradient(145deg, #fff, #dfe9f3);
}

.tl-librarycase-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 245px;
  height: 510px;
  padding: 8px;
  border: 1px solid rgba(8,47,103,.16);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 35px 90px rgba(8,47,103,.18);
}

.tl-librarycase-phone__speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 5px;
  border-radius: 10px;
  background: rgba(8,47,103,.16);
  transform: translateX(-50%);
}

.tl-librarycase-phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
}

.tl-librarycase-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tl-librarycase-phone--one {transform:translate(-155%,-48%) rotate(-10deg)}
.tl-librarycase-phone--two {z-index:3;transform:translate(-50%,-52%)}
.tl-librarycase-phone--three {transform:translate(55%,-48%) rotate(10deg)}

/* RESULT */

.tl-librarycase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--lib-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 42%, rgba(0,166,223,.1), transparent 30%),
    #fff;
}

.tl-librarycase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--lib-dark);
  font-size: clamp(42px,4.5vw,72px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.052em;
  text-transform: uppercase;
}

.tl-librarycase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--lib-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-librarycase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lib-line);
}

.tl-librarycase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--lib-line);
  color: var(--lib-muted);
  font-size: 13px;
}

.tl-librarycase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--lib-accent);
  transform: rotate(45deg);
}

/* NAVIGATION */

.tl-librarycase .tl-case-navigation {
  color: var(--lib-text);
  background: #fff;
}

.tl-librarycase .tl-case-navigation__inner {
  padding: 42px 28px;
  border: 1px solid var(--lib-line);
  border-radius: 18px;
  background: var(--lib-bg-soft);
}

.tl-librarycase .tl-case-navigation__project {
  color: var(--lib-muted);
}

.tl-librarycase .tl-case-navigation__project:hover,
.tl-librarycase .tl-case-navigation__counter {
  color: var(--lib-dark);
}

.tl-librarycase .tl-case-navigation__label {
  color: rgba(22,53,84,.45) !important;
}

.tl-librarycase .tl-case-navigation__direction {
  color: var(--lib-accent);
}

.tl-librarycase .tl-case-navigation__dot {
  border-color: rgba(8,47,103,.2);
}

.tl-librarycase .tl-case-navigation__dot.is-active {
  border-color: var(--lib-accent);
  background: var(--lib-accent);
  box-shadow: 0 0 12px rgba(0,166,223,.2);
}

/* TABLET */

@media (max-width: 1050px) {
  .tl-librarycase-hero__main,
  .tl-librarycase-manifest__grid,
  .tl-librarycase-head,
  .tl-librarycase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-librarycase-hero__visual {
    min-height: 580px;
  }

  .tl-librarycase-system__grid,
  .tl-librarycase-webinars__grid,
  .tl-librarycase-visual__grid {
    grid-template-columns: 1fr;
  }

  .tl-librarycase-editorial__flow {
    grid-template-columns: 1fr;
  }

  .tl-librarycase-editorial__flow > i {
    width: 1px;
    height: 28px;
    margin: 0 auto;
  }

  .tl-librarycase-glossary__panel {
    grid-template-columns: 1fr;
  }

  .tl-librarycase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-librarycase-hero {
    min-height: auto;
    padding-top: 72px;
  }

  .tl-librarycase-hero__container {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .tl-librarycase-hero__top {
    align-items: flex-start;
  }

  .tl-librarycase-hero__facts {
    max-width: 180px;
  }

  .tl-librarycase-hero__main {
    gap: 28px;
    min-height: auto;
    padding-top: 50px;
  }

  .tl-librarycase-hero h1 {
    font-size: clamp(54px,16vw,76px);
  }

  .tl-librarycase-hero__lead {
    font-size: 29px;
  }

  .tl-librarycase-hero__visual {
    min-height: 360px;
  }

  .tl-librarycase-hero__visual .tl-librarycase-browser {
    width: 560px;
    transform: translate(-50%,-50%) rotate(-2deg) scale(.63);
  }

  @keyframes tlLibraryBrowser {
    0%,100% {transform:translate(-50%,-50%) rotate(-2deg) scale(.63) translateY(0)}
    50% {transform:translate(-50%,-50%) rotate(-1deg) scale(.63) translateY(-8px)}
  }

  .tl-librarycase-hero__card {
    min-height: 42px;
    padding: 0 12px;
    font-size: 8px;
  }

  .tl-librarycase-manifest__grid {
    gap: 50px;
  }

  .tl-librarycase-manifest__quote strong {
    font-size: 44px;
  }

  .tl-librarycase-format,
  .tl-librarycase-visual-card,
  .tl-librarycase-webinar {
    min-height: 280px;
    padding: 22px 20px;
  }

  .tl-librarycase-browser--wide .tl-librarycase-browser__screen {
    aspect-ratio: 4/3;
  }

  .tl-librarycase-glossary__alphabet {
    grid-template-columns: repeat(3,1fr);
    padding: 20px;
  }

  .tl-librarycase-mobile__scene {
    min-height: 520px;
  }

  .tl-librarycase-phone {
    width: 185px;
    height: 390px;
  }

  .tl-librarycase-phone--one {transform:translate(-137%,-47%) rotate(-10deg) scale(.78)}
  .tl-librarycase-phone--two {transform:translate(-50%,-52%) scale(.86)}
  .tl-librarycase-phone--three {transform:translate(37%,-47%) rotate(10deg) scale(.78)}

  .tl-librarycase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-librarycase-result__panel h2 {
    font-size: 38px;
  }

  .tl-librarycase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}

/* =========================================================
   TEILIORA — CASE: ПРОУЮТ
   ========================================================= */

.tl-proyutcase {
  --pro-bg: #f6f1e9;
  --pro-paper: #fffaf2;
  --pro-dark: #343434;
  --pro-text: #40403c;
  --pro-muted: rgba(64,64,60,.64);
  --pro-line: rgba(52,52,52,.13);
  --pro-accent: #f4511e;
  --pro-green: #7f8f5c;
  --pro-sand: #cda364;

  overflow: hidden;
  color: var(--pro-text);
  background: var(--pro-bg);
}

.tl-proyutcase img {
  display: block;
  max-width: 100%;
}

.tl-proyutcase .tl-section-label {
  color: var(--pro-accent);
}

.tl-proyutcase .tl-title {
  color: var(--pro-dark);
}

/* HERO */

.tl-proyutcase-hero {
  position: relative;
  min-height: 900px;
  padding-top: 86px;
  overflow: hidden;
  background: #343434;
}

.tl-proyutcase-hero__media,
.tl-proyutcase-hero__overlay {
  position: absolute;
  inset: 0;
}

.tl-proyutcase-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .28;
  transform: scale(1.03);
}

.tl-proyutcase-hero__overlay {
  background:
    linear-gradient(90deg, rgba(31,31,31,.94) 0%, rgba(31,31,31,.76) 40%, rgba(31,31,31,.32) 75%, rgba(31,31,31,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.4));
}

.tl-proyutcase-hero__container {
  position: relative;
  z-index: 2;
  min-height: calc(900px - 86px);
  padding-top: 40px;
  padding-bottom: 60px;
}

.tl-proyutcase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-proyutcase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.7);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-proyutcase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--pro-accent);
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-proyutcase-back:hover svg {
  transform: translateX(-4px);
}

.tl-proyutcase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-proyutcase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.035);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tl-proyutcase-hero__main {
  display: grid;
  grid-template-columns: minmax(420px,.72fr) minmax(620px,1.28fr);
  align-items: center;
  gap: 62px;
  min-height: 720px;
}

.tl-proyutcase-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(86px,9vw,145px);
  line-height: .8;
  font-weight: 300;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.tl-proyutcase-hero__lead {
  max-width: 650px;
  margin: 34px 0 0;
  color: var(--pro-accent);
  font-size: clamp(30px,3.3vw,52px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-proyutcase-hero__description {
  max-width: 590px;
  margin: 25px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.72;
}

.tl-proyutcase-hero__visual {
  position: relative;
  min-height: 600px;
}

.tl-proyutcase-browser {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 44px 110px rgba(0,0,0,.34);
}

.tl-proyutcase-hero__visual .tl-proyutcase-browser {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 760px;
  transform: translate(-50%,-50%) rotate(-2deg);
  animation: tlProBrowser 8s ease-in-out infinite;
}

.tl-proyutcase-browser__bar {
  position: relative;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--pro-line);
  background: #f3efe8;
}

.tl-proyutcase-browser__dots {
  position: absolute;
  left: 15px;
  display: flex;
  gap: 6px;
}

.tl-proyutcase-browser__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tl-proyutcase-browser__dots i:nth-child(1){background:#f4511e}
.tl-proyutcase-browser__dots i:nth-child(2){background:#7f8f5c}
.tl-proyutcase-browser__dots i:nth-child(3){background:#343434}

.tl-proyutcase-browser__address {
  color: rgba(52,52,52,.4);
  font-size: 8px;
}

.tl-proyutcase-browser__screen {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.tl-proyutcase-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@keyframes tlProBrowser {
  0%,100% {transform:translate(-50%,-50%) rotate(-2deg) translateY(0)}
  50% {transform:translate(-50%,-50%) rotate(-1deg) translateY(-10px)}
}

/* SHARED HEAD */

.tl-proyutcase-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 46px;
}

.tl-proyutcase-head > p {
  margin: 0 0 5px;
  color: var(--pro-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* MANIFEST */

.tl-proyutcase-manifest {
  background: var(--pro-accent);
}

.tl-proyutcase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: end;
  gap: 90px;
}

.tl-proyutcase-manifest__quote span {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-proyutcase-manifest__quote strong {
  display: block;
  margin-top: 25px;
  color: #fff;
  font-size: clamp(50px,5.8vw,92px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-proyutcase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.28);
}

.tl-proyutcase-manifest__text .tl-section-label {
  color: rgba(255,255,255,.72);
}

.tl-proyutcase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.72;
}

/* CONCEPTS */

.tl-proyutcase-concepts,
.tl-proyutcase-form,
.tl-proyutcase-result {
  background: var(--pro-paper);
}

.tl-proyutcase-concepts__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-proyutcase-concept {
  overflow: hidden;
  border: 1px solid var(--pro-line);
  border-radius: 20px;
  background: #fff;
}

.tl-proyutcase-concept__visual {
  height: 340px;
  overflow: hidden;
}

.tl-proyutcase-concept__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--tl-ease);
}

.tl-proyutcase-concept:hover .tl-proyutcase-concept__visual img {
  transform: scale(1.04);
}

.tl-proyutcase-concept__content {
  padding: 24px;
}

.tl-proyutcase-concept__content > span {
  color: var(--pro-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-proyutcase-concept__content h3 {
  margin: 15px 0 0;
  color: var(--pro-dark);
  font-size: 27px;
  line-height: 1;
  font-weight: 400;
}

.tl-proyutcase-concept__content p {
  margin: 15px 0 0;
  color: var(--pro-muted);
  font-size: 14px;
  line-height: 1.65;
}

.tl-proyutcase-concept__content a {
  display: inline-flex;
  margin-top: 22px;
  color: var(--pro-dark);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* LIVE */

.tl-proyutcase-live,
.tl-proyutcase-support {
  background: var(--pro-bg);
}

.tl-proyutcase-live__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.tl-proyutcase-live__item {
  min-height: 270px;
  padding: 28px;
  border: 1px solid var(--pro-line);
  border-radius: 18px;
  background: #fff;
}

.tl-proyutcase-live__item > span,
.tl-proyutcase-support__item > span {
  color: var(--pro-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-proyutcase-live__item h3 {
  margin: 90px 0 0;
  color: var(--pro-dark);
  font-size: 29px;
  line-height: 1;
  font-weight: 400;
}

.tl-proyutcase-live__item p {
  margin: 18px 0 0;
  color: var(--pro-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* FORM */

.tl-proyutcase-form__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 14px;
}

.tl-proyutcase-form__steps,
.tl-proyutcase-form__meta {
  border: 1px solid var(--pro-line);
  border-radius: 18px;
  background: #fff;
}

.tl-proyutcase-form__steps {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 10px;
  padding: 28px;
}

.tl-proyutcase-form__steps span {
  display: flex;
  min-height: 90px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--pro-line);
  border-radius: 12px;
  color: var(--pro-muted);
  background: var(--pro-bg);
  font-size: 10px;
  text-align: center;
}

.tl-proyutcase-form__meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: var(--pro-dark);
}

.tl-proyutcase-form__meta strong {
  color: #fff;
  font-size: 32px;
  line-height: 1;
  font-weight: 300;
}

.tl-proyutcase-form__meta p {
  margin: 16px 0 0;
  color: rgba(255,255,255,.64);
  font-size: 14px;
  line-height: 1.65;
}

/* SUPPORT */

.tl-proyutcase-support__timeline {
  border-top: 1px solid var(--pro-line);
}

.tl-proyutcase-support__item {
  display: grid;
  grid-template-columns: 70px minmax(220px,.42fr) minmax(0,1fr);
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--pro-line);
}

.tl-proyutcase-support__item h3 {
  margin: 0;
  color: var(--pro-dark);
  font-size: 28px;
  font-weight: 400;
}

.tl-proyutcase-support__item p {
  margin: 0;
  color: var(--pro-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* RESULT */

.tl-proyutcase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--pro-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 42%, rgba(244,81,30,.1), transparent 30%),
    #fff;
}

.tl-proyutcase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--pro-dark);
  font-size: clamp(42px,4.5vw,72px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.052em;
  text-transform: uppercase;
}

.tl-proyutcase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--pro-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-proyutcase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pro-line);
}

.tl-proyutcase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--pro-line);
  color: var(--pro-muted);
  font-size: 13px;
}

.tl-proyutcase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--pro-accent);
  transform: rotate(45deg);
}

/* NAVIGATION */

.tl-proyutcase .tl-case-navigation {
  color: var(--pro-text);
  background: var(--pro-paper);
}

.tl-proyutcase .tl-case-navigation__inner {
  padding: 42px 28px;
  border: 1px solid var(--pro-line);
  border-radius: 18px;
  background: var(--pro-bg);
}

.tl-proyutcase .tl-case-navigation__project {
  color: var(--pro-muted);
}

.tl-proyutcase .tl-case-navigation__project:hover,
.tl-proyutcase .tl-case-navigation__counter {
  color: var(--pro-dark);
}

.tl-proyutcase .tl-case-navigation__label {
  color: rgba(64,64,60,.45) !important;
}

.tl-proyutcase .tl-case-navigation__direction {
  color: var(--pro-accent);
}

.tl-proyutcase .tl-case-navigation__dot {
  border-color: rgba(52,52,52,.2);
}

.tl-proyutcase .tl-case-navigation__dot.is-active {
  border-color: var(--pro-accent);
  background: var(--pro-accent);
  box-shadow: 0 0 12px rgba(244,81,30,.2);
}

/* TABLET */

@media (max-width: 1050px) {
  .tl-proyutcase-hero__main,
  .tl-proyutcase-manifest__grid,
  .tl-proyutcase-head,
  .tl-proyutcase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-proyutcase-hero__visual {
    min-height: 580px;
  }

  .tl-proyutcase-concepts__grid {
    grid-template-columns: 1fr;
  }

  .tl-proyutcase-form__panel {
    grid-template-columns: 1fr;
  }

  .tl-proyutcase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.28);
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-proyutcase-hero {
    min-height: auto;
    padding-top: 72px;
  }

  .tl-proyutcase-hero__container {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .tl-proyutcase-hero__top {
    align-items: flex-start;
  }

  .tl-proyutcase-hero__facts {
    max-width: 180px;
  }

  .tl-proyutcase-hero__main {
    gap: 28px;
    min-height: auto;
    padding-top: 50px;
  }

  .tl-proyutcase-hero h1 {
    font-size: clamp(70px,22vw,98px);
  }

  .tl-proyutcase-hero__lead {
    font-size: 29px;
  }

  .tl-proyutcase-hero__visual {
    min-height: 360px;
  }

  .tl-proyutcase-hero__visual .tl-proyutcase-browser {
    width: 560px;
    transform: translate(-50%,-50%) rotate(-2deg) scale(.63);
  }

  @keyframes tlProBrowser {
    0%,100% {transform:translate(-50%,-50%) rotate(-2deg) scale(.63) translateY(0)}
    50% {transform:translate(-50%,-50%) rotate(-1deg) scale(.63) translateY(-8px)}
  }

  .tl-proyutcase-manifest__grid {
    gap: 50px;
  }

  .tl-proyutcase-manifest__quote strong {
    font-size: 44px;
  }

  .tl-proyutcase-live__grid {
    grid-template-columns: 1fr;
  }

  .tl-proyutcase-concept__visual {
    height: 280px;
  }

  .tl-proyutcase-form__steps {
    grid-template-columns: 1fr;
  }

  .tl-proyutcase-support__item {
    grid-template-columns: 38px 1fr;
    gap: 18px;
  }

  .tl-proyutcase-support__item p {
    grid-column: 2;
  }

  .tl-proyutcase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-proyutcase-result__panel h2 {
    font-size: 38px;
  }

  .tl-proyutcase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}

/* =========================================================
   TEILIORA — CASE: ГК АРТИ / PRINTXPERT
   ========================================================= */

.tl-articase {
  --arti-bg: #f5f5f7;
  --arti-paper: #ffffff;
  --arti-dark: #2f3138;
  --arti-text: #3c3e45;
  --arti-muted: rgba(60,62,69,.64);
  --arti-line: rgba(47,49,56,.13);
  --arti-accent: #e51b23;

  overflow: hidden;
  color: var(--arti-text);
  background: var(--arti-bg);
}

.tl-articase img {
  display: block;
  max-width: 100%;
}

.tl-articase .tl-section-label {
  color: var(--arti-accent);
}

.tl-articase .tl-title {
  color: var(--arti-dark);
}

/* HERO */

.tl-articase-hero {
  position: relative;
  min-height: 900px;
  padding-top: 86px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(229,27,35,.1), transparent 28%),
    linear-gradient(135deg, #f8f8f9 0%, #ececef 58%, #dfe0e4 100%);
}

.tl-articase-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(47,49,56,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,49,56,.03) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 50%, #000);
  pointer-events: none;
}

.tl-articase-hero__container {
  position: relative;
  z-index: 2;
  min-height: calc(900px - 86px);
  padding-top: 40px;
  padding-bottom: 60px;
}

.tl-articase-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tl-articase-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--arti-muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-articase-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--arti-accent);
  stroke-width: 1.5;
  transition: transform .3s var(--tl-ease);
}

.tl-articase-back:hover svg {
  transform: translateX(-4px);
}

.tl-articase-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tl-articase-hero__facts span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--arti-line);
  border-radius: 20px;
  color: var(--arti-muted);
  background: rgba(255,255,255,.72);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tl-articase-hero__main {
  display: grid;
  grid-template-columns: minmax(430px,.72fr) minmax(620px,1.28fr);
  align-items: center;
  gap: 64px;
  min-height: 720px;
}

.tl-articase-hero h1 {
  margin: 0;
  color: var(--arti-dark);
  font-size: clamp(68px,7vw,112px);
  line-height: .84;
  font-weight: 300;
  letter-spacing: -.067em;
  text-transform: uppercase;
}

.tl-articase-hero h1 em {
  color: var(--arti-accent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

.tl-articase-hero__lead {
  max-width: 680px;
  margin: 34px 0 0;
  color: var(--arti-dark);
  font-size: clamp(28px,3vw,48px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.tl-articase-hero__description {
  max-width: 590px;
  margin: 25px 0 0;
  color: var(--arti-muted);
  font-size: 15px;
  line-height: 1.72;
}

.tl-articase-hero__visual {
  display: flex;
  min-height: 620px;
  align-items: center;
  justify-content: center;
}

.tl-articase-hero__visual img {
  width: 100%;
  filter: drop-shadow(0 35px 55px rgba(47,49,56,.18));
}

/* SHARED HEAD */

.tl-articase-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.44fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 46px;
}

.tl-articase-head > p {
  margin: 0 0 5px;
  color: var(--arti-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* MANIFEST */

.tl-articase-manifest {
  background: var(--arti-dark);
}

.tl-articase-manifest__grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: end;
  gap: 90px;
}

.tl-articase-manifest__quote span {
  color: rgba(255,255,255,.52);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-articase-manifest__quote strong {
  display: block;
  margin-top: 25px;
  color: #fff;
  font-size: clamp(50px,5.8vw,92px);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.tl-articase-manifest__text {
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.tl-articase-manifest__text .tl-section-label {
  color: #ff6b70;
}

.tl-articase-manifest__text > p:not(.tl-section-label) {
  margin: 22px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.72;
}

/* PRODUCT */

.tl-articase-product,
.tl-articase-identity,
.tl-articase-result {
  background: var(--arti-paper);
}

.tl-articase-product__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.tl-articase-product__item,
.tl-articase-system-card,
.tl-articase-benefit,
.tl-articase-identity-card {
  min-height: 290px;
  padding: 28px;
  border: 1px solid var(--arti-line);
  border-radius: 18px;
  background: #fff;
}

.tl-articase-product__item > span,
.tl-articase-system-card > span,
.tl-articase-benefit > span,
.tl-articase-identity-card > span {
  color: var(--arti-accent);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tl-articase-product__item h3 {
  margin: 92px 0 0;
  color: var(--arti-dark);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.tl-articase-product__item p,
.tl-articase-system-card p,
.tl-articase-benefit p,
.tl-articase-identity-card p {
  margin: 18px 0 0;
  color: var(--arti-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* SHOWCASE */

.tl-articase-showcase,
.tl-articase-benefits,
.tl-articase-system,
.tl-articase-mobile {
  background: var(--arti-bg);
}

.tl-articase-browser {
  overflow: hidden;
  border: 1px solid var(--arti-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(47,49,56,.14);
}

.tl-articase-browser__bar {
  position: relative;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--arti-line);
  background: #f1f1f3;
}

.tl-articase-browser__dots {
  position: absolute;
  left: 15px;
  display: flex;
  gap: 6px;
}

.tl-articase-browser__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tl-articase-browser__dots i:nth-child(1){background:#e51b23}
.tl-articase-browser__dots i:nth-child(2){background:#84868d}
.tl-articase-browser__dots i:nth-child(3){background:#2f3138}

.tl-articase-browser__address {
  color: rgba(47,49,56,.42);
  font-size: 8px;
}

.tl-articase-browser__screen {
  overflow: hidden;
  min-height: 650px;
  padding: 30px;
  background: #111;
}

.tl-articase-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* BENEFITS */

.tl-articase-benefits__grid,
.tl-articase-identity__grid,
.tl-articase-system__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tl-articase-benefit strong,
.tl-articase-identity-card strong {
  display: block;
  margin-top: 74px;
  color: var(--arti-dark);
  font-size: 29px;
  line-height: 1;
  font-weight: 400;
}

/* SYSTEM */

.tl-articase-system-card {
  min-height: 370px;
}

.tl-articase-palette {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 180px;
  margin-top: 38px;
}

.tl-articase-palette i {
  display: block;
  flex: 1;
  height: 105px;
  border: 1px solid var(--arti-line);
  border-radius: 9px;
  background: var(--tone);
}

.tl-articase-palette i:nth-child(2){height:145px}
.tl-articase-palette i:nth-child(3){height:85px}
.tl-articase-palette i:nth-child(4){height:125px}

.tl-articase-system-card > strong {
    display: block;
    margin-top: 72px;
    color: var(--arti-dark);

    font-size: clamp(34px, 3vw, 56px);

    line-height: 0.92;

    font-weight: 300;

    letter-spacing: -0.04em;

    text-transform: uppercase;
}

.tl-articase-modules {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 42px;
}

.tl-articase-modules i {
  min-height: 64px;
  border: 1px solid var(--arti-line);
  border-radius: 9px;
  background: #fff;
}

.tl-articase-modules i:nth-child(2),
.tl-articase-modules i:nth-child(5) {
  background: rgba(229,27,35,.1);
}

/* MOBILE */

.tl-articase-mobile__scene {
  min-height: 600px;
  padding: 60px;
  overflow: hidden;
  border: 1px solid var(--arti-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(229,27,35,.1), transparent 30%),
    linear-gradient(145deg, #fff, #e1e2e6);
}

.tl-articase-mobile__scene img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* RESULT */

.tl-articase-result__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  align-items: center;
  gap: 70px;
  padding: 56px 50px;
  border: 1px solid var(--arti-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 42%, rgba(229,27,35,.09), transparent 30%),
    #fff;
}

.tl-articase-result__panel h2 {
  max-width: 900px;
  margin: 0;
  color: var(--arti-dark);
  font-size: clamp(42px,4.5vw,72px);
  line-height: .96;
  font-weight: 300;
  letter-spacing: -.052em;
  text-transform: uppercase;
}

.tl-articase-result__panel > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--arti-muted);
  font-size: 15px;
  line-height: 1.7;
}

.tl-articase-result__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--arti-line);
}

.tl-articase-result__panel li {
  position: relative;
  padding: 17px 0 17px 27px;
  border-bottom: 1px solid var(--arti-line);
  color: var(--arti-muted);
  font-size: 13px;
}

.tl-articase-result__panel li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--arti-accent);
  transform: rotate(45deg);
}

/* NAVIGATION */

.tl-articase .tl-case-navigation {
  color: var(--arti-text);
  background: #fff;
}

.tl-articase .tl-case-navigation__inner {
  padding: 42px 28px;
  border: 1px solid var(--arti-line);
  border-radius: 18px;
  background: var(--arti-bg);
}

.tl-articase .tl-case-navigation__project {
  color: var(--arti-muted);
}

.tl-articase .tl-case-navigation__project:hover,
.tl-articase .tl-case-navigation__counter {
  color: var(--arti-dark);
}

.tl-articase .tl-case-navigation__label {
  color: rgba(60,62,69,.45) !important;
}

.tl-articase .tl-case-navigation__direction {
  color: var(--arti-accent);
}

.tl-articase .tl-case-navigation__dot {
  border-color: rgba(47,49,56,.2);
}

.tl-articase .tl-case-navigation__dot.is-active {
  border-color: var(--arti-accent);
  background: var(--arti-accent);
  box-shadow: 0 0 12px rgba(229,27,35,.2);
}

/* TABLET */

@media (max-width: 1050px) {
  .tl-articase-hero__main,
  .tl-articase-manifest__grid,
  .tl-articase-head,
  .tl-articase-result__panel {
    grid-template-columns: 1fr;
  }

  .tl-articase-hero__visual {
    min-height: 520px;
  }

  .tl-articase-benefits__grid,
  .tl-articase-identity__grid,
  .tl-articase-system__grid {
    grid-template-columns: 1fr;
  }

  .tl-articase-manifest__text {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
  }
}

/* MOBILE */

@media (max-width: 767px) {
  .tl-articase-hero {
    min-height: auto;
    padding-top: 72px;
  }

  .tl-articase-hero__container {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .tl-articase-hero__top {
    align-items: flex-start;
  }

  .tl-articase-hero__facts {
    max-width: 180px;
  }

  .tl-articase-hero__main {
    gap: 28px;
    min-height: auto;
    padding-top: 50px;
  }

  .tl-articase-hero h1 {
    font-size: clamp(54px,16vw,76px);
  }

  .tl-articase-hero__lead {
    font-size: 29px;
  }

  .tl-articase-hero__visual {
    min-height: 340px;
  }

  .tl-articase-manifest__grid {
    gap: 50px;
  }

  .tl-articase-manifest__quote strong {
    font-size: 44px;
  }

  .tl-articase-product__grid {
    grid-template-columns: 1fr;
  }

  .tl-articase-product__item,
  .tl-articase-system-card,
  .tl-articase-benefit,
  .tl-articase-identity-card {
    min-height: 280px;
    padding: 22px 20px;
  }

  .tl-articase-browser__screen {
    min-height: 320px;
    padding: 16px;
  }

  .tl-articase-mobile__scene {
    min-height: 350px;
    padding: 20px;
  }

  .tl-articase-result__panel {
    gap: 38px;
    padding: 30px 21px;
  }

  .tl-articase-result__panel h2 {
    font-size: 38px;
  }

  .tl-articase .tl-case-navigation__inner {
    padding: 28px 18px;
    border-radius: 14px;
  }
}