/* =========================================================
   TWEETLIX — GLOBAL HEADER + FOOTER
   FILE: assets/css/header-footer.css

   UNIQUE NAMESPACES:
   .twl-site-header*
   .twl-site-footer*

   Не использует классы главной:
   .container
   .btn
   .mono
   .reveal
   ========================================================= */


/* =========================================================
   HEADER
   ========================================================= */

.twl-site-header {
  --twl-hf-bg: rgba(3, 4, 12, 0.76);
  --twl-hf-bg-solid: #060712;
  --twl-hf-border: rgba(151, 163, 255, 0.16);
  --twl-hf-text: var(--text-primary, #f7f8ff);
  --twl-hf-text-secondary: var(--text-secondary, #b0b6cf);
  --twl-hf-muted: var(--text-muted, #747c9c);
  --twl-hf-blue: var(--accent-blue, #6473ff);
  --twl-hf-violet: var(--accent-violet, #7768ff);
  --twl-hf-lavender: var(--accent-lavender, #bbc2ff);

  position: sticky;
  z-index: 10000;
  top: 0;

  width: 100%;

  border-bottom: 1px solid rgba(151, 163, 255, 0.08);

  background:
    linear-gradient(
      180deg,
      rgba(4, 5, 15, 0.88),
      rgba(4, 5, 15, 0.68)
    );

  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);

  transition:
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}


.twl-site-header.is-scrolled {
  border-bottom-color: rgba(151, 163, 255, 0.16);

  background:
    rgba(4, 5, 15, 0.91);

  box-shadow:
    0 12px 36px
    rgba(0, 0, 0, 0.18);
}



/* =========================================================
   HEADER INNER
   ========================================================= */

.twl-site-header__inner {
  width:
    min(
      calc(100% - 48px),
      1400px
    );

  min-height: 76px;

  margin: 0 auto;

  display: grid;

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

  gap: 28px;

  align-items: center;
}


/* =========================================================
   BRAND
   ========================================================= */

.twl-site-header__brand {
  display: inline-flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 1px;

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

  text-decoration: none;

  white-space: nowrap;
}


.twl-site-header__brand-name {
  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 30px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.045em;

  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #bbc2ff 62%,
      #7f8bff 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


.twl-site-header__brand-meta {
  color: #717a9d;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 7px;

  line-height: 1;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.twl-site-header__nav {
  min-width: 0;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: clamp(14px, 1.7vw, 28px);
}


.twl-site-header__nav-link {
  position: relative;

  padding: 28px 0;

  color: #9ba3c1;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 12px;

  font-weight: 500;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  transition:
    color 160ms ease;
}


.twl-site-header__nav-link::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 19px;

  width: 0;
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      var(--twl-hf-blue),
      var(--twl-hf-lavender)
    );

  transition:
    width 180ms ease;
}


.twl-site-header__nav-link:hover,
.twl-site-header__nav-link:focus-visible {
  color: var(--twl-hf-text);
}


.twl-site-header__nav-link:hover::after,
.twl-site-header__nav-link:focus-visible::after {
  width: 100%;
}


/* =========================================================
   ALL SECTIONS DROPDOWN
   ========================================================= */

.twl-site-header__sections {
  position: relative;
}


.twl-site-header__sections > summary {
  list-style: none;
}


.twl-site-header__sections > summary::-webkit-details-marker {
  display: none;
}


.twl-site-header__sections-toggle {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 11px 12px;

  border:
    1px solid
    rgba(151, 163, 255, 0.14);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.018);

  color: #a6aec9;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 11px;

  font-weight: 500;

  cursor: pointer;

  user-select: none;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}


.twl-site-header__sections-toggle:hover,
.twl-site-header__sections-toggle:focus-visible,
.twl-site-header__sections[open]
.twl-site-header__sections-toggle {
  color: var(--twl-hf-text);

  border-color:
    rgba(187, 194, 255, 0.3);

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


.twl-site-header__sections-toggle:focus-visible {
  outline:
    2px solid
    var(--twl-hf-lavender);

  outline-offset: 3px;
}


.twl-site-header__sections-toggle svg {
  width: 14px;
  height: 14px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 160ms ease;
}


.twl-site-header__sections[open]
.twl-site-header__sections-toggle svg {
  transform: rotate(180deg);
}


.twl-site-header__sections-panel {
  position: absolute;

  top: calc(100% + 12px);
  right: 0;

  width: 330px;

  display: grid;

  gap: 3px;

  padding: 14px;

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

  border-radius: 16px;

  background:
    rgba(7, 9, 22, 0.98);

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.42);

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


.twl-site-header__sections-code {
  display: block;

  padding: 5px 8px 10px;

  color: #68718f;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  letter-spacing: 0.12em;
}


.twl-site-header__sections-panel a {
  display: grid;

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

  gap: 8px;

  align-items: center;

  padding: 10px 9px;

  border-radius: 9px;

  color: #aab1c9;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 11px;

  font-weight: 500;

  line-height: 1.35;

  text-decoration: none;

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


.twl-site-header__sections-panel a span {
  color: #606a92;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;
}


.twl-site-header__sections-panel a:hover,
.twl-site-header__sections-panel a:focus-visible {
  outline: none;

  color: #ffffff;

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


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

.twl-site-header__contact {
  min-height: 42px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding: 0 16px;

  border:
    1px solid
    rgba(187, 194, 255, 0.25);

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      rgba(100, 115, 255, 0.94),
      rgba(119, 104, 255, 0.94)
    );

  color: #ffffff;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 12px;

  font-weight: 600;

  text-decoration: none;

  white-space: nowrap;

  box-shadow:
    0 8px 24px
    rgba(85, 82, 220, 0.16);

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


.twl-site-header__contact:hover {
  transform: translateY(-1px);

  box-shadow:
    0 12px 30px
    rgba(85, 82, 220, 0.25);
}


.twl-site-header__contact:focus-visible {
  outline:
    2px solid
    var(--twl-hf-lavender);

  outline-offset: 3px;
}


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

.twl-site-header__mobile {
  display: none;

  position: relative;
}


.twl-site-header__mobile > summary {
  list-style: none;
}


.twl-site-header__mobile > summary::-webkit-details-marker {
  display: none;
}


.twl-site-header__mobile-toggle {
  width: 44px;
  height: 42px;

  display: grid;

  place-items: center;

  align-content: center;

  gap: 6px;

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

  border-radius: 11px;

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

  cursor: pointer;
}


.twl-site-header__mobile-toggle span {
  width: 18px;
  height: 1px;

  display: block;

  background: #dce0ff;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}


.twl-site-header__mobile[open]
.twl-site-header__mobile-toggle span:first-child {
  transform:
    translateY(3.5px)
    rotate(45deg);
}


.twl-site-header__mobile[open]
.twl-site-header__mobile-toggle span:last-child {
  transform:
    translateY(-3.5px)
    rotate(-45deg);
}


.twl-site-header__mobile-panel {
  position: fixed;

  z-index: 10001;

  top: 76px;
  left: 0;
  right: 0;

  max-height:
    calc(100vh - 76px);

  overflow-y: auto;

  padding:
    24px
    max(20px, calc((100vw - 1400px) / 2));

  border-top:
    1px solid
    rgba(151, 163, 255, 0.12);

  border-bottom:
    1px solid
    rgba(151, 163, 255, 0.12);

  background:
    rgba(4, 5, 15, 0.985);

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

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


.twl-site-header__mobile-code {
  display: block;

  margin-bottom: 14px;

  color: #66708f;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  letter-spacing: 0.12em;
}


.twl-site-header__mobile-nav {
  display: grid;
}


.twl-site-header__mobile-nav a {
  display: flex;

  align-items: center;

  min-height: 46px;

  border-bottom:
    1px solid
    rgba(151, 163, 255, 0.08);

  color: #c4c9dc;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 14px;

  font-weight: 500;

  text-decoration: none;
}


.twl-site-header__mobile-nav a:hover,
.twl-site-header__mobile-nav a:focus-visible {
  color: #ffffff;
}


.twl-site-header__mobile-contact {
  min-height: 50px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-top: 20px;

  padding: 0 17px;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #6473ff,
      #7768ff
    );

  color: #ffffff;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;
}


/* =========================================================
   ANCHOR OFFSET FOR STICKY HEADER
   ========================================================= */

#hero,
#services,
#geography,
#cases,
#solutions,
#why-us,
#team,
#process,
#project-scenarios,
#technologies,
#faq,
#start-project {
    scroll-margin-top: 6px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.twl-site-footer {
  --twl-footer-text: var(--text-primary, #f7f8ff);
  --twl-footer-secondary: var(--text-secondary, #b0b6cf);
  --twl-footer-muted: var(--text-muted, #747c9c);
  --twl-footer-blue: var(--accent-blue, #6473ff);
  --twl-footer-lavender: var(--accent-lavender, #bbc2ff);

  position: relative;

  overflow: hidden;

  border-top:
    1px solid
    rgba(151, 163, 255, 0.12);

  background:
    radial-gradient(
      ellipse 56% 130% at 15% 100%,
      rgba(100, 115, 255, 0.07),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #04050d,
      #020309
    );
}


.twl-site-footer::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.14;

  background-image:
    linear-gradient(
      rgba(119, 129, 215, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(119, 129, 215, 0.045) 1px,
      transparent 1px
    );

  background-size:
    52px 52px;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000,
      transparent 60%
    );

  mask-image:
    linear-gradient(
      90deg,
      #000,
      transparent 60%
    );
}


.twl-site-footer__inner {
  position: relative;

  z-index: 1;

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

  margin: 0 auto;

  padding:
    clamp(70px, 7vw, 104px)
    0
    24px;
}


/* =========================================================
   FOOTER TOP
   ========================================================= */

.twl-site-footer__top {
  display: grid;

  grid-template-columns:
    minmax(260px, 0.9fr)
    minmax(420px, 1.25fr)
    minmax(230px, 0.65fr);

  gap:
    clamp(44px, 6vw, 90px);

  align-items: start;
}


/* =========================================================
   FOOTER BRAND
   ========================================================= */

.twl-site-footer__brand {
  max-width: 380px;
}


.twl-site-footer__brand-link {
  display: inline-block;

  color: #ffffff;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

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

  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.055em;

  text-decoration: none;
}


.twl-site-footer__brand-code {
  margin: 12px 0 0;

  color: #707a9d;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  letter-spacing: 0.12em;
}


.twl-site-footer__brand-text {
  max-width: 360px;

  margin: 26px 0 0;

  color: #969eb9;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================================
   FOOTER NAV
   ========================================================= */

.twl-site-footer__nav {
  display: grid;

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

  gap: 34px;
}


.twl-site-footer__nav-column {
  display: grid;

  align-content: start;

  gap: 12px;
}


.twl-site-footer__nav-title {
  display: block;

  margin-bottom: 5px;

  color: #676f8f;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.twl-site-footer__nav-column a {
  width: fit-content;

  color: #aeb5cb;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 12px;

  line-height: 1.45;

  text-decoration: none;

  transition:
    color 150ms ease,
    transform 150ms ease;
}


.twl-site-footer__nav-column a:hover,
.twl-site-footer__nav-column a:focus-visible {
  color: #ffffff;

  transform:
    translateX(3px);
}


/* =========================================================
   FOOTER CONTACT
   ========================================================= */

.twl-site-footer__contact {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 12px;
}


.twl-site-footer__email {
  margin-top: 3px;

  color: #ffffff;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 16px;

  font-weight: 600;

  text-decoration: none;
}


.twl-site-footer__email:hover {
  color:
    var(--twl-footer-lavender);
}


.twl-site-footer__location {
  color: #858daa;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 12px;
}


.twl-site-footer__contact-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 12px;

  padding-bottom: 4px;

  border-bottom:
    1px solid
    rgba(187, 194, 255, 0.24);

  color: #c3c9dd;

  font-family:
    "Montserrat",
    system-ui,
    sans-serif;

  font-size: 12px;

  font-weight: 500;

  text-decoration: none;
}


.twl-site-footer__contact-link:hover {
  color: #ffffff;

  border-bottom-color:
    rgba(187, 194, 255, 0.6);
}


/* =========================================================
   SYSTEM DIVIDER
   ========================================================= */

.twl-site-footer__system {
  display: grid;

  grid-template-columns:
    minmax(20px, 1fr)
    auto
    minmax(20px, 1fr);

  gap: 18px;

  align-items: center;

  margin-top:
    clamp(58px, 6vw, 88px);
}


.twl-site-footer__system > span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(100, 115, 255, 0.24)
    );
}


.twl-site-footer__system > span:last-child {
  transform: scaleX(-1);
}


.twl-site-footer__system strong {
  color: #555f83;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 7px;

  font-weight: 500;

  letter-spacing: 0.14em;
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.twl-site-footer__bottom {
  display: flex;

  justify-content: space-between;

  gap: 24px;

  align-items: center;

  padding-top: 22px;
}


.twl-site-footer__bottom p {
  margin: 0;

  color: #5f6887;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  line-height: 1.4;

  letter-spacing: 0.05em;
}


/* =========================================================
   RESPONSIVE HEADER
   ========================================================= */

@media (max-width: 1180px) {

  .twl-site-header__inner {
    gap: 20px;
  }


  .twl-site-header__nav {
    gap: 16px;
  }


  .twl-site-header__nav-link {
    font-size: 11px;
  }

}


@media (max-width: 980px) {

  .twl-site-header__inner {
    min-height: 70px;

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

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


  .twl-site-header__nav,
  .twl-site-header__contact {
    display: none;
  }


  .twl-site-header__mobile {
    display: block;
  }


  .twl-site-header__mobile-panel {
    top: 70px;

    max-height:
      calc(100vh - 70px);

    padding:
      24px 20px;
  }

}





/* =========================================================
   RESPONSIVE FOOTER
   ========================================================= */

@media (max-width: 980px) {

  .twl-site-footer__top {
    grid-template-columns:
      minmax(240px, 0.8fr)
      minmax(0, 1.2fr);

    gap: 52px 46px;
  }


  .twl-site-footer__contact {
    grid-column:
      1 / -1;

    padding-top: 30px;

    border-top:
      1px solid
      rgba(151, 163, 255, 0.1);
  }

}


@media (max-width: 680px) {

  .twl-site-footer__inner {
    width:
      calc(100% - 32px);

    padding-top: 64px;
  }


  .twl-site-footer__top {
    grid-template-columns:
      1fr;

    gap: 42px;
  }


  .twl-site-footer__nav {
    grid-template-columns:
      1fr 1fr;

    gap: 28px;
  }


  .twl-site-footer__contact {
    grid-column: auto;
  }


  .twl-site-footer__bottom {
    flex-direction: column;

    align-items: flex-start;
  }

}


@media (max-width: 430px) {

  .twl-site-footer__nav {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .twl-site-header,
  .twl-site-header__nav-link,
  .twl-site-header__sections-toggle,
  .twl-site-header__sections-toggle svg,
  .twl-site-header__contact,
  .twl-site-header__mobile-toggle span,
  .twl-site-footer__nav-column a {
    transition: none;
  }

}
/* =========================================================
   MOBILE MENU — PAGE SCROLL LOCK
   ========================================================= */

html.twl-site-mobile-menu-open {
  overflow: hidden;

  overscroll-behavior: none;
}


body.twl-site-mobile-menu-open {
  position: fixed;

  left: 0;
  right: 0;

  top:
    calc(
      var(
        --twl-mobile-menu-scroll-y,
        0px
      )
      * -1
    );

  width: 100%;

  overflow: hidden;

  overscroll-behavior: none;
}
/* =========================================================
   MOBILE HEADER — FIXED TO VIEWPORT
   ========================================================= */

@media (max-width: 980px) {

  /*
   * Header всегда находится у верхней
   * границы viewport.
   */

  .twl-site-header {
    position: fixed;

    z-index: 10000;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    margin: 0;
  }


  /*
   * Поскольку fixed-header выпадает из потока,
   * резервируем его высоту на странице.
   */

  body {
    padding-top: 70px;
  }


  /*
   * Панель начинается сразу после header.
   */

  .twl-site-header__mobile-panel {
    position: fixed;

    top: 70px;
    left: 0;
    right: 0;

    max-height:
      calc(100dvh - 70px);

    overflow-y: auto;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }


  /* =======================================================
     PAGE LOCK
     ======================================================= */

  html.twl-site-mobile-menu-open {
    overflow: hidden;

    overscroll-behavior:
      none;
  }


  body.twl-site-mobile-menu-open {
    position: fixed;

    left: 0;
    right: 0;

    width: 100%;

    overflow: hidden;

    overscroll-behavior:
      none;
  }

}
/* =========================================================
   MOBILE HEADER — REMOVE TOP GAP
   FINAL OVERRIDE
   ========================================================= */

@media (max-width: 980px) {

  /*
   * Хедер всегда прижат непосредственно
   * к верхней границе viewport.
   *
   * Повышенная специфичность нужна,
   * чтобы перебить старое:
   *
   * .admin-bar .twl-site-header {
   *   top: 46px;
   * }
   */

  body .twl-site-header,
  body.admin-bar .twl-site-header {
    position: fixed;

    top: 0 !important;
    left: 0;
    right: 0;

    width: 100%;

    margin: 0;

    z-index: 10000;
  }


  /*
   * Мобильное меню начинается
   * сразу под хедером высотой 70px.
   *
   * Также перебиваем старое:
   *
   * .admin-bar .twl-site-header__mobile-panel {
   *   top: 116px;
   * }
   */

  body .twl-site-header__mobile-panel,
  body.admin-bar .twl-site-header__mobile-panel {
    top: 70px !important;

    max-height:
      calc(100dvh - 70px);
  }

}

/* =========================================================
   TWEETLIX — AUTONOMOUS FAQ
   Namespace: twl-faq*
   ========================================================= */

.twl-faq {
  --twl-faq-text: #f7f8ff;
  --twl-faq-secondary: #b0b6cf;
  --twl-faq-muted: #747c9c;

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

  --twl-faq-card:
    rgba(10, 12, 28, 0.72);

  --twl-faq-card-open:
    rgba(12, 15, 34, 0.92);

  --twl-faq-border:
    rgba(151, 163, 255, 0.14);

  --twl-faq-border-open:
    rgba(167, 177, 255, 0.32);

  position: relative;

  width: 100%;

  padding:
    clamp(90px, 9vw, 138px)
    0;

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

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

  background:
    transparent;
}


/* =========================================================
   LAYOUT
   ========================================================= */

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

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(280px, 0.72fr)
    minmax(0, 1.28fr);

  gap:
    clamp(56px, 8vw, 130px);

  align-items:
    start;
}


/* =========================================================
   INTRO
   ========================================================= */

.twl-faq__intro {
  position:
    sticky;

  top:
    110px;

  min-width:
    0;
}


.twl-faq__eyebrow {
  width:
    fit-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    6px 12px 6px 7px;

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

  border-radius:
    999px;

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


.twl-faq__eyebrow-icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

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

  background:
    linear-gradient(
      135deg,
      rgba(100, 115, 255, 0.18),
      rgba(119, 104, 255, 0.08)
    );
}


.twl-faq__eyebrow-icon svg {
  width:
    16px;

  height:
    16px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.5;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.twl-faq__eyebrow-text {
  color:
    var(--twl-faq-lavender);

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    0.04em;
}


.twl-faq__code {
  margin:
    34px 0 12px;

  color:
    #6c7597;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.12em;
}


.twl-faq__title {
  max-width:
    520px;

  margin:
    0;

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

  font-size:
    clamp(38px, 4.2vw, 64px);

  font-weight:
    600;

  line-height:
    1.03;

  letter-spacing:
    -0.045em;
}


.twl-faq__lead {
  max-width:
    520px;

  margin:
    26px 0 0;

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

  font-size:
    15px;

  line-height:
    1.75;
}


/* =========================================================
   LIST
   ========================================================= */

.twl-faq__list {
  min-width:
    0;

  display:
    grid;

  gap:
    10px;
}


/* =========================================================
   ITEM
   ========================================================= */

.twl-faq-item {
  position:
    relative;

  overflow:
    hidden;

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

  border-radius:
    18px;

  background:
    var(--twl-faq-card);

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

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


.twl-faq-item::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    70px;

  right:
    70px;

  height:
    1px;

  opacity:
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(187, 194, 255, 0.48),
      transparent
    );

  transition:
    opacity 260ms ease;
}


.twl-faq-item:hover {
  border-color:
    rgba(151, 163, 255, 0.24);
}


.twl-faq-item.is-open {
  border-color:
    var(--twl-faq-border-open);

  background:
    var(--twl-faq-card-open);

  box-shadow:
    0 16px 50px
    rgba(0, 0, 0, 0.12),
    inset 0 1px 0
    rgba(255, 255, 255, 0.025);
}


.twl-faq-item.is-open::before {
  opacity:
    1;
}


/* =========================================================
   HEADING
   ========================================================= */

.twl-faq-item__heading {
  margin:
    0;

  font:
    inherit;
}


/* =========================================================
   TRIGGER
   ========================================================= */

.twl-faq-item__trigger {
  width:
    100%;

  min-height:
    78px;

  display:
    grid;

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

  gap:
    18px;

  align-items:
    center;

  padding:
    18px 22px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    inherit;

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}


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

  outline-offset:
    -4px;

  border-radius:
    16px;
}


/* =========================================================
   INDEX
   ========================================================= */

.twl-faq-item__index {
  color:
    #60698d;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    12px;

  font-weight:
    500;

  letter-spacing:
    0.1em;

  transition:
    color 240ms ease;
}


.twl-faq-item.is-open
.twl-faq-item__index {
  color:
    var(--twl-faq-blue);
}


/* =========================================================
   QUESTION
   ========================================================= */

.twl-faq-item__question {
  color:
    #dce0f2;

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

  font-weight:
    600;

  line-height:
    1.45;

  letter-spacing:
    -0.015em;

  transition:
    color 240ms ease;
}


.twl-faq-item.is-open
.twl-faq-item__question {
  color:
    #ffffff;
}


/* =========================================================
   PLUS / MINUS
   ========================================================= */

.twl-faq-item__toggle {
  position:
    relative;

  width:
    38px;

  height:
    38px;

  display:
    block;

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

  border-radius:
    11px;

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

  transition:
    border-color 240ms ease,
    background 240ms ease,
    transform 320ms
    cubic-bezier(.22, .8, .24, 1);
}


.twl-faq-item__toggle span {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    13px;

  height:
    1px;

  border-radius:
    2px;

  background:
    var(--twl-faq-lavender);

  transform:
    translate(-50%, -50%);

  transition:
    transform 320ms
    cubic-bezier(.22, .8, .24, 1),
    opacity 220ms ease;
}


.twl-faq-item__toggle span:last-child {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


.twl-faq-item.is-open
.twl-faq-item__toggle {
  border-color:
    rgba(187, 194, 255, 0.35);

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

  transform:
    rotate(180deg);
}


.twl-faq-item.is-open
.twl-faq-item__toggle span:last-child {
  opacity:
    0;

  transform:
    translate(-50%, -50%)
    rotate(0deg);
}


/* =========================================================
   ANSWER
   Smooth auto-height animation without hardcoded height
   ========================================================= */

.twl-faq-item__answer {
  display:
    grid;

  grid-template-rows:
    0fr;

  opacity:
    0;

  visibility:
    hidden;

  transition:
    grid-template-rows
      440ms
      cubic-bezier(.22, .8, .24, 1),
    opacity
      260ms
      ease,
    visibility
      0s
      linear
      440ms;
}


.twl-faq-item.is-open
.twl-faq-item__answer {
  grid-template-rows:
    1fr;

  opacity:
    1;

  visibility:
    visible;

  transition:
    grid-template-rows
      440ms
      cubic-bezier(.22, .8, .24, 1),
    opacity
      300ms
      ease
      80ms,
    visibility
      0s;
}


.twl-faq-item__answer-inner {
  min-height:
    0;

  overflow:
    hidden;
}


.twl-faq-item__answer-inner p {
  max-width:
    760px;

  margin:
    0;

  padding:
    0
    82px
    27px
    88px;

  color:
    #929bb9;

  font-size:
    13px;

  line-height:
    1.75;
}


/* =========================================================
   OPEN ANSWER ACCENT
   ========================================================= */

.twl-faq-item__answer-inner p::before {
  content:
    "";

  display:
    block;

  width:
    42px;

  height:
    1px;

  margin-bottom:
    16px;

  background:
    linear-gradient(
      90deg,
      var(--twl-faq-blue),
      transparent
    );
}


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

@media (max-width: 980px) {

  .twl-faq__inner {
    grid-template-columns:
      minmax(240px, 0.64fr)
      minmax(0, 1.36fr);

    gap:
      48px;
  }


  .twl-faq__intro {
    top:
      94px;
  }

}


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

@media (max-width: 760px) {

  .twl-faq {
    padding:
      80px
      0;
  }


  .twl-faq__inner {
    width:
      calc(100% - 32px);

    grid-template-columns:
      1fr;

    gap:
      44px;
  }


  .twl-faq__intro {
    position:
      static;
  }


  .twl-faq__title {
    font-size:
      clamp(36px, 10vw, 50px);
  }


  .twl-faq__lead {
    font-size:
      14px;
  }


  .twl-faq-item__trigger {
    min-height:
      72px;

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

    gap:
      11px;

    padding:
      17px 15px;
  }


  .twl-faq-item__toggle {
    width:
      34px;

    height:
      34px;
  }


  .twl-faq-item__question {
    font-size:
      14px;
  }


  .twl-faq-item__answer-inner p {
    padding:
      0
      50px
      23px
      58px;

    font-size:
      12px;
  }

}


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

@media (max-width: 430px) {

  .twl-faq-item {
    border-radius:
      15px;
  }


  .twl-faq-item__trigger {
    grid-template-columns:
      25px
      minmax(0, 1fr)
      34px;

    gap:
      8px;

    padding:
      15px 13px;
  }


  .twl-faq-item__index {
    font-size:
      8px;
  }


  .twl-faq-item__answer-inner p {
    padding:
      0
      46px
      21px
      46px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .twl-faq-item,
  .twl-faq-item::before,
  .twl-faq-item__index,
  .twl-faq-item__question,
  .twl-faq-item__toggle,
  .twl-faq-item__toggle span,
  .twl-faq-item__answer {
    transition:
      none;
  }

}