:root {
  --gs-ink: #07111f;
  --gs-muted: #667085;
  --gs-blue: #00419f;
  --gs-cyan: #00a8ea;
  --gs-green: #71eb30;
  --gs-navy: #04163d;
  --gs-line: #dbe5ef;
  --gs-soft: #f5f8fc;
  --gs-white: #ffffff;
  --gs-gradient: linear-gradient(115deg, #00419f 0%, #00a8ea 54%, #71eb30 100%);
  --gs-shadow: 0 26px 70px rgba(7, 17, 31, .14);
  --gs-radius: 22px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--gs-ink);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  line-height: 1.5;
  background:
    radial-gradient(circle at 12% 10%, rgba(0, 168, 234, .14), transparent 26%),
    radial-gradient(circle at 86% 8%, rgba(113, 235, 48, .14), transparent 26%),
    #f7f9fc;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

.gs-wrap {
  width: min(1248px, calc(100% - 44px));
  margin: 0 auto;
}

.gs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(219, 229, 239, .78);
  background: rgba(247, 249, 252, .88);
  backdrop-filter: blur(18px);
}

.gs-nav,
.gs-menu,
.gs-actions,
.gs-hero-actions,
.gs-hero-metrics,
.gs-signal-grid,
.gs-phone-top,
.gs-trader-card,
.gs-download-inner,
.gs-store-grid,
.gs-copyright {
  display: flex;
  align-items: center;
}

.gs-nav {
  min-height: 78px;
  justify-content: space-between;
  gap: 26px;
}

.gs-brand img {
  width: 140px;
}

.gs-menu {
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(219, 229, 239, .88);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 12px 30px rgba(7, 17, 31, .05);
}

.gs-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: #2a3445;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.gs-menu a:hover {
  color: #fff;
  background: var(--gs-ink);
}

.gs-actions {
  gap: 10px;
}

.gs-nav-cta,
.gs-lang,
.gs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 1000;
}

.gs-nav-cta {
  min-height: 42px;
  padding: 0 18px;
  color: #fff;
  background: var(--gs-ink);
  font-size: 13px;
  box-shadow: 0 14px 30px rgba(7, 17, 31, .18);
}

.gs-lang {
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--gs-line);
  color: var(--gs-blue);
  background: #fff;
  font-size: 13px;
}

.gs-button {
  min-height: 52px;
  padding: 0 25px;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease;
}

.gs-button:hover {
  transform: translateY(-2px);
}

.gs-button-primary {
  color: #fff;
  background: var(--gs-gradient);
  box-shadow: 0 18px 38px rgba(0, 168, 234, .22);
}

.gs-button-secondary {
  color: var(--gs-ink);
  border-color: rgba(7, 17, 31, .12);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 32px rgba(7, 17, 31, .08);
}

.gs-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 7vw, 100px) 0 70px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .88) 0 54%, rgba(4, 22, 61, .98) 54% 100%);
}

.gs-hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 65, 159, .06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 65, 159, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  content: "";
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}

.gs-orbit {
  position: absolute;
  right: -160px;
  top: 80px;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(113, 235, 48, .22);
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(113, 235, 48, .24), rgba(0, 168, 234, .18), transparent, rgba(113, 235, 48, .24));
  opacity: .78;
}

.gs-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .72fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: center;
}

.gs-kicker {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--gs-muted);
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}

.gs-kicker span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(0, 168, 234, .24);
  border-radius: 999px;
  color: var(--gs-blue);
  background: #fff;
}

.gs-kicker i {
  width: 40px;
  height: 2px;
  background: var(--gs-gradient);
}

.gs-hero h1 {
  max-width: 840px;
  margin: 0;
  color: var(--gs-ink);
  font-size: clamp(46px, 7vw, 94px);
  line-height: .98;
  letter-spacing: 0;
}

.gs-hero-copy p {
  max-width: 690px;
  margin: 26px 0 0;
  color: #475467;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.82;
}

.gs-hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.gs-hero-metrics {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 42px;
}

.gs-hero-metrics article {
  min-width: 175px;
  padding: 18px;
  border: 1px solid rgba(219, 229, 239, .86);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 42px rgba(7, 17, 31, .08);
}

.gs-hero-metrics strong,
.gs-hero-metrics span {
  display: block;
}

.gs-hero-metrics strong {
  color: var(--gs-blue);
  font-size: 19px;
}

.gs-hero-metrics span {
  margin-top: 6px;
  color: var(--gs-muted);
  font-size: 13px;
  font-weight: 800;
}

.gs-phone-stage {
  position: relative;
  min-height: 620px;
}

.gs-phone {
  position: relative;
  z-index: 1;
  width: min(360px, 88vw);
  min-height: 610px;
  margin-left: auto;
  padding: 22px;
  border: 10px solid #101828;
  border-radius: 42px;
  color: #fff;
  background:
    radial-gradient(circle at 20% 10%, rgba(113, 235, 48, .26), transparent 28%),
    linear-gradient(180deg, #07111f, #04163d);
  box-shadow: 0 38px 90px rgba(0, 0, 0, .32);
}

.gs-phone::before {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 92px;
  height: 24px;
  border-radius: 999px;
  background: #101828;
  content: "";
  transform: translateX(-50%);
}

.gs-phone-top {
  justify-content: space-between;
  margin-top: 32px;
}

.gs-phone-top span {
  color: rgba(255, 255, 255, .64);
  font-size: 13px;
  font-weight: 900;
}

.gs-phone-top b {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #123808;
  background: var(--gs-green);
  font-size: 12px;
}

.gs-trader-card {
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .08);
}

.gs-trader-card strong,
.gs-trader-card span,
.gs-trader-card em {
  display: block;
}

.gs-trader-card span {
  margin-top: 4px;
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 800;
}

.gs-trader-card em {
  color: var(--gs-green);
  font-size: 30px;
  font-style: normal;
  font-weight: 1000;
}

.gs-chart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 9px;
  height: 170px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .06);
}

.gs-chart i {
  display: block;
  border-radius: 8px 8px 4px 4px;
  background: var(--gs-gradient);
  box-shadow: 0 0 22px rgba(0, 168, 234, .28);
}

.gs-chart i:nth-child(1) { height: 42%; }
.gs-chart i:nth-child(2) { height: 58%; }
.gs-chart i:nth-child(3) { height: 48%; }
.gs-chart i:nth-child(4) { height: 76%; }
.gs-chart i:nth-child(5) { height: 62%; }
.gs-chart i:nth-child(6) { height: 90%; }

.gs-copy-panel,
.gs-chat {
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  color: var(--gs-ink);
}

.gs-copy-panel span,
.gs-chat span {
  color: var(--gs-blue);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.gs-copy-panel strong {
  display: block;
  margin: 8px 0 14px;
  font-size: 22px;
}

.gs-copy-panel button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--gs-gradient);
  font-weight: 1000;
}

.gs-chat p {
  margin: 8px 0 0;
  color: #344054;
  line-height: 1.55;
}

.gs-float-card {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
  font-size: 13px;
  font-weight: 1000;
}

.gs-float-card img {
  width: 20px;
  height: 20px;
  filter: invert(72%) sepia(100%) saturate(405%) hue-rotate(43deg) brightness(102%) contrast(93%);
}

.gs-float-card-one {
  left: 18px;
  top: 150px;
}

.gs-float-card-two {
  right: -18px;
  bottom: 120px;
}

.gs-signal-strip {
  border-block: 1px solid var(--gs-line);
  background: #fff;
  box-shadow: 0 14px 42px rgba(7, 17, 31, .05);
}

.gs-signal-grid {
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 92px;
  padding: 18px 0;
}

.gs-signal-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(0, 65, 159, .14);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f7fbff);
  box-shadow: 0 10px 26px rgba(7, 17, 31, .06);
  font-size: 14px;
  font-weight: 1000;
}

.gs-signal-grid span::before {
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--gs-gradient);
  box-shadow: 0 0 14px rgba(0, 168, 234, .28);
  content: "";
}

.gs-section {
  padding: clamp(76px, 8vw, 120px) 0;
}

.gs-section-head {
  max-width: 860px;
  margin-bottom: 38px;
}

.gs-section-head.compact {
  max-width: 780px;
}

.gs-section-head span,
.gs-experience-copy span,
.gs-guide-grid > div > span,
.gs-download span {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--gs-blue);
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}

.gs-section-head h2,
.gs-experience-copy h2,
.gs-guide-grid h2,
.gs-download h2 {
  margin: 0;
  color: var(--gs-ink);
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.1;
  letter-spacing: 0;
}

.gs-section-head p,
.gs-experience-copy p,
.gs-guide-grid p,
.gs-download p {
  margin: 18px 0 0;
  color: var(--gs-muted);
  font-size: 16px;
  line-height: 1.78;
}

.gs-overview {
  background: #f7f9fc;
}

.gs-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gs-overview-grid article,
.gs-feature-board article,
.gs-step-grid article,
.gs-faq-grid article {
  border: 1px solid rgba(219, 229, 239, .88);
  border-radius: var(--gs-radius);
  background: #fff;
  box-shadow: 0 16px 42px rgba(7, 17, 31, .08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gs-overview-grid article:hover,
.gs-feature-board article:hover,
.gs-step-grid article:hover,
.gs-faq-grid article:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 168, 234, .35);
  box-shadow: var(--gs-shadow);
}

.gs-overview-grid article {
  min-height: 250px;
  padding: 28px;
}

.gs-overview-grid img,
.gs-feature-board img {
  width: 32px;
  height: 32px;
  filter: invert(24%) sepia(96%) saturate(1826%) hue-rotate(204deg) brightness(82%) contrast(106%);
}

.gs-overview-grid h3,
.gs-feature-board h3,
.gs-step-grid h3,
.gs-faq-grid h3,
.gs-audience-grid h3 {
  margin: 22px 0 12px;
  color: var(--gs-ink);
  font-size: 22px;
  line-height: 1.24;
}

.gs-overview-grid p,
.gs-feature-board p,
.gs-step-grid p,
.gs-faq-grid p,
.gs-audience-grid p {
  margin: 0;
  color: var(--gs-muted);
  line-height: 1.72;
}

.gs-experience {
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(113, 235, 48, .18), transparent 28%),
    linear-gradient(135deg, var(--gs-navy), #07111f);
}

.gs-experience-grid {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(520px, 1fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: center;
}

.gs-experience-copy span {
  color: #9df2ff;
}

.gs-experience-copy h2,
.gs-experience-copy p {
  color: #fff;
}

.gs-experience-copy p {
  color: rgba(255, 255, 255, .74);
  margin-bottom: 30px;
}

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

.gs-workflow article {
  min-height: 230px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--gs-radius);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
}

.gs-workflow b {
  color: var(--gs-green);
  font-size: 42px;
  line-height: 1;
}

.gs-workflow h3 {
  margin: 42px 0 10px;
  font-size: 22px;
}

.gs-workflow p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  line-height: 1.7;
}

.gs-features {
  background: #fff;
}

.gs-feature-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.gs-feature-board article {
  min-height: 260px;
  padding: 26px;
}

.gs-steps {
  background: #f7f9fc;
}

.gs-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.gs-step-grid article {
  position: relative;
  min-height: 250px;
  padding: 26px;
}

.gs-step-grid article::after {
  position: absolute;
  right: -9px;
  top: 50%;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--gs-cyan);
  border-right: 2px solid var(--gs-cyan);
  content: "";
  transform: translateY(-50%) rotate(45deg);
  filter: drop-shadow(0 8px 14px rgba(0, 168, 234, .22));
}

.gs-step-grid article:last-child::after {
  display: none;
}

.gs-step-grid article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: #123808;
  background: var(--gs-green);
  font-size: 20px;
  font-weight: 1000;
}

.gs-guide {
  color: #fff;
  background:
    linear-gradient(110deg, rgba(0, 65, 159, .94), rgba(4, 22, 61, .98)),
    var(--gs-navy);
}

.gs-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(520px, 1fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: start;
}

.gs-guide-grid > div > span {
  color: #9df2ff;
}

.gs-guide-grid h2,
.gs-guide-grid p {
  color: #fff;
}

.gs-guide-grid p {
  color: rgba(255, 255, 255, .72);
}

.gs-guide-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gs-guide-list span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
  font-weight: 900;
}

.gs-audience {
  padding: 34px 0;
  background: #fff;
}

.gs-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gs-audience-grid article {
  min-height: 200px;
  padding: 28px;
  border-radius: var(--gs-radius);
  color: #fff;
  background: var(--gs-ink);
  box-shadow: var(--gs-shadow);
}

.gs-audience-grid h3 {
  color: #fff;
}

.gs-audience-grid p {
  color: rgba(255, 255, 255, .72);
}

.gs-download {
  padding: clamp(70px, 8vw, 112px) 0;
  background:
    linear-gradient(100deg, rgba(113, 235, 48, .16) 0 22%, transparent 22%),
    linear-gradient(110deg, #ffffff 0 60%, rgba(0, 168, 234, .2) 60% 100%);
}

.gs-download-inner {
  justify-content: space-between;
  gap: 36px;
  padding: 38px;
  border: 1px solid rgba(7, 17, 31, .12);
  border-radius: var(--gs-radius);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--gs-shadow);
}

.gs-download h2 {
  max-width: 760px;
}

.gs-download p {
  max-width: 680px;
}

.gs-store-grid {
  gap: 12px;
  flex-wrap: wrap;
}

.gs-store-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 170px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 16px;
  color: #fff;
  background: var(--gs-ink);
  font-weight: 1000;
  box-shadow: 0 16px 34px rgba(7, 17, 31, .18);
}

.gs-store-grid img {
  width: 22px;
  height: 22px;
  filter: invert(1);
}

.gs-faq {
  background: #f7f9fc;
}

.gs-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gs-faq-grid article {
  min-height: 220px;
  padding: 26px;
}

.gs-footer {
  padding: 58px 0 30px;
  color: #dbe8ff;
  background: var(--gs-ink);
}

.gs-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .7fr .7fr;
  gap: 42px;
}

.gs-footer img {
  width: 154px;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}

.gs-footer p {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, .68);
  line-height: 1.75;
}

.gs-footer h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 16px;
}

.gs-footer a {
  display: block;
  margin-top: 9px;
  color: rgba(255, 255, 255, .68);
}

.gs-footer a:hover {
  color: #fff;
}

.gs-copyright {
  justify-content: space-between;
  gap: 18px;
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}

@media (max-width: 1120px) {
  .gs-menu {
    display: none;
  }

  .gs-hero {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(4, 22, 61, .98));
  }

  .gs-hero-grid,
  .gs-experience-grid,
  .gs-guide-grid {
    grid-template-columns: 1fr;
  }

  .gs-phone-stage {
    min-height: 620px;
    max-width: 680px;
  }

  .gs-overview-grid,
  .gs-feature-board,
  .gs-step-grid,
  .gs-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .gs-wrap {
    width: min(100% - 28px, 1248px);
  }

  .gs-nav {
    min-height: 66px;
  }

  .gs-brand img {
    width: 116px;
  }

  .gs-nav-cta {
    display: none;
  }

  .gs-hero {
    padding-top: 44px;
  }

  .gs-hero h1 {
    font-size: clamp(38px, 13vw, 58px);
  }

  .gs-hero-actions .gs-button,
  .gs-download .gs-button {
    width: 100%;
  }

  .gs-phone-stage {
    min-height: 560px;
  }

  .gs-phone {
    margin: 0 auto;
    min-height: 560px;
    padding: 18px;
  }

  .gs-float-card {
    display: none;
  }

  .gs-overview-grid,
  .gs-workflow,
  .gs-feature-board,
  .gs-step-grid,
  .gs-audience-grid,
  .gs-faq-grid,
  .gs-footer-grid {
    grid-template-columns: 1fr;
  }

  .gs-section {
    padding: 66px 0;
  }

  .gs-step-grid article::after {
    right: 28px;
    top: auto;
    bottom: -10px;
    transform: rotate(135deg);
  }

  .gs-download-inner,
  .gs-copyright {
    display: grid;
  }

  .gs-download-inner {
    padding: 26px;
  }

  .gs-store-grid a {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .gs-button {
    width: 100%;
  }

  .gs-phone {
    border-width: 8px;
    border-radius: 34px;
  }
}