page {
  background: linear-gradient(to bottom, #f6f7fb, #ffffff);
}

.home-page {
  padding: 24rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 28rpx;
  padding: 26rpx 22rpx 28rpx;
  background: linear-gradient(180deg, #0b1220 0%, #0b0f1a 100%);
  box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.14);
}

.hero__bgGlow {
  position: absolute;
  left: 50%;
  top: -160rpx;
  width: 760rpx;
  height: 420rpx;
  transform: translateX(-50%);
  border-radius: 999rpx;
  background: rgba(34, 214, 74, 0.22);
  filter: blur(60rpx);
  pointer-events: none;
}

.hero__inner {
  position: relative;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  padding: 10rpx 16rpx;
  border-radius: 999rpx;
  background: rgba(255, 150, 0, 0.16);
  border: 2rpx solid rgba(255, 150, 0, 0.35);
}

.hero__tagText {
  font-size: 24rpx;
  font-weight: 700;
  color: rgba(255, 195, 115, 0.95);
  line-height: 1;
}

.hero__title {
  margin-top: 18rpx;
}

.hero__titleText {
  display: block;
  font-size: 40rpx;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.18;
}

.hero__desc {
  margin-top: 14rpx;
}

.hero__descText {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.hero__actions {
  margin-top: 18rpx;
}

.hero__btn {
  border-radius: 18rpx !important;
}

.hero__btn--primary {
  background: linear-gradient(90deg, #24d34c 0%, #6df09a 100%) !important;
  border: none !important;
}

.hero__btnRow {
  margin-top: 12rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rpx;
}

/* Quick nav */
.quickNav {
  margin-top: 14rpx;
  padding: 12rpx 10rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14rpx 26rpx rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10rpx;
  position: sticky;
  top: 0;
  z-index: 20;
}

.quickNav__item {
  height: 66rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 182, 90, 0.08);
  border: 2rpx solid rgba(22, 182, 90, 0.14);
}

.quickNav__text {
  font-size: 24rpx;
  font-weight: 800;
  color: #168c49;
  line-height: 1;
}

/* Sections */
.section {
  margin-top: 22rpx;
  padding: 20rpx 18rpx;
  border-radius: 24rpx;
  background: #ffffff;
  box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.06);
}

.section--alt {
  background: #f7f9fc;
}

.section__head {
  margin-bottom: 14rpx;
}

.section__title {
  display: block;
  font-size: 34rpx;
  font-weight: 900;
  color: #111111;
  line-height: 1.2;
}

.section__desc {
  display: block;
  margin-top: 8rpx;
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
}

.section__foot {
  margin-top: 16rpx;
}

/* Generic card */
.card {
  border-radius: 20rpx;
  padding: 18rpx 16rpx;
  background: #ffffff;
  box-shadow: 0 14rpx 26rpx rgba(0, 0, 0, 0.05);
}

.card__title {
  display: block;
  font-size: 30rpx;
  font-weight: 800;
  color: #111111;
}

.card__desc {
  display: block;
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
}

/* Product grid */
.productGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14rpx;
}

.productCard {
  padding: 16rpx 14rpx;
}

.productCard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;
}

.productCard__title {
  font-size: 28rpx;
  font-weight: 900;
  color: #111111;
}

.productCard__desc {
  display: block;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666666;
  line-height: 1.55;
}

.productCard__actions {
  margin-top: 12rpx;
}

.tagRow {
  margin-top: 10rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.tag {
  padding: 6rpx 10rpx;
  border-radius: 999rpx;
  background: rgba(22, 182, 90, 0.12);
  border: 2rpx solid rgba(22, 182, 90, 0.22);
}

.tag__text {
  font-size: 22rpx;
  font-weight: 700;
  color: #16b65a;
  line-height: 1;
}

/* Badges */
.badge {
  padding: 6rpx 10rpx;
  border-radius: 999rpx;
}

.badge__text {
  font-size: 22rpx;
  font-weight: 800;
  line-height: 1;
}

.badge--green {
  background: rgba(22, 182, 90, 0.14);
  border: 2rpx solid rgba(22, 182, 90, 0.24);
}

.badge--green .badge__text {
  color: #16b65a;
}

.badge--soft {
  background: rgba(0, 0, 0, 0.06);
}

.badge--soft .badge__text {
  color: #333333;
}

/* Capabilities */
.capGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14rpx;
}

.capCard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;
}

.capCard__title {
  font-size: 30rpx;
  font-weight: 900;
  color: #111111;
}

.capCard__desc {
  display: block;
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
}

/* Flow */
.flowCard {
  padding: 6rpx 10rpx;
}

.flowStep {
  display: flex;
  gap: 14rpx;
  padding: 14rpx 8rpx;
}

.flowStep + .flowStep {
  border-top: 2rpx solid rgba(0, 0, 0, 0.06);
}

.flowStep__dot {
  flex: none;
  width: 40rpx;
  height: 40rpx;
  border-radius: 999rpx;
  background: rgba(22, 182, 90, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flowStep__dotText {
  font-size: 22rpx;
  font-weight: 900;
  color: #16b65a;
}

.flowStep__body {
  flex: 1;
  min-width: 0;
}

.flowStep__title {
  display: block;
  font-size: 28rpx;
  font-weight: 900;
  color: #111111;
  line-height: 1.2;
}

.flowStep__desc {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #666666;
  line-height: 1.55;
}

/* Segmented tabs */
.segTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rpx;
  padding: 10rpx;
  border-radius: 18rpx;
  background: rgba(0, 0, 0, 0.04);
}

.segTabs__item {
  height: 70rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.segTabs__item--active {
  background: #ffffff;
  box-shadow: 0 10rpx 22rpx rgba(0, 0, 0, 0.08);
}

.segTabs__text {
  font-size: 28rpx;
  font-weight: 900;
  color: #2a2a2a;
}

.twoCard {
  margin-top: 14rpx;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14rpx;
}

/* List */
.list {
  margin-top: 12rpx;
}

.list__item {
  display: flex;
  gap: 12rpx;
  padding: 10rpx 0;
}

.list__dot {
  flex: none;
  width: 10rpx;
  height: 10rpx;
  margin-top: 12rpx;
  border-radius: 999rpx;
  background: rgba(22, 182, 90, 0.9);
}

.list__text {
  flex: 1;
  min-width: 0;
  font-size: 26rpx;
  color: #666666;
  line-height: 1.55;
}

.contactMeta {
  margin-top: 14rpx;
  padding-top: 14rpx;
  border-top: 2rpx solid rgba(0, 0, 0, 0.06);
}

.contactMeta__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12rpx;
  padding: 10rpx 0;
}

.contactMeta__label {
  font-size: 24rpx;
  color: #888888;
  white-space: nowrap;
}

.contactMeta__value {
  font-size: 26rpx;
  font-weight: 800;
  color: #111111;
  text-align: right;
}

.contactActions {
  margin-top: 14rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rpx;
}

/* Bottom CTA */
.bottomCta {
  margin-top: 22rpx;
  padding: 22rpx 18rpx;
  border-radius: 24rpx;
  background: linear-gradient(180deg, #0b1220 0%, #0b0f1a 100%);
  box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.14);
}
.bottom__view{
  background: linear-gradient(90deg, #24d34c 0%, #6df09a 100%) !important;
  //background: linear-gradient(180deg, #2dd022 0%, #9be52b 100%);
}
.bottomCta__title {
  display: block;
  font-size: 32rpx;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
}

.bottomCta__desc {
  display: block;
  margin-top: 10rpx;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
}

.bottomCta__actions {
  margin-top: 16rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rpx;
}
