.index_page {
  --index_content_width: 1284px;
  --index_purple: #6f47f5;
  --index_black: #000;
  --index_text: #333;
  --index_muted: #666;
  --index_border: #d9d9db;
  --index_soft_border: #e5e6eb;

  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background: #fff;
  color: var(--index_text);
  font-family: "PingFang SC", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
}

.index_header {
  position: sticky;
  z-index: 20;
  top: 10px;
  left: 0;
  width: 100%;
  height: 64px;
  margin-top: 48px;
  margin-bottom: -112px;
  pointer-events: none;

  .index_header_inner {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    align-items: start;
    width: calc(100% - 88px);
    height: 64px;
    margin: 0 auto;
    pointer-events: auto;
  }

  .index_header_brand {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 150px;
    height: 64px;
    padding: 7px 12px 7px 11px;
    text-decoration: none;
  }

  .index_header_brand_logo {
    display: block;
    width: 127px;
    height: 50px;
    object-fit: contain;
  }

  .index_header_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    box-sizing: border-box;
    width: 357px;
    height: 64px;
    padding: 10px;
    gap: 20px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12px);
  }

  .index_header_nav_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 99px;
    height: 44px;
    padding: 15px 33px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--index_text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }

  .index_header_nav_btn:hover,
  .index_header_nav_btn:focus-visible,
  .index_header_nav_btn_active {
    background: #fbf0ff;
    color: var(--index_purple);
    outline: none;
  }

  .index_header_login {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    box-sizing: border-box;
    width: 99px;
    height: 44px;
    margin-top: 10px;
    padding: 12px 21px;
    border: 0;
    border-radius: 100px;
    background: #333;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .index_header_login:hover,
  .index_header_login:focus-visible {
    background: #000;
    outline: none;
  }

  .index_header_login_text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  .index_header_login_icon {
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    object-fit: contain;
  }

  .index_header_dropdown {
    position: absolute;
    top: 64px;
    left: 50%;
    width: 208px;
    transform: translateX(-25%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .index_header_dropdown_features {
    margin-left: -129px;
  }

  .index_header_dropdown_products {
    margin-left: -10px;
  }

  .index_header_dropdown_support {
    margin-left: 109px;
  }

  .index_header_dropdown_open {
    opacity: 1;
    pointer-events: auto;
  }

  .index_header_dropdown_inner {
    box-sizing: border-box;
    width: 208px;
    padding: 10px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(16px);
    pointer-events: auto;
  }

  .index_header_menu_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .index_header_menu_item {
    margin: 0;
    padding: 0;
  }

  .index_header_menu_btn {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 5px 20px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--index_text);
    font-size: 14px;
    font-weight: 400;
    line-height: 29px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .index_header_menu_btn:hover,
  .index_header_menu_btn:focus-visible {
    background: #fbf0ff;
    color: var(--index_purple);
    font-weight: 500;
    outline: none;
  }

  .index_header_support_panel {
    position: relative;
  }

  .index_header_support_qr_card {
    position: absolute;
    top: 0;
    left: calc(100% + 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 130px;
    height: 130px;
    padding: 7px;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .index_header_support_qr_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .index_header_support_qr_placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: #f4f4f6;
    color: #999;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
  }
}

.index_hero {
  position: relative;
  min-height: 956px;
  overflow: hidden;
  background: #f7f7f9;

  .index_hero_media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .index_hero_img {
    position: absolute;
    top: -14px;
    left: 10.63%;
    width: 94.17%;
    height: 105.5%;
    object-fit: cover;
    opacity: 0.35;
  }

  .index_hero_fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f7f7f9 35.096%, rgba(247, 247, 249, 0) 100%);
  }

  .index_hero_container {
    box-sizing: border-box;
    width: min(100% - 40px, var(--index_content_width));
    margin: 0 auto;
  }

  .index_hero_content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 956px;
    padding-top: 1px;
    gap: 30px;
  }

  .index_hero_copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
  }

  .index_hero_title {
    margin: 0;
    color: #000;
    font-size: 64px;
    font-weight: 500;
    line-height: normal;
  }

  .index_hero_subtitle {
    display: flex;
    flex-direction: column;
    color: #000;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
  }

  .index_hero_subtitle_line,
  .index_hero_desc {
    margin: 0;
  }

  .index_hero_desc {
    display: flex;
    flex-direction: column;
    width: 827px;
    max-width: 100%;
    color: var(--index_muted);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .index_hero_actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .index_hero_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 99px;
    border-radius: 100px;
    font-size: 35px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }

  .index_hero_btn_primary {
    width: 234px;
    padding: 30px 46px;
    border: 0;
    background: var(--index_purple);
    color: #fff;
  }

  .index_hero_btn_secondary {
    width: 277px;
    gap: 10px;
    padding: 30px 46px;
    border: 1px solid var(--index_border);
    background: #fff;
    color: var(--index_text);
  }

  .index_hero_btn_icon {
    display: block;
    width: 35px;
    height: 27px;
    object-fit: contain;
  }
}

.index_products {
  padding: 144px 0;
  background: #fff;

  .index_products_container {
    box-sizing: border-box;
    width: min(100% - 40px, var(--index_content_width));
    margin: 0 auto;
  }

  .index_products_heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    word-break: break-word;
  }

  .index_products_heading_eyebrow,
  .index_products_heading_title {
    margin: 0;
  }

  .index_products_heading_eyebrow {
    width: 816px;
    max-width: 100%;
    color: var(--index_purple);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .index_products_heading_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #000;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
  }

  .index_products_heading_title_line {
    display: block;
  }

  .index_products_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
  }

  .index_products_card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 353px;
    padding: 30px;
    gap: 30px;
    border: 1px solid var(--index_border);
    border-radius: 26px;
    background: #fff;
    box-shadow: -15px 50px 40px rgba(0, 0, 0, 0.05);
  }

  .index_products_card_icon_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: var(--index_products_card_icon_bg);
  }

  .index_products_card_icon {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .index_products_card_copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 141px;
  }

  .index_products_card_eyebrow,
  .index_products_card_title,
  .index_products_card_desc {
    margin: 0;
  }

  .index_products_card_eyebrow {
    color: var(--index_products_card_accent);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
  }

  .index_products_card_title {
    color: #000;
    font-size: 25px;
    font-weight: 500;
    line-height: normal;
  }

  .index_products_card_desc {
    color: var(--index_muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
  }

  .index_products_card_action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .index_products_card_action_text {
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
  }

  .index_products_card_action_icon {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
}

.index_popiart {
  padding: 224px 0;
  background: linear-gradient(180deg, #fbf0ff 0%, #fff 24.038%, #fff 75.962%, #fbf0ff 100%);

  .index_popiart_container {
    box-sizing: border-box;
    width: min(100% - 40px, var(--index_content_width));
    margin: 0 auto;
  }

  .index_popiart_top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
  }

  .index_popiart_heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    word-break: break-word;
  }

  .index_popiart_heading_eyebrow,
  .index_popiart_heading_title,
  .index_popiart_heading_desc_line {
    margin: 0;
  }

  .index_popiart_heading_eyebrow {
    width: 816px;
    max-width: 100%;
    color: var(--index_purple);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .index_popiart_heading_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #000;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
  }

  .index_popiart_heading_title_line {
    display: block;
  }

  .index_popiart_heading_desc {
    display: flex;
    flex-direction: column;
    width: 841px;
    max-width: 100%;
    color: var(--index_muted);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .index_popiart_chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
  }

  .index_popiart_chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 41px;
    padding: 10px 20px;
    border: 1px solid var(--index_purple);
    border-radius: 100px;
    background: #fff;
    color: var(--index_purple);
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }

  .index_popiart_workspace_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 26px;
    box-shadow: 0 2px 50px 0 rgba(111, 71, 245, 0.15);
  }

  .index_popiart_assets {
    margin-top: 198px;
  }

  .index_popiart_assets_heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    word-break: break-word;
    text-align: center;
  }

  .index_popiart_assets_heading_eyebrow,
  .index_popiart_assets_heading_title,
  .index_popiart_assets_heading_desc_line {
    margin: 0;
  }

  .index_popiart_assets_heading_eyebrow {
    width: 816px;
    max-width: 100%;
    color: var(--index_purple);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
  }

  .index_popiart_assets_heading_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #000;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
  }

  .index_popiart_assets_heading_title_line {
    display: block;
  }

  .index_popiart_assets_heading_desc {
    display: flex;
    flex-direction: column;
    width: 816px;
    max-width: 100%;
    color: var(--index_muted);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .index_popiart_assets_visual {
    position: relative;
    width: 100%;
    margin-top: 20px;
  }

  .index_popiart_assets_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.index_product_detail {
  padding: 224px 0;
  background: linear-gradient(180deg, #fff 0%, #fbf0ff 50%, #fff 100%);

  .index_product_detail_container {
    display: flex;
    flex-direction: column;
    gap: 198px;
    box-sizing: border-box;
    width: min(100% - 40px, var(--index_content_width));
    margin: 0 auto;
  }

  .index_product_detail_tv {
    display: grid;
    grid-template-columns: 452px minmax(0, 792px);
    align-items: center;
    gap: 40px;
    min-height: 493px;
  }

  .index_product_detail_mcn {
    display: grid;
    grid-template-columns: minmax(0, 792px) 452px;
    align-items: center;
    gap: 40px;
    min-height: 493px;
  }

  .index_product_detail_tv_copy,
  .index_product_detail_mcn_copy {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .index_product_detail_tv_heading,
  .index_product_detail_mcn_heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    word-break: break-word;
  }

  .index_product_detail_tv_heading_eyebrow,
  .index_product_detail_tv_heading_title,
  .index_product_detail_tv_heading_desc_line,
  .index_product_detail_mcn_heading_eyebrow,
  .index_product_detail_mcn_heading_title,
  .index_product_detail_mcn_heading_desc_line {
    margin: 0;
  }

  .index_product_detail_tv_heading_eyebrow,
  .index_product_detail_mcn_heading_eyebrow {
    width: 452px;
    max-width: 100%;
    color: var(--index_purple);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .index_product_detail_tv_heading_title,
  .index_product_detail_mcn_heading_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #000;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
  }

  .index_product_detail_tv_heading_title_line,
  .index_product_detail_mcn_heading_title_line {
    display: block;
  }

  .index_product_detail_tv_heading_desc,
  .index_product_detail_mcn_heading_desc {
    display: flex;
    flex-direction: column;
    width: 452px;
    max-width: 100%;
    color: var(--index_muted);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .index_product_detail_tv_bullets,
  .index_product_detail_mcn_bullets {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .index_product_detail_tv_bullet,
  .index_product_detail_mcn_bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 22px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
  }

  .index_product_detail_tv_check,
  .index_product_detail_mcn_check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 2px solid var(--index_purple);
    border-radius: 24px;
    background: #fff;
  }

  .index_product_detail_tv_check img,
  .index_product_detail_mcn_check img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: cover;
  }

  .index_product_detail_tv_img {
    display: block;
    width: 792px;
    height: 493px;
    object-fit: cover;
    border-radius: 26px;
    box-shadow: 0 2px 50px 0 rgba(111, 71, 245, 0.15);
  }

  .index_product_detail_mcn_img {
    display: block;
    width: 792px;
    height: 439px;
    border-radius: 26px;
    box-shadow: 0 2px 50px 0 rgba(111, 71, 245, 0.15);
  }
}

.index_workflow {
  padding: 144px 0;
  background: linear-gradient(180deg, #7b61d4 0%, #553da3 37.019%, #412f80 83.173%);

  .index_workflow_container {
    box-sizing: border-box;
    width: min(100% - 40px, var(--index_content_width));
    margin: 0 auto;
  }

  .index_workflow_heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    word-break: break-word;
    text-align: center;
  }

  .index_workflow_heading_eyebrow,
  .index_workflow_heading_title {
    margin: 0;
  }

  .index_workflow_heading_eyebrow {
    width: 816px;
    max-width: 100%;
    color: #f2def9;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
  }

  .index_workflow_heading_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #fff;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
  }

  .index_workflow_heading_title_line {
    display: block;
  }

  .index_workflow_steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 40px;
    padding: 0 12px;
  }

  .index_workflow_track {
    position: absolute;
    top: 53px;
    left: 146px;
    right: 67px;
    height: 4px;
    border-radius: 100px;
    background: linear-gradient(90deg, #7753f6 0%, #1acfd1 25%, #6ec691 50.96%, #fe914e 73.56%, #fa5ca7 100%);
  }

  .index_workflow_step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 267px;
    padding: 30px;
    gap: 40px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: -15px 50px 80px rgba(0, 0, 0, 0.05);
  }

  .index_workflow_step_num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background: #fff;
    color: #000;
    font-size: 25px;
    font-weight: 500;
    line-height: 25px;
  }

  .index_workflow_step_copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 184px;
    max-width: 100%;
  }

  .index_workflow_step_title,
  .index_workflow_step_desc {
    margin: 0;
  }

  .index_workflow_step_title {
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    line-height: normal;
  }

  .index_workflow_step_desc {
    color: #cdcdcd;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
  }
}

.index_cloud {
  padding: 144px 0;
  background: #fff;

  .index_cloud_container {
    box-sizing: border-box;
    width: min(100% - 40px, 1212px);
    margin: 0 auto;
  }

  .index_cloud_intro {
    display: grid;
    grid-template-columns: 524px minmax(0, 648px);
    align-items: start;
    gap: 40px;
  }

  .index_cloud_heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    word-break: break-word;
  }

  .index_cloud_heading_eyebrow,
  .index_cloud_heading_title,
  .index_cloud_heading_desc_line {
    margin: 0;
  }

  .index_cloud_heading_eyebrow {
    width: 524px;
    max-width: 100%;
    color: var(--index_purple);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

  .index_cloud_heading_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #000;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
  }

  .index_cloud_heading_title_line {
    display: block;
  }

  .index_cloud_heading_desc {
    display: flex;
    flex-direction: column;
    width: 524px;
    max-width: 100%;
    color: var(--index_muted);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
  }

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

  .index_cloud_card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    min-height: 237px;
    padding: 30px 30px 60px;
    border: 1px solid var(--index_soft_border);
    border-radius: 26px;
    background: #f8f8fa;
  }

  .index_cloud_card_icon {
    display: block;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    margin: 0 0 20px;
    border-radius: 100px;
    object-fit: cover;
  }

  .index_cloud_card_copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 259px;
    max-width: 100%;
  }

  .index_cloud_card_title,
  .index_cloud_card_desc {
    margin: 0;
    color: var(--index_text);
  }

  .index_cloud_card_title {
    font-size: 25px;
    font-weight: 500;
    line-height: normal;
  }

  .index_cloud_card_desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
  }
}

.index_vision {
  padding: 224px 0;
  background: #fff;

  .index_vision_container {
    box-sizing: border-box;
    width: min(100% - 40px, 1212px);
    margin: 0 auto;
  }

  .index_vision_heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    word-break: break-word;
    text-align: center;
  }

  .index_vision_heading_eyebrow,
  .index_vision_heading_title {
    margin: 0;
  }

  .index_vision_heading_eyebrow {
    width: 160px;
    max-width: 100%;
    color: var(--index_purple);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
  }

  .index_vision_heading_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #000;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
  }

  .index_vision_heading_title_line {
    display: block;
  }
}

.index_footer {
  padding: 100px 0 23px;
  min-height: 430px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #333 0%, #6f47f5 100%);

  .index_footer_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 81px;
    box-sizing: border-box;
    width: min(100% - 40px, var(--index_content_width));
    margin: 0 auto;
  }

  .index_footer_top {
    display: grid;
    grid-template-columns: 201px 740px 130px;
    align-items: start;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 200px;
  }

  .index_footer_brand {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 1px;
  }

  .index_footer_logo {
    display: block;
    width: 127px;
    height: 50px;
    object-fit: contain;
  }

  .index_footer_nav {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: 0;
    padding-top: 0;
  }

  .index_footer_group {
    position: relative;
    min-width: 72px;
  }

  .index_footer_group_support {
    min-width: 82px;
  }

  .index_footer_group_title {
    margin: 0 0 20px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
  }

  .index_footer_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .index_footer_item {
    position: relative;
    display: flex;
  }

  .index_footer_link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #cecece;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .index_footer_link:hover,
  .index_footer_link:focus-visible {
    color: #fff;
    font-weight: 500;
    outline: none;
  }

  .index_footer_support_qr_card {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(100% + 12px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 117px;
    height: 117px;
    padding: 7px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  }

  .index_footer_support_qr_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .index_footer_support_qr_placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: #f4f4f6;
    color: #999;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
  }

  .index_footer_qr_group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-self: end;
  }

  .index_footer_qr {
    display: block;
    box-sizing: border-box;
    width: 130px;
    height: 130px;
    padding: 7px;
    border-radius: 24px;
    background: #fff;
    object-fit: cover;
  }

  .index_footer_qr_text {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
  }

  .index_footer_legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    min-height: 26px;
    margin: 0;
    color: #cecece;
    font-size: 13.252px;
    font-weight: 400;
    line-height: 1.425;
    text-align: center;
  }

  .index_footer_legal_item {
    white-space: nowrap;
  }
}

@media (max-width: 1320px) {
  .index_header {
    margin-top: 24px;
    margin-bottom: -88px;

    .index_header_inner {
      width: calc(100% - 40px);
    }
  }

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

  .index_workflow {
    .index_workflow_steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .index_workflow_track {
      display: none;
    }
  }
}

@media (max-width: 1100px) {
  .index_product_detail {

    .index_product_detail_tv,
    .index_product_detail_mcn {
      grid-template-columns: 1fr;
    }

    .index_product_detail_mcn_img {
      order: 1;
    }

    .index_product_detail_mcn_copy {
      order: 2;
    }

    .index_product_detail_tv_heading_eyebrow,
    .index_product_detail_tv_heading_desc,
    .index_product_detail_mcn_heading_eyebrow,
    .index_product_detail_mcn_heading_desc {
      width: 816px;
    }
  }

  .index_cloud {
    .index_cloud_intro {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 860px) {
  .index_header {
    height: 120px;
    margin-bottom: -144px;

    .index_header_inner {
      grid-template-columns: auto auto;
      height: auto;
      row-gap: 14px;
    }

    .index_header_brand {
      width: 116px;
      height: 50px;
      padding: 6px 8px;
    }

    .index_header_brand_logo {
      width: 100px;
      height: 38px;
    }

    .index_header_nav {
      grid-column: 1 / -1;
      grid-row: 2;
      width: min(100%, 357px);
      height: 56px;
      order: 3;
    }

    .index_header_nav_btn {
      width: auto;
      min-width: 80px;
      padding: 12px 20px;
    }

    .index_header_login {
      width: 90px;
      height: 40px;
      margin-top: 5px;
    }

    .index_header_dropdown {
      top: 128px;
      width: 208px;
    }

    .index_header_dropdown_features,
    .index_header_dropdown_products,
    .index_header_dropdown_support {
      margin-left: 0;
    }

    .index_header_support_qr_card {
      position: relative;
      top: auto;
      left: auto;
      width: 130px;
      height: 130px;
      margin: 12px auto 0;
    }
  }

  .index_hero {
    min-height: 760px;

    .index_hero_content {
      min-height: 760px;
      padding-top: 110px;
    }

    .index_hero_title {
      font-size: 48px;
    }

    .index_hero_subtitle {
      font-size: 36px;
    }

    .index_hero_desc {
      font-size: 20px;
    }

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

    .index_hero_btn {
      min-height: 64px;
      font-size: 22px;
    }

    .index_hero_btn_primary,
    .index_hero_btn_secondary {
      width: auto;
      min-width: 180px;
      padding: 18px 28px;
    }
  }

  .index_products,
  .index_popiart,
  .index_product_detail,
  .index_workflow,
  .index_cloud,
  .index_vision {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .index_popiart {
    .index_popiart_assets {
      margin-top: 120px;
    }

    .index_popiart_assets_visual {
      height: auto;
    }
  }

  .index_products_heading_title,
  .index_popiart_heading_title,
  .index_popiart_assets_heading_title,
  .index_product_detail_tv_heading_title,
  .index_product_detail_mcn_heading_title,
  .index_workflow_heading_title,
  .index_cloud_heading_title,
  .index_vision_heading_title {
    font-size: 36px;
  }

  .index_products_heading_eyebrow,
  .index_products_heading_desc,
  .index_popiart_heading_eyebrow,
  .index_popiart_heading_desc,
  .index_popiart_assets_heading_eyebrow,
  .index_popiart_assets_heading_desc,
  .index_product_detail_tv_heading_eyebrow,
  .index_product_detail_tv_heading_desc,
  .index_product_detail_mcn_heading_eyebrow,
  .index_product_detail_mcn_heading_desc,
  .index_workflow_heading_eyebrow,
  .index_cloud_heading_eyebrow,
  .index_cloud_heading_desc,
  .index_vision_heading_eyebrow {
    font-size: 20px;
  }

  .index_workflow {
    .index_workflow_steps {
      grid-template-columns: 1fr;
    }

    .index_workflow_step {
      min-height: auto;
    }
  }

  .index_cloud {
    .index_cloud_cards {
      grid-template-columns: 1fr;
    }
  }

  .index_footer {
    min-height: auto;

    .index_footer_container {
      gap: 36px;
      text-align: center;
    }

    .index_footer_top {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: auto;
      gap: 36px;
    }

    .index_footer_brand {
      padding-top: 0;
    }

    .index_footer_nav {
      width: 100%;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
      justify-content: stretch;
    }

    .index_footer_group {
      min-width: 0;
    }

    .index_footer_link {
      text-align: center;
    }

    .index_footer_support_qr_card {
      position: static;
      width: 110px;
      height: 110px;
      margin: 12px auto 0;
      padding: 6px;
      transform: none;
    }

    .index_footer_qr_group {
      justify-self: auto;
    }

    .index_footer_qr {
      width: 110px;
      height: 110px;
      padding: 6px;
    }

    .index_footer_list,
    .index_footer_item {
      align-items: center;
      justify-content: center;
    }

    .index_footer_legal {
      margin-top: 0;
      gap: 10px 24px;
    }
  }
}

@media (max-width: 640px) {

  .index_hero_container,
  .index_products_container,
  .index_popiart_container,
  .index_product_detail_container,
  .index_workflow_container,
  .index_cloud_container,
  .index_vision_container,
  .index_footer_container {
    width: calc(100% - 32px);
  }

  .index_products_heading_title,
  .index_popiart_heading_title,
  .index_popiart_assets_heading_title,
  .index_product_detail_tv_heading_title,
  .index_product_detail_mcn_heading_title,
  .index_workflow_heading_title,
  .index_cloud_heading_title,
  .index_vision_heading_title {
    font-size: 30px;
  }

  .index_products_heading_eyebrow,
  .index_popiart_heading_eyebrow,
  .index_popiart_heading_desc,
  .index_popiart_assets_heading_eyebrow,
  .index_popiart_assets_heading_desc,
  .index_product_detail_tv_heading_eyebrow,
  .index_product_detail_tv_heading_desc,
  .index_product_detail_mcn_heading_eyebrow,
  .index_product_detail_mcn_heading_desc,
  .index_workflow_heading_eyebrow,
  .index_cloud_heading_eyebrow,
  .index_cloud_heading_desc,
  .index_vision_heading_eyebrow {
    font-size: 17px;
  }

  .index_hero {
    .index_hero_title {
      font-size: 40px;
    }

    .index_hero_subtitle {
      font-size: 30px;
    }

    .index_hero_desc {
      font-size: 17px;
    }
  }

  .index_products {
    .index_products_grid {
      grid-template-columns: 1fr;
    }
  }

  .index_product_detail {

    .index_product_detail_tv_img,
    .index_product_detail_mcn_img {
      width: 100%;
      height: auto;
      aspect-ratio: 792 / 493;
    }

    .index_product_detail_mcn_img {
      aspect-ratio: 792 / 439;
    }
  }
}