:root {
  --black: #070707;
  --ink: #0a0a0a;
  --muted: #4c4c4c;
  --soft: #f4f2f6;
  --plum: #5b073f;
  --plum-dark: #25132d;
  --pink: #e61e91;
  --blue: #0998dc;
  --cyan: #29d5cd;
  --lime: #aeff3d;
  --purple: #211129;
  --radius: 8px;
  --container: 1220px;
}

/* Reels + Chatbot Instagram strategy landing */
.strategy-page {
  --strategy-purple: #25132d;
  --strategy-pink: #e61e91;
  --strategy-violet: #8600f0;
  --strategy-lime: #adff35;
  --strategy-soft: #f6f5f8;
  background: #ffffff;
  color: #0a0a0a;
  overflow-x: hidden;
}

.strategy-page main {
  overflow: hidden;
}

.strategy-page h1,
.strategy-page h2,
.strategy-page h3 {
  overflow-wrap: normal;
  word-break: normal;
}

.strategy-page .announcement-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--strategy-purple);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.strategy-page .announcement-bar > span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
}

.strategy-hero {
  min-height: 564px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)),
    url("./assets/strategy-hero-desktop.webp") center / cover no-repeat;
  color: #ffffff;
}

.strategy-hero h1,
.strategy-manual h2,
.strategy-cases h2,
.strategy-pink h2,
.strategy-start h2,
.strategy-compare h2,
.strategy-page .faq-section h2,
.strategy-final h2 {
  margin: 0;
  font-size: clamp(52px, 6vw, 86px);
  line-height: 0.95;
  font-weight: 1000;
  letter-spacing: 0;
}

.strategy-hero h1 {
  max-width: 740px;
  color: #ffffff;
}

.strategy-hero p {
  max-width: 660px;
  margin: 34px 0 34px;
  font-size: 25px;
  line-height: 1.25;
  font-weight: 650;
}

.strategy-hero small {
  display: block;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  font-weight: 650;
}

.strategy-page .lime-cta {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px 0 28px;
  border-radius: 999px;
  background: var(--strategy-lime);
  color: #060606;
  font-size: 18px;
  font-weight: 1000;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

.strategy-page .lime-cta.small {
  min-height: 48px;
  font-size: 15px;
  padding-left: 22px;
}

.strategy-page .lime-cta:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
}

.strategy-page .lime-cta:active {
  transform: translateY(0) scale(0.98);
}

.strategy-manual,
.strategy-cases,
.strategy-start,
.strategy-compare,
.strategy-page .faq-section {
  padding-top: 150px;
}

.strategy-manual h2,
.strategy-cases h2,
.strategy-start h2,
.strategy-compare h2,
.strategy-page .faq-section h2 {
  max-width: 920px;
  margin: 0 auto 78px;
  text-align: center;
}

.strategy-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.strategy-step {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  padding: 40px;
  border-radius: 24px;
  background: var(--strategy-soft);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.strategy-step > div {
  min-width: 0;
}

.strategy-step:hover,
.strategy-testimonials article:hover,
.strategy-compare-grid article:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(27, 12, 36, 0.12);
}

.strategy-step.lead,
.strategy-step.result {
  min-height: 460px;
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
}

.strategy-step > div > span {
  width: 58px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--strategy-lime);
  color: #050505;
  font-size: 18px;
  font-weight: 1000;
}

.strategy-step h3 {
  max-width: 410px;
  margin: 0;
  font-size: 34px;
  line-height: 1.02;
  font-weight: 1000;
}

.strategy-step p {
  max-width: 450px;
  margin: 14px 0 0;
  color: #3d3841;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.strategy-step img {
  width: min(100%, 560px);
  max-height: 340px;
  align-self: center;
  object-fit: contain;
}

.strategy-step:not(.lead):not(.result) img {
  width: 100%;
  max-height: 285px;
}

.strategy-media {
  position: relative;
  width: 100%;
  align-self: center;
}

.strategy-media img {
  display: block;
}

.strategy-chat-copy {
  content: "";
  position: absolute;
  pointer-events: none;
}

.strategy-story-media {
  display: flex;
  justify-content: center;
}

.strategy-story-copy {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: min(48%, 190px);
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 8px;
  background: #25132d;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(16, 8, 24, 0.22);
}

.strategy-story-copy b {
  font-size: 24px;
  line-height: 0.9;
  font-weight: 1000;
}

.strategy-story-copy span {
  margin-top: 4px;
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  font-weight: 1000;
}

.strategy-chat-media {
  min-height: 285px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strategy-chat-media img {
  display: none;
}

.strategy-chat-copy {
  position: relative;
  inset: auto;
  width: min(88%, 360px);
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 20px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 48px rgba(17, 10, 25, 0.12);
}

.strategy-chat-copy p,
.strategy-chat-copy b {
  margin: 0;
  border-radius: 13px;
  font-size: 13px;
  line-height: 1.2;
}

.strategy-chat-copy p {
  padding: 11px 13px;
  background: #f2f0f5;
  color: #17121d;
  font-weight: 650;
}

.strategy-chat-copy b {
  justify-self: end;
  padding: 8px 13px;
  background: var(--strategy-lime);
  color: #070707;
  font-weight: 1000;
}

.strategy-cases > p {
  margin: -54px auto 58px;
  color: #5b5560;
  text-align: center;
  font-size: 16px;
  font-weight: 650;
}

.strategy-testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.strategy-testimonials article {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, #ffffff 0 58%, rgba(230, 30, 145, 0.9) 58%),
    var(--strategy-soft);
  box-shadow: 0 12px 35px rgba(27, 12, 36, 0.08);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.strategy-testimonials p {
  margin: 0;
  color: #26202b;
  font-size: 17px;
  line-height: 1.36;
  font-weight: 650;
}

.strategy-testimonials b {
  margin-top: 58px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 1000;
}

.strategy-testimonials article > span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 750;
}

.strategy-pink {
  position: relative;
  margin-top: 150px;
  padding: 140px 0 130px;
  background: var(--strategy-pink);
  color: #ffffff;
  text-align: center;
}

.strategy-pink::before,
.strategy-pink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  background: inherit;
}

.strategy-pink::before {
  top: -1px;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 82% 22%, 82% 80%, 0 38%);
}

.strategy-pink::after {
  bottom: -1px;
  clip-path: polygon(0 18%, 27% 70%, 27% 20%, 100% 0, 100% 100%, 0 100%);
}

.strategy-pink h2,
.strategy-final h2 {
  color: #ffffff;
}

.strategy-pink p {
  max-width: 760px;
  margin: 22px auto 32px;
  font-size: 20px;
  line-height: 1.28;
  font-weight: 750;
}

.strategy-start article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 54px;
  align-items: center;
  overflow: hidden;
  padding: 56px 64px;
  border-radius: 24px;
  background: var(--strategy-soft);
}

.strategy-start ol {
  margin: 0 0 34px;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.9;
  font-weight: 750;
}

.strategy-phone {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 12px solid #ebe8ef;
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(34, 20, 44, 0.09);
  text-align: center;
}

.strategy-phone > span,
.strategy-phone > b,
.strategy-phone > i {
  min-width: 210px;
  padding: 16px;
  border-radius: 14px;
  background: var(--strategy-soft);
  font-style: normal;
  font-size: 18px;
  font-weight: 900;
}

.strategy-phone > b {
  background: var(--strategy-lime);
}

.strategy-compare-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 24px;
}

.strategy-compare-grid article {
  min-height: 610px;
  overflow: hidden;
  padding: 48px 40px;
  border-radius: 24px;
  background: var(--strategy-soft);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.strategy-compare-grid .after {
  position: relative;
  background: var(--strategy-violet);
  color: #ffffff;
}

.strategy-compare-grid h3 {
  margin: 0 0 34px;
  font-size: 48px;
  line-height: 0.98;
  font-weight: 900;
}

.strategy-compare-grid dl {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 26px;
  margin: 0;
}

.strategy-compare-grid dt {
  color: rgba(0, 0, 0, 0.52);
  font-size: 19px;
  font-weight: 750;
}

.strategy-compare-grid dd {
  margin: 3px 0 0;
  font-size: 22px;
  font-weight: 850;
}

.strategy-compare-grid .after dt {
  color: rgba(255, 255, 255, 0.76);
}

.strategy-compare-grid mark {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--strategy-lime);
  color: #0a0a0a;
}

.strategy-compare-grid img {
  position: absolute;
  right: 10px;
  bottom: 0;
  width: min(52%, 410px);
  max-height: 470px;
  object-fit: contain;
}

.strategy-page .faq-section {
  padding-bottom: 130px;
}

.strategy-page .faq-item {
  background: var(--strategy-soft);
}

.strategy-page .faq-item button {
  grid-template-columns: minmax(0, 1fr) 42px;
  text-align: left;
}

.strategy-final {
  min-height: 520px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(20, 11, 24, 0.55), rgba(20, 11, 24, 0.08)),
    url("./assets/strategy-hero-mobile.webp") center / cover no-repeat;
  color: #ffffff;
}

.strategy-final h2 {
  max-width: 680px;
  margin-bottom: 28px;
}

@media (max-width: 1040px) {
  .strategy-hero {
    min-height: 720px;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.08)),
      url("./assets/strategy-hero-tablet.webp");
    text-align: center;
  }

  .strategy-hero h1,
  .strategy-hero p {
    margin-left: auto;
    margin-right: auto;
  }

  .strategy-steps,
  .strategy-testimonials,
  .strategy-compare-grid {
    grid-template-columns: 1fr;
  }

  .strategy-step.lead,
  .strategy-step.result {
    flex-direction: column;
  }

  .strategy-start article {
    grid-template-columns: 1fr;
  }

  .strategy-compare-grid article {
    min-height: auto;
  }

  .strategy-compare-grid img {
    position: relative;
    right: auto;
    width: 100%;
    margin-top: 24px;
  }
}

@media (max-width: 760px) {
  .strategy-page .site-header .main-nav,
  .strategy-page .site-header .nav-actions {
    display: none;
  }

  .strategy-page .mega-menu:not(.open) {
    display: none;
  }

  .strategy-page .announcement-bar {
    min-height: 46px;
    gap: 7px;
    padding: 0 16px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
  }

  .strategy-page .announcement-bar > span {
    min-height: 22px;
    padding: 0 10px;
    font-size: 10px;
  }

  .strategy-hero {
    min-height: 690px;
    align-items: flex-start;
    padding-top: 48px;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.06)),
      url("./assets/strategy-hero-mobile.webp");
  }

  .strategy-hero h1,
  .strategy-manual h2,
  .strategy-cases h2,
  .strategy-pink h2,
  .strategy-start h2,
  .strategy-compare h2,
  .strategy-page .faq-section h2,
  .strategy-final h2 {
    max-width: 350px;
    font-size: 38px;
    line-height: 0.98;
  }

  .strategy-hero p {
    max-width: 330px;
    margin-top: 24px;
    font-size: 18px;
  }

  .strategy-page .lime-cta {
    min-height: 54px;
    max-width: 340px;
    font-size: 16px;
  }

  .strategy-manual,
  .strategy-cases,
  .strategy-start,
  .strategy-compare,
  .strategy-page .faq-section {
    padding-top: 86px;
  }

  .strategy-manual h2,
  .strategy-cases h2,
  .strategy-start h2,
  .strategy-compare h2,
  .strategy-page .faq-section h2 {
    margin-bottom: 46px;
  }

  .strategy-step {
    min-height: auto;
    width: 100%;
    max-width: calc(100vw - 32px);
    padding: 28px 22px;
  }

  .strategy-step.lead,
  .strategy-step.result {
    align-items: stretch;
  }

  .strategy-step > div {
    width: 100%;
  }

  .strategy-step h3,
  .strategy-compare-grid h3 {
    font-size: 30px;
  }

  .strategy-step h3,
  .strategy-step p {
    max-width: 100%;
  }

  .strategy-story-copy {
    bottom: 10%;
    width: min(52%, 180px);
    min-height: 58px;
  }

  .strategy-story-copy b {
    font-size: 21px;
  }

  .strategy-story-copy span {
    font-size: 10px;
  }

  .strategy-chat-media {
    min-height: 250px;
  }

  .strategy-chat-copy {
    width: min(92%, 300px);
    gap: 8px;
    padding: 14px;
  }

  .strategy-chat-copy p,
  .strategy-chat-copy b {
    font-size: 11px;
  }

  .strategy-step p,
  .strategy-testimonials p,
  .strategy-start ol,
  .strategy-compare-grid dt,
  .strategy-compare-grid dd {
    font-size: 16px;
  }

  .strategy-pink {
    margin-top: 86px;
    padding: 110px 0 100px;
  }

  .strategy-start article,
  .strategy-compare-grid article {
    padding: 30px 22px;
  }

  .strategy-phone {
    min-height: 360px;
  }

  .strategy-final {
    min-height: 430px;
    text-align: left;
  }
}

/* Mini Course landing */
.mini-course-page {
  --mc-blue: #0998dc;
  --mc-pink: #e858d8;
  --mc-purple: #25132d;
  --mc-lime: #adff35;
  --mc-soft: #f4f2f6;
  background: #ffffff;
  color: #070707;
  overflow-x: hidden;
}

.mini-course-page main {
  overflow: hidden;
}

.mini-course-page h1,
.mini-course-page h2,
.mini-course-page h3 {
  overflow-wrap: normal;
  word-break: normal;
}

.mini-course-page .site-header {
  background: #ffffff;
}

.mini-course-page .announcement-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--mc-purple);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.mini-course-page .announcement-bar > span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
}

.mini-course-page .announcement-bar > span > span {
  min-height: auto;
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
}

.mc-hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(430px, 1fr);
  gap: 58px;
  align-items: center;
  padding: 88px 0 72px;
}

.mc-hero-copy h1,
.mc-target h2,
.mc-benefits h2,
.mc-program h2,
.mc-results h2,
.mc-access h2,
.mc-other h2,
.mini-course-page .faq-section h2 {
  margin: 0;
  color: #070707;
  font-size: clamp(52px, 6vw, 92px);
  line-height: 0.92;
  font-weight: 1000;
  letter-spacing: 0;
}

.mc-hero-copy h1 {
  max-width: 670px;
  font-size: clamp(54px, 5.4vw, 80px);
}

.mc-hero-copy p {
  max-width: 570px;
  margin: 34px 0 36px;
  color: #202020;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 650;
}

.mini-course-page .lime-cta {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 26px 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--mc-lime);
  color: #050505;
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

.mini-course-page .lime-cta:hover,
.mini-course-page .black-cta:hover {
  transform: translateY(-2px);
}

.mini-course-page .lime-cta:active,
.mini-course-page .black-cta:active {
  transform: translateY(0) scale(0.98);
}

.mini-course-page .lime-cta:focus-visible,
.mini-course-page .black-cta:focus-visible {
  outline: 3px solid rgba(173, 255, 53, 0.45);
  outline-offset: 3px;
}

.mini-course-page .lime-cta .arrow-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #050505;
  position: relative;
  flex: 0 0 auto;
}

.mini-course-page .lime-cta .arrow-dot::before,
.mini-course-page .lime-cta .arrow-dot::after {
  content: "";
  position: absolute;
  background: var(--mc-lime);
  border-radius: 999px;
}

.mini-course-page .lime-cta .arrow-dot::before {
  width: 15px;
  height: 3px;
  top: 18px;
  left: 11px;
}

.mini-course-page .lime-cta .arrow-dot::after {
  width: 11px;
  height: 11px;
  top: 14px;
  left: 18px;
  border-top: 3px solid var(--mc-lime);
  border-right: 3px solid var(--mc-lime);
  background: transparent;
  transform: rotate(45deg);
}

.mini-course-page .lime-cta.mini {
  margin: 50px auto 0;
  display: flex;
  width: max-content;
}

.mc-hero-media {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mc-hero-media::before {
  content: "";
  position: absolute;
  inset: 0 -18% 0 6%;
  z-index: 0;
  background: var(--mc-pink);
  clip-path: polygon(28% 0, 100% 0, 74% 44%, 100% 44%, 58% 100%, 0 100%, 18% 44%, 0 44%);
}

.mc-hero-media img {
  position: relative;
  z-index: 1;
  max-width: min(640px, 100%);
  width: 100%;
  height: 590px;
  object-fit: contain;
  object-position: center bottom;
}

.mc-gift {
  position: absolute;
  left: 0;
  bottom: 72px;
  z-index: 2;
  width: 230px;
  min-height: 116px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px 12px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(27, 12, 36, 0.18);
}

.mc-gift > span {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--mc-lime);
  color: #080808;
  font-size: 28px;
  font-weight: 1000;
}

.mc-gift > span > span {
  width: auto;
  height: auto;
  min-height: 0;
  display: inline;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
}

.mc-gift b {
  font-size: 23px;
  line-height: 1;
}

.mc-gift small {
  color: #5f5c65;
  font-size: 12px;
  line-height: 1.2;
}

.mc-blue {
  position: relative;
  background: var(--mc-blue);
  color: #ffffff;
}

.mc-blue::before,
.mc-blue::after,
.mc-program::before,
.mc-access::before,
.mc-access::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 92px;
  background: inherit;
  pointer-events: none;
}

.mc-blue::before,
.mc-program::before,
.mc-access::before {
  top: -1px;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 29% 0, 27% 82%, 0 45%);
}

.mc-blue::after,
.mc-access::after {
  bottom: -1px;
  clip-path: polygon(0 22%, 63% 82%, 100% 30%, 100% 100%, 0 100%);
}

.mc-target {
  padding: 150px 0 130px;
}

.mc-target h2,
.mc-program h2,
.mc-access h2 {
  color: #ffffff;
  text-align: center;
}

.mc-target-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 66px;
}

.mc-target-grid article,
.mc-benefit-grid article,
.mc-program-grid article,
.mc-other-grid article {
  border-radius: 28px;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.mc-target-grid article:hover,
.mc-benefit-grid article:hover,
.mc-program-grid article:hover,
.mc-other-grid article:hover,
.mc-results-grid article:hover {
  transform: translateY(-6px);
}

.mc-target-grid article {
  min-height: 500px;
  position: relative;
  overflow: hidden;
  padding: 36px;
  background: #ffffff;
  color: #050505;
}

.mc-target-grid h3 {
  max-width: 300px;
  margin: 0;
  font-size: 34px;
  line-height: 1.03;
  font-weight: 1000;
}

.mc-target-grid p {
  max-width: 290px;
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 650;
}

.mc-target-grid img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.mc-target-grid article > span {
  position: absolute;
  right: 24px;
  bottom: 224px;
  z-index: 1;
  min-width: 58px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--mc-lime);
  color: #070707;
  font-weight: 1000;
}

.mc-benefits,
.mc-results,
.mc-other,
.mini-course-page .faq-section {
  padding-top: 130px;
  padding-bottom: 110px;
}

.mc-benefits h2,
.mc-results h2,
.mc-other h2,
.mini-course-page .faq-section h2 {
  max-width: 980px;
  margin: 0 auto 66px;
  text-align: center;
}

.mc-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.mc-benefit-grid article,
.mc-other-grid article {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px;
  background: var(--mc-soft);
  text-align: center;
}

.mc-benefit-grid h3,
.mc-other-grid h3 {
  max-width: 520px;
  margin: 0;
  font-size: 38px;
  line-height: 1.05;
  font-weight: 1000;
}

.mc-benefit-grid p,
.mc-other-grid p {
  max-width: 430px;
  margin: 22px auto 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 650;
}

.mc-benefit-grid img {
  max-width: 330px;
  width: 78%;
  margin-top: 30px;
  object-fit: contain;
}

.mc-subscription-list {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.mc-subscription-list div {
  min-height: 70px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 18px;
  background: #ffffff;
  text-align: left;
}

.mc-subscription-list img {
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

.mc-subscription-list p {
  max-width: none;
  margin: 0;
  color: #281932;
  font-size: 15px;
  line-height: 1.18;
  font-weight: 600;
}

.mc-subscription-list b {
  font-weight: 1000;
}

.mc-subscription-list span {
  margin-left: 4px;
}

.mc-subscription-list small {
  display: block;
  margin-top: 4px;
  color: #aaa6b0;
  font-size: 13px;
  font-weight: 800;
}

.mc-ai-chat {
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 18px 16px;
  align-items: center;
  margin-top: 30px;
  text-align: left;
}

.mc-ai-chat b,
.mc-ai-chat > span {
  display: block;
  padding: 20px 24px;
  border-radius: 18px;
  color: #281932;
  font-size: 18px;
  line-height: 1.24;
  font-weight: 800;
}

.mc-ai-chat b {
  grid-column: 2;
  justify-self: end;
  max-width: 310px;
  background: var(--mc-purple);
  color: #ffffff;
}

.mc-ai-chat > span {
  grid-column: 2;
  background: #ffffff;
}

.mc-ai-chat i {
  grid-column: 1;
  grid-row: 2;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 43%, var(--mc-purple) 44% 58%, transparent 59%),
    var(--mc-lime);
}

.mc-score {
  width: min(360px, 100%);
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 0 22px;
  border-radius: 16px;
  background: #ffffff;
  color: #24142e;
  font-size: 18px;
}

.mc-score > span {
  color: var(--mc-pink);
  font-weight: 900;
}

.mc-program {
  position: relative;
  padding: 145px 0 130px;
  background: var(--mc-pink);
  color: #ffffff;
}

.mc-program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}

.mc-program-grid article {
  min-height: 245px;
  padding: 30px;
  background: #ffffff;
  color: #080808;
}

.mc-program-grid small {
  display: inline-flex;
  margin-bottom: 22px;
  color: #76717a;
  font-size: 14px;
  font-weight: 850;
}

.mc-program-grid h3 {
  margin: 0;
  font-size: 27px;
  line-height: 1.05;
  font-weight: 1000;
}

.mc-program-grid p {
  margin: 16px 0 0;
  color: #38323c;
  font-size: 16px;
  line-height: 1.28;
  font-weight: 650;
}

.mc-video {
  padding-top: 120px;
  padding-bottom: 100px;
}

.mc-video article {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #19101f;
  box-shadow: 0 28px 80px rgba(20, 10, 28, 0.18);
}

.mc-video article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(12, 8, 16, 0.9) 0%, rgba(12, 8, 16, 0.76) 34%, rgba(12, 8, 16, 0.12) 64%);
}

.mc-video img {
  display: block;
  width: 100%;
}

.mc-video-copy {
  position: absolute;
  top: 42px;
  left: 48px;
  z-index: 2;
  width: min(430px, calc(100% - 96px));
  height: clamp(190px, 22vw, 300px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.mc-video-copy strong,
.mc-video-copy b {
  color: #ffffff;
  font-family: "Arial Black", Impact, sans-serif;
  line-height: 1;
  letter-spacing: 0;
}

.mc-video-copy strong {
  font-size: 32px;
}

.mc-video-copy b {
  max-width: 420px;
  font-size: 42px;
  text-transform: uppercase;
}

.mc-video button {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  border: 0;
  background: rgba(20, 10, 28, 0.05);
  cursor: pointer;
}

.mc-video button > span {
  position: relative;
  width: 84px;
  height: 84px;
  display: inline-flex;
  border-radius: 50%;
  background: var(--mc-lime);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.mc-video button > span::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 27px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid #080808;
}

.mc-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.mc-results-grid article {
  overflow: hidden;
  border-radius: 22px;
  background: var(--mc-soft);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.mc-results-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.28;
  object-fit: cover;
}

.mc-access {
  position: relative;
  margin-top: 40px;
  padding: 150px 0 135px;
  background: var(--mc-purple);
  color: #ffffff;
  text-align: center;
}

.mc-access p {
  max-width: 630px;
  margin: 28px auto 34px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 750;
}

.mc-other-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.mc-other-grid article {
  min-height: 310px;
}

.mc-other-grid article::after {
  content: "";
  width: 84px;
  height: 64px;
  margin-top: 30px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, var(--mc-blue), var(--mc-pink)),
    #ffffff;
}

.mini-course-page .faq-section {
  padding-top: 80px;
}

.mini-course-page .faq-item {
  background: var(--mc-soft);
}

.mini-course-page .faq-item button {
  grid-template-columns: minmax(0, 1fr) 42px;
  text-align: left;
}

@media (max-width: 1040px) {
  .mc-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 58px 0 40px;
  }

  .mc-hero-media {
    min-height: 520px;
  }

  .mc-target-grid,
  .mc-program-grid,
  .mc-other-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mc-hero-copy h1,
  .mc-target h2,
  .mc-benefits h2,
  .mc-program h2,
  .mc-results h2,
  .mc-access h2,
  .mc-other h2,
  .mini-course-page .faq-section h2 {
    font-size: clamp(44px, 8vw, 72px);
  }
}

@media (max-width: 760px) {
  .mini-course-page .site-header .main-nav,
  .mini-course-page .site-header .nav-actions {
    display: none;
  }

  .mini-course-page .mega-menu:not(.open) {
    display: none;
  }

  .mini-course-page .announcement-bar {
    min-height: 46px;
    padding: 0 18px;
    gap: 7px;
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
  }

  .mini-course-page .announcement-bar span {
    min-height: 22px;
    padding: 0 10px;
    font-size: 10px;
  }

  .mc-hero {
    gap: 24px;
    padding-top: 42px;
  }

  .mc-hero-copy h1,
  .mc-target h2,
  .mc-benefits h2,
  .mc-program h2,
  .mc-results h2,
  .mc-access h2,
  .mc-other h2,
  .mini-course-page .faq-section h2 {
    font-size: 36px;
    line-height: 0.98;
  }

  .mc-hero-copy h1 {
    font-size: 40px;
    max-width: 360px;
  }

  .mc-target h2,
  .mc-benefits h2,
  .mc-program h2,
  .mc-results h2,
  .mc-access h2,
  .mc-other h2,
  .mini-course-page .faq-section h2 {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .mc-hero-copy p {
    margin: 24px 0 28px;
    font-size: 18px;
  }

  .mc-hero-media {
    min-height: 440px;
  }

  .mc-hero-media::before {
    inset: 0 -34% 0 0;
  }

  .mc-hero-media img {
    height: 430px;
  }

  .mc-gift {
    left: 12px;
    bottom: 30px;
    width: 196px;
  }

  .mc-target,
  .mc-program,
  .mc-access {
    padding-top: 110px;
    padding-bottom: 100px;
  }

  .mc-benefits,
  .mc-results,
  .mc-other,
  .mini-course-page .faq-section {
    padding-top: 82px;
    padding-bottom: 76px;
  }

  .mc-target-grid,
  .mc-benefit-grid,
  .mc-program-grid,
  .mc-results-grid,
  .mc-other-grid {
    grid-template-columns: 1fr;
  }

  .mc-target-grid article {
    min-height: 430px;
    padding: 30px 24px;
  }

  .mc-target-grid h3 {
    font-size: 29px;
    line-height: 1.08;
  }

  .mc-target-grid p {
    font-size: 15px;
  }

  .mc-benefit-grid article,
  .mc-other-grid article {
    min-height: 300px;
    padding: 30px 22px;
  }

  .mc-benefit-grid h3,
  .mc-other-grid h3 {
    font-size: 30px;
  }

  .mc-subscription-list {
    gap: 12px;
  }

  .mc-subscription-list div {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 10px 12px;
  }

  .mc-subscription-list img {
    width: 46px;
    height: 46px;
  }

  .mc-subscription-list p {
    font-size: 13px;
  }

  .mc-ai-chat {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }

  .mc-ai-chat b,
  .mc-ai-chat > span {
    padding: 16px;
    font-size: 15px;
  }

  .mc-ai-chat i {
    width: 52px;
    height: 52px;
  }

  .mc-program-grid article {
    min-height: auto;
  }

  .mc-video-copy {
    top: 24px;
    left: 24px;
    width: min(280px, calc(100% - 48px));
    height: clamp(118px, 36vw, 172px);
  }

  .mc-video-copy strong {
    font-size: 22px;
  }

  .mc-video-copy b {
    max-width: 260px;
    font-size: 26px;
  }

  .mini-course-page .lime-cta {
    width: 100%;
    max-width: 360px;
    padding-left: 20px;
    padding-right: 14px;
    font-size: 16px;
  }

  .mini-course-page .lime-cta.mini {
    width: 100%;
  }
}

/* Partners page */
.partners-page {
  --container: 1220px;
  background: #ffffff;
  overflow-x: hidden;
}

.partners-page main {
  overflow: hidden;
}

.partners-page .nav-link.active {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #f6f5f8;
}

.partners-page .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: #0c0c0c;
  font-size: 14px;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}

.partners-page .nav-link:hover {
  background: #f6f5f8;
}

.partners-page .nav-link svg,
.partners-page .lang-trigger > svg {
  width: 12px;
  height: 7px;
  flex: 0 0 auto;
  fill: none;
}

.partners-page .nav-link svg path,
.partners-page .lang-trigger > svg path {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.partners-page .announce-bar {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--purple);
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.partners-page .announce-bar span {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
  text-transform: uppercase;
}

.partners-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 78px 0 0;
  text-align: center;
}

.partners-hero h1,
.partners-pink h2,
.partners-bonuses h2,
.partners-results h2,
.partners-blue h2,
.partners-join h2,
.partners-faq h2 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.97;
}

.partners-hero h1 {
  max-width: 1240px;
  font-size: clamp(44px, 5.3vw, 76px);
}

.partners-hero p {
  max-width: 720px;
  margin: 38px auto 34px;
  color: rgba(13, 13, 13, 0.84);
  font-size: 24px;
  line-height: 1.18;
}

.partners-hero img {
  width: min(100%, 783px);
  margin-top: 30px;
  display: block;
}

.partners-pink {
  position: relative;
  margin-top: -72px;
  padding: 130px 0 86px;
  overflow: hidden;
  background: var(--pink);
  color: #ffffff;
  clip-path: polygon(0 6%, 74% 0, 74% 5%, 100% 2%, 100% 100%, 0 100%);
}

.partners-pink h2 {
  max-width: 670px;
  margin: 0 auto 72px;
  font-size: clamp(40px, 5vw, 70px);
  text-align: center;
}

.partners-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.partners-benefit-grid article,
.partners-three article,
.target-grid article {
  border-radius: 12px;
  background: #f6f5f8;
  color: #0c0c0c;
}

.partners-benefit-grid article {
  min-height: 420px;
  padding: 56px 44px 24px;
  text-align: center;
}

.partners-benefit-grid article h3,
.partners-three h3,
.target-grid h3 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 34px;
  line-height: 1.02;
}

.partners-benefit-grid article p,
.partners-three p,
.target-grid p {
  margin: 24px auto 0;
  max-width: 360px;
  color: rgba(13, 13, 13, 0.82);
  font-size: 15px;
  line-height: 1.25;
}

.partners-benefit-grid article img {
  width: min(100%, 340px);
  margin: 22px auto 0;
  display: block;
}

.benefit-icons {
  width: 260px;
  margin: 74px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 58px);
  justify-content: center;
  gap: 10px;
}

.benefit-icons > span,
.income-mini > span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ffffff;
}

.benefit-icons .lime-bubble {
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--purple);
  font-size: 26px;
  font-weight: 900;
}

.bar-widget {
  position: relative;
  width: 300px;
  height: 140px;
  margin: 52px auto 0;
}

.bar-widget b {
  position: absolute;
  top: 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--blue);
  color: #ffffff;
  font-size: 12px;
}

.bar-widget b:first-child {
  left: 72px;
}

.bar-widget b:nth-child(2) {
  left: 136px;
}

.bar-widget > span,
.bar-widget i {
  position: absolute;
  bottom: 0;
  width: 54px;
  border-radius: 10px;
  background: #ffffff;
}

.bar-widget > span:nth-of-type(1) {
  left: 46px;
  height: 50px;
}

.bar-widget > span:nth-of-type(2) {
  left: 111px;
  height: 72px;
}

.bar-widget > span:nth-of-type(3) {
  left: 176px;
  height: 95px;
}

.bar-widget i {
  left: 241px;
  height: 120px;
  background: var(--blue);
}

.income-mini {
  position: relative;
  width: 280px;
  height: 180px;
  margin: 54px auto 0;
}

.income-mini > span {
  position: absolute;
  top: 10px;
  background: #ffffff;
}

.income-mini > span:nth-child(1) {
  left: 18px;
}

.income-mini > span:nth-child(2) {
  left: 110px;
}

.income-mini > span:nth-child(3) {
  right: 18px;
}

.income-mini b {
  position: absolute;
  left: 88px;
  top: 72px;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--purple);
  font-size: 44px;
}

.income-card {
  grid-column: 1 / -1;
  min-height: auto !important;
  padding: 54px 48px 42px !important;
  text-align: left !important;
}

.income-card > div:first-child {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 40px;
  align-items: start;
}

.income-card h3 {
  font-size: 54px !important;
}

.income-card p {
  max-width: none !important;
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.08 !important;
}

.partners-page mark {
  padding: 0 8px 2px;
  border-radius: 999px;
  background: var(--lime);
  color: #000000;
}

.income-numbers {
  width: 250px;
  margin: 48px auto 28px;
  display: grid;
  gap: 4px;
  text-align: left;
}

.income-numbers b {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 28px;
}

.income-numbers span {
  margin-bottom: 14px;
  font-size: 13px;
}

.range-line {
  height: 28px;
  padding: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0798df, #d65eea, #fb426f);
}

.range-line span {
  display: block;
  width: 18px;
  height: 18px;
  margin: -5px auto 0;
  border-radius: 50%;
  background: var(--lime);
}

.partners-pink .lime-cta {
  margin: 42px auto 0;
}

.creator-page {
  --creator-dark: #24162c;
  --creator-purple: #9700ff;
  --creator-violet: #b6a4ff;
  --creator-pink: #ef65e1;
  background: #ffffff;
  overflow-x: hidden;
}

.creator-page .site-header {
  background: var(--creator-dark);
  color: #ffffff;
  box-shadow: none;
}

.creator-page .brand,
.creator-page .nav-link,
.creator-page .lang-trigger {
  color: #ffffff;
}

.creator-page .nav-link svg,
.creator-page .lang-trigger > svg {
  width: 12px;
  height: 7px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}

.creator-page .nav-link svg path,
.creator-page .lang-trigger > svg path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.creator-page .nav-link.active {
  background: rgba(255, 255, 255, 0.1);
}

.creator-page .black-cta,
.creator-page .account-btn {
  background: #ffffff;
  color: #000000;
}

.creator-page .nav-actions {
  display: none;
}

.creator-hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding: 92px 0 0;
  background: var(--creator-dark);
  color: #ffffff;
}

.creator-hero::after,
.creator-benefits::before,
.creator-final-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 138px;
  background: var(--creator-purple);
  clip-path: polygon(0 72%, 74% 0, 74% 42%, 100% 20%, 100% 100%, 0 100%);
}

.creator-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

.creator-copy h1 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(58px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: 0;
}

.creator-copy p {
  margin: 30px 0 0;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
}

.creator-page .creator-mobile-cta {
  display: none;
  margin: 28px auto 0;
}

.creator-phone-wrap {
  position: relative;
  width: min(720px, 78vw);
  height: 470px;
  margin-top: 124px;
}

.creator-phone {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 450px;
  height: 560px;
  overflow: hidden;
  border: 10px solid #d9d8e0;
  border-bottom: 0;
  border-radius: 58px 58px 0 0;
  background: #111111;
  transform: translateX(-50%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
}

.creator-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.28));
}

.creator-phone-tabs,
.creator-actions {
  position: absolute;
  z-index: 2;
  color: #ffffff;
  font-weight: 900;
}

.creator-phone-tabs {
  top: 42px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 18px;
}

.creator-actions {
  right: 28px;
  bottom: 78px;
  display: grid;
  gap: 16px;
  text-align: center;
}

.creator-actions > span {
  display: grid;
  justify-items: center;
  gap: 3px;
  font-size: 0;
}

.creator-actions > span::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: #ffffff;
}

.creator-actions > span:nth-child(1)::before {
  background: #ff2947;
  clip-path: path("M14 25S2 17.5 2 8.8C2 3.8 8.2 1.4 14 7.3 19.8 1.4 26 3.8 26 8.8 26 17.5 14 25 14 25Z");
}

.creator-actions > span:nth-child(2)::before {
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: transparent;
  box-shadow: -8px 14px 0 -10px #ffffff;
}

.creator-actions > span:nth-child(3)::before {
  width: 30px;
  height: 24px;
  clip-path: polygon(0 35%, 66% 35%, 66% 8%, 100% 50%, 66% 92%, 66% 65%, 0 65%);
}

.creator-actions > span:nth-child(4)::before {
  width: 28px;
  height: 28px;
  clip-path: polygon(50% 0, 100% 42%, 78% 42%, 78% 100%, 22% 100%, 22% 42%, 0 42%);
}

.creator-actions small {
  font-size: 12px;
}

.creator-money {
  position: absolute;
  left: -20px;
  top: 120px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  width: 260px;
  padding: 22px;
  border-radius: 16px;
  background: var(--creator-pink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.creator-money > span {
  grid-column: 1 / -1;
  width: 156px;
  height: 9px;
  border-radius: 999px;
  background: #ffffff;
}

.creator-money b {
  font-size: 30px;
  line-height: 1;
}

.creator-money i {
  width: 34px;
  height: 24px;
  border-radius: 4px;
  background: #ffffff;
}

.creator-round {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--creator-violet);
  color: #ffffff;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24);
}

.creator-round svg {
  width: 52%;
  height: 52%;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.creator-reels {
  left: -78px;
  bottom: 120px;
  width: 100px;
  height: 100px;
}

.creator-gift {
  right: 22px;
  top: 54px;
  width: 112px;
  height: 112px;
  background: #ffffff;
  color: var(--creator-violet);
}

.creator-gift svg {
  fill: currentColor;
  stroke: none;
}

.creator-fire {
  position: absolute;
  right: -42px;
  top: 214px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 16px;
  background: #e61e91;
  color: #ffffff;
  font-size: 0;
}

.creator-fire::before,
.creator-fire svg {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  fill: currentColor;
  stroke: none;
  background: currentColor;
  clip-path: path("M16 32C7 32 2 26 2 18.5c0-4.4 2.2-8.9 7-13.5.4 3.9 1.8 6.6 4 8.4-.2-6.4 2.8-11 8.4-13.4.1 5 2 8.1 5.2 11.1 2.3 2.2 3.4 4.6 3.4 8.3C30 26.8 24.2 32 16 32Z");
}

.creator-benefits {
  position: relative;
  overflow: hidden;
  padding: 110px 0 130px;
  background: var(--creator-purple);
  color: #ffffff;
}

.creator-benefits::before {
  top: -1px;
  bottom: auto;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 26%, 74% 58%, 74% 16%, 0 76%);
}

.creator-benefits h2,
.creator-steps h2,
.creator-prizes h2,
.creator-calculator h2,
.creator-final-cta h2 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: 0;
  text-align: center;
}

.creator-benefits h2 {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 50px auto 58px;
}

.creator-benefit-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: min(100%, 860px);
  margin: 0 auto;
}

.creator-video-card,
.creator-card,
.creator-step-grid article,
.calc-card {
  border-radius: 28px;
  background: #f4f3f7;
  color: #000000;
}

.creator-video-card {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.creator-video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
}

.play-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.74);
}

.play-btn::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 25px;
  border-left: 22px solid #ffffff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.creator-video-card p {
  position: absolute;
  left: 30px;
  bottom: 28px;
  z-index: 2;
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.creator-card {
  min-height: 420px;
  padding: 42px;
  overflow: hidden;
}

.creator-card h3 {
  margin: 0 0 18px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 36px;
  line-height: 1;
}

.creator-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.42;
}

.mini-chart {
  position: relative;
  display: flex;
  align-items: end;
  gap: 12px;
  width: 260px;
  height: 130px;
  margin: 58px auto 0;
}

.mini-chart b {
  position: absolute;
  left: 8px;
  top: 2px;
  padding: 12px 24px;
  border-radius: 14px;
  background: var(--creator-violet);
  color: #ffffff;
  font-size: 24px;
}

.mini-chart > span {
  flex: 1;
  border-radius: 14px 14px 0 0;
  background: #ffffff;
}

.mini-chart > span:nth-child(2) { height: 52px; }
.mini-chart > span:nth-child(3) { height: 86px; }
.mini-chart > span:nth-child(4) { height: 112px; background: var(--creator-pink); }
.mini-chart > span:nth-child(5) { height: 72px; }

.earning-pill {
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  margin: 52px auto 0;
  border-radius: 50%;
  background: var(--lime);
  text-align: center;
  box-shadow: 0 20px 50px rgba(174, 255, 61, 0.25);
}

.earning-pill b,
.calc-card strong {
  display: block;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 52px;
}

.earning-pill span {
  display: block;
  margin-top: -42px;
  font-weight: 900;
}

.stacked-reels {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.stacked-reels img {
  width: 108px;
  height: 160px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(36, 22, 44, 0.18);
}

.stacked-reels img + img {
  margin-left: -28px;
}

.creator-steps {
  padding: 120px 0 100px;
}

.creator-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}

.creator-step-grid article {
  position: relative;
  min-height: 520px;
  padding: 30px;
  overflow: hidden;
}

.creator-step-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
  font-weight: 900;
}

.creator-step-grid h3 {
  margin: 24px 0 12px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 30px;
  line-height: 1;
}

.creator-step-grid p {
  margin: 0;
  font-size: 15px;
  line-height: 1.42;
}

.creator-step-grid article > img {
  position: absolute;
  left: 50%;
  bottom: -96px;
  width: 260px;
  transform: translateX(-50%);
}

.device-stack img {
  position: absolute;
}

.device-stack img:nth-child(1) {
  right: -120px;
  bottom: 10px;
  width: 350px;
}

.device-stack img:nth-child(2) {
  left: 28px;
  bottom: -44px;
  width: 122px;
}

.device-stack img:nth-child(3) {
  right: 38px;
  bottom: 138px;
  width: 110px;
}

.creator-prizes {
  padding: 100px 0 110px;
  background: var(--creator-dark);
  color: #ffffff;
}

.creator-prizes p {
  max-width: 700px;
  margin: 22px auto 52px;
  text-align: center;
  font-size: 22px;
  line-height: 1.35;
}

.prize-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
  overflow: hidden;
  padding: 20px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.08);
}

.prize-panel img {
  width: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 22px;
}

.prize-panel div {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 320px;
  padding: 30px;
  border-radius: 22px;
  background: #ffffff;
  color: #000000;
}

.prize-panel b {
  max-width: 100%;
  font-size: 28px;
  line-height: 1.08;
  overflow-wrap: normal;
}

.prize-panel div > span {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 54px;
  line-height: 1;
}

.prize-panel small {
  color: #514a57;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: normal;
}

.creator-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 70px;
  align-items: center;
  padding: 120px 0;
}

.creator-calculator h2 {
  text-align: left;
}

.creator-calculator p {
  max-width: 560px;
  margin: 24px 0 34px;
  color: #2a2430;
  font-size: 22px;
  line-height: 1.35;
}

.calc-card {
  padding: 36px;
  box-shadow: 0 28px 80px rgba(36, 22, 44, 0.12);
}

.calc-card label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  color: #2a2430;
  font-weight: 900;
}

.calc-range {
  height: 18px;
  margin-bottom: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e4eb;
}

.calc-range i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--creator-purple), var(--creator-pink));
}

.calc-card strong {
  color: var(--creator-purple);
  text-align: center;
}

.calc-card p {
  margin: 6px 0 0;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
}

.creator-final-cta {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 120px 24px;
  background: var(--creator-purple);
  color: #ffffff;
  text-align: center;
}

.creator-final-cta::before {
  top: -1px;
  bottom: auto;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 24%, 74% 58%, 74% 20%, 0 76%);
}

.creator-final-cta h2,
.creator-final-cta .lime-cta {
  position: relative;
  z-index: 1;
}

.creator-final-cta h2 {
  max-width: 900px;
}

.creator-final-cta .lime-cta {
  margin-top: 34px;
}

.creator-page .faq-section {
  padding: 110px 0 120px;
}

.creator-page .faq-section h2 {
  margin-bottom: 58px;
}

@media (max-width: 1180px) {
  .creator-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .creator-calculator {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .creator-page {
    overflow-x: hidden;
  }

  .creator-page .site-header {
    position: sticky;
  }

  .creator-page .nav-wrap {
    width: 100%;
    min-height: 68px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
  }

  .creator-page .main-nav,
  .creator-page .nav-actions {
    display: none;
  }

  .creator-page .mega-menu:not(.open) {
    display: none;
  }

  .creator-page .lang-select {
    justify-self: end;
  }

  .creator-page .brand {
    min-width: 0;
    justify-self: center;
    font-size: 20px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .creator-page .nav-wrap::before {
    content: "";
    width: 48px;
    height: 30px;
    border-radius: 999px;
    background: #ffffff;
    background-image:
      linear-gradient(#000000, #000000),
      linear-gradient(#000000, #000000);
    background-position:
      15px 11px,
      15px 19px;
    background-repeat: no-repeat;
    background-size: 18px 2px;
  }

  .creator-hero {
    min-height: 632px;
    padding-top: 42px;
  }

  .creator-copy {
    width: 100%;
    max-width: none;
  }

  .creator-copy h1 {
    font-size: 35px;
    white-space: normal;
  }

  .creator-copy p {
    width: 330px;
    margin: 24px auto 0;
    font-size: 20px;
  }

  .creator-page .creator-mobile-cta {
    display: inline-flex;
  }

  .creator-phone-wrap {
    width: min(100%, 358px);
    height: 330px;
    margin-top: 28px;
  }

  .creator-phone {
    width: 230px;
    height: 340px;
    border-width: 6px;
    border-radius: 34px 34px 0 0;
  }

  .creator-phone-tabs {
    top: 14px;
    font-size: 10px;
  }

  .creator-actions {
    right: 11px;
    bottom: 32px;
    gap: 8px;
  }

  .creator-actions > span {
    font-size: 17px;
  }

  .creator-actions small {
    font-size: 7px;
  }

  .creator-money {
    left: 10px;
    top: 170px;
    width: 140px;
    padding: 10px;
    gap: 8px;
    border-radius: 8px;
  }

  .creator-money > span {
    width: 78px;
    height: 5px;
  }

  .creator-money b {
    font-size: 18px;
  }

  .creator-money i {
    width: 20px;
    height: 14px;
  }

  .creator-reels {
    left: 4px;
    bottom: 92px;
    width: 62px;
    height: 62px;
  }

  .creator-gift {
    right: 24px;
    top: 82px;
    width: 58px;
    height: 58px;
  }

  .creator-fire {
    right: 8px;
    top: 155px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 21px;
  }

  .creator-hero::after {
    height: 86px;
    clip-path: polygon(0 56%, 100% 22%, 100% 100%, 0 100%);
  }

  .creator-benefits {
    padding: 80px 0 90px;
  }

  .creator-benefits::before {
    height: 82px;
  }

  .creator-benefits h2,
  .creator-steps h2,
  .creator-prizes h2,
  .creator-calculator h2,
  .creator-final-cta h2 {
    font-size: 38px;
  }

  .creator-benefit-grid,
  .creator-step-grid,
  .prize-panel {
    grid-template-columns: 1fr;
  }

  .creator-card,
  .creator-video-card {
    min-height: 360px;
    padding: 28px;
  }

  .creator-card h3 {
    font-size: 30px;
  }

  .creator-steps {
    padding: 78px 0;
  }

  .creator-step-grid article {
    min-height: 470px;
  }

  .prize-panel {
    padding: 12px;
  }

  .prize-panel img,
  .prize-panel div {
    min-height: 260px;
  }

  .creator-calculator {
    padding: 80px 0;
    gap: 34px;
  }

  .creator-calculator h2,
  .creator-calculator p {
    text-align: center;
  }

  .creator-calculator .lime-cta {
    margin: 0 auto;
  }

  .creator-final-cta {
    min-height: 470px;
  }
}

.partners-bonuses,
.partners-results,
.partners-faq {
  padding: 128px 0 0;
}

.partners-bonuses h2,
.partners-results h2,
.partners-blue h2,
.partners-join h2,
.partners-faq h2 {
  font-size: clamp(42px, 5vw, 66px);
  text-align: center;
}

.partners-three,
.target-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 72px;
}

.partners-three article {
  min-height: 340px;
  padding: 48px 34px 22px;
}

.partners-three h3 {
  max-width: 290px;
  font-size: 26px;
  text-align: left;
}

.bonus-access {
  margin-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.bonus-access b {
  width: 86px;
  height: 86px;
  border-radius: 14px;
  background: var(--lime);
  position: relative;
}

.bonus-access b::before {
  content: "";
  position: absolute;
  inset: 22px;
  background: var(--purple);
  clip-path: polygon(0 0, 88% 0, 55% 43%, 100% 43%, 12% 100%, 42% 52%, 0 52%);
}

.bonus-access span {
  width: 82px;
  height: 82px;
  border: 5px solid #ffffff;
  border-right-color: var(--purple);
  border-radius: 50%;
}

.beta-toggle {
  width: 170px;
  height: 44px;
  margin: 108px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-radius: 999px;
  background: #ffffff;
  font-weight: 900;
}

.beta-toggle > span {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #dce3ed;
  position: relative;
}

.beta-toggle > span::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
}

.help-bubbles {
  position: relative;
  width: 190px;
  height: 110px;
  margin: 94px auto 0;
}

.help-bubbles span,
.help-bubbles b {
  position: absolute;
  border-radius: 50% 50% 50% 8px;
}

.help-bubbles span {
  left: 0;
  top: 20px;
  width: 96px;
  height: 78px;
  background: var(--lime);
}

.help-bubbles b {
  right: 0;
  top: 0;
  width: 108px;
  height: 84px;
  background: #ffffff;
}

.partners-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 72px;
}

.partners-result-grid article {
  overflow: hidden;
  border-radius: 12px;
  background: #f6f5f8;
}

.partners-result-grid h3 {
  min-height: 120px;
  margin: 0;
  padding: 40px 42px 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 42px;
  line-height: 0.98;
}

.partners-result-grid img {
  display: block;
  width: 100%;
}

.partners-blue {
  margin-top: 140px;
  padding: 120px 0 112px;
  background: var(--blue);
  color: #ffffff;
  clip-path: polygon(0 0, 27% 8%, 27% 0, 100% 12%, 100% 100%, 73% 92%, 73% 100%, 0 88%);
}

.partners-blue h2 {
  max-width: 760px;
  margin: 0 auto;
}

.target-grid article {
  min-height: 420px;
  padding: 38px 34px 0;
  overflow: hidden;
}

.target-grid h3 {
  font-size: 28px;
}

.target-grid p {
  margin-left: 0;
  text-align: left;
}

.target-grid img {
  width: 100%;
  margin-top: 20px;
  display: block;
}

.partners-join {
  margin-top: -2px;
  padding: 118px 0 126px;
  background: #f6f5f8;
}

.join-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
  margin-top: 72px;
}

.join-layout > img {
  width: 100%;
  align-self: end;
}

.join-steps {
  display: grid;
  gap: 24px;
}

.join-steps article {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
}

.join-steps article > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0c0c0c;
  color: #ffffff;
  font-weight: 900;
}

.join-steps p {
  margin: 0;
  color: rgba(13, 13, 13, 0.84);
  font-size: 22px;
  line-height: 1.3;
}

.join-steps .lime-cta {
  width: max-content;
  margin-top: 24px;
}

.partners-faq {
  padding-bottom: 120px;
}

.partners-faq .faq-list {
  margin-top: 72px;
}

@media (max-width: 980px) {
  .partners-benefit-grid,
  .partners-three,
  .partners-result-grid,
  .target-grid,
  .join-layout {
    grid-template-columns: 1fr;
  }

  .income-card > div:first-child {
    grid-template-columns: 1fr;
  }

  .partners-pink {
    margin-top: -34px;
    padding-top: 158px;
  }
}

@media (max-width: 640px) {
  .partners-hero {
    padding-top: 36px;
  }

  .partners-page .site-header {
    position: sticky;
  }

  .partners-page .site-header::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 19px;
    width: 56px;
    height: 30px;
    border-radius: 999px;
    background: #0c0c0c;
  }

  .partners-page .site-header::after {
    content: "";
    position: absolute;
    left: 36px;
    top: 33px;
    width: 16px;
    height: 2px;
    background: #ffffff;
    box-shadow: 0 -6px 0 #ffffff, 0 6px 0 #ffffff;
  }

  .partners-page .nav-wrap {
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
    padding: 0 16px 0 82px;
  }

  .partners-page .main-nav,
  .partners-page .nav-actions {
    display: none;
  }

  .partners-page .lang-select {
    justify-self: end;
  }

  .partners-page .mega-menu:not(.open) {
    display: none;
  }

  .partners-page .brand {
    min-width: 0;
    overflow: hidden;
    font-size: 20px;
    text-overflow: clip;
    white-space: nowrap;
  }

  .partners-page .announce-bar {
    min-height: 50px;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    padding: 8px 16px;
    text-align: center;
    white-space: normal;
    font-size: 14px;
    line-height: 1.2;
  }

  .partners-page .announce-bar span {
    padding: 5px 10px;
  }

  .partners-hero h1 {
    max-width: 360px;
    font-size: 34px;
    overflow-wrap: normal;
    word-break: normal;
  }

  .partners-hero p {
    max-width: 340px;
    margin: 28px auto 28px;
    font-size: 20px;
  }

  .partners-hero img {
    width: min(100%, 460px);
    max-width: 460px;
  }

  .partners-pink h2,
  .partners-blue h2,
  .partners-join h2,
  .partners-faq h2 {
    max-width: 340px;
    margin-inline: auto;
  }

  .partners-pink h2,
  .partners-bonuses h2,
  .partners-results h2,
  .partners-blue h2,
  .partners-join h2,
  .partners-faq h2 {
    font-size: 34px;
  }

  .partners-benefit-grid article,
  .partners-three article,
  .target-grid article {
    min-height: 310px;
    padding: 34px 24px 20px;
  }

  .partners-benefit-grid article p,
  .partners-three article p,
  .target-grid article p {
    max-width: 292px;
    font-size: 14px;
    overflow-wrap: break-word;
  }

  .partners-benefit-grid article h3,
  .partners-three h3,
  .target-grid h3 {
    font-size: 28px;
  }

  .income-card h3 {
    font-size: 36px !important;
  }

  .income-card p {
    font-size: 20px !important;
  }

  .partners-result-grid h3 {
    min-height: auto;
    padding: 30px 28px 12px;
    font-size: 30px;
  }

  .partners-blue {
    margin-top: 80px;
    padding: 92px 0;
  }

  .partners-bonuses,
  .partners-results,
  .partners-faq {
    padding-top: 86px;
  }

  .partners-three,
  .target-grid,
  .partners-result-grid,
  .partners-faq .faq-list {
    margin-top: 44px;
  }

  .partners-join {
    padding: 86px 0;
  }

  .join-steps p {
    font-size: 17px;
  }
}

/* Blog page */
.blog-page {
  --container: 1200px;
  background: #f8f8f8;
  color: #17051f;
}

.blog-page .site-header {
  position: sticky;
  background: #ffffff;
  box-shadow: none;
}

.blog-page .nav-wrap {
  min-height: 90px;
  grid-template-columns: auto 1fr auto auto;
  gap: 34px;
}

.blog-page .brand {
  font-size: 23px;
  color: #050505;
}

.blog-page .main-nav {
  justify-self: center;
  gap: 30px;
}

.blog-page .nav-menu-button,
.blog-page .nav-page-button {
  min-height: 38px;
  padding: 0 4px;
  border-radius: 999px;
  color: #17051f;
  font-size: 16px;
  font-weight: 500;
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.blog-page .nav-menu-button::after {
  border-top-color: currentColor;
}

.blog-page .nav-menu-button.active,
.blog-page .nav-menu-button:hover,
.blog-page .nav-page-button:hover {
  color: #008ff0;
  background: transparent;
}

.blog-page .lang-select {
  min-width: 92px;
}

.blog-page .lang-trigger {
  gap: 9px;
  color: #17051f;
  font-size: 16px;
}

.blog-page .lang-trigger > svg {
  width: 12px;
  height: 7px;
  fill: none;
}

.blog-page .lang-trigger > svg path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.blog-page .black-cta {
  min-height: 46px;
  padding: 0 31px;
  font-size: 16px;
}

.blog-main {
  min-height: 760px;
  padding: 0 0 104px;
  background: #f8f8f8;
}

.blog-categories {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-categories button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: #17213a;
  font-size: 14px;
  font-weight: 700;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.blog-categories button:first-child {
  color: #ffffff;
  background: #17051f;
}

.blog-categories button:hover {
  background: rgba(0, 143, 240, 0.08);
  color: #008ff0;
}

.blog-categories button:first-child:hover {
  color: #ffffff;
  background: #008ff0;
}

.blog-categories .blog-search {
  width: 34px;
  height: 34px;
  margin-left: auto;
  display: grid;
  place-items: center;
  color: #008ff0;
}

.blog-search svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 33px;
  padding-top: 16px;
}

.blog-post-card {
  overflow: hidden;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(25, 12, 31, 0.045);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.blog-post-card:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: 0 20px 42px rgba(25, 12, 31, 0.095);
}

.blog-post-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

.blog-post-card > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
}

.blog-post-card h2 {
  margin: 0 0 20px;
  color: #13051e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0;
}

.blog-post-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: auto 0 16px;
}

.blog-post-card p > span,
.blog-post-card time > span {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #e0e3e8;
  border-radius: 999px;
  color: #4c5663;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.blog-post-card time {
  color: #008ff0;
  font-size: 14px;
  font-weight: 800;
}

.blog-post-card time > span {
  color: #008ff0;
  background: rgba(0, 143, 240, 0.08);
  border-color: rgba(0, 143, 240, 0.16);
}

.blog-footer.site-footer {
  padding-top: 0;
  background: #211129;
}

.blog-footer .footer-top {
  min-height: 445px;
  grid-template-columns: 1.45fr 0.6fr 0.56fr 0.74fr;
  align-items: start;
  padding-top: 68px;
  padding-bottom: 42px;
}

.blog-footer .footer-top b {
  font-size: 21px;
}

.blog-footer .footer-top p,
.blog-footer .footer-top button {
  font-size: 13px;
}

.blog-footer .footer-bottom {
  padding-top: 34px;
}

.blog-footer .footer-logo {
  width: min(calc(100% - 48px), var(--container));
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  text-align: center;
  font-size: clamp(72px, 11.2vw, 150px);
  transform: none;
  overflow: hidden;
}

@media (max-width: 980px) {
  .blog-page .nav-wrap {
    grid-template-columns: auto 1fr auto;
  }

  .blog-page .main-nav {
    gap: 18px;
  }

  .blog-page .nav-menu-button,
  .blog-page .nav-page-button,
  .blog-page .lang-trigger {
    font-size: 14px;
  }

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

  .blog-footer .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .blog-page .site-header {
    position: sticky;
  }

  .blog-page .nav-wrap {
    width: 100%;
    min-height: 91px;
    display: flex;
    justify-content: flex-start;
    padding: 0 26px;
  }

  .blog-page .brand {
    font-size: 22px;
  }

  .blog-page .mega-menu:not(.open) {
    display: none;
  }

  .blog-page .main-nav,
  .blog-page .lang-select,
  .blog-page .nav-actions,
  .blog-categories {
    display: none;
  }

  .blog-main {
    padding-bottom: 78px;
  }

  .blog-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 26px;
  }

  .blog-post-card {
    width: 100%;
    min-height: 442px;
    border-radius: 9px;
  }

  .blog-post-card img {
    aspect-ratio: 1.6 / 1;
  }

  .blog-post-card > div {
    padding: 27px 24px 32px;
  }

  .blog-post-card h2 {
    font-size: 20px;
    line-height: 1.28;
  }

  .blog-footer .footer-top {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 52px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #ffffff;
  color: var(--ink);
  font-family:
    Arial, Helvetica, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

body,
button {
  overflow-wrap: anywhere;
}

button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

button,
a,
[data-page],
[data-auth-open] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(174, 255, 61, 0.6);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button,
[role="button"],
[data-page],
[data-auth-open] {
  cursor: pointer;
}

.account-btn,
.black-cta,
.lime-cta,
.tt-cta,
.vr-dark-cta,
.vr-lime-cta,
.auth-submit {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.account-btn:hover,
.black-cta:hover,
.lime-cta:hover,
.tt-cta:hover,
.vr-dark-cta:hover,
.vr-lime-cta:hover,
.auth-submit:hover {
  transform: translateY(-2px);
}

.account-btn:active,
.black-cta:active,
.lime-cta:active,
.tt-cta:active,
.vr-dark-cta:active,
.vr-lime-cta:active,
.auth-submit:active {
  transform: translateY(0) scale(0.98);
}

.black-cta:focus-visible,
.lime-cta:focus-visible,
.tt-cta:focus-visible,
.vr-dark-cta:focus-visible,
.vr-lime-cta:focus-visible,
.auth-submit:focus-visible {
  outline: 3px solid rgba(174, 255, 61, 0.72);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  :where(
      .feature-card,
      .blog-card,
      .case-card,
      .result-card,
      .pricing-card,
      .plan-card,
      .creator-card,
      .creator-video-card,
      .calc-card,
      .partners-benefit-grid article,
      .partners-three article,
      .partners-result-grid article,
      .target-grid article,
      .creator-step-grid article,
      .gami-work-grid article,
      .gami-points article,
      .gami-feature-grid article,
      .gami-case-grid article,
      .tg-case-grid article,
      .ai-card,
      .tt-card,
      .vr-card,
      .service-card
    ) {
    transition:
      transform 0.22s ease,
      box-shadow 0.22s ease,
      border-color 0.22s ease,
      filter 0.22s ease;
    will-change: transform;
  }

  :where(
      .feature-card,
      .blog-card,
      .case-card,
      .result-card,
      .pricing-card,
      .plan-card,
      .creator-card,
      .creator-video-card,
      .calc-card,
      .partners-benefit-grid article,
      .partners-three article,
      .partners-result-grid article,
      .target-grid article,
      .creator-step-grid article,
      .gami-work-grid article,
      .gami-points article,
      .gami-feature-grid article,
      .gami-case-grid article,
      .tg-case-grid article,
      .ai-card,
      .tt-card,
      .vr-card,
      .service-card
    ):hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 20px 48px rgba(33, 17, 41, 0.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Premium Knowledge Base */
.knowledge-page {
  --container: 1200px;
  --kb-bg: #f7f6f8;
  --kb-ink: #090909;
  --kb-muted: #5e5665;
  --kb-purple: #24152f;
  --kb-lime: #adff35;
  --kb-blue: #0796dd;
  --kb-pink: #e62391;
  background: var(--kb-bg);
  color: var(--kb-ink);
}

.knowledge-page .site-header {
  background: rgba(255, 255, 255, 0.98);
}

.kb-hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 72px;
  background:
    radial-gradient(circle at 82% 14%, rgba(173, 255, 53, 0.28), transparent 22%),
    linear-gradient(135deg, #1f1129 0%, #291436 56%, #0c0710 100%);
  color: #ffffff;
}

.kb-hero::before {
  content: "";
  position: absolute;
  inset: auto -6% -28% 48%;
  height: 430px;
  background: linear-gradient(135deg, #20a6ef 0%, #e550d0 60%, #ff3a8d 100%);
  clip-path: polygon(12% 0, 100% 0, 70% 46%, 100% 46%, 48% 100%, 58% 58%, 0 58%);
  opacity: 0.78;
}

.kb-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, 0.7fr);
  gap: 58px;
  align-items: center;
}

.kb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}

.kb-breadcrumb button {
  color: inherit;
  font: inherit;
  transition: color 0.18s ease;
}

.kb-breadcrumb button:hover {
  color: var(--kb-lime);
}

.kb-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(173, 255, 53, 0.16);
  color: var(--kb-lime);
  font-size: 13px;
  font-weight: 900;
}

.kb-hero h1,
.kb-section h2,
.kb-guides h2,
.kb-faq h2,
.kb-support h2 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.kb-hero h1 {
  max-width: 780px;
  margin-top: 18px;
  font-size: clamp(46px, 6vw, 82px);
  line-height: 0.98;
}

.kb-hero-copy > p {
  max-width: 670px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 22px;
  line-height: 1.35;
}

.kb-search {
  width: min(100%, 760px);
  min-height: 74px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
  padding: 10px 12px 10px 24px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.kb-search svg,
.kb-quick-icon svg,
.kb-panel-card svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kb-search svg {
  width: 27px;
  height: 27px;
  color: #1c1521;
}

.kb-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #111111;
  font-size: 19px;
  font-weight: 700;
  background: transparent;
}

.kb-search input::placeholder {
  color: #8d8791;
}

.kb-search button,
.knowledge-page .lime-button {
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--kb-lime);
  color: #050505;
  font-size: 16px;
  font-weight: 900;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.kb-search button:hover,
.knowledge-page .lime-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(173, 255, 53, 0.28);
  background: #baff45;
}

.kb-search button:active,
.knowledge-page .lime-button:active {
  transform: translateY(0) scale(0.98);
}

.kb-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.kb-suggestions span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 800;
}

.kb-suggestions button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.kb-suggestions button:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.kb-hero-panel {
  display: grid;
  gap: 18px;
}

.kb-panel-card,
.kb-panel-metrics {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.kb-panel-card {
  padding: 25px;
}

.kb-panel-card.is-primary {
  min-height: 190px;
  background: #ffffff;
  color: #12091a;
}

.kb-panel-card span {
  display: block;
  color: var(--kb-blue);
  font-weight: 900;
}

.kb-panel-card b {
  display: block;
  margin-top: 34px;
  font-size: 27px;
  line-height: 1.04;
}

.kb-panel-card p {
  margin: 12px 0 0;
  color: #5b5362;
  line-height: 1.45;
}

.kb-panel-card svg {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  color: var(--kb-lime);
}

.kb-panel-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}

.kb-panel-metrics div {
  padding: 22px 18px;
}

.kb-panel-metrics div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.kb-panel-metrics strong {
  display: block;
  font-size: 32px;
  font-weight: 900;
}

.kb-panel-metrics span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 800;
}

.kb-quick {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: -34px;
}

.kb-quick article,
.kb-category-grid article,
.kb-article-list article,
.kb-path-grid article,
.kb-support {
  border-radius: 24px;
  background: #ffffff;
  box-shadow:
    0 22px 70px rgba(28, 17, 36, 0.08),
    0 0 0 1px rgba(28, 17, 36, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.kb-quick article:hover,
.kb-category-grid article:hover,
.kb-article-list article:hover,
.kb-path-grid article:hover {
  transform: translateY(-5px);
  box-shadow:
    0 28px 88px rgba(28, 17, 36, 0.13),
    0 0 0 1px rgba(28, 17, 36, 0.06);
}

.kb-quick article {
  min-height: 205px;
  padding: 28px;
}

.kb-quick-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #111111;
}

.kb-quick-icon.lime {
  background: var(--kb-lime);
}

.kb-quick-icon.blue {
  background: #e0f4ff;
  color: var(--kb-blue);
}

.kb-quick-icon.pink {
  background: #ffe5f4;
  color: var(--kb-pink);
}

.kb-quick-icon svg {
  width: 27px;
  height: 27px;
}

.kb-quick h2 {
  margin: 24px 0 10px;
  font-size: 25px;
}

.kb-quick p,
.kb-category-grid p,
.kb-section-head p,
.kb-path-grid li,
.kb-support p {
  color: var(--kb-muted);
  line-height: 1.45;
}

.kb-section,
.kb-faq {
  padding: 110px 0 0;
}

.kb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 38px;
  margin-bottom: 34px;
}

.kb-section-head.compact {
  display: block;
  margin-bottom: 22px;
}

.kb-section-head h2 {
  margin-top: 16px;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1;
}

.kb-section-head p {
  max-width: 430px;
  margin: 0;
  font-size: 17px;
}

.kb-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.kb-category-grid article {
  position: relative;
  min-height: 236px;
  padding: 24px;
  overflow: hidden;
}

.kb-category-grid article::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -44px;
  width: 130px;
  height: 130px;
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(173, 255, 53, 0.32), rgba(0, 145, 221, 0.18));
  transform: rotate(16deg);
}

.kb-category-grid span {
  color: var(--kb-blue);
  font-weight: 900;
}

.kb-category-grid h3 {
  max-width: 230px;
  margin: 36px 0 10px;
  font-size: 24px;
  line-height: 1.04;
}

.kb-category-grid p {
  max-width: 240px;
  margin: 0;
}

.kb-category-grid b {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f4f2f6;
  font-size: 14px;
}

.kb-guides {
  margin-top: 110px;
  padding: 86px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f1eff3 100%);
}

.kb-guides-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.kb-guide-column {
  padding: 34px;
  border-radius: 28px;
  background: #ffffff;
}

.kb-guide-column.accent {
  background: #24152f;
  color: #ffffff;
}

.kb-guide-column.accent .kb-eyebrow {
  background: rgba(255, 255, 255, 0.1);
}

.kb-guide-column.accent .kb-article-list article {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.kb-guide-column.accent .kb-article-list h3,
.kb-guide-column.accent .kb-article-list p {
  color: #ffffff;
}

.kb-article-list {
  display: grid;
  gap: 14px;
}

.kb-article-list article {
  min-height: 118px;
  padding: 22px 24px;
}

.kb-article-list span {
  color: var(--kb-blue);
  font-size: 13px;
  font-weight: 900;
}

.kb-article-list h3 {
  margin: 8px 0 12px;
  font-size: 22px;
  line-height: 1.16;
}

.kb-article-list p {
  margin: 0;
  color: var(--kb-muted);
  font-size: 14px;
  font-weight: 800;
}

.kb-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.kb-path-grid article {
  padding: 30px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(173, 255, 53, 0.9), rgba(0, 145, 221, 0.35), rgba(230, 35, 145, 0.45)) border-box;
  border: 1px solid transparent;
}

.kb-path-grid small {
  color: var(--kb-pink);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.kb-path-grid h3 {
  margin: 18px 0 22px;
  font-size: 28px;
  line-height: 1.06;
}

.kb-path-grid ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-path-grid li {
  position: relative;
  padding-left: 26px;
}

.kb-path-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kb-lime);
  box-shadow: inset 0 0 0 3px #101010;
}

.kb-faq {
  padding-bottom: 0;
}

.kb-faq .faq-item {
  background: #ffffff;
}

.kb-faq .faq-item button {
  grid-template-columns: minmax(0, 1fr) 42px;
  text-align: left;
}

.kb-faq .faq-item button > span:last-child {
  width: auto;
  height: auto;
  position: static;
  border-radius: 0;
  background: transparent;
}

.kb-faq .faq-item button > span:last-child::before,
.kb-faq .faq-item button > span:last-child::after {
  display: none;
}

.kb-faq .faq-item button b {
  width: 42px;
  height: 42px;
  position: relative;
  border-radius: 50%;
  background: #000000;
}

.kb-faq .faq-item button b::before,
.kb-faq .faq-item button b::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 20px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
}

.kb-faq .faq-item button b::after {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.kb-faq .faq-item.open button b::after {
  transform: rotate(0);
}

.kb-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 96px;
  margin-bottom: 96px;
  padding: 42px;
  background:
    radial-gradient(circle at 82% 16%, rgba(173, 255, 53, 0.38), transparent 22%),
    #24152f;
  color: #ffffff;
}

.kb-support h2 {
  max-width: 680px;
  margin-top: 16px;
  font-size: clamp(34px, 4.7vw, 56px);
  line-height: 1;
}

.kb-support p {
  max-width: 580px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 18px;
}

.knowledge-page .lime-button {
  flex: 0 0 auto;
  min-width: 170px;
}

@media (max-width: 1040px) {
  .kb-hero-grid,
  .kb-guides-grid {
    grid-template-columns: 1fr;
  }

  .kb-hero-panel {
    max-width: 620px;
  }

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

  .kb-path-grid,
  .kb-quick {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .knowledge-page .nav-wrap {
    grid-template-columns: auto 1fr;
  }

  .knowledge-page .main-nav,
  .knowledge-page .nav-actions {
    display: none;
  }

  .knowledge-page .lang-select {
    justify-self: end;
  }

  .kb-hero {
    padding: 46px 0 54px;
  }

  .kb-breadcrumb {
    margin-bottom: 22px;
  }

  .kb-hero h1 {
    font-size: 42px;
  }

  .kb-hero-copy > p {
    font-size: 18px;
  }

  .kb-search {
    grid-template-columns: auto 1fr;
    min-height: auto;
    padding: 18px;
    border-radius: 18px;
  }

  .kb-search button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .kb-panel-metrics {
    grid-template-columns: 1fr;
  }

  .kb-panel-metrics div + div {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .kb-quick {
    margin-top: -20px;
  }

  .kb-section,
  .kb-faq {
    padding-top: 72px;
  }

  .kb-section-head {
    display: block;
  }

  .kb-section-head h2 {
    font-size: 38px;
  }

  .kb-section-head p {
    margin-top: 16px;
  }

  .kb-category-grid {
    grid-template-columns: 1fr;
  }

  .kb-guides {
    margin-top: 74px;
    padding: 58px 0;
  }

  .kb-guide-column {
    padding: 22px;
  }

  .kb-article-list h3 {
    font-size: 20px;
  }

  .kb-path-grid h3 {
    font-size: 24px;
  }

  .kb-support {
    display: block;
    padding: 30px;
  }

  .knowledge-page .lime-button {
    width: 100%;
    margin-top: 24px;
  }
}

.page-container {
  width: min(calc(100% - 48px), var(--container));
  margin: 0 auto;
}

.page-container.wide {
  width: min(100%, 1600px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.nav-wrap {
  width: min(calc(100% - 48px), var(--container));
  min-height: 82px;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 26px;
  margin: 0 auto;
}

.brand,
.footer-logo {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  transform: skewX(-10deg);
}

.lang-trigger,
.main-nav button {
  font-size: 14px;
}

.nav-menu-button::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.18s ease;
}

.nav-menu-button.active::after {
  transform: rotate(225deg) translateY(1px);
}

.lang-select {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.lang-trigger {
  min-width: 92px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #111111;
  font-size: 14px;
  font-weight: 850;
  box-shadow:
    0 14px 34px rgba(33, 17, 41, 0.1),
    inset 0 0 0 1px rgba(33, 17, 41, 0.08);
  backdrop-filter: blur(18px);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.lang-trigger [data-current-lang] {
  white-space: nowrap;
}

.lang-trigger:hover {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow:
    0 18px 38px rgba(33, 17, 41, 0.14),
    inset 0 0 0 1px rgba(33, 17, 41, 0.08);
}

.lang-trigger::after {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 1.8px solid currentColor;
  border-top: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(2px);
  transition: transform 0.2s ease;
}

.lang-select.open .lang-trigger::after {
  transform: rotate(225deg) translateY(-2px);
}

.lang-menu {
  position: absolute;
  top: 66px;
  left: 50%;
  z-index: 120;
  width: 126px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 24px 70px rgba(33, 17, 41, 0.22),
    0 0 0 1px rgba(33, 17, 41, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px) scale(0.98);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
  visibility: hidden;
}

.lang-select.open .lang-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  visibility: visible;
}

.lang-menu button {
  min-height: 44px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 12px;
  color: #111111;
  font-size: 14px;
  font-weight: 850;
  text-align: left;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.lang-menu button:hover,
.lang-menu button.active {
  background: #f4f2f6;
}

.lang-menu button:hover {
  transform: translateX(2px);
}

.lang-menu button.active::after {
  content: "";
  width: 7px;
  height: 12px;
  justify-self: end;
  border-right: 2px solid #111111;
  border-bottom: 2px solid #111111;
  transform: rotate(45deg);
  grid-column: 3;
  grid-row: 1;
}

.lang-flag {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 7px 18px rgba(33, 17, 41, 0.12),
    0 0 0 1px rgba(33, 17, 41, 0.08);
}

.lang-flag svg,
.gamification-page .lang-trigger .lang-flag svg {
  width: 24px !important;
  height: 16px !important;
  display: block !important;
  border-radius: 3px;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.main-nav button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}

.main-nav button:hover,
.main-nav button.active {
  background: #f5f3f7;
}

.nav-page-button:hover {
  transform: translateY(-1px);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-btn {
  width: 44px;
  height: 44px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
}

.account-btn svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.black-cta {
  min-height: 46px;
  max-width: 260px;
  padding: 0 40px;
  border-radius: 999px;
  background: var(--black);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 82px;
  z-index: 90;
  min-height: 235px;
  padding: 58px 24px 56px;
  border-top: 1px solid #ece9ee;
  background: #ffffff;
  box-shadow: 0 22px 40px rgba(33, 17, 41, 0.05);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.mega-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-grid {
  width: min(100%, var(--container));
  display: grid;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
}

.products-grid {
  grid-template-columns: repeat(7, minmax(128px, 1fr));
  gap: 16px;
}

[data-mega-panel="products"] .mega-icon {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

[data-mega-panel="products"] .mega-icon svg {
  display: none;
}

[data-mega-panel="products"] .mega-item[data-page="instagram"] .mega-icon {
  background-image: url("./assets/product-icon-instagram.png");
}

[data-mega-panel="products"] .mega-item[data-page="telegram"] .mega-icon {
  background-image: url("./assets/product-icon-telegram.png");
}

[data-mega-panel="products"] .mega-item[data-page="tiktok"] .mega-icon {
  background-image: url("./assets/product-icon-tiktok.png");
}

[data-mega-panel="products"] .mega-item[data-page="virale"] .mega-icon {
  background-image: url("./assets/product-icon-virale.png");
}

[data-mega-panel="products"] .mega-item[data-page="ai-agent"] .mega-icon {
  background-image: url("./assets/product-icon-ai-manager.png");
}

[data-mega-panel="products"] .mega-item[data-page="gamification-instagram"] .mega-icon {
  background-image: url("./assets/product-icon-gamification-instagram.png");
}

[data-mega-panel="products"] .mega-item[data-page="gamification-telegram"] .mega-icon {
  background-image: url("./assets/product-icon-gamification-telegram.png");
}

.partners-grid {
  grid-template-columns: repeat(2, 156px);
  gap: 54px;
}

.resources-grid {
  grid-template-columns: repeat(4, 156px);
  gap: 52px;
}

.mega-item {
  min-height: 112px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 22px;
  color: #141414;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 500;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}

.mega-item.has-composite-label > span[data-i18n]:not(.mega-label),
.mega-item.has-composite-label > br {
  display: none;
}

.mega-label {
  max-width: 170px;
  display: block;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}

html[lang="en"] .mega-label {
  max-width: none;
  font-size: 15px;
  white-space: nowrap;
}

.mega-item:hover {
  transform: translateY(-4px);
}

.mega-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f6f4f8;
}

.mega-icon svg {
  width: 25px;
  height: 25px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mega-icon.pink {
  color: #ed2497;
}

.mega-icon.blue {
  color: #138fdf;
}

.mega-icon.dark,
.mega-icon.black {
  color: #111111;
}

.mega-icon.coral {
  color: #ff6657;
}

.mega-icon.purple {
  color: var(--purple);
}

.mega-icon.violet {
  color: #8a10ee;
}

.mega-icon.pink-outline {
  color: #ff4eaf;
}

.mega-icon.pink svg .icon-fill,
.mega-icon.pink-outline svg .icon-fill,
.mega-icon.violet svg .icon-fill,
.mega-icon.coral svg .icon-fill,
.mega-icon.purple svg .icon-fill,
.mega-icon.blue svg .icon-fill,
.mega-icon.black svg .icon-fill {
  fill: currentColor;
  stroke: currentColor;
}

.mega-icon svg .icon-white {
  stroke: #ffffff;
}

.mega-icon svg .icon-white-fill {
  fill: #ffffff;
  stroke: #ffffff;
}

.mega-icon svg .icon-cyan {
  stroke: #25f4ee;
}

.mega-icon svg .icon-red {
  stroke: #fe2c55;
}

.promo-strip {
  min-height: 52px;
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #ffffff;
}

.promo-inner {
  max-width: calc(100vw - 32px);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.promo-inner span {
  display: inline-grid;
  place-items: center;
  min-height: 21px;
  margin-right: 8px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
}

.hero-section {
  position: relative;
  min-height: 842px;
  overflow: hidden;
  background: #ffffff;
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 84px 0 0;
  text-align: center;
}

.hero-copy h1,
.discover-section h2,
.community-section h2,
.features-section h2,
.results-section h2,
.articles-section h2,
.faq-section h2 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.hero-copy h1 {
  max-width: 1130px;
  margin: 0 auto;
  font-size: 67px;
  line-height: 0.98;
}

.hero-copy p {
  max-width: 680px;
  margin: 34px auto 42px;
  color: #1f2933;
  font-size: 24px;
  line-height: 1.23;
}

.lime-cta {
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 0 14px 0 26px;
  max-width: 100%;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: var(--lime);
  color: #000000;
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.lime-cta > span:first-child {
  min-width: 0;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lime-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(120, 220, 20, 0.3);
}

.arrow-dot {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #000000;
}

.arrow-dot::before,
.arrow-dot::after {
  content: "";
  position: absolute;
  background: var(--lime);
}

.arrow-dot::before {
  width: 18px;
  height: 4px;
  left: 11px;
  top: 50%;
  border-radius: 999px;
  transform: translateY(-50%);
}

.arrow-dot::after {
  width: 12px;
  height: 12px;
  right: 11px;
  top: 50%;
  border-top: 4px solid var(--lime);
  border-right: 4px solid var(--lime);
  background: transparent;
  transform: translateY(-50%) rotate(45deg);
}

.magenta-rise {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 250px;
  background: var(--pink);
  clip-path: polygon(0 48%, 72% 0, 72% 32%, 100% 16%, 100% 100%, 0 100%);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 84px;
}

.two-col > * {
  min-width: 0;
}

.two-col.reverse {
  grid-template-columns: 0.82fr 1fr;
}

.pink-section,
.plum-section,
.blue-section {
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.pink-section {
  min-height: 820px;
  display: flex;
  align-items: center;
  background: var(--pink);
}

.pink-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 130px;
  background: var(--plum);
  clip-path: polygon(0 0, 27% 60%, 27% 0, 89% 100%, 100% 100%, 100% 100%, 0 100%);
}

.plum-section {
  min-height: 820px;
  display: flex;
  align-items: center;
  background: var(--plum);
}

.plum-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 132px;
  background: var(--pink);
  clip-path: polygon(0 0, 27% 49%, 27% 0, 100% 100%, 100% 0);
}

.plum-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 150px;
  background: var(--blue);
  clip-path: polygon(0 0, 82% 100%, 82% 48%, 100% 76%, 100% 100%, 0 100%);
}

.blue-section {
  min-height: 860px;
  display: flex;
  align-items: center;
  background: var(--blue);
}

.blue-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 136px;
  background: var(--plum);
  clip-path: polygon(0 0, 82% 100%, 82% 42%, 100% 76%, 100% 0);
}

.blue-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 145px;
  background: #ffffff;
  clip-path: polygon(0 100%, 58% 28%, 58% 64%, 100% 0, 100% 100%);
}

.pink-section .page-container,
.plum-section .page-container,
.blue-section .page-container {
  position: relative;
  z-index: 2;
}

.white-copy h2 {
  margin: 0 0 48px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 52px;
  line-height: 0.94;
}

.bullet-list {
  display: grid;
  gap: 32px;
}

.bullet-list p {
  position: relative;
  margin: 0;
  padding-left: 32px;
  font-size: 22px;
  line-height: 1.28;
}

.bullet-list p > span:first-child {
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
}

.bullet-list p > span:first-child::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 7px;
  height: 4px;
  border-left: 3px solid var(--pink);
  border-bottom: 3px solid var(--pink);
  transform: rotate(-45deg);
}

.blue-section .bullet-list p > span:first-child::before {
  border-color: var(--blue);
}

.bullet-list b {
  display: block;
  font-weight: 900;
}

.notification-stack {
  position: relative;
  min-height: 310px;
  isolation: isolate;
}

.follow-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 18px;
  width: min(100%, 460px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 20px 45px rgba(106, 0, 78, 0.16);
  color: #4f2442;
  font-size: 19px;
  line-height: 1.2;
  backdrop-filter: blur(8px);
}

.follow-card.main {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  margin: 18px 0 18px -54px;
  padding: 34px 28px;
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(86, 0, 62, 0.22);
  color: #171717;
  font-size: 23px;
}

.follow-card.bottom {
  margin-left: 54px;
}

.follow-card p {
  margin: 0;
}

.follow-card em {
  color: rgba(0, 0, 0, 0.28);
  font-style: normal;
}

.pink-section .white-copy {
  animation: subscribersCopyIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pink-section .bullet-list p {
  animation: subscribersBulletIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pink-section .bullet-list p:nth-child(1) {
  animation-delay: 0.12s;
}

.pink-section .bullet-list p:nth-child(2) {
  animation-delay: 0.24s;
}

.pink-section .notification-stack {
  min-height: 432px;
  animation: subscribersStackIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.pink-section .follow-card {
  position: absolute;
  top: 0;
  left: 56px;
  width: min(100%, 420px);
  min-height: 104px;
  margin: 0;
  padding: 24px;
  opacity: 0.56;
  font-size: 19px;
  will-change: top, left, width, opacity, background-color, color;
  animation: followCardCycle 7.2s ease-in-out infinite;
}

.pink-section .follow-card.main,
.pink-section .follow-card.bottom {
  width: min(100%, 420px);
  margin: 0;
  padding: 24px;
}

.pink-section .follow-card:nth-child(1) {
  top: 0;
  left: 56px;
}

.pink-section .follow-card.main {
  top: 130px;
  left: 0;
  z-index: 3;
  width: min(100%, 520px);
  min-height: 140px;
  padding: 34px 28px;
  background: #ffffff;
  color: #171717;
  font-size: 23px;
  animation-delay: -2.4s;
}

.pink-section .follow-card.bottom {
  top: 294px;
  left: 56px;
  animation-delay: -4.8s;
}

@keyframes subscribersCopyIn {
  from {
    opacity: 0;
    transform: translate3d(-42px, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pink-section .white-copy,
  .pink-section .bullet-list p,
  .pink-section .notification-stack,
  .pink-section .follow-card {
    animation: none;
  }
}

@keyframes subscribersBulletIn {
  from {
    opacity: 0;
    transform: translate3d(-28px, 16px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes subscribersStackIn {
  from {
    opacity: 0;
    transform: translate3d(52px, 20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes followCardCycle {
  0%,
  16% {
    z-index: 1;
    opacity: 0.56;
    top: 0;
    left: 56px;
    width: min(100%, 420px);
    min-height: 104px;
    padding: 24px;
    font-size: 19px;
    background: rgba(255, 255, 255, 0.58);
    color: #4f2442;
  }

  28%,
  48% {
    z-index: 3;
    opacity: 1;
    top: 130px;
    left: 0;
    width: min(100%, 520px);
    min-height: 140px;
    padding: 34px 28px;
    font-size: 23px;
    background: #ffffff;
    color: #171717;
  }

  60%,
  80% {
    z-index: 1;
    opacity: 0.56;
    top: 294px;
    left: 56px;
    width: min(100%, 420px);
    min-height: 104px;
    padding: 24px;
    font-size: 19px;
    background: rgba(255, 255, 255, 0.58);
    color: #4f2442;
  }

  100% {
    z-index: 0;
    opacity: 0;
    top: 376px;
    left: 56px;
    width: min(100%, 420px);
    min-height: 104px;
    padding: 24px;
    font-size: 19px;
    background: rgba(255, 255, 255, 0.42);
    color: #4f2442;
  }
}

.mini-person {
  box-sizing: border-box;
  display: inline-block;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.7);
  background:
    url("./assets/avatar-max.svg") center / cover no-repeat,
    radial-gradient(circle at 50% 28%, #ffd0b2 0 14%, transparent 15%),
    radial-gradient(circle at 50% 48%, #6b2d55 0 22%, transparent 23%),
    linear-gradient(135deg, #a64af0, #f768aa);
  box-shadow:
    0 12px 22px rgba(80, 0, 68, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.mini-person.p2 {
  background:
    url("./assets/avatar-mary.svg") center / cover no-repeat,
    radial-gradient(circle at 50% 28%, #ffe0bd 0 14%, transparent 15%),
    radial-gradient(circle at 50% 48%, #f7f0e7 0 22%, transparent 23%),
    linear-gradient(135deg, #b2ff50, #4dd0ff);
}

.mini-person.p3 {
  background:
    url("./assets/avatar-leo.svg") center / cover no-repeat,
    radial-gradient(circle at 50% 28%, #ffc8ad 0 14%, transparent 15%),
    radial-gradient(circle at 50% 48%, #7f2954 0 22%, transparent 23%),
    linear-gradient(135deg, #df2b9e, #9f69ff);
}

.ai-card {
  width: min(100%, 455px);
  height: 455px;
  min-height: 455px;
  position: relative;
  padding: 0;
  border-radius: 32px;
  background: #ffffff;
  color: #22172b;
  box-shadow: 0 34px 80px rgba(29, 0, 23, 0.2);
  overflow: hidden;
}

.ai-card::before,
.ai-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 86px;
  pointer-events: none;
}

.ai-card::before {
  top: 0;
  background: linear-gradient(180deg, #ffffff 24%, rgba(255, 255, 255, 0));
}

.ai-card::after {
  bottom: 0;
  background: linear-gradient(0deg, #ffffff 24%, rgba(255, 255, 255, 0));
}

.ai-chat-stream {
  position: absolute;
  inset: 0;
  padding: 80px 74px 72px;
  animation: aiChatStream 8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.ai-message-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin: 26px 0;
}

.ai-message-row.second {
  margin-top: 24px;
}

.ai-bot-avatar {
  width: 40px;
  height: 40px;
  position: relative;
  display: inline-block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 46%, #5f4331 0 7%, transparent 8%),
    radial-gradient(circle at 50% 45%, #f3eee5 0 24%, transparent 25%),
    linear-gradient(145deg, #eff8d8, #cfd9b4);
  box-shadow: 0 11px 24px rgba(43, 0, 35, 0.16);
}

.ai-bot-avatar::before,
.ai-bot-avatar::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  height: 8px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(90deg, #3a2726, #71513a, #3a2726);
}

.ai-bot-avatar::before {
  top: 13px;
}

.ai-bot-avatar::after {
  top: 21px;
}

.ai-bubble {
  max-width: 230px;
  padding: 17px 18px;
  border-radius: 17px;
  font-size: 16px;
  line-height: 1.22;
  box-shadow: 0 16px 36px rgba(55, 31, 63, 0.1);
}

.ai-bubble.user {
  margin-left: auto;
  border-bottom-right-radius: 4px;
  background: var(--plum);
  color: #ffffff;
}

.ai-bubble.user.second {
  max-width: 248px;
}

.ai-bubble.bot {
  max-width: 242px;
  border-bottom-left-radius: 4px;
  background: #eeeaf3;
  color: #22172b;
}

.ai-typing {
  width: 76px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 34px 0 0 52px;
  border-radius: 16px;
  background: #eeeaf3;
  animation: aiTypingBubble 8s ease-in-out infinite;
}

.ai-typing span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #bbb4c5;
  animation: aiTypingDot 1s ease-in-out infinite;
}

.ai-typing span:nth-child(2) {
  animation-delay: 0.16s;
}

.ai-typing span:nth-child(3) {
  animation-delay: 0.32s;
}

.ai-bubble.ghost {
  width: 320px;
  max-width: 100%;
  min-height: 58px;
  margin: 96px auto 0;
  color: rgba(34, 23, 43, 0.18);
  background: rgba(245, 243, 248, 0.82);
  box-shadow: none;
  animation: aiGhostPrompt 8s ease-in-out infinite;
}

.plum-section .white-copy {
  animation: aiCopyIn 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.plum-section .bullet-list p {
  animation: aiBulletIn 0.66s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.plum-section .bullet-list p:nth-child(1) {
  animation-delay: 0.14s;
}

.plum-section .bullet-list p:nth-child(2) {
  animation-delay: 0.26s;
}

.plum-section .lime-cta {
  animation: aiButtonIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both;
}

@keyframes aiChatStream {
  0% {
    opacity: 0;
    transform: translate3d(0, 42px, 0);
  }

  8% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  24% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  42% {
    opacity: 1;
    transform: translate3d(0, -166px, 0);
  }

  70% {
    opacity: 1;
    transform: translate3d(0, -248px, 0);
  }

  86% {
    opacity: 1;
    transform: translate3d(0, -360px, 0);
  }

  96%,
  100% {
    opacity: 0;
    transform: translate3d(0, -420px, 0);
  }
}

@keyframes aiTypingBubble {
  0%,
  12% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes aiTypingDot {
  0%,
  80%,
  100% {
    opacity: 0.36;
    transform: scale(0.72);
  }

  38% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes aiGhostPrompt {
  0%,
  84% {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }

  92%,
  100% {
    opacity: 0.65;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes aiCopyIn {
  from {
    opacity: 0;
    transform: translate3d(46px, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes aiBulletIn {
  from {
    opacity: 0;
    transform: translate3d(30px, 16px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes aiButtonIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.lime-cta.wide {
  margin-top: 48px;
  padding: 0 44px;
}

.leader-phone {
  display: grid;
  justify-content: center;
}

.phone-shell {
  width: 385px;
  height: 485px;
  position: relative;
  padding: 16px;
  border: 4px solid rgba(255, 255, 255, 0.55);
  border-radius: 48px 48px 0 0;
  background: #0b0b0b;
  box-shadow:
    0 8px 0 rgba(255, 255, 255, 0.32) inset,
    0 28px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.phone-camera {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 3;
  width: 108px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #020202;
}

.phone-camera::before,
.phone-camera::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #152132;
}

.phone-camera::before {
  left: 18px;
}

.phone-camera::after {
  right: 18px;
}

.phone-ui {
  height: 100%;
  padding: 78px 22px 30px;
  border-radius: 32px 32px 0 0;
  background: linear-gradient(145deg, #1138f5, #0754df);
  color: #ffffff;
  overflow: hidden;
}

.phone-toprow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34px;
}

.phone-toprow span {
  width: 18px;
  height: 12px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

.phone-toprow button {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #ffffff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.phone-ui small {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

.phone-ui h3 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 900;
}

.phone-search {
  margin-bottom: 18px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.86);
}

.score-row {
  display: grid;
  grid-template-columns: 1fr 44px 44px 44px;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  font-size: 13px;
}

.score-row.head {
  border-top: 0;
  font-weight: 700;
}

.score-row.fade {
  opacity: 0.36;
}

.discover-section {
  padding: 104px 0 118px;
  background: #ffffff;
}

.discover-section h2 {
  max-width: 900px;
  margin: 0 auto 76px;
  text-align: center;
  font-size: 64px;
  line-height: 1.04;
}

.platform-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 92px;
  align-items: center;
}

.platform-tabs {
  display: grid;
  align-content: start;
}

.platform-tabs > button:not(.lime-cta) {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  color: #b9b9b9;
  font-size: 48px;
  font-weight: 900;
  text-align: left;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.platform-tabs > button.active,
.platform-tabs > button:not(.lime-cta):hover {
  color: #000000;
  transform: translateX(4px);
}

.social-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.social-icon.instagram {
  background: linear-gradient(135deg, #ffd44d, #ff1b8d 50%, #6638ff);
}

.social-icon.telegram {
  border-radius: 50%;
  background: #27a8e8;
}

.social-icon.tiktok {
  background: #13131a;
  box-shadow: 4px 0 #ff3b75 inset, -4px 0 #22e6db inset;
}

.platform-tabs p {
  max-width: 450px;
  min-height: 104px;
  margin: 22px 0 26px;
  color: #444444;
  font-size: 18px;
  line-height: 1.35;
}

.lime-cta.small {
  min-height: 60px;
  padding: 0 36px;
  font-size: 19px;
  justify-self: start;
}

.platform-visual {
  position: relative;
  min-height: 420px;
  border-radius: 26px;
  background:
    linear-gradient(118deg, transparent 0 52%, var(--plum) 52% 100%),
    linear-gradient(64deg, var(--pink) 0 34%, transparent 34% 100%),
    var(--soft);
  overflow: hidden;
}

.platform-visual[data-current="telegram"] {
  background:
    linear-gradient(118deg, transparent 0 52%, var(--plum-dark) 52% 100%),
    linear-gradient(64deg, #2daeea 0 34%, transparent 34% 100%),
    var(--soft);
}

.platform-visual[data-current="tiktok"] {
  background:
    linear-gradient(118deg, transparent 0 52%, var(--plum-dark) 52% 100%),
    linear-gradient(64deg, #28d6d0 0 34%, transparent 34% 100%),
    var(--soft);
}

.visual-phone {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 295px;
  height: 326px;
  transform: translateX(-50%);
  padding: 48px 18px 18px;
  border: 8px solid #060606;
  border-bottom: 0;
  border-radius: 38px 38px 0 0;
  background: #ffffff;
}

.phone-camera.dark {
  top: 14px;
  width: 82px;
  height: 28px;
}

.visual-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #2b2531;
  font-size: 12px;
}

.back-mark {
  width: 10px;
  height: 10px;
  display: block;
  border-left: 3px solid #151515;
  border-bottom: 3px solid #151515;
  transform: rotate(45deg);
}

.tiny-actions {
  margin-left: auto;
  width: 44px;
  height: 14px;
  border-radius: 999px;
  background: #f0eef3;
}

.visual-feed {
  height: 230px;
  border-radius: 16px;
  background: linear-gradient(#e8e8ee 0 42%, #ffffff 42% 100%);
  display: grid;
  place-items: end center;
  padding-bottom: 15px;
}

.product-circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #e4dacd 0 18%, #242124 19% 31%, transparent 32%),
    conic-gradient(#c4b8aa, #f6f0e9, #888078, #d4c9bf, #c4b8aa);
  border: 8px solid #ece5dc;
}

.visual-card {
  position: absolute;
  left: 112px;
  top: 180px;
  z-index: 4;
  width: 300px;
  padding: 20px 24px;
  border-radius: 18px;
  background: #ffffff;
  color: #2e2534;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  box-shadow: 0 18px 40px rgba(30, 13, 42, 0.12);
}

.visual-card span {
  display: block;
  margin-top: 14px;
  font-weight: 400;
}

.visual-floating {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
}

.visual-floating.one {
  right: 108px;
  top: 92px;
  width: 86px;
  height: 86px;
  background: #0797de;
  color: #ffffff;
  font-size: 0;
}

.visual-floating.one::before {
  content: "";
  width: 34px;
  height: 34px;
  background: #ffffff;
  clip-path: polygon(50% 84%, 8% 42%, 8% 18%, 28% 4%, 50% 18%, 72% 4%, 92% 18%, 92% 42%);
}

.visual-floating.two {
  right: 95px;
  bottom: 34px;
  width: 92px;
  height: 92px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 58% 36%, #f0c6a9 0 18%, transparent 19%),
    linear-gradient(135deg, #ffffff, #ffffff);
}

.platform-visual[data-current="telegram"] .visual-floating.one {
  right: auto;
  left: 70px;
  top: 260px;
  width: 82px;
  height: 82px;
  border-radius: 18px;
  background: #ffffff;
}

.platform-visual[data-current="telegram"] .visual-floating.one::before {
  width: 42px;
  height: 34px;
  background: #27a8e8;
  clip-path: polygon(0 48%, 100% 0, 72% 100%, 48% 66%, 23% 84%);
}

.platform-visual[data-current="telegram"] .visual-floating.two {
  right: auto;
  left: 160px;
  bottom: 62px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  color: #d8d5df;
  font-size: 44px;
}

.platform-visual[data-current="tiktok"] .visual-floating.one {
  right: 142px;
  top: 100px;
  width: 68px;
  height: 68px;
  background: #ff4a99;
}

.platform-visual[data-current="tiktok"] .visual-floating.one::before {
  width: 28px;
  height: 28px;
  background: #ffffff;
  clip-path: polygon(35% 0, 65% 0, 65% 42%, 92% 42%, 100% 100%, 0 100%, 8% 42%, 35% 42%);
}

.platform-visual[data-current="tiktok"] .visual-floating.two {
  right: 68px;
  top: 100px;
  bottom: auto;
  width: 68px;
  height: 68px;
  border-radius: 14px;
  background: var(--purple);
  color: #ffffff;
  font-size: 34px;
  font-weight: 900;
}

.platform-visual[data-current="tiktok"] .visual-card {
  top: 200px;
  left: 140px;
}

.community-section {
  padding: 245px 0 120px;
  text-align: center;
  overflow: hidden;
}

.community-section h2 {
  font-size: 132px;
  line-height: 0.86;
}

.community-section p {
  margin: 40px auto 72px;
  font-size: 30px;
  line-height: 1.2;
}

.people-row {
  display: flex;
  justify-content: flex-start;
  gap: 28px;
  width: max-content;
  min-width: 100%;
  margin: 0 0 52px calc((100% - 100vw) / 2 - 112px);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.person-avatar {
  position: relative;
  width: 182px;
  height: 182px;
  flex: 0 0 182px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 26%, #edc09f 0 13%, transparent 14%),
    radial-gradient(ellipse at 50% 62%, #11121d 0 28%, transparent 29%),
    linear-gradient(135deg, #a996ff, #ebe6ff);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.03);
}

.person-avatar::before,
.person-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.person-avatar::before {
  top: 26px;
  width: 46px;
  height: 52px;
  border-radius: 50% 50% 45% 45%;
  background:
    radial-gradient(circle at 35% 42%, #2c1e18 0 3%, transparent 4%),
    radial-gradient(circle at 65% 42%, #2c1e18 0 3%, transparent 4%),
    linear-gradient(#f4c29e, #d99670);
  box-shadow:
    -17px 3px 0 -7px rgba(42, 28, 26, 0.28),
    17px 3px 0 -7px rgba(42, 28, 26, 0.28);
}

.person-avatar::after {
  bottom: -16px;
  width: 82px;
  height: 82px;
  border-radius: 46% 46% 0 0;
  background: #151520;
}

.person-avatar.v1 {
  background:
    radial-gradient(circle at 22% 34%, #f6f1d9 0 8%, transparent 9%),
    radial-gradient(ellipse at 50% 80%, #f6dfc9 0 28%, transparent 29%),
    linear-gradient(135deg, #0b9ed7, #0c9ed7);
}

.person-avatar.v1::before {
  background:
    radial-gradient(circle at 35% 42%, #3b2119 0 3%, transparent 4%),
    radial-gradient(circle at 65% 42%, #3b2119 0 3%, transparent 4%),
    linear-gradient(#e3a27c, #b66a49);
  box-shadow:
    -22px 0 0 -5px #332015,
    22px 0 0 -5px #332015,
    0 -13px 0 -2px #2b1a13;
}

.person-avatar.v1::after {
  background: #ffffff;
}

.person-avatar.v2 {
  background:
    radial-gradient(ellipse at 50% 90%, #ffffff 0 28%, transparent 29%),
    linear-gradient(135deg, #aa95ff, #d9d2ff);
}

.person-avatar.v2::before {
  box-shadow:
    -19px -7px 0 -5px #17151a,
    19px -7px 0 -5px #17151a,
    0 -18px 0 7px #17151a;
}

.person-avatar.v2::after {
  background: #151520;
}

.person-avatar.v3 {
  background:
    radial-gradient(ellipse at 50% 78%, #ffffff 0 32%, transparent 33%),
    linear-gradient(135deg, #ff54bc, #f3f3f3);
  filter: grayscale(0.65);
}

.person-avatar.v3::before {
  box-shadow:
    -20px -3px 0 -5px #151515,
    20px -3px 0 -5px #151515,
    0 -15px 0 4px #151515;
}

.person-avatar.v3::after {
  background: #f7f7f7;
}

.person-avatar.v4 {
  background:
    radial-gradient(ellipse at 50% 84%, #f8a0b5 0 31%, transparent 32%),
    linear-gradient(135deg, #24122c, #f4c7dd);
}

.person-avatar.v4::before {
  box-shadow:
    -18px -5px 0 -6px #6d2b32,
    18px -5px 0 -6px #6d2b32,
    0 -13px 0 4px #7b2d37;
}

.person-avatar.v4::after {
  background: #f1a1b8;
}

.person-avatar.v5 {
  background:
    radial-gradient(ellipse at 50% 84%, #c98c76 0 31%, transparent 32%),
    linear-gradient(135deg, #0aa2df, #bfefff);
}

.person-avatar.v5::before {
  box-shadow:
    -20px -3px 0 -5px #bb765f,
    20px -3px 0 -5px #bb765f,
    0 -15px 0 3px #b36d59;
}

.person-avatar.v5::after {
  background: #c98970;
}

.person-avatar.v6 {
  background:
    radial-gradient(ellipse at 50% 82%, #d4b695 0 31%, transparent 32%),
    linear-gradient(135deg, #aa95ff, #e5defc);
}

.person-avatar.v6::after {
  background: #d1b493;
}

.person-avatar.v7 {
  background:
    radial-gradient(ellipse at 50% 84%, #8c2a21 0 31%, transparent 32%),
    linear-gradient(135deg, var(--lime), #e7ffbf);
}

.person-avatar.v7::before {
  box-shadow:
    -22px -2px 0 -5px #5e241a,
    22px -2px 0 -5px #5e241a,
    0 -17px 0 6px #612319;
}

.person-avatar.v7::after {
  background: #88251d;
}

.person-avatar.v8 {
  background:
    radial-gradient(ellipse at 50% 86%, #ffffff 0 28%, transparent 29%),
    linear-gradient(135deg, #ff58bf, #f7c4e0);
}

.person-avatar.v8::after {
  background: #ffffff;
}

.person-avatar.v9 {
  background:
    radial-gradient(ellipse at 50% 85%, #e0231c 0 31%, transparent 32%),
    linear-gradient(135deg, #641126, #9b1426);
}

.person-avatar.v9::before {
  box-shadow:
    -24px -4px 0 -4px #8e151b,
    24px -4px 0 -4px #8e151b,
    0 -20px 0 9px #8e151b;
}

.person-avatar.v9::after {
  background: #e31f1c;
}

.person-avatar.v10 {
  background:
    radial-gradient(ellipse at 50% 84%, #111111 0 31%, transparent 32%),
    linear-gradient(135deg, #0c9ed7, #0c9ed7);
}

.person-avatar.v10::after {
  background: #111111;
}

.person-avatar.v11 {
  background:
    radial-gradient(ellipse at 50% 84%, #f3dfc0 0 31%, transparent 32%),
    linear-gradient(135deg, #aa95ff, #f2ecff);
}

.person-avatar.v11::before {
  background:
    radial-gradient(circle at 35% 42%, #4a2b21 0 3%, transparent 4%),
    radial-gradient(circle at 65% 42%, #4a2b21 0 3%, transparent 4%),
    linear-gradient(#f0c3a5, #df9f7a);
  box-shadow:
    -23px -1px 0 -4px #f1d9c0,
    23px -1px 0 -4px #f1d9c0,
    0 -17px 0 7px #f2dcc7;
}

.person-avatar.v11::after {
  background: #f2dfc4;
}

.person-avatar.v12 {
  background:
    radial-gradient(ellipse at 50% 84%, #faf6f0 0 30%, transparent 31%),
    linear-gradient(135deg, #ff4fbd, #fbd7ec);
}

.person-avatar.v12::before {
  box-shadow:
    -21px -2px 0 -5px #7e362c,
    21px -2px 0 -5px #7e362c,
    0 -16px 0 5px #80342c;
}

.person-avatar.v12::after {
  background: #ffffff;
}

.person-avatar.v13 {
  background: linear-gradient(135deg, #0c9ed7, #b7f1ff);
}

.person-avatar.v14 {
  background: linear-gradient(135deg, #ff58bf, #ffe1f3);
}

.person-avatar.v15 {
  background: linear-gradient(135deg, #26112f, #bca5ff);
}

.person-avatar.v16 {
  background: linear-gradient(135deg, var(--lime), #efffd3);
}

.person-avatar.v17 {
  background: linear-gradient(135deg, #681126, #e5475b);
}

.person-avatar.v18 {
  background: linear-gradient(135deg, #a996ff, #e8e1ff);
}

.person-avatar.v19 {
  background: linear-gradient(135deg, #101010, #0c9ed7);
}

.person-avatar.v20 {
  background: linear-gradient(135deg, #ff4fbd, #f8d7ea);
}

.person-avatar.has-photo {
  display: block;
  background: #f2f2f2;
}

.person-avatar.has-photo::before,
.person-avatar.has-photo::after {
  display: none;
}

.person-avatar.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.person-avatar.has-photo.v1 img,
.person-avatar.has-photo.v7 img,
.person-avatar.has-photo.v10 img,
.person-avatar.has-photo.v13 img,
.person-avatar.has-photo.v17 img {
  object-position: center center;
}

.person-avatar.has-photo.v3 img {
  filter: grayscale(0.78) contrast(1.05);
}

.features-section {
  padding: 74px 0 70px;
}

.features-section h2,
.results-section h2,
.faq-section h2 {
  text-align: center;
  font-size: 64px;
  line-height: 1;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 56px 0 46px;
}

.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border-radius: var(--radius);
  background: var(--soft);
  padding: 48px;
  text-align: center;
}

.instagram-page .feature-card.tall {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 360px;
}

.feature-large {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 330px;
  align-items: center;
  min-height: 430px;
}

.feature-card h3 {
  max-width: 390px;
  margin: 0 auto 22px;
  font-size: 32px;
  line-height: 1.04;
  font-weight: 900;
}

.feature-card p {
  max-width: 470px;
  margin: 0 auto;
  color: #242424;
  font-size: 15px;
  line-height: 1.35;
}

.template-phone {
  justify-self: center;
  width: 265px;
  height: 392px;
  position: relative;
  border: 10px solid #eceaf2;
  border-bottom: 0;
  border-radius: 42px 42px 0 0;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(78, 57, 92, 0.12);
}

.template-phone-screen {
  position: absolute;
  inset: 0;
  padding: 34px 30px 28px;
  background: #ffffff;
  color: #151515;
}

.template-phone-screen.setup {
  display: grid;
  align-content: start;
  gap: 11px;
  animation: templateSetupCycle 8.4s ease-in-out infinite;
}

.template-phone-screen.setup label {
  display: grid;
  gap: 7px;
  color: #59515f;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.template-select,
.template-input,
.template-toggle,
.template-checkbox {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  border-radius: 7px;
  background: #f7f6f8;
  box-shadow: inset 0 0 0 1px #ededf1;
}

.template-select {
  gap: 8px;
  padding: 0 12px 0 9px;
  color: #8d8793;
  font-size: 11px;
  font-weight: 700;
}

.template-select::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid #cfcbd6;
  border-bottom: 1.5px solid #cfcbd6;
  transform: rotate(45deg) translateY(-2px);
}

.template-avatar,
.template-chat-avatar {
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    url("https://randomuser.me/api/portraits/women/36.jpg") center / cover no-repeat,
    linear-gradient(135deg, #dfd9e8, #ffffff);
}

.template-avatar {
  width: 22px;
  height: 22px;
}

.template-toggle {
  justify-content: space-between;
  padding: 0 10px 0 12px;
  color: #8a8490;
  font-size: 11px;
  font-weight: 800;
  animation: templateTogglePulse 8.4s ease-in-out infinite;
}

.template-toggle.delay {
  animation-delay: 0.16s;
}

.template-toggle i {
  width: 30px;
  height: 17px;
  position: relative;
  display: block;
  border-radius: 999px;
  background: #95e7bf;
}

.template-toggle i::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
}

.template-input {
  padding: 0 12px;
  color: #1e1824;
  font-size: 12px;
  font-weight: 800;
  animation: templateKeywordType 8.4s ease-in-out infinite;
}

.template-checkbox {
  min-height: 22px;
  gap: 9px;
  background: transparent;
  box-shadow: none;
  color: #8a8490;
  font-size: 11px;
  font-weight: 800;
}

.template-checkbox i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px #d8d5df;
}

.template-phone-screen.chat {
  padding: 38px 21px 24px;
  opacity: 0;
  pointer-events: none;
  animation: templateChatCycle 8.4s ease-in-out infinite;
}

.template-chat-keyword {
  width: max-content;
  max-width: 92px;
  margin: 20px 0 22px auto;
  padding: 12px 14px;
  border-radius: 13px 13px 4px 13px;
  background: #b799ff;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  animation: templateKeywordBubble 8.4s ease-in-out infinite;
}

.template-chat-row {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  margin-bottom: 7px;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.template-chat-row.first {
  animation: templateChatItem 8.4s ease-in-out infinite;
}

.template-chat-row.second {
  animation: templateChatItemLate 8.4s ease-in-out infinite;
}

.template-chat-avatar {
  width: 25px;
  height: 25px;
}

.template-chat-bubble {
  padding: 13px 14px;
  border-radius: 12px;
  background: #f0eef4;
  color: #16121b;
  font-size: 12px;
  line-height: 1.18;
  text-align: left;
}

.template-chat-button {
  width: calc(100% - 33px);
  min-height: 36px;
  margin: 0 0 22px 33px;
  padding: 0 14px;
  border-radius: 13px;
  background: #eeeaf4;
  color: #19151d;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.template-chat-button.ready {
  animation: templateButtonReady 8.4s ease-in-out infinite;
}

.template-chat-button.link {
  background: #d6cfdf;
  animation: templateButtonLink 8.4s ease-in-out infinite;
}

@keyframes templateSetupCycle {
  0%,
  22% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  34%,
  82% {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
  }

  92%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes templateChatCycle {
  0%,
  25% {
    opacity: 0;
  }

  32%,
  85% {
    opacity: 1;
  }

  94%,
  100% {
    opacity: 0;
  }
}

@keyframes templateTogglePulse {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  10% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes templateKeywordType {
  0%,
  8% {
    color: transparent;
  }

  16%,
  100% {
    color: #1e1824;
  }
}

@keyframes templateKeywordBubble {
  0%,
  28% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.96);
  }

  36%,
  85% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  94%,
  100% {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.98);
  }
}

@keyframes templateChatItem {
  0%,
  42% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  50%,
  86% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  95%,
  100% {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes templateButtonReady {
  0%,
  50% {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  57%,
  86% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  95%,
  100% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes templateChatItemLate {
  0%,
  60% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  68%,
  86% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  95%,
  100% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes templateButtonLink {
  0%,
  68% {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  76%,
  86% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  95%,
  100% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
}

.ai-manager {
  min-height: 455px;
}

.ai-manager-demo {
  width: min(100%, 330px);
  min-height: 238px;
  position: relative;
  margin: 50px auto 0;
}

.ai-demo-chat,
.ai-demo-orbit {
  position: absolute;
  inset: 0;
}

.ai-demo-chat {
  opacity: 0;
  pointer-events: none;
}

.ai-demo-chat.first {
  animation: aiManagerFirstChat 9s ease-in-out infinite;
}

.ai-demo-chat.second {
  animation: aiManagerSecondChat 9s ease-in-out infinite;
}

.ai-demo-mark,
.bolt-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--lime);
  color: #201129;
  font-weight: 900;
}

.ai-demo-mark {
  position: absolute;
  left: 20px;
  bottom: 68px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: 0 18px 32px rgba(126, 255, 55, 0.34);
}

.bolt-icon::before {
  content: "";
  width: 38px;
  height: 30px;
  background: var(--purple);
  clip-path: polygon(0 36%, 45% 36%, 35% 0, 100% 50%, 55% 50%, 65% 100%);
}

.ai-demo-mark::before {
  content: "";
  width: 32px;
  height: 25px;
  background: var(--purple);
  clip-path: polygon(0 36%, 45% 36%, 35% 0, 100% 50%, 55% 50%, 65% 100%);
}

.ai-demo-bubble {
  position: absolute;
  max-width: 180px;
  padding: 13px 15px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.18;
  text-align: left;
  box-shadow: 0 18px 38px rgba(30, 12, 41, 0.08);
}

.ai-demo-bubble.bot {
  left: 88px;
  bottom: 94px;
  background: #ffffff;
  color: #241a2f;
}

.ai-demo-bubble.user {
  right: 8px;
  bottom: 26px;
  background: var(--plum);
  color: #ffffff;
}

.ai-demo-chat.second .ai-demo-bubble.user {
  right: 28px;
  bottom: 112px;
}

.ai-demo-chat.second .ai-demo-bubble.bot {
  left: 78px;
  bottom: 44px;
}

.ai-demo-bubble i {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #df53dc;
}

.ai-demo-bubble i::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: #ffffff;
  clip-path: polygon(50% 0, 61% 34%, 100% 34%, 68% 56%, 80% 100%, 50% 74%, 20% 100%, 32% 56%, 0 34%, 39% 34%);
}

.ai-demo-orbit {
  display: grid;
  place-items: center;
  opacity: 0;
  animation: aiManagerOrbit 9s ease-in-out infinite;
}

.ai-demo-orbit .bolt-icon {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  box-shadow: 0 24px 48px rgba(126, 255, 55, 0.34);
}

.ai-demo-orbit .spark {
  position: absolute;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #18a7f2, #ee4fea);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: aiSparkPulse 1.6s ease-in-out infinite;
}

.ai-demo-orbit .spark.one {
  left: 70px;
  top: 58px;
}

.ai-demo-orbit .spark.two {
  right: 64px;
  bottom: 50px;
  animation-delay: 0.2s;
}

.ai-demo-orbit .spark.three {
  left: 124px;
  top: 22px;
  width: 20px;
  height: 20px;
  animation-delay: 0.4s;
}

@keyframes aiManagerFirstChat {
  0%,
  22% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  32%,
  100% {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
  }
}

@keyframes aiManagerOrbit {
  0%,
  26% {
    opacity: 0;
    transform: scale(0.92);
  }

  34%,
  47% {
    opacity: 1;
    transform: scale(1);
  }

  58%,
  100% {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes aiManagerSecondChat {
  0%,
  52% {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  62%,
  82% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  94%,
  100% {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes aiSparkPulse {
  0%,
  100% {
    transform: scale(0.86) rotate(0deg);
    opacity: 0.78;
  }

  50% {
    transform: scale(1.12) rotate(14deg);
    opacity: 1;
  }
}

.rating-table {
  position: relative;
  display: grid;
  gap: 13px;
  margin-top: 36px;
  min-height: 206px;
}

.rating-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 34px minmax(110px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 12px;
  background: #ffffff;
  font-size: 18px;
  font-weight: 900;
  text-align: left;
  box-shadow: 0 16px 34px rgba(51, 31, 63, 0.08);
  will-change: transform;
}

.rating-table .mini-person {
  width: 28px;
  height: 28px;
}

.rating-row.max {
  animation: ratingMaxMove 7.2s ease-in-out infinite;
}

.rating-row.mary {
  animation: ratingMaryMove 7.2s ease-in-out infinite;
}

.rating-row.leo {
  animation: ratingLeoMove 7.2s ease-in-out infinite;
}

.rating-metrics {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.rating-metric {
  min-width: 38px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #21162a;
}

.rating-metric::after {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  background: #df53dc;
}

.rating-metric.fire::after {
  background: linear-gradient(180deg, #ff4dd8, #9d65ff);
  clip-path: polygon(53% 0, 77% 31%, 68% 32%, 88% 57%, 77% 100%, 48% 88%, 25% 100%, 12% 70%, 24% 41%, 39% 51%, 35% 25%);
}

.rating-metric.chat::after {
  border-radius: 999px;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 68% 72%, 74% 100%, 42% 72%, 0 72%);
}

.rating-metric.star::after {
  background: #b58cff;
  clip-path: polygon(50% 0, 61% 34%, 100% 34%, 68% 56%, 80% 100%, 50% 74%, 20% 100%, 32% 56%, 0 34%, 39% 34%);
}

.rating-metric .count {
  display: inline-block;
}

.rating-metric .count.end {
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateY(8px);
}

.rating-row.max .count.start,
.rating-row.mary .count.start {
  animation: ratingCountOut 7.2s ease-in-out infinite;
}

.rating-row.max .count.end,
.rating-row.mary .count.end {
  animation: ratingCountIn 7.2s ease-in-out infinite;
}

@keyframes ratingMaxMove {
  0%,
  38% {
    transform: translate3d(0, 0, 0);
  }

  54%,
  86% {
    transform: translate3d(0, 69px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ratingMaryMove {
  0%,
  38% {
    transform: translate3d(0, 0, 0);
  }

  54%,
  86% {
    transform: translate3d(0, -69px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ratingLeoMove {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ratingCountOut {
  0%,
  30% {
    opacity: 1;
    transform: translateY(0);
  }

  42%,
  86% {
    opacity: 0;
    transform: translateY(-8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ratingCountIn {
  0%,
  30% {
    opacity: 0;
    transform: translateY(8px);
  }

  42%,
  86% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

.templates {
  display: grid;
  align-content: center;
}

.lime-cta.center {
  display: flex;
  width: max-content;
  margin: 0 auto;
}

.results-section,
.articles-section {
  padding: 82px 0 30px;
}

.results-section h2 {
  max-width: 820px;
  margin: 0 auto;
  line-height: 0.95;
}

.result-grid,
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 55px;
}

.result-card {
  position: relative;
  min-height: 435px;
  overflow: hidden;
  padding: 38px 36px;
  border-radius: var(--radius);
  background: var(--soft);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease;
}

.result-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(32, 17, 41, 0.18);
}

.result-card h3 {
  position: relative;
  z-index: 3;
  max-width: 290px;
  margin: 0;
  font-size: 23px;
  line-height: 0.98;
}

.result-card mark {
  padding: 0 4px;
  border-radius: 999px;
  background: var(--lime);
}

.result-visual {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 270px;
  overflow: hidden;
}

.result-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center bottom;
}

.result-one .result-visual {
  background: linear-gradient(172deg, transparent 0 43%, var(--blue) 43% 100%);
}

.result-two .result-visual {
  background: linear-gradient(174deg, transparent 0 39%, var(--plum) 39% 100%);
}

.result-three {
  background: var(--soft);
  color: #000000;
}

.result-three .result-visual {
  height: 250px;
  background: #650844;
}

.hover-more {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  min-height: 78px;
  padding: 0 58px;
  border-radius: 999px 999px 999px 12px;
  background: var(--lime);
  color: #000000;
  font-weight: 900;
  opacity: 0;
  transform: translate(-50%, -34%) scale(0.88);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.result-card:hover .hover-more,
.result-card:focus-within .hover-more {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.articles-section h2 {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  font-size: 44px;
  line-height: 1.05;
}

.article-card {
  position: relative;
  min-height: 342px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--soft);
}

.article-cover {
  height: 168px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.smm-cover {
  background-image: url("./assets/article-smm-errors.png");
}

.tg-cover {
  background-image: url("./assets/article-telegram-growth.png");
}

.ig-cover {
  background-image: url("./assets/article-instagram-10k.png");
}

.article-card h3 {
  margin: 20px 24px 0;
  font-size: 17px;
  line-height: 1.25;
}

.article-card p {
  position: absolute;
  left: 24px;
  bottom: 28px;
  margin: 0;
  font-size: 13px;
}

.article-card button {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #000000;
}

.article-card button::before,
.article-card button::after {
  content: "";
  position: absolute;
  background: var(--lime);
}

.article-card button::before {
  width: 13px;
  height: 3px;
  left: 11px;
  top: 18px;
}

.article-card button::after {
  width: 9px;
  height: 9px;
  right: 11px;
  top: 14px;
  border-top: 3px solid var(--lime);
  border-right: 3px solid var(--lime);
  background: transparent;
  transform: rotate(45deg);
}

.faq-section {
  padding: 72px 0 110px;
}

.pricing-faq {
  padding-top: 28px;
}

.faq-list {
  display: grid;
  gap: 22px;
  margin-top: 52px;
}

.faq-item {
  border-radius: var(--radius);
  background: var(--soft);
}

.faq-item button {
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 18px;
  padding: 0 32px 0 36px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 900;
  text-align: left;
}

.faq-item button > span:last-child {
  width: 34px;
  height: 34px;
  position: relative;
  border-radius: 50%;
  background: #000000;
}

.faq-item button > span:last-child::before,
.faq-item button > span:last-child::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 16px;
  width: 14px;
  height: 2px;
  background: #ffffff;
}

.faq-item button > span:last-child::after {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.faq-item.open button > span:last-child::after {
  transform: rotate(0);
}

.faq-item p {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 36px;
  color: #333333;
  font-size: 20px;
  line-height: 1.45;
  transition:
    max-height 0.28s ease,
    padding-bottom 0.28s ease;
}

.faq-item.open p {
  max-height: 720px;
  padding-bottom: 30px;
}

.instagram-page {
  background: #ffffff;
}

.instagram-page .site-header {
  background: rgba(33, 17, 41, 0.97);
  box-shadow: none;
}

.instagram-page .brand,
.instagram-page .main-nav button,
.instagram-page .lang-trigger {
  color: #ffffff;
}

.instagram-page .main-nav button:hover,
.instagram-page .main-nav button.active {
  background: rgba(255, 255, 255, 0.08);
}

.instagram-page .account-btn,
.instagram-page .black-cta {
  background: #ffffff;
  color: #000000;
}

.instagram-page .account-btn svg {
  fill: #000000;
  stroke: #000000;
}

.instagram-main {
  overflow: hidden;
}

.ig-hero {
  min-height: 560px;
  overflow: hidden;
  background: var(--purple);
  color: #ffffff;
}

.ig-hero-grid,
.ig-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 78px;
  align-items: center;
}

.ig-hero-grid {
  min-height: 560px;
}

.ig-hero-copy h1 {
  max-width: 560px;
  margin: 0 0 30px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 58px;
  line-height: 1.01;
}

.ig-hero-copy p {
  max-width: 560px;
  margin: 0 0 42px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
}

.ig-hero-actions {
  display: flex;
  align-items: center;
  gap: 64px;
}

.pink-cta {
  min-height: 56px;
  padding: 0 42px;
  border-radius: 999px;
  background: #e75bd8;
  color: #ffffff;
  font-weight: 900;
}

.meta-approved {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.18;
}

.meta-approved svg {
  width: 38px;
  height: 24px;
  flex: 0 0 auto;
}

.ig-hero-visual {
  position: relative;
  min-height: 560px;
  align-self: stretch;
}

.hero-bolt {
  position: absolute;
  inset: -92px -120px 0 -80px;
  background: #e95bd4;
  clip-path: polygon(28% 0, 100% 0, 73% 46%, 100% 46%, 58% 100%, 64% 46%, 10% 46%);
}

.ig-hero-person {
  position: absolute;
  right: 44px;
  bottom: 0;
  z-index: 2;
  width: 560px;
  height: 560px;
  filter: drop-shadow(0 28px 44px rgba(10, 4, 15, 0.32));
}

.hero-person-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.ig-chat-bubble {
  position: absolute;
  z-index: 4;
  max-width: 260px;
  padding: 18px 22px;
  border-radius: 18px;
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  line-height: 1.2;
  box-shadow: 0 22px 50px rgba(33, 17, 41, 0.16);
}

.ig-chat-bubble.top {
  right: 158px;
  bottom: 132px;
}

.ig-chat-bubble.bottom {
  right: 54px;
  bottom: 54px;
}

.ig-mini-avatar {
  position: absolute;
  right: 430px;
  bottom: 132px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #f0c2a0 0 28%, transparent 29%),
    radial-gradient(circle at 50% 74%, #ffffff 0 34%, transparent 35%),
    linear-gradient(135deg, #f9d6ee, #baf2ff);
}

.ig-white,
.ig-soft-blue {
  position: relative;
  padding: 96px 0 124px;
}

.ig-soft-blue {
  background: #f5f4f7;
}

.ig-white::after,
.ig-soft-blue::after,
.ig-pink-cta::before,
.ig-pink-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.ig-white::after {
  bottom: -1px;
  height: 112px;
  background: #f5f4f7;
  clip-path: polygon(0 74%, 27% 42%, 27% 80%, 100% 0, 100% 100%, 0 100%);
}

.ig-soft-blue::after {
  bottom: -1px;
  height: 122px;
  background: var(--blue);
  clip-path: polygon(0 42%, 81% 100%, 81% 63%, 100% 88%, 100% 100%, 0 100%);
}

.ig-split.reverse {
  grid-template-columns: minmax(420px, 1.05fr) minmax(0, 0.95fr);
}

.ig-copy h2,
.ig-gamification h2,
.ig-referral h2,
.ig-product-features h2,
.ig-more-features h2 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 58px;
  line-height: 1.02;
}

.ig-convert-title {
  max-width: 620px;
}

.ig-convert-title span {
  display: block;
}

.ig-copy p {
  margin: 28px 0 0;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 800;
}

.ig-copy.white {
  color: #ffffff;
}

.ig-check-list {
  display: grid;
  gap: 28px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}

.ig-check-list li {
  position: relative;
  padding-left: 36px;
  font-size: 20px;
  line-height: 1.35;
}

.ig-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0a0a0a;
}

.ig-check-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 6px;
  height: 3px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

.ig-check-list.light li::before {
  background: #ffffff;
}

.ig-check-list.light li::after {
  border-color: var(--blue);
}

.ig-check-list b {
  display: inline-block;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--lime);
}

.ig-phone {
  display: grid;
  place-items: center;
  min-height: 460px;
}

.ig-phone-shell {
  position: relative;
  width: 310px;
  min-height: 500px;
  overflow: hidden;
  padding: 78px 34px 40px;
  border: 10px solid #edeaf2;
  border-radius: 40px 40px 0 0;
  background: #ffffff;
  box-shadow: 0 34px 70px rgba(33, 17, 41, 0.1);
}

.phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 92px;
  height: 28px;
  border-radius: 999px;
  background: #090909;
  transform: translateX(-50%);
}

.bot-icon-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  color: #e61e91;
}

.bot-icon-row span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.bot-icon-row svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bot-icon-row span:nth-child(2) {
  color: #111111;
}

.bot-icon-row span:nth-child(3) {
  color: #1899df;
}

.ig-phone-shell h3 {
  margin: 18px 0 26px;
  text-align: center;
  font-size: 27px;
  line-height: 1.02;
}

.ig-phone-shell button,
.ig-phone-shell .profile-buttons span {
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  background: var(--lime);
  font-weight: 900;
}

.bot-preview-messages {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.bot-preview-messages .dm-message,
.bot-preview-messages .dm-reply {
  margin-bottom: 0;
  font-size: 12px;
}

.dm-top,
.profile-head {
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 900;
}

.dm-message,
.dm-reply {
  margin-bottom: 16px;
  padding: 15px;
  border-radius: 14px;
  background: #f0eef4;
  font-size: 14px;
  line-height: 1.25;
}

.dm-message.small {
  max-width: 205px;
}

.dm-reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  width: max-content;
  background: #b89cff;
  color: #ffffff;
}

.dm-reply svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ig-blue-band {
  position: relative;
  padding: 126px 0 114px;
  background: var(--blue);
}

.ig-blue-band::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 90px;
  background: #f5f4f7;
  clip-path: polygon(0 0, 100% 0, 100% 18%, 0 68%);
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-head span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f177c4, #ffffff);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
  text-align: center;
}

.profile-phone p {
  font-size: 13px;
  line-height: 1.3;
}

.profile-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.profile-buttons span {
  display: grid;
  place-items: center;
  min-height: 34px;
  font-size: 12px;
}

.ig-gamification,
.ig-referral,
.ig-product-features,
.ig-more-features,
.ig-results {
  padding: 92px 0;
  text-align: center;
}

.ig-gamification > p,
.ig-referral > p {
  max-width: 720px;
  margin: 28px auto 64px;
  font-size: 20px;
  line-height: 1.35;
}

.ig-card-grid {
  display: grid;
  gap: 22px;
  text-align: left;
}

.ig-card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ig-card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ig-feature-card,
.ig-mini-card {
  min-height: 370px;
  position: relative;
  overflow: hidden;
  padding: 48px 46px;
  border-radius: 18px;
  background: #f5f3f7;
  text-align: center;
}

.ig-feature-card h3,
.ig-mini-card h3 {
  margin: 0 0 24px;
  font-size: 34px;
  line-height: 1.12;
}

.ig-feature-card p {
  margin: 0 auto;
  max-width: 430px;
  font-size: 16px;
  line-height: 1.35;
}

.ig-feature-card .score-pop,
.ig-feature-card .leader-mini,
.ig-feature-card .toggle-list {
  position: absolute;
  left: 50%;
  bottom: 52px;
  width: min(72%, 380px);
  transform: translateX(-50%);
}

.score-pop,
.leader-mini > span,
.toggle-list > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 0 22px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--purple);
  font-size: 18px;
  font-weight: 900;
}

.score-pop b,
.leader-mini b {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #8d81ff;
}

.mini-star {
  width: 14px;
  height: 14px;
  fill: #a89cff;
  stroke: #a89cff;
  stroke-width: 1;
}

.bar-visual {
  position: absolute;
  left: 50%;
  bottom: 46px;
  height: 150px;
  display: flex;
  align-items: end;
  gap: 12px;
  transform: translateX(-50%);
}

.bar-visual span,
.bar-visual b {
  width: 72px;
  display: block;
  border-radius: 12px;
  background: #ffffff;
}

.bar-visual span:nth-child(1) {
  height: 92px;
}

.bar-visual span:nth-child(2) {
  height: 74px;
}

.bar-visual span:nth-child(3) {
  height: 104px;
}

.bar-visual b {
  height: 146px;
  background: var(--pink);
}

.ig-feature-card .leader-mini {
  display: grid;
  gap: 12px;
}

.ig-feature-card .toggle-list {
  display: grid;
  gap: 12px;
}

.feature-card .leader-mini {
  position: static;
  width: min(100%, 360px);
  display: grid;
  gap: 12px;
  margin: 28px auto 0;
  transform: none;
}

.toggle-list > span::after {
  content: "";
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #e5e2ea;
}

.lime-cta.centered {
  margin: 52px auto 0;
}

.ig-referral {
  padding-top: 30px;
}

.ig-feature-card.compact {
  min-height: 410px;
}

.ref-visual {
  position: absolute;
  left: 50%;
  bottom: 46px;
  width: 160px;
  height: 118px;
  transform: translateX(-50%);
}

.ref-visual.one {
  background:
    radial-gradient(circle at 55% 10%, var(--lime) 0 25%, transparent 26%),
    radial-gradient(circle at 25% 80%, var(--pink) 0 22%, transparent 23%),
    radial-gradient(circle at 58% 72%, #e4e0e8 0 16%, transparent 17%),
    radial-gradient(circle at 88% 78%, #e4e0e8 0 16%, transparent 17%);
}

.ref-visual.two {
  background:
    radial-gradient(circle at 50% 50%, var(--pink) 0 30%, transparent 31%),
    radial-gradient(circle at 18% 50%, #ffffff 0 24%, transparent 25%),
    radial-gradient(circle at 82% 50%, #ffffff 0 24%, transparent 25%);
}

.ref-visual.three {
  background:
    radial-gradient(circle at 28% 50%, var(--lime) 0 32%, transparent 33%),
    radial-gradient(circle at 74% 50%, #ffffff 0 32%, transparent 33%);
}

.ig-pink-cta {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 540px;
  overflow: hidden;
  background: var(--pink);
  color: #ffffff;
  text-align: center;
}

.ig-pink-cta::before {
  top: 0;
  height: 120px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 76%);
}

.ig-pink-cta::after {
  bottom: 0;
  height: 120px;
  background: #ffffff;
  clip-path: polygon(0 56%, 27% 0, 27% 100%, 100% 10%, 100% 100%, 0 100%);
}

.ig-pink-cta h2 {
  max-width: 920px;
  margin: 0 auto 38px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 60px;
  line-height: 1.02;
}

.ig-product-features h2,
.ig-more-features h2 {
  margin-bottom: 58px;
}

.instagram-large {
  margin-bottom: 22px;
  text-align: center;
}

.inline-chat .ig-phone-shell {
  min-height: 360px;
}

.ai-logo-pair {
  position: absolute;
  left: 50%;
  bottom: 140px;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
}

.instagram-page .feature-card.tall .ai-logo-pair {
  position: static;
  order: 3;
  margin: 24px auto 0;
  transform: none;
}

.instagram-page .feature-card.tall .lime-cta.small {
  order: 4;
  margin-top: 22px;
}

.ai-logo-pair span,
.ai-logo-pair b,
.integration-badge {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--lime);
}

.ai-logo-pair span svg,
.integration-badge svg {
  width: 42px;
  height: 42px;
  fill: var(--purple);
}

.ai-logo-pair b {
  background: #ffffff;
}

.ai-logo-pair b::before {
  content: "AI";
  font-size: 22px;
}

.instagram-community {
  padding-top: 84px;
  padding-bottom: 60px;
}

.ig-more-features {
  padding-top: 40px;
}

.ig-mini-card {
  min-height: 320px;
  display: grid;
  align-content: center;
  justify-items: center;
}

.pay-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.pay-logos span {
  min-width: 112px;
  padding: 14px 20px;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font-size: 18px;
  font-weight: 900;
}

.pay-logos span:first-child {
  background: var(--pink);
  color: #ffffff;
}

.mail-bubbles {
  width: 160px;
  height: 120px;
  background:
    radial-gradient(circle at 22% 35%, var(--lime) 0 22%, transparent 23%),
    radial-gradient(circle at 50% 35%, #ffffff 0 20%, transparent 21%),
    radial-gradient(circle at 78% 35%, #ffffff 0 20%, transparent 21%),
    radial-gradient(circle at 22% 78%, #ffffff 0 20%, transparent 21%),
    radial-gradient(circle at 50% 78%, #ffffff 0 20%, transparent 21%),
    radial-gradient(circle at 78% 78%, #ffffff 0 20%, transparent 21%);
}

.bar-visual.small {
  position: static;
  height: 116px;
  transform: none;
}

.bar-visual.small span,
.bar-visual.small b {
  width: 58px;
}

.crm-card {
  width: 230px;
  min-height: 112px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ffffff;
  color: var(--purple);
  font-weight: 900;
}

.chat-icon {
  width: 142px;
  height: 94px;
  background:
    radial-gradient(circle at 38% 40%, #ffffff 0 4%, transparent 5%),
    radial-gradient(circle at 50% 40%, #ffffff 0 4%, transparent 5%),
    radial-gradient(circle at 62% 40%, #ffffff 0 4%, transparent 5%),
    radial-gradient(ellipse at 42% 42%, var(--pink) 0 38%, transparent 39%),
    radial-gradient(ellipse at 64% 56%, #ffffff 0 34%, transparent 35%);
}

.ig-results {
  padding-top: 110px;
}

.ig-results h2 {
  margin-bottom: 64px;
}

.instagram-page .faq-section {
  padding-top: 82px;
}

@media (max-width: 1100px) {
  .ig-hero-grid,
  .ig-split,
  .ig-split.reverse {
    grid-template-columns: 1fr;
  }

  .ig-hero-visual {
    min-height: 430px;
  }

  .ig-hero-person {
    right: 50%;
    transform: translateX(50%);
  }

  .ig-chat-bubble.top {
    right: calc(50% - 220px);
  }

  .ig-chat-bubble.bottom {
    right: calc(50% - 250px);
  }

  .ig-mini-avatar {
    right: calc(50% + 118px);
  }

  .ig-card-grid.two,
  .ig-card-grid.three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ig-hero,
  .ig-hero-grid {
    min-height: auto;
  }

  .ig-hero-grid {
    padding: 64px 0 0;
  }

  .ig-hero-copy h1,
  .ig-copy h2,
  .ig-gamification h2,
  .ig-referral h2,
  .ig-product-features h2,
  .ig-more-features h2,
  .ig-pink-cta h2 {
    font-size: 38px;
  }

  .ig-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .ig-chat-bubble {
    display: none;
  }

  .ig-hero-person {
    width: 320px;
    height: 430px;
  }

  .ig-phone-shell {
    width: min(100%, 300px);
  }

  .ig-white,
  .ig-soft-blue,
  .ig-blue-band,
  .ig-gamification,
  .ig-referral,
  .ig-product-features,
  .ig-more-features,
  .ig-results {
    padding-top: 68px;
    padding-bottom: 72px;
  }

  .ig-feature-card,
  .ig-mini-card {
    min-height: 320px;
    padding: 32px 22px;
  }

  .ig-feature-card h3,
  .ig-mini-card h3 {
    font-size: 28px;
  }
}

.site-footer {
  overflow: hidden;
  padding: 58px 0 0;
  background: var(--purple);
  color: #ffffff;
}

/* ============================================================
   ChatPlace — Authentication system
   Scoped design tokens keep this surface aligned with the
   brand palette (:root --pink/--blue/--lime/--purple).
   ============================================================ */
.auth-system-page {
  --auth-bg: #f4f2f6;
  --auth-surface: #ffffff;
  --auth-ink: #0a0a0a;
  --auth-ink-soft: #55555f;
  --auth-muted: #71717a;
  --auth-border: #e5e3ec;
  --auth-border-strong: #d3d0dd;
  --auth-accent: #0998dc;
  --auth-accent-strong: #0a7cbf;
  --auth-lime: #aeff3d;
  --auth-lime-strong: #9cf021;
  --auth-pink: #e61e91;
  --auth-danger: #d92d20;
  --auth-success: #067647;
  --auth-warning: #b25e00;
  --auth-radius: 16px;
  --auth-radius-sm: 10px;
  --auth-pill: 999px;
  --auth-display: "Arial Black", Impact, "Arial Narrow Bold", sans-serif;
  --auth-shadow: 0 2px 4px rgba(20, 8, 30, 0.04), 0 24px 60px -22px rgba(28, 12, 40, 0.32);
  --auth-ring: 0 0 0 4px rgba(9, 152, 220, 0.18);
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--auth-bg);
  color: var(--auth-ink);
  font-family: Arial, Helvetica, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-system-page,
.auth-system-page button,
.auth-system-page input {
  overflow-wrap: normal;
  word-break: normal;
}

.auth-layout {
  min-height: 100vh;
  min-width: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(500px, 1.08fr);
}

/* ---------- Brand / visual panel ---------- */
.auth-visual-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: space-between;
  min-height: 100vh;
  min-width: 0;
  padding: 38px clamp(34px, 5vw, 76px);
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(150deg, var(--purple) 0%, #321336 42%, #8d0f63 72%, var(--pink) 100%);
  color: #ffffff;
}

.auth-visual-panel::before,
.auth-visual-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.auth-visual-panel::before {
  left: clamp(44px, 10vw, 120px);
  top: 84px;
  width: clamp(128px, 16vw, 214px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.auth-visual-panel::after {
  right: -7%;
  bottom: 8%;
  width: clamp(340px, 40vw, 560px);
  height: clamp(210px, 25vw, 340px);
  background: var(--blue);
  clip-path: polygon(0 24%, 100% 0, 92% 78%, 18% 100%);
  transform: rotate(-14deg);
  opacity: 0.96;
}

.auth-brand {
  position: relative;
  z-index: 1;
  width: max-content;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--auth-display);
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 0.9;
  font-style: italic;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 4px 4px 0 rgba(43, 118, 240, 0.88);
  cursor: pointer;
  border-radius: 6px;
  transition: transform 0.18s ease, text-shadow 0.18s ease;
}

.auth-brand:hover {
  transform: translateX(2px);
  text-shadow: 6px 6px 0 rgba(43, 118, 240, 0.9);
}

.auth-brand:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 6px;
}

.auth-visual-copy,
.auth-security-card {
  position: relative;
  z-index: 1;
}

.auth-visual-copy {
  max-width: 620px;
  padding: 108px 0 56px;
}

.auth-visual-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -34%;
  top: 38%;
  width: clamp(330px, 46vw, 600px);
  height: clamp(210px, 29vw, 370px);
  background: var(--lime);
  clip-path: polygon(0 0, 100% 48%, 0 100%);
  transform: rotate(0deg);
}

.auth-visual-copy span,
.auth-form-head span,
.auth-status-card > p {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 16px;
  border-radius: var(--auth-pill);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-visual-copy h1 {
  margin: 24px 0 18px;
  max-width: 620px;
  font-family: var(--auth-display);
  font-size: clamp(58px, 6.2vw, 104px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.auth-visual-copy p,
.auth-security-card span {
  margin: 0;
  max-width: 560px;
  overflow-wrap: normal;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.35;
  font-weight: 750;
}

.auth-security-card {
  width: min(100%, 560px);
  padding: 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--auth-radius);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.auth-security-card b {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 950;
}

/* ---------- Form panel ---------- */
.auth-card-page {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 100vh;
  min-width: 0;
  padding: clamp(28px, 6vw, 76px);
  background:
    radial-gradient(circle at 78% 8%, rgba(9, 152, 220, 0.06), transparent 42%),
    radial-gradient(circle at 12% 96%, rgba(230, 30, 145, 0.05), transparent 40%),
    linear-gradient(180deg, rgba(246, 244, 248, 0.9), rgba(255, 255, 255, 0) 44%),
    #ffffff;
}

.auth-production-form,
.auth-verification-card,
.auth-status-card {
  width: min(100%, 460px);
  max-width: 100%;
  padding: clamp(28px, 3.6vw, 42px);
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
  background: var(--auth-surface);
  box-shadow: var(--auth-shadow);
  animation: auth-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-form-head {
  margin-bottom: 26px;
}

.auth-form-head span,
.auth-status-card > p {
  background: rgba(9, 152, 220, 0.1);
  color: var(--auth-accent-strong);
}

.auth-form-head h2,
.auth-status-card h2 {
  margin: 16px 0 10px;
  color: var(--auth-ink);
  font-family: var(--auth-display);
  font-size: clamp(38px, 4vw, 54px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.015em;
}

.auth-form-head p,
.auth-status-card div,
.auth-verification-card p {
  margin: 0;
  color: var(--auth-ink-soft);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}

.auth-field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.auth-field > span {
  color: var(--auth-ink);
  font-size: 13.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.auth-input-wrap {
  position: relative;
}

.auth-input-wrap input {
  width: 100%;
  min-height: 52px;
  padding: 0 54px 0 16px;
  border: 1.5px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-sm);
  background: #ffffff;
  color: var(--auth-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.auth-input-wrap input::placeholder {
  color: #a1a1ac;
  font-weight: 550;
}

.auth-input-wrap input:hover {
  border-color: #b9b6c6;
}

.auth-input-wrap input:focus {
  border-color: var(--auth-accent);
  box-shadow: var(--auth-ring);
}

.auth-field.has-error .auth-input-wrap input {
  border-color: var(--auth-danger);
  background: #fffbfb;
}

.auth-field.has-error .auth-input-wrap input:focus {
  box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.14);
}

.auth-field-error {
  min-height: 0;
  color: var(--auth-danger);
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.auth-field.has-error .auth-field-error,
.auth-check.standalone[data-field].has-error .auth-field-error {
  opacity: 1;
  transform: none;
}

/* keep the error slot reserved once a field has surfaced an error */
.auth-field.has-error .auth-field-error {
  min-height: 16px;
  margin-top: 1px;
}

/* ---------- Password reveal ---------- */
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-sm);
  background: #f7f6fa;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.auth-password-toggle::before,
.auth-password-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.auth-password-toggle::before {
  width: 17px;
  height: 11px;
  border: 1.8px solid #6b7280;
  border-radius: 999px / 72%;
}

.auth-password-toggle::after {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6b7280;
}

.auth-password-toggle:hover {
  background: #eef7fd;
  border-color: #a9dcf4;
}

.auth-password-toggle:focus-visible {
  outline: 3px solid rgba(9, 152, 220, 0.35);
  outline-offset: 2px;
}

.auth-password-toggle.visible {
  background: var(--auth-accent);
  border-color: var(--auth-accent);
}

.auth-password-toggle.visible::before {
  border-color: #ffffff;
}

.auth-password-toggle.visible::after {
  background: #ffffff;
}

/* ---------- Password strength ---------- */
.auth-strength {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.auth-strength span {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--auth-danger) 0 33%, #eceaf1 33% 100%);
  transition: background 0.25s ease;
}

.auth-strength[data-score="2"] span {
  background: linear-gradient(90deg, #f79009 0 66%, #eceaf1 66% 100%);
}

.auth-strength[data-score="3"] span {
  background: #16a34a;
}

.auth-strength small {
  font-weight: 850;
  letter-spacing: 0.01em;
}

.auth-strength small,
.auth-rules,
.auth-check span,
.auth-form-row,
.auth-form-footer {
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
}

.auth-rules {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  padding-left: 20px;
}

.auth-rules li {
  transition: color 0.18s ease;
}

.auth-rules li.passed {
  color: var(--auth-success);
  font-weight: 800;
}

.auth-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 22px;
}

.auth-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.auth-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--auth-accent);
  cursor: pointer;
}

.auth-check input:focus-visible {
  outline: 3px solid rgba(9, 152, 220, 0.35);
  outline-offset: 2px;
}

.auth-check.standalone {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 20px;
}

.auth-check.standalone .auth-field-error {
  grid-column: 2;
}

.auth-check.standalone.has-error span {
  color: var(--auth-danger);
}

.auth-form-row a,
.auth-form-footer a,
.auth-status-actions a {
  position: relative;
  color: var(--auth-accent-strong);
  font-weight: 900;
  text-decoration: none;
}

.auth-form-row a::after,
.auth-form-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.auth-form-row a:hover::after,
.auth-form-footer a:hover::after {
  transform: scaleX(1);
}

/* ---------- Alert ---------- */
.auth-alert {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid rgba(217, 45, 32, 0.16);
  border-radius: var(--auth-radius-sm);
  background: #fff2f1;
  color: #b42318;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.auth-alert:not(:empty) {
  display: flex;
  animation: auth-alert-in 0.28s ease both;
}

.auth-alert::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E");
}

.auth-alert[data-type="success"] {
  border-color: rgba(6, 118, 71, 0.18);
  background: #ecfdf3;
  color: var(--auth-success);
}

.auth-alert[data-type="success"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.2l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.2l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E");
}

/* ---------- Primary action ---------- */
.auth-main-submit,
.auth-main-link,
.auth-secondary-link {
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  border-radius: var(--auth-radius-sm);
  background: var(--auth-lime);
  color: #050505;
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 26px -8px rgba(151, 224, 33, 0.55);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, background 0.16s ease;
}

.auth-main-submit i,
.auth-main-link::after {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #050505;
  transition: transform 0.18s ease;
}

.auth-main-submit i::before,
.auth-main-submit i::after,
.auth-main-link::before {
  content: "";
  position: absolute;
  top: 50%;
  background: var(--auth-lime);
  transform: translateY(-50%);
}

.auth-main-submit i::before {
  left: 9px;
  width: 11px;
  height: 3px;
  border-radius: 999px;
}

.auth-main-submit i::after {
  right: 9px;
  width: 9px;
  height: 9px;
  border-top: 3px solid var(--auth-lime);
  border-right: 3px solid var(--auth-lime);
  background: transparent;
  transform: translateY(-50%) rotate(45deg);
}

.auth-main-submit:hover,
.auth-main-link:hover {
  background: var(--auth-lime-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -8px rgba(151, 224, 33, 0.62);
}

.auth-main-submit:hover i,
.auth-main-link:hover::after {
  transform: translateX(3px);
}

.auth-main-submit:active,
.auth-main-link:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px -8px rgba(151, 224, 33, 0.5);
}

.auth-main-submit:focus-visible,
.auth-main-link:focus-visible,
.auth-secondary-link:focus-visible,
.auth-form-row a:focus-visible,
.auth-form-footer a:focus-visible {
  outline: 3px solid rgba(9, 152, 220, 0.4);
  outline-offset: 3px;
}

.auth-main-submit:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

.auth-production-form.is-loading .auth-main-submit {
  color: transparent;
}

.auth-production-form.is-loading .auth-main-submit i {
  opacity: 0;
}

.auth-production-form.is-loading .auth-main-submit::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.22);
  border-top-color: #050505;
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
}

.auth-form-footer {
  margin: 22px 0 0;
  text-align: center;
}

.auth-form-footer.split,
.auth-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* ---------- Status pages ---------- */
.auth-status-card {
  text-align: center;
}

.auth-status-icon {
  display: inline-grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 18px;
  border-radius: var(--auth-radius);
  background: var(--auth-lime);
}

.auth-status-card.error .auth-status-icon {
  background: #ffd7d7;
}

.auth-status-card.warning .auth-status-icon {
  background: #ffe6b0;
}

.auth-status-icon::before {
  content: "";
  width: 30px;
  height: 18px;
  border-left: 6px solid #050505;
  border-bottom: 6px solid #050505;
  transform: rotate(-45deg) translate(2px, -2px);
}

.auth-status-card.error .auth-status-icon::before,
.auth-status-card.warning .auth-status-icon::before {
  width: 34px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #050505;
  transform: none;
}

.auth-secondary-link {
  background: #f1eef7;
  color: #050505;
  box-shadow: none;
}

.auth-secondary-link:hover {
  background: #e8e4f1;
  transform: translateY(-2px);
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes auth-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes auth-alert-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-production-form,
  .auth-verification-card,
  .auth-status-card,
  .auth-alert:not(:empty) {
    animation: none;
  }

  .auth-main-submit,
  .auth-main-link,
  .auth-secondary-link,
  .auth-brand,
  .auth-main-submit i,
  .auth-field-error {
    transition: none;
  }
}

@media (max-width: 1080px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-visual-panel {
    min-height: 440px;
  }

  .auth-visual-copy {
    padding: 72px 0 38px;
  }

  .auth-card-page {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .auth-visual-panel,
  .auth-card-page {
    padding: 22px;
  }

  .auth-visual-panel {
    min-height: 390px;
  }

  .auth-visual-copy {
    max-width: 100%;
    padding: 70px 0 26px;
  }

  .auth-visual-copy p,
  .auth-security-card span {
    max-width: 100%;
    font-size: 16px;
  }

  .auth-security-card {
    width: 100%;
    padding: 20px;
    overflow: hidden;
  }

  .auth-card-page {
    width: 100%;
    max-width: 100vw;
  }

  .auth-visual-copy h1,
  .auth-visual-copy p,
  .auth-security-card {
    max-width: calc(100vw - 44px);
  }

  .auth-visual-copy h1,
  .auth-form-head h2,
  .auth-status-card h2 {
    font-size: 38px;
  }

  .auth-production-form,
  .auth-verification-card,
  .auth-status-card {
    width: calc(100vw - 44px);
    padding: 24px 18px;
    border-radius: 16px;
  }

  .auth-form-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.home-page {
  overflow-x: hidden;
  background: #ffffff;
}

.home-page main {
  overflow: hidden;
}

.home-page .promo-strip {
  min-height: 54px;
}

.home-page .promo-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1;
}

.home-page .promo-inner span {
  margin-right: 0;
}

.home-page .hero-copy h1 {
  max-width: 1260px;
}

.home-page .hero-copy h1 span {
  white-space: pre-line;
}

.home-page .hero-copy p {
  max-width: 760px;
  margin: 38px auto 48px;
  white-space: pre-line;
}

.home-page .hero-copy .lime-cta {
  box-sizing: border-box;
  width: auto;
  min-width: 280px;
  min-height: 64px;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px 0 25px;
  font-size: 19px;
}

.home-page .hero-copy .lime-cta > span:first-child {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}

.home-page .hero-copy .lime-cta .arrow-dot {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.home-page .hero-copy .lime-cta .arrow-dot::before {
  left: 12px;
  top: 50%;
}

.home-page .hero-copy .lime-cta .arrow-dot::after {
  right: 12px;
  top: 50%;
}

.home-page .bullet-list p > span:empty:not(:first-child) {
  display: none;
}

.home-page .white-copy h2,
.home-page .feature-card h3,
.home-page .result-card h3,
.home-page .article-card h3,
.home-page .faq-item button {
  overflow-wrap: normal;
  word-break: normal;
}

.home-page .faq-list {
  gap: 24px;
}

.home-page .faq-item {
  border-radius: 8px;
}

.home-page .faq-item button {
  min-height: 86px;
}

.home-page .faq-item:not(.open) p {
  padding-bottom: 0;
}

.home-page .footer-top > div:first-child b::before {
  content: "\00a9 ";
}

.home-page .footer-top > div:first-child b::after {
  content: "\00ae";
}

.home-page .footer-top > div:first-child p {
  max-width: 320px;
}

@media (min-width: 1101px) {
  .home-page .site-header {
    min-height: 86px;
  }

  .home-page .hero-section {
    min-height: 832px;
  }

  .home-page .hero-copy {
    padding-top: 86px;
  }

  .home-page .hero-copy h1 {
    font-size: clamp(62px, 5.2vw, 72px);
    line-height: 0.98;
  }

  .home-page .hero-copy p {
    max-width: 760px;
  }

  .home-page .magenta-rise {
    height: 205px;
  }
}

@media (max-width: 1100px) {
  .home-page .mega-menu:not(.open) {
    display: none;
  }

  .home-page .hero-section {
    min-height: 680px;
  }

  .home-page .hero-copy {
    padding-top: 66px;
  }

  .home-page .two-col,
  .home-page .two-col.reverse,
  .home-page .platform-layout {
    gap: 52px;
  }

  .home-page .notification-stack,
  .home-page .platform-visual {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .home-page .promo-inner {
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    gap: 8px;
    white-space: normal;
  }

  .home-page .hero-section {
    min-height: 560px;
  }

  .home-page .hero-copy h1 {
    font-size: clamp(39px, 11vw, 54px);
  }

  .home-page .hero-copy p {
    max-width: calc(100vw - 32px);
    font-size: 18px;
  }

  .home-page .notification-stack {
    min-height: auto;
    display: grid;
    gap: 14px;
  }

  .home-page .pink-section .follow-card,
  .home-page .pink-section .follow-card.main,
  .home-page .pink-section .follow-card.bottom {
    position: relative;
    top: auto;
    left: auto;
    min-height: 0;
    animation: none;
  }

  .home-page .follow-card {
    width: 100%;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
    font-size: 16px;
  }

  .home-page .follow-card.main,
  .home-page .follow-card.bottom {
    width: 100%;
    margin-left: 0;
  }

  .home-page .pink-section .follow-card.main {
    opacity: 1;
    background: #ffffff;
    color: #171717;
  }

  .home-page .follow-card .mini-person {
    width: 46px;
    height: 46px;
  }

  .home-page .follow-card p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .home-page .ai-card {
    width: 100%;
    height: 430px;
    min-height: 430px;
    padding: 0;
  }

  .home-page .ai-chat-stream {
    padding: 66px 38px 64px;
  }

  .home-page .ai-bubble {
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .home-page .faq-item button {
    min-height: 70px;
    font-size: 22px;
  }

  .home-page .footer-logo {
    font-size: clamp(54px, 19vw, 92px);
  }
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.auth-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 13, 0.54);
  backdrop-filter: blur(8px);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  padding: 24px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 32px 90px rgba(33, 17, 41, 0.28);
}

.auth-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f4f2f6;
}

.auth-close::before,
.auth-close::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 16px;
  width: 14px;
  height: 2px;
  background: #111111;
}

.auth-close::before {
  transform: rotate(45deg);
}

.auth-close::after {
  transform: rotate(-45deg);
}

.auth-head {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  padding-right: 42px;
}

.auth-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--purple);
  color: var(--lime);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 24px;
}

.auth-head p {
  margin: 0 0 3px;
  color: #6f6873;
  font-size: 13px;
  font-weight: 800;
}

.auth-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
}

.auth-mode-switch {
  display: grid;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: #f4f2f6;
}

.auth-mode-switch {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 16px;
}

.auth-mode-switch[hidden] {
  display: none;
}

.auth-mode-switch button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  color: #4a454e;
  font-size: 13px;
  font-weight: 900;
}

.auth-mode-switch button.active {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 10px 24px rgba(33, 17, 41, 0.08);
}

.auth-form {
  display: none;
  gap: 12px;
}

.auth-form.active {
  display: grid;
}

.auth-form label {
  display: grid;
  gap: 7px;
  color: #201a25;
  font-size: 13px;
  font-weight: 900;
}

.auth-form input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #e4e0e8;
  border-radius: var(--radius);
  outline: none;
  background: #fbfafc;
  color: #111111;
  font: inherit;
}

.auth-form input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(230, 30, 145, 0.12);
}

.auth-submit {
  min-height: 48px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--lime);
  color: #000000;
  font-weight: 900;
}

.auth-error {
  min-height: 18px;
  margin: -2px 0 0;
  color: #d72666;
  font-size: 13px;
  font-weight: 800;
}

body.modal-open {
  overflow: hidden;
}

.dashboard-page {
  min-height: 100vh;
  background: #f7f5fa;
}

.dashboard-main {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: 48px 0;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  padding: 34px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(33, 17, 41, 0.08);
}

.dashboard-hero h1 {
  margin: 0 0 10px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 40px;
  line-height: 1;
}

.dashboard-hero p {
  margin: 0;
  color: #5f5864;
  font-size: 18px;
}

.dashboard-badge {
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--lime);
  color: #000000;
  font-weight: 900;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.dashboard-card {
  min-height: 170px;
  padding: 24px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(33, 17, 41, 0.07);
}

.dashboard-card h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.dashboard-card p {
  margin: 0;
  color: #5f5864;
  line-height: 1.45;
}

.dashboard-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  background: #ffffff;
  color: #090909;
}

.dashboard-app .site-header {
  display: none;
}

.dash-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 26px;
  padding: 28px 18px 24px;
  border-right: 1px solid #ececf1;
  background: #ffffff;
  z-index: 20;
}

.dash-logo,
.dash-avatar {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #9bc4ff;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.dash-logo.admin,
.dash-avatar.admin {
  background: linear-gradient(135deg, #1f5cff, #b200f0);
}

.dash-side-nav {
  min-height: 0;
  display: grid;
  gap: 14px;
  align-content: start;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

.dash-side-nav::-webkit-scrollbar {
  display: none;
}

.dash-side-nav button {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 10px;
  color: #747781;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.dash-side-nav button:hover,
.dash-side-nav button.active {
  background: #f2f4ff;
  color: #1f5cff;
  transform: translateY(-1px);
}

.dash-side-nav svg,
.support-launcher svg,
.support-tabs svg,
.dash-tool-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-content {
  width: min(100% - 48px, 1156px);
  margin: 0 auto;
  padding: 32px 0 44px;
}

.dash-promo {
  min-height: 102px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 40px;
  padding: 22px 26px;
  border-radius: 18px;
  background: linear-gradient(105deg, #8f00ff, #e31a8a);
  color: #ffffff;
}

.dash-promo h1 {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1;
}

.dash-promo p {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.dash-promo button {
  min-width: 124px;
  min-height: 52px;
  border-radius: 8px;
  background: #ffffff;
  color: #000000;
  font-size: 18px;
  font-weight: 700;
}

.dash-section {
  margin-top: 34px;
}

.dash-section h2,
.dash-section-head h2,
.admin-topline h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
}

.dash-tools {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.dash-tool-card {
  min-height: 94px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #dedfe6;
  border-radius: 18px;
  background: #ffffff;
  text-align: left;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.dash-tool-card:hover {
  transform: translateY(-2px);
  border-color: #c7d4ff;
  box-shadow: 0 18px 44px rgba(31, 92, 255, 0.1);
}

.dash-tool-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f0f1f7;
}

.dash-tool-card b {
  display: block;
  margin-bottom: 5px;
  font-size: 20px;
}

.dash-tool-card small {
  display: block;
  color: #747781;
  font-size: 18px;
  line-height: 1.35;
}

.dash-tool-card i,
.support-start b {
  position: relative;
  width: 24px;
  height: 24px;
}

.dash-tool-card i::before,
.support-start b::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 16px;
  height: 2px;
  background: currentColor;
}

.dash-tool-card i::after,
.support-start b::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.dash-section-head button {
  color: #747781;
  font-size: 21px;
}

.dash-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.dash-course-card h3 {
  margin: 10px 0 0;
  font-size: 21px;
  line-height: 1.25;
}

.dash-course-cover {
  position: relative;
  min-height: 186px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--purple);
}

.dash-course-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 44%, rgba(255, 255, 255, 0.92) 0 12%, transparent 13%),
    linear-gradient(90deg, rgba(33, 17, 41, 0.12), rgba(33, 17, 41, 0.9));
}

.dash-course-cover::after {
  content: "";
  position: absolute;
  right: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
}

.dash-course-cover span::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-36%, -50%);
  border-left: 16px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.cover-one {
  background:
    url("./assets/mini-cover-uz.webp") center / cover no-repeat,
    var(--purple);
}

.cover-two {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(33, 17, 41, 0.92)),
    url("./assets/ai-agent-hero-desktop.webp") center / cover no-repeat;
}

.cover-three {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(33, 17, 41, 0.92)),
    url("./assets/gami-inst-hero.webp") center / cover no-repeat;
}

.support-launcher {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1f5cff;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(31, 92, 255, 0.28);
}

.support-widget {
  position: fixed;
  right: 28px;
  bottom: 88px;
  z-index: 100;
  width: min(420px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 110px));
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.98);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.support-widget.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.support-home,
.support-chat {
  height: 100%;
  display: none;
}

.support-home.active,
.support-chat.active {
  display: grid;
}

.support-home.active {
  grid-template-rows: 1fr 82px;
}

.support-hero {
  position: relative;
  min-height: 320px;
  padding: 32px 22px 0;
  background:
    radial-gradient(circle at 26% 16%, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(145deg, #235dff 0%, #164be6 100%);
  color: #ffffff;
}

.support-close {
  position: absolute;
  right: 28px;
  top: 24px;
  width: 24px;
  height: 24px;
}

.support-close::before,
.support-close::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 17px;
  height: 2px;
  background: #ffffff;
}

.support-close.dark::before,
.support-close.dark::after {
  background: #6f727b;
}

.support-close::before {
  transform: rotate(45deg);
}

.support-close::after {
  transform: rotate(-45deg);
}

.support-agents {
  display: flex;
  margin-left: 18px;
}

.support-agents span {
  width: 46px;
  height: 46px;
  margin-left: -10px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, #f0c2a0 0 18%, transparent 19%),
    radial-gradient(circle at 50% 65%, #1a1930 0 28%, transparent 29%),
    linear-gradient(135deg, #ffe0f4, #86c7ff);
}

.support-agents span:nth-child(2) {
  background:
    radial-gradient(circle at 50% 28%, #d8a988 0 18%, transparent 19%),
    radial-gradient(circle at 50% 65%, #342852 0 28%, transparent 29%),
    linear-gradient(135deg, #152949, #95e3ff);
}

.support-agents span:nth-child(3) {
  background:
    radial-gradient(circle at 50% 28%, #f0c2a0 0 18%, transparent 19%),
    radial-gradient(circle at 50% 65%, #0f182a 0 28%, transparent 29%),
    linear-gradient(135deg, #c5e4ff, #ffffff);
}

.support-agents.compact {
  margin-left: 0;
}

.support-agents.compact span {
  width: 34px;
  height: 34px;
}

.support-hero h2 {
  margin: 78px 18px 0;
  max-width: 320px;
  font-size: 30px;
  line-height: 1.16;
}

.support-start {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -24px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px 0 26px;
  border-radius: 12px;
  background: #ffffff;
  color: #1f5cff;
  box-shadow: 0 16px 40px rgba(22, 31, 61, 0.16);
  font-size: 18px;
  font-weight: 800;
  text-align: left;
}

.support-start span {
  color: #1a1d24;
}

.support-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-top: 1px solid #ececf1;
}

.support-tabs button {
  display: grid;
  gap: 7px;
  justify-items: center;
  color: #6f727b;
  font-size: 16px;
}

.support-tabs button.active {
  color: #1f5cff;
  font-weight: 800;
}

.support-chat.active {
  grid-template-rows: 64px minmax(0, 1fr) auto;
}

.support-chat header {
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr) 30px 28px;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf0f6;
  background: #ffffff;
}

.support-chat header strong {
  min-width: 0;
  font-size: 17px;
  letter-spacing: 0;
}

[data-support-back] {
  position: relative;
  width: 28px;
  height: 28px;
}

[data-support-back]::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-left: 2px solid #6f727b;
  border-bottom: 2px solid #6f727b;
  transform: rotate(45deg);
}

.support-menu {
  position: relative;
  width: 30px;
  height: 30px;
}

.support-menu::before {
  content: "...";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6f727b;
  font-size: 24px;
  line-height: 1;
}

.support-thread {
  overflow-y: auto;
  padding: 18px 16px;
  background: #ffffff;
}

.support-note {
  margin: 84px auto 10px;
  max-width: 280px;
  color: #313847;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

.support-subnote {
  max-width: 300px;
  margin: 0 auto;
  color: #7a8291;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
}

.support-status {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 7px 12px;
  border: 1px solid #e1e7f0;
  border-radius: 999px;
  background: #f8fbff;
  color: #627089;
  font-size: 12px;
  font-weight: 800;
}

.chat-bubble {
  width: fit-content;
  max-width: 82%;
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: #f2f4f8;
  color: #121621;
  font-size: 15px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.chat-bubble.user {
  margin-left: auto;
  border-radius: 20px 20px 4px 20px;
  background: #1f5cff;
  color: #ffffff;
}

.chat-bubble.bot {
  border-radius: 20px 20px 20px 4px;
}

.chat-bubble.admin {
  border-radius: 20px 20px 20px 4px;
  background: #111827;
  color: #ffffff;
}

.chat-bubble.typing {
  color: #5b6577;
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 5px;
  vertical-align: middle;
}

.typing-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: dashTyping 0.9s infinite ease-in-out;
}

.typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes dashTyping {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.support-compose {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 8px;
  margin: 0 14px 14px;
  padding: 12px 10px 10px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.support-compose input {
  grid-column: 1 / -1;
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 15px;
}

.support-actions {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #7e828b;
  font-size: 13px;
}

.support-actions span:nth-child(3) {
  font-size: 10px;
  font-weight: 900;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 1px 2px;
}

.support-compose button {
  width: 38px;
  height: 38px;
  position: relative;
  justify-self: end;
  border-radius: 50%;
  background: #e8e8eb;
}

.support-compose button::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-top: 3px solid #c6c8ce;
  border-right: 3px solid #c6c8ce;
  transform: rotate(-45deg);
}

.support-compose:focus-within button {
  background: #1f5cff;
}

.support-compose:focus-within button::before {
  border-color: #ffffff;
}

.user-dashboard-app .user-dash-content {
  width: 100%;
  margin: 0;
  padding: 0;
}

.dash-view {
  display: none;
}

.dash-view.active {
  display: block;
}

.dash-view.active.dash-module-layout {
  display: grid;
}

.dash-home-inner {
  width: min(100% - 48px, 1156px);
  margin: 0 auto;
  padding: 32px 0 44px;
}

.user-dashboard-app .dash-side-nav button,
.user-dashboard-app .dash-logo,
.user-dashboard-app .dash-avatar {
  position: relative;
}

.user-dashboard-app .dash-side-nav button::after,
.user-dashboard-app .dash-logo::after,
.user-dashboard-app .dash-avatar::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  z-index: 120;
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #151515;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
  white-space: nowrap;
}

.user-dashboard-app .dash-side-nav button::before,
.user-dashboard-app .dash-logo::before,
.user-dashboard-app .dash-avatar::before {
  content: "";
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  z-index: 121;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid #151515;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}

.user-dashboard-app .dash-side-nav button:hover::after,
.user-dashboard-app .dash-side-nav button:focus-visible::after,
.user-dashboard-app .dash-logo:hover::after,
.user-dashboard-app .dash-logo:focus-visible::after,
.user-dashboard-app .dash-avatar:hover::after,
.user-dashboard-app .dash-avatar:focus-visible::after,
.user-dashboard-app .dash-side-nav button:hover::before,
.user-dashboard-app .dash-side-nav button:focus-visible::before,
.user-dashboard-app .dash-logo:hover::before,
.user-dashboard-app .dash-logo:focus-visible::before,
.user-dashboard-app .dash-avatar:hover::before,
.user-dashboard-app .dash-avatar:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.user-dashboard-app .dash-side-nav button.active {
  box-shadow: inset 0 0 0 2px #111111;
}

.user-dashboard-app .dash-side-nav button.active svg {
  stroke-width: 2.35;
}

.dash-profile {
  position: relative;
}

.dash-profile-menu {
  position: absolute;
  left: calc(100% + 16px);
  bottom: 0;
  z-index: 1200;
  width: 300px;
  display: grid;
  gap: 2px;
  padding: 14px;
  border: 1px solid #e7e8ef;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 22px 70px rgba(21, 26, 44, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.dash-profile-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.dash-profile-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 4px 4px 12px;
  border-bottom: 1px solid #ececf1;
  margin-bottom: 6px;
}

.dash-profile-head .dash-avatar {
  width: 44px;
  height: 44px;
}

.dash-profile-head b,
.dash-profile-head small {
  display: block;
}

.dash-profile-head small {
  color: #747781;
}

.dash-profile-menu button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
  border-radius: 9px;
  color: #171717;
  font-size: 18px;
  text-align: left;
}

.dash-profile-menu button:hover {
  background: #f3f4f8;
}

.dash-profile-menu em {
  padding: 4px 8px;
  border-radius: 8px;
  background: #e14cbc;
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.dash-language-wrap {
  position: relative;
}

.dash-language-wrap > button i {
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid #7b7f89;
  border-bottom: 2px solid #7b7f89;
  transform: rotate(-45deg);
}

.dash-language-flyout {
  position: absolute;
  left: calc(100% + 10px);
  bottom: -8px;
  z-index: 1210;
  width: 180px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #e7e8ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(21, 26, 44, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px) scale(0.98);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.dash-language-flyout.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.dash-profile-menu .dash-language-flyout button {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  color: #16181d;
  font-size: 16px;
}

.dash-profile-menu .dash-language-flyout button.active {
  background: #f0f1f7;
  color: #245bf5;
}

.dash-profile-menu .dash-language-flyout button.active::after {
  content: "";
  width: 8px;
  height: 14px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.dash-module-layout {
  min-height: 100vh;
  grid-template-columns: 340px minmax(0, 1fr);
  background: #ffffff;
}

.dash-module-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  gap: 10px;
  padding: 28px 26px;
  border-right: 1px solid #ececf1;
  background: #ffffff;
}

.dash-module-sidebar h1 {
  margin: 0 0 10px;
  font-size: 29px;
  line-height: 1.05;
}

.dash-module-sidebar h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 4px;
  font-size: 22px;
  line-height: 1.1;
}

.dash-module-sidebar h2 span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c9ccd5;
  color: #ffffff;
}

.dash-module-sidebar p,
.dash-empty-copy {
  margin: 0;
  color: #747781;
  font-size: 18px;
}

.dash-primary-action,
.dash-dark-action,
.dash-sub-active,
.dash-sub-muted,
.dash-text-action {
  min-height: 42px;
  border-radius: 8px;
  font-size: 19px;
  text-align: left;
}

.dash-primary-action {
  display: grid;
  place-items: center;
  background: #245bf5;
  color: #ffffff;
  font-weight: 800;
}

.dash-primary-action.wide {
  width: min(100%, 300px);
  min-height: 52px;
  margin-top: 18px;
}

.dash-dark-action {
  display: grid;
  place-items: center;
  background: #050505;
  color: #ffffff;
  font-weight: 800;
}

.dash-sub-active,
.dash-sub-muted,
.dash-text-action {
  padding: 0 14px;
}

.dash-sub-active {
  background: #f0f1f6;
}

.dash-sub-muted,
.dash-text-action {
  color: #747781;
}

.dash-sub-muted:hover,
.dash-text-action:hover {
  background: #f5f6fa;
  color: #0b0b0b;
}

.dash-plan-card,
.dash-help-card {
  align-self: end;
  margin-top: auto;
  padding: 22px 16px;
  border-top: 1px solid #ececf1;
}

.dash-plan-card b,
.dash-plan-card span,
.dash-help-card b,
.dash-help-card p {
  display: block;
}

.dash-plan-card b,
.dash-help-card b {
  margin-bottom: 12px;
  font-size: 21px;
}

.dash-plan-card span {
  padding-bottom: 12px;
  border-bottom: 6px solid #15c93a;
  color: #111111;
  font-size: 18px;
}

.dash-help-card {
  margin-top: 42px;
  border: 0;
  border-radius: 18px;
  background: #f7f8fb;
  text-align: center;
}

.dash-help-card button {
  min-height: 40px;
  margin-top: 14px;
  padding: 0 20px;
  border: 1px solid #e0e1e8;
  border-radius: 8px;
}

.dash-workspace {
  min-width: 0;
  padding: 36px 42px;
}

.dash-workspace-top,
.dash-top-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.dash-workspace-top h2 {
  margin: 0;
  font-size: 28px;
}

.dash-workspace-top h2 span,
.dash-account-line b {
  color: #747781;
  font-weight: 800;
}

.dash-top-actions label,
.dash-top-actions button,
.dash-search {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #dfe1e8;
  border-radius: 8px;
  background: #ffffff;
}

.dash-top-actions label {
  width: 300px;
  padding: 0 14px;
}

.dash-top-actions input,
.dash-search input {
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 18px;
}

.dash-top-actions button {
  padding: 0 14px;
  color: #747781;
  font-size: 18px;
}

.dash-search {
  padding: 0 12px;
}

.dash-trial-banner {
  min-height: 60px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: 20px 0 28px;
  padding: 10px 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, #fde1f6, #fde5ec);
}

.dash-trial-banner span,
.dash-account-line span {
  width: 28px;
  height: 28px;
  border: 2px solid #840c5c;
  border-radius: 50%;
}

.dash-trial-banner b {
  font-size: 22px;
  font-weight: 500;
}

.dash-trial-banner button {
  min-height: 42px;
  padding: 0 20px;
  border-radius: 7px;
  background: #650548;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
}

.dash-trial-banner.creator {
  background: linear-gradient(90deg, #fce0f7, #fce6ee);
}

.dash-trial-banner.virale {
  background: linear-gradient(90deg, rgba(35, 91, 245, 0.12), rgba(227, 26, 138, 0.14));
}

.dash-account-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.dash-account-line span {
  border-color: #d7d9e2;
}

.dash-account-line b {
  font-size: 26px;
}

.dash-empty-state {
  display: grid;
  justify-items: center;
  padding-top: 16px;
  text-align: center;
}

.dash-empty-state h3 {
  margin: 20px 0 8px;
  font-size: 36px;
}

.dash-empty-state p {
  margin: 0 0 26px;
  color: #747781;
  font-size: 22px;
}

.dash-empty-state button {
  position: relative;
  width: min(430px, 100%);
  min-height: 60px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 22px;
  border: 1px solid #e0e1e8;
  border-radius: 8px;
  background: #ffffff;
  font-size: 22px;
  text-align: left;
}

.dash-empty-state em {
  position: absolute;
  right: 42px;
  top: -12px;
  padding: 8px 12px;
  background: #dcd0ff;
  font-style: normal;
  font-weight: 900;
}

.dash-plug-art {
  position: relative;
  width: 340px;
  height: 260px;
}

.dash-plug-art::before {
  content: "";
  position: absolute;
  left: 52px;
  top: 36px;
  width: 236px;
  height: 190px;
  background:
    radial-gradient(circle at 50% 50%, #e8ffb7 0 43%, transparent 44%),
    conic-gradient(from 9deg, transparent 0 5%, #cfe0ff 5% 10%, transparent 10% 18%, #e8ffb7 18% 26%, transparent 26% 35%, #cfe0ff 35% 43%, transparent 43% 52%, #e8ffb7 52% 64%, transparent 64% 74%, #cfe0ff 74% 82%, transparent 82% 100%);
  filter: drop-shadow(10px 18px 0 #d7e2ff);
}

.dash-plug-art::after {
  content: "";
  position: absolute;
  left: 80px;
  top: 92px;
  width: 180px;
  height: 64px;
  border: 6px solid #2a2036;
  border-radius: 30px;
  background:
    radial-gradient(circle at 65% 36%, #2a2036 0 6px, transparent 7px),
    radial-gradient(circle at 65% 67%, #2a2036 0 6px, transparent 7px),
    linear-gradient(90deg, #ffffff 0 48%, #f4edff 49% 100%);
}

.brand-dot {
  width: 28px;
  height: 28px;
  display: block;
  justify-self: center;
  border-radius: 8px;
}

.brand-dot.instagram {
  background: linear-gradient(135deg, #ffcf45, #f23686 55%, #7148ff);
}

.brand-dot.telegram {
  border-radius: 50%;
  background: #2ca7df;
}

.brand-dot.tiktok {
  border-radius: 50%;
  background: #050505;
}

.dash-ai-center {
  width: min(620px, 100%);
  margin: 96px auto 0;
}

.dash-ai-center h2 {
  margin: 0 0 40px;
  font-size: 38px;
}

.dash-ai-feature {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  margin-bottom: 32px;
}

.dash-ai-feature i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #245bf5;
  color: #ffffff;
  font-style: normal;
  font-weight: 900;
}

.dash-ai-feature b {
  display: block;
  margin-bottom: 6px;
  font-size: 27px;
}

.dash-ai-feature p {
  margin: 0;
  color: #747781;
  font-size: 20px;
  line-height: 1.35;
}

.virale-workspace {
  background:
    radial-gradient(circle at 78% 24%, rgba(227, 26, 138, 0.08), transparent 34%),
    #ffffff;
}

.dash-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f0e6ff;
  color: #7411d9;
  font-weight: 900;
}

.virale-agent-card {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(260px, 320px);
  gap: 28px;
  padding: 30px;
  border-radius: 24px;
  background: #17101f;
  color: #ffffff;
}

.virale-agent-card h3 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 0.95;
}

.virale-agent-card p {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 20px;
  line-height: 1.35;
}

.virale-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 520px;
  margin-top: 26px;
}

.virale-form input {
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: 0;
}

.virale-form button {
  min-height: 56px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--lime);
  color: #050505;
  font-weight: 900;
  justify-self: start;
}

.virale-preview {
  min-height: 340px;
  display: grid;
  align-content: end;
  gap: 12px;
  padding: 22px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 72% 18%, #e31a8a 0 18%, transparent 19%),
    linear-gradient(135deg, #2b1745, #9c00ff);
}

.virale-preview span {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: var(--lime);
  box-shadow: 26px 20px 0 rgba(255, 255, 255, 0.18);
}

.virale-preview b {
  font-size: 34px;
}

.virale-preview p {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
}

.virale-preview em {
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-style: normal;
  font-weight: 900;
}

.virale-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.virale-metrics article {
  padding: 22px;
  border: 1px solid #ececf1;
  border-radius: 18px;
  background: #ffffff;
}

.virale-metrics b,
.virale-metrics span {
  display: block;
}

.virale-metrics b {
  font-size: 34px;
}

.virale-metrics span {
  color: #747781;
}

.blank-workspace {
  background: #ffffff;
}

.dash-chat-empty {
  margin-top: 40px !important;
  text-align: center;
}

.lessons-workspace {
  background: #ffffff;
}

.lessons-workspace h2 {
  margin: 20px 0 28px;
  font-size: 28px;
}

.lessons-workspace h2 span {
  color: #747781;
  font-weight: 500;
}

.dash-lessons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.dash-lessons-grid article {
  overflow: hidden;
  border: 1px solid #e0e1e8;
  border-radius: 18px;
  background: #ffffff;
}

.dash-lessons-grid article > div {
  min-height: 220px;
  background-size: cover;
  background-position: center;
}

.dash-lessons-grid p,
.dash-lessons-grid b {
  display: block;
  padding: 0 20px;
}

.dash-lessons-grid p {
  margin: 18px 0 8px;
  color: #747781;
}

.dash-lessons-grid b {
  padding-bottom: 20px;
  font-size: 19px;
  line-height: 1.25;
}

.dash-settings-form {
  width: min(680px, 100%);
  margin: 70px auto 0;
}

.dash-settings-form h2 {
  margin: 0 0 34px;
  font-size: 38px;
}

.dash-settings-form label {
  display: grid;
  gap: 12px;
  font-size: 21px;
  font-weight: 800;
}

.dash-settings-form span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 12px;
}

.dash-settings-form input {
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #dfe1e8;
  border-radius: 9px;
  font-size: 20px;
}

.dash-settings-form button {
  border-radius: 9px;
  background: #245bf5;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.admin-content {
  width: min(100% - 48px, 1240px);
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

.admin-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.admin-topline p {
  margin: 0 0 8px;
  color: #747781;
  font-weight: 800;
}

.admin-topline span,
.admin-refresh,
.admin-card-head button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  background: #f0f2f8;
  color: #1f5cff;
  font-weight: 900;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.admin-stat-grid article,
.admin-card,
.admin-chat-list,
.admin-chat-room,
.admin-profile-card,
.admin-setting-card {
  border: 1px solid #e5e6eb;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(19, 25, 44, 0.06);
}

.admin-stat-grid article {
  min-height: 150px;
  padding: 24px;
}

.admin-stat-grid b {
  display: block;
  margin: 16px 0 4px;
  font-size: 32px;
}

.admin-stat-grid p,
.admin-empty {
  margin: 0;
  color: #747781;
}

.admin-stat-icon {
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 12px;
}

.admin-stat-icon.blue {
  background: #1f5cff;
}

.admin-stat-icon.pink {
  background: #e31a8a;
}

.admin-stat-icon.lime {
  background: var(--lime);
}

.admin-card {
  padding: 24px;
}

.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-card h2 {
  margin: 0;
}

.admin-recent-list {
  display: grid;
  gap: 12px;
}

.admin-recent-list button,
.admin-chat-list button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #f7f8fb;
  text-align: left;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.admin-recent-list button:hover,
.admin-chat-list button:hover,
.admin-chat-list button.active {
  background: #edf2ff;
  transform: translateY(-1px);
}

.admin-recent-list b,
.admin-chat-list b {
  display: block;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-recent-list small,
.admin-chat-list small {
  display: block;
  overflow: hidden;
  color: #747781;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-recent-list em,
.admin-chat-list em {
  align-self: start;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: #1f5cff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.admin-chat-layout {
  min-height: calc(100vh - 128px);
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
}

.admin-chat-list {
  overflow-y: auto;
  padding: 14px;
}

.admin-chat-list button + button {
  margin-top: 10px;
}

.admin-chat-room {
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr) auto;
  overflow: hidden;
}

.admin-chat-room header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e6eb;
}

.admin-chat-room header b {
  display: block;
  font-size: 18px;
}

.admin-chat-room header span {
  color: #747781;
  font-size: 14px;
}

.admin-status {
  padding: 5px 12px;
  border-radius: 999px;
  background: #eaffd5;
  color: #2b7a00 !important;
  font-weight: 900;
}

.admin-thread {
  overflow-y: auto;
  padding: 22px;
  background: #fbfbfd;
}

.admin-reply-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #e5e6eb;
}

.admin-reply-form input {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dfe1e8;
  border-radius: 999px;
  outline: 0;
}

.admin-reply-form button,
.admin-profile-card button,
.admin-setting-card button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: #1f5cff;
  color: #ffffff;
  font-weight: 900;
}

.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-profile-card,
.admin-setting-card {
  padding: 24px;
}

.admin-profile-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}

.dash-avatar.large {
  width: 74px;
  height: 74px;
  font-size: 30px;
}

.admin-profile-card h2,
.admin-setting-card b {
  margin: 0 0 6px;
  font-size: 22px;
}

.admin-profile-card p,
.admin-setting-card p {
  margin: 0;
  color: #747781;
}

.admin-setting-card {
  display: grid;
  gap: 16px;
  align-content: start;
}

.admin-setting-card.danger button {
  background: #0b0b0b;
}

@media (max-width: 980px) {
  .dashboard-app {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .dash-sidebar {
    padding-inline: 10px;
  }

  .dash-content,
  .admin-content {
    width: min(100% - 28px, 760px);
  }

  .dash-course-grid,
  .admin-stat-grid,
  .admin-settings-grid {
    grid-template-columns: 1fr;
  }

  .admin-chat-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dashboard-app {
    display: block;
    padding-bottom: 72px;
  }

  .dash-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: 64px;
    display: flex;
    justify-content: space-around;
    padding: 8px 12px;
    border-top: 1px solid #ececf1;
    border-right: 0;
  }

  .dash-logo,
  .dash-profile {
    display: none;
  }

  .dash-side-nav {
    display: flex;
    justify-content: space-around;
    gap: 6px;
    overflow-x: auto;
  }

  .dash-side-nav button {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }

  .dash-content,
  .admin-content {
    width: min(100% - 24px, 540px);
    padding-top: 18px;
  }

  .dash-promo {
    align-items: flex-start;
    flex-direction: column;
  }

  .dash-tool-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .dash-tool-card i {
    display: none;
  }

  .support-widget {
    right: 8px;
    bottom: 78px;
    width: calc(100vw - 16px);
    height: min(760px, calc(100vh - 96px));
  }

  .support-launcher {
    right: 18px;
    bottom: 82px;
  }

  .admin-profile-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .dash-module-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .dash-workspace {
    padding: 28px;
  }

  .dash-lessons-grid,
  .dash-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .virale-agent-card {
    grid-template-columns: 1fr;
  }

  .virale-preview {
    min-height: 280px;
  }
}

@media (max-width: 980px) {
  .dash-module-layout {
    grid-template-columns: 244px minmax(0, 1fr);
  }

  .dash-module-sidebar {
    padding: 22px 18px;
  }

  .dash-workspace-top,
  .dash-top-actions,
  .virale-form {
    align-items: stretch;
    flex-direction: column;
  }

  .dash-top-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .dash-top-actions label {
    width: 100%;
  }

  .dash-trial-banner {
    grid-template-columns: auto 1fr;
  }

  .dash-trial-banner button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .virale-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dash-home-inner {
    width: min(100% - 24px, 540px);
    padding-top: 18px;
  }

  .dash-view.active.dash-module-layout {
    display: block;
  }

  .dash-module-sidebar {
    position: static;
    height: auto;
    min-height: 0;
    padding: 20px 18px;
    border-right: 0;
    border-bottom: 1px solid #ececf1;
  }

  .dash-workspace {
    padding: 20px 14px 92px;
  }

  .dash-empty-state h3 {
    font-size: 28px;
  }

  .dash-empty-state p,
  .dash-trial-banner b {
    font-size: 18px;
  }

  .dash-plug-art {
    width: 280px;
    height: 210px;
    transform: scale(0.85);
  }

  .dash-ai-center {
    margin-top: 34px;
  }

  .dash-ai-center h2,
  .dash-settings-form h2 {
    font-size: 32px;
  }

  .dash-ai-feature {
    grid-template-columns: 44px 1fr;
  }

  .dash-ai-feature i {
    width: 44px;
    height: 44px;
  }

  .dash-ai-feature b {
    font-size: 22px;
  }

  .virale-agent-card {
    padding: 22px;
  }

  .virale-agent-card h3 {
    font-size: 38px;
  }

  .dash-lessons-grid,
  .dash-course-grid {
    grid-template-columns: 1fr;
  }

  .dash-settings-form {
    margin-top: 32px;
  }

  .dash-settings-form span {
    grid-template-columns: 1fr;
  }

  .user-dashboard-app .dash-side-nav button::before,
  .user-dashboard-app .dash-side-nav button::after,
  .user-dashboard-app .dash-logo::before,
  .user-dashboard-app .dash-logo::after,
  .user-dashboard-app .dash-avatar::before,
  .user-dashboard-app .dash-avatar::after,
  .dash-profile-menu {
    display: none;
  }
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 94px;
  min-height: 260px;
}

.footer-top div {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-top b {
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 900;
}

.footer-top p,
.footer-top button {
  margin: 0;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}

.footer-top button {
  transition:
    color 0.16s ease,
    transform 0.16s ease;
}

.footer-top button:hover {
  color: var(--lime);
  transform: translateX(2px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.socials {
  display: flex;
  gap: 10px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.socials button,
.footer-social span,
.to-top {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--purple);
  font-size: 0;
  font-weight: 900;
}

.socials button {
  display: grid;
  place-items: center;
  color: #090909;
  transition:
    transform 0.16s ease,
    background 0.16s ease;
}

.footer-social span {
  display: grid;
  place-items: center;
  color: #090909;
  font-size: 11px;
  text-transform: lowercase;
  transition:
    transform 0.16s ease,
    background 0.16s ease;
}

.socials button:hover,
.footer-social span:hover {
  transform: translateY(-2px);
  background: var(--lime);
}

.socials svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.to-top {
  position: relative;
}

.to-top::before,
.to-top::after {
  content: "";
  position: absolute;
  background: var(--purple);
}

.to-top::before {
  width: 3px;
  height: 16px;
  left: 16px;
  top: 10px;
}

.to-top::after {
  width: 10px;
  height: 10px;
  left: 12px;
  top: 9px;
  border-left: 3px solid var(--purple);
  border-top: 3px solid var(--purple);
  background: transparent;
  transform: rotate(45deg);
}

.footer-logo {
  color: #28a7ee;
  font-size: 112px;
}

.footer-lightning {
  display: flex;
  gap: 18px;
  margin-top: -10px;
}

.footer-lightning span {
  width: 210px;
  height: 220px;
  background: linear-gradient(180deg, #20a7ef 0%, #e65dea 53%, #fb4289 100%);
  clip-path: polygon(19% 0, 100% 0, 64% 42%, 97% 42%, 22% 100%, 42% 54%, 0 54%);
}

.pricing-main {
  background: #ffffff;
}

.pricing-page {
  --container: 1320px;
}

.pricing-hero {
  padding: 68px 0 80px;
  overflow-x: auto;
}

.pricing-hero h1 {
  max-width: 1240px;
  margin: 0 auto 160px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 70px;
  line-height: 1;
  letter-spacing: 0;
}

.pricing-shell {
  display: grid;
  grid-template-columns: 210px minmax(920px, 1fr);
  gap: 34px;
  align-items: start;
}

.pricing-side {
  padding-top: 10px;
}

.pricing-side h2 {
  margin: 0 0 32px;
  color: #26313d;
  font-size: 31px;
  line-height: 1.03;
  font-weight: 700;
}

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  font-size: 17px;
  font-weight: 800;
}

.billing-toggle > span {
  width: 56px;
  height: 30px;
  position: relative;
  flex: 0 0 56px;
  border-radius: 999px;
  background: #d7d7d7;
  transition: background 0.18s ease;
}

.billing-toggle > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.18s ease;
}

.billing-toggle.is-yearly > span {
  background: #111111;
}

.billing-toggle.is-yearly > span::after {
  transform: translateX(26px);
  background: var(--lime);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.plan-card {
  min-height: 470px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 38px 24px 30px;
  border-radius: 22px;
  text-align: center;
}

.plan-card h3 {
  margin: 0 0 22px;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
}

.plan-card p {
  min-height: 96px;
  max-width: 250px;
  margin: 0 auto 34px;
  font-size: 18px;
  line-height: 1.28;
  font-weight: 500;
}

.plan-free {
  background: #f5f3f7;
  color: #26313d;
}

.plan-pro {
  background: var(--blue);
  color: #ffffff;
}

.plan-creator {
  background: #090909;
  color: #ffffff;
}

.plan-premium {
  background: var(--purple);
  color: #ffffff;
}

.price-block {
  display: grid;
  justify-items: center;
  margin-top: auto;
  margin-bottom: 34px;
}

.price-block del {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 18px;
  font-weight: 900;
}

.pricing-page:not(.billing-yearly) .price-block del {
  display: none;
}

.pricing-page.billing-yearly .price-block del {
  display: block;
}

.plan-free .price-block del {
  display: none;
}

.price-block strong {
  white-space: nowrap;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
}

.plan-premium .price-block strong {
  font-size: 32px;
}

.price-block span {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 800;
}

.price-block small {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  font-weight: 800;
}

.plan-free .price-block small,
.plan-free .price-block span {
  color: #26313d;
}

.lime-cta.flat {
  width: min(100%, 240px);
  min-height: 64px;
  padding: 0 24px;
  font-size: 20px;
}

.pricing-compare {
  display: grid;
  grid-template-columns: 210px repeat(4, minmax(250px, 1fr));
  gap: 0 20px;
  align-items: stretch;
  margin-top: 18px;
}

.compare-label {
  min-height: 142px;
  display: grid;
  align-content: center;
  padding-right: 20px;
}

.compare-label.tall {
  min-height: 270px;
}

.compare-label h3 {
  margin: 0;
  color: #17202b;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}

.compare-label small {
  display: block;
  margin-top: 34px;
  color: #69707a;
  font-size: 14px;
  line-height: 1.35;
}

.compare-cell {
  min-height: 142px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 22px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
  text-align: center;
}

.compare-cell.tall {
  min-height: 270px;
  align-content: center;
}

.compare-cell span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
}

.compare-cell.free {
  background: #f5f3f7;
  color: #26313d;
}

.compare-cell.pro {
  background: var(--blue);
  color: #ffffff;
}

.compare-cell.creator {
  background: #090909;
  color: #ffffff;
}

.compare-cell.premium {
  background: var(--purple);
  color: #ffffff;
}

.compare-cell b {
  font-size: 18px;
}

.compare-cell.creator.tall,
.compare-cell.premium.tall {
  justify-items: start;
  text-align: left;
}

.compare-cell.creator.tall b,
.compare-cell.premium.tall b {
  justify-self: center;
  margin-bottom: 12px;
}

.compare-cell.premium.tall b,
.compare-cell.premium:not(.tall) b:first-child {
  color: #ff4fb3;
}

.pricing-compare > .compare-cell:nth-last-child(-n + 4) {
  border-radius: 0 0 22px 22px;
}

@media (max-width: 1100px) {
  .nav-wrap {
    grid-template-columns: auto auto auto;
  }

  .main-nav {
    display: none;
  }

  .hero-copy h1,
  .discover-section h2 {
    font-size: 54px;
  }

  .two-col,
  .two-col.reverse,
  .platform-layout {
    grid-template-columns: 1fr;
  }

  .platform-layout {
    gap: 42px;
  }

  .notification-stack,
  .ai-card,
  .leader-phone {
    justify-self: center;
  }

  .feature-large {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .feature-large .template-phone {
    justify-self: center;
  }

  .footer-top {
    gap: 36px;
  }

  .pricing-hero h1 {
    margin-bottom: 90px;
    font-size: 54px;
  }

  .pricing-shell,
  .pricing-compare {
    width: 1180px;
  }
}

@media (max-width: 760px) {
  .page-container,
  .nav-wrap {
    width: min(calc(100% - 32px), var(--container));
  }

  .nav-wrap {
    min-height: 68px;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .brand {
    font-size: 23px;
  }

  .account-btn {
    display: none;
  }

  .lang-select {
    grid-column: 2;
    grid-row: 1;
  }

  .nav-actions {
    display: none;
  }

  .lang-menu {
    top: 54px;
  }

  .black-cta {
    min-height: 38px;
    max-width: 178px;
    padding: 0 18px;
    font-size: 13px;
  }

  .promo-strip {
    min-height: 44px;
  }

  .promo-inner {
    width: calc(100vw - 32px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
  }

  .promo-inner span {
    margin-right: 0;
  }

  .hero-section {
    min-height: 650px;
  }

  .hero-copy {
    padding-top: 54px;
  }

  .hero-copy h1,
  .discover-section h2 {
    font-size: 28px;
    line-height: 1;
  }

  .hero-copy h1,
  .hero-copy p {
    width: min(100%, 330px);
    max-width: 330px;
    overflow-wrap: normal;
  }

  .hero-copy p {
    font-size: 18px;
  }

  .magenta-rise {
    height: 170px;
  }

  .pink-section,
  .plum-section,
  .blue-section {
    min-height: auto;
    padding: 120px 0;
  }

  .white-copy {
    width: min(100%, 320px);
    max-width: 320px;
  }

  .white-copy h2 {
    font-size: 28px;
    max-width: 100%;
    overflow-wrap: normal;
  }

  .bullet-list p {
    font-size: 17px;
    overflow-wrap: normal;
  }

  .follow-card.main,
  .follow-card.bottom {
    margin-left: 0;
  }

  .ai-card {
    padding: 26px;
  }

  .phone-shell {
    width: min(100%, 330px);
  }

  .discover-section {
    padding: 78px 0;
  }

  .platform-tabs > button:not(.lime-cta) {
    min-height: 56px;
    font-size: 34px;
  }

  .platform-visual {
    min-height: 370px;
  }

  .visual-card {
    left: 22px;
    top: 172px;
    width: min(260px, calc(100% - 44px));
  }

  .visual-floating.one {
    right: 22px;
  }

  .community-section {
    padding: 90px 0 70px;
  }

  .community-section h2 {
    font-size: 76px;
  }

  .community-section p {
    font-size: 20px;
  }

  .people-row {
    gap: 14px;
    overflow: hidden;
  }

  .person-avatar {
    width: 115px;
    height: 115px;
    flex-basis: 115px;
  }

  .template-phone {
    width: min(265px, calc(100vw - 86px));
  }

  .feature-grid,
  .result-grid,
  .article-grid,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .feature-card {
    min-height: auto;
    padding: 32px 22px;
  }

  .ai-manager-demo {
    width: min(100%, 300px);
    min-height: 220px;
    margin-top: 36px;
  }

  .ai-demo-bubble {
    max-width: 164px;
    font-size: 12px;
  }

  .ai-demo-bubble.bot {
    left: 76px;
  }

  .ai-demo-chat.second .ai-demo-bubble.bot {
    left: 66px;
  }

  .rating-table {
    min-height: 190px;
  }

  .rating-row {
    grid-template-columns: 30px minmax(82px, 1fr) auto;
    gap: 8px;
    padding: 0 10px;
    font-size: 14px;
  }

  .rating-metrics {
    gap: 7px;
  }

  .rating-metric {
    min-width: 30px;
  }

  .rating-metric::after {
    width: 13px;
    height: 13px;
  }

  .features-section h2,
  .results-section h2,
  .articles-section h2,
  .faq-section h2 {
    font-size: 34px;
  }

  .faq-item button {
    min-height: 68px;
    padding: 0 18px 0 20px;
    font-size: 20px;
  }

  .faq-item p {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
  }

  .footer-logo {
    font-size: 52px;
  }

  .footer-lightning span {
    width: 90px;
    height: 110px;
  }

  .auth-card {
    padding: 20px;
  }

  .auth-head h2 {
    font-size: 21px;
  }

  .auth-mode-switch {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .dashboard-main {
    width: min(100% - 32px, 1180px);
    padding: 28px 0;
  }

  .dashboard-hero,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero {
    padding: 24px;
  }

  .dashboard-hero h1 {
    font-size: 32px;
  }

  .pricing-hero {
    padding: 46px 0 64px;
  }

  .pricing-hero h1 {
    margin-bottom: 54px;
    font-size: 38px;
  }

  .pricing-shell {
    grid-template-columns: 170px minmax(860px, 1fr);
    gap: 18px;
  }

  .pricing-shell,
  .pricing-compare {
    width: 1080px;
  }

  .pricing-compare {
    grid-template-columns: 170px repeat(4, 220px);
    gap: 0 16px;
  }

  .plans-grid {
    grid-template-columns: repeat(4, 220px);
    gap: 16px;
  }

  .pricing-side h2 {
    font-size: 24px;
  }

  .plan-card {
    min-height: 420px;
    padding: 30px 18px 24px;
  }

  .plan-card h3 {
    font-size: 28px;
  }

  .plan-card p {
    font-size: 16px;
  }

  .price-block strong {
    font-size: 30px;
  }

  .compare-label h3,
  .compare-cell {
    font-size: 17px;
  }
}

.telegram-page {
  --telegram: #1297dc;
  --telegram-light: #58c6f5;
  --telegram-dark: #23142d;
}

.telegram-page .site-header {
  background: rgba(35, 20, 45, 0.98);
}

.telegram-page .pink-cta {
  background: var(--telegram);
}

.telegram-hero {
  background: var(--telegram-dark);
}

.telegram-page .hero-bolt {
  inset: -70px -130px 0 -40px;
  background: linear-gradient(150deg, var(--telegram-light), var(--telegram));
  clip-path: polygon(29% 0, 100% 0, 73% 46%, 100% 46%, 58% 100%, 64% 46%, 11% 46%);
}

.telegram-hero-visual {
  min-height: 560px;
}

.telegram-hero-phone {
  position: absolute;
  right: 92px;
  bottom: -26px;
  z-index: 3;
  width: 360px;
  height: 520px;
}

.telegram-phone-large {
  display: flex;
  justify-content: center;
  min-height: 470px;
}

.telegram-phone-shell {
  position: relative;
  width: 320px;
  min-height: 510px;
  padding: 60px 28px 26px;
  overflow: hidden;
  border: 10px solid #0b0b0b;
  border-radius: 42px;
  background: #ffffff;
  box-shadow:
    0 0 0 4px #d3c4ac,
    0 34px 70px rgba(20, 10, 26, 0.22);
}

.telegram-phone-shell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, #ffffff);
  pointer-events: none;
}

.telegram-phone-shell > * {
  position: relative;
  z-index: 1;
}

.telegram-phone-top {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  margin-bottom: 20px;
  color: #111111;
  font-size: 14px;
  text-align: center;
}

.telegram-phone-top svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--telegram);
  stroke-width: 3;
}

.course-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 110px;
  margin-bottom: 12px;
  padding: 18px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 78% 30%, #52c6f8 0 14%, transparent 15%),
    radial-gradient(circle at 24% 18%, #48bee9 0 8%, transparent 9%),
    #23142d;
  color: #ffffff;
}

.course-banner span {
  max-width: 100px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.02;
}

.course-banner b {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 46px;
}

.course-copy,
.course-price {
  margin: 0 0 10px;
  color: #111111;
  font-size: 13px;
  line-height: 1.35;
}

.course-price {
  margin-bottom: 12px;
}

.telegram-phone-shell button {
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  border-radius: 7px;
  background: #d7d4df;
  color: #1c1425;
  font-weight: 800;
}

.telegram-phone-shell .dm-reply.plain {
  width: fit-content;
  margin: 22px 0 0 auto;
  padding: 10px 14px;
  border-radius: 14px 14px 2px 14px;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 10px 22px rgba(20, 10, 26, 0.08);
}

.telegram-subscriber-visual {
  position: relative;
  min-height: 410px;
}

.telegram-subscriber-visual .user-node {
  position: absolute;
  left: 39%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, #dfe3ed 0 26%, transparent 27%),
    linear-gradient(#ffffff, #ffffff);
}

.telegram-subscriber-visual .top {
  top: 34px;
}

.telegram-subscriber-visual .middle {
  top: 156px;
}

.telegram-subscriber-visual .bottom {
  top: 276px;
}

.telegram-subscriber-visual .connector {
  position: absolute;
  left: 46%;
  width: 70px;
  height: 126px;
  border-right: 2px solid #d9deeb;
  border-radius: 0 22px 22px 0;
}

.telegram-subscriber-visual .connector.one {
  top: 50px;
}

.telegram-subscriber-visual .connector.two {
  top: 176px;
}

.cp-mark,
.telegram-square,
.tg-count {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cp-mark {
  left: 56%;
  top: 176px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--lime);
}

.cp-mark svg {
  width: 42px;
  fill: var(--purple);
}

.tg-count {
  left: 74%;
  top: 140px;
  gap: 8px;
  min-width: 92px;
  height: 48px;
  border-radius: 9px 9px 9px 2px;
  background: var(--telegram);
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
}

.tg-count svg {
  width: 22px;
  fill: #ffffff;
}

.telegram-square {
  left: 75%;
  top: 222px;
  width: 78px;
  height: 78px;
  border-radius: 12px;
  background: var(--telegram);
}

.telegram-square svg {
  width: 48px;
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 1.5;
}

.telegram-page .ig-soft-blue::after,
.telegram-page .ig-blue-band,
.telegram-page .ig-pink-cta {
  background: var(--telegram);
}

.telegram-page .ig-pink-cta::before {
  background: #ffffff;
}

.telegram-page .ig-pink-cta::after {
  background: #ffffff;
}

.tg-prize-card {
  width: min(290px, 100%);
  margin: 72px auto 0;
  padding: 20px 20px 18px;
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
  box-shadow: 0 18px 34px rgba(35, 20, 45, 0.08);
}

.tg-prize-card b {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
}

.tg-prize-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 30px;
  margin-right: 6px;
  border-radius: 999px;
  background: #ffffff;
  color: #9b84ff;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(35, 20, 45, 0.08);
}

.telegram-score-icons {
  display: grid;
  place-items: center;
  gap: 28px;
  margin-top: 88px;
}

.telegram-score-icons span,
.telegram-score-icons b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--telegram);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.telegram-cases {
  padding-top: 120px;
}

.telegram-cases h2 {
  margin: 0 0 58px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 62px;
  line-height: 1;
  text-align: center;
}

.telegram-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.telegram-case-card {
  min-height: 392px;
  overflow: hidden;
  border-radius: 18px;
  background: #f3f2f6;
}

.telegram-case-card img {
  width: 100%;
  height: 100%;
  min-height: 392px;
  object-fit: cover;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.telegram-case-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.08);
}

.telegram-article-one,
.telegram-article-two,
.telegram-article-three {
  color: #ffffff;
}

.telegram-article-one {
  background:
    radial-gradient(circle at 50% 58%, #2fb4f0 0 28%, transparent 29%),
    linear-gradient(135deg, #f5f1ff, #ffffff);
  color: var(--purple);
}

.telegram-article-one svg {
  width: 110px;
  fill: #ffffff;
  stroke: #ffffff;
}

.telegram-article-one b {
  position: absolute;
  left: 78px;
  top: 50px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--purple);
  color: #ffffff;
  font-size: 32px;
}

.telegram-article-two {
  background:
    radial-gradient(circle at 46% 47%, #e75bd8 0 12%, transparent 13%),
    repeating-linear-gradient(115deg, var(--purple) 0 34px, var(--telegram) 35px 52px);
}

.telegram-article-two svg {
  width: 76px;
  padding: 18px;
  border-radius: 10px;
  background: #e75bd8;
  fill: #ffffff;
}

.telegram-article-three {
  align-items: end;
  justify-content: start;
  padding: 32px;
  background:
    linear-gradient(145deg, rgba(18, 151, 220, 0.82), rgba(18, 151, 220, 0.96)),
    radial-gradient(circle at 72% 22%, #74cdf5 0 24%, transparent 25%);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 54px;
  text-align: left;
}

.telegram-page .pay-logos span:first-child,
.telegram-page .bar-visual.small b,
.telegram-page .chat-icon {
  background: var(--telegram);
}

.telegram-page .article-card button:hover,
.telegram-page .result-card:hover .hover-more {
  background: var(--telegram);
}

@media (max-width: 1100px) {
  .telegram-hero-phone {
    right: 24px;
    width: 320px;
  }

  .telegram-case-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .telegram-page .hero-bolt {
    inset: auto -40px 0 12%;
    height: 300px;
  }

  .telegram-hero-phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: 260px;
    height: auto;
    margin: 0 auto;
  }

  .telegram-phone-shell {
    width: 250px;
    min-height: 420px;
    padding: 54px 18px 22px;
    border-radius: 34px;
  }

  .telegram-subscriber-visual {
    min-height: 330px;
  }

  .telegram-cases h2 {
    font-size: 40px;
  }

  .telegram-case-card,
  .telegram-case-card img {
    min-height: 320px;
  }
}

/* TikTok landing */
.tiktok-page {
  --tt-dark: #21142c;
  --tt-pink: #e94ecf;
  --tt-blue: #24e6e0;
  --tt-cyan: #24e6e0;
  --tt-soft: #f6f5f8;
  --tt-lime: #adff36;
}

.tiktok-page .site-header {
  background: var(--tt-dark);
  color: #ffffff;
}

.tiktok-page .brand,
.tiktok-page .nav-menu-button,
.tiktok-page .nav-page-button,
.tiktok-page .lang-trigger {
  color: #ffffff;
}

.tiktok-page .nav-menu-button.active,
.tiktok-page .nav-menu-button:hover,
.tiktok-page .nav-page-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tiktok-page .black-cta {
  background: #ffffff;
  color: #000000;
}

.tiktok-page .account-btn {
  background: #ffffff;
  color: #000000;
}

.tiktok-page .account-btn svg {
  fill: #000000;
  stroke: #000000;
}

.tiktok-page .mega-menu {
  color: #111111;
}

.tiktok-main {
  overflow: hidden;
  background: #ffffff;
}

.tt-hero {
  position: relative;
  overflow: hidden;
  background: var(--tt-dark);
  color: #ffffff;
}

.tt-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 570px;
  align-items: center;
  gap: 48px;
}

.tt-hero-copy {
  position: relative;
  z-index: 2;
  padding: 42px 0 34px;
}

.tt-hero-copy h1 {
  max-width: 600px;
  margin: 0 0 30px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(54px, 5vw, 78px);
  line-height: 0.98;
  letter-spacing: 0;
}

.tt-hero-copy p {
  max-width: 600px;
  margin: 0 0 42px;
  font-size: 24px;
  line-height: 1.32;
  font-weight: 400;
}

.tt-hero-actions,
.tt-hero-copy {
  min-width: 0;
}

.tiktok-page .tt-cta,
.tiktok-page .lime-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  background: var(--tt-blue);
  color: #ffffff;
  font: 900 18px/1 Arial, sans-serif;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.tiktok-page .tt-cta:hover,
.tiktok-page .lime-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.16);
}

.tt-approved {
  display: grid;
  grid-template-columns: 26px auto;
  align-items: center;
  gap: 10px;
  width: max-content;
  margin-top: 30px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  vertical-align: middle;
}

.tt-logo svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tt-approved-copy {
  min-width: 0;
}

.tt-hero-visual {
  position: relative;
  min-height: 570px;
}

.tt-bolt {
  position: absolute;
  inset: 0 -20% 0 -8%;
  background: var(--tt-blue);
  clip-path: polygon(22% 0, 94% 0, 70% 46%, 100% 46%, 54% 100%, 62% 54%, 0 54%);
}

.tt-hero-visual img {
  position: absolute;
  right: -36px;
  bottom: 0;
  z-index: 1;
  width: min(790px, 58vw);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.18));
}

.tt-action {
  position: relative;
}

.tt-action-white {
  padding: 92px 0 150px;
  background: #ffffff;
}

.tt-action-pink {
  padding: 138px 0 150px;
  background: var(--tt-pink);
  color: #ffffff;
}

.tt-action-dark {
  padding: 140px 0 165px;
  background: var(--tt-dark);
  color: #ffffff;
}

.tt-action-white::after,
.tt-action-pink::after,
.tt-action-dark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 118px;
  pointer-events: none;
}

.tt-action-white::after {
  background: var(--tt-pink);
  clip-path: polygon(0 42%, 28% 60%, 28% 0, 100% 100%, 0 100%);
}

.tt-action-pink::after {
  background: var(--tt-dark);
  clip-path: polygon(0 0, 74% 72%, 74% 0, 100% 34%, 100% 100%, 0 100%);
}

.tt-action-dark::after {
  background: #ffffff;
  clip-path: polygon(0 78%, 100% 28%, 100% 100%, 0 100%);
}

.tt-action-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(54px, 8vw, 132px);
}

.tt-action-grid.reverse {
  grid-template-columns: 0.92fr 1.08fr;
}

.tt-copy h2,
.tt-target h2,
.tt-difference h2,
.tt-how h2,
.tt-channel h2,
.tt-features h2 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(42px, 4.8vw, 70px);
  line-height: 0.98;
  letter-spacing: 0;
}

.tt-copy h2 {
  max-width: 590px;
  margin-bottom: 42px;
}

.tt-copy.white h2 {
  color: #ffffff;
}

.tt-check-list {
  display: grid;
  gap: 24px;
  max-width: 640px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 22px;
  line-height: 1.35;
}

.tt-check-list li {
  position: relative;
  padding-left: 38px;
}

.tt-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #000000;
}

.tt-check-list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

.tt-check-list.light li::before {
  background: #ffffff;
}

.tt-check-list.light li::after {
  border-color: var(--tt-dark);
}

.tt-action-img {
  display: block;
  width: min(450px, 100%);
  margin: 0 auto;
  object-fit: contain;
}

.tt-image-chat {
  position: relative;
  width: min(450px, 100%);
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.tt-image-chat .tt-action-img,
.tt-image-chat > img {
  width: 100%;
  max-width: 100%;
}

.tt-chat-bubble {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: clamp(13px, 2.9vw, 18px);
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.tt-chat-user,
.tt-chat-badge {
  justify-content: center;
  border-radius: 18px 18px 4px 18px;
  background: #16abd0;
  color: #ffffff;
}

.tt-chat-bot {
  justify-content: flex-start;
  border-radius: 18px;
  background: #ffffff;
  color: #111111;
}

.tt-chat-badge {
  font-size: clamp(14px, 3vw, 19px);
  font-weight: 600;
}

.tt-image-chat-discount .tt-chat-badge {
  left: 62%;
  top: 47.2%;
  width: 32%;
  height: 6.2%;
}

.tt-image-chat-discount .tt-chat-bot-one {
  left: 16%;
  top: 54.2%;
  width: 76%;
  min-height: 10.4%;
  padding: 3.6% 5%;
}

.tt-image-chat-discount .tt-chat-user-one {
  left: 56%;
  top: 64.8%;
  width: 37%;
  height: 7%;
}

.tt-image-chat-discount .tt-chat-bot-two {
  left: 16%;
  top: 72%;
  width: 76%;
  min-height: 14.4%;
  padding: 3.6% 5%;
}

.tt-image-chat-result .tt-chat-user-question {
  left: 23%;
  top: 61.8%;
  width: 72%;
  height: 7%;
}

.tt-image-chat-result .tt-chat-bot-answer {
  left: 16%;
  top: 68.8%;
  width: 75%;
  min-height: 23.2%;
  padding: 3.6% 5%;
}

.tt-image-chat-consult .tt-chat-user-question {
  left: 30%;
  top: 51.6%;
  width: 66%;
  height: 7.5%;
}

.tt-image-chat-consult .tt-chat-bot-answer {
  left: 16%;
  top: 59.8%;
  width: 76%;
  min-height: 23%;
  padding: 3.6% 5%;
}

.tt-image-chat-consult .tt-chat-user-short {
  left: 63%;
  top: 82.7%;
  width: 30%;
  height: 7%;
  z-index: 3;
}

.tt-image-chat-consult .tt-chat-bot-two {
  left: 16%;
  top: 88.6%;
  width: 76%;
  min-height: 12.8%;
  align-items: flex-start;
  padding: 3% 5%;
}

.tiktok-page .lime-cta {
  background: var(--tt-lime);
  color: #000000;
}

.tiktok-page .lime-cta.wide {
  min-width: 280px;
  margin-top: 42px;
}

.tt-phone-form {
  width: min(430px, 100%);
  margin: 0 auto;
  padding: 48px 34px 36px;
  border-radius: 42px;
  background: #ffffff;
  color: #21142c;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.tt-phone-form > span {
  display: block;
  width: 88px;
  height: 22px;
  margin: 0 auto 34px;
  border-radius: 999px;
  background: #000000;
}

.tt-phone-form label {
  display: block;
  margin: 18px 0 8px;
  color: #736b80;
  font-weight: 800;
}

.fake-select,
.fake-input,
.fake-toggle {
  padding: 16px 18px;
  border-radius: 14px;
  background: #f2f0f5;
  font-weight: 800;
}

.fake-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.fake-toggle b {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--tt-lime);
}

.fake-check {
  width: 88px;
  height: 88px;
  margin: 30px auto 0;
  border-radius: 26px;
  background: var(--tt-lime);
}

.tt-target,
.tt-difference,
.tt-how,
.tt-features {
  padding-top: 140px;
  padding-bottom: 20px;
}

.tt-target h2,
.tt-difference h2,
.tt-how h2,
.tt-features h2 {
  max-width: 1000px;
  margin: 0 auto 70px;
  text-align: center;
}

.tt-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.tt-target-grid article,
.tt-feature-grid article,
.tt-without,
.tt-with,
.tt-how-box {
  border-radius: 24px;
  background: var(--tt-soft);
}

.tt-target-grid article {
  display: flex;
  min-height: 380px;
  padding: 38px 42px 0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tt-target-grid article:hover,
.tt-feature-grid article:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 45px rgba(33, 20, 44, 0.1);
}

.tt-target-grid h3 {
  margin: 0 0 18px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 34px;
  line-height: 1.06;
}

.tt-target-grid p {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.tt-target-grid img {
  align-self: flex-end;
  width: 46%;
  min-width: 190px;
  object-fit: contain;
}

.lime-cta.centered {
  display: flex;
  width: max-content;
  margin: 58px auto 0;
}

.arrow-dot {
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin-left: 12px;
  border-radius: 50%;
  background: #000000;
}

.arrow-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  margin: auto;
  border-right: 3px solid var(--tt-lime);
  border-top: 3px solid var(--tt-lime);
  transform: rotate(45deg);
}

.tt-difference-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  gap: 24px;
}

.tt-without,
.tt-with {
  min-height: 500px;
  padding: 56px;
  overflow: hidden;
}

.tt-with {
  position: relative;
  background: var(--tt-cyan);
}

.tt-with h3,
.tt-without h3 {
  margin: 0 0 28px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 48px;
  line-height: 1.04;
}

.tt-with ul,
.tt-without ul {
  display: grid;
  gap: 22px;
  width: 48%;
  min-width: 320px;
  margin: 0;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
}

.tt-without ul {
  width: auto;
  min-width: 0;
  font-weight: 600;
}

.tt-with img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  max-width: 700px;
}

.tt-how-box {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 38px;
  align-items: center;
  padding: 54px;
}

.tt-how-box > img,
.tt-how-box > .tt-image-chat {
  width: 100%;
  max-width: 430px;
  max-height: 620px;
  margin: 0 auto;
  object-fit: contain;
}

.tt-how-list {
  display: grid;
  gap: 14px;
}

.tt-how-list article {
  padding: 24px 28px;
  border-radius: 18px;
  background: #edebf2;
  transition: background 0.2s ease, transform 0.2s ease;
}

.tt-how-list article.open,
.tt-how-list article:hover {
  background: #ffffff;
  transform: translateX(4px);
}

.tt-how-list h3 {
  margin: 0 0 8px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 26px;
  line-height: 1.1;
}

.tt-how-list p {
  margin: 0;
  color: #5e5568;
  font-size: 16px;
  line-height: 1.35;
}

.tt-channel {
  display: flex;
  align-items: center;
  min-height: min(720px, 52vw);
  margin-top: 140px;
  background-image: url("./assets/tiktok-channel-desktop.webp");
  background-position: center;
  background-size: cover;
  color: #ffffff;
}

.tt-channel .page-container {
  width: 100%;
}

.tt-channel h2 {
  max-width: 690px;
  margin-bottom: 24px;
}

.tt-channel p {
  max-width: 560px;
  margin: 0 0 34px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
}

.tt-features > p {
  max-width: 730px;
  margin: -42px auto 56px;
  text-align: center;
  font-size: 22px;
  line-height: 1.35;
}

.tt-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tt-feature-grid article {
  min-height: 310px;
  padding: 42px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tt-feature-grid h3 {
  margin: 0 0 24px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 32px;
  line-height: 1.05;
}

.tt-feature-grid p {
  margin: 0;
  font-size: 17px;
  line-height: 1.42;
}

.tiktok-page .faq-section {
  padding-top: 115px;
}

@media (max-width: 1180px) {
  .tt-hero-grid,
  .tt-action-grid,
  .tt-action-grid.reverse,
  .tt-difference-grid,
  .tt-how-box {
    grid-template-columns: 1fr;
  }

  .tt-hero-visual {
    min-height: 480px;
  }

  .tt-hero-visual img {
    right: 50%;
    width: min(760px, 92vw);
    transform: translateX(50%);
  }

  .tt-action-grid.reverse img,
  .tt-action-grid.reverse .tt-image-chat {
    order: 2;
  }

  .tt-action-grid.reverse .tt-copy {
    order: 1;
  }

  .tt-with ul {
    width: 100%;
  }

  .tt-with img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 620px;
    margin: 30px auto -56px;
  }

  .tt-channel {
    min-height: 620px;
    background-image: url("./assets/tiktok-channel-tablet.webp");
  }
}

@media (max-width: 820px) {
  .tiktok-page {
    overflow-x: hidden;
  }

  .tiktok-page .page-container,
  .tiktok-page .nav-wrap {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }

  .tiktok-page .nav-wrap {
    grid-template-columns: 1fr auto;
    min-height: 70px;
  }

  .tiktok-page .lang-select {
    grid-column: auto;
    grid-row: auto;
  }

  .tiktok-page .nav-actions {
    display: none;
  }

  .tt-hero-grid {
    min-height: auto;
    gap: 0;
  }

  .tt-hero-copy {
    padding: 46px 0 24px;
  }

  .tt-hero-copy h1 {
    max-width: 340px;
    font-size: 40px;
    overflow-wrap: normal;
  }

  .tt-hero-copy p,
  .tt-check-list,
  .tt-channel p,
  .tt-features > p {
    font-size: 18px;
  }

  .tt-copy,
  .tt-action-grid,
  .tt-check-list,
  .tt-check-list li {
    min-width: 0;
    max-width: 100%;
  }

  .tt-check-list li span {
    display: block;
    overflow-wrap: break-word;
    width: min(calc(100vw - 112px), 278px) !important;
    max-width: min(calc(100vw - 112px), 278px) !important;
    white-space: normal !important;
  }

  .tiktok-page .tt-cta {
    width: min(100%, 340px);
  }

  .tt-image-chat {
    width: min(calc(100vw - 32px), 360px) !important;
    max-width: min(calc(100vw - 32px), 360px) !important;
  }

  .tt-approved {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    width: min(100%, 340px);
    margin: 20px 0 0;
    font-size: 15px;
    line-height: 1.2;
    white-space: normal;
  }

  .tt-hero-visual {
    min-height: 360px;
  }

  .tt-bolt {
    inset: 10px -30% 0 0;
  }

  .tt-hero-visual img {
    width: min(610px, 118vw);
  }

  .tt-action-white,
  .tt-action-pink,
  .tt-action-dark,
  .tt-target,
  .tt-difference,
  .tt-how,
  .tt-features,
  .tiktok-page .faq-section {
    padding-top: 82px;
  }

  .tt-action-white,
  .tt-action-pink,
  .tt-action-dark {
    padding-bottom: 112px;
  }

  .tt-target-grid,
  .tt-feature-grid {
    grid-template-columns: 1fr;
  }

  .tt-target-grid article {
    display: block;
    min-height: 0;
    padding: 32px;
  }

  .tt-target-grid img {
    display: block;
    width: min(260px, 100%);
    margin: 24px auto 0;
  }

  .tt-without,
  .tt-with,
  .tt-how-box {
    padding: 28px;
  }

  .tt-with h3,
  .tt-without h3 {
    font-size: 36px;
  }

  .tt-with ul,
  .tt-without ul {
    min-width: 0;
    width: auto;
  }

  .tt-channel {
    min-height: 640px;
    margin-top: 82px;
    background-image: url("./assets/tiktok-channel-mobile.webp");
    background-position: center top;
  }
}

@media (max-width: 520px) {
  .tiktok-page .page-container,
  .tiktok-page .nav-wrap,
  .tt-copy,
  .tt-action-grid,
  .tt-action-grid.reverse,
  .tt-check-list,
  .tt-image-chat {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .tt-check-list li span {
    width: calc(100vw - 112px) !important;
    max-width: calc(100vw - 112px) !important;
    white-space: normal !important;
  }

  .tt-image-chat > img,
  .tt-image-chat .tt-action-img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .tt-hero-copy h1,
  .tt-copy h2,
  .tt-target h2,
  .tt-difference h2,
  .tt-how h2,
  .tt-channel h2,
  .tt-features h2 {
    font-size: 38px;
  }

  .tt-hero-copy p {
    font-weight: 600;
  }

  .tiktok-page .tt-cta,
  .tiktok-page .lime-cta {
    width: 100%;
  }

  .tt-hero-visual {
    min-height: 300px;
  }

  .tt-phone-form {
    padding: 36px 22px 26px;
    border-radius: 28px;
  }
}

/* Virale landing */
.virale-page {
  --vr-bg: #070707;
  --vr-card: #3e3e3e;
  --vr-card-soft: #474747;
  --vr-yellow: #f8ff3f;
  --vr-purple: #26132e;
  --vr-pink: #ef58dd;
  background: var(--vr-bg);
  color: #ffffff;
  overflow-x: hidden;
}

.virale-page .site-header,
.virale-page .vr-header {
  background: rgba(7, 7, 7, 0.98);
  color: #ffffff;
  box-shadow: none;
}

.virale-page .brand,
.virale-page .footer-logo {
  color: #ffffff;
}

.virale-page .lang-trigger,
.virale-page .main-nav button {
  color: #ffffff;
}

.virale-page .black-cta,
.virale-page .account-btn {
  background: #ffffff;
  color: #050505;
}

.virale-page .account-btn svg {
  stroke: #050505;
}

.virale-page .nav-menu-button.active {
  background: transparent;
}

.vr-menu-toggle {
  display: none;
}

.vr-main {
  background: var(--vr-bg);
}

.vr-hero {
  padding: 34px 0 86px;
  background: var(--vr-bg);
}

.vr-hero-card {
  position: relative;
  width: min(100% - 80px, 1360px);
  min-height: 570px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 56px;
  background: var(--vr-yellow);
  color: #050505;
}

.vr-hero-copy {
  position: relative;
  z-index: 3;
  width: min(100% - 40px, 1100px);
  margin: 0 auto;
  padding: 62px 0 250px;
  text-align: center;
}

.vr-hero-copy h1,
.vr-section h2,
.vr-difference h2,
.vr-target h2,
.vr-steps h2 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: 0;
}

.vr-hero-copy h1 {
  max-width: 1040px;
  margin-inline: auto;
  font-size: clamp(56px, 6vw, 88px);
}

.vr-hero-copy p {
  width: min(100%, 840px);
  margin: 34px auto 28px;
  color: #050505;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.16;
  font-weight: 500;
}

.vr-dark-cta,
.vr-lime-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 62px;
  padding: 0 16px 0 28px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.vr-dark-cta {
  background: #050505;
  color: #ffffff;
}

.vr-lime-cta {
  margin: 34px auto 0;
  background: var(--vr-yellow);
  color: #050505;
}

.vr-dark-cta:hover,
.vr-lime-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(248, 255, 63, 0.18);
}

.vr-dark-cta > span:last-child,
.vr-lime-cta > span:last-child {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #050505;
}

.vr-lime-cta > span:last-child {
  background: #050505;
  color: #ffffff;
}

.vr-dark-cta > span:last-child::before,
.vr-lime-cta > span:last-child::before {
  content: "\2192";
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 30px;
  line-height: 1;
}

.vr-star {
  position: absolute;
  z-index: 1;
  width: 260px;
  aspect-ratio: 1;
  background: #ffffff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.vr-star-left {
  left: 74px;
  top: 280px;
}

.vr-star-right {
  right: -45px;
  top: 252px;
  width: 430px;
}

.vr-star-small {
  left: 180px;
  bottom: 70px;
  width: 82px;
  background: var(--vr-pink);
}

.vr-hero-phone {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -112px;
  width: min(460px, 42vw);
  transform: translateX(-50%);
}

.vr-hero-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.vr-section {
  padding-top: 96px;
  color: #ffffff;
  text-align: center;
}

.vr-section h2 {
  font-size: clamp(48px, 6.2vw, 80px);
}

.vr-section-lead {
  width: min(100%, 720px);
  margin: 28px auto 56px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.35;
}

.vr-feature-grid,
.vr-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.vr-card {
  min-height: 360px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--vr-card);
  color: #ffffff;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.vr-card:hover {
  transform: translateY(-4px);
  background: var(--vr-card-soft);
}

.vr-feature-card {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  min-height: 420px;
  padding: 48px 36px 0;
}

.vr-feature-card h3,
.vr-target-grid h3,
.vr-before h3,
.vr-after h3,
.vr-idea h2,
.vr-step-card h3 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-weight: 900;
  line-height: 1;
}

.vr-feature-card h3 {
  max-width: min(100%, 340px);
  overflow-wrap: anywhere;
  font-size: 34px;
  text-align: center;
}

.vr-feature-card p {
  max-width: 380px;
  margin: 18px auto 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.32;
}

.vr-feature-card img {
  width: min(92%, 520px);
  margin-top: 34px;
}

.vr-ai-card::after {
  content: "";
  position: absolute;
  inset: auto 70px 0;
  height: 190px;
  border: 12px solid rgba(255, 255, 255, 0.24);
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
}

.vr-phone-mock {
  position: relative;
  z-index: 1;
  width: min(310px, 88%);
  min-height: 210px;
  margin-top: 70px;
  padding: 36px 22px;
  text-align: left;
}

.vr-phone-mock span,
.vr-phone-mock b {
  display: block;
  border-radius: 12px;
  background: #2b2b2b;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.25;
}

.vr-phone-mock span {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  padding: 12px 16px;
}

.vr-phone-mock b {
  margin-top: 14px;
  padding: 14px 16px;
  font-weight: 600;
}

.vr-difference {
  padding-top: 134px;
}

.vr-diff-grid {
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: 4px;
  margin-top: 54px;
}

.vr-before {
  min-height: 310px;
  padding: 44px 38px;
  text-align: left;
}

.vr-before h3 {
  max-width: 250px;
  font-size: 42px;
}

.vr-before ul,
.vr-after ul {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.22;
}

.vr-after {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--vr-yellow);
  color: #050505;
  text-align: left;
}

.vr-after > div {
  position: relative;
  z-index: 2;
  max-width: 430px;
  padding: 42px 36px;
}

.vr-after h3 {
  font-size: 58px;
}

.vr-after img {
  position: absolute;
  right: -8px;
  bottom: 0;
  width: min(48%, 430px);
}

.vr-target h2 {
  margin-bottom: 58px;
}

.vr-target-grid .vr-card {
  position: relative;
  min-height: 250px;
  padding: 34px 32px;
  text-align: left;
}

.vr-target-grid h3 {
  font-size: 28px;
}

.vr-target-grid p {
  max-width: 270px;
  margin: 8px 0 38px;
  color: #dedede;
  font-size: 14px;
  line-height: 1.25;
}

.vr-target-grid span {
  display: inline-flex;
  max-width: 240px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #2b2b2b;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.25;
}

.vr-target-grid img {
  position: absolute;
  right: 26px;
  bottom: 18px;
  width: 150px;
}

.vr-idea {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-items: stretch;
  padding-top: 124px;
}

.vr-idea-copy,
.vr-idea > img {
  min-height: 520px;
  border-radius: 22px;
}

.vr-idea-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 70px 46px;
  background: var(--vr-yellow);
  color: #050505;
  text-align: left;
}

.vr-idea-copy h2 {
  max-width: 520px;
  font-size: clamp(42px, 4vw, 58px);
}

.vr-idea-copy p {
  max-width: 520px;
  margin: 26px 0 34px;
  color: #050505;
  font-size: 18px;
  line-height: 1.28;
  font-weight: 700;
}

.vr-idea > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vr-steps {
  padding-top: 80px;
  padding-bottom: 80px;
}

.vr-step-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 58px;
  overflow: visible;
  padding-bottom: 8px;
}

.vr-step-card {
  min-height: 520px;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 22px;
  background: #1e1e1e;
  text-align: left;
}

.vr-step-card > div {
  min-width: 0;
  padding: 34px 22px 18px;
}

.vr-step-card > div > span {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--vr-yellow);
  color: #050505;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 23px;
}

.vr-step-card h3 span,
.vr-step-card p span {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.vr-step-card h3 {
  margin-top: 22px;
  font-size: clamp(20px, 1.7vw, 24px);
  overflow-wrap: break-word;
  word-break: normal;
}

.vr-step-card p {
  margin: 14px 0 0;
  color: #d8d8d8;
  font-size: 14px;
  line-height: 1.32;
  overflow-wrap: break-word;
}

.vr-step-card img {
  align-self: end;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.virale-page .faq-section {
  padding-top: 90px;
  padding-bottom: 100px;
  color: #ffffff;
}

.virale-page .faq-section h2 {
  color: #ffffff;
}

.virale-page .faq-item button {
  background: #3d3d3d;
  color: #ffffff;
}

.virale-page .faq-item p {
  background: #3d3d3d;
  color: #ffffff;
}

.virale-page .site-footer {
  margin-top: 0;
}

@media (max-width: 1180px) {
  .vr-hero-card {
    min-height: 560px;
  }

  .vr-diff-grid,
  .vr-idea {
    grid-template-columns: 1fr;
  }

  .vr-after img {
    width: min(46%, 360px);
  }

  .vr-target-grid img {
    width: 120px;
  }
}

@media (max-width: 820px) {
  .virale-page .nav-wrap {
    width: min(100% - 32px, var(--container));
    min-height: 70px;
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }

  .virale-page .brand {
    justify-self: center;
    font-size: 23px;
  }

  .virale-page .lang-select,
  .virale-page .main-nav,
  .virale-page .nav-actions {
    display: none;
  }

  .vr-menu-toggle {
    display: inline-grid;
    width: 48px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: #ffffff;
  }

  .vr-menu-toggle span,
  .vr-menu-toggle::before,
  .vr-menu-toggle::after {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #050505;
  }

  .vr-menu-toggle {
    gap: 4px;
  }

  .vr-hero {
    padding-top: 0;
    padding-bottom: 0;
  }

  .vr-hero-card {
    width: min(100% - 20px, 560px);
    min-height: 640px;
    border-radius: 28px;
  }

  .vr-hero-copy {
    width: min(100% - 34px, 420px);
    padding: 45px 0 245px;
  }

  .vr-hero-copy h1 {
    font-size: clamp(38px, 11vw, 44px);
  }

  .vr-hero-copy p {
    margin: 28px auto 28px;
    font-size: 20px;
    line-height: 1.18;
  }

  .vr-hero-phone {
    width: min(390px, 100vw);
    bottom: -12px;
  }

  .vr-star-left {
    left: -54px;
    top: 330px;
    width: 150px;
  }

  .vr-star-right {
    right: -180px;
    top: 300px;
    width: 320px;
  }

  .vr-star-small {
    left: 42px;
    bottom: 90px;
  }

  .vr-section {
    padding-top: 80px;
  }

  .vr-section h2 {
    font-size: clamp(38px, 12vw, 48px);
  }

  .vr-section-lead {
    margin-bottom: 38px;
    font-size: 18px;
  }

  .vr-feature-grid,
  .vr-target-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vr-feature-card {
    min-height: 390px;
    padding: 36px 24px 0;
  }

  .vr-feature-card h3 {
    font-size: 34px;
  }

  .vr-difference {
    padding-top: 82px;
  }

  .vr-diff-grid {
    margin-top: 34px;
  }

  .vr-after {
    min-height: 520px;
  }

  .vr-after > div {
    max-width: none;
    padding: 34px 28px;
  }

  .vr-after h3 {
    font-size: 48px;
  }

  .vr-after img {
    right: -54px;
    width: 330px;
  }

  .vr-target-grid .vr-card {
    min-height: 280px;
  }

  .vr-idea-copy,
  .vr-idea > img {
    min-height: 390px;
  }

  .vr-steps {
    padding-top: 80px;
  }

  .vr-step-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .virale-page .faq-section {
    padding-top: 80px;
  }
}

@media (max-width: 520px) {
  .vr-dark-cta,
  .vr-lime-cta {
    min-height: 56px;
    font-size: 16px;
  }

.vr-dark-cta > span:last-child,
.vr-lime-cta > span:last-child {
    width: 42px;
    height: 42px;
  }

  .vr-feature-card img {
    width: 116%;
  }

  .vr-before {
    padding: 32px 26px;
  }

  .vr-before h3,
  .vr-idea-copy h2 {
    font-size: 40px;
  }

  .vr-target-grid img {
    right: 12px;
    width: 108px;
  }

  .vr-idea-copy {
    padding: 42px 28px;
  }
}

/* AI Agent landing */
.ai-agent-page {
  --ai-green: #beff53;
  --ai-purple: #261930;
  --ai-soft: #f6f5f8;
  background: #ffffff;
  color: #0c0c0c;
  overflow-x: hidden;
}

.ai-agent-page .site-header {
  background: #ffffff;
}

.ai-agent-page .black-cta {
  background: #0c0c0c;
}

.ai-agent-page .lime-cta {
  background: var(--ai-green);
  color: #080808;
}

.ai-main h1,
.ai-main h2,
.ai-main h3 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  letter-spacing: 0;
}

.ai-main p {
  margin: 0;
}

.ai-hero {
  min-height: 564px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.08)),
    url("./assets/ai-agent-hero-desktop.webp") center / cover no-repeat;
}

.ai-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(320px, 430px);
  align-items: end;
  justify-content: space-between;
  gap: 64px;
}

.ai-hero-copy {
  display: grid;
  gap: 36px;
  color: #ffffff;
}

.ai-hero-copy h1 {
  max-width: 680px;
  font-size: clamp(52px, 6vw, 82px);
  line-height: 0.95;
}

.ai-hero-copy p {
  max-width: 590px;
  font-size: 24px;
  line-height: 1.22;
  font-weight: 500;
}

.ai-hero-btn {
  width: max-content;
  background: var(--ai-green);
  color: #0c0c0c;
}

.ai-hero-chat {
  display: grid;
  gap: 16px;
  margin-bottom: -10px;
}

.ai-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.ai-chat-bubble {
  max-width: 330px;
  padding: 18px;
  border-radius: 14px 14px 0 14px;
  background: #8600f0;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.18;
}

.ai-chat-bubble.bot {
  border-radius: 14px 14px 14px 0;
  background: #ffffff;
  color: var(--ai-purple);
}

.ai-assistant-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ai-green);
  position: relative;
}

.ai-assistant-mark::before {
  content: "";
  position: absolute;
  inset: 10px 8px;
  background: var(--ai-purple);
  clip-path: polygon(0 45%, 46% 0, 46% 34%, 100% 34%, 53% 100%, 53% 62%, 0 62%);
}

.ai-slider {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(280px, 430px);
  align-items: center;
  gap: 88px;
  padding: 118px 0 150px;
}

.ai-slider-copy h2,
.ai-action-copy h2,
.ai-features h2,
.ai-setting h2,
.ai-target h2,
.ai-cases h2,
.ai-test h2,
.ai-final h2 {
  font-size: clamp(46px, 5.2vw, 72px);
  line-height: 0.98;
}

.ai-step-list {
  position: relative;
  display: grid;
  gap: 28px;
  margin-top: 56px;
  padding-left: 28px;
}

.ai-step-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: #e1dee8;
}

.ai-step-list article {
  position: relative;
  color: rgba(13, 13, 13, 0.45);
  cursor: pointer;
  transition: color 0.18s ease;
}

.ai-step-list article::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 999px;
  background: transparent;
}

.ai-step-list article.active,
.ai-step-list article:hover {
  color: #0c0c0c;
}

.ai-step-list article.active::before,
.ai-step-list article:hover::before {
  background: #0c0c0c;
}

.ai-step-list h3 {
  margin-bottom: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 900;
}

.ai-step-list p {
  font-size: 22px;
  line-height: 1.26;
}

.ai-phone {
  width: min(100%, 390px);
  min-height: 520px;
  margin: 0 auto;
  padding: 28px 18px;
  border: 7px solid #edebf2;
  border-radius: 54px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(38, 25, 48, 0.1);
  overflow: hidden;
}

.ai-phone.small {
  min-height: 470px;
}

.ai-phone-head {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e7e3eb;
  font-size: 15px;
  text-align: center;
}

.ai-phone-head span,
.ai-phone-head i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ebe8f1;
}

.ai-phone-body {
  display: grid;
  gap: 16px;
  padding-top: 34px;
}

.ai-phone-body.clean {
  padding-top: 86px;
}

.ai-phone .msg {
  width: fit-content;
  max-width: 255px;
  padding: 14px;
  border-radius: 14px;
  background: #f1eff5;
  font-size: 15px;
  line-height: 1.2;
}

.ai-phone .msg.right {
  justify-self: end;
  border-bottom-right-radius: 4px;
  background: #8600f0;
  color: #ffffff;
}

.ai-phone .msg.left {
  border-bottom-left-radius: 4px;
}

.ai-phone button {
  min-height: 44px;
  border-radius: 12px;
  background: #d9d5e2;
  font-weight: 800;
}

.ai-polymorph {
  position: relative;
  padding: 130px 0;
  overflow: hidden;
}

.ai-polymorph::before,
.ai-polymorph::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  background: #ffffff;
  z-index: 0;
}

.ai-polymorph::before {
  top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 30% 100%, 30% 60%, 0 92%);
}

.ai-polymorph::after {
  bottom: 0;
  clip-path: polygon(0 65%, 72% 0, 72% 40%, 100% 10%, 100% 100%, 0 100%);
}

.ai-polymorph.light {
  background: var(--ai-soft);
}

.ai-polymorph.dark {
  background: var(--ai-purple);
  color: #ffffff;
}

.ai-action {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 430px minmax(0, 620px);
  align-items: center;
  gap: 100px;
}

.ai-action.reverse {
  grid-template-columns: minmax(0, 620px) 440px;
}

.ai-action-copy {
  display: grid;
  gap: 42px;
}

.ai-check-list {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-check-list li {
  position: relative;
  display: grid;
  gap: 4px;
  padding-left: 36px;
  font-size: 21px;
  line-height: 1.24;
}

.ai-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0c0c0c;
}

.ai-check-list.light li::before {
  background: #ffffff;
}

.ai-check-list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

.ai-check-list.light li::after {
  border-color: var(--ai-purple);
}

.ai-check-list b {
  font-weight: 900;
}

.ai-check-list span {
  opacity: 0.9;
}

.ai-crm-card {
  display: grid;
  gap: 18px;
  padding: 34px;
  border-radius: 24px;
  background: #ffffff;
  color: var(--ai-purple);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.16);
}

.ai-crm-card p {
  justify-self: end;
  max-width: 260px;
  padding: 14px 18px;
  border-radius: 18px 18px 4px;
  background: #f6f5f8;
}

.ai-crm-card div {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: 18px;
  background: #f6f5f8;
}

.ai-crm-card span {
  color: #6b6473;
}

.ai-features,
.ai-setting,
.ai-target,
.ai-cases,
.ai-test,
.ai-faq {
  padding: 140px 0 0;
}

.ai-features h2,
.ai-setting h2,
.ai-target h2,
.ai-cases h2,
.ai-test h2,
.ai-faq h2 {
  text-align: center;
}

.ai-lead {
  width: min(100%, 540px);
  max-width: 540px;
  color: rgba(13, 13, 13, 0.78);
  font-size: 24px;
  line-height: 1.22;
  text-align: center;
}

.ai-main .ai-lead {
  margin: 28px auto 72px;
}

.ai-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.ai-feature-grid article,
.ai-setting-steps article,
.ai-case-row article {
  min-height: 260px;
  padding: 44px;
  border-radius: 24px;
  background: var(--ai-soft);
}

.ai-feature-grid article.tall {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ai-feature-grid h3,
.ai-setting-steps h3 {
  margin-bottom: 18px;
  font-size: 34px;
  line-height: 1.06;
}

.ai-feature-grid p,
.ai-setting-steps p {
  font-size: 19px;
  line-height: 1.3;
}

.ai-counter {
  width: max-content;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ai-green);
  font-weight: 900;
}

.ai-setting-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ai-setting-steps article > span {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 32px;
  border-radius: 50%;
  background: var(--ai-green);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 22px;
}

.ai-setting-steps h3 span,
.ai-setting-steps p span {
  display: inline;
  width: auto;
  height: auto;
  margin-bottom: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
}

.ai-target {
  text-align: center;
}

.ai-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: rgba(13, 13, 13, 0.72);
  font-size: 22px;
}

.ai-target-list {
  display: grid;
  gap: 24px;
  margin-top: 72px;
}

.ai-target-list article {
  min-height: 520px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 56px;
  border-radius: 16px;
  background-color: var(--ai-purple);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  text-align: left;
  overflow: hidden;
}

.ai-target-list .shop {
  background-image: url("./assets/ai-agent-1-desktop.webp");
}

.ai-target-list .expert {
  background-image: url("./assets/ai-agent-2-desktop.webp");
}

.ai-target-list .school {
  background-image: url("./assets/ai-agent-3-desktop.webp");
}

.ai-target-list .blogger {
  background-image: url("./assets/ai-agent-4-desktop.webp");
}

.ai-target-list h3 {
  max-width: 720px;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1;
}

.ai-target-chat {
  width: 390px;
  display: grid;
  gap: 14px;
  align-self: flex-end;
}

.ai-target-chat > span,
.ai-target-chat > b {
  padding: 18px;
  border-radius: 16px;
  background: #ffffff;
  color: #0c0c0c;
  font-size: 18px;
  line-height: 1.2;
}

.ai-target-chat > b {
  font-weight: 700;
}

.ai-target-chat > span > span,
.ai-target-chat > b > span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.ai-case-row {
  display: flex;
  gap: 24px;
  margin-top: 72px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ai-case-row::-webkit-scrollbar {
  display: none;
}

.ai-case-row article {
  min-width: 390px;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(38, 25, 48, 0.04), rgba(38, 25, 48, 0.78)),
    var(--ai-soft);
}

.ai-case-row p {
  margin-bottom: auto;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 800;
}

.ai-case-row h3 {
  margin: 34px 0 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 900;
}

.ai-case-row span {
  color: rgba(13, 13, 13, 0.7);
  font-weight: 700;
}

.ai-test article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 45%;
  align-items: center;
  gap: 24px;
  margin-top: 56px;
  padding: 64px;
  border-radius: 24px;
  background: var(--ai-soft);
}

.ai-test h3 {
  max-width: 560px;
  margin-bottom: 44px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  line-height: 1.16;
  font-weight: 700;
}

.ai-test img {
  width: 100%;
  max-width: 520px;
  justify-self: center;
}

.ai-final {
  margin-top: 140px;
  padding: 150px 0;
  background-image: url("./assets/ai-agent-background-desktop.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  text-align: center;
}

.ai-final p {
  margin: 28px 0 42px;
  font-size: 24px;
  line-height: 1.25;
}

.ai-final .lime-cta {
  background: var(--ai-green);
  color: #0c0c0c;
}

@media (max-width: 1024px) {
  .ai-hero {
    min-height: 980px;
    align-items: flex-start;
    padding-top: 90px;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)),
      url("./assets/ai-agent-hero-tablet.webp");
  }

  .ai-hero-inner,
  .ai-slider,
  .ai-action,
  .ai-action.reverse,
  .ai-test article {
    grid-template-columns: 1fr;
  }

  .ai-hero-copy {
    text-align: center;
    place-items: center;
  }

  .ai-hero-chat {
    justify-self: center;
    margin-top: 180px;
  }

  .ai-action {
    gap: 48px;
  }

  .ai-action.reverse .ai-action-copy {
    order: 2;
  }

  .ai-action.reverse .ai-crm-card {
    order: 1;
  }

  .ai-feature-grid,
  .ai-setting-steps {
    grid-template-columns: 1fr;
  }

  .ai-feature-grid article.tall {
    grid-row: auto;
  }

  .ai-target-list article {
    min-height: 720px;
    flex-direction: column;
    padding: 48px;
  }

  .ai-target-chat {
    width: min(100%, 470px);
  }
}

@media (max-width: 720px) {
  .ai-agent-page .nav-wrap {
    width: min(100% - 32px, var(--container));
  }

  .ai-agent-page .main-nav,
  .ai-agent-page .black-cta {
    display: none;
  }

  .ai-agent-page .mega-menu:not(.open) {
    display: none;
  }

  .ai-hero {
    min-height: 690px;
    padding-top: 46px;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.1)),
      url("./assets/ai-agent-hero-mobile.webp");
  }

  .ai-hero-copy {
    width: 100%;
  }

  .ai-hero-copy h1 {
    width: 100%;
    max-width: 340px;
    font-size: 38px;
    line-height: 1;
  }

  .ai-hero-copy p,
  .ai-lead,
  .ai-step-list p {
    font-size: 18px;
  }

  .ai-hero-copy p {
    width: 100%;
    max-width: 340px;
    line-height: 1.25;
  }

  .ai-hero-chat {
    margin-top: 60px;
    width: 100%;
    max-width: 330px;
  }

  .ai-chat-bubble {
    max-width: 235px;
    padding: 12px;
    font-size: 14px;
  }

  .ai-chat-row:nth-child(even) {
    margin-left: 34px;
  }

  .ai-slider,
  .ai-features,
  .ai-setting,
  .ai-target,
  .ai-cases,
  .ai-test,
  .ai-faq {
    padding-top: 80px;
  }

  .ai-slider-copy h2,
  .ai-action-copy h2,
  .ai-features h2,
  .ai-setting h2,
  .ai-target h2,
  .ai-cases h2,
  .ai-test h2,
  .ai-final h2 {
    font-size: 38px;
  }

  .ai-polymorph {
    padding: 90px 0;
  }

  .ai-check-list li {
    font-size: 17px;
  }

  .ai-phone {
    min-height: 450px;
    border-radius: 42px;
  }

  .ai-feature-grid article,
  .ai-setting-steps article,
  .ai-case-row article,
  .ai-test article {
    padding: 28px;
    border-radius: 18px;
  }

  .ai-feature-grid h3,
  .ai-setting-steps h3 {
    font-size: 28px;
  }

  .ai-target-list article {
    min-height: 520px;
    padding: 32px 24px;
  }

  .ai-target-list .shop {
    background-image: url("./assets/ai-agent-1-mobile.webp");
  }

  .ai-target-list .expert {
    background-image: url("./assets/ai-agent-2-mobile.webp");
  }

  .ai-target-list .school {
    background-image: url("./assets/ai-agent-3-mobile.webp");
  }

  .ai-target-list .blogger {
    background-image: url("./assets/ai-agent-4-mobile.webp");
  }

  .ai-target-list h3 {
    font-size: 30px;
  }

  .ai-target-chat > span,
  .ai-target-chat > b {
    padding: 13px;
    font-size: 14px;
  }

  .ai-case-row {
    margin-inline: -24px;
    padding-left: 24px;
  }

  .ai-case-row article {
    min-width: 82vw;
  }

  .ai-test h3 {
    font-size: 22px;
    text-align: center;
  }

  .ai-test .lime-cta {
    margin: 0 auto;
  }

  .ai-final {
    margin-top: 80px;
    padding: 110px 0;
    background-image: url("./assets/ai-agent-background-mobile.webp");
  }
}

/* Instagram gamification landing */
.gamification-page {
  --gami-pink: #e61f91;
  --gami-blue: #1198dc;
  --gami-lime: #b8ff3d;
  --gami-dark: #24152e;
  --gami-soft: #f4f3f7;
  background: #fff;
  color: #070707;
  overflow-x: hidden;
}

.gami-telegram-page {
  --gami-pink: #1198dc;
  --gami-blue: #1198dc;
}

.gamification-page .site-header {
  background: #fff;
}

.gamification-page .brand,
.gamification-page .nav-link,
.gamification-page .lang-trigger {
  color: #070707;
}

.gamification-page .lang-trigger > svg {
  display: none;
}

.gamification-page .lang-trigger::after {
  transform: rotate(225deg) translateY(-2px);
}

.gamification-page .lang-select.open .lang-trigger::after {
  transform: rotate(45deg) translateY(2px);
}

.gamification-page .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gamification-page .nav-link svg {
  width: 10px;
  height: 7px;
  flex: 0 0 auto;
}

.gamification-page .nav-link svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gamification-page .black-cta {
  min-width: 190px;
  height: 54px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
}

.gamification-page .account-btn {
  width: 48px;
  height: 48px;
}

.gamification-page .lime-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 60px;
  max-width: 100%;
  padding: 0 22px 0 32px;
  border: 0;
  border-radius: 999px;
  background: var(--gami-lime);
  color: #050505;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
  box-shadow: 0 10px 24px rgba(184, 255, 61, 0.18);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.gamification-page .lime-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(184, 255, 61, 0.35);
  filter: saturate(1.06);
}

.gamification-page .lime-cta:active {
  transform: translateY(0) scale(0.98);
}

.gamification-page .arrow-dot {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin-left: 0;
  background: #050505;
}

.gamification-page .arrow-dot::before {
  width: 18px;
  height: 4px;
  left: 11px;
  top: 19px;
  border: 0;
  background: var(--gami-lime);
}

.gamification-page .arrow-dot::after {
  width: 12px;
  height: 12px;
  right: 11px;
  top: 14px;
  border-top: 4px solid var(--gami-lime);
  border-right: 4px solid var(--gami-lime);
  background: transparent;
  transform: rotate(45deg);
}

.gamification-page .announce-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--gami-dark);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.gamification-page .announce-bar span {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 12px;
  line-height: 1;
}

.gami-main {
  overflow: hidden;
}

.gami-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: 54px;
  padding: 106px 0 92px;
}

.gami-hero-copy {
  min-width: 0;
}

.gami-hero-copy h1 {
  max-width: 610px;
  margin: 0 0 30px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(56px, 5.3vw, 82px);
  line-height: 0.95;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.gami-hero-copy p {
  max-width: 610px;
  margin: 0 0 42px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.gami-hero-copy .lime-cta {
  background: var(--gami-lime);
  color: #050505;
  min-width: 188px;
  justify-content: center;
  padding: 0 22px 0 32px;
}

.gami-hero-copy .lime-cta .arrow-dot {
  display: grid;
}

.meta-approved {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 58px;
  color: #111111;
  font-size: 18px;
  font-weight: 800;
  vertical-align: middle;
}

.meta-approved svg {
  width: 34px;
  height: auto;
  fill: none;
  stroke: #0088ff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gami-hero-img {
  width: min(100%, 705px);
  justify-self: end;
  display: block;
}

.gami-telegram-page .gami-hero {
  padding-top: 92px;
  padding-bottom: 68px;
}

.gami-telegram-page .gami-hero-img {
  width: min(100%, 620px);
}

.gami-telegram-page .gami-hero-copy h1 {
  max-width: 670px;
  font-size: clamp(56px, 5vw, 78px);
}

.gami-pink-band {
  position: relative;
  margin-top: -1px;
  padding: 150px 0 130px;
  background: var(--gami-pink);
  color: #fff;
  clip-path: polygon(0 9%, 79% 0, 79% 11%, 100% 4%, 100% 100%, 0 100%);
}

.gami-pink-band h2,
.gami-points h2,
.gami-features h2,
.gami-cases h2,
.gami-example h2,
.gami-articles h2,
.gami-faq h2,
.partner-cta h2 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  letter-spacing: 0;
  line-height: 0.95;
}

.gami-pink-band h2 {
  margin-bottom: 64px;
  text-align: center;
  font-size: clamp(52px, 6.8vw, 104px);
}

.gami-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.gami-work-grid article,
.gami-card-grid article,
.gami-feature-grid article {
  border-radius: 22px;
  background: var(--gami-soft);
  color: #070707;
}

.gami-work-grid article {
  min-height: 430px;
  padding: 42px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
}

.gami-work-grid h3 {
  margin: 0 0 20px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 31px;
  line-height: 1.04;
}

.gami-work-grid p,
.gami-card-grid p,
.gami-feature-grid p {
  margin: 0;
  font-size: 17px;
  line-height: 1.28;
}

.mini-feed,
.leaderboard > span {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 14px 18px;
  border-radius: 15px;
  background: #fff;
  font-weight: 900;
  color: #251935;
}

.mini-feed > span,
.people-mini > span,
.safe-icons > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8ff3d, #e650d8);
}

.mini-feed > b,
.mini-feed > em,
.leaderboard > span > span,
.leaderboard > span > b > span {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.mini-feed em {
  margin-left: auto;
  font-style: normal;
  color: var(--gami-pink);
}

.reward-icons,
.bar-visual,
.safe-icons {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 18px;
  min-height: 120px;
  margin-top: auto;
}

.reward-icons > span,
.reward-icons b,
.reward-icons i,
.safe-icons b,
.safe-icons i {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
}

.reward-icons b {
  background: var(--gami-pink);
  border-radius: 16px;
}

.reward-icons i {
  opacity: 0.65;
}

.bar-visual > span {
  width: 66px;
  height: 82px;
  border-radius: 12px;
  background: #fff;
}

.bar-visual > span:nth-child(2) {
  height: 64px;
}

.bar-visual b {
  width: 70px;
  height: 132px;
  border-radius: 14px;
  background: var(--gami-pink);
}

.gami-points,
.gami-features,
.gami-cases,
.gami-example,
.gami-articles,
.gami-faq {
  padding: 120px 0 0;
}

.gami-points > h2,
.gami-features > h2,
.gami-cases > h2,
.gami-example > h2,
.gami-articles > h2,
.gami-faq > h2 {
  max-width: 980px;
  margin: 0 auto 28px;
  text-align: center;
  font-size: clamp(44px, 4.7vw, 72px);
}

.gami-points > p {
  margin: 0 auto 58px;
  text-align: center;
  font-size: 22px;
  line-height: 1.25;
}

.gami-card-grid,
.gami-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.gami-card-grid article {
  min-height: 390px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.gami-card-grid h3,
.gami-feature-grid h3 {
  margin: 0 0 20px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 32px;
  line-height: 1.03;
}

.score-icon {
  align-self: flex-start;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--gami-pink);
  color: #fff;
  font-weight: 900;
}

.people-mini {
  display: flex;
  gap: 12px;
}

.gami-card-grid img,
.gami-feature-grid img {
  max-width: 100%;
  align-self: center;
  object-fit: contain;
}

.gami-quiz-preview {
  width: min(100%, 300px);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 12px 10px;
  align-items: center;
  align-self: center;
  margin-top: 28px;
}

.gami-quiz-preview .bot-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gami-lime);
  position: relative;
}

.gami-quiz-preview .bot-mark::before {
  content: "";
  position: absolute;
  inset: 7px 6px;
  background: var(--gami-dark);
  clip-path: polygon(0 45%, 46% 0, 46% 34%, 100% 34%, 53% 100%, 53% 62%, 0 62%);
}

.gami-quiz-preview p,
.gami-quiz-preview b {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: #ffffff;
  color: #251935;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}

.gami-quiz-preview p {
  grid-column: 2 / 4;
}

.gami-quiz-preview b {
  grid-column: 3 / 4;
  justify-self: end;
  background: var(--gami-pink);
  color: #ffffff;
}

.gami-quiz-preview .bot-mark:last-of-type {
  grid-column: 1 / 2;
}

.gami-quiz-preview p:last-child {
  grid-column: 2 / 4;
}

.gami-quiz-preview.large {
  width: min(100%, 470px);
  justify-self: center;
}

.gami-quiz-preview.large p,
.gami-quiz-preview.large b {
  font-size: 18px;
  padding: 18px 22px;
  border-radius: 18px;
}

.gami-quiz-preview.large .bot-mark {
  width: 42px;
  height: 42px;
}

.gami-card-grid ul {
  margin: 0;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.55;
}

.gami-purple-cta {
  margin-top: 120px;
  padding: 180px 24px 170px;
  text-align: center;
  color: #fff;
  background: #a997ff;
  clip-path: polygon(0 11%, 78% 0, 78% 12%, 100% 4%, 100% 100%, 0 100%);
}

.gami-telegram-page .gami-purple-cta {
  background: #a997ff;
}

.gami-purple-cta h2 {
  max-width: 1040px;
  margin: 0 auto 48px;
  font-size: clamp(46px, 5.7vw, 88px);
}

.gami-feature-grid {
  grid-template-columns: repeat(2, 1fr);
}

.gami-feature-grid article {
  min-height: 420px;
  padding: 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.leaderboard {
  display: grid;
  gap: 14px;
  max-width: 460px;
  margin: 20px auto 0;
}

.leaderboard > span b {
  margin-left: auto;
  font-weight: 800;
  color: #7f71d8;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 360px;
  margin: 34px auto 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
}

.toggle-row > span:last-child {
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: #dedfe7;
}

.gami-float-stats {
  position: relative;
  min-height: 165px;
  display: grid;
  place-items: center;
}

.gami-float-stats > span,
.gami-float-stats b {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 78px;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--gami-blue);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.gami-float-stats > span {
  left: 30%;
  top: 18px;
}

.gami-float-stats b {
  right: 30%;
  bottom: 24px;
}

.gami-float-stats > span::after,
.gami-float-stats b::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -10px;
  border-width: 10px 8px 0;
  border-style: solid;
  border-color: var(--gami-blue) transparent transparent;
}

.gami-cases-grid,
.article-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 66px;
}

.gami-cases-grid article,
.article-row article {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--gami-soft);
}

.gami-cases-grid h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 34px 34px 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 30px;
  line-height: 0.98;
}

.gami-cases-grid img {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 72%;
  object-fit: cover;
}

.gami-cases-grid article > span {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  padding: 20px 42px;
  border-radius: 999px;
  background: var(--gami-lime);
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.gami-cases-grid article > span > span {
  position: static;
  padding: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  transform: none;
  transition: none;
}

.gami-cases-grid article:hover > span {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.03);
}

.gami-cases .lime-cta.small {
  display: flex;
  width: fit-content;
  margin: 52px auto 0;
}

.example-list {
  display: grid;
  gap: 28px;
  margin-top: 64px;
}

.example-list article {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  min-height: 420px;
  padding: 56px;
  border-radius: 22px;
  background: var(--gami-soft);
  overflow: hidden;
}

.example-list article:nth-child(even) {
  grid-template-columns: 1.05fr 0.95fr;
}

.example-list article:nth-child(even) img {
  order: -1;
}

.example-list h3 {
  margin: 0 0 24px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 44px;
  line-height: 1;
}

.example-list p {
  max-width: 520px;
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}

.example-list img {
  max-width: 100%;
  max-height: 360px;
  justify-self: center;
  object-fit: contain;
}

.article-row article {
  min-height: 470px;
  display: flex;
  flex-direction: column;
}

.article-cover {
  width: 100%;
  aspect-ratio: 1.38 / 1;
  object-fit: cover;
  display: block;
}

.art-img {
  min-height: 230px;
  padding: 34px;
  color: #fff;
  background: var(--gami-dark);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 84px;
  line-height: 0.9;
  overflow: hidden;
}

.art-img.growth,
.art-img.plus {
  background: linear-gradient(145deg, #670841, #f447c8);
  font-size: 54px;
  color: #070707;
}

.art-img.plus {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 42% 42%;
}

.article-row h3 {
  margin: 0;
  padding: 28px 32px;
  font-size: 23px;
  line-height: 1.15;
  font-weight: 500;
}

.article-row article > span {
  margin: auto 32px 32px;
  font-size: 15px;
}

.article-row article > span > span {
  margin: 0;
  font-size: inherit;
}

.article-row b {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #070707;
  color: var(--gami-lime);
  font-size: 24px;
}

.partner-cta {
  margin-top: 120px;
  padding: 150px 0;
  text-align: center;
  color: #fff;
  background: var(--gami-dark);
}

.partner-cta h2 {
  max-width: 900px;
  margin: 0 auto 28px;
  font-size: clamp(44px, 5vw, 78px);
}

.partner-cta p {
  max-width: 680px;
  margin: 0 auto 44px;
  font-size: 22px;
  line-height: 1.35;
}

.partner-cta .lime-cta {
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .gami-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .gami-hero-copy h1,
  .gami-hero-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .meta-approved {
    margin: 26px 0 0;
  }

  .gami-hero-img {
    justify-self: center;
  }

  .gami-work-grid,
  .gami-card-grid,
  .gami-cases-grid,
  .article-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .gamification-page .page-container,
  .gamification-page .nav-wrap {
    width: min(100% - 32px, var(--container));
  }

  .gamification-page .nav-wrap {
    min-height: 72px;
    grid-template-columns: auto auto 1fr;
    gap: 12px;
  }

  .gamification-page .brand {
    font-size: 24px;
  }

  .gamification-page .main-nav {
    display: none;
  }

  .gamification-page .mega-menu:not(.open) {
    display: none;
  }

  .gamification-page .nav-actions {
    justify-content: flex-end;
  }

  .gamification-page .account-btn {
    width: 42px;
    height: 42px;
  }

  .gamification-page .black-cta {
    display: none;
    min-width: 150px;
    height: 46px;
    font-size: 13px;
  }

  .gamification-page .announce-bar {
    min-height: 64px;
    padding: 0 16px;
    justify-content: center;
    overflow: hidden;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .gami-hero {
    padding: 72px 0 60px;
    gap: 34px;
    text-align: center;
  }

  .gami-hero-copy h1 {
    max-width: 340px;
    margin-inline: auto;
    font-size: 36px;
    line-height: 0.98;
    overflow-wrap: break-word;
  }

  .gami-telegram-page .gami-hero-copy h1 {
    max-width: 350px;
    font-size: 42px;
    overflow-wrap: normal;
    word-break: normal;
  }

  .gami-hero-copy p {
    max-width: 300px;
    margin-inline: auto;
    font-size: 16px;
    overflow-wrap: break-word;
  }

  .meta-approved {
    display: flex;
    justify-content: center;
    margin: 24px auto 0;
    font-size: 16px;
  }

  .gami-hero-img {
    width: 100%;
    margin-right: 0;
  }

  .gami-pink-band,
  .gami-purple-cta {
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
  }

  .gami-pink-band {
    padding: 95px 0 86px;
  }

  .gami-points,
  .gami-features,
  .gami-cases,
  .gami-example,
  .gami-articles,
  .gami-faq {
    padding-top: 84px;
  }

  .gami-work-grid article,
  .gami-card-grid article,
  .gami-feature-grid article,
  .example-list article {
    padding: 28px;
    min-height: auto;
  }

  .gami-feature-grid,
  .example-list article,
  .example-list article:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .example-list article:nth-child(even) img {
    order: initial;
  }

  .example-list h3 {
    font-size: 32px;
  }

  .gami-cases-grid article,
  .article-row article {
    min-height: 430px;
  }
}

/* Knowledge Base final responsive overrides */
.knowledge-page {
  overflow-x: hidden;
}

.knowledge-page .kb-hero-grid,
.knowledge-page .kb-hero-copy,
.knowledge-page .kb-hero-panel,
.knowledge-page .kb-panel-card,
.knowledge-page .kb-category-grid article,
.knowledge-page .kb-article-list article,
.knowledge-page .kb-path-grid article {
  min-width: 0;
}

.knowledge-page .kb-hero h1,
.knowledge-page .kb-hero-copy p,
.knowledge-page .kb-panel-card span,
.knowledge-page .kb-panel-card b,
.knowledge-page .kb-category-grid h3,
.knowledge-page .kb-article-list h3,
.knowledge-page .kb-path-grid h3 {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .site-header .lang-select {
    display: flex !important;
  }

  .site-header .lang-trigger {
    min-width: 88px;
    min-height: 42px;
    padding-inline: 8px 10px;
    font-size: 13px;
  }

  .site-header .lang-menu {
    top: 52px;
    left: auto;
    right: 0;
    transform: translateY(-8px) scale(0.98);
  }

  .site-header .lang-select.open .lang-menu {
    transform: translateY(0) scale(1);
  }

  .knowledge-page .page-container {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }

  .knowledge-page .nav-wrap {
    width: min(calc(100% - 32px), var(--container));
    min-height: 68px;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 14px;
  }

  .knowledge-page .brand {
    font-size: 22px;
  }

  .knowledge-page .lang-select {
    display: flex !important;
    justify-self: end;
  }

  .knowledge-page .lang-trigger {
    min-width: 54px;
    min-height: 42px;
    color: #111111;
    display: inline-flex;
  }

  .knowledge-page .mega-menu:not(.open) {
    display: none;
  }

  .knowledge-page .kb-hero {
    padding: 40px 0 50px;
  }

  .knowledge-page .kb-hero::before {
    inset: auto -50% -10% 30%;
    height: 280px;
  }

  .knowledge-page .kb-hero h1 {
    max-width: 330px;
    font-size: 31px;
    line-height: 1.06;
    overflow-wrap: normal;
    word-break: normal;
  }

  .knowledge-page .kb-hero-copy > p {
    max-width: 340px;
    font-size: 17px;
  }

  .knowledge-page .kb-hero-grid {
    display: block;
  }

  .knowledge-page .kb-hero-copy,
  .knowledge-page .kb-hero-panel,
  .knowledge-page .kb-search,
  .knowledge-page .kb-panel-card,
  .knowledge-page .kb-panel-metrics {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .knowledge-page .kb-search {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
  }

  .knowledge-page .kb-search input {
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    text-overflow: ellipsis;
  }

  .knowledge-page .kb-panel-card {
    padding: 24px;
  }

  .knowledge-page .kb-panel-card b {
    margin-top: 28px;
    font-size: 26px;
  }

  .knowledge-page .kb-panel-card span {
    font-size: 15px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.25;
  }

  .knowledge-page .kb-quick article {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  body.home-page .promo-inner {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    overflow: hidden;
    white-space: normal;
  }

  body.home-page .promo-inner > span {
    white-space: normal;
  }

  body.home-page .promo-inner > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 245px;
    padding-inline: 10px;
    font-size: 10px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.home-page .hero-section {
    min-height: 700px;
  }

  body.home-page .hero-copy h1 {
    width: min(100%, 320px);
    max-width: 320px;
    font-size: 40px;
    line-height: 0.98;
    overflow-wrap: break-word;
    word-break: normal;
  }

  body.home-page .hero-copy h1 span {
    white-space: normal;
    overflow-wrap: break-word;
  }

  body.home-page .hero-copy p {
    width: min(100%, 315px);
    max-width: 315px;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  body.home-page .magenta-rise {
    height: 130px;
  }

  body.home-page .follow-card {
    width: min(100%, 340px);
    max-width: calc(100vw - 28px);
    grid-template-columns: 44px minmax(0, 1fr);
    margin-inline: auto;
    padding: 16px;
    font-size: 15px;
  }

  body.home-page .follow-card p,
  body.home-page .follow-card p span,
  body.home-page .follow-card p em,
  body.home-page .follow-card p b {
    display: inline;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.home-page .ai-card {
    width: min(100%, 340px);
    height: 430px;
    max-width: calc(100vw - 28px);
    margin-inline: auto;
    padding: 0;
  }

  body.home-page .ai-chat-stream {
    padding: 62px 26px 60px;
  }

  body.home-page .ai-message-row {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    margin: 22px 0;
  }

  body.home-page .ai-bot-avatar {
    width: 36px;
    height: 36px;
  }

  body.home-page .ai-bubble {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.home-page .ai-bubble.user.second,
  body.home-page .ai-bubble.bot {
    max-width: 220px;
  }
}

.dash-floating-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 7px 10px;
  border-radius: 7px;
  background: #151515;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
  white-space: nowrap;
}

.dash-floating-tooltip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid #151515;
  transform: translateY(-50%);
}

.dash-floating-tooltip.open {
  opacity: 1;
  transform: translate(0, -50%);
}

.user-dashboard-app .dash-side-nav button::before,
.user-dashboard-app .dash-side-nav button::after,
.user-dashboard-app .dash-logo::before,
.user-dashboard-app .dash-logo::after,
.user-dashboard-app .dash-avatar::before,
.user-dashboard-app .dash-avatar::after {
  display: none;
}

.dash-workspace-switcher {
  position: relative;
}

.dash-logo {
  transition:
    box-shadow 0.16s ease,
    outline-color 0.16s ease,
    transform 0.16s ease;
}

.dash-workspace-switcher .dash-logo:hover,
.dash-workspace-switcher .dash-logo:focus-visible {
  outline: 2px solid #c9ff3a;
  outline-offset: 2px;
  transform: translateY(-1px);
}

.dash-workspace-menu {
  position: absolute;
  left: 62px;
  top: 0;
  z-index: 140;
  width: 278px;
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #e2e4ec;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(18, 22, 34, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px) scale(0.98);
  transform-origin: left top;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.dash-workspace-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.dash-workspace-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid #eff0f5;
}

.dash-workspace-head .dash-logo {
  width: 46px;
  height: 46px;
  font-size: 18px;
  pointer-events: none;
}

.dash-workspace-head b,
.dash-workspace-head small {
  display: block;
}

.dash-workspace-head b {
  font-size: 17px;
  line-height: 1.15;
}

.dash-workspace-head small {
  margin-top: 4px;
  color: #747781;
  font-size: 14px;
}

.dash-workspace-menu button {
  min-height: 40px;
  justify-content: flex-start;
  padding: 0 12px;
  border-radius: 8px;
  color: #121316;
  font-size: 16px;
  text-align: left;
}

.dash-workspace-menu button:hover {
  background: #f2f4ff;
  color: #1f5cff;
}

.dash-view.active.creator-league-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  background: #272727;
  color: #f6f6f6;
}

.creator-league-view {
  --creator-panel: #303030;
  --creator-panel-2: #353535;
  --creator-line: #3f3f3f;
  --creator-muted: #a9a9a9;
  --creator-green: #20d85b;
}

.creator-league-sidebar {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  padding: 22px 12px 28px;
  border-right: 1px solid var(--creator-line);
  background: #242424;
}

.creator-league-brand {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 0 6px;
}

.creator-league-brand span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #3a3a3a;
  color: #ffffff;
  font-size: 19px;
  font-weight: 900;
}

.creator-league-brand h1 {
  margin: 0;
  font-size: 23px;
  line-height: 1;
  white-space: nowrap;
}

.creator-upload,
.creator-league-menu button {
  width: 100%;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 7px;
  color: #d6d6d6;
  font-size: 16px;
  text-align: left;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.creator-upload {
  background: #3a3a3a;
  text-align: center;
}

.creator-upload:hover,
.creator-league-menu button:hover,
.creator-league-menu button.active {
  background: #444444;
  color: #ffffff;
}

.creator-league-menu {
  display: grid;
  align-content: start;
  gap: 4px;
  margin-top: 20px;
}

.creator-league-menu button.active {
  font-weight: 900;
}

.creator-plan {
  display: grid;
  gap: 12px;
  padding: 18px 14px 0;
  border-top: 1px solid var(--creator-line);
}

.creator-plan b {
  font-size: 18px;
}

.creator-plan span {
  padding-bottom: 18px;
  border-bottom: 6px solid #19d447;
  color: #ffffff;
  font-size: 17px;
}

.creator-league-main {
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr);
}

.creator-league-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 44px;
  border-bottom: 1px solid var(--creator-line);
  background: #262626;
  color: #a9a9a9;
}

.creator-league-top span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(#262626, #262626) padding-box,
    linear-gradient(135deg, #585858, #3b3b3b) border-box;
  border: 2px solid transparent;
}

.creator-league-top b {
  font-size: 24px;
}

.creator-league-scroll {
  min-width: 0;
  overflow-y: auto;
  padding: 30px 44px 56px;
}

.creator-hero-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin: 0 auto 18px;
  padding: 28px;
  border: 1px solid var(--creator-line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(48, 48, 48, 0.92), rgba(45, 45, 45, 0.92)),
    url("./assets/creator-pattern-dark-desktop.svg") center / cover no-repeat;
}

.creator-hero-block p,
.creator-section p {
  margin: 0;
  color: #c8c8c8;
  font-size: 17px;
  line-height: 1.4;
}

.creator-hero-block h2 {
  max-width: 700px;
  margin: 8px 0 10px;
  font-size: 38px;
  line-height: 1.02;
}

.creator-hero-block span {
  display: block;
  max-width: 720px;
  color: #c9c9c9;
  font-size: 18px;
  line-height: 1.4;
}

.creator-hero-block button {
  min-width: 150px;
  min-height: 48px;
  border-radius: 8px;
  background: #3e3e3e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.creator-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 36px;
}

.creator-steps article,
.creator-prize-table,
.creator-calc-grid article,
.creator-example,
.creator-rule-grid article {
  border: 1px solid var(--creator-line);
  border-radius: 12px;
  background: var(--creator-panel);
}

.creator-steps article {
  min-height: 82px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}

.creator-steps b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #474747;
  font-size: 15px;
}

.creator-steps span {
  color: #d1d1d1;
  font-size: 17px;
  line-height: 1.25;
}

.creator-section {
  margin-top: 36px;
}

.creator-section h2 {
  margin: 0 0 16px;
  font-size: 25px;
  line-height: 1.1;
}

.creator-prize-table {
  overflow: hidden;
  padding: 22px 36px;
}

.creator-prize-table > div,
.creator-mini-table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.42fr);
  gap: 26px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid #3a3a3a;
}

.creator-prize-table > div:last-child,
.creator-mini-table > div:last-child {
  border-bottom: 0;
}

.creator-prize-table span,
.creator-mini-table span {
  color: #9d9d9d;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.creator-prize-table b,
.creator-prize-table strong,
.creator-mini-table b,
.creator-mini-table strong {
  color: #ffffff;
  font-size: 16px;
}

.creator-prize-table strong,
.creator-mini-table strong {
  color: var(--creator-green);
}

.creator-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.creator-video-card {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 11px;
  background: #1d1d1d center / cover no-repeat;
}

.creator-video-card.reel-one {
  background-image: url("./assets/creator-reel-1.png");
}

.creator-video-card.reel-two {
  background-image: url("./assets/creator-reel-2.png");
}

.creator-video-card.reel-three {
  background-image: url("./assets/creator-reel-3.png");
}

.creator-video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.28));
}

.creator-video-card span {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
}

.creator-video-card span::before {
  content: "";
  margin-left: 4px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #ffffff;
}

.creator-calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.creator-calc-grid article,
.creator-rule-grid article,
.creator-example {
  padding: 24px;
}

.creator-calc-grid h3,
.creator-rule-grid h3,
.creator-example h3 {
  margin: 0 0 10px;
  font-size: 19px;
}

.creator-mini-table {
  margin-top: 22px;
}

.creator-example {
  margin-top: 22px;
}

.creator-example p {
  color: #d0d0d0;
  font-size: 17px;
}

.creator-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
}

.creator-rule-grid ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 18px;
  color: #d0d0d0;
  font-size: 16px;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .dash-view.active.creator-league-view {
    grid-template-columns: 1fr;
  }

  .creator-league-sidebar {
    min-height: auto;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
  }

  .creator-league-menu {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
  }

  .creator-plan {
    display: none;
  }

  .creator-steps,
  .creator-video-grid,
  .creator-rule-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .dash-floating-tooltip {
    display: none;
  }

  .creator-league-scroll,
  .creator-league-top {
    padding-inline: 18px;
  }

  .creator-league-sidebar {
    padding: 16px;
  }

  .creator-league-brand h1 {
    font-size: 22px;
  }

  .creator-hero-block,
  .creator-calc-grid {
    grid-template-columns: 1fr;
  }

  .creator-hero-block h2 {
    font-size: 30px;
  }

  .creator-prize-table {
    padding: 18px;
  }
}

/* User dashboard final polish: scoped to the app shell only. */
.user-dashboard-app {
  --dash-blue: #245bf5;
  --dash-blue-soft: #eff3ff;
  --dash-border: #e2e4eb;
  --dash-muted: #737782;
  --dash-panel: #f4f4f7;
  --dash-pink: #e31a8a;
  font-family: Arial, Helvetica, sans-serif;
}

.user-dashboard-app.dashboard-app {
  grid-template-columns: 72px minmax(0, 1fr);
  overflow-x: hidden;
}

.user-dashboard-app .dash-sidebar {
  gap: 22px;
  padding: 22px 8px 18px;
  border-color: var(--dash-border);
}

.user-dashboard-app .dash-logo,
.user-dashboard-app .dash-avatar {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  background: #9bc4ff;
  font-size: 18px;
  letter-spacing: 0;
}

.user-dashboard-app .dash-side-nav {
  gap: 10px;
}

.user-dashboard-app .dash-side-nav button {
  width: 40px;
  height: 40px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: #777b84;
}

.user-dashboard-app .dash-side-nav button:hover {
  background: #f5f6fb;
  color: var(--dash-blue);
  transform: translateY(-1px);
}

.user-dashboard-app .dash-side-nav button.active {
  border-color: #0e0f12;
  background: #f6f7fb;
  color: var(--dash-blue);
  box-shadow: none;
}

.user-dashboard-app .dash-side-nav svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.85;
}

.dash-floating-tooltip {
  z-index: 500;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.user-dashboard-app .dash-home-inner {
  width: min(100% - 48px, 924px);
  padding-top: 24px;
}

.user-dashboard-app.instagram-connect-active.dashboard-app {
  grid-template-columns: minmax(0, 1fr);
}

.user-dashboard-app.instagram-connect-active .dash-sidebar {
  display: none;
}

.user-dashboard-app.instagram-connect-active .user-dash-content {
  width: 100vw;
  min-height: 100vh;
}

.user-dashboard-app .dash-view.active.instagram-connect-view {
  display: grid;
}

.instagram-connect-view {
  min-height: 100vh;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #ffffff;
}

.instagram-connect-side {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 62px clamp(36px, 8vw, 150px) 30px;
  background: #fbfbff;
}

.instagram-connect-logo {
  color: #050505;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  transform: scaleX(1.12);
  transform-origin: left center;
}

.instagram-connect-visual {
  align-self: center;
}

.instagram-connect-visual img {
  width: min(330px, 72%);
  display: block;
  margin: 0 0 46px;
}

.instagram-connect-visual h1 {
  margin: 0 0 12px;
  color: #030303;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: 0;
}

.instagram-connect-visual p,
.instagram-connect-copy p,
.instagram-meta-badge span,
.instagram-connect-back {
  color: #777982;
}

.instagram-connect-visual p {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
}

.instagram-connect-back {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 23px;
  line-height: 1;
}

.instagram-connect-back span {
  width: 23px;
  height: 23px;
  position: relative;
}

.instagram-connect-back span::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.instagram-connect-back span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.instagram-connect-main {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 56px clamp(30px, 7vw, 116px);
}

.instagram-connect-copy {
  width: min(100%, 610px);
}

.instagram-connect-copy h2 {
  max-width: 560px;
  margin: 0 0 14px;
  color: #050505;
  font-size: clamp(28px, 2.15vw, 34px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: 0;
}

.instagram-connect-copy p {
  max-width: 540px;
  margin: 0 0 30px;
  font-size: 21px;
  line-height: 1.38;
}

.instagram-meta-badge {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 18px;
  padding: 8px 16px;
  border: 1px solid #dfe2e9;
  border-radius: 9px;
  background: #ffffff;
}

.instagram-meta-badge img {
  width: 116px;
  height: auto;
  display: block;
}

.instagram-meta-badge span {
  font-size: 18px;
  font-weight: 800;
}

.instagram-connect-action {
  width: 100%;
  min-height: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  border: 1px solid #dfe2e9;
  border-radius: 8px;
  background: #ffffff;
  color: #090909;
  font-size: 23px;
  font-weight: 500;
}

.instagram-connect-action img {
  width: 28px;
  height: 28px;
  display: block;
}

.instagram-connect-action.is-loading,
.instagram-facebook-link.is-loading {
  cursor: wait;
  opacity: 0.78;
}

.instagram-connect-action.is-loading::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-left: 10px;
  border: 2px solid #d7d8de;
  border-top-color: #245bf5;
  border-radius: 50%;
  animation: dashboardSpin 0.8s linear infinite;
}

.instagram-connection-status {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 22px;
  padding: 14px;
  border: 1px solid #e4e5eb;
  border-radius: 18px;
  background: #f8f8fb;
}

.instagram-connection-status[hidden] {
  display: none;
}

.instagram-connection-status.connected {
  border-color: #b8eec4;
  background: #f3fff5;
}

.instagram-status-avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: url("./assets/dashboard-instagram-icon.svg") center / 30px 30px no-repeat, #ffffff;
  box-shadow: inset 0 0 0 1px #e9e9ef;
}

.instagram-status-avatar[style*="url"] {
  background-size: cover;
  background-position: center;
}

.instagram-connection-status span {
  display: inline-flex;
  width: max-content;
  margin-bottom: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eceef5;
  color: #6f737e;
  font-size: 12px;
  font-weight: 800;
}

.instagram-connection-status.connected span {
  background: #a4ff2f;
  color: #050505;
}

.instagram-connection-status b {
  display: block;
  color: #050505;
  font-size: 18px;
  line-height: 1.15;
}

.instagram-connection-status small {
  display: block;
  margin-top: 4px;
  color: #777982;
  font-size: 14px;
  line-height: 1.25;
}

.instagram-connection-status button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #dfe1e8;
  border-radius: 12px;
  background: #ffffff;
  color: #050505;
  font-weight: 800;
}

.instagram-connect-alert {
  margin: 0 0 16px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #fff1f4;
  color: #9d1843;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.instagram-connect-alert[data-tone="success"] {
  background: #f0ffe7;
  color: #227a22;
}

.instagram-selection-card {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid #dfe4ee;
  border-radius: 14px;
  background: #ffffff;
}

.instagram-selection-card[hidden] {
  display: none;
}

.instagram-selection-card > strong {
  color: #0b0b0b;
  font-size: 16px;
  line-height: 1.2;
}

.instagram-selection-card > p {
  margin: -4px 0 0;
  color: #7a7f8b;
  font-size: 14px;
  line-height: 1.4;
}

.instagram-selection-list {
  display: grid;
  gap: 8px;
}

.instagram-selection-list button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e4e7ef;
  border-radius: 10px;
  background: #fafbff;
  text-align: left;
}

.instagram-selection-list button:hover {
  border-color: #1f5cff;
  background: #f5f8ff;
}

.instagram-selection-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb84d, #f52f84 48%, #7b4dff);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.instagram-selection-list b,
.instagram-selection-list small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instagram-selection-list b {
  color: #111111;
  font-size: 15px;
}

.instagram-selection-list small {
  margin-top: 3px;
  color: #737986;
  font-size: 13px;
}

@keyframes dashboardSpin {
  to {
    transform: rotate(360deg);
  }
}

.instagram-facebook-link {
  display: block;
  margin: 46px auto 0;
  color: #1557ff;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
}

.telegram-connect-visual img {
  width: min(300px, 72%);
}

.telegram-connect-copy {
  width: min(100%, 590px);
}

.telegram-connect-copy h2 {
  margin: 0 0 20px;
  color: #050505;
  font-size: clamp(27px, 2vw, 32px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0;
}

.telegram-mode-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.telegram-mode-tabs {
  width: 338px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 30px;
  padding: 3px;
  border-radius: 10px;
  background: #f0f1f6;
}

.telegram-mode-tabs label {
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #777982;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

#telegram-mode-new:checked ~ .telegram-mode-tabs label[for="telegram-mode-new"],
#telegram-mode-existing:checked ~ .telegram-mode-tabs label[for="telegram-mode-existing"] {
  background: #ffffff;
  color: #090909;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.telegram-step-list {
  display: grid;
  gap: 22px;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
}

#telegram-mode-existing:checked ~ .telegram-step-list-new,
#telegram-mode-new:checked ~ .telegram-step-list-existing {
  display: none;
}

.telegram-step-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.telegram-step-list span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0f1f6;
  color: #090909;
  font-size: 22px;
  line-height: 1;
}

.telegram-step-list p {
  margin: 4px 0 0;
  color: #090909;
  font-size: 23px;
  line-height: 1.25;
}

.telegram-step-list a {
  color: #1557ff;
  text-decoration: none;
}

.telegram-step-list b {
  font-weight: 900;
}

.telegram-token-input {
  width: 100%;
  height: 50px;
  margin: 0 0 24px;
  padding: 0 16px;
  border: 1px solid #dfe2e9;
  border-radius: 8px;
  outline: 0;
  color: #090909;
  font-size: 22px;
}

.telegram-token-input::placeholder {
  color: #8a8d96;
}

.telegram-connect-action {
  width: 250px;
  max-width: 100%;
  min-height: 52px;
  border-radius: 8px;
  background: #245bf5;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
}

.tiktok-connect-visual img {
  width: min(290px, 72%);
}

.tiktok-connect-copy {
  width: min(100%, 500px);
}

.tiktok-connect-warning {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0 0 38px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff2bf;
  color: #090909;
  font-size: 17px;
  line-height: 1.35;
}

.tiktok-connect-warning span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffb91b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.tiktok-connect-copy h2 {
  max-width: 420px;
  margin: 0 0 12px;
  color: #050505;
  font-size: clamp(27px, 2vw, 31px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: 0;
}

.tiktok-connect-copy p {
  max-width: 430px;
  margin: 0 0 34px;
  color: #777982;
  font-size: 18px;
  line-height: 1.42;
}

.tiktok-connect-action {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 8px;
  background: #000000;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
}

.tiktok-connect-action .brand-dot {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

.user-dashboard-app .dash-quick-start {
  margin: 0 0 68px;
}

.user-dashboard-app .dash-quick-start h1 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
}

.user-dashboard-app .dash-quick-start > p {
  margin: 0 0 20px;
  color: #747781;
  font-size: 14px;
}

.user-dashboard-app .dash-start-list {
  display: grid;
}

.user-dashboard-app .dash-start-list article {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0 18px;
  border-bottom: 1px solid #dfe1e8;
}

.user-dashboard-app .dash-start-list article:first-child {
  padding-top: 0;
}

.user-dashboard-app .dash-start-list article:last-child {
  border-bottom: 0;
}

.user-dashboard-app .dash-start-dot {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px dashed #d9dce5;
  border-radius: 50%;
}

.user-dashboard-app .dash-start-list article.complete {
  color: #7a7d86;
}

.user-dashboard-app .dash-start-list article.complete h2 {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #aeb3bf;
}

.user-dashboard-app .dash-start-list article.complete .dash-start-dot {
  position: relative;
  border-style: solid;
  border-color: #27d34d;
  background: #27d34d;
}

.user-dashboard-app .dash-start-list article.complete .dash-start-dot::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

.user-dashboard-app .dash-start-list h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}

.user-dashboard-app .dash-start-list p {
  max-width: 860px;
  margin: 8px 0 18px;
  color: #747781;
  font-size: 14px;
  line-height: 1.45;
}

.user-dashboard-app .dash-start-list button {
  min-width: 78px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--dash-blue);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.user-dashboard-app .dash-promo {
  min-height: 84px;
  margin-bottom: 34px;
  padding: 20px 24px;
  border-radius: 18px;
  background: linear-gradient(105deg, #8c00ff 0%, #d91591 100%);
}

.user-dashboard-app .dash-promo h1 {
  font-size: 24px;
  font-weight: 700;
}

.user-dashboard-app .dash-promo p {
  font-size: 15px;
}

.user-dashboard-app .dash-promo button,
.user-dashboard-app .dash-primary-action,
.user-dashboard-app .dash-dark-action,
.user-dashboard-app .dash-trial-banner button,
.user-dashboard-app .virale-form button {
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.user-dashboard-app .dash-promo button:hover,
.user-dashboard-app .dash-primary-action:hover,
.user-dashboard-app .dash-dark-action:hover,
.user-dashboard-app .dash-trial-banner button:hover,
.user-dashboard-app .virale-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(31, 92, 255, 0.16);
}

.user-dashboard-app .dash-tool-card {
  min-height: 92px;
  border-color: #dde0e8;
  border-radius: 18px;
}

.user-dashboard-app .dash-tool-card:hover,
.user-dashboard-app .dash-tool-card:focus-visible {
  border-color: #b9c8ff;
  box-shadow: 0 20px 54px rgba(31, 92, 255, 0.1);
}

.user-dashboard-app .dash-course-cover {
  min-height: 168px;
  border-radius: 14px;
}

.user-dashboard-app .dash-home-panel .dash-course-cover::before {
  display: none;
}

.user-dashboard-app .dash-home-panel .dash-course-cover::after {
  display: block;
  width: 52px;
  height: 52px;
  background: rgba(0, 0, 0, 0.76);
}

.user-dashboard-app .dash-home-panel .dash-course-cover span::before {
  display: block;
}

.user-dashboard-app .dash-course-grid {
  gap: 18px;
}

.user-dashboard-app .dash-course-card h3 {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.2;
}

.user-dashboard-app .dash-section {
  margin-top: 0;
}

.user-dashboard-app .dash-section-head {
  margin-bottom: 28px;
}

.user-dashboard-app .dash-section-head h2 {
  font-size: 28px;
}

.user-dashboard-app .dash-section-head button {
  font-size: 19px;
}

.profile-menu-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #0f1115;
}

.profile-menu-icon::before,
.profile-menu-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.profile-menu-icon.account::before {
  left: 7px;
  top: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.profile-menu-icon.account::after {
  left: 3px;
  bottom: 2px;
  width: 16px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 9px 9px 4px 4px;
}

.profile-menu-icon.card::before {
  inset: 4px 2px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.profile-menu-icon.card::after {
  left: 5px;
  top: 10px;
  width: 12px;
  height: 2px;
  background: currentColor;
}

.profile-menu-icon.partners::before {
  left: 1px;
  top: 5px;
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 11px 0 0 -2px #ffffff, 11px 0 0 0 currentColor;
}

.profile-menu-icon.partners::after {
  left: 2px;
  bottom: 3px;
  width: 18px;
  height: 7px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 9px 9px;
}

.profile-menu-icon.crown::before {
  left: 2px;
  top: 6px;
  width: 18px;
  height: 10px;
  border: 2px solid currentColor;
  border-top: 0;
  clip-path: polygon(0 45%, 26% 15%, 50% 45%, 74% 15%, 100% 45%, 88% 100%, 12% 100%);
  background: currentColor;
}

.profile-menu-icon.language::before {
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.profile-menu-icon.language::after {
  left: 4px;
  top: 10px;
  width: 14px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 -0.5px currentColor, 0 5px 0 -0.5px currentColor;
}

.profile-menu-icon.help::before {
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.profile-menu-icon.help::after {
  left: 10px;
  top: 7px;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 9px 0 currentColor;
}

.profile-menu-icon.logout::before {
  left: 2px;
  top: 4px;
  width: 12px;
  height: 14px;
  border: 2px solid currentColor;
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

.profile-menu-icon.logout::after {
  right: 1px;
  top: 10px;
  width: 12px;
  height: 2px;
  background: currentColor;
  box-shadow: 4px -4px 0 -0.5px currentColor, 4px 4px 0 -0.5px currentColor;
}

.user-dashboard-app .dash-profile-menu button {
  justify-content: flex-start;
  min-height: 38px;
  gap: 13px;
  font-size: 16px;
}

.user-dashboard-app .dash-profile-menu button em {
  margin-left: auto;
}

.user-dashboard-app .dash-module-layout {
  grid-template-columns: 248px minmax(0, 1fr);
}

.user-dashboard-app .dash-module-sidebar {
  gap: 9px;
  padding: 24px 20px 0;
  border-color: var(--dash-border);
}

.user-dashboard-app .dash-module-sidebar h1 {
  font-size: 22px;
  font-weight: 700;
  overflow-wrap: normal;
  word-break: normal;
}

.user-dashboard-app .dash-primary-action {
  background: var(--dash-blue);
}

.user-dashboard-app .dash-primary-action,
.user-dashboard-app .dash-dark-action,
.user-dashboard-app .dash-sub-active,
.user-dashboard-app .dash-sub-muted,
.user-dashboard-app .dash-text-action {
  min-height: 36px;
  font-size: 16px;
  font-weight: 400;
}

.user-dashboard-app .dash-sub-active {
  background: #f0f1f6;
  color: #050505;
}

.user-dashboard-app .dash-plan-card {
  margin: auto -20px 0;
  padding: 22px 20px 24px;
}

.user-dashboard-app .dash-workspace {
  padding: 24px 40px 44px;
}

.user-dashboard-app .dash-workspace-top h2 {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
}

.user-dashboard-app .dash-top-actions {
  flex: 0 1 584px;
  justify-content: flex-end;
}

.user-dashboard-app .dash-top-actions label {
  width: min(300px, 42%);
}

.user-dashboard-app .dash-trial-banner {
  border-radius: 8px;
  background: linear-gradient(90deg, #fde1f8 0%, #fde7ed 100%);
}

.user-dashboard-app .dash-top-actions button {
  min-width: 96px;
  justify-content: center;
  text-align: center;
}

.user-dashboard-app .dash-top-actions button:last-child {
  min-width: 150px;
}

.user-dashboard-app .dash-trial-banner b {
  font-size: 16px;
  font-weight: 500;
}

.user-dashboard-app .dash-empty-state {
  min-height: calc(100vh - 160px);
  align-content: center;
  padding-top: 0;
}

.user-dashboard-app .dash-empty-state h3 {
  font-size: 28px;
  line-height: 1.1;
}

.user-dashboard-app .dash-empty-state button:hover {
  border-color: #c6d2ff;
  background: #fbfcff;
}

.user-dashboard-app .brand-dot.tiktok::before {
  content: "";
  left: 9px;
  top: 1px;
  width: 8px;
  height: 22px;
  border-radius: 4px;
  background: #000000;
  box-shadow: 7px 4px 0 -2px #000000;
}

.user-dashboard-app .brand-dot.tiktok::after {
  left: 1px;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000000;
  box-shadow: 9px -17px 0 -6px #000000;
}

.user-dashboard-app .dash-plug-art {
  width: 374px;
  height: 318px;
  margin-bottom: 2px;
}

.user-dashboard-app .dash-plug-art::before {
  left: 44px;
  top: 10px;
  width: 286px;
  height: 272px;
  background: #e5ffb7;
  clip-path: polygon(
    49% 1%,
    56% 27%,
    72% 10%,
    68% 36%,
    92% 31%,
    74% 49%,
    100% 58%,
    74% 62%,
    88% 88%,
    63% 74%,
    61% 100%,
    48% 75%,
    34% 96%,
    34% 70%,
    5% 78%,
    28% 57%,
    0 45%,
    30% 42%,
    17% 17%,
    41% 31%
  );
  filter:
    drop-shadow(14px 13px 0 #d9e5ff)
    drop-shadow(-4px -4px 0 #30283e)
    drop-shadow(4px 4px 0 #30283e)
    drop-shadow(0 0 0 #30283e);
}

.user-dashboard-app .dash-plug-art::after {
  display: none;
}

.user-dashboard-app .dash-plug-art .plug-left,
.user-dashboard-app .dash-plug-art .plug-right {
  position: absolute;
  z-index: 2;
  top: 125px;
  height: 74px;
  border: 5px solid #30283e;
  background: #ffffff;
  box-sizing: border-box;
}

.user-dashboard-app .dash-plug-art .plug-left {
  left: 54px;
  width: 144px;
  border-radius: 35px 8px 8px 35px;
}

.user-dashboard-app .dash-plug-art .plug-left::before {
  content: "";
  position: absolute;
  left: -74px;
  top: 25px;
  width: 70px;
  height: 18px;
  border: 5px solid #30283e;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: #e7eefc;
  box-sizing: border-box;
}

.user-dashboard-app .dash-plug-art .plug-left::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 20px;
  width: 32px;
  height: 12px;
  border: 5px solid #30283e;
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: #ddd3ff;
  box-sizing: border-box;
  box-shadow: 0 22px 0 -5px #ddd3ff, 0 22px 0 0 #30283e;
}

.user-dashboard-app .dash-plug-art .plug-right {
  right: 44px;
  width: 144px;
  border-radius: 8px 35px 35px 8px;
  background:
    radial-gradient(circle at 51% 32%, #30283e 0 7px, transparent 8px),
    radial-gradient(circle at 51% 66%, #30283e 0 7px, transparent 8px),
    linear-gradient(90deg, #f2ebff 0 100%);
}

.user-dashboard-app .dash-plug-art .plug-right::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 20px;
  width: 34px;
  height: 12px;
  border: 5px solid #30283e;
  border-right: 0;
  border-radius: 9px 0 0 9px;
  background: #ddd3ff;
  box-sizing: border-box;
  box-shadow: 0 22px 0 -5px #ddd3ff, 0 22px 0 0 #30283e;
}

.user-dashboard-app .dash-plug-art .plug-right::after {
  content: "";
  position: absolute;
  right: -62px;
  top: 25px;
  width: 66px;
  height: 18px;
  border: 5px solid #30283e;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: #e7eefc;
  box-sizing: border-box;
}

.user-dashboard-app .dash-empty-state h3 {
  margin-top: 6px;
  font-size: 28px;
}

.user-dashboard-app .dash-empty-state p {
  margin-bottom: 28px;
  font-size: 16px;
}

.user-dashboard-app .dash-empty-state button {
  width: min(344px, 100%);
  min-height: 50px;
  grid-template-columns: 112px 1fr 82px;
  padding: 0 16px;
  border-color: #dcdee6;
  border-radius: 8px;
  font-size: 16px;
}

.user-dashboard-app .dash-empty-state button .brand-dot {
  grid-column: 1;
  justify-self: end;
  margin-right: 18px;
}

.user-dashboard-app .dash-empty-state button em {
  right: 34px;
  top: -9px;
  padding: 8px 12px;
  background: #d9caff;
  color: #050505;
  font-size: 15px;
  transform: rotate(-4deg);
}

.user-dashboard-app .brand-dot {
  position: relative;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 8px;
}

.user-dashboard-app .brand-dot::before,
.user-dashboard-app .brand-dot::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.user-dashboard-app .brand-dot.instagram {
  background:
    radial-gradient(circle at 72% 18%, #ffd43d 0 12%, transparent 13%),
    linear-gradient(135deg, #ffbe38 0%, #ff316c 45%, #7a4cff 100%);
}

.user-dashboard-app .brand-dot.instagram::before {
  inset: 5px;
  border: 2px solid #ffffff;
  border-radius: 7px;
}

.user-dashboard-app .brand-dot.instagram::after {
  left: 10px;
  top: 10px;
  width: 7px;
  height: 7px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 6px -5px 0 -3px #ffffff;
}

.user-dashboard-app .brand-dot.telegram {
  border-radius: 50%;
  background: #32a9df;
}

.user-dashboard-app .brand-dot.telegram::before {
  left: 6px;
  top: 8px;
  width: 16px;
  height: 12px;
  background: #ffffff;
  clip-path: polygon(0 46%, 100% 0, 75% 100%, 45% 70%, 25% 88%, 32% 62%);
}

.user-dashboard-app .brand-dot.tiktok {
  display: inline-block;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.user-dashboard-app .brand-dot.tiktok::before {
  content: "♪";
  inset: -6px 0 0 0;
  color: #000000;
  font-size: 38px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.user-dashboard-app .brand-dot.tiktok::before {
  content: "";
  inset: auto;
  left: 9px;
  top: 1px;
  width: 8px;
  height: 22px;
  border-radius: 4px;
  background: #000000;
  box-shadow: 7px 4px 0 -2px #000000;
}

.user-dashboard-app .brand-dot.tiktok::after {
  left: 1px;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000000;
  box-shadow: 9px -17px 0 -6px #000000;
}

.user-dashboard-app .brand-dot {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.user-dashboard-app .brand-dot::before,
.user-dashboard-app .brand-dot::after {
  display: none;
}

.user-dashboard-app .brand-dot.instagram {
  background-image: url("./assets/dashboard-instagram-icon.svg");
}

.user-dashboard-app .brand-dot.telegram {
  background-image: url("./assets/dashboard-telegram-icon.svg");
}

.user-dashboard-app .brand-dot.tiktok {
  background-image: url("./assets/dashboard-tiktok-icon.svg");
}

.user-dashboard-app .dash-plug-art {
  display: block;
  width: 300px;
  height: 300px;
  margin-bottom: 0;
  object-fit: contain;
}

.user-dashboard-app .dash-plug-art::before,
.user-dashboard-app .dash-plug-art::after,
.user-dashboard-app .dash-plug-art .plug-left,
.user-dashboard-app .dash-plug-art .plug-right {
  display: none;
}

.dash-feature-icon {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dash-blue);
  color: #ffffff;
}

.dash-feature-icon::before,
.dash-feature-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.dash-feature-icon.star::before {
  width: 24px;
  height: 24px;
  background: currentColor;
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%);
}

.dash-feature-icon.lock::before {
  left: 16px;
  top: 22px;
  width: 20px;
  height: 17px;
  border: 3px solid currentColor;
  border-radius: 5px;
}

.dash-feature-icon.lock::after {
  left: 19px;
  top: 12px;
  width: 14px;
  height: 16px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.dash-feature-icon.user::before {
  left: 18px;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
}

.dash-feature-icon.user::after {
  left: 13px;
  bottom: 10px;
  width: 26px;
  height: 15px;
  border-radius: 16px 16px 8px 8px;
  background: currentColor;
}

.dash-feature-icon.bolt::before {
  width: 22px;
  height: 28px;
  background: currentColor;
  clip-path: polygon(57% 0, 20% 50%, 49% 50%, 39% 100%, 82% 39%, 53% 39%);
}

.user-dashboard-app .dash-ai-center {
  width: min(620px, 100%);
  margin-top: 88px;
}

.user-dashboard-app .virale-agent-card {
  grid-template-columns: minmax(0, 1fr) 320px;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(23, 16, 31, 0.12);
}

.user-dashboard-app .virale-agent-card h3 {
  letter-spacing: 0;
}

.user-dashboard-app .dash-lessons-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 20px;
}

.dash-profile-page,
.dash-billing-card,
.dash-language-card,
.dash-help-page,
.dash-dashboard-empty {
  width: min(100%, 760px);
  border: 1px solid #e2e4ec;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(20, 27, 44, 0.07);
}

.dash-profile-page {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px auto 24px;
  padding: 24px;
}

.dash-profile-large {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #9bc4ff;
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
}

.dash-profile-page h2,
.dash-billing-card h2,
.dash-language-card h2,
.dash-help-page h2,
.dash-dashboard-empty h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
}

.dash-profile-page p,
.dash-billing-card p,
.dash-language-card p,
.dash-help-page p,
.dash-dashboard-empty p {
  margin: 8px 0 0;
  color: #747781;
  font-size: 18px;
  line-height: 1.45;
}

.dash-profile-plan-card {
  min-width: 150px;
  display: grid;
  gap: 4px;
  margin-left: auto;
  padding: 12px 14px;
  border: 1px solid #dfe5f2;
  border-radius: 12px;
  background: #f7f9ff;
}

.dash-profile-plan-card span {
  color: #1f5cff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.dash-profile-plan-card b {
  color: #12151d;
  font-size: 15px;
  line-height: 1.2;
}

.dash-settings-form.compact {
  width: min(100%, 760px);
  margin: 0 auto;
}

.dash-billing-card,
.dash-language-card,
.dash-help-page,
.dash-dashboard-empty {
  display: grid;
  gap: 16px;
  margin: 44px auto 0;
  padding: 30px;
}

.dash-billing-card > span {
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: #f2f4ff;
  color: #1f5cff;
  font-weight: 900;
}

.dash-billing-card button,
.dash-help-page button,
.dash-dashboard-empty button {
  width: fit-content;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 8px;
  background: #1f5cff;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
}

.dash-language-card {
  grid-template-columns: 1fr;
}

.dash-language-card button {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #e0e2ea;
  border-radius: 9px;
  text-align: left;
  font-size: 18px;
}

.dash-language-card button.active {
  border-color: #1f5cff;
  background: #f2f5ff;
  color: #1f5cff;
  font-weight: 900;
}

.user-dashboard-app .dash-lessons-grid article {
  border-color: #e0e2ea;
  border-radius: 18px;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.user-dashboard-app .dash-lessons-grid article:hover {
  transform: translateY(-2px);
  border-color: #c7d4ff;
  box-shadow: 0 20px 52px rgba(27, 34, 58, 0.1);
}

.user-dashboard-app .dash-lessons-grid article > div {
  position: relative;
  min-height: 236px;
  background-size: cover;
  background-position: center;
}

.user-dashboard-app .dash-lessons-grid article > div::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 0 40%, #ffffff 40% 64%, transparent 64%),
    #000000;
  transform: translateY(-50%);
}

.user-dashboard-app .cover-telegram {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(9, 24, 54, 0.72)),
    url("./assets/telegram-photo-4.jpg") center / cover no-repeat;
}

.user-dashboard-app .cover-referral {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(9, 24, 54, 0.72)),
    url("./assets/telegram-photo-2.jpg") center / cover no-repeat;
}

.user-dashboard-app .cover-gami-tg {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(16, 68, 110, 0.72)),
    url("./assets/gami-telegram-hero.webp") center / cover no-repeat;
}

.user-dashboard-app .cover-virale {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(33, 17, 41, 0.86)),
    url("./assets/virale-img-desktop.webp") center / cover no-repeat;
}

.user-dashboard-app .cover-payments {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(9, 24, 54, 0.72)),
    url("./assets/telegram-photo-5.jpg") center / cover no-repeat;
}

.user-dashboard-app .cover-direct {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(33, 17, 41, 0.86)),
    url("./assets/hero-instagram.webp") center / cover no-repeat;
}

.user-dashboard-app .cover-register {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(9, 24, 54, 0.72)),
    url("./assets/telegram-photo-6.jpg") center / cover no-repeat;
}

.user-dashboard-app .cover-analytics {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(9, 24, 54, 0.72)),
    url("./assets/telegram-photo-1.jpg") center / cover no-repeat;
}

.dash-account-grid,
.dash-plan-grid,
.dash-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 760px);
  margin: 22px auto 0;
}

.dash-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 920px);
}

.dash-account-grid article,
.dash-plan-grid article,
.dash-settings-grid article {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 148px;
  padding: 20px;
  border: 1px solid #e1e4ec;
  border-radius: 16px;
  background: #ffffff;
}

.dash-account-grid b,
.dash-plan-grid b,
.dash-settings-grid b {
  color: #111318;
  font-size: 20px;
  line-height: 1.15;
}

.dash-plan-grid span {
  color: #245bf5;
  font-size: 16px;
  font-weight: 900;
}

.dash-account-grid p,
.dash-plan-grid p,
.dash-settings-grid p {
  margin: 0;
  color: #747781;
  font-size: 15px;
  line-height: 1.35;
}

.dash-account-grid button,
.dash-settings-grid button {
  width: max-content;
  min-height: 38px;
  align-self: end;
  padding: 0 16px;
  border: 1px solid #d9dee9;
  border-radius: 9px;
  background: #f7f8fb;
  color: #111318;
  font-size: 15px;
  font-weight: 800;
}

.chat-workspace {
  display: grid;
  place-items: center;
}

.dash-chat-placeholder {
  width: min(100% - 40px, 440px);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.dash-chat-placeholder span {
  width: 76px;
  height: 76px;
  position: relative;
  border-radius: 22px;
  background: #eef2ff;
}

.dash-chat-placeholder span::before {
  content: "";
  position: absolute;
  inset: 20px 17px 24px;
  border: 3px solid #245bf5;
  border-radius: 10px;
}

.dash-chat-placeholder span::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: 20px;
  width: 15px;
  height: 15px;
  border-left: 3px solid #245bf5;
  border-bottom: 3px solid #245bf5;
  transform: skew(-18deg);
}

.dash-chat-placeholder h2 {
  margin: 4px 0 0;
  font-size: 28px;
  line-height: 1.1;
}

.dash-chat-placeholder p {
  margin: 0;
  color: #747781;
  font-size: 17px;
  line-height: 1.45;
}

.dash-chat-placeholder button {
  min-height: 46px;
  margin-top: 8px;
  padding: 0 22px;
  border-radius: 10px;
  background: #245bf5;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.dash-conversation-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.dash-conversation-list.is-loading {
  opacity: 0.58;
  pointer-events: none;
}

.dash-conversation-item {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #111318;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dash-conversation-item:hover,
.dash-conversation-item.active {
  border-color: #dfe4f0;
  background: #f4f6fb;
}

.dash-conversation-item.active {
  box-shadow: inset 3px 0 0 #245bf5;
}

.conversation-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 100%, #ffd76a 0 18%, #f0449a 45%, #7048ff 72%, #2f8fff 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.conversation-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.conversation-main b,
.conversation-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-main b {
  font-size: 15px;
  font-weight: 900;
}

.conversation-main small {
  color: #747781;
  font-size: 13px;
}

.conversation-meta {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.conversation-meta time {
  color: #898d98;
  font-size: 11px;
  white-space: nowrap;
}

.conversation-meta em {
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #245bf5;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.dash-conversation-summary {
  width: min(100% - 48px, 680px);
  padding: 28px;
  border: 1px solid #dfe4f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(19, 27, 54, 0.08);
}

.conversation-summary-top {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.conversation-summary-top > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 100%, #ffd76a 0 18%, #f0449a 45%, #7048ff 72%, #2f8fff 100%);
  color: #fff;
  font-weight: 950;
}

.conversation-summary-top b {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.conversation-summary-top small {
  color: #747781;
  font-size: 15px;
}

.conversation-summary-top em {
  padding: 7px 12px;
  border-radius: 999px;
  background: #edf3ff;
  color: #245bf5;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.dash-conversation-summary p {
  margin: 24px 0;
  padding: 18px 20px;
  border-radius: 17px;
  background: #f4f6fb;
  color: #111318;
  font-size: 17px;
  line-height: 1.45;
}

.conversation-thread {
  max-height: 280px;
  display: grid;
  gap: 10px;
  margin: 18px 0;
  overflow: auto;
  padding: 4px 4px 8px;
}

.conversation-thread-empty {
  margin: 0;
  padding: 16px;
  border-radius: 14px;
  background: #f7f8fc;
  color: #747781;
  font-size: 15px;
  text-align: center;
}

.conversation-message {
  max-width: 82%;
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border-radius: 16px;
  background: #f2f4f8;
  color: #111318;
}

.conversation-message.outbound {
  justify-self: end;
  background: #245bf5;
  color: #ffffff;
}

.conversation-message.failed {
  background: #fff0f0;
  color: #9d1111;
}

.conversation-message b {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.75;
}

.conversation-message p {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1.35;
}

.conversation-message small {
  color: inherit;
  font-size: 11px;
  opacity: 0.72;
}

.conversation-reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 18px 0 10px;
}

.conversation-reply-form input {
  min-width: 0;
  height: 48px;
  border: 1px solid #dfe4f0;
  border-radius: 14px;
  padding: 0 16px;
  background: #fff;
  color: #111318;
  font-size: 15px;
  outline: none;
}

.conversation-reply-form input:focus {
  border-color: #245bf5;
  box-shadow: 0 0 0 3px rgba(36, 91, 245, 0.13);
}

.conversation-reply-form button {
  height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0 20px;
  background: #245bf5;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.conversation-reply-form.is-sending {
  opacity: 0.72;
  pointer-events: none;
}

.conversation-reply-alert {
  margin: 0 0 14px;
  color: #245bf5;
  font-size: 13px;
  font-weight: 800;
}

.conversation-reply-alert[data-tone="error"] {
  color: #b11124;
}

.dash-conversation-summary dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
}

.dash-conversation-summary dl div {
  padding: 14px;
  border: 1px solid #edf0f6;
  border-radius: 14px;
  background: #fbfcff;
}

.dash-conversation-summary dt {
  color: #747781;
  font-size: 13px;
}

.dash-conversation-summary dd {
  margin: 6px 0 0;
  color: #111318;
  font-size: 16px;
  font-weight: 900;
}

.user-dashboard-app .dash-workspace-top {
  flex-wrap: wrap;
}

.user-dashboard-app .dash-top-actions {
  max-width: 100%;
  flex-wrap: wrap;
}

.user-dashboard-app .dash-top-actions label {
  min-width: 0;
}

.user-dashboard-app .dash-top-actions input {
  min-width: 0;
}

.dash-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 19, 26, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.dash-modal-overlay[hidden] {
  display: none;
}

.dash-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.dash-modal {
  position: relative;
  width: min(100%, 430px);
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(21, 24, 36, 0.24);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
}

.dash-modal-overlay.open .dash-modal {
  transform: translateY(0) scale(1);
}

.dash-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f1f6;
}

.dash-modal-close::before,
.dash-modal-close::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 17px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #111318;
}

.dash-modal-close::before {
  transform: rotate(45deg);
}

.dash-modal-close::after {
  transform: rotate(-45deg);
}

.dash-modal-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eff3ff;
  color: #245bf5;
  font-size: 26px;
  font-weight: 900;
}

.dash-modal-icon::before {
  content: "+";
}

.dash-modal-icon[data-icon="instagram"] {
  background: url("./assets/dashboard-instagram-icon.svg") center / 34px 34px no-repeat, #fff2f7;
}

.dash-modal-icon[data-icon="telegram"] {
  background: url("./assets/dashboard-telegram-icon.svg") center / 34px 34px no-repeat, #eef8ff;
}

.dash-modal-icon[data-icon="tiktok"] {
  background: url("./assets/dashboard-tiktok-icon.svg") center / 32px 32px no-repeat, #f4f4f7;
}

.dash-modal-icon[data-icon="instagram"]::before,
.dash-modal-icon[data-icon="telegram"]::before,
.dash-modal-icon[data-icon="tiktok"]::before {
  content: "";
}

.dash-modal-icon[data-icon="lock"]::before {
  content: "\2022";
}

.dash-modal-icon[data-icon="bell"]::before {
  content: "!";
}

.dash-modal-icon[data-icon="card"]::before {
  content: "$";
}

.dash-modal-icon[data-icon="ai"]::before,
.dash-modal-icon[data-icon="spark"]::before {
  content: "AI";
  font-size: 18px;
}

.dash-modal-icon[data-icon="send"]::before {
  content: ">";
}

.dash-modal-icon[data-icon="key"]::before {
  content: "#";
}

.dash-modal h2 {
  margin: 4px 0 0;
  font-size: 28px;
  line-height: 1.08;
}

.dash-modal p {
  margin: 0;
  color: #686d78;
  font-size: 17px;
  line-height: 1.45;
}

.dash-modal-body:empty {
  display: none;
}

.dash-filter-groups {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}

.dash-filter-group {
  display: grid;
  gap: 9px;
}

.dash-filter-group h3 {
  margin: 0;
  color: #20242d;
  font-size: 15px;
  line-height: 1.2;
}

.dash-filter-group div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-filter-group button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #dfe3ed;
  border-radius: 999px;
  background: #f8f9fc;
  color: #343946;
  font-size: 14px;
  font-weight: 800;
}

.dash-filter-group button.active {
  border-color: #245bf5;
  background: #eef3ff;
  color: #245bf5;
}

.dash-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.dash-modal-actions button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: #f0f1f6;
  color: #111318;
  font-size: 16px;
  font-weight: 800;
}

.dash-modal-actions button.primary {
  background: #245bf5;
  color: #ffffff;
}

@media (max-width: 1180px) {
  .user-dashboard-app .dash-home-inner {
    width: min(100% - 36px, 924px);
  }

  .user-dashboard-app .dash-module-layout {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .user-dashboard-app .dash-workspace {
    padding-inline: 30px;
  }

  .user-dashboard-app .dash-lessons-grid {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
  }
}

@media (max-width: 820px) {
  .user-dashboard-app.dashboard-app {
    display: block;
    padding-bottom: 78px;
  }

  .user-dashboard-app .dash-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 360;
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--dash-border);
    border-right: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -12px 32px rgba(20, 27, 44, 0.08);
  }

  .user-dashboard-app .dash-content {
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
  }

  .user-dashboard-app .dash-workspace-switcher,
  .user-dashboard-app .dash-profile {
    flex: 0 0 auto;
  }

  .user-dashboard-app .dash-side-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .user-dashboard-app .dash-side-nav::-webkit-scrollbar {
    display: none;
  }

  .user-dashboard-app .dash-side-nav button {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }

  .user-dashboard-app .dash-logo,
  .user-dashboard-app .dash-avatar {
    width: 48px;
    height: 48px;
  }

  .user-dashboard-app.instagram-connect-active.dashboard-app {
    padding-bottom: 0;
  }

  .user-dashboard-app.instagram-connect-active .dash-sidebar {
    display: none;
  }

  .user-dashboard-app.instagram-connect-active .dash-content {
    width: 100vw;
  }

  .instagram-connect-view {
    grid-template-columns: 1fr;
  }

  .instagram-connect-side,
  .instagram-connect-main {
    min-height: auto;
    padding: 28px 22px;
  }

  .instagram-connect-side {
    gap: 44px;
  }

  .instagram-connect-visual img {
    width: min(230px, 80%);
    margin-bottom: 28px;
  }

  .instagram-connect-visual h1 {
    font-size: 38px;
  }

  .instagram-connect-visual p,
  .instagram-connect-copy p,
  .instagram-connect-action,
  .instagram-facebook-link,
  .instagram-connect-back {
    font-size: 18px;
  }

  .instagram-connect-copy h2 {
    font-size: 27px;
  }

  .telegram-connect-copy h2 {
    font-size: 26px;
  }

  .telegram-mode-tabs {
    width: 100%;
  }

  .telegram-step-list {
    gap: 18px;
  }

  .telegram-step-list li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
  }

  .telegram-step-list span {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .telegram-step-list p,
  .telegram-token-input,
  .telegram-connect-action {
    font-size: 18px;
  }

  .telegram-connect-action {
    width: 100%;
  }

  .tiktok-connect-copy h2 {
    font-size: 26px;
  }

  .tiktok-connect-warning,
  .tiktok-connect-copy p,
  .tiktok-connect-action {
    font-size: 16px;
  }

  .instagram-meta-badge img {
    width: 92px;
  }

  .instagram-meta-badge span {
    font-size: 16px;
  }

  .user-dashboard-app .dash-home-inner {
    width: min(100% - 28px, 960px);
  }

  .user-dashboard-app .dash-module-layout {
    grid-template-columns: 1fr;
  }

  .user-dashboard-app .dash-module-sidebar {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 22px;
  }

  .user-dashboard-app .dash-plan-card {
    margin-inline: -22px;
  }

  .user-dashboard-app .dash-workspace {
    padding: 24px 18px 42px;
  }

  .user-dashboard-app .dash-course-grid,
  .user-dashboard-app .dash-lessons-grid,
  .user-dashboard-app .virale-agent-card,
  .user-dashboard-app .virale-metrics,
  .dash-account-grid,
  .dash-plan-grid,
  .dash-settings-grid {
    grid-template-columns: 1fr;
  }

  .user-dashboard-app .dash-section-head {
    align-items: flex-start;
    gap: 10px;
  }

  .user-dashboard-app .dash-section-head button {
    white-space: nowrap;
    font-size: 16px;
  }

  .user-dashboard-app .dash-course-card h3 {
    overflow-wrap: anywhere;
  }

  .dash-workspace-menu,
  .dash-profile-menu {
    left: auto;
    right: 10px;
    bottom: 66px;
    width: min(278px, calc(100vw - 20px));
  }

  .dash-profile-page {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dash-profile-plan-card {
    width: 100%;
    margin-left: 0;
  }
}

/* ============================================================
   Landing typography — faithful to chatplace.io
   Body copy: Roboto (bundled, open-source, Apache-2.0).
   Headings/wordmark: PragmaticaExtended (loaded from ChatPlace
   CDN per project owner's decision). Scoped to .home-page so no
   other page/architecture is affected.
   ============================================================ */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("./assets/fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("./assets/fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 900; font-display: swap; src: url("./assets/fonts/roboto-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "PragmaticaExtended"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://chatplace.io/_nuxt/PragmaticaExtended-Bold.Dg2r67bo.ttf") format("truetype"); }
@font-face { font-family: "PragmaticaExtended"; font-style: normal; font-weight: 800; font-display: swap; src: url("https://chatplace.io/_nuxt/PragmaticaExtended-Black.BV1DCDgh.ttf") format("truetype"); }

.home-page {
  font-family: "Roboto", Arial, Helvetica, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.home-page button,
.home-page input,
.home-page select,
.home-page textarea {
  font-family: inherit;
}

.home-page .brand,
.home-page .footer-logo,
.home-page .hero-copy h1,
.home-page .discover-section h2,
.home-page .community-section h2,
.home-page .features-section h2,
.home-page .results-section h2,
.home-page .articles-section h2,
.home-page .faq-section h2,
.home-page .white-copy h2,
.home-page .black-cta,
.home-page .auth-mark {
  font-family: "PragmaticaExtended", "Arial Black", Impact, sans-serif;
  font-style: normal;
}

/* ChatPlace wordmark & footer logo are upright (no skew) in the original */
.home-page .brand,
.home-page .footer-logo {
  transform: none;
}

/* ============================================================
   Landing hero + nav geometry — matched to chatplace.io (measured @1280)
   ============================================================ */
@media (min-width: 1101px) {
  .home-page .hero-copy h1 {
    font-size: clamp(62px, 5.47vw, 70px);
    line-height: 1;
  }
}

.home-page .hero-copy p {
  color: rgba(13, 13, 13, 0.8);
  line-height: 1.3;
}

.home-page .main-nav button,
.home-page .lang-trigger {
  font-size: 16px;
}

.home-page .hero-copy .lime-cta {
  background: #beff53;
  font-family: "PragmaticaExtended", "Arial Black", Impact, sans-serif;
  font-weight: 600;
  font-size: 18px;
}

/* ============================================================
   Sprint 4A.1 — User dashboard sidebar polish (CSS only)
   Scoped to .user-dashboard-app. No HTML/JS changes.
   ============================================================ */
.user-dashboard-app .dash-sidebar {
  gap: 20px;
  padding: 20px 10px 16px;
}

.user-dashboard-app .dash-side-nav {
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #d3d8e6 transparent;
}
.user-dashboard-app .dash-side-nav::-webkit-scrollbar {
  display: block;
  width: 6px;
}
.user-dashboard-app .dash-side-nav::-webkit-scrollbar-thumb {
  background: #d3d8e6;
  border-radius: 999px;
}
.user-dashboard-app .dash-side-nav::-webkit-scrollbar-track {
  background: transparent;
}

.user-dashboard-app .dash-side-nav button {
  border-radius: 12px;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

/* Premium hover */
.user-dashboard-app .dash-side-nav button:hover {
  background: #eef3ff;
  color: var(--dash-blue);
  transform: none;
}

/* Subtle press feedback */
.user-dashboard-app .dash-side-nav button:active {
  transform: scale(0.92);
}

/* Clear, on-brand selected state (blue, not black outline) */
.user-dashboard-app .dash-side-nav button.active {
  background: #e7f0ff;
  border-color: rgba(31, 92, 255, 0.32);
  color: var(--dash-blue);
  box-shadow: inset 0 0 0 1px rgba(31, 92, 255, 0.12);
}

/* Keyboard focus ring (in addition to the tooltip that already shows on focus) */
.user-dashboard-app .dash-side-nav button:focus-visible,
.user-dashboard-app .dash-logo:focus-visible,
.user-dashboard-app .dash-avatar:focus-visible {
  outline: 3px solid rgba(31, 92, 255, 0.42);
  outline-offset: 2px;
}

/* Workspace + profile squares: gentle premium hover */
.user-dashboard-app .dash-logo,
.user-dashboard-app .dash-avatar {
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.user-dashboard-app .dash-workspace-switcher .dash-logo:hover,
.user-dashboard-app .dash-profile .dash-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31, 92, 255, 0.28);
}
.user-dashboard-app .dash-logo:active,
.user-dashboard-app .dash-avatar:active {
  transform: scale(0.94);
}

/* Tooltip refinement (softer, shadow) */
.user-dashboard-app .dash-side-nav button::after,
.user-dashboard-app .dash-logo::after,
.user-dashboard-app .dash-avatar::after {
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(10, 10, 15, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .user-dashboard-app .dash-side-nav button,
  .user-dashboard-app .dash-logo,
  .user-dashboard-app .dash-avatar {
    transition: none;
  }
  .user-dashboard-app .dash-side-nav button:active,
  .user-dashboard-app .dash-logo:active,
  .user-dashboard-app .dash-avatar:active,
  .user-dashboard-app .dash-workspace-switcher .dash-logo:hover,
  .user-dashboard-app .dash-profile .dash-avatar:hover {
    transform: none;
  }
}

/* ============================================================
   Sprint 4A.3 — User dashboard cards polish (CSS only)
   ============================================================ */
.user-dashboard-app .dash-course-card {
  transition: transform 0.18s ease;
}
.user-dashboard-app .dash-course-card:hover {
  transform: translateY(-3px);
}
.user-dashboard-app .dash-course-cover {
  transition: box-shadow 0.2s ease;
  box-shadow: 0 10px 30px -16px rgba(20, 24, 38, 0.5);
}
.user-dashboard-app .dash-course-card:hover .dash-course-cover {
  box-shadow: 0 22px 46px -18px rgba(20, 24, 38, 0.62);
}

/* Quick-start checklist: subtle row affordance without touching the divider layout */
.user-dashboard-app .dash-start-dot {
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.user-dashboard-app .dash-start-list article:not(.complete):hover .dash-start-dot {
  border-color: var(--dash-blue);
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .user-dashboard-app .dash-course-card,
  .user-dashboard-app .dash-course-cover,
  .user-dashboard-app .dash-start-dot {
    transition: none;
  }
  .user-dashboard-app .dash-course-card:hover,
  .user-dashboard-app .dash-start-list article:not(.complete):hover .dash-start-dot {
    transform: none;
  }
}