/* Frontend direction: palette from the Frontend Figma screen, structure from the main landing. */
html.theme-frontend {
  --bg: #040814;
  --bg-deep: #080b16;
  --surface: #101526;
  --surface-2: #171d2e;
  --text: #fbfbfb;
  --muted: #9da3b4;
  --red: #9f55ff;
  --blue: #c0f49a;
  --line: rgb(159 85 255 / 22%);
}

html.theme-frontend body {
  background: #040814;
}

html.theme-frontend .site-header {
  border-bottom-color: rgb(159 85 255 / 12%);
  background: rgb(4 8 20 / 92%);
}

html.theme-frontend .site-header.scrolled {
  background: rgb(4 8 20 / 97%);
  box-shadow: 0 14px 42px rgb(0 0 0 / 38%);
}

html.theme-frontend .button-primary {
  color: #09100b;
  background: #c0f49a;
}

html.theme-frontend .button-primary:hover {
  box-shadow: 0 14px 36px rgb(192 244 154 / 20%);
}

html.theme-frontend .free-material-button {
  color: #fbfbfb;
  background: rgb(255 255 255 / 6%);
}

html.theme-frontend .free-material-button:hover,
html.theme-frontend .free-material-button:focus-visible {
  border-color: #c0f49a;
  color: #09100b;
  background: #c0f49a;
  box-shadow: 0 14px 36px rgb(192 244 154 / 20%);
}

html.theme-frontend .hero-glow {
  background:
    linear-gradient(100deg, transparent 0 13%, rgb(4 8 20 / 67%) 13.5% 19%, transparent 19.5% 38%, rgb(4 8 20 / 62%) 38.5% 44%, transparent 44.5% 62%, rgb(4 8 20 / 57%) 62.5% 68%, transparent 68.5% 86%, rgb(4 8 20 / 67%) 86.5% 92%, transparent 92.5%),
    linear-gradient(180deg, #9f55ff 8%, rgb(159 85 255 / 62%) 46%, rgb(159 85 255 / 0%) 83%);
}

html.theme-frontend .vsl-poster-mock {
  background:
    linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px),
    radial-gradient(circle at 20% 24%, rgb(159 85 255 / 52%), transparent 38%),
    radial-gradient(circle at 82% 72%, rgb(192 244 154 / 34%), transparent 40%),
    linear-gradient(145deg, #171d2e, #080b16 62%, #040814);
  background-size: 40px 40px, 40px 40px, auto, auto, auto;
}

html.theme-frontend .hero-guarantee {
  border-color: rgb(159 85 255 / 78%);
  background:
    linear-gradient(90deg, rgb(159 85 255 / 8%), rgb(159 85 255 / 26%), rgb(159 85 255 / 8%)),
    rgb(4 8 20 / 72%);
  box-shadow: 0 18px 52px rgb(159 85 255 / 16%);
}

html.theme-frontend .hero-proof {
  border-color: rgb(159 85 255 / 22%);
  background: rgb(8 11 22 / 64%);
}

html.theme-frontend .student-avatar-more {
  color: #fbfbfb;
  background: #9f55ff;
}

html.theme-frontend .result-card {
  border-color: rgb(159 85 255 / 20%);
  background: #080b16;
}

html.theme-frontend .result-video,
html.theme-frontend .result-video:hover,
html.theme-frontend .result-video:focus-visible {
  background: #101526;
}

html.theme-frontend .result-video:hover img,
html.theme-frontend .result-video:focus-visible img {
  filter: hue-rotate(188deg) saturate(0.68) brightness(1.12);
}

html.theme-frontend .student-stories {
  background: #080b16;
}

html.theme-frontend .story-card {
  background:
    radial-gradient(circle at 10% 18%, rgb(159 85 255 / 34%), transparent 44%),
    radial-gradient(circle at 90% 88%, rgb(192 244 154 / 20%), transparent 46%),
    linear-gradient(145deg, #171d2e, #080b16 72%);
}

html.theme-frontend .story-card:nth-child(2) {
  background:
    radial-gradient(circle at 88% 16%, rgb(192 244 154 / 20%), transparent 44%),
    radial-gradient(circle at 12% 88%, rgb(159 85 255 / 32%), transparent 46%),
    linear-gradient(215deg, #171d2e, #080b16 72%);
}

html.theme-frontend .story-card:nth-child(3) {
  background:
    radial-gradient(circle at 16% 82%, rgb(192 244 154 / 19%), transparent 44%),
    radial-gradient(circle at 86% 20%, rgb(159 85 255 / 34%), transparent 46%),
    linear-gradient(155deg, #171d2e, #080b16 72%);
}

html.theme-frontend .how-it-works {
  background:
    radial-gradient(circle at 85% 10%, rgb(192 244 154 / 12%), transparent 34%),
    #040814;
}

html.theme-frontend .how-step-accent {
  border-color: rgb(159 85 255 / 58%);
  background: linear-gradient(145deg, rgb(159 85 255 / 22%), #080b16 66%);
}

html.theme-frontend .how-summary {
  border-color: rgb(159 85 255 / 52%);
  background: rgb(159 85 255 / 12%);
}

html.theme-frontend .benefits {
  background:
    radial-gradient(circle at 88% 14%, rgb(192 244 154 / 24%), transparent 30%),
    linear-gradient(145deg, #9f55ff, #6531ad 72%);
}

html.theme-frontend .frontend-learning-block {
  --bg: #040814;
  --bg-deep: #080b16;
  --surface: #101526;
  --surface-2: #171d2e;
  --text: #fbfbfb;
  --muted: #9da3b4;
  --red: #9f55ff;
  --blue: #c0f49a;
  --line: rgb(159 85 255 / 22%);
}

html.theme-frontend .frontend-learning-block .learning-route-lead {
  color: rgb(25 10 45 / 78%);
}

html.theme-frontend .frontend-learning-block .learning-route-shell {
  background:
    linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgb(159 85 255 / 24%), transparent 36%),
    #080b16;
  background-size: 42px 42px, 42px 42px, auto, auto;
}

html.theme-frontend .frontend-learning-block .learning-route-shell::before {
  border-color: rgb(159 85 255 / 15%);
  box-shadow: 0 0 0 52px rgb(159 85 255 / 4%), 0 0 0 104px rgb(159 85 255 / 3%);
}

html.theme-frontend .frontend-learning-block .learning-path-tab.is-active,
html.theme-frontend .frontend-learning-block .learning-duration,
html.theme-frontend .frontend-learning-block .learning-route-finish {
  color: #09100b;
  background: #c0f49a;
}

html.theme-frontend .frontend-learning-block .learning-path-tab.is-active {
  box-shadow: 0 8px 22px rgb(192 244 154 / 18%);
}

html.theme-frontend .frontend-learning-block .learning-duration,
html.theme-frontend .frontend-learning-block .learning-route-finish {
  border-color: rgb(192 244 154 / 54%);
  box-shadow: 0 14px 32px rgb(192 244 154 / 16%);
}

html.theme-frontend .frontend-learning-block .path-experienced .learning-stop:nth-child(2)::before {
  background: #fff;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 52%), 0 0 18px rgb(255 255 255 / 42%);
}

html.theme-frontend .frontend-learning-block .path-experienced .learning-stop:nth-child(3)::before {
  background: #c0f49a;
  box-shadow: 0 0 0 2px rgb(192 244 154 / 56%), 0 0 18px rgb(192 244 154 / 48%);
}

html.theme-frontend .frontend-learning-block .path-experienced .learning-stop:nth-child(2) .learning-phase {
  color: #fff;
}

html.theme-frontend .frontend-learning-block .path-experienced .learning-stop:nth-child(3) .learning-phase {
  color: #c0f49a;
}

html.theme-frontend .roadmap-card {
  background:
    radial-gradient(circle at 100% 0%, rgb(192 244 154 / 16%), transparent 46%),
    linear-gradient(145deg, #171d2e, #080b16 72%);
}

html.theme-frontend .roadmap-number {
  border-color: rgb(192 244 154 / 52%);
  color: #09100b;
  background: #c0f49a;
}

html.theme-frontend .roadmap-card:nth-child(-n + 3)::after,
html.theme-frontend .roadmap-card:nth-child(n + 5):nth-child(-n + 7)::after {
  color: #09100b;
  background: #c0f49a;
}

html.theme-frontend .free-material {
  background:
    radial-gradient(circle at 12% 10%, rgb(159 85 255 / 20%), transparent 34%),
    #040814;
}

html.theme-frontend .free-material-inner {
  width: min(var(--content-width), 100%);
}

html.theme-frontend .free-material-card {
  background:
    radial-gradient(circle at 100% 0%, rgb(192 244 154 / 16%), transparent 48%),
    linear-gradient(145deg, #171d2e, #080b16 72%);
}

html.theme-frontend .free-material-copy h3 span {
  background: #9f55ff;
}

html.theme-frontend #courses {
  background:
    radial-gradient(circle at 88% 12%, rgb(159 85 255 / 16%), transparent 32%),
    #080b16;
}

html.theme-frontend .courses-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.theme-frontend .courses-grid.courses-grid-single {
  grid-template-columns: minmax(0, 920px);
  justify-content: center;
}

html.theme-frontend .frontend-tariff-card {
  display: flex;
}

html.theme-frontend .courses-grid-single .frontend-tariff-card {
  display: grid;
}

html.theme-frontend .course-card {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--course-accent) 24%, transparent), transparent 42%),
    linear-gradient(155deg, #171d2e, #080b16 68%);
}

html.theme-frontend .course-includes {
  border-color: rgb(159 85 255 / 16%);
  background: rgb(4 8 20 / 76%);
}

html.theme-frontend .service-red {
  border-color: #9f55ff;
  background: linear-gradient(rgb(159 85 255 / 10%), rgb(159 85 255 / 10%)), #040814;
}

html.theme-frontend .service-blue {
  border-color: #c0f49a;
  background: linear-gradient(rgb(192 244 154 / 8%), rgb(192 244 154 / 8%)), #040814;
}

html.theme-frontend .service-white {
  background: linear-gradient(rgb(251 251 251 / 6%), rgb(251 251 251 / 6%)), #040814;
}

html.theme-frontend .offers {
  background: #080b16;
}

html.theme-frontend .offer-card {
  border-color: rgb(159 85 255 / 20%);
  background: #101526;
}

html.theme-frontend .cta-glow::before {
  background: linear-gradient(90deg, transparent, #9f55ff 25% 75%, transparent);
}

html.theme-frontend .cta-card,
html.theme-frontend .contact-dialog {
  border-color: #9f55ff;
  background: linear-gradient(180deg, #171d2e, #080b16);
}

html.theme-frontend .site-footer {
  background: #080b16;
}

@media (max-width: 720px) {
  html.theme-frontend .hero h1 {
    font-size: 36px;
  }

  html.theme-frontend .courses-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  html.theme-frontend .courses-grid-single .frontend-tariff-card {
    display: flex;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  html.theme-frontend .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.theme-frontend .course-premium.frontend-tariff-card {
    grid-column: 1 / -1;
  }
}