.logo {
  display: flex;
  align-items: center;
  gap: 9px;

  .logo-text {
    font-size: 0;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--dark);

    > span {
      font-size: calc(28 * 0.78px);
    }

    .logo-brand {
      color: var(--coral);
    }

    .logo-text-light {
      color: var(--white);
    }
  }
}

.section {
  padding: 88px 24px;
  background: transparent;
}

.section-gray {
  background: var(--gray50);
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.tag {
  display: inline-flex;
  padding: 5px 14px;
  border-radius: 100px;
  background: var(--coralMuted);
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.tag.light {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.h2-wrapper {
  text-align: left;
  margin-bottom: 48px;
}

.h2-wrapper.center {
  text-align: center;
}

.h2-title {
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--dark);
  margin: 0;
}

.h2-title.light {
  color: var(--white);
}

.h2-sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray500);
  max-width: 580px;
  margin: 14px 0 0;
}

.h2-wrapper.center .h2-sub {
  margin: 14px auto 0;
}

.h2-sub.light {
  color: rgba(255, 255, 255, 0.55);
}

.pl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 100px;
  border: none;
  background: var(--green);
  color: white;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
a.pl-btn.coral:hover {
  background: var(--coralLight);
  color: white;
}

.pl-btn.large {
  padding: 15px 34px;
  font-size: 16px;
}

.pl-btn.coral {
  background: var(--coral);
}

.pl-btn.outline {
  border: 2px solid var(--coral);
  background: transparent;
  color: var(--coral);
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--gray100);
  border-radius: 18px;
  padding: 30px 26px;
  flex: 1 1 240px;
  min-width: 230px;
  transition: box-shadow 0.3s,
  transform 0.3s;
}

.feature-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.step-card {
  flex: 1 1 220px;
  min-width: 200px;
  position: relative;
  z-index: 1;
}

.publisher-card {
  background: var(--white);
  border: 1px solid var(--gray100);
  border-radius: 18px;
  padding: 28px 24px;
  flex: 1 1 230px;
  min-width: 220px;
  max-width: 280px;
  transition: box-shadow 0.3s,
  transform 0.3s;
}

.publisher-card:hover {
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.06);
  transform: translateY(-3px);
}

.publisher-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.publisher-card-icon.pink {
  background: var(--pink);
}

.publisher-card-icon.lime {
  background: var(--lime);
}

.publisher-card-icon.blue {
  background: var(--blue);
}

.publisher-card-icon.purple {
  background: var(--purple);
}

.publisher-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 6px;
}

.publisher-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray500);
  margin: 0;
}

.cards-grid-center {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.cards-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.feature-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.feature-card-icon.pink {
  background: var(--pink);
}

.feature-card-icon.lime {
  background: var(--lime);
}

.feature-card-icon.blue {
  background: var(--blue);
}

.feature-card-icon.purple {
  background: var(--purple);
}

.feature-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 7px;
  letter-spacing: -0.02em;
}

.feature-card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray500);
  margin: 0;
}

.step-card-number {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--dark);
}

.step-card-number.pink {
  background: var(--pink);
}

.step-card-number.lime {
  background: var(--lime);
}

.step-card-number.blue {
  background: var(--blue);
}

.step-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 6px;
}

.step-card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray500);
  margin: 0;
  max-width: 280px;
}

.section-layout {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: center;
}

.section-layout-start {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.section-content {
  flex: 1 1 280px;
  min-width: 260px;
}

.section-cards {
  flex: 1 1 580px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.section-cards-wide {
  flex: 1 1 500px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.text-center {
  text-align: center;
}

.nav-link {
  color: var(--gray700);
  text-decoration: none;
  font-size: 15px;
  font-weight: 550;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--coral);
}

.ticker {
  overflow: hidden;
  margin: 6px 0;
}

.ticker-inner {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
  a {
    text-decoration: none;
  }
}

.ticker-item {
  padding: 10px 24px;
  border-radius: 10px;
  background: var(--gray50);
  border: 1px solid var(--gray100);
  color: var(--gray700);
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
}
.ticker-item:hover {
  background: var(--coralBg);
  color: var(--coralDark);
}

/* 导航栏样式 */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links {
  display: flex;
  gap: 24px;
}

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

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 24px;
  background: white;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s;
}

nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray100);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  z-index: 101;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--gray700);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 80px 24px 24px;
  transition: right 0.3s ease;
  overflow-x: hidden;
}

.mobile-nav.active {
  right: 0;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-links a {
  color: var(--gray700);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray100);
  transition: color 0.2s;
  white-space: nowrap;
}

.mobile-nav-links a:hover {
  color: var(--coral);
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  width: 100%;
}

.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-overlay.active {
  opacity: 1;
}

.mobile-nav-actions .pl-btn {
  width: 100%;
  justify-content: center;
}

.mobile-nav-actions .pl-btn.outline {
  border-color: var(--coral);
  color: var(--coral);
}

.signIn-btn {
  color: var(--gray700);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  margin-left: 8px
}

/* 英雄区样式 */

.hero {
  padding: 140px 24px 80px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.hero-text {
  flex: 1 1 480px;
  min-width: 320px;
}

.hero-illustration {
  flex: 1 1 380px;
  min-width: 300px;
  max-width: 480px;
}

.hero-illustration-box {
  background: var(--gray50);
  border-radius: 20px;
  border: 1px solid var(--gray200);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.hero-illustration-wrap {
  background: var(--dark);
  border-radius: 12px;
  padding: 20px 18px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.hero-dots-group {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.hero-dot.coral {
  background: var(--coral);
}

.hero-dot.yellow {
  background: #f5c842;
}

.hero-dot.green {
  background: var(--green);
}

.code-comment {
  color: #9ca3af;
}

.code-method {
  color: var(--coralLight);
}

.code-path {
  color: #93c5fd;
}

.code-param {
  color: #9ca3af;
}

.code-value {
  color: #6ee7b7;
}

.hero-stats-group {
  display: flex;
  gap: 10px;
}

.hero-stat-box {
  flex: 1;
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}

.hero-stat-box.pink {
  background: var(--pink);
}

.hero-stat-box.lime {
  background: var(--lime);
}

.hero-stat-box.blue {
  background: var(--blue);
}

.hero-stat-number {
  font-size: 20px;
  font-weight: 800;
}

.hero-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-stat-box.pink .hero-stat-number,
.hero-stat-box.pink .hero-stat-label {
  color: var(--coralDark);
}

.hero-stat-box.lime .hero-stat-number,
.hero-stat-box.lime .hero-stat-label {
  color: #4a5e1c;
}

.hero-stat-box.blue .hero-stat-number,
.hero-stat-box.blue .hero-stat-label {
  color: #3a4a8c;
}

.hero-bg-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
}

.hero-bg-circle.pink {
  top: 80px;
  right: -60px;
  width: 400px;
  height: 400px;
  background: var(--pink);
}

.hero-bg-circle.blue {
  bottom: -40px;
  right: 200px;
  width: 200px;
  height: 200px;
  background: var(--blue);
  opacity: 0.25;
}

.hero-bg-circle.lime {
  top: 200px;
  right: 120px;
  width: 120px;
  height: 120px;
  background: var(--lime);
}

.hero-text-one {
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--dark);
  margin: 0 0 28px;
  max-width: 560px;
}

.hero-highlight {
  color: var(--coral);
}

.hero-text-list {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: rgb(61, 69, 85);
  line-height: 1.5;
}

.hero-brand-group {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

.hero-brand-name {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  color: var(--coral);
  letter-spacing: -0.02em;
}

.hero-brand-tagline {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.hero-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-actions-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-text-hollowCircle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 2px solid rgb(232, 87, 109);
}

.hero-text-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgb(232, 87, 109);
  border: none
}

/* 价值主张栏 */

.value-props {
  background: var(--gray50);
  border-top: 1px solid var(--gray100);
  border-bottom: 1px solid var(--gray100);
  padding: 40px 24px;
}

.value-props-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.value-prop-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 220px;
}

.value-prop-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.value-prop-icon.pink {
  background: var(--pink);
}

.value-prop-icon.lime {
  background: var(--lime);
}

.value-prop-icon.blue {
  background: var(--blue);
}

.value-prop-icon.purple {
  background: var(--purple);
}

.value-prop-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray700);
  line-height: 1.4;
}

.publisher-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.publisher-card-icon.pink {
  background: var(--pink);
}

.publisher-card-icon.lime {
  background: var(--lime);
}

.publisher-card-icon.blue {
  background: var(--blue);
}

.publisher-card-icon.purple {
  background: var(--purple);
}

.publisher-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 6px;
}

.publisher-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray500);
  margin: 0;
}

.cards-grid-center {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.cards-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.feature-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.feature-card-icon.pink {
  background: var(--pink);
}

.feature-card-icon.lime {
  background: var(--lime);
}

.feature-card-icon.blue {
  background: var(--blue);
}

.feature-card-icon.purple {
  background: var(--purple);
}

.feature-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 7px;
  letter-spacing: -0.02em;
}

.feature-card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray500);
  margin: 0;
}

.step-card-number {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--dark);
}

.step-card-number.pink {
  background: var(--pink);
}

.step-card-number.lime {
  background: var(--lime);
}

.step-card-number.blue {
  background: var(--blue);
}

.step-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 6px;
}

.step-card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray500);
  margin: 0;
  max-width: 280px;
}

.section-layout {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: center;
}

.section-layout-start {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.section-content {
  flex: 1 1 280px;
  min-width: 260px;
}

.section-cards {
  flex: 1 1 580px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.section-cards-wide {
  flex: 1 1 500px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.text-center {
  text-align: center;
}

/* 品牌滚动区 */

.brand-ticker-section {
  padding: 48px 0;
  background: var(--white);
}

.brand-ticker-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  margin-bottom: 32px;
}

/* CTA区域 */

.cta {
  background: var(--dark);
  padding: 80px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-inner {
  position: relative;
  z-index: 1;
}

.cta-bg-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 87, 109, 0.08) 0%, transparent 60%);
}

.cta-title-h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--white);
  margin: 0 0 16px;
}

.cta-subtitle-one {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 480px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.pl-btn.outline.white {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}

/* 页脚样式 */

footer {
  background: var(--dark);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 56px 24px 36px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 36px;
}

.footer-col {
  max-width: 280px;
}

.footer-logo {
  font-size: calc(22 * 0.78px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
}

.footer-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.6;
  margin-top: 14px;
}

.footer-links-col h4 {
  font-size: 12px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 14px;
}

.footer-link {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  margin-bottom: 9px;
  transition: color 0.2s;
}

.footer-link:hover {
  color: white;
}

.footer-copyright {
  max-width: 1100px;
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}


/* 响应式适配 */
@media screen and (max-width: 768px) {
  .hero-inner {
    gap: 40px;
  }

  .nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 16px 0;
  }

  /* Stacked cards on mobile */
  #publisher-cards,
  #feature-cards,
  #platform-feature-cards,
  #step-cards {
    flex-direction: column !important;
  }

  .publisher-card,
  .feature-card,
  .step-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }

  /* Mobile navigation fixes */
  .desktop-nav {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
  }

  .mobile-nav {
    display: block !important;
  }

  .mobile-overlay {
    display: block !important;
  }

  /* Prevent button overflow in mobile nav */
  .mobile-nav .pl-btn {
    max-width: 100%;
    box-sizing: border-box;
  }

  .value-props-inner {
    flex-direction: column;
    gap: 16px;
  }

  .value-prop-item {
    flex: 1 1 100%;
  }

  .section-inner > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .section-inner > div[style*="display: flex"] > div:first-child,
  .section-inner > div[style*="display: flex"] > div:last-child {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }

  /* Platform feature cards specific fix - single column on mobile */
  #platform-feature-cards {
    width: 100% !important;
    flex-direction: column !important;
  }

  #platform-feature-cards .feature-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }

  .cta-title-h2 {
    font-size: clamp(24px, 5vw, 36px);
  }

  .footer-inner {
    flex-direction: column;
    gap: 32px;
  }

  .footer-col {
    max-width: 100%;
  }
}

/* signIn modal */
.formModal {
  .modal-dialog {
    max-width: 500px;
  }
  .modal-content {
    border-radius: var(--radius-card);
    border: none;
    background: var(--white);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    overflow: hidden;
  }

  .modal-header {
    border-bottom: none;
    padding: 30px 30px 10px;
    position: relative;
    display: block;
    text-align: center;
  }

  .modal-title {
    font-size: clamp(26px, 3.8vw, 32px);
    font-weight: 750;
    color: var(--dark);
    letter-spacing: -0.03em;
    line-height: 1.3;
  }

  .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray500);
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
    z-index: 9;
  }

  .modal-body {
    padding: 20px 30px 30px;
  }

  .joinNow-back-icon {
    font-size: 20px;
    margin-top: 8px;
    color: var(--gray500);
    cursor: pointer;
  }
  .joinNow-back-icon:hover {
    color: var(--gray700);
  }

  .operationButton {
    width: 100%;
    height: 54px;
    background: var(--coral);
    border-color: var(--coral);
    color: #fff;
    border-radius: var(--radius-btn);
    font-size: 16px;
    font-weight: 650;
    box-shadow: var(--shadow-btn);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .operationButton:hover {
    background: var(--coralLight);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(232, 87, 109, 0.25);
  }
  .operationButton:active {
    background: var(--coralDark);
    transform: translateY(0);
  }

  .footer-jump {
    font-size: 15px;
    color: var(--gray700);
    text-align: center;
    margin-top: 10px;
  }
  .footer-jump .sign-link {
    cursor: pointer;
    color: var(--coral);
    text-decoration: underline;
    font-weight: 550;
    transition: var(--transition);
  }
  .footer-jump .sign-link:hover {
    color: var(--coralLight);
  }

  .form-control {
    height: 54px;
    border-radius: var(--radius-input);
    border: 1px solid var(--gray200);
    background: var(--white);
    padding: 0 16px;
    font-size: 15px;
    color: var(--dark);
    transition: var(--transition);
  }
  .form-control:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px var(--coralMuted);
    background: var(--white);
    outline: none;
  }


  .pas-eye {
    position: absolute;
    right: 16px;
    top: 40%;
    transform: translateY(-50%);
    z-index: 9;
    cursor: pointer;
    color: var(--gray500);
    transition: var(--transition);
  }
  .pas-eye:hover {
    color: var(--coral);
  }

  .mail,
  .pas,
  .secpas,
  .eye,
  .eye-fill {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    filter: brightness(0) saturate(100%) invert(52%) sepia(12%) saturate(683%) hue-rotate(174deg) brightness(92%) contrast(87%);
  }

  .mail {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCI+Cgk8dGl0bGU+eW91eGlhbmctMi1zdmc8L3RpdGxlPgoJPHN0eWxlPgoJCS5zMCB7IGZpbGw6ICM4NzRmZmIgfSAKCTwvc3R5bGU+Cgk8cGF0aCBpZD0iTGF5ZXIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xhc3M9InMwIiBkPSJtNjMuNSAyNTZsNDMyLjIgMjM3IDQzMi4zLTIzNy4zYy0wLjYtNDYuMi0zOS4zLTgzLjktODYuNS04My45aC02OTEuOWMtNDcuMyAwLTg1LjcgMzcuOC04Ni4xIDg0LjJ6bTAgOTAuOGwtMC40IDQxOS42YzAgNDYuNyAzOC45IDg0LjkgODYuNSA4NC45aDY5MS45YzQ3LjYgMCA4Ni41LTM4LjIgODYuNS04NC45di00MTkuOGwtNDIyLjEgMjI2LjJjLTYuNSAzLjUtMTQuMyAzLjUtMjAuNyAweiIvPgo8L3N2Zz4=");
  }
  .pas {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCI+Cgk8dGl0bGU+YS1taW1hMy1zdmc8L3RpdGxlPgoJPHN0eWxlPgoJCS5zMCB7IGZpbGw6ICM4NzRmZmIgfSAKCTwvc3R5bGU+Cgk8cGF0aCBpZD0iTGF5ZXIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xhc3M9InMwIiBkPSJtODc0LjcgNTE3LjF2MzA5LjJjMCA2Mi01NC4xIDExMi40LTEyMC44IDExMi40aC00ODMuOGMtNjYuNyAwLTEyMC44LTUwLjQtMTIwLjgtMTEyLjR2LTMwOS4yYzAtNTkuMyA0OS40LTEwNy45IDExMi0xMTIuMXYtODAuOGMwLTEzMS45IDExNC45LTIzOC45IDI1Ni43LTIzOC45IDE0MS44IDAgMjU2LjcgMTA3IDI1Ni43IDIzOC45djgyLjJjNTYuOCA5LjIgMTAwIDU1LjMgMTAwIDExMC43em0tMzAzLjIgMTc3LjNjMjguNi0xNS4yIDQ3LjgtNDMuOCA0Ny44LTc2LjUgMC00OC43LTQyLjQtODguMi05NC43LTg4LjItNTIuMyAwLTk0LjcgMzkuNS05NC43IDg4LjIgMCAzNCAyMC43IDYzLjUgNTEgNzguMnYxMDIuNGg5MC42em0xMjEuOC0zNTUuNmMwLTkwLjMtNzguNy0xNjMuNi0xNzUuNy0xNjMuNi05Ny4xIDAtMTc1LjggNzMuMy0xNzUuOCAxNjMuNnY2NS45aDM1MS41eiIvPgo8L3N2Zz4=");
  }
  .secpas {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCI+Cgk8dGl0bGU+ZXJjaXlhbnpoZW5nLXN2ZzwvdGl0bGU+Cgk8c3R5bGU+CgkJLnMwIHsgZmlsbDogIzg3NGZmYiB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGFzcz0iczAiIGQ9Im02MzguMSA0MDkuM2MxMS43IDcuMiAyMi4xIDE2LjIgMzAuOCAyNi44IDguNyAxMC43IDE1LjUgMjIuNyAyMC4xIDM1LjYgNC42IDEzIDcgMjYuNiA3IDQwLjN2MzIwYzAgMTUuOC0zLjEgMzEuNC05LjIgNDUuOS02IDE0LjYtMTQuOCAyNy44LTI2IDM4LjktMTEuMSAxMS4yLTI0LjMgMjAtMzguOSAyNi0xNC41IDYuMS0zMC4xIDkuMi00NS45IDkuMmgtMzg0Yy0xNS44IDAtMzEuNC0zLjEtNDUuOS05LjItMTQuNi02LTI3LjgtMTQuOC0zOC45LTI2LTExLjItMTEuMS0yMC0yNC4zLTI2LTM4LjktNi4xLTE0LjUtOS4yLTMwLjEtOS4yLTQ1Ljl2LTMyMGMwLTEzLjcgMi40LTI3LjMgNy00MC4zIDQuNi0xMi45IDExLjQtMjQuOSAyMC4xLTM1LjYgOC43LTEwLjYgMTkuMS0xOS42IDMwLjgtMjYuOCAxMS44LTcuMSAyNC43LTEyLjEgMzguMS0xNC45di0xMDYuNGMwLTU3LjMgMjIuOC0xMTIuMiA2My4zLTE1Mi43IDQwLjUtNDAuNSA5NS40LTYzLjMgMTUyLjctNjMuMyA1Ny4zIDAgMTEyLjIgMjIuOCAxNTIuNyA2My4zIDQwLjUgNDAuNSA2My4zIDk1LjQgNjMuMyAxNTIuN3YxMDYuNGMxMy40IDIuOCAyNi4zIDcuOCAzOC4xIDE0Ljl6bS0yOTMuOS0yMTcuM2MtMTIuNiA1LjItMjQgMTIuOC0zMy43IDIyLjUtOS43IDkuNy0xNy4zIDIxLjEtMjIuNSAzMy43LTUuMyAxMi42LTggMjYuMS04IDM5Ljh2MTA0aDIwOHYtMTA0YzAtMTMuNy0yLjctMjcuMi04LTM5LjgtNS4yLTEyLjYtMTIuOC0yNC0yMi41LTMzLjctOS43LTkuNy0yMS4xLTE3LjMtMzMuNy0yMi41LTEyLjYtNS4zLTI2LjEtOC0zOS44LTgtMTMuNyAwLTI3LjIgMi43LTM5LjggOHptMjM5LjggMzIwcTAtMS42LTAuNi0zLjEtMC42LTEuNC0xLjctMi42LTEuMi0xLjEtMi42LTEuNy0xLjUtMC42LTMuMS0wLjZoLTM4NHEtMS42IDAtMy4xIDAuNi0xLjQgMC42LTIuNiAxLjctMS4xIDEuMi0xLjcgMi42LTAuNiAxLjUtMC42IDMuMXYzMjBxMCAxLjYgMC42IDMuMSAwLjYgMS40IDEuNyAyLjYgMS4yIDEuMSAyLjYgMS43IDEuNSAwLjYgMy4xIDAuNmgzODRxMS42IDAgMy4xLTAuNiAxLjQtMC42IDIuNi0xLjcgMS4xLTEuMiAxLjctMi42IDAuNi0xLjUgMC42LTMuMXoiLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InMwIiBkPSJtODQ4IDQwMS42di0xMTMuNmMwLTIwLjEtMi45LTQwLjItOC43LTU5LjQtNS43LTE5LjMtMTQuMi0zNy43LTI1LjMtNTQuNS0xMS0xNi45LTI0LjQtMzItMzkuOC00NS0xNS40LTEzLTMyLjUtMjMuNy01MS0zMS44LTExLjctNS0yNC45LTUuMy0zNi43LTAuNi0xMS45IDQuNi0yMS40IDEzLjgtMjYuNSAyNS40LTUuMSAxMS43LTUuMyAyNC45LTAuNyAzNi44IDQuNyAxMS44IDEzLjggMjEuMyAyNS41IDI2LjQgOS45IDQuNCAxOS4yIDEwLjEgMjcuNCAxNy4xIDguMyA3IDE1LjUgMTUuMSAyMS40IDI0LjEgNiA5LjEgMTAuNiAxOC45IDEzLjcgMjkuMyAzLjEgMTAuNCA0LjcgMjEuMSA0LjcgMzEuOXYxNjAuM2MwIDYuMyAxLjIgMTIuNSAzLjcgMTguNCAyLjQgNS44IDUuOSAxMS4xIDEwLjQgMTUuNSA0LjQgNC41IDkuNyA4IDE1LjUgMTAuNCA1LjkgMi41IDEyLjEgMy43IDE4LjQgMy43aDMyYzIuMSAwIDQuMiAwLjQgNi4xIDEuMiAyIDAuOCAzLjcgMiA1LjIgMy41IDEuNSAxLjUgMi43IDMuMiAzLjUgNS4yIDAuOCAxLjkgMS4yIDQgMS4yIDYuMXYzMjBjMCAyLjEtMC40IDQuMi0xLjIgNi4xLTAuOCAyLTIgMy43LTMuNSA1LjItMS41IDEuNS0zLjIgMi43LTUuMiAzLjUtMS45IDAuOC00IDEuMi02LjEgMS4yLTEyLjcgMC0yNC45IDUuMS0zMy45IDE0LjEtOSA5LTE0LjEgMjEuMi0xNC4xIDMzLjkgMCAxMi43IDUuMSAyNC45IDE0LjEgMzMuOSA5IDkgMjEuMiAxNC4xIDMzLjkgMTQuMSAxNC43IDAgMjkuMy0yLjkgNDIuOC04LjYgMTMuNi01LjYgMjYtMTMuOCAzNi40LTI0LjIgMTAuNC0xMC40IDE4LjYtMjIuOCAyNC4yLTM2LjQgNS43LTEzLjUgOC42LTI4LjEgOC42LTQyLjh2LTMyMGMwLTEzLjMtMi41LTI2LjUtNy4xLTM5LTQuNy0xMi41LTExLjYtMjQtMjAuNC0zNC4xLTguNy0xMC0xOS4yLTE4LjQtMzAuOS0yNC44LTExLjctNi40LTI0LjQtMTAuNi0zNy42LTEyLjV6Ii8+Cgk8cGF0aCBpZD0iTGF5ZXIiIGNsYXNzPSJzMCIgZD0ibTM4NCA1ODRjLTcuNCAwLTE0LjYgMS40LTIxLjQgNC4zLTYuOCAyLjgtMTMgNi45LTE4LjIgMTIuMS01LjIgNS4yLTkuMyAxMS40LTEyLjEgMTguMi0yLjkgNi44LTQuMyAxNC00LjMgMjEuNHY2NGMwIDE0LjkgNS45IDI5LjEgMTYuNCAzOS42IDEwLjUgMTAuNSAyNC43IDE2LjQgMzkuNiAxNi40IDE0LjkgMCAyOS4xLTUuOSAzOS42LTE2LjQgMTAuNS0xMC41IDE2LjQtMjQuNyAxNi40LTM5LjZ2LTY0YzAtNy40LTEuNC0xNC42LTQuMy0yMS40LTIuOC02LjgtNi45LTEzLTEyLjEtMTguMi01LjItNS4yLTExLjQtOS4zLTE4LjItMTIuMS02LjgtMi45LTE0LTQuMy0yMS40LTQuM3oiLz4KPC9zdmc+");
  }
  .eye {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCI+Cgk8dGl0bGU+a2VqaWFueGluZy1rZWppYW4tc3ZnPC90aXRsZT4KCTxzdHlsZT4KCQkuczAgeyBmaWxsOiAjMDAwMDAwIH0gCgk8L3N0eWxlPgoJPHBhdGggaWQ9IkxheWVyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsYXNzPSJzMCIgZD0ibTk4MS4zIDQ5MC43Yy03My44IDE4Ny4zLTI1NiAzMjAtNDY5LjMgMzIwLTIxMy4zIDAtMzk1LjUtMTMyLjctNDY5LjMtMzIwIDczLjgtMTg3LjMgMjU2LTMyMCA0NjkuMy0zMjAgMjEzLjMgMCAzOTUuNSAxMzIuNyA0NjkuMyAzMjB6bS01ODQuNy0yMTguOGMtMzcuNiAxMC43LTczLjQgMjYuNi0xMDYuNiA0Ny4yLTMzLjEgMjAuNy02My4xIDQ1LjktODkuMiA3NC45LTI2LjIgMjktNDguMSA2MS42LTY1LjEgOTYuNyA3MC40IDE0My44IDIxNC42IDIzNC42IDM3Ni4zIDIzNC42IDE2MS43IDAgMzA1LjktOTAuOCAzNzYuMy0yMzQuNi0xNy0zNS4xLTM4LjktNjcuNy02NS4xLTk2LjctMjYuMS0yOS01Ni4xLTU0LjItODkuMi03NC45LTMzLjItMjAuNi02OS0zNi41LTEwNi42LTQ3LjItMzcuNS0xMC43LTc2LjQtMTYtMTE1LjQtMTUuOS0zOS0wLjEtNzcuOSA1LjItMTE1LjQgMTUuOXptMzA3LjQgMjE4LjhjMCAxMDUuOC04Ni4yIDE5Mi0xOTIgMTkyLTEwNS44IDAtMTkyLTg2LjItMTkyLTE5MiAwLTEwNS44IDg2LjItMTkyIDE5Mi0xOTIgMTA1LjggMCAxOTIgODYuMiAxOTIgMTkyem0tMjY3LjQtNzUuNWMtMjAgMjAtMzEuMyA0Ny4yLTMxLjMgNzUuNSAwIDI4LjMgMTEuMyA1NS40IDMxLjMgNzUuNCAyMCAyMCA0Ny4xIDMxLjIgNzUuNCAzMS4yIDI4LjMgMCA1NS40LTExLjIgNzUuNC0zMS4yIDIwLTIwIDMxLjMtNDcuMSAzMS4zLTc1LjQgMC0yOC4zLTExLjMtNTUuNS0zMS4zLTc1LjUtMjAtMjAtNDcuMS0zMS4yLTc1LjQtMzEuMi0yOC4zIDAtNTUuNCAxMS4yLTc1LjQgMzEuMnoiLz4KPC9zdmc+");
  }
  .eye-fill {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCI+Cgk8dGl0bGU+YnVrZWppYW4tc3ZnPC90aXRsZT4KCTxzdHlsZT4KCQkuczAgeyBmaWxsOiAjMDAwMDAwIH0gCgk8L3N0eWxlPgoJPHBhdGggaWQ9IkxheWVyIiBjbGFzcz0iczAiIGQ9Im05NDcuOCAzMDQuMmMtMy42LTMuMS03LjctNS41LTEyLjItNy00LjUtMS42LTkuMi0yLjItMTMuOS0xLjktNC43IDAuMy05LjMgMS41LTEzLjYgMy42LTQuMiAyLjEtOCA1LTExLjEgOC42LTYyLjEgNzAuNi0xMjYuNCAxMjQuMS0xOTEuMSAxNTguOS02My4yIDM0LjEtMTI4LjcgNTEuNC0xOTQuNyA1MS40LTY1LjkgMC0xMzEuMy0xNy4zLTE5NC4yLTUxLjMtNjQuNC0zNC45LTEyOC4zLTg4LjQtMTg5LjktMTU4LjktNi4zLTcuMi0xNS4yLTExLjYtMjQuNy0xMi4zLTkuNS0wLjYtMTguOSAyLjUtMjYuMSA4LjgtNy4yIDYuMy0xMS42IDE1LjEtMTIuMyAyNC43LTAuNiA5LjUgMi42IDE4LjkgOC44IDI2LjEgNDQuNyA1MS4xIDkwLjggOTQuMyAxMzcuOCAxMjguOWwtNTguMSA1OC4xYy02LjYgNi43LTEwLjMgMTUuOS0xMC4zIDI1LjQgMCA5LjUgMy44IDE4LjUgMTAuNSAyNS4zIDYuOCA2LjcgMTUuOCAxMC41IDI1LjMgMTAuNSA5LjUgMCAxOC43LTMuNyAyNS40LTEwLjNsNjguOC02OC44cTUuMyAzIDEwLjUgNS44IDExLjcgNi40IDIzLjcgMTIuMSAxMiA1LjggMjQuMyAxMC45IDEyLjIgNS4xIDI0LjggOS42IDEyLjUgNC41IDI1LjIgOC4zbC0zNCAxMTEuNmMtMi43IDkuMS0xLjggMTkgMi43IDI3LjQgNC41IDguNCAxMi4xIDE0LjcgMjEuMyAxNy41IDkuMSAyLjggMTkgMS44IDI3LjQtMi42IDguNC00LjUgMTQuNy0xMi4yIDE3LjUtMjEuM2wzNS44LTExNy41cTcuNCAxIDE0LjkgMS44IDcuNCAwLjcgMTQuOSAxLjIgNy41IDAuNSAxNSAwLjggNy41IDAuMiAxNSAwLjIgNy41IDAgMTUtMC4yIDcuNS0wLjMgMTUtMC44IDcuNS0wLjUgMTUtMS4yIDcuNC0wLjggMTQuOS0xLjhsMzUuNyAxMTcuNWMyLjggOS4xIDkuMSAxNi44IDE3LjYgMjEuMyA4LjQgNC40IDE4LjIgNS40IDI3LjQgMi42IDkuMS0yLjggMTYuOC05LjEgMjEuMy0xNy41IDQuNC04LjQgNS40LTE4LjMgMi42LTI3LjRsLTM0LTExMS42cTEyLjgtMy44IDI1LjMtOC4zIDEyLjYtNC41IDI0LjktOS42IDEyLjMtNS4xIDI0LjQtMTAuOSAxMi01LjcgMjMuNy0xMi4xIDQuOS0yLjYgOS45LTUuNGw2OC4zIDY4LjRjNi44IDYuNiAxNS45IDEwLjMgMjUuNCAxMC4zIDkuNSAwIDE4LjYtMy44IDI1LjMtMTAuNSA2LjgtNi44IDEwLjUtMTUuOCAxMC42LTI1LjMgMC05LjUtMy43LTE4LjctMTAuNC0yNS40bC01Ny40LTU3LjVjNDcuNS0zNC43IDk0LjEtNzggMTM5LjMtMTI5LjQgMy4xLTMuNSA1LjUtNy43IDctMTIuMiAxLjYtNC40IDIuMi05LjIgMS45LTEzLjktMC4zLTQuNy0xLjUtOS4zLTMuNi0xMy41LTIuMS00LjMtNS04LjEtOC41LTExLjJ6Ii8+Cjwvc3ZnPg==");
  }

  .getverificationCode {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--coral);
    border-left: 1px solid var(--gray200);
    padding-left: 12px;
    font-weight: 550;
    transition: var(--transition);
    white-space: nowrap;
  }
  .getverificationCode:hover {
    color: var(--coralLight);
  }

  #verificationCode {
    padding-right: 120px;
  }

  .signup-step-two {
    display: none;
  }

  .nav-link-agreement {
    color: var(--coral);
    cursor: pointer;
    font-weight: 550;
    transition: var(--transition);
  }
  .nav-link-agreement:hover {
    color: var(--coralLight);
  }

  .onetime-tip {
    display: inline-block;
    margin-top: 4px;
    padding-bottom: 8px;
    position: relative;
    z-index: 99;
    color: var(--gray500);
    font-size: 12px;
  }

  #signupOneTimePassword ~ .onetime-tip + .error {
    margin-top: -8px;
  }

  #signup-form .invalid-feedback {
    padding: 4px 0 8px;
    font-size: 12px;
    color: var(--coral);
    display: block;
  }

  .h-88 {
    min-height: 88px;
  }
  .h-100 {
    min-height: 93px;
  }
}

#modal-forget-pwd {
  .modal-header {
    border-bottom: none;
    position: relative;
    padding: 30px 30px 10px;
    text-align: center;
  }

  .btn-primary {
    background-color: var(--coral);
    border-color: var(--coral);
    color: #fff;
    font-weight: 650;
    border-radius: var(--radius-btn);
    height: 54px;
    transition: var(--transition);

    &:hover {
      background-color: var(--coralLight);
      border-color: var(--coralLight);
      transform: translateY(-2px);
    }
    &:active {
      background-color: var(--coralDark);
      border-color: var(--coralDark);
    }
  }

  .form-control:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px var(--coralMuted);
    outline: none;
  }
}