.footer-socials a {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .footer-socials img {
      width: 24px;
      height: 24px;
      display: block;
    }

    .footer-columns {
      display: grid;
      grid-template-columns: repeat(5, minmax(82px, 1fr));
      column-gap: 44px;
    }

    .footer-column h3,
    .footer-follow h3,
    .footer-partner-label {
      margin: 0;
      color: #222222;
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
    }

    .footer-column a {
      display: block;
      margin-top: 16px;
      color: #555555;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      white-space: nowrap;
    }

    .footer-follow h3 {
      font-weight: 500;
    }

    .footer-qr-grid {
      display: flex;
      gap: 12px;
      margin-top: 22px;
    }

    .footer-qr-card {
      width: 88px;
      padding: 6px;
      border: 1px solid #e3e9f1;
      border-radius: 8px;
      background: #ffffff;
      text-align: center;
      box-sizing: border-box;
    }

    .footer-qr-card img {
      display: block;
      width: 74px;
      height: 74px;
      margin: 0 auto 4px;
      object-fit: contain;
    }

    .footer-qr-title {
      margin: 0;
      color: #222222;
      font-size: 11px;
      line-height: 15px;
      font-weight: 600;
      white-space: nowrap;
    }

    .footer-qr-desc {
      margin: 0;
      color: #777777;
      font-size: 11px;
      line-height: 15px;
      font-weight: 400;
      white-space: nowrap;
    }

    .footer-subscribe-block {
      margin-top: 38px;
    }

    .footer-subscribe-title {
      margin: 0;
      color: #1b1c1e;
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
    }

    .footer-subscribe-desc {
      margin: 2px 0 0;
      color: #666666;
      font-size: 12px;
      line-height: 17px;
      font-weight: 400;
    }

    .footer-subscribe {
      display: flex;
      width: 220px;
      height: 36px;
      margin-top: 14px;
      padding: 4px;
      border: 1px solid #e3e9f1;
      border-radius: 22px;
      background: #f7f8fb;
    }

    .footer-subscribe input {
      min-width: 0;
      flex: 1;
      border: 0;
      outline: 0;
      padding: 0 12px;
      background: transparent;
      color: #222222;
      font: inherit;
      font-size: 12px;
      line-height: 18px;
    }

    .footer-subscribe input::placeholder {
      color: #999999;
    }

    .footer-subscribe button {
      width: 56px;
      height: 28px;
      border-radius: 18px;
      color: #ffffff;
      background: linear-gradient(237deg, #d730ff 0%, #ff3494 29%, #ff3856 60%, #ff6956 81%, #ff7a00 100%);
      font-size: 12px;
      line-height: 17px;
      font-weight: 500;
    }

    .footer-bottom {
      margin-top: 40px;
      padding-top: 16px;
      border-top: 1px solid #e9edf5;
      display: grid;
      grid-template-columns: 360px 1fr 360px;
      align-items: center;
      gap: 24px;
      color: #999999;
      font-size: 12px;
      line-height: 14px;
      font-weight: 400;
    }

    .footer-trust {
      justify-self: start;
      color: #666666;
      font-size: 14px;
      line-height: 14px;
      font-weight: 600;
      white-space: nowrap;
    }

    .footer-trust-rest {
      font-weight: 400;
    }

    .footer-copyright {
      justify-self: center;
      white-space: nowrap;
    }

    .footer-bottom-links {
      display: flex;
      gap: 16px;
      justify-self: end;
      white-space: nowrap;
    }

    .register-link,
    .btn,
    .co-build-cta,
    .co-build-guide-button,
    .partners-all,
    .partners-nav,
    .footer-subscribe button,
    .course-card,
    .step-card,
    .starter-guide,
    .activity-card,
    .learning-cert-card,
    .contribution-card,
    .doc-mini-card,
    .co-build-card,
    .partners-card,
    .footer-socials a {
      transition:
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms ease,
        background 180ms ease,
        background-color 180ms ease,
        box-shadow 300ms ease,
        color 180ms ease,
        filter 180ms ease,
        opacity 180ms ease;
    }

    .step-card {
      transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 240ms ease,
        background 220ms ease,
        background-color 220ms ease,
        box-shadow 360ms ease,
        color 220ms ease,
        filter 220ms ease,
        opacity 220ms ease;
    }

    .step-card:is(:hover,:focus-visible),
    .contribution-card:hover {
      transform: none;
      box-shadow: var(--card-hover-shadow);
    }

    .step-card:is(:hover,:focus-visible) {
      border-color: var(--card-hover-border);
    }

    .co-build-card:hover {
      transform: none;
      border-color: transparent;
      box-shadow: none;
    }

    .co-build-card:hover::before {
      opacity: 1;
      box-shadow:
        -8px 1px 16px 1px rgba(255, 118, 42, 0.24),
        -3px 6px 18px 1px rgba(255, 72, 112, 0.18),
        5px 3px 18px 2px rgba(239, 55, 194, 0.16),
        8px -2px 20px 2px rgba(137, 76, 255, 0.22) !important;
    }

    .starter-guide:hover,
    .doc-mini-card:hover,
    .partners-card:hover {
      transform: none;
      border-color: var(--card-hover-border);
      background: #ffffff;
      box-shadow: var(--card-hover-shadow);
    }

    .starter-guide:hover {
      box-shadow: var(--card-hover-shadow);
    }

    .activity-card:hover {
      transform: none;
      border-color: #e3e9f1;
      box-shadow: none;
    }

    .register-link:hover,
    .btn:hover,
    .co-build-cta:hover,
    .co-build-guide-button:hover,
    .partners-all:hover,
    .footer-subscribe button:hover {
      transform: none;
      box-shadow: none;
    }

    .footer-socials a:hover,
    .topbar-search:hover {
      opacity: 0.72;
    }

    .btn:active,
    .register-link:active,
    .co-build-cta:active,
    .co-build-guide-button:active,
    .partners-all:active,
    .partners-nav:active,
    .footer-subscribe button:active {
      transform: translateY(0);
      box-shadow: none;
    }

    .course-link,
    .step-card > .step-cta,
    .starter-guide > .starter-guide-cta,
    .activity-more,
    .news-more,
    .learning-more,
    .learning-resource-more,
    .learning-cert-more,
    .footer-column a,
    .footer-bottom-links a {
      transition: color 160ms ease, opacity 160ms ease;
    }

    .course-card,
    .step-card,
    .starter-guide,
    .activity-card,
    .learning-resource,
    .learning-cert-card,
    .contribution-card,
    .doc-mini-card,
    .co-build-card,
    .partners-card {
      cursor: pointer;
    }

    .community-news,
    .activity-banner,
    .learning-courses,
    .learning-featured,
    .co-build-guide {
      cursor: default;
    }

    .community-news:hover,
    .activity-banner:hover,
    .learning-courses:hover,
    .learning-featured:hover,
    .contribution-card:hover,
    .co-build-guide:hover {
      transform: none;
      box-shadow: none;
    }

    .community-news:hover,
    .activity-banner:hover,
    .learning-courses:hover,
    .learning-featured:hover {
      border-color: #e3e9f1;
    }

    .course-link:hover,
    .step-card > .step-cta:hover,
    .starter-guide > .starter-guide-cta:hover,
    .activity-more:hover,
    .news-more:hover,
    .learning-more:hover,
    .learning-resource-more:hover,
    .learning-cert-more:hover,
    .footer-column a:hover,
    .footer-bottom-links a:hover {
      color: var(--interaction-blue);
      opacity: 1;
    }

    .register-link:hover,
    .footer-subscribe button:hover {
      filter: brightness(0.92) saturate(1.08);
    }

    .btn-primary:hover,
    .co-build-guide-button:hover {
      background: var(--btn-dark-hover);
    }

    .contribution-button:hover {
      color: var(--interaction-blue);
    }

    .btn-secondary,
    .activity-banner-link,
    .learning-cert-card a {
      --outline-fill: #262629;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: #ffffff;
      transition:
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 300ms ease;
    }

    .btn-secondary::before,
    .activity-banner-link::before,
    .learning-cert-card a::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background: var(--outline-fill);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .btn-secondary:hover,
    .activity-banner-link:hover,
    .learning-cert-card a:hover {
      border-color: var(--outline-fill);
      color: #ffffff;
    }

    .btn-secondary:hover::before,
    .activity-banner-link:hover::before,
    .learning-cert-card a:hover::before {
      transform: scaleX(1);
    }

    .partners-all:hover {
      border-color: #262629;
      color: #ffffff;
    }

    .partners-all:hover::before {
      transform: scaleX(1);
    }

    .partners-nav:hover {
      box-shadow: none;
    }

    .learning-resource-thumb,
    .doc-mini-icon,
    .partners-logo-box,
    .detail-arrow,
    .course-link-icon,
    .co-build-cta img,
    .partners-card-link img,
    .btn-arrow img {
      transition: transform 180ms ease, background-color 180ms ease;
    }

    a:hover .detail-arrow,
    .btn:hover .btn-arrow img {
      transform: translateX(2px);
    }

    .course-card:hover .course-link-icon,
    .starter-guide:hover > a .detail-arrow,
    .learning-resource:hover .detail-arrow,
    .doc-mini-card:hover .detail-arrow,
    .partners-card:hover .partners-card-link img {
      animation: arrowSlideOnce 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .co-build-cta:hover img {
      animation: arrowSlideOnce 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    :focus-visible {
      outline: 2px solid rgba(96, 115, 240, 0.56);
      outline-offset: 3px;
    }

    @keyframes arrowSlideOnce {
      0% {
        transform: translateX(0);
      }
      45% {
        transform: translateX(4px);
      }
      100% {
        transform: translateX(0);
      }
    }

    .has-interactions .revealable {
      opacity: 0;
      transform: translate3d(0, 48px, 0);
      transition:
        opacity 820ms ease,
        transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: var(--reveal-delay, 0ms);
    }

    .has-interactions .revealable.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

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

      .has-interactions .revealable {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes courseIconSpark {
      0% {
        opacity: 0.9;
        transform: rotate(45deg) scale(1) translateY(0);
      }

      35% {
        opacity: 1;
        transform: rotate(63deg) scale(1.14) translateY(-1px);
      }

      68% {
        opacity: 0.96;
        transform: rotate(39deg) scale(0.96) translateY(0);
      }

      100% {
        opacity: 1;
        transform: rotate(45deg) scale(1) translateY(0);
      }
    }

    @keyframes courseIconFloat {
      0%,
    100% {
        transform: translateY(0);
      }

      45% {
        transform: translateY(-3px);
      }
    }

    @keyframes courseIconWaveShake {
      0%,
    100% {
        transform: translateX(0) translateY(0);
      }

      28% {
        transform: translateX(1.5px) translateY(-0.5px);
      }

      56% {
        transform: translateX(-1px) translateY(0.5px);
      }

      78% {
        transform: translateX(0.5px) translateY(0);
      }
    }

    @keyframes courseIconSpin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(180deg);
      }
    }

    @media (max-width: 1280px) {
      .nav-links {
        gap: 48px;
      }

      .hero-stage,
    .course-grid,
    .onboarding,
    .activity-stage {
        width: calc(100% - 56px);
      }

      .activity-layout {
        grid-template-columns: minmax(0, 1fr) 336px;
      }

      .activity-card,
    .community-news {
        width: 100%;
      }

      .activity-card {
        grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
      }

      .activity-cover {
        width: 100%;
      }

      .activity-card-body {
        width: auto;
      }

      .steps {
        grid-template-columns: 205px repeat(5, minmax(0, 1fr));
      }

    }

    @media (max-width: 980px) {
      .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        flex-wrap: wrap;
        gap: 14px;
        width: auto;
        margin: 0;
        padding: 12px 16px;
      }

      .brand,
    .topbar-actions {
        min-width: auto;
      }

      .topbar-actions {
        gap: 16px;
      }

      .topbar-search {
        min-width: 72px;
        height: 32px;
        padding: 0 10px;
      }

      .search-panel {
        inset: 0;
        padding: 112px 16px 20px;
      }

      .search-panel-card {
        width: 100%;
        min-height: 320px;
        padding: 26px 24px 28px;
        border-radius: 16px;
      }

      .search-panel-query {
        font-size: 22px;
      }

      .search-panel-content {
        padding-left: 4px;
      }

      .nav-links {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        gap: 24px;
        overflow-x: auto;
        padding: 2px 2px 4px;
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .hero-stage {
        width: calc(100% - 32px);
        height: auto;
      }

      .hero-grid {
        height: auto;
        min-height: 468px;
        padding-top: 28px;
      }

      .hero-copy {
        max-width: 640px;
        width: auto;
      }

      .hero-stage::after {
        display: none;
      }

      .hero-bg-canvas {
        height: 765px;
      }

      .course-grid {
        width: calc(100% - 32px);
        grid-template-columns: repeat(2, 1fr);
      }

      .onboarding {
        width: calc(100% - 32px);
      }

      .onboarding-heading {
        display: block;
      }

      .onboarding-heading p {
        margin-top: 10px;
      }

      .steps {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
        gap: 1px;
        overflow: hidden;
        background: #e9eaee;
      }

      .steps::after {
        display: none;
      }

      .step-card,
    .step-card:nth-child(2),
    .step-card:nth-child(3),
    .step-card:nth-child(4),
    .step-card:nth-child(5),
    .step-card:nth-child(6) {
        height: 270px;
        border: 0;
        border-radius: 0;
      }

      .starter-guides {
        grid-template-columns: 1fr;
      }

      .activity-stage {
        width: calc(100% - 32px);
      }

      .activity-heading,
    .activity-heading-copy {
        align-items: flex-start;
      }

      .activity-heading-copy {
        flex-direction: column;
        gap: 6px;
      }

      .activity-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .learning-stage {
        width: calc(100% - 32px);
      }

      .learning-heading {
        display: block;
      }

      .learning-heading p {
        margin-top: 10px;
        white-space: normal;
      }

      .learning-layout {
        grid-template-columns: 1fr;
      }

      .learning-courses,
    .learning-featured {
        width: 100%;
        height: auto;
      }

      .learning-cert {
        height: auto;
      }

      .learning-cert-list {
        grid-template-columns: 1fr;
      }

      .activity-card,
    .community-news {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .footer-stage {
        width: calc(100% - 56px);
      }

      .footer-main {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .footer-columns {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
        row-gap: 28px;
      }

      .footer-subscribe {
        width: min(360px, 100%);
      }

      .footer-bottom {
        grid-template-columns: 1fr;
        align-items: flex-start;
      }

      .footer-trust,
    .footer-copyright,
    .footer-bottom-links {
        justify-self: start;
      }

      .footer-trust,
    .footer-copyright {
        white-space: normal;
      }

      .activity-card {
        height: auto;
        min-height: 0;
        grid-template-columns: minmax(260px, 392px) minmax(0, 1fr);
      }

      .activity-cover {
        width: 100%;
      }

      .activity-card-body {
        width: auto;
        height: auto;
      }

      .course-card:nth-child(3) {
        border-left-color: transparent;
      }

      .course-card + .course-card::before {
        height: calc(100% - 40px);
      }
    }