:root {
  --green: #9B5CFF;
  --green-hover: #B06CFF;
  --purple-deep: #7A4BD9;
  --purple-light: #D18BFF;
  --brand-gradient: linear-gradient(135deg, #7A4BD9 0%, #9B5CFF 48%, #D18BFF 100%);
  --text: #111;
  --muted: rgba(17, 17, 17, .86);
  --soft: #f7f8fa;
  --paper: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body {
  color: var(--text);
  background: #f9faf9;
  font-family: PingFang SC, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; cursor: pointer; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

body:not(.api-doc-page) > .site-header {
  position: fixed;
  top: 0;
}

body:not(.api-doc-page) > main {
  padding-top: 60px;
}
.header-inner {
  width: min(1400px, calc(100% - 48px));
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand-logo {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}
.brand-mark {
  color: var(--green);
  font-weight: 900;
  font-size: 29px;
  letter-spacing: 0;
  line-height: 1;
}
.brand-text { font-size: 22px; font-weight: 500; }
.nav { display: flex; align-items: center; gap: clamp(12px, 1.24vw, 24px); margin-left: auto; margin-right: 24px; height: 100%; }
.nav-link, .nav-item { position: relative; font-size: 16px; color: rgba(0,0,0,.87); display: flex; align-items: center; height: 100%; }
.nav-link:hover, .nav-item:hover { color: var(--green); }
.chevron {
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.mega-menu {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 260px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.product-menu { width: 340px; }
.has-menu:hover .mega-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-menu a {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 15px;
}
.mega-menu a:hover { background: rgba(0,0,0,.04); color: var(--green); }
.nav-icon { width: 20px; height: 20px; background-size: 20px 20px; flex: 0 0 20px; }
.icon-6 { background-image: url(assets/nav-6.svg); }
.icon-5 { background-image: url(assets/nav-5.svg); }
.icon-4 { background-image: url(assets/nav-4.svg); }
.icon-0 { background-image: url(assets/nav-0.svg); }
.icon-2 { background-image: url(assets/nav-2.svg); }
.icon-3 { background-image: url(assets/nav-3.svg); }
.icon-1 { background-image: url(assets/nav-1.svg); }
.icon-7 { background-image: url(assets/nav-2.svg); }
.icon-8 { background-image: url(assets/desktop-8.svg); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.login { color: var(--green); font-size: 16px; font-weight: 500; }
.pill {
  min-width: 120px;
  height: 44px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  color: #fff;
  background: var(--brand-gradient);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(155, 92, 255, .24);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pill:hover { background: linear-gradient(135deg, #8D55EC 0%, #B06CFF 52%, #E0A7FF 100%); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(155, 92, 255, .32); }
.pill.small { min-width: 100px; height: 36px; font-size: 16px; padding: 0 20px; }
.pill.small.promo-cta { min-width: 118px; padding: 0 18px; font-size: 16px; white-space: nowrap; }
.hero-actions-stack {
  margin-top: 86px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.pill.hero-cta { width: 150px; height: 56px; font-size: 24px; margin-top: 0; }
.pill.promo-hero-cta { font-size: 22px; }
.pill.medium { width: 120px; }
.pill.inverse { background: #fff; color: var(--green); box-shadow: none; }
.pill.footer-promo-pill {
  background: #f2e8ff;
  color: #7f45e8;
  box-shadow: 0 10px 26px rgba(126, 69, 232, .16);
}
.pill.footer-promo-pill:hover {
  background: #ead8ff;
  box-shadow: 0 12px 30px rgba(126, 69, 232, .22);
}

.hero { background: #fff; }
.home2-page { background: #fff; }
.home2-page .reveal,
.home2-page .reveal.fade {
  opacity: 1;
  transform: none;
}
.home2-page .reveal.in-view,
.home2-page .reveal.fade.in-view {
  animation: none;
}
.home2-hero {
  min-height: 620px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 18% 50%, rgba(155, 92, 255, .07), transparent 34%),
    #fff;
}
.home2-hero .hero-inner {
  width: min(1568px, calc(100% - 80px));
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 620px);
  align-items: center;
  gap: clamp(72px, 7vw, 132px);
  justify-content: initial;
  padding: 54px 0;
}
.home2-hero .hero-copy {
  width: min(620px, 100%);
  justify-self: center;
}
.home2-hero .hero-art img {
  width: min(520px, 38vw);
  height: auto;
}
.home2-hero-eyebrow {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
}
.home2-hero-lead {
  width: min(560px, 100%);
  margin: 28px 0 0;
  color: rgba(17, 17, 17, .68);
  font-size: 20px;
  line-height: 1.9;
}
.home2-hero-actions {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 18px 20px;
}
.home2-hero-actions .pill {
  width: 300px;
  min-width: 0;
  padding: 0 22px;
  font-size: 17px;
}
.home2-page .home2-action-btn {
  position: relative;
  isolation: isolate;
  height: 58px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(155, 92, 255, .24);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(247, 239, 255, .72)) padding-box,
    linear-gradient(135deg, rgba(155, 92, 255, .55), rgba(209, 139, 255, .48)) border-box;
  color: #6f36df;
  box-shadow: 0 16px 34px rgba(126, 69, 232, .14);
}
.home2-page .home2-action-btn::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  z-index: -1;
  background: radial-gradient(circle at 28% 24%, rgba(209, 139, 255, .38), transparent 32%);
  opacity: .78;
  transition: transform .28s ease, opacity .28s ease;
}
.home2-page .home2-action-btn svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: block;
  color: #7a4bd9;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home2-page .home2-action-btn span {
  min-width: 0;
  display: block;
  margin: 0;
  font: inherit;
  line-height: 1;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.home2-page .home2-showcase-copy .home2-action-btn span {
  display: block;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  line-height: 1;
}
.home2-page .home2-action-btn:hover {
  color: #5d22cf;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 229, 255, .9)) padding-box,
    linear-gradient(135deg, rgba(122, 75, 217, .72), rgba(209, 139, 255, .72)) border-box;
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(126, 69, 232, .22);
}
.home2-page .home2-action-btn:hover::before {
  opacity: 1;
  transform: translateX(10%);
}
.home2-showcase {
  min-height: 620px;
  display: flex;
  align-items: center;
  background: #fff;
}
.home2-showcase:nth-of-type(odd) {
  background:
    radial-gradient(circle at 18% 50%, rgba(155, 92, 255, .07), transparent 34%),
    #fff;
}
.home2-showcase-inner {
  width: min(1568px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 620px);
  align-items: center;
  gap: clamp(72px, 7vw, 132px);
  padding: 54px 0;
}
.home2-showcase-reverse .home2-showcase-inner {
  grid-template-columns: minmax(560px, 1fr) minmax(0, 620px);
}
.home2-showcase-copy span {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
}
.home2-showcase-copy h2 {
  margin: 0;
  font-size: 44px;
  line-height: 1.36;
  font-weight: 600;
}
.home2-showcase-copy p {
  width: min(560px, 100%);
  margin: 28px 0 42px;
  color: rgba(17, 17, 17, .68);
  font-size: 20px;
  line-height: 1.9;
}
.home2-showcase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.home2-showcase-actions .pill.hero-cta {
  width: auto;
  min-width: max-content;
  padding: 0 24px;
  font-size: 17px;
  white-space: nowrap;
}
.home2-showcase-copy > .pill.hero-cta {
  width: auto;
  min-width: max-content;
  padding: 0 24px;
  font-size: 17px;
  white-space: nowrap;
}
.home2-showcase-visual {
  min-width: 0;
}
.home2-showcase-visual img {
  width: min(520px, 100%);
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
  filter: drop-shadow(0 30px 46px rgba(126, 69, 232, .12));
}
.hero-inner {
  width: 1200px;
  height: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 50px;
}
.hero-copy h1 {
  width: 620px;
  margin: 0;
  font-size: 46px;
  line-height: 1.45;
  font-weight: 600;
}
.hero-art img { width: 792px; height: 550px; object-fit: contain; display: block; }

.metrics {
  height: 284px;
  min-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--soft);
  overflow: hidden;
}
.metric-card {
  width: 300px;
  height: 204px;
  display: grid;
  grid-template-rows: 42px 72px 64px;
  align-content: start;
  text-align: center;
  padding-top: 60px;
}
.metric-card strong { color: var(--green); font-size: 30px; font-weight: 500; }
.metric-card h3 {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 28px;
  line-height: 1.18;
  font-weight: 500;
}
.metric-card p {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 16px;
  line-height: 32px;
}

.section-white { background: #fff; }
.product-slider {
  position: relative;
  height: 700px;
  padding-top: 100px;
  overflow: hidden;
}
.product-track { position: relative; width: 1200px; height: 600px; margin: 0 auto; }
.product-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 28px;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.product-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.slide-copy h2 { margin: 0 0 20px; font-size: 48px; font-weight: 500; line-height: 1.18; }
.slide-copy p { margin: 0 0 16px; font-size: 18px; line-height: 32px; color: var(--muted); }
.product-slide img { width: 792px; height: 550px; object-fit: cover; }
.vertical-dots {
  position: absolute;
  left: calc(50% - 630px);
  top: 255px;
  z-index: 3;
  width: 8px;
  display: grid;
  gap: 8px;
}
.vertical-dots button {
  width: 8px;
  height: 140px;
  border-radius: 4px;
  background: rgba(0,0,0,.2);
}
.vertical-dots button.active { background: var(--green); }

.solutions {
  background: #fff;
  padding: 64px 0 100px;
}
.deep-solutions {
  padding-top: 0;
}
.solutions > h2, .seven-days > h2, .services > h2, .voice > h2 {
  margin: 0 0 40px;
  text-align: center;
  font-size: 36px;
  font-weight: 500;
}
.solution-grid {
  width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 340px);
  justify-content: space-between;
}
.solution-card {
  height: 460px;
  padding: 32px 32px 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,.1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.solution-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.solution-card h3 { margin: 0 32px 26px; font-size: 24px; font-weight: 500; }
.solution-card img { width: 270px; height: 160px; object-fit: contain; display: block; }
.solution-card p { height: 120px; margin: 20px 0 0; font-size: 16px; line-height: 32px; color: var(--muted); }
.solution-card a { display: inline-flex; align-items: center; margin-top: 20px; color: var(--green); font-size: 16px; font-weight: 500; }
.solution-card span { display: inline-block; margin-left: 6px; transition: transform .25s ease; font-size: 24px; line-height: 16px; }
.solution-card a:hover span { transform: translateX(8px); }

.core-clients .solution-grid {
  grid-template-columns: repeat(4, 270px);
}

.core-clients .solution-card {
  padding: 32px 28px 28px;
}

.core-clients .solution-card h3 {
  margin: 0 0 26px;
  text-align: center;
}

.core-clients .solution-card img {
  width: 214px;
  height: 150px;
  margin: 0 auto;
}

.seven-days { padding: 70px 0 90px; }
.feature-row {
  width: 1200px;
  height: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}
.feature-row img { width: 551px; height: 444px; object-fit: contain; }
.feature-row div { width: 500px; }
.feature-row h3 { margin: 0 0 20px; font-size: 48px; font-weight: 500; }
.feature-row p { margin: 0 0 20px; font-size: 18px; line-height: 32px; color: var(--muted); }
.check { color: var(--green); font-weight: 700; margin-right: 6px; }

.qa-section {
  width: 1080px;
  margin: 0 auto;
  display: block;
}

.qa-section h2 {
  margin: 0 0 44px;
  text-align: center;
  font-size: 36px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0;
}

.qa-list {
  border-top: 1px solid rgba(17, 17, 17, .12);
}

.qa-item {
  border-bottom: 1px solid rgba(17, 17, 17, .12);
}

.qa-question {
  width: 100%;
  min-height: 92px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 0;
  background: transparent;
  color: #222;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.qa-question span {
  font-size: 22px;
  line-height: 1.42;
  font-weight: 500;
}

.qa-question i {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  position: relative;
  opacity: .58;
}

.qa-question i::before,
.qa-question i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.qa-question i::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .24s ease, opacity .24s ease;
}

.qa-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .28s ease, opacity .2s ease;
}

.qa-answer p {
  margin: -6px 84px 34px 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(17, 17, 17, .52);
}

.qa-item.active .qa-question span {
  color: var(--green);
}

.qa-item.active .qa-question i::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.qa-item.active .qa-answer {
  max-height: 520px;
  opacity: 1;
}

.wide-image { background: #fff; display: flex; justify-content: center; overflow: hidden; }
.wide-image picture { width: 100%; max-width: 1440px; display: block; }
.wide-image img { width: 100%; display: block; object-fit: cover; }

.services { padding: 70px 0 100px; }
.service-grid {
  width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 384px);
  justify-content: center;
}
.service-grid article { height: 360px; padding: 0 20px; }
.service-grid img { width: 97px; height: 97px; object-fit: contain; }
.service-grid h3 { margin: 32px 0 12px; color: var(--green); font-size: 24px; font-weight: 500; }
.service-grid p { margin: 0; color: var(--muted); line-height: 32px; font-size: 16px; }

.voice {
  height: 800px;
  padding-top: 40px;
  background: #f7f8fa url(assets/voice-bg.webp) center / cover no-repeat;
}
.voice h2 { margin-bottom: 80px; }
.voice-stage {
  width: min(1382px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 60px minmax(0, 1212px) 60px;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.voice-window { position: relative; height: 460px; overflow: hidden; }
.voice-track {
  display: flex;
  gap: 30px;
  height: 100%;
  transform: translateX(0);
  transition: transform .48s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.voice-card {
  flex: 0 0 384px;
  height: 442px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 30px 30px 10px;
  background: #fff;
  border-radius: 40px 8px 8px 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.voice-card .quote { width: 94px; height: 94px; margin-top: 0; }
.voice-card p { height: 165px; margin: 0 0 0 20px; font-size: 18px; line-height: 32px; color: var(--muted); }
.voice-card div { display: flex; align-items: center; margin-left: 10px; }
.voice-card div img { width: 80px; height: 80px; object-fit: cover; margin-right: 10px; }
.voice-card strong { font-size: 18px; font-weight: 500; }
.voice-arrow {
  width: 61px;
  height: 61px;
  border-radius: 50%;
  background-size: cover;
  transition: box-shadow .2s ease;
}
.voice-arrow:hover { box-shadow: 0 2px 10px #e1e1e2; }
.voice-arrow.prev { background-image: url(assets/left-icon.svg); }
.voice-arrow.next { background-image: url(assets/right-icon.svg); }

.footer-cta {
  position: relative;
  height: 330px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.footer-cta-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(122, 75, 217, .72), rgba(176, 108, 255, .64));
}
.footer-cta-content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
}
.footer-cta h2 { margin: 0 0 26px; font-size: 40px; font-weight: 500; }
.footer-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.footer-cta-actions {
  display: flex;
  align-items: center;
  gap: 200px;
}
.footer-qr-box {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.footer-qr {
  width: 112px;
  height: 112px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.footer-qr-box p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.footer-main {
  min-width: 1200px;
  min-height: 360px;
  background: #fff;
  padding: 64px calc((100% - 1200px) / 2) 28px;
  text-align: center;
}
.footer-brand { margin-bottom: 40px; justify-content: center; }
.footer-links { display: flex; gap: 56px; justify-content: center; }
.footer-links div { min-width: 132px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-links h4 { margin: 0 0 10px; font-size: 18px; }
.footer-links a { color: rgba(17,17,17,.56); cursor: pointer; }
.footer-links a:hover { color: rgba(17,17,17,.86); }
.footer-links span { color: rgba(17,17,17,.56); cursor: default; }
.record {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: rgba(17,17,17,.56);
  font-size: 12px;
  margin-top: 50px;
}
.record p { margin: 0; }
.record a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(17,17,17,.56);
}
.record .beian-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 14px;
}

.reveal { opacity: 0; transform: translate3d(0, 70px, 0); }
.reveal.fade { transform: none; }
.reveal.in-view { animation: fadeInUp 1s both; }
.reveal.fade.in-view { animation-name: fadeIn; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 70px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.35);
}
.modal.open { display: grid; }
.modal-panel {
  width: 420px;
  padding: 36px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 80px rgba(0,0,0,.2);
  position: relative;
}
.modal-panel h3 { margin: 0 0 10px; font-size: 28px; }
.modal-panel p { margin: 0 0 24px; color: var(--muted); }
.modal-panel input {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 28px;
  padding: 0 20px;
  outline: none;
  font-size: 16px;
}
.modal-panel input:focus { border-color: var(--green); }
.modal-submit { margin-top: 20px; width: 100%; }
.modal-close {
  position: absolute;
  right: 18px;
  top: 14px;
  background: transparent;
  font-size: 30px;
  color: rgba(0,0,0,.45);
}
.snackbar {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -12px);
  z-index: 10001;
  width: 358px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(154,154,154,.5);
  color: rgba(0,0,0,.87);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.snackbar.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .site-header { height: 64px; }
  body:not(.api-doc-page):not(.promo-page) > main { padding-top: 64px; }
  .header-inner { width: 100%; padding: 0 16px; justify-content: flex-start; }
  .brand-mark { font-size: 28px; }
  .brand-logo { width: 30px; height: 30px; }
  .brand-text { font-size: 19px; }
  .nav, .header-actions { display: none; }
  .hero-inner {
    width: 100%;
    height: auto;
    min-height: 626px;
    padding: 38px 0 30px;
    display: block;
    overflow: hidden;
  }
  .hero-copy { text-align: center; }
  .hero-copy h1 {
    width: calc(100vw - 32px);
    max-width: 420px;
    margin: 0 auto;
    font-size: 30px;
    line-height: 1.68;
    text-align: center;
  }
  .hero-actions-stack { margin-top: 22px; align-items: center; gap: 12px; }
  .pill.hero-cta { width: 120px; min-width: 120px; height: 44px; padding: 0; font-size: 18px; }
  .hero-art { margin-top: 42px; margin-left: 28px; width: 610px; }
  .hero-art img { width: 610px; height: auto; }

  .metrics {
    min-width: 0;
    height: 238px;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    background: #fff;
    padding: 20px 0 20px 16px;
  }
  .metric-card {
    flex: 0 0 276px;
    height: 168px;
    grid-template-rows: 38px 50px 48px;
    margin-right: 16px;
    padding: 26px 18px 0;
    background: var(--soft);
    border-radius: 8px;
  }
  .metric-card strong { font-size: 30px; }
  .metric-card h3 { font-size: 20px; margin: 0; }
  .metric-card p { font-size: 14px; line-height: 24px; }

  .product-slider { height: auto; padding: 58px 20px 40px; }
  .vertical-dots { display: none; }
  .product-track { width: 100%; height: 660px; }
  .product-slide { display: block; }
  .slide-copy { text-align: center; }
  .slide-copy h2 { font-size: 24px; margin-bottom: 8px; }
  .slide-copy p {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 32px;
    overflow-wrap: anywhere;
  }
  .product-slide img { width: 100%; height: auto; margin-top: 28px; object-fit: contain; }
  .solutions { padding: 48px 20px; }
  .solutions > h2, .seven-days > h2, .services > h2, .voice > h2 { font-size: 24px; margin-bottom: 40px; }
  .solution-grid { width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; }
  .solution-card { width: 340px; }
  .seven-days { padding: 52px 20px; }
  .feature-row { width: 100%; height: auto; display: block; text-align: left; }
  .feature-row img { width: 100%; height: auto; }
  .feature-row div { width: 100%; }
  .feature-row h3 { font-size: 24px; margin-top: 24px; }
  .feature-row p { font-size: 16px; }
  .qa-section { width: 100%; }
  .qa-section h2 { margin-bottom: 24px; font-size: 28px; }
  .qa-question { min-height: 78px; gap: 18px; }
  .qa-question span { font-size: 18px; line-height: 1.42; }
  .qa-question i { width: 20px; height: 20px; }
  .qa-question i::before,
  .qa-question i::after { width: 18px; }
  .qa-answer p { margin: -4px 0 26px; font-size: 15px; line-height: 1.75; }
  .services { padding: 48px 20px 80px; }
  .service-grid { width: 100%; display: block; }
  .service-grid article { height: auto; margin-bottom: 44px; padding: 0; }
  .service-grid img { width: 40px; height: 40px; float: left; margin-right: 10px; }
  .service-grid h3 { font-size: 20px; margin: 0 0 20px; padding-top: 8px; }
  .service-grid p { clear: both; font-size: 14px; line-height: 24px; }
  .voice { height: 522px; padding: 40px 0 50px; overflow: hidden; }
  .voice-stage { width: 100%; display: block; }
  .voice-arrow { display: none; }
  .voice-window { height: 360px; overflow-x: auto; padding-left: 16px; }
  .voice-track {
    display: flex;
    gap: 16px;
    transform: none;
    transition: none;
  }
  .voice-card {
    width: 276px;
    height: 330px;
    flex: 0 0 276px;
    padding: 20px 20px 0;
  }
  .voice-clone { display: none; }
  .voice-card .quote { width: 70px; height: 70px; margin-left: -10px; }
  .voice-card p { height: 100px; margin-left: 0; font-size: 14px; line-height: 24px; }
  .voice-card div { margin-left: -8px; margin-top: 40px; }
  .voice-card div img { width: 68px; height: 68px; }
  .voice-card strong { font-size: 16px; }
  .footer-cta { height: 360px; padding: 0 20px; text-align: center; }
  .footer-cta h2 { font-size: 26px; line-height: 1.35; }
  .footer-cta-row { flex-wrap: wrap; gap: 16px; }
  .footer-cta-actions { flex-wrap: wrap; justify-content: center; }
  .footer-qr { width: 96px; height: 96px; }
  .footer-main { min-width: 0; padding: 44px 20px 28px; }
  .footer-links { gap: 26px; flex-wrap: wrap; justify-content: center; }
  .modal-panel { width: calc(100vw - 32px); }
}

.nav-item.active,
.nav-link.active,
.mega-menu a.active {
  color: var(--green);
}

.about-page {
  background: #fff;
}

.about-hero {
  position: relative;
  min-width: 1200px;
  height: 420px;
  background:
    radial-gradient(circle at 18% 18%, rgba(209, 139, 255, .16), transparent 34%),
    radial-gradient(circle at 84% 26%, rgba(155, 92, 255, .14), transparent 30%),
    #fff;
  overflow: hidden;
}

.about-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -120px;
  width: 1180px;
  height: 260px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(247, 248, 250, 0), #f7f8fa);
  border-radius: 50%;
}

.about-hero-inner {
  position: relative;
  z-index: 1;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.about-hero h1 {
  margin: 0;
  font-size: 56px;
  line-height: 1.15;
  font-weight: 600;
}

.about-hero p:not(.eyebrow) {
  width: 720px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 36px;
}

.about-intro {
  width: 1200px;
  margin: 0 auto;
  padding: 86px 0 92px;
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 72px;
  align-items: center;
}

.about-intro-copy h2,
.team-copy h2,
.timeline-section h2,
.map-copy h2 {
  margin: 0 0 24px;
  font-size: 42px;
  line-height: 1.24;
  font-weight: 600;
}

.about-intro-copy p:not(.eyebrow),
.team-copy p,
.timeline article p,
.map-copy p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 18px;
  line-height: 34px;
}

.about-photo-grid {
  height: 520px;
  display: grid;
  grid-template-columns: 1fr 260px;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}

.about-photo-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .08);
}

.about-photo-grid .photo-large {
  grid-row: 1 / 3;
}

.about-values {
  min-width: 1200px;
  padding: 76px 0;
  background: var(--soft);
  display: grid;
  grid-template-columns: repeat(4, 270px);
  justify-content: center;
  gap: 30px;
}

.value-card {
  min-height: 250px;
  padding: 30px 28px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(155, 92, 255, .14);
}

.value-card strong {
  color: var(--green);
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
}

.value-card h3 {
  margin: 28px 0 14px;
  font-size: 24px;
  font-weight: 600;
}

.value-card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 30px;
}

.team-section {
  width: 1200px;
  margin: 0 auto;
  padding: 92px 0 96px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: center;
}

.team-visual {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(155, 92, 255, .08), rgba(209, 139, 255, .14));
  overflow: hidden;
}

.team-visual > img:first-child {
  position: absolute;
  top: 28px;
  left: 34px;
  width: 92px;
}

.team-visual > img:last-child {
  position: absolute;
  right: 34px;
  bottom: 28px;
  width: 92px;
}

.team-logo-row {
  width: 80%;
  height: auto;
  filter: invert(46%) sepia(66%) saturate(1847%) hue-rotate(232deg) brightness(104%) contrast(96%);
  opacity: .58;
}

.timeline-section {
  min-width: 1200px;
  padding: 88px 0 110px;
  text-align: center;
  background: #fff;
}

.timeline {
  position: relative;
  width: 980px;
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 100px;
  right: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(155, 92, 255, .18), rgba(155, 92, 255, .85), rgba(209, 139, 255, .2));
}

.timeline article {
  position: relative;
  z-index: 1;
  padding: 0 18px;
}

.timeline article span {
  width: 68px;
  height: 68px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-gradient);
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(155, 92, 255, .28);
}

.timeline article h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
}

.contact-hero {
  height: 390px;
}

.contact-panel {
  position: relative;
  width: 1200px;
  min-height: 430px;
  margin: -56px auto 90px;
  padding: 56px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 58px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(155, 92, 255, .9), rgba(209, 139, 255, .72));
  box-shadow: 0 22px 60px rgba(155, 92, 255, .2);
  overflow: hidden;
}

.contact-panel::before,
.contact-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}

.contact-panel::before {
  width: 360px;
  height: 360px;
  left: -110px;
  top: -160px;
}

.contact-panel::after {
  width: 300px;
  height: 300px;
  right: -100px;
  bottom: -130px;
}

.contact-card-main,
.contact-info-list {
  position: relative;
  z-index: 1;
}

.contact-card-main {
  color: #fff;
}

.contact-card-main .eyebrow {
  color: rgba(255, 255, 255, .76);
}

.contact-card-main h2 {
  margin: 0 0 22px;
  font-size: 48px;
  font-weight: 600;
}

.contact-card-main p:not(.eyebrow) {
  margin: 0 0 46px;
  font-size: 20px;
  line-height: 36px;
}

.contact-info-list {
  display: grid;
  gap: 18px;
}

.contact-info-list article {
  min-height: 104px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}

.contact-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background-color: rgba(155, 92, 255, .12);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  filter: hue-rotate(84deg) saturate(1.65);
}

.contact-icon.mail {
  background-image: url(assets/about/contact-mail.svg);
}

.contact-icon.location {
  background-image: url(assets/about/contact-location.svg);
}

.contact-info-list h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

.contact-info-list p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.map-section {
  width: 1200px;
  margin: 0 auto;
  padding: 0 0 110px;
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 70px;
  align-items: center;
}

.contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.contact-tags span {
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  color: var(--green);
  background: rgba(155, 92, 255, .1);
  font-weight: 500;
}

.map-card {
  position: relative;
  height: 430px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 58% 48%, rgba(155, 92, 255, .2), transparent 24%),
    linear-gradient(135deg, #f9f7ff, #fff);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(155, 92, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 92, 255, .12) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, #000, transparent 75%);
}

.map-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 360px;
  height: 210px;
  transform: translate(-50%, -50%) rotate(-12deg);
  border: 2px dashed rgba(155, 92, 255, .35);
  border-radius: 50%;
}

.map-marker {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 2;
  width: 210px;
  padding: 22px;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(155, 92, 255, .18);
}

.map-marker span {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  display: block;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 0 0 12px rgba(155, 92, 255, .13);
}

.map-marker strong {
  display: block;
  font-size: 22px;
  font-weight: 600;
}

.map-marker p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 900px) {
  .about-hero,
  .about-values,
  .timeline-section {
    min-width: 0;
  }

  .about-hero {
    height: auto;
    padding: 72px 18px 64px;
  }

  .about-hero-inner,
  .about-intro,
  .team-section,
  .map-section,
  .contact-panel {
    width: auto;
  }

  .about-hero-inner {
    height: auto;
  }

  .about-hero h1 {
    font-size: 38px;
  }

  .about-hero p:not(.eyebrow) {
    width: auto;
    font-size: 17px;
    line-height: 30px;
  }

  .about-intro,
  .team-section,
  .map-section {
    padding: 54px 18px;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about-intro-copy h2,
  .team-copy h2,
  .timeline-section h2,
  .map-copy h2 {
    font-size: 32px;
  }

  .about-photo-grid {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .about-photo-grid .photo-large {
    grid-row: auto;
  }

  .about-photo-grid img {
    height: 260px;
  }

  .about-values {
    padding: 48px 18px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .timeline {
    width: auto;
    margin: 38px 18px 0;
    grid-template-columns: 1fr;
  }

  .timeline::before {
    display: none;
  }

  .contact-panel {
    margin: -40px 18px 54px;
    padding: 32px 22px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-card-main h2 {
    font-size: 36px;
  }

  .map-card {
    height: 320px;
  }
}

.clone-about {
  background: #fff;
}

.clone-about .site-header {
  position: sticky;
}

.company-clone-main {
  width: 1200px;
  margin: 0 auto;
  padding: 126px 0 80px;
  background: #fff;
}

.company-intro-block {
  display: grid;
  grid-template-columns: 430px 1fr;
  column-gap: 192px;
  align-items: start;
}

.company-intro-block h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1.18;
  font-weight: 500;
}

.company-intro-text {
  padding-top: 2px;
}

.company-intro-text p {
  margin: 0 0 54px;
  color: rgba(17, 17, 17, .86);
  font-size: 18px;
  line-height: 32px;
}

.company-gallery {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 486px 690px;
  column-gap: 24px;
  align-items: start;
}

.company-gallery img {
  display: block;
  object-fit: cover;
}

.gallery-tall {
  width: 486px;
  height: 648px;
}

.company-gallery-right > img:first-child {
  width: 690px;
  height: 461px;
  margin-top: 74px;
}

.company-gallery-right .gallery-large {
  width: 490px;
  height: 651px;
  margin-top: 24px;
}

.quote-copy {
  width: 404px;
  margin-top: 110px;
}

.quote-mark {
  height: 82px;
  color: rgba(17, 17, 17, .06);
  font-family: Georgia, serif;
  font-size: 128px;
  line-height: 1;
}

.quote-copy p,
.company-note p,
.company-team-clone p,
.history-list p {
  margin: 0;
  color: rgba(17, 17, 17, .86);
  font-size: 18px;
  line-height: 32px;
}

.company-note {
  width: 480px;
  margin: 56px 0 0 10px;
}

.company-note img:first-child {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}

.company-note img:last-child {
  width: 48px;
  height: 48px;
  margin-top: 12px;
  margin-left: auto;
}

.company-team-clone {
  margin-top: 76px;
  padding-top: 68px;
  display: grid;
  grid-template-columns: 340px 1fr;
  column-gap: 90px;
  border-top: 1px solid rgba(17, 17, 17, .08);
}

.company-team-clone h2,
.company-investor h2,
.company-history h2 {
  margin: 0 0 28px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
}

.company-team-clone p {
  grid-column: 2;
}

.company-team-clone img {
  grid-column: 2;
  width: 100%;
  height: 100px;
  margin-top: 26px;
  object-fit: contain;
}

.company-investor {
  padding: 82px 0 60px;
  text-align: center;
}

.investor-card {
  width: 760px;
  height: 104px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  color: var(--green);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
}

.company-history {
  padding: 10px 0 60px;
  text-align: center;
}

.history-list {
  width: 900px;
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.history-list article {
  padding: 28px 24px 30px;
  border-radius: 8px;
  background: var(--soft);
  text-align: left;
}

.history-list strong {
  display: block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 30px;
  font-weight: 700;
}

.contact-clone-main {
  min-height: calc(100vh - 60px);
  background: #fff;
}

.contact-green-band {
  height: 310px;
  background: var(--brand-gradient);
}

.contact-white-card {
  width: 1200px;
  height: 380px;
  margin: -160px auto 0;
  padding: 98px 102px;
  display: grid;
  grid-template-columns: 430px 1fr;
  column-gap: 110px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

.contact-left-list {
  display: grid;
  gap: 34px;
  align-content: start;
}

.contact-row {
  display: flex;
  align-items: center;
  color: #111;
  font-size: 18px;
  line-height: 24px;
}

.contact-link {
  padding: 0;
  color: var(--green);
  background: transparent;
  font-size: 18px;
}

.contact-black-icon {
  width: 24px;
  height: 24px;
  margin-right: 16px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

.contact-black-icon.headset {
  background-image: url(assets/about/contact-customer.svg);
  filter: brightness(0);
}

.contact-black-icon.mail {
  background-image: url(assets/about/contact-mail.svg);
  filter: brightness(0);
}

.contact-black-icon.location {
  background-image: url(assets/about/contact-location.svg);
  filter: brightness(0);
}

.copy-mini {
  width: 14px;
  height: 17px;
  margin-left: 10px;
}

.qr-list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 40px;
}

.qr-list article {
  width: 128px;
  text-align: center;
}

.qr-list img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.qr-list p {
  margin: 12px 0 0;
  color: rgba(17, 17, 17, .76);
  font-size: 14px;
  line-height: 20px;
}

.qr-list.single-qr {
  justify-content: center;
  align-items: center;
  padding-top: 0;
}

.qr-list.single-qr article {
  width: 168px;
}

.qr-list.single-qr img {
  width: 132px;
  height: 132px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.qr-list.single-qr p {
  margin-top: 14px;
  font-size: 16px;
}

.qr-list.single-qr .qr-contact {
  color: rgba(17, 17, 17, .86);
  font-size: 15px;
  white-space: nowrap;
}

.contact-footer-clone {
  width: 1200px;
  margin: 98px auto 0;
  padding-bottom: 78px;
}

.footer-brand-title {
  float: left;
  width: 230px;
  margin-right: 82px;
  font-size: 30px;
  line-height: 42px;
  font-weight: 700;
}

.contact-footer-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 42px;
  min-height: 230px;
}

.contact-footer-links h4 {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

.contact-footer-links a {
  display: block;
  margin-bottom: 16px;
  color: rgba(17, 17, 17, .56);
  font-size: 14px;
  line-height: 20px;
}

.contact-record {
  clear: both;
  margin-top: 58px;
  padding-top: 18px;
  border-top: 1px solid rgba(17, 17, 17, .12);
  color: rgba(17, 17, 17, .56);
  text-align: center;
  font-size: 12px;
  line-height: 24px;
}

.contact-record p {
  margin: 0;
}

@media (max-width: 900px) {
  .company-clone-main {
    width: auto;
    padding: 72px 18px 54px;
  }

  .company-intro-block,
  .company-gallery,
  .company-team-clone,
  .history-list,
  .contact-white-card,
  .contact-footer-links {
    grid-template-columns: 1fr;
  }

  .company-intro-block h1 {
    font-size: 40px;
    margin-bottom: 28px;
  }

  .company-intro-text p {
    margin-bottom: 26px;
  }

  .company-gallery {
    margin-top: 44px;
  }

  .gallery-tall,
  .company-gallery-right > img:first-child,
  .company-gallery-right .gallery-large {
    width: 100%;
    height: auto;
    margin-top: 18px;
  }

  .quote-copy,
  .company-note,
  .history-list,
  .investor-card {
    width: auto;
  }

  .company-team-clone p,
  .company-team-clone img {
    grid-column: auto;
  }

  .contact-green-band {
    height: 260px;
  }

  .contact-white-card {
    width: auto;
    height: auto;
    margin: -120px 18px 0;
    padding: 42px 28px;
    gap: 36px;
  }

  .qr-list {
    padding-top: 0;
    gap: 16px;
  }

  .contact-footer-clone {
    width: auto;
    margin: 60px 18px 0;
  }

  .footer-brand-title {
    float: none;
    width: auto;
    margin: 0 0 32px;
  }
}


/* Company page: fbmms.cn compatible team, investor and history sections */
.fbmms-like-team {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 90px;
  padding: 78px 0 86px;
  background: #f5f6f8;
}

.fbmms-team-copy {
  width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  column-gap: 130px;
  align-items: start;
}

.fbmms-team-copy h2,
.fbmms-like-investor h2,
.fbmms-like-history h2 {
  margin: 0;
  color: #111;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
}

.fbmms-team-copy h2 { text-align: left; }

.fbmms-team-copy p {
  margin: 0 0 52px;
  color: rgba(17, 17, 17, .86);
  font-size: 18px;
  line-height: 32px;
  text-align: center;
}

.fbmms-team-copy img {
  width: 640px;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: .5;
}

.fbmms-like-investor {
  width: 1200px;
  margin: 94px auto 0;
  text-align: center;
}

.investor-logo-grid {
  width: 820px;
  margin: 68px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  row-gap: 58px;
  column-gap: 74px;
}

.investor-logo {
  min-width: 168px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.investor-logo.sequoia { font-size: 31px; letter-spacing: 5px; }
.investor-logo.jinsha { font-size: 28px; font-weight: 600; }
.investor-logo.redpoint { gap: 10px; font-size: 30px; }
.investor-logo.redpoint i {
  width: 54px;
  height: 28px;
  display: inline-block;
  clip-path: polygon(0 100%, 78% 0, 100% 100%);
  background: #d7182a;
}
.investor-logo.shunwei {
  width: 70px;
  min-width: 70px;
  height: 70px;
  color: #d2a94a;
  background: #111;
  font-size: 24px;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
}
.investor-logo.miracle { color: #2b71e8; font-size: 27px; }
.investor-logo.future {
  width: 138px;
  min-width: 138px;
  height: 64px;
  color: #fff;
  background: #cc2535;
  font-size: 15px;
  font-weight: 500;
}
.investor-logo.leonis { font-size: 27px; line-height: .92; text-align: left; }

.fbmms-like-history {
  width: 1200px;
  margin: 94px auto 0;
  padding-bottom: 0;
}

.company-footer-clone {
  margin-top: 92px;
}

.about-join-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 88px;
}

.about-join-band.contact-clone-main {
  min-height: auto;
}

.about-join-card {
  margin-bottom: 0;
}

.history-axis {
  position: relative;
  width: 860px;
  margin: 56px auto 0;
  padding: 4px 0 10px;
}

.history-axis::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 24px;
  left: 50%;
  width: 1px;
  transform: translateX(-.5px);
  background: rgba(17, 17, 17, .16);
}

.history-node {
  position: relative;
  min-height: 122px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.history-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid var(--green);
  background: #fff;
  z-index: 2;
}

.history-card {
  width: 326px;
  min-height: 96px;
  padding: 20px 24px 18px;
  border-radius: 4px;
  background: rgba(155, 92, 255, .055);
  text-align: left;
}

.history-node.left .history-card { grid-column: 1; justify-self: end; margin-right: 38px; }
.history-node.right .history-card { grid-column: 2; justify-self: start; margin-left: 38px; }

.history-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--green);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

.history-card p {
  margin: 0;
  color: rgba(17, 17, 17, .86);
  font-size: 19px;
  line-height: 30px;
  font-weight: 600;
}

.mini-icon,
.mini-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
  vertical-align: middle;
}

.mini-icon {
  width: 22px;
  height: 22px;
  border: 2px solid var(--green);
  border-radius: 4px;
  line-height: 1;
}

.mini-icon.flask,
.mini-icon.bot,
.mini-icon.video {
  border: 0;
  font-size: 20px;
}

.mini-logo {
  min-width: 44px;
  height: 20px;
  color: #fff;
  background: var(--green);
  border-radius: 2px;
  font-size: 10px;
}

.mini-logo.red { background: #d7182a; }
.mini-logo.purple { background: var(--brand-gradient); min-width: 60px; }

/* Product promotion page */
.promo-page {
  background: #fff;
}

.promo-page .site-header {
  top: 32px;
}

.promo-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
  font-size: 13px;
  background: var(--brand-gradient);
  overflow: hidden;
}

.promo-topbar::before,
.promo-topbar::after {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.promo-topbar::before { left: 14%; top: -62px; }
.promo-topbar::after { right: 11%; top: -48px; }

.promo-topbar a {
  position: relative;
  z-index: 1;
  height: 22px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--green);
  font-weight: 600;
}

.promo-hero {
  min-width: 1200px;
  height: 860px;
  background:
    radial-gradient(circle at 82% 18%, rgba(209, 139, 255, .16), transparent 22%),
    radial-gradient(circle at 12% 86%, rgba(155, 92, 255, .08), transparent 30%),
    #fff;
}

.promo-hero-inner {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding-top: 132px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.promo-hero-title p {
  margin: 0 0 18px;
  color: rgba(17, 17, 17, .5);
  font-size: 18px;
}

.promo-hero-title h1 {
  margin: 0;
  font-size: 58px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: 0;
}

.promo-hero-copy {
  padding-top: 28px;
}

.promo-hero-copy p {
  width: 470px;
  margin: 0 0 32px;
  color: rgba(17, 17, 17, .62);
  font-size: 18px;
  line-height: 1.8;
}

.promo-hero-copy a,
.promo-fit a,
.promo-case-grid a,
.process-panels a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
}

.promo-hero-copy a span {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: transparent;
}

.promo-wave {
  height: 560px;
  margin-top: -120px;
  background:
    linear-gradient(168deg, #f5f6f8 0 64%, transparent 64%),
    radial-gradient(ellipse at 76% 72%, rgba(209, 139, 255, .26), transparent 46%),
    linear-gradient(96deg, rgba(122, 75, 217, .12), rgba(209, 139, 255, .34));
  filter: saturate(1.05);
}

.promo-definition,
.promo-fit,
.promo-advantage,
.promo-process,
.promo-result,
.promo-cases,
.promo-faq {
  width: 1200px;
  margin: 0 auto;
  padding: 98px 0;
}

.promo-section-head {
  display: grid;
  grid-template-columns: 420px 1fr;
  column-gap: 80px;
  align-items: start;
  margin-bottom: 52px;
}

.promo-section-head > span,
.promo-faq-title > span {
  color: rgba(17, 17, 17, .42);
  font-size: 18px;
}

.promo-section-head h2 {
  margin: 0;
  font-size: 42px;
  line-height: 1.22;
  font-weight: 500;
}

.promo-section-head p,
.promo-lead {
  margin: 24px 0 0;
  color: rgba(17, 17, 17, .62);
  font-size: 18px;
  line-height: 1.85;
}

.promo-lead {
  width: 760px;
  margin: -22px 0 52px 500px;
}

.promo-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(17, 17, 17, .1);
  border-left: 1px solid rgba(17, 17, 17, .1);
}

.promo-capability-grid article {
  min-height: 380px;
  padding: 34px 28px;
  border-right: 1px solid rgba(17, 17, 17, .1);
  border-bottom: 1px solid rgba(17, 17, 17, .1);
  transition: background .24s ease, transform .24s ease;
}

.promo-capability-grid article:hover {
  background: rgba(155, 92, 255, .05);
  transform: translateY(-4px);
}

.promo-capability-grid i,
.promo-result-grid strong {
  display: block;
  margin-bottom: 42px;
  color: var(--green);
  font-style: normal;
  font-size: 22px;
  font-weight: 700;
}

.promo-capability-grid h3,
.promo-fit h3,
.promo-advantage h3,
.promo-result h3,
.promo-case-grid h3 {
  margin: 0 0 18px;
  font-size: 26px;
  line-height: 1.32;
  font-weight: 500;
}

.promo-capability-grid p,
.promo-fit p,
.promo-advantage p,
.promo-result p,
.promo-case-grid p {
  margin: 0;
  color: rgba(17, 17, 17, .58);
  font-size: 16px;
  line-height: 1.8;
}

.promo-capability-grid ul {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: rgba(17, 17, 17, .72);
  font-size: 15px;
}

.promo-capability-grid li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 10px;
  display: inline-block;
  border-radius: 50%;
  background: var(--green);
  vertical-align: middle;
}

.promo-fit {
  min-width: 1200px;
  width: 100%;
  padding-left: calc((100% - 1200px) / 2);
  padding-right: calc((100% - 1200px) / 2);
  background: #f5f6f8;
}

.promo-fit-grid,
.promo-advantage-grid,
.promo-result-grid,
.promo-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.promo-fit-grid article {
  min-height: 280px;
  padding: 42px 38px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 12px 34px rgba(30, 24, 48, .06);
}

.promo-fit-grid a {
  margin-top: 44px;
}

.promo-advantage-grid article,
.promo-result-grid article,
.promo-case-grid article {
  min-height: 270px;
  padding: 38px 32px;
  border: 1px solid rgba(17, 17, 17, .1);
  border-radius: 4px;
  background: #fff;
}

.promo-advantage-grid b {
  display: inline-flex;
  height: 28px;
  padding: 0 12px;
  margin-bottom: 28px;
  align-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand-gradient);
  font-size: 14px;
}

.promo-process {
  width: 100%;
  min-width: 1200px;
  padding-left: calc((100% - 1200px) / 2);
  padding-right: calc((100% - 1200px) / 2);
  background: #f5f6f8;
}

.process-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid rgba(17, 17, 17, .14);
}

.process-tabs button {
  height: 74px;
  padding: 0 16px;
  color: rgba(17, 17, 17, .46);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 18px;
  text-align: left;
}

.process-tabs button.active {
  color: var(--green);
  border-color: var(--green);
}

.process-panels {
  position: relative;
  min-height: 360px;
  padding-top: 48px;
}

.process-panels article {
  display: none;
  width: 760px;
  min-height: 300px;
  padding: 42px 50px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(30, 24, 48, .08);
}

.process-panels article.active {
  display: block;
  animation: fadeUp .32s ease both;
}

.process-panels h3 {
  margin: 0 0 20px;
  font-size: 34px;
  font-weight: 500;
}

.process-panels p {
  margin: 0 0 28px;
  color: rgba(17, 17, 17, .62);
  font-size: 17px;
  line-height: 1.85;
}

.process-panels dl {
  margin: 0 0 28px;
}

.process-panels dt {
  color: rgba(17, 17, 17, .38);
  font-size: 14px;
}

.process-panels dd {
  margin: 8px 0 0;
  font-size: 16px;
}

.promo-cases {
  width: 100%;
  min-width: 1200px;
  padding-left: calc((100% - 1200px) / 2);
  padding-right: calc((100% - 1200px) / 2);
  background: #f5f6f8;
}

.promo-case-grid small {
  display: block;
  margin-bottom: 56px;
  color: var(--green);
  font-size: 15px;
}

.promo-case-grid a {
  margin-top: 34px;
}

.promo-faq {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 76px;
}

.promo-faq-title h2 {
  margin: 22px 0 86px;
  font-size: 42px;
  line-height: 1.18;
  font-weight: 500;
}

.promo-faq-title a {
  color: var(--green);
  font-size: 17px;
  font-weight: 600;
}

.promo-faq-title a span {
  width: 22px;
  height: 22px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-gradient);
}

.promo-faq-list {
  border-top: 1px solid rgba(17, 17, 17, .14);
}

.promo-faq-list article {
  border-bottom: 1px solid rgba(17, 17, 17, .14);
}

.promo-faq-list button {
  width: 100%;
  min-height: 104px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.promo-faq-list button span {
  font-size: 24px;
  font-weight: 500;
}

.promo-faq-list i {
  width: 22px;
  height: 22px;
  position: relative;
}

.promo-faq-list i::before,
.promo-faq-list i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background: rgba(17, 17, 17, .5);
  transform: translate(-50%, -50%);
}

.promo-faq-list i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.promo-faq-list p {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(17, 17, 17, .5);
  font-size: 17px;
  line-height: 1.8;
  transition: max-height .28s ease, margin .28s ease;
}

.promo-faq-list article.active button span {
  color: var(--green);
}

.promo-faq-list article.active i::after {
  display: none;
}

.promo-faq-list article.active p {
  max-height: 180px;
  margin: -12px 72px 36px 0;
}

.promo-contact {
  min-width: 1200px;
  height: 520px;
  padding-top: 92px;
  background: var(--brand-gradient);
}

.promo-contact-card {
  width: 1200px;
  height: 330px;
  margin: 0 auto;
  padding: 58px 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 42px rgba(42, 28, 86, .12);
}

.promo-contact-card span {
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
}

.promo-contact-card h2 {
  margin: 18px 0;
  font-size: 38px;
  font-weight: 500;
}

.promo-contact-card p {
  margin: 0;
  color: rgba(17, 17, 17, .58);
  font-size: 18px;
}

.promo-contact-card img {
  width: 150px;
  height: 150px;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.promo-footer .footer-main {
  padding-top: 62px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .promo-page .site-header { top: 32px; }
  .promo-topbar { padding: 0 12px; font-size: 12px; }
  .promo-hero,
  .promo-fit,
  .promo-process,
  .promo-cases,
  .promo-contact { min-width: 0; }
  .promo-hero { height: auto; padding: 72px 20px 140px; }
  .promo-hero-inner {
    width: 100%;
    height: auto;
    padding-top: 0;
    display: block;
  }
  .promo-hero-title h1 { font-size: 42px; }
  .promo-hero-copy p { width: auto; font-size: 16px; }
  .promo-wave { height: 260px; margin-top: -70px; }
  .promo-definition,
  .promo-fit,
  .promo-advantage,
  .promo-process,
  .promo-result,
  .promo-cases,
  .promo-faq {
    width: auto;
    padding: 56px 20px;
  }
  .promo-section-head,
  .promo-faq {
    display: block;
  }
  .promo-section-head h2,
  .promo-faq-title h2 { font-size: 30px; }
  .promo-lead { width: auto; margin: 0 0 34px; }
  .promo-capability-grid,
  .promo-fit-grid,
  .promo-advantage-grid,
  .promo-result-grid,
  .promo-case-grid {
    display: block;
  }
  .promo-capability-grid article,
  .promo-fit-grid article,
  .promo-advantage-grid article,
  .promo-result-grid article,
  .promo-case-grid article {
    min-height: 0;
    margin-bottom: 18px;
  }
  .process-tabs {
    display: flex;
    overflow-x: auto;
  }
  .process-tabs button {
    flex: 0 0 160px;
    font-size: 15px;
  }
  .process-panels article {
    width: auto;
    padding: 30px 22px;
  }
  .promo-faq-title h2 { margin-bottom: 24px; }
  .promo-faq-list button span { font-size: 18px; }
  .promo-faq-list article.active p { margin: -4px 0 28px; font-size: 15px; }
  .promo-contact { height: auto; padding: 56px 20px; }
  .promo-contact-card {
    width: auto;
    height: auto;
    display: block;
    padding: 34px 24px;
  }
  .promo-contact-card h2 { font-size: 28px; }
  .promo-contact-card img { margin-top: 28px; }
}

@media (max-width: 900px) {
  .fbmms-like-team,
  .fbmms-like-investor,
  .fbmms-like-history,
  .fbmms-team-copy,
  .history-axis {
    width: auto;
  }

  .fbmms-like-team { margin-top: 54px; padding: 48px 18px; }
  .fbmms-team-copy { grid-template-columns: 1fr; gap: 28px; }
  .fbmms-team-copy p { text-align: left; }
  .fbmms-team-copy img { width: 100%; }
  .fbmms-like-investor { margin: 58px 18px 0; }
  .investor-logo-grid { width: auto; grid-template-columns: 1fr; gap: 30px; }
  .fbmms-like-history { margin: 58px 18px 0; }
  .history-axis::before { left: 12px; }
  .history-node { min-height: 0; margin-bottom: 20px; display: block; padding-left: 38px; }
  .history-node::before { left: 12px; }
  .history-card,
  .history-node.left .history-card,
  .history-node.right .history-card { width: auto; margin: 0; }
}

/* Product promotion page - GrowthMan fidelity pass */
.promo-page {
  --gm-accent: #9b5cff;
  --gm-accent-2: #c06bff;
  --gm-bg: #f5f7f9;
  --gm-text: #333;
  --gm-muted: #999;
  --gm-line: #eaeaea;
  min-width: 1200px;
  color: var(--gm-text);
  background: #fff;
}

.promo-page .promo-topbar {
  height: 34px;
  padding: 0 calc((100% - min(1200px, 85vw)) / 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(90deg, #7f4bf2 0%, #a15fff 50%, #c875ff 100%);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 34px;
  white-space: nowrap;
}

.promo-page .promo-topbar a {
  height: 24px;
  min-width: 108px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #9b5cff;
  background: rgba(255, 255, 255, .92);
  font-weight: 500;
  line-height: 24px;
  box-shadow: none;
}

.promo-page .site-header {
  top: 34px;
  height: 60px;
  border-bottom: 1px solid #eee;
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
}

body.promo-page > .site-header {
  top: 34px;
}

.promo-page .header-inner {
  width: min(1600px, calc(100% - 48px));
  max-width: 1600px;
  height: 60px;
}

.promo-page .nav {
  gap: clamp(10px, 1vw, 18px);
  margin-right: clamp(12px, 1.1vw, 20px);
  font-size: 16px;
}

.promo-page .nav-link,
.promo-page .nav-item {
  color: #111;
  white-space: nowrap;
  font-size: clamp(14px, .82vw, 16px);
}

.promo-page .nav-link:hover,
.promo-page .nav-item:hover,
.promo-page .mega-menu a.active,
.promo-page .mega-menu a:hover {
  color: var(--gm-accent);
}

.promo-page .pill.small,
.promo-page .promo-cta {
  min-width: auto;
  height: 38px;
  padding: 0 clamp(16px, 1.2vw, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #8752f6 0%, #b061ff 100%);
  box-shadow: 0 14px 28px rgba(155, 92, 255, .28);
  color: #fff;
  font-size: clamp(14px, .86vw, 16px);
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  transform: none;
}

.promo-page .header-actions {
  height: 60px;
  display: flex;
  align-items: center;
  gap: clamp(8px, .8vw, 12px);
  flex: 0 0 auto;
}

.promo-page .header-actions .promo-cta:hover {
  transform: none;
  background: linear-gradient(90deg, #9460ff 0%, #c16dff 100%);
  box-shadow: 0 14px 28px rgba(155, 92, 255, .32);
}

.promo-page .brand-logo {
  width: 34px;
  height: 34px;
}

.promo-page .brand-text {
  font-size: 22px;
}

.promo-page main {
  padding-top: 94px;
  background: #fff;
}

.promo-page .promo-hero {
  height: calc(100vh - 94px);
  min-height: 820px;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #111;
}

.promo-page .promo-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.02);
}

.promo-page .promo-hero-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .76) 0%, rgba(255, 255, 255, .50) 46%, rgba(255, 255, 255, .68) 100%),
    radial-gradient(circle at 73% 45%, rgba(155, 92, 255, .16), transparent 26%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.promo-page .promo-hero::after {
  display: none;
}

.promo-page .promo-hero-inner {
  width: 85%;
  max-width: 1440px;
  height: auto;
  margin: 0 auto;
  padding-top: 170px;
  display: grid;
  grid-template-columns: minmax(640px, 52%) minmax(440px, 38%);
  gap: 6%;
  align-items: start;
  position: relative;
  z-index: 1;
}

.promo-page .promo-hero-title p {
  margin: 0 0 28px;
  color: var(--gm-accent);
  font-size: 24px;
  font-weight: 600;
}

.promo-page .promo-hero-title h1 {
  margin: 0;
  color: #111;
  font-size: 64px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.promo-page .promo-hero-title h1 span,
.promo-page .promo-section-head h2 span,
.promo-page .promo-faq-title h2 span,
.promo-page .promo-contact-card h2 span {
  display: block;
  white-space: nowrap;
}

.promo-page .promo-hero-copy {
  margin: 0;
  padding-top: 110px;
}

.promo-page .promo-hero-copy p {
  width: auto;
  margin: 0;
  color: rgba(17, 17, 17, .86);
  font-size: 20px;
  line-height: 1.65;
}

.promo-page .promo-hero-action {
  margin-top: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.promo-page .promo-hero-copy a {
  color: var(--gm-accent);
  font-size: 18px;
}

.promo-page .promo-hero-copy a span {
  width: 22px;
  height: 22px;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--gm-accent);
  font-size: 12px;
}

.promo-page .promo-hero-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.promo-page .promo-hero-qr img {
  width: 150px;
  height: 150px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 28px rgba(50, 32, 120, .12);
  object-fit: contain;
}

.promo-page .promo-hero-qr p {
  margin: 0;
  color: rgba(17, 17, 17, .86);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.promo-page .promo-wave {
  display: none;
}

.promo-page .promo-wave::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}

.promo-page .promo-wave::after {
  content: "DIGITAL MARKETING";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, .78);
  font-size: clamp(48px, 6.2vw, 112px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.promo-page .promo-wave-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: saturate(1) contrast(1);
}

.promo-page .promo-definition,
.promo-page .promo-advantage,
.promo-page .promo-process,
.promo-page .promo-result,
.promo-page .promo-cases,
.promo-page .promo-faq {
  width: 85%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 145px 0 0;
}

.promo-page .promo-fit,
.promo-page .promo-advantage,
.promo-page .promo-process,
.promo-page .promo-cases {
  width: 100%;
  max-width: none;
  min-width: 1200px;
  padding-left: max(7.5%, calc((100% - 1440px) / 2));
  padding-right: max(7.5%, calc((100% - 1440px) / 2));
}

.promo-page .promo-fit {
  padding-top: 130px;
  padding-bottom: 120px;
  position: relative;
  background: #fff;
}

.promo-page .promo-fit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  background: var(--gm-bg);
  z-index: 0;
}

.promo-page .promo-fit > * {
  position: relative;
  z-index: 1;
}

.promo-page .promo-advantage {
  padding-top: 145px;
  padding-bottom: 120px;
  background: var(--gm-bg);
}

.promo-page .promo-process {
  padding-top: 120px;
  padding-bottom: 0;
  background: var(--gm-bg);
  overflow: hidden;
}

.promo-page .promo-cases {
  padding-top: 120px;
  padding-bottom: 120px;
  background: var(--gm-bg);
}

.promo-page .promo-result {
  padding-bottom: 120px;
}

.promo-page .promo-section-head {
  margin: 0 0 80px;
  padding: 0 54px 0 25px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 80px;
}

.promo-page .promo-section-head > span {
  color: var(--gm-accent);
  font-size: 18px;
  line-height: 1.5;
  white-space: nowrap;
}

.promo-page .promo-section-head h2 {
  width: 56%;
  margin: 0;
  color: var(--gm-text);
  font-size: 42px;
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.promo-page .promo-section-head p,
.promo-page .promo-lead {
  color: var(--gm-muted);
  font-size: 18px;
  line-height: 1.56;
}

.promo-page .promo-lead {
  width: 56%;
  margin: -38px 54px 78px auto;
}

.promo-page .promo-capability-grid,
.promo-page .promo-fit-grid,
.promo-page .promo-advantage-grid,
.promo-page .promo-result-grid,
.promo-page .promo-case-grid {
  display: grid;
  gap: 36px;
}

.promo-page .promo-capability-grid {
  grid-template-columns: repeat(4, 1fr);
  border: 0;
}

.promo-page .promo-capability-grid article {
  min-height: 420px;
  padding: 45px 25px 40px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gm-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .38);
  box-shadow: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.promo-page .promo-capability-grid article::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  z-index: 3;
  height: 10px;
  border-radius: 15px 15px 0 0;
  background: var(--gm-accent);
}

.promo-page .promo-capability-grid article::after,
.promo-page .promo-fit-grid article::after {
  content: "";
  position: absolute;
  inset: 10px 0 0;
  z-index: 0;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}

.promo-page .promo-fit-grid article::after {
  inset: 0;
}

.promo-page .promo-capability-grid article > *,
.promo-page .promo-fit-grid article > * {
  position: relative;
  z-index: 2;
}

.promo-page .promo-capability-grid article:hover,
.promo-page .promo-fit-grid article:hover,
.promo-page .promo-result-grid article:hover,
.promo-page .promo-case-grid article:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(15, 30, 20, .08);
}

.promo-page .promo-capability-grid i,
.promo-page .promo-result-grid strong {
  margin-bottom: 50px;
  color: var(--gm-accent);
  font-size: 22px;
}

.promo-page .promo-capability-grid h3,
.promo-page .promo-fit h3,
.promo-page .promo-advantage h3,
.promo-page .promo-result h3,
.promo-page .promo-case-grid h3 {
  color: #000;
  font-size: 26px;
  line-height: 1.32;
  font-weight: 500;
}

.promo-page .promo-capability-grid p,
.promo-page .promo-fit p,
.promo-page .promo-advantage p,
.promo-page .promo-result p,
.promo-page .promo-case-grid p {
  color: #666;
  font-size: 16px;
  line-height: 1.75;
}

.promo-page .promo-capability-grid li::before {
  background: var(--gm-accent);
}

.promo-page .promo-fit-grid {
  grid-template-columns: repeat(3, 1fr);
}

.promo-page .promo-fit-grid article {
  min-height: 330px;
  padding: 42px 34px;
  border: 1px solid var(--gm-line);
  border-radius: 15px;
  background-color: rgba(255, 255, 255, .38);
  box-shadow: 0 18px 45px rgba(12, 30, 20, .05);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: transform .25s ease, box-shadow .25s ease;
}

.promo-page .promo-capability-grid article,
.promo-page .promo-fit-grid article {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
}

.promo-page .promo-capability-grid article:nth-child(1) {
  background-image: url("assets/card-bg/card-platform.webp");
}

.promo-page .promo-capability-grid article:nth-child(2) {
  background-image: url("assets/card-bg/card-users.webp");
}

.promo-page .promo-capability-grid article:nth-child(3) {
  background-image: url("assets/card-bg/card-search.webp");
}

.promo-page .promo-capability-grid article:nth-child(4) {
  background-image: url("assets/card-bg/card-recommend.webp");
}

.promo-page .promo-fit-grid article:nth-child(1) {
  background-image: url("assets/card-bg/card-production.webp");
}

.promo-page .promo-fit-grid article:nth-child(2) {
  background-image: url("assets/card-bg/card-supplier.webp");
}

.promo-page .promo-fit-grid article:nth-child(3) {
  background-image: url("assets/card-bg/card-cro.webp");
}

.promo-page .promo-fit-grid a,
.promo-page .promo-case-grid a,
.promo-page .process-panels a {
  color: var(--gm-accent);
  font-size: 16px;
  font-weight: 500;
}

.promo-page .promo-advantage .promo-section-head p {
  width: 42%;
  margin: 0;
}

.promo-page .promo-advantage-grid {
  grid-template-columns: repeat(3, 1fr);
}

.promo-page .promo-advantage-grid article {
  height: 552px;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gm-line);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .94)),
    radial-gradient(circle at right bottom, rgba(155, 92, 255, .14), transparent 44%);
  box-shadow: none;
}

.promo-page .promo-advantage-grid article::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 210px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-top: 1px solid rgba(155, 92, 255, .10);
  pointer-events: none;
}

.promo-page .promo-advantage-grid article:nth-child(1)::after {
  background-image: url("assets/advantage-bg/advantage-scene.webp");
}

.promo-page .promo-advantage-grid article:nth-child(2)::after {
  background-image: url("assets/advantage-bg/advantage-users.webp");
}

.promo-page .promo-advantage-grid article:nth-child(3)::after {
  background-image: url("assets/advantage-bg/advantage-reputation.webp");
}

.promo-page .promo-advantage-grid b {
  height: auto;
  padding: 0;
  margin-bottom: 78px;
  color: var(--gm-accent);
  background: transparent;
  border-radius: 0;
  font-size: 18px;
}

.promo-page .process-growth {
  position: relative;
  min-height: 640px;
  padding-top: 22px;
  overflow: hidden;
}

.promo-page .process-growth::after {
  content: "";
  position: absolute;
  left: -12vw;
  right: -12vw;
  bottom: -42px;
  height: 150px;
  background: linear-gradient(90deg, rgba(155, 92, 255, .12), rgba(209, 139, 255, .20));
  filter: blur(20px);
  opacity: .52;
  pointer-events: none;
}

.promo-page .growth-curve {
  position: absolute;
  left: 50%;
  bottom: -16px;
  z-index: 5;
  width: min(1760px, 118vw);
  height: 520px;
  transform: translateX(-50%);
  pointer-events: none;
}

.promo-page .growth-curve svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.promo-page .growth-area {
  fill: url(#growthFill);
  opacity: .50;
}

.promo-page .growth-line-shadow {
  fill: none;
  stroke: rgba(155, 92, 255, .24);
  stroke-width: 15;
  filter: url(#growthGlow);
}

.promo-page .growth-line-main {
  fill: none;
  stroke: #9b5cff;
  stroke-width: 7;
  stroke-linecap: round;
}

.promo-page .process-growth-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.promo-page .process-growth-grid article {
  position: relative;
  height: 540px;
  padding: 62px 40px 48px;
  overflow: hidden;
  border: 1px solid var(--gm-line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .92) 62%, rgba(255, 255, 255, .74) 100%);
  box-shadow: 0 28px 70px rgba(35, 36, 45, .05);
}

.promo-page .process-growth-grid h3 {
  margin: 0 0 26px;
  color: #000;
  max-width: none;
  font-size: 26px;
  line-height: 1.28;
  font-weight: 500;
  white-space: nowrap;
  word-break: keep-all;
}

.promo-page .process-growth-grid p {
  margin: 0;
  max-width: 24em;
  color: #777;
  font-size: 17px;
  line-height: 1.72;
}

.promo-page .growth-markers {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.promo-page .growth-marker {
  position: absolute;
  transform: translateX(-50%);
}

.promo-page .growth-marker-short {
  left: 16.7%;
  bottom: 82px;
}

.promo-page .growth-marker-mid {
  left: 50%;
  bottom: 154px;
}

.promo-page .growth-marker-long {
  left: 83.3%;
  bottom: 288px;
}

.promo-page .growth-marker b {
  position: absolute;
  left: 50%;
  bottom: 24px;
  min-width: 78px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  border: 2px solid var(--gm-accent);
  border-radius: 999px;
  background: #fff;
  color: var(--gm-accent);
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(155, 92, 255, .16);
}

.promo-page .growth-marker span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--gm-accent);
  box-shadow: 0 0 0 2px rgba(155, 92, 255, .28);
}

.promo-page .growth-marker span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: 1px;
  height: var(--marker-line-height, 118px);
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, rgba(155, 92, 255, .45) 0 4px, transparent 4px 9px);
}

.promo-page .growth-marker-short span::after {
  --marker-line-height: 92px;
}

.promo-page .growth-marker-mid span::after {
  --marker-line-height: 164px;
}

.promo-page .growth-marker-long span::after {
  --marker-line-height: 298px;
}

.promo-page .promo-offline {
  width: 100%;
  min-width: 1200px;
  padding: 104px max(7.5%, calc((100% - 1440px) / 2)) 116px;
  scroll-margin-top: 112px;
  background:
    linear-gradient(180deg, #fff 0%, #faf8ff 100%);
}

.promo-page .promo-offline-head {
  display: grid;
  grid-template-columns: 24% minmax(0, 48%) minmax(280px, 1fr);
  gap: clamp(34px, 4vw, 64px);
  align-items: start;
  margin-bottom: 46px;
}

.promo-page .promo-offline-head > span {
  color: var(--gm-accent);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
}

.promo-page .promo-offline-head h2 {
  margin: 0;
  color: #000;
  font-size: clamp(38px, 3.4vw, 56px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: 0;
}

.promo-page .promo-offline-head h2 span {
  display: block;
  white-space: nowrap;
}

.promo-page .promo-offline-head p {
  margin: 4px 0 0;
  color: #5f5b66;
  font-size: 18px;
  line-height: 1.76;
}

.promo-page .promo-business-block {
  display: grid;
  grid-template-columns: minmax(300px, .38fr) minmax(0, 1fr);
  gap: clamp(34px, 4vw, 58px);
  align-items: start;
  margin-top: 58px;
}

.promo-page .promo-offline-head + .promo-business-block {
  margin-top: 0;
}

.promo-page .promo-business-copy {
  min-height: 100%;
  position: relative;
  overflow: hidden;
  padding: 36px 34px 248px;
  border: 1px solid rgba(155, 92, 255, .16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 84% 10%, rgba(155, 92, 255, .14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(249, 246, 255, .88));
}

.promo-page .promo-business-copy span {
  width: max-content;
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--gm-accent);
  background: rgba(155, 92, 255, .10);
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
}

.promo-page .promo-business-copy h3 {
  margin: 54px 0 22px;
  color: #07060b;
  font-size: clamp(26px, 2.1vw, 36px);
  line-height: 1.24;
  font-weight: 650;
  letter-spacing: 0;
  text-wrap: balance;
}

.promo-page .promo-business-copy p {
  margin: 0;
  color: #5f5b66;
  font-size: 17px;
  line-height: 1.76;
}

.promo-page .promo-business-visual {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  height: 178px;
  border-top: 1px solid rgba(155, 92, 255, .14);
  border-radius: 0 0 14px 14px;
  background:
    radial-gradient(circle at 74% 20%, rgba(155, 92, 255, .14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(155, 92, 255, .05));
}

.promo-page .promo-business-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

.promo-page .promo-business-visual svg rect,
.promo-page .promo-business-visual svg path,
.promo-page .promo-business-visual svg circle {
  fill: none;
  stroke: rgba(155, 92, 255, .78);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promo-page .promo-business-visual svg circle {
  fill: rgba(155, 92, 255, .08);
}

.promo-page .promo-online-business .promo-business-copy {
  background:
    radial-gradient(circle at 84% 10%, rgba(155, 92, 255, .12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .90));
}

.promo-page .promo-managed-business .promo-business-copy {
  background:
    radial-gradient(circle at 82% 12%, rgba(155, 92, 255, .18), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 244, 255, .94));
}

.promo-page .promo-business-main {
  min-width: 0;
}

.promo-page .promo-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(17, 17, 17, .10);
  border-left: 1px solid rgba(17, 17, 17, .10);
  background: rgba(255, 255, 255, .64);
  margin-bottom: 22px;
}

.promo-page .promo-detail-grid article {
  min-height: 162px;
  position: relative;
  padding: 26px 28px;
  border-right: 1px solid rgba(17, 17, 17, .10);
  border-bottom: 1px solid rgba(17, 17, 17, .10);
}

.promo-page .promo-detail-illo {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 58px;
  height: 46px;
  border-radius: 14px;
  background: rgba(155, 92, 255, .08);
}

.promo-page .promo-detail-illo::before,
.promo-page .promo-detail-illo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.promo-page .promo-detail-illo.demand::before {
  width: 24px;
  height: 16px;
  border: 2px solid var(--gm-accent);
  border-radius: 4px;
}

.promo-page .promo-detail-illo.demand::after {
  width: 24px;
  height: 2px;
  left: 64%;
  background: var(--gm-accent);
  box-shadow: 10px -8px 0 -1px rgba(155, 92, 255, .55), 10px 8px 0 -1px rgba(155, 92, 255, .55);
}

.promo-page .promo-detail-illo.research::before {
  width: 24px;
  height: 24px;
  border: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-detail-illo.research::after {
  width: 22px;
  height: 2px;
  background: var(--gm-accent);
  box-shadow: 0 -7px 0 rgba(155, 92, 255, .55), 0 7px 0 rgba(155, 92, 255, .55);
}

.promo-page .promo-detail-illo.users::before {
  width: 10px;
  height: 10px;
  top: 38%;
  border: 2px solid var(--gm-accent);
  border-radius: 50%;
  box-shadow: -14px 8px 0 -2px rgba(155, 92, 255, .58), 14px 8px 0 -2px rgba(155, 92, 255, .58);
}

.promo-page .promo-detail-illo.users::after {
  width: 32px;
  height: 12px;
  top: 70%;
  border: 2px solid var(--gm-accent);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom: 0;
}

.promo-page .promo-detail-illo.versions::before {
  width: 26px;
  height: 26px;
  border: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-detail-illo.versions::after {
  width: 34px;
  height: 12px;
  border-top: 2px solid var(--gm-accent);
  border-bottom: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-detail-illo.sample-intro::before {
  width: 26px;
  height: 18px;
  border: 2px solid var(--gm-accent);
  border-radius: 4px;
}

.promo-page .promo-detail-illo.sample-intro::after {
  width: 16px;
  height: 10px;
  top: 38%;
  border: 2px solid rgba(155, 92, 255, .58);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.promo-page .promo-detail-illo.certification::before {
  width: 22px;
  height: 28px;
  border: 2px solid var(--gm-accent);
  border-radius: 4px;
}

.promo-page .promo-detail-illo.certification::after {
  width: 10px;
  height: 10px;
  top: 64%;
  border-radius: 50%;
  background: var(--gm-accent);
}

.promo-page .promo-detail-illo.shipping::before {
  width: 28px;
  height: 20px;
  border: 2px solid var(--gm-accent);
  border-radius: 4px;
}

.promo-page .promo-detail-illo.shipping::after {
  width: 28px;
  height: 2px;
  background: var(--gm-accent);
  transform: translate(-50%, -50%) rotate(-35deg);
}

.promo-page .promo-detail-illo.field::before {
  width: 22px;
  height: 22px;
  border: 2px solid var(--gm-accent);
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -58%) rotate(-45deg);
}

.promo-page .promo-detail-illo.field::after {
  width: 30px;
  height: 12px;
  top: 70%;
  border-bottom: 2px solid var(--gm-accent);
  border-right: 2px solid var(--gm-accent);
  border-radius: 0 0 12px 0;
}

.promo-page .promo-detail-grid span {
  display: inline-block;
  margin-bottom: 22px;
  color: rgba(155, 92, 255, .72);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

.promo-page .promo-detail-grid b {
  display: block;
  color: #07060b;
  font-size: 21px;
  line-height: 1.34;
  font-weight: 650;
  text-wrap: balance;
}

.promo-page .promo-detail-grid p {
  margin: 14px 0 0;
  color: #5f5b66;
  font-size: 15px;
  line-height: 1.72;
}

.promo-page .promo-service-split {
  margin-bottom: 58px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(17, 17, 17, .12);
  border-left: 1px solid rgba(17, 17, 17, .12);
  background: rgba(255, 255, 255, .68);
}

.promo-page .promo-service-split article {
  min-height: 254px;
  position: relative;
  padding: 34px 132px 34px 34px;
  overflow: hidden;
  border-right: 1px solid rgba(17, 17, 17, .12);
  border-bottom: 1px solid rgba(17, 17, 17, .12);
}

.promo-page .promo-service-split article.featured {
  background:
    radial-gradient(circle at 84% 12%, rgba(155, 92, 255, .16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(249, 246, 255, .96));
}

.promo-page .promo-service-split span {
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--gm-accent);
  background: rgba(155, 92, 255, .10);
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
}

.promo-page .promo-service-split b {
  display: block;
  margin-top: 34px;
  color: #09070d;
  font-size: clamp(24px, 1.8vw, 32px);
  line-height: 1.25;
  font-weight: 650;
  text-wrap: balance;
}

.promo-page .promo-service-split p {
  margin: 18px 0 0;
  color: #5f5b66;
  font-size: 16px;
  line-height: 1.72;
}

.promo-page .promo-service-illo {
  position: absolute;
  right: 24px;
  top: 28px;
  width: 96px;
  height: 72px;
  display: block;
  border-radius: 22px;
  background:
    radial-gradient(circle at 75% 22%, rgba(155, 92, 255, .18), transparent 34%),
    rgba(155, 92, 255, .08);
}

.promo-page .promo-service-illo svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.promo-page .promo-service-illo svg rect,
.promo-page .promo-service-illo svg path,
.promo-page .promo-service-illo svg circle,
.promo-page .promo-service-illo svg line,
.promo-page .promo-service-illo svg polyline {
  fill: none;
  stroke: var(--gm-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promo-page .promo-service-illo svg circle {
  fill: rgba(155, 92, 255, .08);
}

.promo-page .promo-service-illo svg text {
  fill: var(--gm-accent);
  stroke: none;
  font-size: 16px;
  font-weight: 800;
  dominant-baseline: central;
}

.promo-page .promo-offline-body {
  display: grid;
  grid-template-columns: minmax(320px, .48fr) minmax(0, 1fr);
  gap: clamp(34px, 4vw, 58px);
  align-items: stretch;
}

.promo-page .promo-offline-summary {
  min-height: 486px;
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(155, 92, 255, .16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 86% 18%, rgba(155, 92, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 244, 255, .94));
}

.promo-page .promo-offline-summary b {
  width: max-content;
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--gm-accent);
  background: rgba(155, 92, 255, .10);
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
}

.promo-page .promo-offline-summary strong {
  display: block;
  margin: 70px 0 28px;
  color: #000;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.24;
  font-weight: 600;
}

.promo-page .promo-offline-summary p {
  margin: 0;
  color: #5f5b66;
  font-size: 17px;
  line-height: 1.74;
}

.promo-page .promo-offline-matrix {
  border: 1px solid rgba(155, 92, 255, .16);
  background: rgba(255, 255, 255, .76);
}

.promo-page .promo-offline-row {
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(134px, .82fr) minmax(160px, 1fr) minmax(180px, 1.08fr) minmax(126px, .72fr);
  align-items: center;
  border-bottom: 1px solid rgba(17, 17, 17, .10);
}

.promo-page .promo-offline-row:last-child {
  border-bottom: 0;
}

.promo-page .promo-offline-row > * {
  min-width: 0;
  height: 100%;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(17, 17, 17, .10);
}

.promo-page .promo-offline-row > *:last-child {
  border-right: 0;
}

.promo-page .promo-offline-row-head {
  min-height: 56px;
  color: var(--gm-accent);
  background: rgba(155, 92, 255, .08);
}

.promo-page .promo-offline-row-head span {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
}

.promo-page .promo-offline-module {
  gap: 12px;
}

.promo-page .promo-offline-module i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  position: relative;
  border: 1px solid rgba(155, 92, 255, .34);
  border-radius: 10px;
  background: rgba(155, 92, 255, .08);
}

.promo-page .promo-offline-module i::before,
.promo-page .promo-offline-module i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.promo-page .promo-offline-module i[data-icon="sample"]::before {
  width: 17px;
  height: 13px;
  border: 2px solid var(--gm-accent);
  border-radius: 3px;
}

.promo-page .promo-offline-module i[data-icon="online"]::before {
  width: 17px;
  height: 12px;
  border: 2px solid var(--gm-accent);
  border-radius: 3px;
  box-shadow: 0 12px 0 -9px var(--gm-accent);
}

.promo-page .promo-offline-module i[data-icon="online"]::after {
  width: 7px;
  height: 7px;
  left: 68%;
  top: 34%;
  border: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-offline-module i[data-icon="scene"]::before {
  width: 18px;
  height: 14px;
  border: 2px solid var(--gm-accent);
  border-radius: 4px;
}

.promo-page .promo-offline-module i[data-icon="scene"]::after {
  width: 18px;
  height: 2px;
  background: var(--gm-accent);
  box-shadow: 0 6px 0 rgba(155, 92, 255, .55);
  transform: translate(-50%, -50%) rotate(-25deg);
}

.promo-page .promo-offline-module i[data-icon="user"]::before {
  width: 9px;
  height: 9px;
  top: 38%;
  border: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-offline-module i[data-icon="user"]::after {
  width: 18px;
  height: 9px;
  top: 66%;
  border: 2px solid var(--gm-accent);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom: 0;
}

.promo-page .promo-offline-module i[data-icon="domestic"]::before {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-offline-module i[data-icon="domestic"]::after {
  width: 14px;
  height: 2px;
  background: var(--gm-accent);
  box-shadow: 0 -6px 0 rgba(155, 92, 255, .52), 0 6px 0 rgba(155, 92, 255, .52);
}

.promo-page .promo-offline-module i[data-icon="global"]::before {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-offline-module i[data-icon="global"]::after {
  width: 24px;
  height: 10px;
  border-top: 2px solid var(--gm-accent);
  border-bottom: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-offline-module i[data-icon="service"]::before {
  width: 17px;
  height: 13px;
  border: 2px solid var(--gm-accent);
  border-radius: 10px 10px 8px 8px;
}

.promo-page .promo-offline-module i[data-icon="service"]::after {
  width: 7px;
  height: 2px;
  left: 60%;
  top: 63%;
  background: var(--gm-accent);
}

.promo-page .promo-offline-module i[data-icon="cert"]::before {
  width: 16px;
  height: 20px;
  border: 2px solid var(--gm-accent);
  border-radius: 3px;
}

.promo-page .promo-offline-module i[data-icon="cert"]::after {
  width: 8px;
  height: 8px;
  top: 64%;
  border-radius: 50%;
  background: var(--gm-accent);
}

.promo-page .promo-offline-module i[data-icon="brand"]::before {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gm-accent);
  border-radius: 50% 50% 50% 4px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.promo-page .promo-offline-module i[data-icon="exclusive"]::before {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-offline-module i[data-icon="exclusive"]::after {
  width: 18px;
  height: 2px;
  background: var(--gm-accent);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.promo-page .promo-offline-module i[data-icon="visit"]::before {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gm-accent);
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -55%) rotate(-45deg);
}

.promo-page .promo-offline-module i[data-icon="visit"]::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gm-accent);
}

.promo-page .promo-offline-module i[data-icon="data"]::before {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gm-accent);
  border-radius: 50%;
}

.promo-page .promo-offline-module i[data-icon="data"]::after {
  width: 16px;
  height: 2px;
  background: var(--gm-accent);
  box-shadow: 0 -6px 0 rgba(155, 92, 255, .55), 0 6px 0 rgba(155, 92, 255, .55);
}

.promo-page .promo-offline-module b {
  color: #111;
  font-size: 18px;
  line-height: 1.26;
  font-weight: 650;
}

.promo-page .promo-offline-row p,
.promo-page .promo-offline-row strong {
  margin: 0;
  color: #5f5b66;
  font-size: 16px;
  line-height: 1.58;
}

.promo-page .promo-offline-row strong {
  color: #111;
  font-weight: 650;
}

.promo-page .promo-offline-flow {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(17, 17, 17, .12);
  border-left: 1px solid rgba(17, 17, 17, .12);
}

.promo-page .promo-offline-flow article {
  position: relative;
  min-height: 172px;
  padding: 26px 24px;
  overflow: hidden;
  border-right: 1px solid rgba(17, 17, 17, .12);
  border-bottom: 1px solid rgba(17, 17, 17, .12);
  background: rgba(255, 255, 255, .58);
}

.promo-page .promo-flow-illo {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 78px;
  height: 58px;
  border-radius: 16px;
  background: rgba(155, 92, 255, .08);
  pointer-events: none;
}

.promo-page .promo-flow-illo::before,
.promo-page .promo-flow-illo::after {
  content: "";
  position: absolute;
}

.promo-page .promo-flow-illo.online::before {
  left: 16px;
  top: 15px;
  width: 34px;
  height: 22px;
  border: 2px solid rgba(155, 92, 255, .82);
  border-radius: 5px;
  box-shadow: 0 16px 0 -13px rgba(155, 92, 255, .82);
}

.promo-page .promo-flow-illo.online::after {
  right: 15px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gm-accent);
  box-shadow: -11px 13px 0 rgba(155, 92, 255, .50), 2px 27px 0 rgba(155, 92, 255, .32);
}

.promo-page .promo-flow-illo.custody::before {
  left: 18px;
  top: 21px;
  width: 38px;
  height: 24px;
  border: 2px solid rgba(155, 92, 255, .82);
  border-radius: 5px;
  background: rgba(255, 255, 255, .52);
}

.promo-page .promo-flow-illo.custody::after {
  left: 28px;
  top: 13px;
  width: 30px;
  height: 16px;
  border: 2px solid rgba(155, 92, 255, .52);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.promo-page .promo-flow-illo.offline::before {
  left: 20px;
  top: 11px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(155, 92, 255, .82);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.promo-page .promo-flow-illo.offline::after {
  right: 14px;
  bottom: 13px;
  width: 38px;
  height: 18px;
  border-bottom: 2px solid rgba(155, 92, 255, .62);
  border-right: 2px solid rgba(155, 92, 255, .62);
  border-radius: 0 0 12px 0;
}

.promo-page .promo-flow-illo.return::before {
  left: 17px;
  top: 13px;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(155, 92, 255, .82);
  border-radius: 50%;
}

.promo-page .promo-flow-illo.return::after {
  left: 29px;
  top: 24px;
  width: 26px;
  height: 12px;
  border-top: 3px solid var(--gm-accent);
  border-right: 3px solid var(--gm-accent);
  transform: rotate(32deg);
}

.promo-page .promo-flow-illo::before,
.promo-page .promo-flow-illo::after {
  display: none;
}

.promo-page .promo-flow-illo svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.promo-page .promo-flow-illo svg rect,
.promo-page .promo-flow-illo svg path,
.promo-page .promo-flow-illo svg circle,
.promo-page .promo-flow-illo svg ellipse {
  fill: none;
  stroke: var(--gm-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promo-page .promo-flow-illo svg circle,
.promo-page .promo-flow-illo svg ellipse {
  fill: rgba(155, 92, 255, .08);
}

.promo-page .promo-offline-flow span {
  color: rgba(155, 92, 255, .55);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

.promo-page .promo-offline-flow b {
  display: block;
  margin-top: 22px;
  color: #111;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 650;
}

.promo-page .promo-offline-flow p {
  margin: 12px 0 0;
  color: #5f5b66;
  font-size: 15px;
  line-height: 1.66;
}

.promo-page .promo-package-table {
  margin-top: 64px;
  padding-top: 34px;
  border-top: 1px solid rgba(17, 17, 17, .12);
}

.promo-page .promo-package-intro {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.promo-page .promo-package-intro span {
  color: #111;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
}

.promo-page .promo-package-intro p {
  max-width: none;
  margin: 0;
  color: #777;
  font-size: 16px;
  line-height: 1.72;
  white-space: nowrap;
}

.promo-page .promo-package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(17, 17, 17, .12);
  border-left: 1px solid rgba(17, 17, 17, .12);
  background: rgba(255, 255, 255, .72);
}

.promo-page .promo-package-grid article {
  min-height: 292px;
  position: relative;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(17, 17, 17, .12);
  border-bottom: 1px solid rgba(17, 17, 17, .12);
}

.promo-page .promo-package-grid b {
  min-height: 54px;
  color: #111;
  font-size: 20px;
  line-height: 1.34;
  font-weight: 600;
}

.promo-page .promo-package-grid strong {
  margin-top: 28px;
  color: var(--gm-accent);
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

.promo-page .promo-package-grid strong::before {
  content: "￥";
  margin-right: 2px;
  font-size: .48em;
  vertical-align: .54em;
  font-weight: 700;
}

.promo-page .promo-package-grid article > span {
  margin-top: 8px;
  color: rgba(17, 17, 17, .48);
  font-size: 15px;
  line-height: 1.2;
}

.promo-page .promo-package-grid p {
  margin: auto 0 0;
  color: #777;
  font-size: 15px;
  line-height: 1.68;
}

.promo-page .promo-package-grid article:nth-child(4) {
  background:
    radial-gradient(circle at 86% 8%, rgba(155, 92, 255, .18), transparent 34%),
    rgba(255, 255, 255, .90);
}

.promo-page .promo-package-grid article:nth-child(4)::before {
  content: "推荐方案";
  position: absolute;
  right: 20px;
  top: -1px;
  z-index: 1;
  width: 74px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  color: #fff;
  background: linear-gradient(180deg, #a05cff 0%, #884be8 100%);
  box-shadow: 0 10px 20px rgba(136, 75, 232, .22);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.promo-page .promo-package-grid article:nth-child(4)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 96px;
  height: 66px;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(155, 92, 255, .18) 44% 50%, transparent 50%),
    linear-gradient(135deg, transparent 0 58%, rgba(155, 92, 255, .32) 58% 64%, transparent 64%),
    linear-gradient(135deg, transparent 0 72%, rgba(155, 92, 255, .16) 72% 78%, transparent 78%);
  pointer-events: none;
}

.promo-page .promo-result-grid,
.promo-page .promo-case-grid {
  grid-template-columns: repeat(3, 1fr);
}

.promo-page .promo-result-grid article,
.promo-page .promo-case-grid article {
  min-height: 300px;
  padding: 42px 34px;
  border: 1px solid var(--gm-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.promo-page .promo-case-grid small {
  margin-bottom: 66px;
  color: var(--gm-accent);
  font-size: 16px;
}

.promo-page .promo-faq {
  width: 100%;
  max-width: none;
  padding: 93px max(7.5%, calc((100% - 1440px) / 2)) 120px;
  display: grid;
  grid-template-columns: 31% 64%;
  justify-content: space-between;
  background: var(--gm-bg);
}

.promo-page .promo-faq-title > span {
  color: #999;
  font-size: 18px;
}

.promo-page .promo-faq-title h2 {
  margin: 18px 0 75px;
  color: #333;
  font-size: 42px;
  line-height: 1.17;
  font-weight: 500;
}

.promo-page .promo-faq-title a {
  color: var(--gm-accent);
  font-size: 17px;
}

.promo-page .promo-faq-title a span {
  background: var(--gm-accent);
}

.promo-page .promo-faq-list {
  border-top: 1px solid #ddd;
}

.promo-page .promo-faq-list article {
  border-bottom: 1px solid #ddd;
}

.promo-page .promo-faq-list button {
  min-height: 106px;
  padding: 0 36px 0 27px;
}

.promo-page .promo-faq-list button span {
  color: #333;
  font-size: 25px;
  line-height: 1.35;
  font-weight: 500;
}

.promo-page .promo-faq-list article.active button span {
  color: var(--gm-accent);
}

.promo-page .promo-faq-list p {
  color: #999;
  font-size: 18px;
  line-height: 1.56;
}

.promo-page .promo-faq-list article.active p {
  max-height: none;
  margin: -8px 88px 34px 27px;
}

.promo-page .promo-contact {
  min-width: 1200px;
  height: auto;
  padding: 95px 0 120px;
  background: #fff;
}

.promo-page .promo-contact-card {
  width: 85%;
  max-width: 1440px;
  height: 420px;
  padding: 58px 72px;
  border: 1px solid var(--gm-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 25px 65px rgba(12, 30, 20, .08);
}

.promo-page .promo-contact-card span {
  color: var(--gm-accent);
}

.promo-page .promo-contact-card h2 {
  color: #000;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 500;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.promo-page .promo-contact-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.promo-page .promo-contact-qr img {
  width: 170px;
  height: 170px;
}

.promo-page .promo-contact-qr p {
  margin: 0;
  color: rgba(17, 17, 17, .86);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.promo-page .promo-footer {
  background: #fff;
}

.promo-page .promo-footer .footer-main {
  width: min(1120px, 90%);
  min-width: 0;
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 0 28px;
}

.promo-page .promo-footer .footer-brand {
  width: max-content;
  margin: 0 auto 42px;
}

.promo-page .promo-footer .footer-links {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 28px;
  justify-content: center;
}

.promo-page .promo-footer .footer-links div {
  align-items: center;
  text-align: center;
}

.promo-page .promo-footer .record {
  margin-top: 54px;
}

.deeptouch-page {
  background: #f6f7fb;
  color: #111;
}

.deeptouch-page .site-header {
  position: sticky;
}

.deeptouch-page main {
  overflow: hidden;
}

.deeptouch-hero {
  min-height: 820px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #eef1f8;
}

.deeptouch-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.02);
}

.deeptouch-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .86) 48%, rgba(255, 255, 255, .90) 100%),
    radial-gradient(circle at 79% 20%, rgba(155, 92, 255, .16), transparent 26%),
    radial-gradient(circle at 38% 78%, rgba(209, 139, 255, .12), transparent 30%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.deeptouch-hero-inner,
.deeptouch-section,
.deeptouch-booking {
  width: min(86%, 1440px);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.deeptouch-hero-inner {
  display: grid;
  grid-template-columns: minmax(500px, 650px) minmax(470px, 620px);
  gap: clamp(56px, 7vw, 116px);
  align-items: center;
  justify-content: space-between;
  padding: clamp(96px, 10vw, 138px) 0 clamp(84px, 9vw, 116px);
}

.deeptouch-kicker,
.deeptouch-section-head > span,
.deeptouch-booking > div > span {
  margin: 0 0 18px;
  display: block;
  color: var(--green);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
}

.deeptouch-hero-copy h1 {
  margin: 0;
  color: #050505;
  max-width: 680px;
  font-size: clamp(42px, 3.05vw, 56px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}

.deeptouch-hero-copy h1 span,
.deeptouch-section-head h2 span {
  display: block;
  white-space: nowrap;
}

.deeptouch-lead {
  width: 650px;
  max-width: 100%;
  margin: 28px 0 0;
  color: rgba(17, 17, 17, .68);
  font-size: 19px;
  line-height: 1.8;
}

.deeptouch-hero-actions,
.deeptouch-booking-actions {
  margin-top: 42px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.deeptouch-text-link {
  color: var(--green);
  font-size: 18px;
  font-weight: 600;
}

.deeptouch-text-link span {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 10px;
}

.deeptouch-hero-panel {
  min-height: 0;
  padding: 18px 0 18px 34px;
  position: relative;
  border-left: 2px solid rgba(155, 92, 255, .30);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 28px;
}

.deeptouch-hero-panel::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 25px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 8px rgba(155, 92, 255, .12);
}

.deeptouch-path-source,
.deeptouch-path-core,
.deeptouch-path-outcomes article {
  min-width: 0;
}

.deeptouch-path-source {
  max-width: none;
  padding: 0;
  border-bottom: 0;
}

.deeptouch-path-source span,
.deeptouch-path-core small,
.deeptouch-path-outcomes span {
  display: block;
  color: rgba(17, 17, 17, .56);
  font-size: 15px;
  line-height: 1.4;
}

.deeptouch-path-source p {
  margin: 10px 0 0;
  color: #111;
  font-size: 24px;
  line-height: 1.48;
  font-weight: 600;
}

.deeptouch-path-core {
  min-height: 0;
  padding: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  border: 0;
  background: transparent;
}

.deeptouch-path-core b {
  margin-top: 12px;
  color: #111;
  font-size: 34px;
  line-height: 1.24;
  font-weight: 600;
}

.deeptouch-path-core small {
  color: var(--green);
  font-size: 18px;
  font-weight: 600;
}

.deeptouch-path-core p {
  width: auto;
  max-width: 100%;
  margin: 14px 0 0;
  color: rgba(17, 17, 17, .66);
  font-size: 17px;
  line-height: 1.7;
}

.deeptouch-path-outcomes {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(17, 17, 17, .12);
  min-width: 0;
}

.deeptouch-path-outcomes article {
  padding: 16px 0;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
}

.deeptouch-path-outcomes article + article {
  border-top: 1px solid rgba(17, 17, 17, .08);
}

.deeptouch-path-outcomes strong {
  color: #111;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 600;
}

.deeptouch-section {
  padding: clamp(88px, 9vw, 124px) 0 0;
}

.deeptouch-section-head {
  margin-bottom: clamp(38px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: 230px minmax(0, 700px) minmax(220px, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

.deeptouch-section-head.compact {
  grid-template-columns: 270px minmax(0, 760px);
}

.deeptouch-section-head h2 {
  margin: 0;
  color: #111;
  font-size: clamp(32px, 2.8vw, 42px);
  line-height: 1.28;
  font-weight: 600;
}

.deeptouch-section-head p {
  margin: 6px 0 0;
  color: rgba(17, 17, 17, .60);
  font-size: 18px;
  line-height: 1.72;
}

.deeptouch-proof-copy {
  margin-top: 4px;
  padding-left: 22px;
  position: relative;
}

.deeptouch-proof-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(155, 92, 255, .95), rgba(209, 139, 255, .35));
}

.deeptouch-proof-copy b {
  display: block;
  margin-bottom: 12px;
  color: #111;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 650;
}

.deeptouch-proof-copy p {
  max-width: 420px;
  margin: 0;
  color: rgba(17, 17, 17, .58);
  font-size: 17px;
  line-height: 1.72;
}

.deeptouch-proof-copy p + p {
  margin-top: 8px;
}

.deeptouch-insight {
  margin-bottom: 22px;
  padding: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(17, 17, 17, .12);
  border-radius: 0;
  background: transparent;
}

.deeptouch-insight strong {
  color: var(--green);
  font-size: 20px;
}

.deeptouch-insight p {
  margin: 0;
  color: #111;
  font-size: 24px;
  line-height: 1.34;
  font-weight: 600;
  text-align: right;
}

.deeptouch-problem-grid,
.deeptouch-solution-grid,
.deeptouch-advantage-list,
.deeptouch-growth-grid {
  display: grid;
  gap: 22px;
}

.deeptouch-problem-grid {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(17, 17, 17, .10);
}

.deeptouch-solution-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(17, 17, 17, .12);
  border-bottom: 1px solid rgba(17, 17, 17, .12);
  background:
    linear-gradient(90deg, transparent 0 33.2%, rgba(155, 92, 255, .10) 33.2% 33.35%, transparent 33.35% 66.5%, rgba(155, 92, 255, .10) 66.5% 66.65%, transparent 66.65%),
    radial-gradient(circle at 50% 18%, rgba(155, 92, 255, .08), transparent 34%);
}

.deeptouch-advantage-list {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(17, 17, 17, .12);
  border-bottom: 1px solid rgba(17, 17, 17, .12);
}

.deeptouch-problem-grid article,
.deeptouch-solution-grid article,
.deeptouch-growth-grid article {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.deeptouch-problem-grid article {
  min-height: 0;
  padding: 34px 0;
  overflow: visible;
  display: grid;
  grid-template-columns: 72px minmax(180px, .32fr) minmax(360px, .78fr) minmax(230px, .44fr);
  column-gap: 34px;
  row-gap: 18px;
  align-items: start;
  border-bottom: 1px solid rgba(17, 17, 17, .10);
}

.deeptouch-problem-grid article.featured {
  grid-row: auto;
  padding: 34px 0;
  background: transparent;
}

.deeptouch-problem-grid article::after {
  content: "";
  position: absolute;
  right: 320px;
  top: 34px;
  bottom: 34px;
  width: 1px;
  background: rgba(155, 92, 255, .18);
}

.deeptouch-problem-grid b {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--green);
  font-size: 24px;
  line-height: 1;
}

.deeptouch-problem-grid h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 10px;
  color: #111;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 600;
}

.deeptouch-problem-grid h4 {
  grid-column: 3;
  grid-row: 1;
  margin: 2px 0 0;
  color: rgba(17, 17, 17, .66);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
  text-wrap: balance;
}

.deeptouch-problem-grid p,
.deeptouch-problem-grid li,
.deeptouch-solution-grid dd,
.deeptouch-advantage-list p,
.deeptouch-growth-grid p {
  color: rgba(17, 17, 17, .64);
  font-size: 16px;
  line-height: 1.72;
}

.deeptouch-problem-grid ul {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deeptouch-problem-grid p {
  grid-column: 3;
  grid-row: 2;
  max-width: 42em;
}

.deeptouch-problem-grid li {
  position: relative;
  padding-left: 18px;
}

.deeptouch-problem-grid li + li {
  margin-top: 10px;
}

.deeptouch-problem-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.deeptouch-problem-grid article div {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  position: relative;
  margin-top: 0;
  padding-left: 58px;
  padding-right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.deeptouch-problem-grid article div::before {
  content: "→";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.deeptouch-problem-grid article div span,
.deeptouch-keyword-strip span {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--green);
  background: rgba(155, 92, 255, .10);
  font-size: 14px;
  font-weight: 600;
}

.deeptouch-solutions {
  padding-bottom: 0;
}

.deeptouch-solution-grid article {
  min-height: 0;
  padding: 42px 42px 46px;
  display: block;
  border-bottom: 0;
  position: relative;
  overflow: hidden;
}

.deeptouch-solution-grid article:first-child {
  grid-row: auto;
  padding: 42px 42px 46px;
  background: transparent;
}

.deeptouch-solution-grid article::before {
  display: block;
  margin-bottom: 28px;
  color: rgba(155, 92, 255, .18);
  font-size: clamp(82px, 7vw, 124px);
  line-height: .82;
  font-weight: 800;
}

.deeptouch-solution-grid article:nth-child(1)::before {
  content: "01";
}

.deeptouch-solution-grid article:nth-child(2)::before {
  content: "02";
}

.deeptouch-solution-grid article:nth-child(3)::before {
  content: "03";
}

.deeptouch-service-index {
  width: max-content;
  min-height: 34px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand-gradient);
  font-size: 15px;
  font-weight: 600;
}

.deeptouch-solution-grid h3 {
  margin: 22px 0 12px;
  color: #111;
  font-size: 31px;
  line-height: 1.22;
  font-weight: 600;
}

.deeptouch-solution-grid dl {
  margin: 34px 0 0;
  display: block;
}

.deeptouch-solution-grid dt {
  margin: 0 0 7px;
  padding-left: 22px;
  position: relative;
  color: #111;
  font-size: 17px;
  line-height: 1.42;
  font-weight: 600;
}

.deeptouch-solution-grid dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.deeptouch-solution-grid dd {
  margin: 0 0 20px;
  padding-left: 22px;
  border-bottom: 0;
}

.deeptouch-solution-grid dd:last-child {
  margin-bottom: 0;
}

.deeptouch-keyword-strip {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.deeptouch-advantages {
  padding-bottom: 0;
}

.deeptouch-advantage-list article {
  min-height: 0;
  padding: 30px 0;
  display: grid;
  grid-template-columns: 140px minmax(320px, .75fr) minmax(360px, 1fr);
  gap: 36px;
  align-items: start;
  position: relative;
}

.deeptouch-advantage-list article + article {
  border-top: 1px solid rgba(17, 17, 17, .10);
}

.deeptouch-advantage-list span,
.deeptouch-growth-grid span {
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
}

.deeptouch-advantage-list h3 {
  margin: 0;
  color: #111;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
}

.deeptouch-advantage-list p {
  margin: 0;
}

.deeptouch-growth {
  padding-bottom: clamp(92px, 9vw, 120px);
}

.deeptouch-growth .deeptouch-section-head.compact {
  grid-template-columns: 230px minmax(0, 620px) minmax(280px, 1fr);
  margin-bottom: clamp(54px, 5vw, 76px);
}

.deeptouch-growth .deeptouch-section-head.compact p {
  max-width: 440px;
  margin-top: 8px;
}

.deeptouch-growth-grid {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-height: 460px;
  padding: 54px 0 18px;
  border-top: 1px solid rgba(17, 17, 17, .12);
  border-bottom: 0;
  background:
    radial-gradient(circle at 84% 28%, rgba(155, 92, 255, .12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 48%);
}

.deeptouch-growth-grid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 9%;
  top: 154px;
  height: 2px;
  background: linear-gradient(90deg, rgba(155, 92, 255, .18), rgba(155, 92, 255, .72), rgba(155, 92, 255, .18));
}

.deeptouch-growth-grid article {
  min-height: 0;
  padding: 0 48px 0 0;
  overflow: visible;
  display: block;
  border-bottom: 0;
}

.deeptouch-growth-grid article:nth-child(2) {
  padding-top: 0;
}

.deeptouch-growth-grid article:nth-child(3) {
  padding-top: 0;
  padding-right: 0;
}

.deeptouch-growth-grid article.highlight {
  padding-left: 0;
  color: inherit;
  background: transparent;
}

.deeptouch-growth-grid article::before {
  display: block;
  margin-bottom: 50px;
  color: rgba(155, 92, 255, .18);
  font-size: clamp(86px, 8vw, 132px);
  line-height: .78;
  font-weight: 800;
  letter-spacing: 0;
}

.deeptouch-growth-grid article:nth-child(1)::before {
  content: "01";
}

.deeptouch-growth-grid article:nth-child(2)::before {
  content: "02";
}

.deeptouch-growth-grid article:nth-child(3)::before {
  content: "100";
  color: rgba(155, 92, 255, .24);
}

.deeptouch-growth-grid article::after {
  content: "";
  position: absolute;
  left: 0;
  top: 146px;
  width: 18px;
  height: 18px;
  border: 5px solid #f7f8fb;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 1px rgba(155, 92, 255, .28), 0 12px 28px rgba(155, 92, 255, .22);
}

.deeptouch-growth-grid article:nth-child(3)::after {
  background: #111;
}

.deeptouch-growth-grid strong {
  width: max-content;
  min-height: 34px;
  margin-top: 18px;
  margin-left: 28px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(155, 92, 255, .10);
  color: var(--green);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.deeptouch-growth-grid .highlight strong,
.deeptouch-growth-grid .highlight span,
.deeptouch-growth-grid .highlight h3,
.deeptouch-growth-grid .highlight p {
  color: inherit;
}

.deeptouch-growth-grid .highlight strong,
.deeptouch-growth-grid .highlight span {
  color: var(--green);
}

.deeptouch-growth-grid h3 {
  max-width: 13em;
  margin: 24px 0 16px;
  color: #111;
  font-size: 25px;
  line-height: 1.34;
  font-weight: 600;
}

.deeptouch-growth-grid p {
  max-width: 28em;
  margin: 0;
}

.deeptouch-growth-grid article > span {
  margin-top: 30px;
  justify-self: start;
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(155, 92, 255, .10);
  font-size: 15px;
  white-space: nowrap;
}

.deeptouch-booking {
  margin-bottom: 110px;
  padding: 58px clamp(42px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 70px;
  border: 1px solid rgba(155, 92, 255, .14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 40%, rgba(209, 139, 255, .18), transparent 28%),
    #fff;
  box-shadow: 0 28px 70px rgba(35, 36, 45, .07);
}

.deeptouch-booking h2 {
  width: 720px;
  max-width: 100%;
  margin: 0;
  color: #111;
  font-size: clamp(34px, 3vw, 42px);
  line-height: 1.2;
  font-weight: 500;
  text-wrap: balance;
}

.deeptouch-booking p {
  width: 650px;
  max-width: 100%;
  margin: 24px 0 0;
  color: rgba(17, 17, 17, .62);
  font-size: 18px;
  line-height: 1.72;
}

.deeptouch-booking-qr {
  flex: 0 0 190px;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.deeptouch-booking-qr img {
  width: 170px;
  height: 170px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(50, 32, 120, .12);
}

.deeptouch-booking-qr p {
  width: auto;
  margin: 0;
  color: rgba(17, 17, 17, .82);
  font-size: 16px;
  white-space: nowrap;
}

.classroom-page,
.api-page {
  background: #f6f7fb;
}

.classroom-page main,
.api-page main {
  width: min(1240px, calc(100% - 56px));
  margin: 0 auto;
}

.classroom-hero,
.api-hero {
  min-height: calc(100vh - 60px);
  padding: clamp(72px, 8vw, 116px) 0 clamp(64px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(420px, .88fr);
  gap: clamp(42px, 6vw, 86px);
  align-items: center;
}

.classroom-kicker,
.api-kicker,
.classroom-section-head > span,
.api-section-head > span,
.classroom-enterprise span,
.classroom-contact span,
.api-contact span {
  margin: 0 0 18px;
  display: block;
  color: var(--green);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.classroom-hero h1,
.api-hero h1,
.classroom-section-head h2,
.api-section-head h2,
.classroom-enterprise h2,
.classroom-contact h2,
.api-contact h2 {
  margin: 0;
  color: #111;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.14;
  font-weight: 650;
  letter-spacing: 0;
}

.classroom-hero h1 span,
.api-hero h1 span,
.classroom-section-head h2 span,
.api-section-head h2 span {
  display: block;
  white-space: nowrap;
}

.classroom-hero p,
.api-hero p,
.classroom-section-head p,
.api-section-head p,
.classroom-enterprise p,
.classroom-contact p,
.api-contact p {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(17, 17, 17, .64);
  font-size: 18px;
  line-height: 1.78;
}

.classroom-hero-actions,
.api-hero-actions {
  margin-top: 42px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.classroom-text-link,
.api-text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
}

.classroom-text-link span,
.api-text-link span {
  font-size: 24px;
}

.classroom-hero-board {
  min-height: 520px;
  padding: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 146px;
  gap: 24px;
  border: 1px solid rgba(155, 92, 255, .16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 22% 20%, rgba(155, 92, 255, .20), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(248, 245, 255, .72));
  box-shadow: 0 30px 90px rgba(53, 42, 88, .10);
}

.classroom-board-main {
  min-height: 100%;
  padding: 38px;
  display: grid;
  align-content: end;
  gap: 16px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(155, 92, 255, .10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(155, 92, 255, .10) 1px, transparent 1px),
    #fff;
  background-size: 44px 44px;
}

.classroom-board-main strong {
  margin-bottom: auto;
  color: #111;
  font-size: 32px;
  line-height: 1.18;
}

.classroom-board-main span {
  width: max-content;
  min-height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #111;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 34px rgba(50, 32, 120, .10);
  font-weight: 700;
}

.classroom-board-aside {
  padding: 22px 0;
  display: grid;
  align-content: space-between;
  justify-items: center;
  text-align: center;
  border-left: 1px solid rgba(17, 17, 17, .10);
}

.classroom-board-aside b {
  color: var(--green);
  font-size: 46px;
  line-height: .9;
}

.classroom-board-aside span {
  margin-top: -32px;
  color: rgba(17, 17, 17, .58);
  font-size: 15px;
  font-weight: 700;
}

.classroom-section,
.api-section {
  padding: clamp(82px, 9vw, 124px) 0 0;
}

.classroom-section-head,
.api-section-head {
  margin-bottom: clamp(42px, 5vw, 72px);
  display: grid;
  grid-template-columns: 220px minmax(0, 720px) minmax(260px, 1fr);
  gap: clamp(30px, 4vw, 54px);
  align-items: start;
}

.classroom-section-head.compact,
.api-section-head.compact {
  grid-template-columns: 220px minmax(0, 780px);
}

.classroom-section-head h2,
.api-section-head h2,
.classroom-enterprise h2,
.classroom-contact h2,
.api-contact h2 {
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1.22;
}

.classroom-section-head.compact h2 {
  white-space: nowrap;
}

.classroom-course-matrix {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 20px;
}

.classroom-course-matrix article {
  min-height: 250px;
  padding: 24px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  border: 1px solid rgba(17, 17, 17, .08);
  border-radius: 8px;
  background: #fff;
}

.classroom-course-matrix article:first-child {
  grid-row: span 2;
  min-height: 520px;
  display: block;
}

.classroom-course-matrix article img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 8px;
}

.classroom-course-matrix article:first-child img {
  height: 280px;
  margin-bottom: 36px;
}

.classroom-course-matrix span,
.classroom-path-grid b,
.api-capability-grid b,
.api-process-steps span {
  color: var(--green);
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
}

.classroom-course-matrix h3,
.classroom-path-grid h3,
.classroom-audience-grid h3,
.classroom-enterprise-steps b,
.api-capability-grid h3,
.api-output-list b,
.api-scenario-grid h3,
.api-process-steps h3 {
  margin: 14px 0 12px;
  color: #111;
  font-size: 24px;
  line-height: 1.28;
  font-weight: 650;
}

.classroom-course-matrix p,
.classroom-path-grid p,
.classroom-audience-grid p,
.classroom-enterprise-steps p,
.api-capability-grid p,
.api-output-list p,
.api-scenario-grid p,
.api-process-steps p {
  margin: 0;
  color: rgba(17, 17, 17, .62);
  font-size: 16px;
  line-height: 1.72;
}

.classroom-path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(17, 17, 17, .12);
  border-bottom: 1px solid rgba(17, 17, 17, .12);
}

.classroom-path-grid article {
  min-height: 270px;
  padding: 34px 30px;
  border-right: 1px solid rgba(17, 17, 17, .10);
}

.classroom-path-grid article:last-child {
  border-right: 0;
}

.classroom-audience-grid,
.api-scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.classroom-audience-grid article,
.api-scenario-grid article {
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .08);
}

.classroom-audience-grid img,
.api-scenario-grid img {
  width: 100%;
  height: 180px;
  display: block;
  object-fit: cover;
}

.classroom-audience-grid h3,
.classroom-audience-grid p,
.api-scenario-grid h3,
.api-scenario-grid p {
  margin-left: 24px;
  margin-right: 24px;
}

.classroom-audience-grid h3,
.api-scenario-grid h3 {
  margin-top: 24px;
}

.classroom-audience-grid p,
.api-scenario-grid p {
  margin-bottom: 28px;
}

.classroom-enterprise,
.classroom-contact,
.api-contact {
  margin-top: clamp(86px, 9vw, 126px);
  padding: clamp(42px, 5vw, 70px);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .8fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  border-radius: 8px;
  background:
    radial-gradient(circle at 86% 30%, rgba(155, 92, 255, .18), transparent 28%),
    #fff;
  border: 1px solid rgba(155, 92, 255, .14);
}

.classroom-enterprise-steps {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(17, 17, 17, .10);
}

.classroom-enterprise-steps article {
  padding: 24px 0;
  border-bottom: 1px solid rgba(17, 17, 17, .10);
}

.classroom-contact {
  margin-bottom: clamp(86px, 9vw, 126px);
  grid-template-columns: minmax(0, 1fr) 190px;
}

.classroom-contact-qr {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.classroom-contact .pill,
.api-contact .pill {
  margin-top: 30px;
}

.classroom-contact img,
.api-contact img {
  width: 170px;
  height: 170px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(50, 32, 120, .12);
}

.classroom-contact-qr p {
  max-width: none;
  margin: 0;
  color: rgba(17, 17, 17, .72);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.classroom-faq {
  padding-bottom: 0;
}

.classroom-faq-list {
  border-top: 1px solid rgba(17, 17, 17, .10);
}

.classroom-faq-list .faq-item {
  border-bottom: 1px solid rgba(17, 17, 17, .10);
}

.classroom-faq-list button {
  width: 100%;
  min-height: 76px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  color: #111;
  font-size: 22px;
  font-weight: 650;
}

.classroom-faq-list .faq-item div {
  display: none;
}

.classroom-faq-list .faq-item.active div {
  display: block;
  padding: 0 0 28px;
}

.classroom-faq-list p {
  margin: 0;
  max-width: 780px;
  color: rgba(17, 17, 17, .62);
  font-size: 17px;
  line-height: 1.72;
}

.api-page {
  background:
    radial-gradient(circle at 72% 8%, rgba(155, 92, 255, .16), transparent 26%),
    #f5f6fb;
}

.api-console {
  min-height: 500px;
  overflow: hidden;
  border-radius: 8px;
  background: #17172b;
  box-shadow: 0 34px 96px rgba(24, 20, 62, .26);
  color: #fff;
}

.api-console-top {
  height: 54px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.api-console-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
}

.api-console-top b {
  margin-left: 10px;
  color: rgba(255, 255, 255, .70);
  font-size: 14px;
  font-weight: 600;
}

.api-console pre {
  margin: 0;
  padding: 42px;
  white-space: pre-wrap;
  color: #eadfff;
  font-size: 18px;
  line-height: 1.78;
}

.api-console-flow {
  margin: 0 42px 42px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 54px 1fr 54px 1fr;
  align-items: center;
  gap: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

.api-console-flow span {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(155, 92, 255, .34);
  font-weight: 700;
}

.api-console-flow i {
  height: 1px;
  background: rgba(255, 255, 255, .34);
  position: relative;
}

.api-console-flow i::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(255, 255, 255, .62);
  border-right: 1px solid rgba(255, 255, 255, .62);
  transform: rotate(45deg);
}

.api-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(17, 17, 17, .12);
  border-bottom: 1px solid rgba(17, 17, 17, .12);
}

.api-capability-grid article {
  min-height: 310px;
  padding: 34px 30px;
  border-right: 1px solid rgba(17, 17, 17, .10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .54), transparent);
}

.api-capability-grid article:last-child {
  border-right: 0;
}

.api-capability-grid span {
  margin-top: 28px;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--green);
  background: rgba(155, 92, 255, .10);
  font-size: 14px;
  font-weight: 700;
}

.api-integration-board {
  min-height: 480px;
  display: grid;
  grid-template-columns: minmax(220px, .6fr) minmax(280px, .74fr) minmax(320px, .86fr);
  gap: 34px;
  align-items: center;
}

.api-system-list,
.api-output-list {
  display: grid;
  gap: 14px;
}

.api-system-list span,
.api-output-list article {
  min-height: 72px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .08);
  box-shadow: 0 18px 48px rgba(36, 32, 62, .06);
}

.api-system-list span {
  color: #111;
  font-size: 18px;
  font-weight: 650;
}

.api-core-node {
  aspect-ratio: 1;
  padding: 34px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .24), transparent 26%),
    var(--brand-gradient);
  box-shadow: 0 30px 90px rgba(155, 92, 255, .28);
}

.api-core-node small {
  color: rgba(255, 255, 255, .76);
  font-size: 17px;
  font-weight: 700;
}

.api-core-node strong {
  font-size: 30px;
  line-height: 1.22;
}

.api-core-node p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  line-height: 1.6;
}

.api-output-list article {
  display: block;
  padding: 20px 24px;
}

.api-output-list b,
.api-output-list p {
  display: block;
}

.api-output-list b {
  margin: 0 0 8px;
}

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

.api-process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.api-process-steps article {
  min-height: 230px;
  padding: 30px 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .08);
}

.api-contact {
  margin-bottom: clamp(86px, 9vw, 126px);
}

@media (max-width: 1180px) {
  .classroom-hero,
  .api-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .classroom-hero-board,
  .api-console {
    max-width: 820px;
  }

  .classroom-section-head,
  .api-section-head,
  .classroom-section-head.compact,
  .api-section-head.compact {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .classroom-section-head p,
  .api-section-head p {
    grid-column: 2;
  }

  .classroom-audience-grid,
  .api-capability-grid,
  .api-process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .api-capability-grid article:nth-child(2),
  .classroom-path-grid article:nth-child(2) {
    border-right: 0;
  }

  .api-capability-grid article,
  .classroom-path-grid article {
    border-bottom: 1px solid rgba(17, 17, 17, .10);
  }

  .api-integration-board {
    grid-template-columns: 1fr;
  }

  .api-core-node {
    width: min(360px, 100%);
    justify-self: center;
  }
}

@media (max-width: 900px) {
  .classroom-page main,
  .api-page main {
    width: auto;
    margin: 0;
    padding: 64px 20px 0;
  }

  .classroom-hero,
  .api-hero {
    padding: 72px 0 56px;
    display: block;
  }

  .classroom-hero h1,
  .api-hero h1,
  .classroom-section-head h2,
  .api-section-head h2,
  .classroom-enterprise h2,
  .classroom-contact h2,
  .api-contact h2 {
    font-size: 32px;
    line-height: 1.22;
  }

  .classroom-hero h1 span,
  .api-hero h1 span,
  .classroom-section-head h2 span,
  .api-section-head h2 span {
    white-space: normal;
  }

  .classroom-hero p,
  .api-hero p,
  .classroom-section-head p,
  .api-section-head p,
  .classroom-enterprise p,
  .classroom-contact p,
  .api-contact p {
    font-size: 16px;
  }

  .classroom-hero-board,
  .api-console {
    margin-top: 42px;
  }

  .classroom-hero-board {
    min-height: 0;
    padding: 20px;
    grid-template-columns: 1fr;
  }

  .classroom-board-main {
    padding: 26px 22px;
  }

  .classroom-board-main strong {
    font-size: 25px;
  }

  .classroom-board-aside {
    padding: 18px 0 0;
    grid-template-columns: repeat(3, 1fr);
    border-left: 0;
    border-top: 1px solid rgba(17, 17, 17, .10);
    gap: 10px;
  }

  .classroom-board-aside b {
    font-size: 30px;
  }

  .classroom-board-aside span {
    margin-top: 0;
    font-size: 12px;
  }

  .classroom-section,
  .api-section {
    padding-top: 72px;
  }

  .classroom-section-head,
  .api-section-head,
  .classroom-section-head.compact,
  .api-section-head.compact {
    display: block;
    margin-bottom: 32px;
  }

  .classroom-section-head.compact h2 {
    white-space: normal;
  }

  .classroom-course-matrix,
  .classroom-course-matrix article,
  .classroom-audience-grid,
  .classroom-path-grid,
  .api-capability-grid,
  .api-scenario-grid,
  .api-process-steps {
    display: block;
  }

  .classroom-course-matrix article,
  .classroom-course-matrix article:first-child,
  .classroom-audience-grid article,
  .api-scenario-grid article,
  .api-process-steps article,
  .api-capability-grid article {
    min-height: 0;
    margin-bottom: 18px;
  }

  .classroom-course-matrix article:first-child img,
  .classroom-course-matrix article img {
    height: 190px;
    margin-bottom: 24px;
  }

  .classroom-path-grid article,
  .api-capability-grid article {
    padding: 28px 0;
    border-right: 0;
  }

  .classroom-enterprise,
  .classroom-contact,
  .api-contact {
    margin-top: 72px;
    padding: 30px 24px;
    display: block;
  }

  .classroom-contact,
  .api-contact {
    margin-bottom: 72px;
  }

  .classroom-contact img,
  .api-contact img {
    margin-top: 28px;
    justify-self: start;
  }

  .api-console pre {
    padding: 28px 22px;
    font-size: 14px;
  }

  .api-console-flow {
    margin: 0 22px 28px;
    padding: 20px;
    grid-template-columns: 1fr;
  }

  .api-console-flow i {
    height: 28px;
    width: 1px;
    justify-self: center;
  }

  .api-console-flow i::after {
    right: -4px;
    top: auto;
    bottom: 0;
    transform: rotate(135deg);
  }

  .api-core-node {
    width: 260px;
  }
}

@media (max-width: 1280px) {
  .deeptouch-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .deeptouch-hero-panel {
    max-width: 760px;
  }

  .deeptouch-section-head,
  .deeptouch-section-head.compact {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  }

  .deeptouch-section-head p {
    grid-column: 2;
  }

  .deeptouch-problem-grid,
  .deeptouch-solution-grid,
  .deeptouch-growth-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .deeptouch-growth-grid article {
    padding-right: 34px;
  }

  .deeptouch-problem-grid article.featured,
  .deeptouch-solution-grid article:first-child,
  .deeptouch-growth-grid article.highlight {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .deeptouch-page {
    min-width: 0;
  }

  .deeptouch-page main {
    padding-top: 64px;
  }

  .deeptouch-hero {
    min-height: 0;
    display: block;
  }

  .deeptouch-hero-inner,
  .deeptouch-section,
  .deeptouch-booking {
    width: auto;
    max-width: none;
    margin: 0;
  }

  .deeptouch-hero-inner {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 72px 20px 52px;
  }

  .deeptouch-hero-copy,
  .deeptouch-hero-panel {
    width: 100%;
    min-width: 0;
  }

  .deeptouch-kicker,
  .deeptouch-section-head > span,
  .deeptouch-booking > div > span {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .deeptouch-hero-copy h1 {
    font-size: clamp(30px, 8.7vw, 34px);
    line-height: 1.2;
  }

  .deeptouch-hero-copy h1 span,
  .deeptouch-section-head h2 span {
    display: block;
    white-space: normal;
  }

  .deeptouch-lead {
    width: auto;
    margin-top: 22px;
    font-size: 17px;
  }

  .deeptouch-hero-actions,
  .deeptouch-booking-actions {
    margin-top: 30px;
    gap: 18px;
    flex-wrap: wrap;
  }

  .deeptouch-hero-panel {
    min-height: 0;
    margin-top: 42px;
    padding: 24px;
    gap: 22px;
  }

  .deeptouch-path-source {
    width: 100%;
    max-width: none;
  }

  .deeptouch-path-source p {
    font-size: 21px;
  }

  .deeptouch-path-core {
    width: 100%;
    min-height: 0;
    padding: 26px 24px;
  }

  .deeptouch-path-core p {
    width: auto;
  }

  .deeptouch-path-outcomes {
    width: 100%;
  }

  .deeptouch-path-core b {
    font-size: 28px;
  }

  .deeptouch-path-outcomes article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .deeptouch-section {
    padding: 72px 20px 0;
  }

  .deeptouch-section-head,
  .deeptouch-section-head.compact {
    margin-bottom: 34px;
    display: block;
  }

  .deeptouch-section-head h2 {
    font-size: 30px;
  }

  .deeptouch-section-head p {
    margin-top: 18px;
    font-size: 16px;
  }

  .deeptouch-insight {
    padding: 24px;
    display: block;
  }

  .deeptouch-insight p {
    margin-top: 10px;
    text-align: left;
    font-size: 24px;
  }

  .deeptouch-problem-grid,
  .deeptouch-solution-grid,
  .deeptouch-growth-grid {
    grid-template-columns: 1fr;
  }

  .deeptouch-problem-grid article,
  .deeptouch-problem-grid article.featured,
  .deeptouch-solution-grid article,
  .deeptouch-solution-grid article:first-child,
  .deeptouch-growth-grid article {
    min-height: 0;
    padding: 28px 24px;
  }

  .deeptouch-problem-grid article,
  .deeptouch-problem-grid article.featured {
    padding: 28px 0;
    display: block;
  }

  .deeptouch-problem-grid article::after {
    display: none;
  }

  .deeptouch-problem-grid h3 {
    margin: 14px 0 10px;
  }

  .deeptouch-problem-grid h4 {
    margin: 0 0 14px;
  }

  .deeptouch-problem-grid ul {
    margin-top: 18px;
  }

  .deeptouch-problem-grid p {
    max-width: none;
  }

  .deeptouch-problem-grid article div {
    margin-top: 20px;
    padding-left: 34px;
  }

  .deeptouch-problem-grid article div::before {
    top: 2px;
    transform: none;
  }

  .deeptouch-solution-grid article,
  .deeptouch-solution-grid article:first-child {
    display: block;
    padding: 28px 0;
  }

  .deeptouch-solution-grid h3 {
    margin-top: 18px;
    font-size: 24px;
  }

  .deeptouch-solution-grid dl {
    margin-top: 22px;
    display: block;
  }

  .deeptouch-solution-grid dt {
    margin-top: 18px;
  }

  .deeptouch-solution-grid dt:first-child {
    margin-top: 0;
  }

  .deeptouch-solution-grid dd {
    margin-top: 6px;
  }

  .deeptouch-problem-grid h3 {
    font-size: 26px;
  }

  .deeptouch-keyword-strip {
    justify-content: flex-start;
  }

  .deeptouch-advantage-list article {
    padding: 28px 0;
    display: block;
  }

  .deeptouch-advantage-list h3 {
    margin-top: 18px;
    font-size: 24px;
  }

  .deeptouch-advantage-list p {
    margin-top: 14px;
  }

  .deeptouch-growth {
    padding-bottom: 72px;
  }

  .deeptouch-growth-grid {
    display: block;
    min-height: 0;
    padding: 0;
    background: transparent;
  }

  .deeptouch-growth-grid::before {
    left: 9px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(155, 92, 255, .28), rgba(155, 92, 255, .72), rgba(155, 92, 255, .18));
  }

  .deeptouch-growth-grid article {
    padding: 30px 0 30px 34px;
    display: block;
    border-bottom: 1px solid rgba(17, 17, 17, .10);
  }

  .deeptouch-growth-grid article:nth-child(2),
  .deeptouch-growth-grid article:nth-child(3) {
    padding-top: 30px;
  }

  .deeptouch-growth-grid article:last-child {
    border-bottom: 0;
  }

  .deeptouch-growth-grid article::before {
    margin-bottom: 22px;
    font-size: 58px;
  }

  .deeptouch-growth-grid article::after,
  .deeptouch-growth-grid article:nth-child(2)::after,
  .deeptouch-growth-grid article:nth-child(3)::after {
    left: 0;
    top: 48px;
    width: 18px;
    height: 18px;
    border-width: 5px;
  }

  .deeptouch-growth-grid h3 {
    margin-top: 18px;
    font-size: 23px;
  }

  .deeptouch-growth-grid p {
    margin-top: 14px;
  }

  .deeptouch-growth-grid article > span {
    margin-top: 18px;
  }

  .deeptouch-growth-grid strong {
    margin-left: 0;
  }

  .deeptouch-booking {
    margin: 0 20px 72px;
    padding: 30px 24px;
    display: block;
  }

  .deeptouch-booking h2 {
    font-size: 30px;
  }

  .deeptouch-booking p {
    font-size: 16px;
  }

  .deeptouch-booking-qr {
    margin-top: 30px;
    justify-items: start;
  }

  .promo-page {
    min-width: 0;
  }

  .promo-page .promo-topbar {
    padding: 0 14px;
  }

  .promo-page .site-header {
    top: 34px;
  }

  .promo-page main {
    padding-top: 94px;
  }

  .promo-page .promo-hero {
    height: auto;
    min-height: 0;
    padding: 78px 20px 170px;
  }

  .promo-page .promo-hero-inner {
    width: 100%;
    padding-top: 0;
    display: block;
  }

  .promo-page .promo-hero-title h1 {
    font-size: 40px;
  }

  .promo-page .promo-hero-title h1 span,
  .promo-page .promo-section-head h2 span,
  .promo-page .promo-faq-title h2 span,
  .promo-page .promo-contact-card h2 span {
    white-space: normal;
  }

  .promo-page .promo-hero-copy {
    padding-top: 34px;
  }

  .promo-page .promo-hero-copy p {
    font-size: 16px;
  }

  .promo-page .promo-wave {
    height: 420px;
  }

  .promo-page .promo-wave::before {
    background: rgba(255, 255, 255, .10);
  }

  .promo-page .promo-wave-video {
    opacity: 1;
    object-position: center;
  }

  .promo-page .promo-definition,
  .promo-page .promo-fit,
  .promo-page .promo-advantage,
  .promo-page .promo-process,
  .promo-page .promo-offline,
  .promo-page .promo-result,
  .promo-page .promo-cases,
  .promo-page .promo-faq {
    width: auto;
    min-width: 0;
    padding: 64px 20px;
  }

  .promo-page .promo-section-head,
  .promo-page .promo-faq {
    display: block;
  }

  .promo-page .promo-section-head {
    padding: 0;
    margin-bottom: 34px;
  }

  .promo-page .promo-offline-head {
    display: block;
    margin-bottom: 34px;
  }

  .promo-page .promo-offline-head > span {
    display: block;
    margin-bottom: 14px;
    font-size: 17px;
  }

  .promo-page .promo-section-head h2,
  .promo-page .promo-advantage .promo-section-head p {
    width: auto;
  }

  .promo-page .promo-section-head h2,
  .promo-page .promo-faq-title h2,
  .promo-page .promo-offline-head h2 {
    font-size: 30px;
  }

  .promo-page .promo-offline-head h2 span {
    white-space: normal;
  }

  .promo-page .promo-offline-head p {
    margin-top: 18px;
    font-size: 16px;
  }

  .promo-page .promo-business-block {
    display: block;
    margin-top: 34px;
  }

  .promo-page .promo-business-copy {
    min-height: 0;
    margin-bottom: 18px;
    padding: 28px 24px;
    border-radius: 14px;
  }

  .promo-page .promo-business-copy h3 {
    margin: 42px 0 18px;
    font-size: 26px;
  }

  .promo-page .promo-business-copy p {
    font-size: 16px;
  }

  .promo-page .promo-business-visual {
    position: static;
    height: 142px;
    margin-top: 28px;
    border-top: 1px solid rgba(155, 92, 255, .14);
  }

  .promo-page .promo-detail-grid {
    display: block;
    margin-bottom: 18px;
    border-left: 0;
  }

  .promo-page .promo-detail-grid article {
    min-height: 0;
    padding: 24px 76px 24px 0;
    border-right: 0;
  }

  .promo-page .promo-detail-illo {
    right: 0;
    top: 24px;
    width: 54px;
    height: 42px;
  }

  .promo-page .promo-detail-grid span {
    margin-bottom: 16px;
    font-size: 22px;
  }

  .promo-page .promo-detail-grid b {
    font-size: 22px;
  }

  .promo-page .promo-detail-grid p {
    font-size: 15px;
  }

  .promo-page .promo-service-split {
    margin-bottom: 34px;
    display: block;
    border-left: 0;
    background: transparent;
  }

  .promo-page .promo-service-split article {
    min-height: 0;
    padding: 26px 86px 26px 0;
    border-right: 0;
    background: transparent;
  }

  .promo-page .promo-service-split article.featured {
    background: transparent;
  }

  .promo-page .promo-service-split b {
    margin-top: 24px;
    font-size: 25px;
  }

  .promo-page .promo-service-split p {
    font-size: 15px;
  }

  .promo-page .promo-service-illo {
    right: 0;
    top: 26px;
    width: 64px;
    height: 50px;
    border-radius: 16px;
  }

  .promo-page .promo-lead {
    width: auto;
    margin: 0 0 34px;
  }

  .promo-page .promo-capability-grid,
  .promo-page .promo-fit-grid,
  .promo-page .promo-advantage-grid,
  .promo-page .promo-result-grid,
  .promo-page .promo-case-grid {
    display: block;
  }

  .promo-page .promo-capability-grid article,
  .promo-page .promo-fit-grid article,
  .promo-page .promo-advantage-grid article,
  .promo-page .promo-result-grid article,
  .promo-page .promo-case-grid article {
    height: auto;
    min-height: 0;
    margin-bottom: 18px;
  }

  .promo-page .promo-advantage-grid article {
    padding-bottom: 220px;
  }

  .promo-page .promo-advantage-grid article::after {
    height: 180px;
  }

  .promo-page .process-growth {
    min-height: 0;
    padding-top: 0;
  }

  .promo-page .growth-curve {
    display: none;
  }

  .promo-page .process-growth::after {
    height: 120px;
    opacity: .45;
  }

  .promo-page .process-growth-grid {
    display: block;
  }

  .promo-page .process-growth-grid article {
    height: auto;
    min-height: 320px;
    margin-bottom: 18px;
    padding: 34px 24px 92px;
  }

  .promo-page .process-growth-grid h3 {
    font-size: 24px;
  }

  .promo-page .process-growth-grid b,
  .promo-page .process-growth-grid article:nth-child(1) b,
  .promo-page .process-growth-grid article:nth-child(2) b,
  .promo-page .process-growth-grid article:nth-child(3) b {
    left: 24px;
    bottom: 28px;
    transform: none;
  }

  .promo-page .growth-markers {
    display: none;
  }

  .promo-page .promo-offline-body,
  .promo-page .promo-offline-matrix,
  .promo-page .promo-offline-flow {
    display: block;
  }

  .promo-page .promo-offline-summary {
    min-height: 0;
    margin-bottom: 18px;
    padding: 30px 24px;
  }

  .promo-page .promo-offline-summary strong {
    margin: 46px 0 20px;
    font-size: 27px;
  }

  .promo-page .promo-offline-matrix {
    border-left: 0;
    border-right: 0;
  }

  .promo-page .promo-offline-row-head {
    display: none;
  }

  .promo-page .promo-offline-row {
    min-height: 0;
    padding: 26px 0;
    display: block;
    border-bottom: 1px solid rgba(17, 17, 17, .12);
  }

  .promo-page .promo-offline-row > * {
    height: auto;
    padding: 0;
    border-right: 0;
  }

  .promo-page .promo-offline-module {
    margin-bottom: 18px;
  }

  .promo-page .promo-offline-module b {
    font-size: 21px;
  }

  .promo-page .promo-offline-row p {
    margin-top: 12px;
    display: block;
    font-size: 16px;
  }

  .promo-page .promo-offline-row p:nth-of-type(1)::before {
    content: "传统痛点：";
    color: rgba(17, 17, 17, .42);
    font-weight: 600;
  }

  .promo-page .promo-offline-row p:nth-of-type(2)::before {
    content: "慧化方案：";
    color: rgba(17, 17, 17, .42);
    font-weight: 600;
  }

  .promo-page .promo-offline-row strong {
    margin-top: 12px;
    display: block;
    font-size: 17px;
  }

  .promo-page .promo-offline-row strong::before {
    content: "客户价值：";
    color: rgba(17, 17, 17, .42);
    font-weight: 600;
  }

  .promo-page .promo-offline-matrix .promo-offline-row-head {
    display: none;
  }

  .promo-page .promo-offline-flow {
    margin-top: 24px;
    border-left: 0;
  }

  .promo-page .promo-offline-flow article {
    position: relative;
    min-height: 0;
    padding: 24px 86px 24px 0;
    border-right: 0;
    background: transparent;
  }

  .promo-page .promo-flow-illo {
    right: 0;
    top: 22px;
    width: 62px;
    height: 48px;
    transform: scale(.86);
    transform-origin: top right;
  }

  .promo-page .promo-package-table {
    margin-top: 42px;
    padding-top: 28px;
  }

  .promo-page .promo-package-intro {
    display: block;
    margin-bottom: 18px;
  }

  .promo-page .promo-package-intro span {
    font-size: 24px;
  }

  .promo-page .promo-package-intro p {
    margin-top: 12px;
    font-size: 15px;
    white-space: normal;
  }

  .promo-page .promo-package-grid {
    display: block;
    border-left: 0;
  }

  .promo-page .promo-package-grid article {
    min-height: 0;
    padding: 26px 0;
    border-right: 0;
    background: transparent;
  }

  .promo-page .promo-package-grid article:nth-child(4) {
    padding-top: 56px;
    background: transparent;
  }

  .promo-page .promo-package-grid article:nth-child(4)::before {
    top: 12px;
    right: 0;
  }

  .promo-page .promo-package-grid article:nth-child(4)::after {
    top: 8px;
    right: -8px;
  }

  .promo-page .promo-package-grid b {
    min-height: 0;
    font-size: 20px;
  }

  .promo-page .promo-package-grid strong {
    margin-top: 18px;
    font-size: 40px;
  }

  .promo-page .promo-package-grid p {
    margin-top: 18px;
  }

  .promo-page .promo-faq-list button span {
    font-size: 19px;
  }

  .promo-page .promo-faq-list article.active p {
    margin: -4px 0 28px 0;
  }

  .promo-page .promo-contact {
    min-width: 0;
  }

  .promo-page .promo-contact-card {
    width: auto;
    height: auto;
    padding: 34px 24px;
    display: block;
  }

  .promo-page .promo-footer .footer-main {
    width: auto;
    padding: 54px 20px 28px;
  }

  .promo-page .promo-footer .footer-links {
    grid-template-columns: repeat(3, minmax(86px, 1fr));
    gap: 22px;
  }
}

@media (max-width: 900px) {
  .promo-page .promo-topbar {
    padding: 0 12px;
    gap: 10px;
    overflow: hidden;
  }

  .promo-page .promo-topbar span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .promo-page .promo-topbar a {
    flex: 0 0 auto;
    min-width: 96px;
    padding: 0 12px;
    font-size: 12px;
  }

  .promo-page {
    overflow-x: hidden;
  }
}

.api-doc-page {
  --doc-purple: #9B5CFF;
  --doc-purple-deep: #7A4BD9;
  --doc-purple-soft: #f4edff;
  --doc-ink: #211f2f;
  --doc-muted: rgba(33, 31, 47, .64);
  --doc-line: rgba(122, 75, 217, .16);
  --doc-soft: #fbf9ff;
  --doc-sidebar: #f8f5ff;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--doc-ink);
  background: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.api-doc-page code,
.api-doc-page pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.api-doc-shell {
  padding-top: 60px;
  display: block;
  min-height: 100vh;
}

/* 标准站点页脚叠加在固定侧栏/目录之上（统一头尾后） */
.api-doc-page .footer {
  position: relative;
  z-index: 100;
}

.api-doc-sidebar {
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 300px;
  height: auto;
  overflow: auto;
  padding: 28px 24px 52px;
  border-right: 1px solid var(--doc-line);
  background:
    linear-gradient(180deg, rgba(155, 92, 255, .075), rgba(255, 255, 255, .50) 34%, rgba(155, 92, 255, .045)),
    #fbf9ff;
}

.api-doc-sidebar-intro {
  margin: 0 0 26px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(122, 75, 217, .14);
}

.api-doc-sidebar-intro strong {
  display: block;
  color: #211f2f;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

.api-doc-sidebar-intro span {
  display: block;
  margin-top: 7px;
  color: rgba(33, 31, 47, .58);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.api-doc-sidebar section + section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(122, 75, 217, .12);
}

.api-doc-sidebar h2 {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(33, 31, 47, .62);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 750;
}

.api-doc-sidebar h2::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(122, 75, 217, .14);
}

.api-doc-sidebar a {
  min-height: 38px;
  margin: 2px 0;
  padding: 0 12px 0 34px;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 8px;
  color: rgba(33, 31, 47, .82);
  font-size: 16px;
  line-height: 1.34;
  font-weight: 500;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.api-doc-sidebar a::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(122, 75, 217, .25);
  transform: translateY(-50%);
}

.api-doc-sidebar a:hover,
.api-doc-sidebar a.active {
  color: var(--doc-purple-deep);
  background: rgba(155, 92, 255, .10);
  font-weight: 700;
}

.api-doc-sidebar a:hover {
  transform: translateX(2px);
}

.api-doc-sidebar a.active::before {
  width: 8px;
  height: 8px;
  background: var(--doc-purple);
  box-shadow: 0 0 0 4px rgba(155, 92, 255, .14);
}

.api-doc-main {
  min-width: 0;
  margin-left: 300px;
  margin-right: 280px;
  padding: 0 42px 96px;
}

.api-doc-content {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 10px;
}

.api-doc-breadcrumb {
  margin: 0;
  padding: 28px 0 18px;
  color: var(--doc-muted);
  border-top: 1px solid var(--doc-line);
  font-size: 14px;
}

.api-doc-content h1 {
  margin: 0 0 14px;
  color: var(--doc-ink);
  font-size: 36px;
  line-height: 1.25;
  font-weight: 800;
}

.api-doc-lead {
  margin: 0 0 34px;
  color: var(--doc-muted);
  font-size: 17px;
  line-height: 1.75;
}

.api-doc-content section {
  scroll-margin-top: 86px;
  padding: 34px 0 8px;
  border-top: 1px solid var(--doc-line);
}

.api-doc-content h2 {
  margin: 0 0 18px;
  color: var(--doc-ink);
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;
}

.api-doc-content h3 {
  margin: 28px 0 12px;
  color: var(--doc-ink);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 750;
}

.api-doc-content p,
.api-doc-content li {
  color: var(--doc-ink);
  font-size: 17px;
  line-height: 1.75;
}

.api-doc-content p {
  margin: 0 0 18px;
}

.api-doc-content a {
  color: var(--doc-purple-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.api-doc-content code {
  padding: 2px 5px;
  border-radius: 4px;
  color: #263241;
  background: var(--doc-purple-soft);
  font-size: .92em;
}

.api-doc-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--doc-line);
}

.api-doc-summary dl {
  margin: 0;
  padding: 18px 20px;
  border-right: 1px solid var(--doc-line);
  border-bottom: 1px solid var(--doc-line);
}

.api-doc-summary dl:nth-child(2n) {
  border-right: 0;
}

.api-doc-summary dl:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.api-doc-summary dt {
  margin-bottom: 8px;
  color: var(--doc-muted);
  font-size: 14px;
}

.api-doc-summary dd {
  margin: 0;
  color: var(--doc-ink);
  font-size: 16px;
  font-weight: 700;
}

.api-doc-steps {
  margin: 0;
  padding-left: 24px;
}

.api-method-line {
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--doc-line);
  background: var(--doc-soft);
}

.api-method-line span {
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  color: #fff;
  background: var(--doc-purple-deep);
  font-size: 14px;
  font-weight: 800;
}

.api-method-line code {
  padding: 0;
  color: var(--doc-ink);
  background: transparent;
  font-size: 17px;
  word-break: break-all;
}

.api-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--doc-line);
}

.api-doc-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 16px;
}

.api-doc-table th,
.api-doc-table td {
  min-width: 110px;
  padding: 14px 18px;
  border-right: 1px solid var(--doc-line);
  border-bottom: 1px solid var(--doc-line);
  vertical-align: top;
  text-align: left;
  line-height: 1.55;
}

.api-doc-table th {
  color: var(--doc-ink);
  background: #fafbfc;
  font-weight: 800;
}

.api-doc-table td {
  color: var(--doc-ink);
}

.api-doc-table tr:nth-child(even) td {
  background: #f7f8fa;
}

.api-doc-table th:last-child,
.api-doc-table td:last-child {
  border-right: 0;
}

.api-doc-table tr:last-child td {
  border-bottom: 0;
}

.api-doc-table.compact td:first-child,
.api-doc-table.compact th:first-child {
  width: 220px;
}

.api-code {
  margin: 0 0 20px;
  padding: 22px 24px;
  overflow-x: auto;
  border: 1px solid #dde4ef;
  border-radius: 6px;
  background: #111827;
  color: #e7edf8;
  font-size: 14px;
  line-height: 1.72;
}

.api-code code {
  padding: 0;
  color: inherit;
  background: transparent;
}

.api-doc-notes {
  margin: 0;
  padding-left: 22px;
}

.api-doc-toc {
  position: fixed;
  right: 0;
  top: 60px;
  bottom: 0;
  width: 280px;
  height: auto;
  overflow: auto;
  padding: 42px 28px 52px;
  border-left: 1px solid var(--doc-line);
  background: #fff;
}

.api-doc-toc a {
  min-height: 34px;
  padding-left: 11px;
  display: flex;
  align-items: center;
  position: relative;
  border-left: 3px solid transparent;
  color: var(--doc-muted);
  font-size: 15px;
  line-height: 1.36;
}

.api-doc-toc a:hover,
.api-doc-toc a.active {
  color: var(--doc-purple-deep);
}

.api-doc-toc a.active {
  border-left-color: var(--doc-purple);
}

.api-backtop {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--doc-purple-deep);
  background:
    conic-gradient(var(--doc-purple-deep) calc(var(--api-scroll-progress, 0) * 1turn), rgba(155, 92, 255, .12) 0),
    #fff;
  box-shadow: 0 10px 30px rgba(17, 24, 39, .18);
  font-size: 30px;
  line-height: 1;
}

.api-backtop::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(122, 75, 217, .06);
}

.api-backtop span {
  position: relative;
  z-index: 1;
  line-height: 1;
}

@media (max-width: 1180px) {
  .api-doc-header {
    grid-template-columns: minmax(260px, 1fr) auto;
  }

  .api-doc-search {
    display: none;
  }

  .api-doc-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .api-doc-toc {
    display: none;
  }
}

@media (max-width: 900px) {
  .api-doc-page {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .api-doc-header {
    position: sticky;
    height: auto;
    min-height: 64px;
    padding: 14px 18px;
    display: block;
  }

  .api-doc-brand {
    font-size: 22px;
  }

  .api-doc-topnav {
    margin-top: 14px;
    justify-content: flex-start;
    gap: 20px;
    overflow-x: auto;
  }

  .api-doc-shell {
    height: auto;
    padding-top: 64px;
    display: block;
    overflow: visible;
  }

  .api-doc-sidebar {
    position: static;
    height: auto;
    padding: 20px 18px;
    display: grid;
    grid-template-columns: 1fr;
    border-right: 0;
    border-bottom: 1px solid var(--doc-line);
  }

  .api-doc-sidebar-intro {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .api-doc-sidebar-intro strong {
    font-size: 20px;
  }

  .api-doc-sidebar section + section {
    margin-top: 18px;
  }

  .api-doc-sidebar section {
    overflow-x: auto;
    white-space: nowrap;
  }

  .api-doc-sidebar h2 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .api-doc-sidebar a {
    width: max-content;
    min-height: 32px;
    margin-right: 16px;
    padding: 0 10px;
    display: inline-flex;
    font-size: 15px;
  }

  .api-doc-sidebar a::before,
  .api-doc-sidebar a.active::before {
    display: none;
  }

  .api-doc-main {
    height: auto;
    padding: 0 18px 72px;
    overflow: visible;
  }

  .api-doc-content {
    max-width: none;
  }

  .api-doc-breadcrumb {
    padding-top: 24px;
  }

  .api-doc-content h1 {
    font-size: 30px;
  }

  .api-doc-content h2 {
    font-size: 24px;
  }

  .api-doc-content p,
  .api-doc-content li {
    font-size: 16px;
  }

  .api-doc-summary {
    display: block;
  }

  .api-doc-summary dl,
  .api-doc-summary dl:nth-child(2n),
  .api-doc-summary dl:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--doc-line);
  }

  .api-method-line {
    display: block;
    padding: 14px 16px;
  }

  .api-method-line span {
    margin-bottom: 10px;
  }

  .api-doc-table {
    min-width: 760px;
  }

  .api-code {
    padding: 18px;
    font-size: 13px;
  }

  .api-backtop {
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    font-size: 26px;
  }
}

/* Building block database page */
.database-page {
  --db-accent: #9b5cff;
  --db-ink: #101014;
  --db-muted: #64646f;
  --db-line: #e8e4ef;
  background: #f7f8fb;
  color: var(--db-ink);
}

.database-page .site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(16, 16, 20, .08);
  box-shadow: none;
}

.database-page .nav-link:hover,
.database-page .nav-item:hover,
.database-page .nav-link.active,
.database-page .nav-item.active,
.database-page .mega-menu a.active,
.database-page .mega-menu a:hover {
  color: var(--db-accent);
}

.database-page main {
  overflow: hidden;
}

.database-hero,
.database-products,
.database-compare,
.database-access {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.database-hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 68px;
  align-items: center;
  padding: 82px 0 74px;
}

.database-hero-copy > span,
.database-section-title > span,
.database-access > div > span {
  display: block;
  color: var(--db-accent);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.database-hero h1,
.database-section-title h2,
.database-access h2 {
  margin: 28px 0 0;
  color: #050507;
  font-size: clamp(48px, 5vw, 74px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.database-hero h1 span,
.database-section-title h2 span,
.database-access h2 span {
  display: block;
}

.database-hero-copy p {
  max-width: 660px;
  margin: 28px 0 0;
  color: var(--db-muted);
  font-size: 21px;
  line-height: 1.8;
}

.database-primary-action {
  min-width: 138px;
  height: 48px;
  margin-top: 36px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(90deg, #8752f6 0%, #b061ff 100%);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 16px 30px rgba(155, 92, 255, .24);
}

.database-hero-map {
  position: relative;
  height: 420px;
  border: 1px solid rgba(155, 92, 255, .20);
  border-radius: 16px;
  background:
    radial-gradient(circle at 58% 36%, rgba(155, 92, 255, .20), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(245, 240, 255, .86));
  overflow: hidden;
}

.database-hero-map svg {
  position: absolute;
  inset: 28px;
  width: calc(100% - 56px);
  height: calc(100% - 56px);
  fill: none;
  stroke: rgba(155, 92, 255, .48);
  stroke-width: 2;
}

.database-map-node {
  position: absolute;
  z-index: 1;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  color: var(--db-accent);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(155, 92, 255, .22);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 16px 28px rgba(155, 92, 255, .12);
}

.database-map-node::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(155, 92, 255, .26);
  border-radius: 50%;
}

.database-map-node.node-a { left: 58px; top: 62px; }
.database-map-node.node-b { right: 72px; top: 72px; }
.database-map-node.node-c { left: 76px; bottom: 72px; }
.database-map-node.node-d { right: 56px; bottom: 62px; }

.database-products {
  display: grid;
  gap: 28px;
}

.database-product-block {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 330px;
  gap: 36px;
  align-items: start;
  padding: 46px 0;
  border-top: 1px solid var(--db-line);
}

.database-product-block:last-child {
  border-bottom: 1px solid var(--db-line);
}

.database-product-index {
  color: rgba(155, 92, 255, .72);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.database-product-block h2 {
  margin: 0;
  color: #050507;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.18;
}

.database-product-block p {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--db-muted);
  font-size: 18px;
  line-height: 1.86;
}

.database-product-block .database-required-copy {
  color: rgba(16, 16, 20, .82);
  font-weight: 600;
}

.database-product-block ul {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(155, 92, 255, .18);
  background: rgba(255, 255, 255, .72);
}

.database-product-block li {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(155, 92, 255, .12);
}

.database-product-block li:last-child {
  border-bottom: 0;
}

.database-product-block li b {
  display: block;
  color: var(--db-accent);
  font-size: 15px;
  line-height: 1.3;
}

.database-product-block li span {
  display: block;
  margin-top: 7px;
  color: #17171d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}

.database-compare {
  padding: 94px 0 0;
}

.database-section-title {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.database-section-title h2 {
  margin-top: 0;
  font-size: clamp(42px, 4.6vw, 64px);
}

.database-compare-table {
  margin-top: 58px;
  border-top: 1px solid var(--db-line);
}

.database-compare-table > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--db-line);
}

.database-compare-table span {
  color: var(--db-accent);
  font-size: 19px;
  font-weight: 800;
}

.database-compare-table p {
  margin: 0;
  color: var(--db-muted);
  font-size: 18px;
  line-height: 1.78;
}

.database-compare-head {
  color: var(--db-accent);
  background: linear-gradient(90deg, rgba(155, 92, 255, .08), transparent 72%);
}

.database-compare-head span {
  padding-left: 14px;
}

.database-access {
  margin-top: 96px;
  margin-bottom: 110px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 42px;
  align-items: center;
  border: 1px solid rgba(155, 92, 255, .18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 20%, rgba(155, 92, 255, .18), transparent 34%),
    #fff;
}

.database-access h2 {
  margin-top: 18px;
  font-size: clamp(36px, 4vw, 54px);
}

.database-access p {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--db-muted);
  font-size: 19px;
  line-height: 1.78;
}

.database-access .database-primary-action {
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .database-hero,
  .database-products,
  .database-compare,
  .database-access {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
  }

  .database-hero {
    min-height: 0;
    display: block;
    padding: 58px 0 48px;
  }

  .database-hero h1,
  .database-section-title h2,
  .database-access h2 {
    font-size: 38px;
  }

  .database-hero-copy p,
  .database-product-block p,
  .database-compare-table p,
  .database-access p {
    font-size: 16px;
  }

  .database-hero-map {
    height: 300px;
    margin-top: 38px;
  }

  .database-map-node {
    width: 72px;
    height: 72px;
    font-size: 17px;
  }

  .database-product-block,
  .database-section-title,
  .database-compare-table > div,
  .database-access {
    display: block;
  }

  .database-product-block {
    padding: 36px 0;
  }

  .database-product-index {
    margin-bottom: 18px;
  }

  .database-product-block h2 {
    font-size: 30px;
  }

  .database-product-block ul {
    margin-top: 24px;
  }

  .database-compare {
    padding-top: 62px;
  }

  .database-compare-table span,
  .database-compare-table p {
    display: block;
    margin-top: 10px;
  }

  .database-compare-head {
    display: none !important;
  }

  .database-access {
    padding: 34px 24px;
    margin-top: 58px;
    margin-bottom: 70px;
  }

  .database-access .database-primary-action {
    margin-top: 28px;
  }
}

/* Database page hero spotlight override */
.database-page .database-hero {
  width: 100%;
  min-height: calc(100vh - 78px);
  margin: 0;
  padding: clamp(92px, 12vh, 142px) 24px clamp(80px, 11vh, 124px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  background: #050508;
}

.database-page .database-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -42%;
  left: 50%;
  width: min(138vw, 1900px);
  height: min(169vh, 1200px);
  transform: translateX(-50%) rotate(-24deg);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .21) 0%, rgba(255, 255, 255, .13) 16%, rgba(255, 255, 255, .05) 34%, transparent 64%);
  filter: blur(151px);
  opacity: .92;
}

.database-page .database-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 56%, transparent 0 42%, rgba(0, 0, 0, .42) 78%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 28%, rgba(0, 0, 0, .2));
  pointer-events: none;
}

.database-liquid-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform: none;
  opacity: 1;
  pointer-events: none;
  background: transparent;
  filter: saturate(1.06);
}

.database-liquid {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(1.18) contrast(1.08);
  mix-blend-mode: normal;
}

.liquid-ether-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.database-page .database-hero-copy {
  width: min(980px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.database-page .database-hero-copy > span {
  color: #a983ff;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 700;
}

.database-page .database-hero h1 {
  margin-top: 26px;
  color: #fff;
  font-size: clamp(40px, 4.1vw, 60px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.database-page .database-hero-copy p {
  max-width: 760px;
  margin: 26px auto 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(17px, 1.32vw, 20px);
  line-height: 1.82;
}

.database-page .database-hero .database-primary-action {
  margin-top: 42px;
  min-width: 150px;
  height: 52px;
}

@media (max-width: 900px) {
  .database-page .database-hero {
    min-height: 620px;
    margin: 0;
    padding: 86px 20px 82px;
  }

  .database-page .database-hero h1 {
    font-size: 34px;
    letter-spacing: -.025em;
  }

.database-page .database-hero-copy p {
    font-size: 17px;
  }
}

/* Investment and cooperation page */
.investment-page {
  --invest-ink: #111016;
  --invest-muted: rgba(17, 16, 22, .68);
  --invest-line: rgba(155, 92, 255, .18);
  --invest-soft: #f6f2ff;
  background: #f7f7fb;
}

.investment-page .site-header {
  position: sticky;
}

.investment-page main {
  background:
    radial-gradient(circle at 12% 4%, rgba(155, 92, 255, .16), transparent 28%),
    linear-gradient(180deg, #fbfbff 0%, #f4f2f8 58%, #fff 100%);
}

.investment-hero,
.investment-overview,
.investment-directions,
.investment-capability,
.investment-contact {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.investment-hero {
  min-height: 640px;
  padding: clamp(86px, 11vw, 138px) 0 clamp(64px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: clamp(48px, 7vw, 116px);
  align-items: center;
}

.investment-kicker,
.investment-section-head p,
.investment-capability-copy p,
.investment-contact-copy > p:first-child {
  margin: 0;
  color: var(--green);
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
}

.investment-hero h1,
.investment-section-head h2,
.investment-capability-copy h2,
.investment-contact-copy h2 {
  margin: 22px 0 0;
  color: var(--invest-ink);
  font-size: clamp(40px, 4.35vw, 66px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.investment-hero h1 span,
.investment-section-head h2 span,
.investment-capability-copy h2 span,
.investment-contact-copy h2 span {
  display: block;
}

.investment-lead {
  max-width: 720px;
  margin: 32px 0 0;
  color: rgba(17, 16, 22, .76);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.78;
  text-wrap: pretty;
}

.investment-actions {
  margin-top: 42px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.investment-text-link {
  color: var(--green);
  font-size: 17px;
  font-weight: 700;
}

.investment-text-link::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 10px;
  display: inline-block;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.investment-hero-panel {
  position: relative;
  min-height: 440px;
  padding: 34px;
  border: 1px solid rgba(155, 92, 255, .22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 74% 18%, rgba(155, 92, 255, .22), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(247, 241, 255, .82));
  overflow: hidden;
}

.investment-hero-panel::before {
  content: "";
  position: absolute;
  inset: 112px 30px 128px;
  background:
    linear-gradient(90deg, rgba(155, 92, 255, .18) 1px, transparent 1px),
    linear-gradient(rgba(155, 92, 255, .16) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000, transparent 76%);
}

.investment-panel-top {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.investment-panel-top span {
  color: rgba(17, 16, 22, .58);
  font-size: 16px;
}

.investment-panel-top strong {
  color: var(--invest-ink);
  font-size: 30px;
  line-height: 1.22;
}

.investment-flow {
  position: relative;
  z-index: 1;
  margin: 78px 0 72px;
  display: grid;
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
  align-items: center;
}

.investment-flow span {
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-gradient);
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 16px 30px rgba(155, 92, 255, .22);
}

.investment-flow i {
  height: 2px;
  background: rgba(155, 92, 255, .42);
}

.investment-hero-panel p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(17, 16, 22, .72);
  font-size: 17px;
  line-height: 1.75;
}

.investment-overview {
  padding: clamp(68px, 8vw, 110px) 0;
  border-top: 1px solid rgba(17, 16, 22, .08);
}

.investment-section-head {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(42px, 6vw, 112px);
  align-items: start;
}

.investment-section-head h2 {
  margin-top: 0;
  font-size: clamp(34px, 3.4vw, 52px);
}

.investment-section-head.compact {
  margin-bottom: 42px;
}

.investment-overview-body {
  margin-top: 58px;
  display: grid;
  grid-template-columns: 1.08fr .92fr .92fr;
  border: 1px solid rgba(17, 16, 22, .10);
  background: rgba(255, 255, 255, .64);
}

.investment-overview-body article {
  min-height: 260px;
  padding: clamp(30px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid rgba(17, 16, 22, .10);
}

.investment-overview-body article:last-child {
  border-right: 0;
}

.investment-overview-body h3,
.investment-direction h3,
.investment-capability-list strong {
  margin: 0;
  color: var(--invest-ink);
  font-size: 26px;
  line-height: 1.3;
  font-weight: 800;
}

.investment-overview-body p,
.investment-direction p,
.investment-capability-list span,
.investment-contact-copy > p:last-child {
  margin: 22px 0 0;
  color: var(--invest-muted);
  font-size: 17px;
  line-height: 1.78;
}

.investment-directions {
  padding: clamp(62px, 8vw, 108px) 0;
}

.investment-direction-grid {
  display: grid;
  grid-template-columns: 1.18fr .92fr;
  gap: 24px;
}

.investment-direction {
  min-height: 250px;
  padding: 34px;
  border: 1px solid rgba(155, 92, 255, .18);
  border-radius: 12px;
  background: #fff;
}

.investment-direction.primary {
  grid-row: span 2;
  min-height: 524px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(circle at 78% 22%, rgba(155, 92, 255, .20), transparent 32%),
    linear-gradient(145deg, #fff, #f7f1ff);
}

.investment-direction-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 42px;
  border-radius: 14px;
  background: rgba(155, 92, 255, .10);
  position: relative;
}

.investment-direction.primary .investment-direction-icon {
  width: 92px;
  height: 92px;
  margin-bottom: auto;
}

.investment-direction-icon::before,
.investment-direction-icon::after {
  content: "";
  position: absolute;
  border: 2px solid #9b5cff;
}

.icon-capital::before {
  inset: 22px 18px 20px;
  border-radius: 50%;
}

.icon-capital::after {
  left: 24px;
  top: 16px;
  width: 34px;
  height: 48px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 24px 0;
  transform: rotate(-34deg);
}

.icon-industry::before {
  left: 14px;
  right: 14px;
  bottom: 14px;
  height: 24px;
  border-radius: 4px;
}

.icon-industry::after {
  left: 20px;
  top: 14px;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  background: transparent;
}

.icon-api::before {
  left: 14px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.icon-api::after {
  left: 28px;
  top: 8px;
  width: 0;
  height: 42px;
  border-width: 0 2px 0 0;
  transform: rotate(45deg);
}

.icon-brand::before {
  left: 14px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.icon-brand::after {
  left: 32px;
  top: 30px;
  width: 20px;
  height: 0;
  border-width: 2px 0 0 0;
  transform: rotate(-28deg);
}

.investment-capability {
  padding: clamp(70px, 9vw, 126px) 0;
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: clamp(54px, 7vw, 118px);
  border-top: 1px solid rgba(17, 16, 22, .08);
  border-bottom: 1px solid rgba(17, 16, 22, .08);
}

.investment-capability-copy h2 {
  font-size: clamp(34px, 3.2vw, 50px);
}

.investment-capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(17, 16, 22, .10);
  background: #fff;
}

.investment-capability-list div {
  min-height: 214px;
  padding: 34px;
  border-right: 1px solid rgba(17, 16, 22, .10);
  border-bottom: 1px solid rgba(17, 16, 22, .10);
}

.investment-capability-list div:nth-child(2n) {
  border-right: 0;
}

.investment-capability-list div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.investment-contact {
  padding: clamp(72px, 9vw, 120px) 0 clamp(88px, 10vw, 140px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: clamp(48px, 8vw, 128px);
  align-items: center;
}

.investment-contact-copy h2 {
  font-size: clamp(38px, 4vw, 60px);
}

.investment-contact-card {
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 26px;
  align-items: center;
  border: 1px solid rgba(155, 92, 255, .18);
}

.investment-contact-card img {
  width: 148px;
  height: 148px;
  object-fit: contain;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}

.investment-contact-card strong,
.investment-contact-card span {
  display: block;
}

.investment-contact-card strong {
  color: var(--invest-ink);
  font-size: 22px;
  line-height: 1.35;
}

.investment-contact-card span {
  margin-top: 12px;
  color: var(--invest-muted);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .investment-hero,
  .investment-overview,
  .investment-directions,
  .investment-capability,
  .investment-contact {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
  }

  .investment-hero {
    min-height: 0;
    padding: 66px 0 54px;
    display: block;
  }

  .investment-hero h1,
  .investment-contact-copy h2 {
    font-size: 38px;
  }

  .investment-lead {
    font-size: 17px;
    line-height: 1.72;
  }

  .investment-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .investment-hero-panel {
    margin-top: 44px;
    min-height: 360px;
    padding: 26px;
  }

  .investment-flow {
    margin: 54px 0 48px;
    grid-template-columns: 1fr 30px 1fr 30px 1fr;
  }

  .investment-flow span {
    height: 60px;
    font-size: 15px;
  }

  .investment-section-head,
  .investment-capability,
  .investment-contact {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .investment-section-head h2,
  .investment-capability-copy h2 {
    font-size: 34px;
  }

  .investment-overview-body,
  .investment-direction-grid,
  .investment-capability-list {
    display: block;
  }

  .investment-overview-body article,
  .investment-direction,
  .investment-direction.primary,
  .investment-capability-list div {
    min-height: 0;
  }

  .investment-overview-body article,
  .investment-capability-list div {
    border-right: 0;
    border-bottom: 1px solid rgba(17, 16, 22, .10);
  }

  .investment-overview-body article:last-child,
  .investment-capability-list div:last-child {
    border-bottom: 0;
  }

  .investment-direction + .investment-direction {
    margin-top: 18px;
  }

  .investment-direction.primary {
    display: block;
  }

  .investment-direction.primary .investment-direction-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 34px;
  }

  .investment-contact-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* Investment relations redesign */
.investment-page main {
  padding-top: var(--header-height, 80px);
  background: #fff;
  overflow: visible;
  overflow-x: clip;
}

.ir-hero {
  min-height: clamp(620px, calc(100vh - var(--header-height, 80px)), 820px);
  color: #fff;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(12, 5, 32, .68), rgba(12, 5, 32, .42) 48%, rgba(12, 5, 32, .62)),
    url("assets/yj/tzbac.webp") center / cover no-repeat,
    #241052;
}

.ir-hero::before,
.ir-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ir-hero::before {
  inset: 0;
  background:
    radial-gradient(circle at 30% 48%, rgba(20, 9, 50, .08), transparent 0 34%),
    linear-gradient(180deg, rgba(8, 3, 22, .18), rgba(8, 3, 22, .42));
  opacity: .86;
}

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

.ir-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .08;
  mix-blend-mode: screen;
}

.ir-hero-inner {
  width: min(1200px, calc(100% - 64px));
  min-height: inherit;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 720px);
  gap: 0;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ir-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 700;
}

.ir-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.ir-hero-copy > p:last-child {
  max-width: 620px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.72;
  font-weight: 650;
}

.ir-hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ir-hero-actions a {
  min-width: 132px;
  min-height: 46px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  font-weight: 850;
  border-radius: 999px;
  background: linear-gradient(135deg, #7f4af2, #b985ff);
  box-shadow: 0 16px 38px rgba(82, 39, 255, .32);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.ir-hero-actions a + a {
  color: #f7f2ff;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.ir-hero-actions a:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(82, 39, 255, .42);
}

.ir-market-card {
  min-height: 340px;
  padding: 30px;
  background:
    linear-gradient(145deg, rgba(32, 16, 78, .94), rgba(20, 8, 49, .86)),
    rgba(17, 10, 45, .92);
  border-top: 2px solid #9b5cff;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(8, 4, 25, .26);
}

.ir-market-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 86% 18%, rgba(201, 139, 255, .26), transparent 34%),
    radial-gradient(circle at 12% 100%, rgba(132, 76, 255, .22), transparent 38%),
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 44%);
  opacity: .85;
}

.ir-market-grid,
.ir-chart {
  position: relative;
  z-index: 1;
}

.ir-market-grid {
  display: grid;
  gap: 18px;
}

.ir-market-stat span,
.ir-market-stat strong {
  display: block;
}

.ir-market-stat span {
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  line-height: 1.3;
}

.ir-market-stat strong {
  margin-top: 6px;
  color: #fff;
  font-size: 20px;
  line-height: 1.25;
}

.ir-market-stat:first-child strong {
  color: #c8a2ff;
}

.ir-chart {
  margin-top: 22px;
  height: 150px;
}

.ir-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ir-chart-grid {
  fill: none;
  stroke: rgba(255, 255, 255, .13);
  stroke-width: 1;
}

.ir-chart-fill {
  fill: rgba(167, 101, 255, .24);
}

.ir-chart-line {
  fill: none;
  stroke: #b985ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ir-about {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(100px, 10vw, 150px) 0;
  display: grid;
  grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
  gap: clamp(70px, 8vw, 122px);
  align-items: center;
}

.ir-orbit-visual {
  min-height: 540px;
  position: relative;
}

.ir-orbit-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgba(155, 92, 255, .42) 1.4px, transparent 1.4px);
  background-size: 13px 13px;
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 18%, #000 19% 67%, transparent 68%);
}

.ir-orbit-core {
  width: 92px;
  height: 92px;
  position: absolute;
  left: calc(50% - 46px);
  top: calc(50% - 46px);
  background:
    radial-gradient(circle at 55% 45%, #ff9ffc 0 8%, #8a4dff 18%, #12072c 48%, transparent 49%),
    conic-gradient(from 45deg, transparent 0 18%, #ff9ffc 19% 22%, transparent 24% 49%, #8a4dff 50% 54%, transparent 56% 100%);
  transform: rotate(45deg);
  box-shadow: 0 0 32px rgba(183, 110, 255, .42);
}

.ir-orbit-tile {
  width: 138px;
  min-height: 112px;
  padding: 24px 20px;
  color: #fff;
  background: linear-gradient(135deg, #8b4dff 0%, #a960ff 100%);
  position: absolute;
  display: grid;
  align-content: center;
}

.ir-orbit-tile strong {
  display: block;
  font-size: 30px;
  line-height: 1;
}

.ir-orbit-tile span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.tile-a {
  left: 82px;
  top: 82px;
}

.tile-b {
  right: 62px;
  top: 88px;
}

.tile-c {
  left: 84px;
  bottom: 70px;
}

.tile-d {
  right: 66px;
  bottom: 76px;
}

.ir-section-label {
  margin: 0 0 18px;
  color: #8f55ff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}

.ir-about h2,
.investment-contact-copy h2 {
  margin: 0;
  color: #111016;
  font-size: clamp(38px, 4.5vw, 58px);
  line-height: 1.18;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.ir-about-copy > p:not(.ir-section-label) {
  max-width: 780px;
  margin: 24px 0 0;
  color: #4f5563;
  font-size: 18px;
  line-height: 1.78;
}

.ir-solution-card {
  margin-top: 34px;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid rgba(17, 42, 89, .10);
  border-radius: 8px;
}

.ir-solution-card h3 {
  margin: 0 0 18px;
  color: #111016;
  font-size: 18px;
}

.ir-solution-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
}

.ir-solution-card li {
  color: #25314a;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  position: relative;
  padding-left: 18px;
}

.ir-solution-card li::before {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  left: 0;
  top: .62em;
  background: #9b5cff;
  transform: rotate(45deg);
}

.ir-action {
  width: fit-content;
  display: inline-flex;
  margin-top: 34px;
  padding: 15px 34px;
  background: linear-gradient(135deg, #7f4af2 0%, #b464ff 100%);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 850;
}

.tilted-card-caption {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  padding: 5px 10px;
  border-radius: 4px;
  background: #fff;
  color: #1d123f;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  opacity: 0;
  transform: translate3d(var(--caption-x, 0), var(--caption-y, 0), 0) rotate(var(--caption-rotate, 0deg));
  transition: opacity .12s ease;
}

.ir-visions-copy h2,
.investment-contact-copy h2 {
  max-width: 560px;
  font-size: clamp(32px, 3.15vw, 46px);
  line-height: 1.24;
  letter-spacing: -.025em;
}

.ir-contact {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  padding-top: clamp(74px, 8vw, 108px);
  border-top: 1px solid rgba(17, 16, 22, .10);
}

.ir-contact {
  grid-template-columns: minmax(0, 1fr) minmax(450px, 460px);
}

.investment-contact-copy h2 {
  max-width: none;
  white-space: nowrap;
}

.investment-contact-copy h2 span {
  display: inline;
}

.investment-contact-card {
  grid-template-columns: 148px minmax(250px, 1fr);
}

.investment-contact-card strong {
  white-space: nowrap;
}

.ir-visions {
  width: 100%;
  margin: 0;
  padding: clamp(86px, 9vw, 132px) 0;
  display: block;
  background:
    radial-gradient(circle at 50% 0%, rgba(155, 92, 255, .16), transparent 0 34%, transparent 58%),
    linear-gradient(180deg, #140d31 0%, #0e0924 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ir-visions::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(185, 133, 255, .18) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .26;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.ir-visions-head,
.ir-vision-list {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ir-visions-head {
  text-align: center;
  margin-bottom: 42px;
}

.ir-visions-head p {
  margin: 0 0 12px;
  color: #b985ff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 850;
}

.ir-visions-head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 5vw, 76px);
  line-height: 1;
  letter-spacing: -.03em;
}

.ir-visions-head span {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, .48);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
}

.ir-visions-head strong {
  display: block;
  margin-top: 18px;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  font-weight: 750;
}

.ir-vision-list {
  display: grid;
  gap: 14px;
}

.ir-vision-item {
  min-height: 116px;
  padding: 24px 34px;
  display: grid;
  grid-template-columns: 118px 88px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(185, 133, 255, .20);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
    rgba(255, 255, 255, .03);
}

.ir-vision-index {
  color: #9ea0ff;
  font-size: clamp(40px, 4vw, 58px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.03em;
}

.ir-vision-icon {
  width: 76px;
  height: 76px;
  display: block;
  border-radius: 14px;
  background: linear-gradient(135deg, #7d80ff 0%, #b985ff 100%);
  position: relative;
  box-shadow: 0 16px 34px rgba(126, 86, 255, .34);
}

.ir-vision-icon::before,
.ir-vision-icon::after {
  content: "";
  position: absolute;
  border: 3px solid #17112e;
}

.vision-ai::before {
  left: 22px;
  top: 24px;
  width: 32px;
  height: 26px;
  border-radius: 8px;
}

.vision-ai::after {
  left: 30px;
  top: 16px;
  width: 14px;
  height: 10px;
  border-width: 3px 3px 0 3px;
  border-radius: 8px 8px 0 0;
}

.vision-c2m::before {
  left: 21px;
  top: 24px;
  width: 32px;
  height: 26px;
  border-width: 0 0 3px 3px;
  transform: skewX(-10deg);
}

.vision-c2m::after {
  left: 28px;
  bottom: 18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 18px 0 0 #17112e;
}

.vision-campus::before {
  left: 18px;
  top: 26px;
  width: 38px;
  height: 22px;
  border-width: 3px 0 0 0;
  transform: rotate(0deg);
}

.vision-campus::after {
  left: 18px;
  top: 18px;
  width: 38px;
  height: 22px;
  border-width: 3px 3px 0 0;
  transform: rotate(26deg) skewX(-20deg);
}

.vision-screen::before {
  left: 18px;
  top: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border-width: 0;
  background:
    radial-gradient(circle at 50% 50%, #17112e 0 5px, transparent 6px),
    radial-gradient(circle at 10% 50%, #17112e 0 4px, transparent 5px),
    radial-gradient(circle at 90% 50%, #17112e 0 4px, transparent 5px),
    radial-gradient(circle at 50% 10%, #17112e 0 4px, transparent 5px),
    radial-gradient(circle at 50% 90%, #17112e 0 4px, transparent 5px);
}

.vision-screen::after {
  left: 28px;
  top: 28px;
  width: 20px;
  height: 20px;
  border-width: 3px 0 0 3px;
  transform: rotate(45deg);
}

.vision-drug::before {
  left: 20px;
  top: 26px;
  width: 38px;
  height: 20px;
  border-radius: 18px;
  transform: rotate(-42deg);
}

.vision-drug::after {
  left: 35px;
  top: 22px;
  width: 0;
  height: 30px;
  border-width: 0 0 0 3px;
  transform: rotate(-42deg);
}

.ir-vision-item h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.26;
  letter-spacing: -.02em;
}

/* Five visions, refined to match Huihua's light brand language */
.ir-visions {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(96px, 10vw, 150px) 0;
  display: grid;
  grid-template-columns: minmax(360px, 500px) minmax(0, 1fr);
  gap: clamp(72px, 8vw, 126px);
  align-items: center;
  background: #fff;
  color: #111016;
  overflow: visible;
}

.ir-visions::before {
  display: none;
}

.ir-visions-head,
.ir-vision-list {
  width: auto;
  margin: 0;
  position: relative;
  z-index: 1;
}

.ir-visions-head {
  min-height: 520px;
  display: grid;
  place-items: center;
  text-align: center;
  margin-bottom: 0;
  background-image: radial-gradient(circle, rgba(155, 92, 255, .34) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 59%);
}

.ir-visions-head::before,
.ir-visions-head::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ir-visions-head::before {
  width: 210px;
  height: 210px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 159, 252, .82) 0 8%, rgba(155, 92, 255, .92) 24%, rgba(18, 8, 48, .96) 54%, transparent 55%),
    conic-gradient(from 30deg, transparent 0 18%, rgba(155, 92, 255, .92) 19% 24%, transparent 25% 49%, rgba(255, 159, 252, .86) 50% 56%, transparent 57% 100%);
  box-shadow: 0 24px 70px rgba(155, 92, 255, .32);
}

.ir-visions-head::after {
  width: 310px;
  height: 310px;
  border: 1px solid rgba(155, 92, 255, .16);
  box-shadow:
    0 0 0 52px rgba(155, 92, 255, .035),
    0 0 0 104px rgba(155, 92, 255, .025);
}

.ir-visions-head p,
.ir-visions-head h2,
.ir-visions-head span,
.ir-visions-head strong {
  width: fit-content;
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 12px 18px;
  background: linear-gradient(135deg, #8b4dff 0%, #a960ff 100%);
  color: #fff;
  box-shadow: 0 20px 44px rgba(155, 92, 255, .18);
}

.ir-visions-head p {
  left: 16px;
  top: 86px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 850;
}

.ir-visions-head h2 {
  right: 18px;
  top: 108px;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.ir-visions-head span {
  left: 22px;
  bottom: 118px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .06em;
}

.ir-visions-head strong {
  right: 20px;
  bottom: 96px;
  max-width: 180px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 850;
}

.ir-vision-list {
  display: block;
  border-top: 1px solid rgba(17, 16, 22, .10);
}

.ir-vision-item {
  min-height: 116px;
  padding: 26px 0;
  display: grid;
  grid-template-columns: 86px 62px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(17, 16, 22, .10);
  border-radius: 0;
  background: transparent;
}

.ir-vision-index {
  color: #9b5cff;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.03em;
}

.ir-vision-icon {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: rgba(155, 92, 255, .10);
  box-shadow: none;
}

.ir-vision-icon::before,
.ir-vision-icon::after {
  border-color: #9b5cff;
}

.ir-vision-item h3 {
  color: #111016;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.24;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .ir-visions {
    grid-template-columns: 1fr;
  }

  .ir-visions-head {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .ir-visions {
    width: calc(100% - 40px);
    padding: 72px 0;
    gap: 44px;
  }

  .ir-visions-head {
    min-height: 360px;
  }

  .ir-visions-head::before {
    width: 150px;
    height: 150px;
  }

  .ir-visions-head::after {
    width: 230px;
    height: 230px;
  }

  .ir-visions-head p,
  .ir-visions-head h2,
  .ir-visions-head span,
  .ir-visions-head strong {
    padding: 10px 13px;
  }

  .ir-vision-item {
    grid-template-columns: 62px 48px minmax(0, 1fr);
    gap: 14px;
  }

  .ir-vision-icon {
    width: 44px;
    height: 44px;
  }
}

/* Five visions, image-2 inspired layout */
.ir-visions {
  width: min(1220px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(96px, 10vw, 150px) 0;
  display: grid;
  grid-template-columns: minmax(460px, 560px) minmax(0, 1fr);
  gap: clamp(72px, 8vw, 126px);
  align-items: center;
  background: #fff;
  color: #111016;
  overflow: visible;
}

.ir-visions::before {
  display: none;
}

.ir-visions-visual {
  min-height: 560px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 52%, rgba(155, 92, 255, .12), transparent 0 34%, transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(248, 244, 255, .72));
}

.ir-visions-halo {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(155, 92, 255, .07) 27% 28%, transparent 29% 42%, rgba(155, 92, 255, .055) 43% 44%, transparent 45% 100%),
    radial-gradient(circle, rgba(124, 91, 255, .46) 1.3px, transparent 1.3px);
  background-size: 100% 100%, 16px 16px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 67%, transparent 68%);
  opacity: .68;
  animation: visionHaloDrift 18s linear infinite;
}

.ir-visions-halo::before,
.ir-visions-halo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(94, 86, 255, .14);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ir-visions-halo::before {
  width: 330px;
  height: 330px;
}

.ir-visions-halo::after {
  width: 430px;
  height: 430px;
}

.ir-visions-core {
  width: 128px;
  height: 128px;
  position: absolute;
  left: calc(50% - 64px);
  top: calc(50% - 64px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ff9ffc 0 9%, #9b5cff 25%, #160638 58%, #070412 78%);
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, .90),
    0 0 44px rgba(155, 92, 255, .55),
    0 28px 90px rgba(155, 92, 255, .28);
  animation: visionCorePulse 4.8s ease-in-out infinite;
}

.ir-visions-core::before,
.ir-visions-core::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 148px;
  height: 34px;
  border-radius: 0 22px 22px 0;
  transform-origin: 0 50%;
  opacity: .86;
}

.ir-visions-core::before {
  background: linear-gradient(90deg, rgba(155, 92, 255, .95), transparent);
  transform: rotate(8deg);
  animation: visionBeamA 7s ease-in-out infinite;
}

.ir-visions-core::after {
  background: linear-gradient(90deg, rgba(255, 159, 252, .82), transparent);
  transform: rotate(132deg);
  animation: visionBeamB 8s ease-in-out infinite;
}

.ir-visions-tile {
  position: absolute;
  min-width: 144px;
  padding: 16px 18px;
  border: 1px solid rgba(155, 92, 255, .20);
  background: rgba(255, 255, 255, .86);
  color: #241746;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 850;
  box-shadow: 0 18px 46px rgba(80, 44, 160, .12);
  backdrop-filter: blur(16px);
  animation: visionTileFloat 6s ease-in-out infinite;
}

.ir-visions-tile strong {
  display: block;
  margin-bottom: 6px;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.02em;
  color: #8c54ff;
}

.tile-vision-a {
  left: 36px;
  top: 104px;
}

.tile-vision-b {
  right: 28px;
  top: 118px;
  animation-delay: -.9s;
}

.tile-vision-c {
  left: 38px;
  bottom: 116px;
  animation-delay: -1.8s;
}

.tile-vision-d {
  right: 38px;
  bottom: 106px;
  animation-delay: -2.7s;
}

.tile-vision-e {
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(247, 239, 255, .92);
  color: #7f4af2;
  animation-name: visionTileFloatCenter;
  animation-delay: -3.6s;
}

@keyframes visionHaloDrift {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(4deg) scale(1.015);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes visionCorePulse {
  0%,
  100% {
    transform: scale(1);
    filter: saturate(1);
  }
  50% {
    transform: scale(1.035);
    filter: saturate(1.18);
  }
}

@keyframes visionBeamA {
  0%,
  100% {
    transform: rotate(8deg) scaleX(.86);
    opacity: .58;
  }
  50% {
    transform: rotate(13deg) scaleX(1.08);
    opacity: .9;
  }
}

@keyframes visionBeamB {
  0%,
  100% {
    transform: rotate(132deg) scaleX(.82);
    opacity: .5;
  }
  50% {
    transform: rotate(126deg) scaleX(1.05);
    opacity: .84;
  }
}

@keyframes visionTileFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes visionTileFloatCenter {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

.ir-visions-copy {
  min-width: 0;
}

.ir-visions-copy .ir-section-label {
  margin: 0 0 20px;
  color: #7f4af2;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 850;
}

.ir-visions-copy h2 {
  margin: 0;
  color: #111016;
  max-width: 560px;
  font-size: clamp(32px, 3.15vw, 46px);
  line-height: 1.24;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.ir-visions-copy > p:not(.ir-section-label) {
  max-width: 720px;
  margin: 24px 0 0;
  color: #586172;
  font-size: 18px;
  line-height: 1.78;
}

.ir-visions-card {
  margin-top: 34px;
  padding: 28px 32px;
  border: 1px solid rgba(17, 16, 22, .10);
  border-radius: 8px;
  background: #fff;
}

.ir-visions-card h3 {
  margin: 0 0 18px;
  color: #111016;
  font-size: 20px;
  line-height: 1.3;
}

.ir-visions-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 34px;
}

.ir-visions-card li {
  padding-left: 18px;
  position: relative;
  color: #22304a;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 750;
}

.ir-visions-card li::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  left: 0;
  top: .7em;
  background: #9b5cff;
  transform: rotate(45deg);
}

@media (max-width: 1080px) {
  .ir-visions {
    grid-template-columns: 1fr;
  }

  .ir-visions-visual {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .ir-visions {
    width: calc(100% - 40px);
    padding: 72px 0;
    gap: 44px;
  }

  .ir-visions-visual {
    min-height: 420px;
  }

  .ir-visions-core {
    width: 96px;
    height: 96px;
    left: calc(50% - 48px);
    top: calc(50% - 48px);
  }

  .ir-visions-tile {
    min-width: 116px;
    padding: 12px 14px;
    font-size: 14px;
  }

  .ir-visions-tile strong {
    font-size: 18px;
  }

  .tile-vision-a,
  .tile-vision-c {
    left: 0;
  }

  .tile-vision-b,
  .tile-vision-d {
    right: 0;
  }

  .ir-visions-card ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .ir-hero-inner,
  .ir-about {
    grid-template-columns: 1fr;
  }

  .ir-market-card {
    max-width: 620px;
  }

  .ir-orbit-visual {
    min-height: 470px;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
  }

}

@media (max-width: 700px) {
  .ir-hero-inner,
  .ir-about,
  .ir-contact {
    width: calc(100% - 40px);
  }

  .ir-hero-inner {
    min-height: 0;
    padding: 78px 0;
  }

  .ir-hero h1 {
    font-size: clamp(42px, 14vw, 58px);
  }

  .ir-market-card {
    min-height: 0;
    padding: 22px;
  }

  .ir-about {
    padding: 78px 0;
  }

  .ir-orbit-visual {
    min-height: 410px;
  }

  .ir-orbit-tile {
    width: 118px;
    min-height: 92px;
    padding: 18px 16px;
  }

  .tile-a,
  .tile-c {
    left: 4px;
  }

  .tile-b,
  .tile-d {
    right: 4px;
  }

  .ir-solution-card ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .investment-contact.ir-contact {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .investment-contact-copy h2,
  .investment-contact-card strong {
    white-space: normal;
  }

  .investment-contact-copy h2 span {
    display: block;
  }

  .investment-contact-copy {
    min-width: 0;
  }

  .investment-contact-card {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ir-visions-halo,
  .ir-visions-core,
  .ir-visions-core::before,
  .ir-visions-core::after,
  .ir-visions-tile {
    animation: none;
  }
}

/* Investment page: refined vision system and join section */
.ir-vision-system {
  min-height: 560px;
  padding: 36px;
  border: 1px solid rgba(155, 92, 255, .16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 159, 252, .22), transparent 0 28%),
    radial-gradient(circle at 16% 86%, rgba(82, 39, 255, .12), transparent 0 34%),
    linear-gradient(145deg, #fff, #f9f6ff 62%, #fff);
  box-shadow: 0 34px 88px rgba(48, 26, 96, .08);
}

.ir-vision-system::before {
  content: "";
  position: absolute;
  inset: 32px;
  border: 1px solid rgba(155, 92, 255, .12);
  background-image:
    linear-gradient(rgba(155, 92, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 92, 255, .08) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .48;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.ir-vision-system::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  top: 128px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155, 92, 255, .38), transparent);
  animation: visionPanelScan 4.8s ease-in-out infinite;
  pointer-events: none;
}

.vision-system-topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(17, 16, 22, .08);
}

.vision-system-topline span {
  color: #8c54ff;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .14em;
}

.vision-system-topline strong {
  color: #15101f;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}

.vision-system-core {
  position: absolute;
  z-index: 2;
  left: 36px;
  bottom: 36px;
  width: 164px;
  height: 164px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 44%, rgba(255, 159, 252, .95) 0 8%, rgba(155, 92, 255, .92) 24%, #1a0a3d 58%, #07030f 78%),
    #110720;
  box-shadow:
    0 0 0 14px rgba(255, 255, 255, .88),
    0 24px 72px rgba(155, 92, 255, .26);
}

.vision-system-core::before,
.vision-system-core::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 22px;
  border-radius: 999px;
  transform-origin: 0 50%;
  pointer-events: none;
}

.vision-system-core::before {
  width: 280px;
  background: linear-gradient(90deg, rgba(155, 92, 255, .52), transparent);
  transform: rotate(-18deg);
  animation: visionBeamWide 6.6s ease-in-out infinite;
}

.vision-system-core::after {
  width: 230px;
  background: linear-gradient(90deg, rgba(255, 159, 252, .42), transparent);
  transform: rotate(-44deg);
  animation: visionBeamWide 7.4s ease-in-out infinite reverse;
}

.vision-system-core span,
.vision-system-core strong {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.vision-system-core span {
  color: rgba(255, 255, 255, .56);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}

.vision-system-core strong {
  margin-top: 2px;
  color: #fff;
  font-size: 70px;
  line-height: .9;
  letter-spacing: -.08em;
}

.vision-system-lanes {
  position: relative;
  z-index: 3;
  margin-top: 32px;
  margin-left: 126px;
  display: grid;
  gap: 14px;
}

.vision-lane {
  min-height: 66px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(155, 92, 255, .15);
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 16px 44px rgba(70, 42, 132, .08);
  backdrop-filter: blur(14px);
}

.vision-lane::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #5227ff, #ff9ffc);
  opacity: .76;
}

.vision-lane::after {
  content: "";
  position: absolute;
  left: -35%;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  transform: skewX(-18deg);
  animation: visionLaneLight 5.4s ease-in-out infinite;
}

.vision-lane:nth-child(2)::after {
  animation-delay: .35s;
}

.vision-lane:nth-child(3)::after {
  animation-delay: .7s;
}

.vision-lane:nth-child(4)::after {
  animation-delay: 1.05s;
}

.vision-lane:nth-child(5)::after {
  animation-delay: 1.4s;
}

.vision-lane b,
.vision-lane em,
.vision-lane i {
  position: relative;
  z-index: 1;
  font-style: normal;
}

.vision-lane b {
  color: #9b5cff;
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.02em;
}

.vision-lane em {
  color: #111016;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 900;
}

.vision-lane i {
  justify-self: end;
  color: rgba(82, 39, 255, .76);
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
  white-space: nowrap;
}

@keyframes visionPanelScan {
  0%,
  100% {
    transform: translateY(0);
    opacity: .2;
  }
  50% {
    transform: translateY(300px);
    opacity: .75;
  }
}

@keyframes visionBeamWide {
  0%,
  100% {
    opacity: .38;
    filter: blur(0);
  }
  50% {
    opacity: .82;
    filter: blur(1px);
  }
}

@keyframes visionLaneLight {
  0%,
  64% {
    left: -35%;
    opacity: 0;
  }
  75% {
    opacity: .8;
  }
  100% {
    left: 105%;
    opacity: 0;
  }
}

@media (max-width: 1080px) {
}

@media (max-width: 700px) {
  .ir-vision-system {
    min-height: auto;
    padding: 24px;
  }

  .ir-vision-system::before,
  .ir-vision-system::after,
  .vision-system-core {
    display: none;
  }

  .vision-system-lanes {
    margin: 24px 0 0;
  }

  .vision-lane {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }

  .vision-lane i {
    grid-column: 2;
    justify-self: start;
  }

}

@media (prefers-reduced-motion: reduce) {
  .ir-vision-system::after,
  .vision-system-core::before,
  .vision-system-core::after,
  .vision-lane::after {
    animation: none;
  }
}

/* Investment page: vision cards with full image backgrounds */
.ir-visions-intro h2 span {
  display: block;
}

.ir-visions-intro {
  grid-template-columns: 210px minmax(420px, 560px) minmax(320px, 410px);
  gap: clamp(34px, 4.8vw, 70px);
  align-items: start;
  padding-bottom: clamp(44px, 5vw, 66px);
}

.ir-visions-intro .ir-section-label {
  padding-top: 12px;
  font-size: 18px;
  line-height: 1.35;
}

.ir-visions-intro h2 {
  max-width: 560px;
  font-size: clamp(36px, 3.45vw, 50px);
  line-height: 1.16;
  letter-spacing: -.028em;
}

.ir-visions-intro > p:not(.ir-section-label) {
  max-width: 410px;
  padding-top: 8px;
  font-size: 17px;
  line-height: 1.86;
  color: #4f596b;
}

.ir-vision-columns {
  gap: 0;
  align-items: stretch;
}

.ir-vision-column {
  min-height: 560px;
  background: #fff;
  transition:
    transform .36s cubic-bezier(.2, .8, .2, 1),
    box-shadow .36s cubic-bezier(.2, .8, .2, 1),
    border-color .36s cubic-bezier(.2, .8, .2, 1);
}

.ir-vision-column::before {
  z-index: 0;
  inset: 0;
  background-image: var(--vision-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .92;
  transform: translateY(0) scale(1.01);
  transition:
    transform .52s cubic-bezier(.22, 1, .36, 1),
    opacity .34s ease;
}

.ir-vision-column::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .54), rgba(255, 255, 255, .70) 42%, rgba(255, 255, 255, .82)),
    radial-gradient(circle at 50% 0%, rgba(155, 92, 255, .12), transparent 0 46%);
  transition: opacity .34s ease;
  pointer-events: none;
}

.ir-vision-column:hover {
  z-index: 2;
  transform: translateY(-8px);
  border-color: rgba(155, 92, 255, .28);
  box-shadow: 0 30px 80px rgba(62, 35, 126, .14);
}

.ir-vision-column:hover::before {
  transform: translateY(105%) scale(.98);
  opacity: 0;
}

.ir-vision-column:hover::after {
  opacity: .18;
}

.ir-vision-column span {
  display: none;
}

.ir-vision-column p {
  margin: 0 0 30px;
  padding: 0 0 10px;
  border-radius: 0;
  background: transparent;
  color: #8c54ff;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: .04em;
}

.ir-vision-column p::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-top: 12px;
  background: linear-gradient(90deg, #7f4af2, rgba(185, 133, 255, 0));
}

.ir-vision-column h3 {
  font-size: clamp(25px, 2.15vw, 34px);
  line-height: 1.18;
}

.ir-vision-column ul {
  margin-top: 34px;
}

.ir-vision-column li {
  color: #3f4858;
  font-weight: 760;
}

@media (max-width: 1120px) {
  .ir-vision-column {
    min-height: 430px;
  }
}

@media (max-width: 700px) {
  .ir-visions-intro h2 span {
    display: inline;
  }

  .ir-vision-column {
    min-height: 440px;
    padding: 36px 24px;
    border: 1px solid rgba(155, 92, 255, .14) !important;
    margin-bottom: 14px;
  }

  .ir-vision-column::before,
  .ir-vision-column::after {
    inset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ir-vision-column,
  .ir-vision-column::before,
  .ir-vision-column::after {
    transition: none;
  }
}

/* Investment page: contact cards */
.investment-contact.ir-contact {
  grid-template-columns: minmax(0, 1fr) minmax(560px, 680px);
  gap: clamp(48px, 7vw, 110px);
}

.investment-contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.investment-contact-card {
  min-width: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  border: 1px solid rgba(155, 92, 255, .22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(155, 92, 255, .10), transparent 0 48%),
    #fff;
}

.investment-contact-card p {
  margin: 0;
  color: #8c54ff;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
}

.investment-contact-card img {
  width: 156px;
  height: 156px;
  padding: 8px;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(17, 16, 22, .08);
}

.investment-contact-card strong,
.investment-contact-card span {
  display: block;
}

.investment-contact-card strong {
  color: #111016;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 900;
  white-space: normal;
}

.investment-contact-card span {
  margin-top: 8px;
  color: #626a79;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1120px) {
  .investment-contact.ir-contact {
    grid-template-columns: 1fr;
  }

  .investment-contact-cards {
    max-width: 720px;
  }
}

@media (max-width: 640px) {
  .investment-contact-cards {
    grid-template-columns: 1fr;
  }
}

/* Join us page */
.join-page main {
  padding-top: var(--header-height, 60px);
  background: #fff;
}

.join-hero {
  min-height: clamp(560px, calc(100vh - var(--header-height, 60px)), 760px);
  color: #fff;
  background:
    radial-gradient(circle at 66% 42%, rgba(144, 83, 255, .32), transparent 0 28%),
    radial-gradient(circle at 38% 58%, rgba(255, 159, 252, .18), transparent 0 26%),
    linear-gradient(135deg, #080417 0%, #13082f 42%, #21104f 100%);
  position: relative;
  overflow: hidden;
}

.join-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 74% 46%, rgba(255, 255, 255, .08) 1px, transparent 1.7px),
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 4, 22, .28), rgba(7, 4, 22, .04) 50%, rgba(7, 4, 22, .32));
  background-size: 16px 16px, 190px 190px, 190px 190px, 100% 100%;
  opacity: .72;
}

.join-hero::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .62) 1px, transparent 1.45px);
  background-size: 13px 13px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 62%, transparent 78%);
  opacity: .42;
  transform-origin: 50% 50%;
  animation: joinFieldRotate 54s linear infinite;
  pointer-events: none;
}

.join-hero-inner {
  width: min(1680px, calc(100% - 64px));
  min-height: inherit;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1500px);
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.join-hero-copy p {
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}

.join-hero-copy p span {
  color: rgba(185, 133, 255, .66);
  font-weight: 900;
}

.join-hero-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(54px, 5.4vw, 86px);
  line-height: 1.08;
  letter-spacing: -.032em;
  font-weight: 900;
  white-space: nowrap;
}

.join-hero-copy h1 span {
  display: inline;
}

.join-hero-actions {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 24px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.join-hero-actions a {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f9f6ff;
  font-size: 16px;
  font-weight: 850;
  border: 1px solid rgba(185, 133, 255, .74);
  background: rgba(11, 8, 35, .38);
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.join-hero-actions a:hover {
  transform: translateY(-2px);
  background: rgba(155, 92, 255, .22);
  border-color: rgba(255, 255, 255, .72);
}

.join-hero-art {
  display: none;
  min-height: 470px;
  position: relative;
}

.join-orbit {
  width: min(48vw, 560px);
  aspect-ratio: 1;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 34%, rgba(185, 133, 255, .16) 34.4% 34.8%, transparent 35.2% 52%, rgba(185, 133, 255, .16) 52.4% 52.8%, transparent 53.2%),
    radial-gradient(circle, rgba(255, 255, 255, .75) 1px, transparent 1.4px);
  background-size: 100% 100%, 13px 13px;
  mask-image: radial-gradient(circle, transparent 0 18%, #000 19% 74%, transparent 75%);
  animation: joinRotate 36s linear infinite;
}

.join-plane {
  width: min(28vw, 360px);
  aspect-ratio: 1.22;
  position: absolute;
  right: 3%;
  top: 18%;
  background:
    linear-gradient(135deg, rgba(82, 39, 255, .95), rgba(255, 159, 252, .72) 54%, rgba(91, 255, 218, .86));
  clip-path: polygon(0 0, 100% 8%, 78% 100%, 12% 74%);
  filter: drop-shadow(0 34px 70px rgba(82, 39, 255, .42));
  transform: rotate(8deg);
}

@keyframes joinRotate {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@keyframes joinFieldRotate {
  to {
    transform: rotate(360deg);
  }
}

.join-visions {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
}

.join-about {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 48vh, 560px);
  padding: clamp(22px, 2.4vw, 42px) 0 clamp(112px, 10vw, 160px);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(155, 92, 255, .10), transparent 0 34%, transparent 62%),
    linear-gradient(180deg, #fff, #fbfaff);
  border-bottom: 1px solid rgba(17, 16, 22, .10);
}

.join-about::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 34%;
  background-image: url("assets/yj/gs.webp");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .94;
  filter: saturate(1.04) contrast(1.02);
  pointer-events: none;
}

.join-about::after {
  bottom: 0;
  background-position: center 68%;
  clip-path: polygon(0 100%, 100% 100%, 52% 0);
}

.join-about-inner {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 64px));
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  grid-template-areas:
    "label title"
    ". copy";
  column-gap: clamp(44px, 6vw, 92px);
  row-gap: clamp(24px, 3vw, 38px);
  align-content: start;
  align-items: start;
}

.join-intro {
  width: 100%;
  margin: 0;
  padding: clamp(66px, 7vw, 98px) 0 clamp(34px, 4vw, 54px);
  overflow: hidden;
  border-bottom: 1px solid rgba(17, 16, 22, .10);
  background: #fff;
}

.join-intro-copy {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto clamp(34px, 4vw, 54px);
  display: grid;
  grid-template-columns: 170px minmax(540px, 620px) minmax(320px, 460px);
  gap: clamp(34px, 4.5vw, 70px);
  align-items: start;
}

.join-section-label,
.join-visions-head p {
  margin: 0;
  color: #8c54ff;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
}

.join-about-inner h2,
.join-intro-copy h2,
.join-visions-head h2 {
  margin: 0;
  color: #111016;
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1.16;
  letter-spacing: -.03em;
  font-weight: 900;
  text-wrap: balance;
}

.join-about-inner h2 {
  grid-area: title;
  max-width: none;
  font-size: clamp(32px, 2.45vw, 40px);
  line-height: 1.14;
  white-space: nowrap;
}

.join-about-inner .join-section-label {
  grid-area: label;
  padding-top: 8px;
}

.join-intro-copy h2 {
  font-size: clamp(36px, 3.05vw, 48px);
  max-width: 620px;
  line-height: 1.12;
}

.join-intro-copy h2 span {
  display: block;
  white-space: nowrap;
}

.join-about-copy {
  grid-area: copy;
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px);
}

.join-about-copy p,
.join-intro-copy p:last-child {
  margin: 0;
  color: #586172;
  font-size: 18px;
  line-height: 1.82;
}

.join-about-copy p:first-child {
  color: #6f45d8;
  font-weight: 850;
}

.join-marquee {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(155, 92, 255, .18);
  border-bottom: 1px solid rgba(155, 92, 255, .18);
  background:
    linear-gradient(90deg, rgba(155, 92, 255, .08), transparent 20%, transparent 80%, rgba(155, 92, 255, .08)),
    #fbfaff;
}

.join-marquee-track {
  width: max-content;
  display: flex;
  animation: joinMarquee 28s linear infinite;
}

.join-marquee-track span {
  min-width: clamp(230px, 20vw, 340px);
  padding: 24px clamp(28px, 3vw, 48px);
  color: #111016;
  font-size: clamp(20px, 1.8vw, 20px);
  line-height: 1.2;
  font-weight: 700;
  border-right: 1px solid rgba(155, 92, 255, .16);
}

@keyframes joinMarquee {
  to {
    transform: translateX(-50%);
  }
}

.join-visions {
  padding: clamp(66px, 7vw, 104px) 0 clamp(88px, 10vw, 140px);
}

.join-visions-head {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  gap: clamp(34px, 5vw, 78px);
  margin-bottom: 42px;
}

.join-visions-head h2 {
  max-width: 780px;
  font-size: clamp(30px, 2.8vw, 44px);
}

.join-vision-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(155, 92, 255, .16);
}

.join-vision-card {
  position: relative;
  min-height: 560px;
  padding: clamp(34px, 3vw, 48px) clamp(22px, 2vw, 32px);
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  border-right: 1px solid rgba(155, 92, 255, .16);
  display: flex;
  flex-direction: column;
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    box-shadow .38s cubic-bezier(.22, 1, .36, 1),
    border-color .38s cubic-bezier(.22, 1, .36, 1);
}

.join-vision-card::before,
.join-vision-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.join-vision-card::before {
  background-image: var(--join-vision-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  filter: saturate(1.08) contrast(1.04);
  transform: translateY(0) scale(1.01);
  transition:
    transform .62s cubic-bezier(.22, 1, .36, 1),
    opacity .42s ease;
}

.join-vision-card::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .02) 0%, rgba(255, 255, 255, .08) 18%, rgba(255, 255, 255, .56) 34%, rgba(255, 255, 255, .74) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01) 55%, rgba(255, 255, 255, .06));
  transition: opacity .36s ease;
}

.join-vision-card:nth-child(1) {
  --join-vision-bg: url("assets/yj/jrwm1.webp");
}

.join-vision-card:nth-child(2) {
  --join-vision-bg: url("assets/yj/jrwm2.webp");
}

.join-vision-card:nth-child(3) {
  --join-vision-bg: url("assets/yj/jrwm3.webp");
}

.join-vision-card:nth-child(4) {
  --join-vision-bg: url("assets/yj/jrwm4.webp");
}

.join-vision-card:nth-child(5) {
  --join-vision-bg: url("assets/yj/jrwm5.webp");
}

.join-vision-card:hover {
  transform: translateY(-8px);
  border-color: rgba(155, 92, 255, .32);
  box-shadow: 0 18px 46px rgba(62, 39, 118, .13);
}

.join-vision-card:hover::before {
  opacity: 0;
  transform: translateY(105%) scale(.98);
}

.join-vision-card:hover::after {
  opacity: .18;
}

.join-vision-card:last-child {
  border-right: 0;
}

.join-vision-card > span {
  display: none;
}

.join-vision-card h3 {
  position: relative;
  z-index: 1;
  max-width: 9.5em;
  margin: clamp(136px, 10.5vw, 168px) 0 0;
  color: #111016;
  font-size: clamp(24px, 1.85vw, 32px);
  line-height: 1.18;
  letter-spacing: -.026em;
  font-weight: 900;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(255, 255, 255, .94);
}

.join-vision-card p {
  position: relative;
  z-index: 1;
  margin: 24px 0 0;
  color: #384252;
  font-size: 16px;
  line-height: 1.72;
  font-weight: 760;
  text-shadow: 0 1px 16px rgba(255, 255, 255, .92);
}

.join-vision-card label {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 850;
  border-radius: 999px;
  background: linear-gradient(135deg, #7f4af2, #b985ff);
  cursor: pointer;
}

.join-vision-card input {
  display: none;
}

.join-vision-card label span {
  padding: 13px 20px;
}

.join-vision-card small {
  position: relative;
  z-index: 1;
  min-height: 20px;
  margin-top: 14px;
  color: #6a7280;
  font-size: 13px;
  line-height: 1.5;
}

.join-vision-card.uploading small {
  color: #7f4af2;
}

.join-vision-card.uploaded small {
  color: #34785f;
}

@media (max-width: 1180px) {
  .join-hero-inner,
  .join-about-inner,
  .join-intro-copy,
  .join-visions-head {
    grid-template-columns: 1fr;
  }

  .join-hero-inner {
    grid-template-columns: 1fr;
  }

  .join-about-inner {
    grid-template-areas:
      "label"
      "title"
      "copy";
  }

  .join-about-inner h2 {
    white-space: normal;
  }

  .join-about-copy {
    grid-template-columns: 1fr;
  }

  .join-intro-copy h2 span {
    white-space: normal;
  }

  .join-hero-art {
    display: none;
  }

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

  .join-vision-card {
    min-height: 460px;
    border-bottom: 1px solid rgba(155, 92, 255, .16);
  }
}

@media (max-width: 700px) {
  .join-hero-inner,
  .join-about-inner,
  .join-intro-copy,
  .join-visions {
    width: calc(100% - 40px);
  }

  .join-hero {
    min-height: 540px;
  }

  .join-hero-copy h1 {
    font-size: clamp(42px, 13vw, 58px);
    white-space: normal;
  }

  .join-about {
    min-height: auto;
    padding-top: clamp(32px, 8vw, 54px);
    padding-bottom: clamp(150px, 34vw, 210px);
  }

  .join-about::after {
    height: clamp(124px, 28vw, 180px);
  }

  .join-intro-copy h2 span {
    display: inline;
    white-space: normal;
  }

  .join-hero-actions,
  .join-vision-grid {
    grid-template-columns: 1fr;
  }

  .join-vision-card {
    min-height: 420px;
    border-right: 0;
  }

  .join-vision-card h3 {
    margin-top: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .join-orbit,
  .join-marquee-track,
  .join-vision-card,
  .join-vision-card::before,
  .join-vision-card::after {
    animation: none;
    transition: none;
  }
}

/* Investment page: compact five-vision editorial layout */
.ir-visions {
  width: min(1320px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(92px, 9vw, 132px) 0 clamp(72px, 7vw, 104px);
  display: block;
  background: #fff;
  color: #111016;
}

.ir-visions-intro {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(360px, 620px) minmax(280px, 420px);
  gap: clamp(38px, 6vw, 88px);
  align-items: start;
  padding-bottom: clamp(42px, 5vw, 68px);
  border-bottom: 1px solid rgba(17, 16, 22, .10);
}

.ir-visions-intro .ir-section-label {
  margin: 0;
  color: #8c54ff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 900;
}

.ir-visions-intro h2 {
  margin: 0;
  color: #111016;
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.ir-visions-intro > p:not(.ir-section-label) {
  margin: 0;
  color: #586172;
  font-size: 17px;
  line-height: 1.78;
}

.ir-vision-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid rgba(17, 16, 22, .10);
}

.ir-vision-column {
  min-height: 420px;
  padding: clamp(36px, 4vw, 54px) clamp(22px, 2.8vw, 36px);
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(155, 92, 255, .18);
}

.ir-vision-column:first-child {
  border-left: 1px solid rgba(17, 16, 22, .06);
}

.ir-vision-column::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .84) 52%, rgba(255, 255, 255, .96)),
    var(--vision-bg),
    radial-gradient(circle at 50% 4%, rgba(155, 92, 255, .10), transparent 0 46%),
    linear-gradient(180deg, rgba(155, 92, 255, .035), transparent 42%);
  background-size: cover, 88% auto, auto, auto;
  background-position: center, 50% 102%, center, center;
  background-repeat: no-repeat;
  opacity: .88;
  pointer-events: none;
}

.ir-vision-column:nth-child(1) {
  --vision-bg: url("assets/yj/yj1.webp");
}

.ir-vision-column:nth-child(2) {
  --vision-bg: url("assets/yj/yj2.webp");
}

.ir-vision-column:nth-child(3) {
  --vision-bg: url("assets/yj/yj3.webp");
}

.ir-vision-column:nth-child(4) {
  --vision-bg: url("assets/yj/yj4.webp");
}

.ir-vision-column:nth-child(5) {
  --vision-bg: url("assets/yj/yj5.webp");
}

.ir-vision-column span,
.ir-vision-column p,
.ir-vision-column h3,
.ir-vision-column ul {
  position: relative;
  z-index: 1;
}

.ir-vision-column span {
  display: block;
  color: rgba(155, 92, 255, .22);
  font-size: clamp(68px, 6vw, 96px);
  line-height: .8;
  font-weight: 950;
  letter-spacing: -.08em;
}

.ir-vision-column p {
  width: fit-content;
  margin: 30px 0 22px;
  padding: 7px 13px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7f4af2, #b985ff);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
}

.ir-vision-column h3 {
  margin: 0;
  color: #111016;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.22;
  letter-spacing: -.018em;
}

.ir-vision-column ul {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.ir-vision-column li {
  padding-left: 22px;
  position: relative;
  color: #586172;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 650;
}

.ir-vision-column li::before {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  left: 0;
  top: .8em;
  border-radius: 50%;
  background: #9b5cff;
}

@media (max-width: 1120px) {
  .ir-visions-intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ir-vision-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(17, 16, 22, .10);
  }

  .ir-vision-column {
    min-height: 320px;
    border-bottom: 1px solid rgba(155, 92, 255, .14);
  }
}

@media (max-width: 700px) {
  .ir-visions {
    width: calc(100% - 40px);
    padding: 72px 0 56px;
  }

  .ir-vision-columns {
    grid-template-columns: 1fr;
  }

  .ir-vision-column {
    min-height: 0;
    padding: 34px 0;
    border-left: 0 !important;
    border-right: 0;
  }

  .ir-vision-column::before {
    inset: 0 -20px;
  }
}

/* Investment page: final vision card treatment */
.ir-visions-intro {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(320px, 460px);
  grid-template-areas:
    "label body"
    "title body";
  column-gap: clamp(64px, 8vw, 126px);
  row-gap: 14px;
  align-items: center;
  padding-bottom: clamp(48px, 5vw, 70px);
  border-bottom: 1px solid rgba(17, 16, 22, .10);
}

.ir-visions-intro .ir-section-label {
  grid-area: label;
  margin: 0;
  color: #8c54ff;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
}

.ir-visions-intro h2 span {
  display: block;
}

.ir-visions-intro h2 {
  grid-area: title;
  max-width: 720px;
  margin: 0;
  color: #111016;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.14;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.ir-visions-intro > p:not(.ir-section-label) {
  grid-area: body;
  max-width: 440px;
  margin: 0;
  padding-top: 10px;
  color: #586172;
  font-size: 17px;
  line-height: 1.9;
}

.ir-vision-columns {
  gap: 0;
  align-items: stretch;
  border-top: 1px solid rgba(155, 92, 255, .14);
  border-bottom: 1px solid rgba(17, 16, 22, .10);
}

.ir-vision-column {
  min-height: 560px;
  padding: clamp(42px, 4.2vw, 62px) clamp(24px, 2.6vw, 38px);
  isolation: isolate;
  background: #fff;
  border-right: 1px solid rgba(155, 92, 255, .16);
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    box-shadow .38s ease,
    border-color .38s ease;
}

.ir-vision-column:first-child {
  border-left: 1px solid rgba(155, 92, 255, .12);
}

.ir-vision-column::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: var(--vision-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .88;
  transform: translateY(0) scale(1.015);
  transform-origin: 50% 100%;
  transition:
    transform .62s cubic-bezier(.22, 1, .36, 1),
    opacity .42s ease;
  pointer-events: none;
}

.ir-vision-column::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .24) 44%, rgba(255, 255, 255, .50)),
    linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 54%, rgba(255, 255, 255, .28));
  transition: opacity .36s ease;
  pointer-events: none;
}

.ir-vision-column span {
  display: none;
}

.ir-vision-column p,
.ir-vision-column h3,
.ir-vision-column ul {
  position: relative;
  z-index: 1;
}

.ir-vision-column p {
  width: auto;
  margin: 0 0 34px;
  padding: 0 0 12px;
  border-radius: 0;
  background: transparent;
  color: #7f4af2;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: .04em;
}

.ir-vision-column p::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 13px;
  background: linear-gradient(90deg, #7f4af2, rgba(185, 133, 255, 0));
}

.ir-vision-column h3 {
  margin: 0;
  color: #111016;
  font-size: clamp(25px, 2.08vw, 33px);
  line-height: 1.18;
  letter-spacing: -.018em;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(255, 255, 255, .72);
}

.ir-vision-column ul {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.ir-vision-column li {
  padding-left: 22px;
  color: #3f4858;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 760;
  text-shadow: 0 1px 12px rgba(255, 255, 255, .68);
}

.ir-vision-column:hover {
  z-index: 2;
  transform: translateY(-8px);
  border-color: rgba(155, 92, 255, .28);
  box-shadow: 0 30px 80px rgba(62, 35, 126, .14);
}

.ir-vision-column:hover::before {
  transform: translateY(108%) scale(.98);
  opacity: 0;
}

.ir-vision-column:hover::after {
  opacity: .16;
}

@media (max-width: 1120px) {
  .ir-visions-intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "body";
    gap: 18px;
  }

  .ir-visions-intro > p:not(.ir-section-label) {
    max-width: 680px;
    padding-top: 0;
  }

  .ir-vision-column {
    min-height: 430px;
  }
}

@media (max-width: 700px) {
  .ir-visions-intro h2 span {
    display: inline;
  }

  .ir-vision-column {
    min-height: 420px;
    padding: 36px 24px;
    margin-bottom: 14px;
    border: 1px solid rgba(155, 92, 255, .14) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ir-vision-column,
  .ir-vision-column::before,
  .ir-vision-column::after {
    transition: none;
  }
}

/* Classroom redesign: AI + Chemistry course page */
.classroom-redesign {
  --classroom-bg: #f6f7fb;
  --classroom-ink: #111016;
  --classroom-muted: #646a76;
  --classroom-line: rgba(17, 16, 22, .10);
  --classroom-accent: #9053ff;
  --classroom-accent-2: #6bd8ff;
  background: var(--classroom-bg);
}

.classroom-redesign main {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.classroom-redesign .classroom-hero {
  min-height: calc(100vh - 60px);
  width: 100%;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(144, 83, 255, .18), transparent 0 32%),
    linear-gradient(180deg, #f8f8fd 0%, #f1f3f9 100%);
}

.classroom-redesign .classroom-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(144, 83, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(144, 83, 255, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 48%, #000 0 48%, transparent 76%);
}

.classroom-redesign .classroom-hero-center {
  width: min(1160px, 100%);
  display: grid;
  justify-items: center;
  text-align: center;
}

.classroom-redesign .classroom-kicker,
.classroom-redesign .classroom-overview-copy span,
.classroom-redesign .classroom-section-head > span,
.classroom-redesign .classroom-deliverables > div > span,
.classroom-redesign .classroom-contact span {
  margin: 0 0 18px;
  display: block;
  color: var(--classroom-accent);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 900;
}

.classroom-redesign .classroom-hero h1 {
  max-width: 1160px;
  margin: 0;
  color: var(--classroom-ink);
  font-size: clamp(54px, 6vw, 86px);
  line-height: 1.06;
  letter-spacing: 0;
  font-weight: 950;
  text-wrap: balance;
}

.classroom-redesign .classroom-hero h1 span,
.classroom-redesign .classroom-section-head h2 span {
  display: inline;
  white-space: normal;
}

.classroom-redesign .classroom-hero p:not(.classroom-kicker) {
  max-width: 760px;
  margin: 26px 0 0;
  color: var(--classroom-muted);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.78;
}

.classroom-redesign .classroom-hero-actions {
  margin-top: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.classroom-redesign .classroom-text-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--classroom-accent);
  font-size: 17px;
  font-weight: 850;
}

.classroom-redesign .classroom-overview,
.classroom-redesign .classroom-section,
.classroom-redesign .classroom-deliverables,
.classroom-redesign .classroom-contact {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
}

.classroom-redesign .classroom-overview {
  padding: clamp(78px, 8vw, 118px) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
  gap: clamp(42px, 6vw, 86px);
  align-items: start;
}

.classroom-redesign .classroom-overview h2,
.classroom-redesign .classroom-section-head h2,
.classroom-redesign .classroom-deliverables h2,
.classroom-redesign .classroom-contact h2 {
  margin: 0;
  color: var(--classroom-ink);
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.16;
  letter-spacing: 0;
  font-weight: 920;
  text-wrap: balance;
}

.classroom-redesign .classroom-overview p,
.classroom-redesign .classroom-contact p {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--classroom-muted);
  font-size: 18px;
  line-height: 1.82;
}

.classroom-redesign .classroom-overview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--classroom-line);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 22px 70px rgba(64, 48, 118, .08);
}

.classroom-redesign .classroom-overview-stats article {
  min-height: 150px;
  padding: 30px;
  display: grid;
  align-content: center;
  border-right: 1px solid var(--classroom-line);
  border-bottom: 1px solid var(--classroom-line);
}

.classroom-redesign .classroom-overview-stats article:nth-child(2n) {
  border-right: 0;
}

.classroom-redesign .classroom-overview-stats article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.classroom-redesign .classroom-overview-stats strong {
  color: var(--classroom-accent);
  font-size: 48px;
  line-height: .95;
  font-weight: 920;
}

.classroom-redesign .classroom-overview-stats span {
  margin-top: 12px;
  color: var(--classroom-muted);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 750;
}

.classroom-redesign .classroom-section {
  padding: clamp(88px, 9vw, 132px) 0 0;
}

.classroom-redesign .classroom-section-head {
  margin-bottom: clamp(34px, 5vw, 64px);
  display: grid;
  grid-template-columns: 180px minmax(0, 820px);
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}

.classroom-redesign .classroom-section-head.compact {
  grid-template-columns: 180px minmax(0, 980px);
}

.classroom-redesign .classroom-module-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--classroom-line);
  border-bottom: 1px solid var(--classroom-line);
}

.classroom-redesign .classroom-module-grid article {
  min-height: 340px;
  padding: clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--classroom-line);
  background:
    radial-gradient(circle at 50% 0%, rgba(144, 83, 255, .08), transparent 0 56%),
    #fff;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.classroom-redesign .classroom-module-grid article:last-child {
  border-right: 0;
}

.classroom-redesign .classroom-module-grid article:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 83, 255, .28);
  box-shadow: 0 18px 44px rgba(64, 48, 118, .10);
}

.classroom-redesign .classroom-module-grid span,
.classroom-redesign .module-detail-head span {
  color: var(--classroom-accent);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}

.classroom-redesign .classroom-module-grid h3 {
  margin: 28px 0 18px;
  color: var(--classroom-ink);
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.16;
  font-weight: 920;
}

.classroom-redesign .classroom-module-grid p {
  margin: 0;
  color: var(--classroom-muted);
  font-size: 16px;
  line-height: 1.72;
}

.classroom-redesign .classroom-module-grid b {
  margin-top: auto;
  color: rgba(17, 16, 22, .42);
  font-size: 15px;
  line-height: 1.2;
}

.classroom-redesign .classroom-path-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  position: relative;
}

.classroom-redesign .classroom-path-line article {
  min-height: 126px;
  padding: 26px 22px;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--classroom-line);
  border-right: 0;
  background: #fff;
}

.classroom-redesign .classroom-path-line article:last-child {
  border-right: 1px solid var(--classroom-line);
}

.classroom-redesign .classroom-path-line b {
  color: var(--classroom-accent);
  font-size: 20px;
  line-height: 1;
}

.classroom-redesign .classroom-path-line span {
  color: var(--classroom-ink);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 850;
}

.classroom-redesign .classroom-syllabus-list {
  display: grid;
  gap: 0;
}

.classroom-redesign .classroom-syllabus-tabs {
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--classroom-line);
  background: rgba(255, 255, 255, .72);
}

.classroom-redesign .classroom-syllabus-tabs button {
  min-height: 58px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--classroom-line);
  background: transparent;
  color: #48505d;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 850;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.classroom-redesign .classroom-syllabus-tabs button:last-child {
  border-right: 0;
}

.classroom-redesign .classroom-syllabus-tabs button:hover,
.classroom-redesign .classroom-syllabus-tabs button.active {
  background: linear-gradient(135deg, #7f4af2, #b985ff);
  color: #fff;
  box-shadow: 0 12px 26px rgba(144, 83, 255, .18);
}

.classroom-redesign .classroom-module-detail {
  display: none;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--classroom-line);
  background: #fff;
}

.classroom-redesign .classroom-module-detail.active {
  display: grid;
}

.classroom-redesign .module-detail-head {
  position: relative;
  top: auto;
  align-self: start;
  padding-right: clamp(8px, 2vw, 24px);
}

.classroom-redesign .module-detail-head h3 {
  margin: 16px 0 18px;
  color: var(--classroom-ink);
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.16;
  font-weight: 940;
}

.classroom-redesign .module-detail-head p {
  margin: 0;
  color: var(--classroom-muted);
  font-size: 16px;
  line-height: 1.8;
}

.classroom-redesign .stage-list {
  display: grid;
  gap: 14px;
}

.classroom-redesign .stage-list section {
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: 22px;
  border: 1px solid rgba(144, 83, 255, .12);
  background: linear-gradient(180deg, rgba(144, 83, 255, .035), rgba(255, 255, 255, .86));
}

.classroom-redesign .stage-list b {
  grid-row: span 3;
  color: var(--classroom-accent);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 950;
}

.classroom-redesign .stage-list h4 {
  margin: 0;
  color: var(--classroom-ink);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 900;
}

.classroom-redesign .stage-list p {
  margin: 10px 0 0;
  color: #525967;
  font-size: 15px;
  line-height: 1.7;
}

.classroom-redesign .stage-list small {
  margin-top: 12px;
  color: #326b7b;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 750;
}

.classroom-redesign .classroom-deliverables {
  margin-top: clamp(88px, 9vw, 132px);
  padding: clamp(42px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 76px);
  background:
    radial-gradient(circle at 100% 0%, rgba(107, 216, 255, .16), transparent 0 42%),
    #111016;
  color: #fff;
}

.classroom-redesign .classroom-deliverables h2 {
  color: #fff;
}

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

.classroom-redesign .classroom-deliverable-grid article {
  min-height: 160px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
}

.classroom-redesign .classroom-deliverable-grid b {
  color: #fff;
  font-size: 20px;
  line-height: 1.25;
}

.classroom-redesign .classroom-deliverable-grid p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .70);
  font-size: 15px;
  line-height: 1.7;
}

.classroom-redesign .classroom-contact {
  margin-top: clamp(82px, 9vw, 126px);
  margin-bottom: clamp(82px, 9vw, 126px);
  padding: clamp(38px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
  border: 1px solid var(--classroom-line);
  background: #fff;
}

.classroom-redesign .classroom-contact .pill {
  margin-top: 30px;
}

.classroom-redesign .classroom-contact-qr {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.classroom-redesign .classroom-contact img {
  width: 170px;
  height: 170px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(64, 48, 118, .12);
}

.classroom-redesign .classroom-contact-qr p {
  margin: 0;
  color: var(--classroom-muted);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 750;
}

@media (max-width: 1180px) {
  .classroom-redesign .classroom-overview,
  .classroom-redesign .classroom-module-detail,
  .classroom-redesign .classroom-deliverables {
    grid-template-columns: 1fr;
  }

  .classroom-redesign .classroom-module-grid,
  .classroom-redesign .classroom-path-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-redesign .classroom-module-grid article,
  .classroom-redesign .classroom-path-line article {
    border: 1px solid var(--classroom-line);
  }

  .classroom-redesign .module-detail-head {
    position: static;
  }
}

@media (max-width: 900px) {
  .classroom-redesign main {
    padding: 0;
  }

  .classroom-redesign .classroom-hero {
    min-height: calc(100dvh - 64px);
    padding: 76px 20px 60px;
  }

  .classroom-redesign .classroom-hero h1 {
    font-size: clamp(42px, 13vw, 64px);
  }

  .classroom-redesign .classroom-hero p:not(.classroom-kicker),
  .classroom-redesign .classroom-overview p,
  .classroom-redesign .classroom-contact p {
    font-size: 16px;
  }

  .classroom-redesign .classroom-overview,
  .classroom-redesign .classroom-section,
  .classroom-redesign .classroom-deliverables,
  .classroom-redesign .classroom-contact {
    width: calc(100% - 40px);
  }

  .classroom-redesign .classroom-overview {
    padding-top: 64px;
  }

  .classroom-redesign .classroom-section {
    padding-top: 72px;
  }

  .classroom-redesign .classroom-section-head,
  .classroom-redesign .classroom-section-head.compact,
  .classroom-redesign .classroom-module-grid,
  .classroom-redesign .classroom-path-line,
  .classroom-redesign .classroom-overview-stats,
  .classroom-redesign .classroom-syllabus-tabs,
  .classroom-redesign .classroom-deliverable-grid,
  .classroom-redesign .classroom-contact {
    grid-template-columns: 1fr;
  }

  .classroom-redesign .classroom-section-head {
    gap: 12px;
    margin-bottom: 28px;
  }

  .classroom-redesign .classroom-section-head h2,
  .classroom-redesign .classroom-overview h2,
  .classroom-redesign .classroom-deliverables h2,
  .classroom-redesign .classroom-contact h2 {
    font-size: 32px;
    line-height: 1.22;
  }

  .classroom-redesign .classroom-module-grid article {
    min-height: 0;
  }

  .classroom-redesign .classroom-syllabus-tabs button {
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--classroom-line);
  }

  .classroom-redesign .classroom-syllabus-tabs button:last-child {
    border-bottom: 0;
  }

  .classroom-redesign .stage-list section {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .classroom-redesign .stage-list b {
    grid-row: auto;
  }

  .classroom-redesign .classroom-deliverables,
  .classroom-redesign .classroom-contact {
    padding: 30px 24px;
  }

  .classroom-redesign .classroom-contact-qr {
    justify-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .classroom-redesign .classroom-module-grid article {
    transition: none;
  }
}

/* Classroom page v2: productized course layout */
.classroom-redesign {
  --classroom-bg: #f4f5fa;
  --classroom-panel: #ffffff;
  --classroom-ink: #101018;
  --classroom-body: #333947;
  --classroom-muted: #667085;
  --classroom-line: rgba(27, 25, 42, .11);
  --classroom-accent: #8b50ff;
  --classroom-accent-dark: #6735cf;
  --classroom-cyan: #43bfd2;
  --classroom-shadow: 0 16px 38px rgba(45, 34, 88, .08);
  background: var(--classroom-bg);
}

.classroom-redesign main {
  padding-top: 60px;
  background:
    linear-gradient(90deg, rgba(139, 80, 255, .055) 1px, transparent 1px),
    linear-gradient(rgba(139, 80, 255, .04) 1px, transparent 1px),
    var(--classroom-bg);
  background-size: 96px 96px;
}

.classroom-redesign .classroom-hero {
  min-height: calc(100dvh - 60px);
  padding: clamp(84px, 10vw, 138px) 24px clamp(70px, 8vw, 110px);
  background:
    radial-gradient(circle at 50% 42%, rgba(139, 80, 255, .18), transparent 0 30%),
    linear-gradient(180deg, #fbfbfe 0%, #f4f5fa 72%, rgba(244, 245, 250, 0) 100%);
}

.classroom-redesign .classroom-hero::before {
  opacity: .75;
  background-size: 58px 58px;
}

.classroom-redesign .classroom-hero-center {
  width: min(1120px, 100%);
}

.classroom-redesign .classroom-kicker {
  margin-bottom: 22px;
  color: #5d6472;
  font-size: 18px;
  font-weight: 850;
}

.classroom-redesign .classroom-hero h1 {
  max-width: 980px;
  font-size: clamp(58px, 7.2vw, 104px);
  line-height: 1.02;
  letter-spacing: 0;
}

.classroom-redesign .classroom-hero p:not(.classroom-kicker) {
  max-width: 760px;
  color: #4f5665;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.8;
}

.classroom-redesign .classroom-hero-actions {
  margin-top: 42px;
}

.classroom-redesign .classroom-text-link span {
  color: var(--classroom-cyan);
}

.classroom-redesign .reveal {
  opacity: 1;
  transform: none;
}

.classroom-redesign .reveal.in-view {
  animation: none;
}

.classroom-redesign .classroom-overview,
.classroom-redesign .classroom-section,
.classroom-redesign .classroom-deliverables,
.classroom-redesign .classroom-contact {
  width: min(1320px, calc(100% - 80px));
}

.classroom-redesign .classroom-overview {
  padding-top: clamp(72px, 7vw, 112px);
  grid-template-columns: minmax(0, 730px) minmax(360px, 460px);
  gap: clamp(54px, 8vw, 120px);
}

.classroom-redesign .classroom-overview-copy span,
.classroom-redesign .classroom-section-head > span,
.classroom-redesign .classroom-deliverables > div > span,
.classroom-redesign .classroom-contact span {
  margin-bottom: 16px;
  color: var(--classroom-accent-dark);
  font-size: 17px;
  font-weight: 900;
}

.classroom-redesign .classroom-overview h2,
.classroom-redesign .classroom-section-head h2,
.classroom-redesign .classroom-deliverables h2,
.classroom-redesign .classroom-contact h2 {
  font-size: clamp(36px, 3.5vw, 58px);
  line-height: 1.14;
  letter-spacing: 0;
}

.classroom-redesign .classroom-overview p,
.classroom-redesign .classroom-contact p {
  color: var(--classroom-body);
  line-height: 1.9;
}

.classroom-redesign .classroom-overview-stats {
  align-self: stretch;
  border: 1px solid var(--classroom-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--classroom-panel);
  box-shadow: var(--classroom-shadow);
}

.classroom-redesign .classroom-overview-stats article {
  min-height: 132px;
  padding: 26px 28px;
}

.classroom-redesign .classroom-overview-stats strong {
  font-size: 52px;
}

.classroom-redesign .classroom-section {
  padding-top: clamp(86px, 8vw, 124px);
}

.classroom-redesign .classroom-section-head {
  max-width: 1040px;
  margin-bottom: 36px;
  display: block;
}

.classroom-redesign .classroom-section-head h2 span {
  display: inline;
}

.classroom-redesign .classroom-module-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--classroom-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--classroom-panel);
  box-shadow: var(--classroom-shadow);
}

.classroom-redesign .classroom-module-grid article {
  min-height: 320px;
  padding: 30px 24px 26px;
  border-right: 1px solid var(--classroom-line);
  background:
    linear-gradient(180deg, rgba(139, 80, 255, .08), rgba(255, 255, 255, 0) 42%),
    var(--classroom-panel);
}

.classroom-redesign .classroom-module-grid article:nth-child(even) {
  background:
    linear-gradient(180deg, rgba(67, 191, 210, .09), rgba(255, 255, 255, 0) 42%),
    #fbfcff;
}

.classroom-redesign .classroom-module-grid article:last-child {
  border-right: 0;
}

.classroom-redesign .classroom-module-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(45, 34, 88, .08);
}

.classroom-redesign .classroom-module-grid span {
  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(139, 80, 255, .10);
  color: var(--classroom-accent-dark);
  font-size: 14px;
}

.classroom-redesign .classroom-module-grid h3 {
  margin: 30px 0 16px;
  font-size: clamp(25px, 2.05vw, 34px);
}

.classroom-redesign .classroom-module-grid p {
  color: var(--classroom-body);
}

.classroom-redesign .classroom-module-grid b {
  color: #707789;
}

.classroom-redesign .classroom-path {
  padding-top: clamp(58px, 6vw, 86px);
}

.classroom-redesign .classroom-path .classroom-section-head {
  margin-bottom: 22px;
}

.classroom-redesign .classroom-path-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--classroom-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--classroom-panel);
}

.classroom-redesign .classroom-path-line article {
  min-height: 108px;
  border: 0;
  border-right: 1px solid var(--classroom-line);
  background: transparent;
}

.classroom-redesign .classroom-path-line article:last-child {
  border-right: 0;
}

.classroom-redesign .classroom-syllabus {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "tabs panels";
  gap: 24px;
  align-items: start;
}

.classroom-redesign .classroom-syllabus .classroom-section-head {
  grid-area: head;
  margin-bottom: 8px;
}

.classroom-redesign .classroom-syllabus-tabs {
  grid-area: tabs;
  position: sticky;
  top: 84px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  background: transparent;
}

.classroom-redesign .classroom-syllabus-tabs button {
  min-height: 68px;
  justify-content: flex-start;
  padding: 0 20px;
  border: 1px solid var(--classroom-line);
  border-radius: 8px;
  background: var(--classroom-panel);
  color: #303747;
  box-shadow: none;
}

.classroom-redesign .classroom-syllabus-tabs button:hover,
.classroom-redesign .classroom-syllabus-tabs button.active {
  background: #15121f;
  color: #fff;
  box-shadow: none;
}

.classroom-redesign .classroom-syllabus-list {
  grid-area: panels;
}

.classroom-redesign .classroom-module-detail {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 34px;
  padding: clamp(30px, 3.5vw, 46px);
  border: 1px solid var(--classroom-line);
  border-radius: 8px;
  background: var(--classroom-panel);
  box-shadow: var(--classroom-shadow);
}

.classroom-redesign .module-detail-head {
  padding: 0 22px 0 0;
  border-right: 1px solid var(--classroom-line);
}

.classroom-redesign .module-detail-head span {
  color: var(--classroom-accent-dark);
}

.classroom-redesign .module-detail-head h3 {
  font-size: clamp(34px, 3vw, 48px);
}

.classroom-redesign .module-detail-head p {
  color: var(--classroom-body);
}

.classroom-redesign .stage-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.classroom-redesign .stage-list section {
  min-height: 246px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(27, 25, 42, .10);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(139, 80, 255, .06), rgba(255, 255, 255, 0) 46%),
    #fbfcff;
}

.classroom-redesign .stage-list b {
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(139, 80, 255, .10);
  color: var(--classroom-accent-dark);
}

.classroom-redesign .stage-list h4 {
  font-size: 20px;
}

.classroom-redesign .stage-list p {
  color: #454c5d;
}

.classroom-redesign .stage-list small {
  margin-top: auto;
  padding-top: 18px;
  color: #246676;
}

.classroom-redesign .classroom-deliverables {
  border-radius: 8px;
  box-shadow: var(--classroom-shadow);
}

.classroom-redesign .classroom-deliverable-grid article,
.classroom-redesign .classroom-contact {
  border-radius: 8px;
}

@media (max-width: 1180px) {
  .classroom-redesign .classroom-module-grid,
  .classroom-redesign .classroom-path-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-redesign .classroom-module-grid article,
  .classroom-redesign .classroom-path-line article {
    border-right: 1px solid var(--classroom-line);
    border-bottom: 1px solid var(--classroom-line);
  }

  .classroom-redesign .classroom-syllabus {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "tabs"
      "panels";
  }

  .classroom-redesign .classroom-syllabus-tabs {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .classroom-redesign .classroom-module-detail {
    grid-template-columns: 1fr;
  }

  .classroom-redesign .module-detail-head {
    padding-right: 0;
    padding-bottom: 24px;
    border-right: 0;
    border-bottom: 1px solid var(--classroom-line);
  }
}

@media (max-width: 900px) {
  .classroom-redesign main {
    padding-top: 64px;
  }

  .classroom-redesign .classroom-overview,
  .classroom-redesign .classroom-section,
  .classroom-redesign .classroom-deliverables,
  .classroom-redesign .classroom-contact {
    width: calc(100% - 36px);
  }

  .classroom-redesign .classroom-hero {
    min-height: calc(100dvh - 64px);
  }

  .classroom-redesign .classroom-hero h1 {
    font-size: clamp(44px, 12vw, 66px);
  }

  .classroom-redesign .classroom-overview {
    grid-template-columns: 1fr;
  }

  .classroom-redesign .classroom-module-grid,
  .classroom-redesign .classroom-path-line,
  .classroom-redesign .stage-list,
  .classroom-redesign .classroom-deliverable-grid {
    grid-template-columns: 1fr;
  }

  .classroom-redesign .classroom-syllabus-tabs {
    grid-template-columns: 1fr;
  }

  .classroom-redesign .classroom-module-grid article {
    min-height: 0;
  }
}

/* Classroom studio edition */
.classroom-studio {
  --studio-bg: #f4f5fa;
  --studio-panel: #fff;
  --studio-ink: #101018;
  --studio-text: #333949;
  --studio-muted: #697283;
  --studio-line: rgba(23, 22, 36, .12);
  --studio-purple: #8b50ff;
  --studio-purple-2: #6735cf;
  --studio-cyan: #43bfd2;
  --studio-dark: #14111f;
  --studio-shadow: 0 18px 42px rgba(45, 34, 88, .08);
  background: var(--studio-bg);
}

.classroom-studio main {
  padding-top: 60px;
  color: var(--studio-ink);
  background:
    linear-gradient(90deg, rgba(139, 80, 255, .05) 1px, transparent 1px),
    linear-gradient(rgba(139, 80, 255, .04) 1px, transparent 1px),
    var(--studio-bg);
  background-size: 96px 96px;
}

.classroom-studio .classroom-hero {
  min-height: calc(100dvh - 60px);
  padding: clamp(88px, 12vw, 156px) 24px clamp(78px, 9vw, 126px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(139, 80, 255, .18), transparent 0 30%),
    radial-gradient(circle at 64% 62%, rgba(67, 191, 210, .10), transparent 0 24%),
    linear-gradient(180deg, #fbfbfe 0%, #f4f5fa 78%, rgba(244, 245, 250, 0) 100%);
}

.classroom-studio .classroom-hero::before {
  opacity: .72;
  background-size: 60px 60px;
}

.classroom-studio .classroom-hero-center {
  width: min(1060px, 100%);
  display: grid;
  justify-items: center;
  text-align: center;
}

.classroom-studio .classroom-kicker,
.classroom-studio .classroom-overview-copy > span,
.classroom-studio .classroom-section-head > span,
.classroom-studio .classroom-deliverables > div > span,
.classroom-studio .classroom-contact span {
  margin: 0 0 18px;
  display: block;
  color: var(--studio-purple-2);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 900;
}

.classroom-studio .classroom-kicker {
  color: #626b7b;
}

.classroom-studio .classroom-hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(52px, 6.8vw, 96px);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 950;
  text-wrap: balance;
}

.classroom-studio .classroom-hero p:not(.classroom-kicker) {
  max-width: 760px;
  margin: 26px 0 0;
  color: #535b6a;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.8;
}

.classroom-studio .classroom-hero-actions {
  margin-top: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.classroom-studio .classroom-text-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--studio-purple-2);
  font-size: 17px;
  font-weight: 850;
}

.classroom-studio .classroom-text-link span {
  color: var(--studio-cyan);
}

.classroom-studio .classroom-overview,
.classroom-studio .classroom-section,
.classroom-studio .classroom-deliverables,
.classroom-studio .classroom-contact {
  width: min(1320px, calc(100% - 80px));
  margin: 0 auto;
}

.classroom-studio .classroom-overview {
  padding-top: clamp(72px, 7vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(360px, 460px);
  gap: clamp(52px, 8vw, 118px);
  align-items: stretch;
}

.classroom-studio .classroom-overview h2,
.classroom-studio .classroom-section-head h2,
.classroom-studio .classroom-deliverables h2,
.classroom-studio .classroom-contact h2 {
  margin: 0;
  color: var(--studio-ink);
  font-size: clamp(36px, 3.55vw, 58px);
  line-height: 1.14;
  letter-spacing: 0;
  font-weight: 930;
  text-wrap: balance;
}

.classroom-studio .classroom-overview p,
.classroom-studio .classroom-section-head p,
.classroom-studio .classroom-contact p {
  max-width: 740px;
  margin: 24px 0 0;
  color: var(--studio-text);
  font-size: 18px;
  line-height: 1.9;
}

.classroom-studio .classroom-overview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--studio-panel);
  box-shadow: var(--studio-shadow);
}

.classroom-studio .classroom-overview-stats article {
  min-height: 138px;
  padding: 28px;
  display: grid;
  align-content: center;
  border-right: 1px solid var(--studio-line);
  border-bottom: 1px solid var(--studio-line);
}

.classroom-studio .classroom-overview-stats article:nth-child(2n) {
  border-right: 0;
}

.classroom-studio .classroom-overview-stats article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.classroom-studio .classroom-overview-stats strong {
  color: var(--studio-purple);
  font-size: 54px;
  line-height: .95;
  font-weight: 930;
}

.classroom-studio .classroom-overview-stats span {
  margin-top: 12px;
  color: var(--studio-muted);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 750;
}

.classroom-studio .classroom-section {
  padding-top: clamp(86px, 8vw, 126px);
}

.classroom-studio .classroom-section-head {
  max-width: 1040px;
  margin-bottom: 36px;
  display: block;
}

.classroom-studio .classroom-section-head h2 span {
  display: inline;
}

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

.classroom-studio .classroom-audience-grid article,
.classroom-studio .classroom-module-grid,
.classroom-studio .classroom-path-line,
.classroom-studio .classroom-module-detail,
.classroom-studio .classroom-contact {
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  background: var(--studio-panel);
  box-shadow: var(--studio-shadow);
}

.classroom-studio .classroom-audience-grid article {
  min-height: 220px;
  padding: 34px 32px;
  display: grid;
  align-content: start;
}

.classroom-studio .classroom-audience-grid b {
  color: var(--studio-ink);
  font-size: 26px;
  line-height: 1.25;
}

.classroom-studio .classroom-audience-grid p {
  margin: 22px 0 0;
  color: var(--studio-text);
  font-size: 16px;
  line-height: 1.8;
}

.classroom-studio .classroom-path {
  padding-top: clamp(68px, 6.4vw, 96px);
}

.classroom-studio .classroom-path .classroom-section-head {
  margin-bottom: 24px;
}

.classroom-studio .classroom-path-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}

.classroom-studio .classroom-path-line article {
  min-height: 118px;
  padding: 26px 22px;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 0;
  border-right: 1px solid var(--studio-line);
  background: transparent;
}

.classroom-studio .classroom-path-line article:last-child {
  border-right: 0;
}

.classroom-studio .classroom-path-line b {
  color: var(--studio-purple);
  font-size: 20px;
  line-height: 1;
}

.classroom-studio .classroom-path-line span {
  color: var(--studio-ink);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 850;
}

.classroom-studio .classroom-module-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}

.classroom-studio .classroom-module-grid article {
  min-height: 326px;
  padding: 30px 24px 26px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--studio-line);
  background:
    linear-gradient(180deg, rgba(139, 80, 255, .08), rgba(255, 255, 255, 0) 45%),
    var(--studio-panel);
  transition: transform .28s ease, box-shadow .28s ease;
}

.classroom-studio .classroom-module-grid article:nth-child(even) {
  background:
    linear-gradient(180deg, rgba(67, 191, 210, .10), rgba(255, 255, 255, 0) 45%),
    #fbfcff;
}

.classroom-studio .classroom-module-grid article:last-child {
  border-right: 0;
}

.classroom-studio .classroom-module-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(45, 34, 88, .08);
}

.classroom-studio .classroom-module-grid span {
  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(139, 80, 255, .10);
  color: var(--studio-purple-2);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
}

.classroom-studio .classroom-module-grid h3 {
  margin: 30px 0 16px;
  color: var(--studio-ink);
  font-size: clamp(25px, 2.05vw, 34px);
  line-height: 1.16;
  font-weight: 930;
}

.classroom-studio .classroom-module-grid p {
  margin: 0;
  color: var(--studio-text);
  font-size: 16px;
  line-height: 1.75;
}

.classroom-studio .classroom-module-grid b {
  margin-top: auto;
  color: #707789;
  font-size: 15px;
  line-height: 1.2;
}

.classroom-studio .classroom-syllabus {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "tabs panels";
  gap: 24px;
  align-items: start;
}

.classroom-studio .classroom-syllabus .classroom-section-head {
  grid-area: head;
  margin-bottom: 8px;
}

.classroom-studio .classroom-syllabus-tabs {
  grid-area: tabs;
  position: sticky;
  top: 84px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  background: transparent;
}

.classroom-studio .classroom-syllabus-tabs button {
  min-height: 68px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  background: var(--studio-panel);
  color: #303747;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.classroom-studio .classroom-syllabus-tabs button:hover,
.classroom-studio .classroom-syllabus-tabs button.active {
  background: var(--studio-dark);
  color: #fff;
  transform: translateY(-1px);
}

.classroom-studio .classroom-syllabus-list {
  grid-area: panels;
}

.classroom-studio .classroom-module-detail {
  display: none;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 34px;
  padding: clamp(30px, 3.5vw, 46px);
}

.classroom-studio .classroom-module-detail.active {
  display: grid;
}

.classroom-studio .module-detail-head {
  align-self: start;
  padding: 0 22px 0 0;
  border-right: 1px solid var(--studio-line);
}

.classroom-studio .module-detail-head span {
  color: var(--studio-purple-2);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}

.classroom-studio .module-detail-head h3 {
  margin: 18px 0 18px;
  color: var(--studio-ink);
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.14;
  font-weight: 950;
}

.classroom-studio .module-detail-head p {
  margin: 0;
  color: var(--studio-text);
  font-size: 16px;
  line-height: 1.85;
}

.classroom-studio .stage-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.classroom-studio .stage-list section {
  min-height: 246px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(27, 25, 42, .10);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(139, 80, 255, .07), rgba(255, 255, 255, 0) 46%),
    #fbfcff;
}

.classroom-studio .stage-list b {
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(139, 80, 255, .12);
  color: var(--studio-purple-2);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 950;
}

.classroom-studio .stage-list h4 {
  margin: 0;
  color: var(--studio-ink);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 900;
}

.classroom-studio .stage-list p {
  margin: 12px 0 0;
  color: #454c5d;
  font-size: 15px;
  line-height: 1.72;
}

.classroom-studio .stage-list small {
  margin-top: auto;
  padding-top: 18px;
  color: #246676;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 800;
}

.classroom-studio .classroom-deliverables {
  margin-top: clamp(88px, 9vw, 132px);
  padding: clamp(42px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 76px);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(67, 191, 210, .18), transparent 0 42%),
    var(--studio-dark);
  color: #fff;
  box-shadow: var(--studio-shadow);
}

.classroom-studio .classroom-deliverables h2 {
  color: #fff;
}

.classroom-studio .classroom-deliverables > div > span {
  color: #b796ff;
}

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

.classroom-studio .classroom-deliverable-grid article {
  min-height: 164px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
}

.classroom-studio .classroom-deliverable-grid b {
  color: #fff;
  font-size: 20px;
  line-height: 1.25;
}

.classroom-studio .classroom-deliverable-grid p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 15px;
  line-height: 1.72;
}

.classroom-studio .classroom-contact {
  margin-top: clamp(82px, 9vw, 126px);
  margin-bottom: clamp(82px, 9vw, 126px);
  padding: clamp(38px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
}

.classroom-studio .classroom-contact .pill {
  margin-top: 30px;
}

.classroom-studio .classroom-contact-qr {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.classroom-studio .classroom-contact img {
  width: 170px;
  height: 170px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(64, 48, 118, .12);
}

.classroom-studio .classroom-contact-qr p {
  margin: 0;
  color: var(--studio-muted);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 750;
}

@media (max-width: 1180px) {
  .classroom-studio .classroom-overview,
  .classroom-studio .classroom-deliverables,
  .classroom-studio .classroom-contact {
    grid-template-columns: 1fr;
  }

  .classroom-studio .classroom-module-grid,
  .classroom-studio .classroom-path-line,
  .classroom-studio .classroom-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-studio .classroom-module-grid article,
  .classroom-studio .classroom-path-line article {
    border-right: 1px solid var(--studio-line);
    border-bottom: 1px solid var(--studio-line);
  }

  .classroom-studio .classroom-syllabus {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "tabs"
      "panels";
  }

  .classroom-studio .classroom-syllabus-tabs {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .classroom-studio .classroom-module-detail {
    grid-template-columns: 1fr;
  }

  .classroom-studio .module-detail-head {
    padding-right: 0;
    padding-bottom: 24px;
    border-right: 0;
    border-bottom: 1px solid var(--studio-line);
  }

  .classroom-studio .classroom-contact-qr {
    justify-items: start;
  }
}

@media (max-width: 900px) {
  .classroom-studio main {
    padding-top: 64px;
  }

  .classroom-studio .classroom-overview,
  .classroom-studio .classroom-section,
  .classroom-studio .classroom-deliverables,
  .classroom-studio .classroom-contact {
    width: calc(100% - 36px);
  }

  .classroom-studio .classroom-hero {
    min-height: calc(100dvh - 64px);
    padding: 76px 18px 68px;
  }

  .classroom-studio .classroom-hero h1 {
    font-size: clamp(42px, 12vw, 64px);
  }

  .classroom-studio .classroom-hero p:not(.classroom-kicker),
  .classroom-studio .classroom-overview p,
  .classroom-studio .classroom-section-head p,
  .classroom-studio .classroom-contact p {
    font-size: 16px;
  }

  .classroom-studio .classroom-overview {
    grid-template-columns: 1fr;
  }

  .classroom-studio .classroom-overview h2,
  .classroom-studio .classroom-section-head h2,
  .classroom-studio .classroom-deliverables h2,
  .classroom-studio .classroom-contact h2 {
    font-size: 32px;
    line-height: 1.22;
  }

  .classroom-studio .classroom-module-grid,
  .classroom-studio .classroom-path-line,
  .classroom-studio .classroom-audience-grid,
  .classroom-studio .stage-list,
  .classroom-studio .classroom-deliverable-grid {
    grid-template-columns: 1fr;
  }

  .classroom-studio .classroom-syllabus-tabs {
    grid-template-columns: 1fr;
  }

  .classroom-studio .classroom-module-grid article,
  .classroom-studio .classroom-audience-grid article {
    min-height: 0;
  }

  .classroom-studio .classroom-deliverables,
  .classroom-studio .classroom-contact {
    padding: 30px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .classroom-studio .classroom-module-grid article,
  .classroom-studio .classroom-syllabus-tabs button {
    transition: none;
  }
}

/* Classroom studio v2: typography and editorial rhythm */
.classroom-studio {
  --studio-bg: #f5f6fa;
  --studio-panel: #fff;
  --studio-ink: #11121a;
  --studio-text: #2f3747;
  --studio-muted: #6b7280;
  --studio-line: rgba(28, 28, 42, .12);
  --studio-purple: #8051ee;
  --studio-purple-2: #6235c8;
  --studio-cyan: #2aaec2;
  --studio-dark: #171421;
  --studio-shadow: 0 14px 28px rgba(42, 34, 76, .07);
  font-family: "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-variation-settings: "wght" 430;
}

.classroom-studio main {
  background:
    linear-gradient(90deg, rgba(128, 81, 238, .04) 1px, transparent 1px),
    linear-gradient(rgba(128, 81, 238, .035) 1px, transparent 1px),
    radial-gradient(circle at 82% 8%, rgba(42, 174, 194, .08), transparent 0 30%),
    var(--studio-bg);
  background-size: 112px 112px, 112px 112px, auto, auto;
}

.classroom-studio .classroom-hero {
  min-height: calc(100dvh - 60px);
  padding-top: clamp(76px, 9vw, 128px);
  background:
    radial-gradient(circle at 50% 44%, rgba(128, 81, 238, .13), transparent 0 28%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f6fa 80%, rgba(245, 246, 250, 0) 100%);
}

.classroom-studio .classroom-hero-center {
  width: min(1080px, 100%);
}

.classroom-studio .classroom-kicker,
.classroom-studio .classroom-overview-copy > span,
.classroom-studio .classroom-section-head > span,
.classroom-studio .classroom-deliverables > div > span,
.classroom-studio .classroom-contact span {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 760;
}

.classroom-studio .classroom-hero h1 {
  max-width: 1050px;
  font-size: clamp(46px, 5.3vw, 78px);
  line-height: 1.12;
  font-weight: 760;
  letter-spacing: 0;
}

.classroom-studio .classroom-hero p:not(.classroom-kicker) {
  max-width: 780px;
  margin-top: 24px;
  color: #475061;
  font-size: clamp(18px, 1.25vw, 21px);
  line-height: 1.85;
  text-wrap: pretty;
}

.classroom-studio .classroom-hero-actions {
  margin-top: 36px;
}

.classroom-studio .pill {
  min-width: 136px;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 740;
  background: linear-gradient(135deg, #7145df 0%, #9862f2 100%);
  box-shadow: 0 10px 22px rgba(128, 81, 238, .20);
}

.classroom-studio .classroom-text-link {
  color: var(--studio-purple-2);
  font-size: 16px;
  font-weight: 760;
}

.classroom-studio .classroom-overview {
  padding-top: clamp(68px, 6vw, 96px);
  grid-template-columns: minmax(0, 760px) minmax(330px, 430px);
  gap: clamp(48px, 7vw, 104px);
}

.classroom-studio .classroom-overview h2,
.classroom-studio .classroom-section-head h2,
.classroom-studio .classroom-deliverables h2,
.classroom-studio .classroom-contact h2 {
  max-width: 900px;
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.22;
  font-weight: 720;
  letter-spacing: 0;
}

.classroom-studio .classroom-overview p,
.classroom-studio .classroom-section-head p,
.classroom-studio .classroom-contact p {
  max-width: 720px;
  margin-top: 20px;
  color: var(--studio-text);
  font-size: 17px;
  line-height: 1.9;
}

.classroom-studio .classroom-overview-stats {
  box-shadow: var(--studio-shadow);
}

.classroom-studio .classroom-overview-stats article {
  min-height: 126px;
  padding: 24px 26px;
}

.classroom-studio .classroom-overview-stats strong {
  font-size: 46px;
  font-weight: 780;
}

.classroom-studio .classroom-section {
  padding-top: clamp(76px, 7vw, 108px);
}

.classroom-studio .classroom-section-head {
  margin-bottom: 30px;
}

.classroom-studio .classroom-audience-grid {
  grid-template-columns: 1.05fr .95fr 1.1fr;
}

.classroom-studio .classroom-audience-grid article {
  min-height: 190px;
  padding: 30px;
}

.classroom-studio .classroom-audience-grid b {
  font-size: 23px;
  font-weight: 700;
}

.classroom-studio .classroom-audience-grid p,
.classroom-studio .classroom-module-grid p,
.classroom-studio .stage-list p,
.classroom-studio .classroom-deliverable-grid p {
  color: var(--studio-text);
}

.classroom-studio .classroom-path {
  padding-top: clamp(58px, 5.5vw, 84px);
}

.classroom-studio .classroom-path-line {
  box-shadow: none;
}

.classroom-studio .classroom-path-line article {
  min-height: 96px;
  padding: 22px 20px;
}

.classroom-studio .classroom-path-line b {
  font-size: 18px;
  font-weight: 760;
}

.classroom-studio .classroom-path-line span {
  font-size: 17px;
  font-weight: 760;
}

.classroom-studio .classroom-module-grid {
  box-shadow: var(--studio-shadow);
}

.classroom-studio .classroom-module-grid article {
  min-height: 278px;
  padding: 28px 24px 24px;
}

.classroom-studio .classroom-module-grid span,
.classroom-studio .stage-list b {
  font-size: 13px;
  font-weight: 760;
}

.classroom-studio .classroom-module-grid h3 {
  margin-top: 28px;
  font-size: clamp(23px, 1.8vw, 29px);
  line-height: 1.22;
  font-weight: 720;
}

.classroom-studio .classroom-module-grid b {
  font-weight: 720;
}

.classroom-studio .classroom-syllabus {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
}

.classroom-studio .classroom-syllabus-tabs button {
  min-height: 62px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 760;
}

.classroom-studio .classroom-module-detail {
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  gap: 30px;
  padding: clamp(28px, 3vw, 40px);
}

.classroom-studio .module-detail-head h3 {
  font-size: clamp(30px, 2.5vw, 40px);
  font-weight: 720;
}

.classroom-studio .module-detail-head p {
  color: var(--studio-text);
  line-height: 1.9;
}

.classroom-studio .stage-list {
  gap: 12px;
}

.classroom-studio .stage-list section {
  min-height: 222px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(128, 81, 238, .055), rgba(255, 255, 255, 0) 48%),
    #fbfcff;
}

.classroom-studio .stage-list h4 {
  font-size: 19px;
  line-height: 1.38;
  font-weight: 700;
}

.classroom-studio .stage-list small {
  color: #1e6472;
  font-weight: 760;
}

.classroom-studio .classroom-deliverables {
  margin-top: clamp(76px, 8vw, 112px);
  padding: clamp(38px, 4.5vw, 62px);
  background:
    radial-gradient(circle at 100% 0%, rgba(42, 174, 194, .18), transparent 0 42%),
    linear-gradient(135deg, #151322 0%, #1d1830 100%);
}

.classroom-studio .classroom-deliverable-grid article {
  min-height: 150px;
  padding: 22px;
}

.classroom-studio .classroom-deliverable-grid b {
  font-size: 19px;
  font-weight: 780;
}

.classroom-studio .classroom-deliverable-grid p {
  color: rgba(255, 255, 255, .76);
}

.classroom-studio .classroom-contact {
  margin-top: clamp(72px, 8vw, 108px);
  margin-bottom: clamp(72px, 8vw, 108px);
  padding: clamp(34px, 4.5vw, 58px);
}

@media (max-width: 1180px) {
  .classroom-studio .classroom-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-studio .classroom-syllabus {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .classroom-studio .classroom-hero h1 {
    font-size: clamp(38px, 10.5vw, 56px);
    line-height: 1.14;
  }

  .classroom-studio .classroom-overview h2,
  .classroom-studio .classroom-section-head h2,
  .classroom-studio .classroom-deliverables h2,
  .classroom-studio .classroom-contact h2 {
    font-size: 30px;
    line-height: 1.28;
  }

  .classroom-studio .classroom-audience-grid,
  .classroom-studio .classroom-module-grid,
  .classroom-studio .classroom-path-line,
  .classroom-studio .stage-list,
  .classroom-studio .classroom-deliverable-grid {
    grid-template-columns: 1fr;
  }
}

/* Classroom material-local page based on provided reference */
.classroom-material {
  --course-bg: #f8f9fa;
  --course-surface: #fff;
  --course-surface-low: #f3f4f5;
  --course-surface-high: #e7e8e9;
  --course-ink: #191c1d;
  --course-text: #41484a;
  --course-muted: #586062;
  --course-primary: #7734cb;
  --course-primary-soft: #eddcff;
  --course-primary-button: #a263f8;
  --course-tertiary: #00846a;
  --course-line: #d9dadb;
  background: var(--course-bg);
  color: var(--course-ink);
  font-family: "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

.classroom-material .course-page {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0 0;
}

.classroom-material .grid-bg {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, .05) 1px, transparent 1px);
  background-size: 20px 20px;
}

@keyframes classroomAuroraFlow {
  from {
    background-position: 50% 50%, 50% 50%;
  }

  to {
    background-position: 350% 50%, 350% 50%;
  }
}

@keyframes classroomAuroraDrift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1.04) rotate(0deg);
  }

  50% {
    transform: translate3d(2%, 1%, 0) scale(1.08) rotate(.001deg);
  }

  to {
    transform: translate3d(-2%, -1%, 0) scale(1.04) rotate(0deg);
  }
}

.classroom-material .course-hero {
  position: relative;
  min-height: clamp(520px, 75dvh, 720px);
  width: 100vw;
  margin: 0 0 64px;
  margin-left: calc(50% - 50vw);
  padding: clamp(56px, 6vw, 86px) 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: #f8f9fb;
  text-align: center;
}

.classroom-material .course-hero::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -2;
  pointer-events: none;
  opacity: .86;
  filter: blur(12px) saturate(1.08);
  background-image:
    repeating-linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 7%,
      rgba(255, 255, 255, 0) 10%,
      rgba(255, 255, 255, 0) 12%,
      #ffffff 16%
    ),
    repeating-linear-gradient(
      100deg,
      #dbeafe 10%,
      #c7d2fe 15%,
      #bfdbfe 20%,
      #ddd6fe 25%,
      #dbeafe 30%
    );
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
  will-change: transform;
}

.classroom-material .course-hero::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  pointer-events: none;
  opacity: .62;
  filter: blur(12px) saturate(1.08);
  background-image:
    repeating-linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 7%,
      rgba(255, 255, 255, 0) 10%,
      rgba(255, 255, 255, 0) 12%,
      #ffffff 16%
    ),
    repeating-linear-gradient(
      100deg,
      #dbeafe 10%,
      #c7d2fe 15%,
      #bfdbfe 20%,
      #ddd6fe 25%,
      #dbeafe 30%
    );
  background-size: 200%, 100%;
  background-position: 50% 50%, 50% 50%;
  background-attachment: fixed;
  mix-blend-mode: normal;
  animation: classroomAuroraFlow 60s linear infinite;
  mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
}

.classroom-material .course-hero-inner {
  position: relative;
  z-index: 1;
  width: min(820px, 100%);
}

.classroom-material .course-hero-inner::before {
  content: "";
  position: absolute;
  inset: -80px -120px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .36) 44%, transparent 72%);
}

.classroom-material .course-eyebrow,
.classroom-material .course-section-head > span,
.classroom-material .course-module-head span,
.classroom-material .course-contact span {
  display: block;
  color: var(--course-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
}

.classroom-material .course-hero h1 {
  margin: 16px 0 0;
  color: var(--course-ink);
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.16;
  font-weight: 780;
  letter-spacing: 0;
  text-wrap: balance;
}

.classroom-material .course-hero p:not(.course-eyebrow) {
  max-width: 760px;
  margin: 24px auto 0;
  color: var(--course-muted);
  font-size: 18px;
  line-height: 1.75;
}

.classroom-material .course-actions {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.classroom-material .course-primary,
.classroom-material .course-secondary {
  min-height: 48px;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  transition: opacity .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.classroom-material .course-primary {
  background: var(--course-primary-button);
  color: #fff;
}

.classroom-material .course-secondary {
  border: 1px solid var(--course-primary-button);
  color: var(--course-primary-button);
  background: transparent;
}

.classroom-material .course-primary:hover,
.classroom-material .course-secondary:hover {
  transform: translateY(-1px);
}

.classroom-material .course-stat-grid {
  width: min(1280px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.classroom-material .course-stat-grid article {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 28px 20px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border: 1px solid var(--course-surface-high);
  border-radius: 4px;
  background-color: var(--course-surface);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 46px rgba(113, 85, 178, .07);
}

.classroom-material .course-stat-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .72)),
    radial-gradient(circle at 50% 20%, rgba(157, 93, 255, .12), transparent 58%);
  pointer-events: none;
}

.classroom-material .course-stat-grid article:nth-child(1) {
  background-image: url("assets/class/hxmk.webp");
}

.classroom-material .course-stat-grid article:nth-child(2) {
  background-image: url("assets/class/zks.webp");
}

.classroom-material .course-stat-grid article:nth-child(3) {
  background-image: url("assets/class/szxm.webp");
}

.classroom-material .course-stat-grid article:nth-child(4) {
  background-image: url("assets/class/Capstone.webp");
}

.classroom-material .course-stat-grid strong {
  position: relative;
  z-index: 1;
  color: var(--course-primary-button);
  font-size: 40px;
  line-height: 1;
  font-weight: 760;
}

.classroom-material .course-stat-grid span {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  color: var(--course-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
}

.classroom-material .course-section {
  width: min(1280px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 64px;
}

.classroom-material .course-section-head {
  margin-bottom: 32px;
}

.classroom-material .course-section-head.center {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.classroom-material .course-section-head h2 {
  margin: 12px 0 0;
  color: var(--course-ink);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.26;
  font-weight: 760;
  letter-spacing: 0;
  text-wrap: balance;
}

.classroom-material .course-section-head p {
  margin: 14px 0 0;
  color: var(--course-muted);
  font-size: 16px;
  line-height: 1.75;
}

.classroom-material .course-path-card {
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 14px;
  border: 1px solid var(--course-surface-high);
  border-radius: 8px;
  background: var(--course-surface);
}

.classroom-material .course-path-card article {
  min-height: 86px;
  padding: 18px 16px;
  display: grid;
  align-content: center;
  text-align: center;
  border: 1px solid var(--course-surface-high);
  border-radius: 4px;
  background: var(--course-surface-low);
}

.classroom-material .course-path-card article.active {
  border-color: var(--course-primary-button);
  background: var(--course-primary-button);
  color: #fff;
}

.classroom-material .course-path-card span {
  color: var(--course-primary-button);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.classroom-material .course-path-card article.active span {
  color: rgba(255, 255, 255, .82);
}

.classroom-material .course-path-card b {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.35;
}

.classroom-material .course-path-card i {
  display: none;
}

.classroom-material #curriculum {
  width: min(1380px, calc(100% - 48px));
  margin-bottom: 120px;
  padding-top: 10px;
}

.classroom-material #curriculum .course-section-head {
  position: relative;
  z-index: 12;
  margin-bottom: 44px;
}

.classroom-material .course-module-block {
  --stack-top: 76px;
  --stack-scale: 1;
  --stack-y: 0px;
  --stack-opacity: 1;
  --stack-shadow: .10;
  position: sticky;
  top: var(--stack-top);
  z-index: 1;
  margin-bottom: 96px;
  overflow: hidden;
  border: 1px solid #dfe1e4;
  border-radius: 8px;
  background: var(--course-surface);
  box-shadow: 0 26px 70px rgba(20, 18, 32, var(--stack-shadow));
  transform-origin: top center;
  transform: translate3d(0, var(--stack-y), 0) scale(var(--stack-scale));
  opacity: var(--stack-opacity);
  backface-visibility: hidden;
  will-change: transform, opacity, box-shadow;
  transition:
    transform .16s cubic-bezier(.22, .8, .24, 1),
    box-shadow .18s ease,
    opacity .16s linear;
}

.classroom-material .course-module-block:nth-of-type(2) {
  --stack-top: 76px;
  z-index: 2;
}

.classroom-material .course-module-block:nth-of-type(3) {
  --stack-top: 76px;
  z-index: 3;
}

.classroom-material .course-module-block:nth-of-type(4) {
  --stack-top: 76px;
  z-index: 4;
}

.classroom-material .course-module-block:nth-of-type(5) {
  --stack-top: 76px;
  z-index: 5;
}

.classroom-material .course-module-block:nth-of-type(6) {
  --stack-top: 76px;
  z-index: 6;
  margin-bottom: 0;
}

.classroom-material .course-module-block.purple {
  background: #f4efff;
}

.classroom-material .course-module-block.blue {
  background: #eef3ff;
}

.classroom-material .course-module-block.green {
  background: #eaffff;
}

.classroom-material .course-module-head {
  padding: 28px 32px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid #dfe1e4;
  background: #f3f4f5;
}

.classroom-material .course-module-head::after {
  content: "";
  width: 100%;
  aspect-ratio: 16 / 7.6;
  justify-self: end;
  border: 1px solid rgba(138, 91, 246, .16);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, .72);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 46px rgba(57, 45, 87, .12);
}

.classroom-material .course-module-block:nth-of-type(2) .course-module-head::after {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    url("assets/class/m1.webp");
}

.classroom-material .course-module-block:nth-of-type(3) .course-module-head::after {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    url("assets/class/m2.webp");
}

.classroom-material .course-module-block:nth-of-type(4) .course-module-head::after {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    url("assets/class/m3.webp");
}

.classroom-material .course-module-block:nth-of-type(5) .course-module-head::after {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    url("assets/class/m4.webp");
}

.classroom-material .course-module-block:nth-of-type(6) .course-module-head::after {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    url("assets/class/m5.webp");
}

.classroom-material .course-module-head h3 {
  display: none;
}

.classroom-material .course-module-head p {
  margin: 12px 0 0;
  color: var(--course-ink);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 800;
}

.classroom-material .course-module-head small {
  display: none;
}

.classroom-material .course-module-head .course-module-position {
  margin-top: 10px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
}

.classroom-material .course-module-intro {
  display: none;
}

.classroom-material .course-stage-grid {
  padding: 28px 26px 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.classroom-material .course-stage-grid article {
  position: relative;
  overflow: hidden;
  min-height: 218px;
  padding: 18px 18px 16px;
  display: block;
  border: 1px solid rgba(162, 99, 248, .24);
  border-radius: 6px;
  background: rgba(255, 255, 255, .44);
}

.classroom-material .course-stage-grid article > :not(.course-stage-icon) {
  position: relative;
  z-index: 1;
}

.classroom-material .course-stage-icon {
  position: absolute;
  right: 8px;
  bottom: 2px;
  z-index: 0;
  width: 130px;
  height: 130px;
  color: rgba(135, 82, 246, .18);
  stroke-width: 1.15;
  pointer-events: none;
  transform: rotate(-6deg);
  filter: drop-shadow(0 18px 22px rgba(135, 82, 246, .08));
}

.classroom-material .course-module-block.blue .course-stage-icon {
  color: rgba(82, 120, 246, .17);
}

.classroom-material .course-module-block.green .course-stage-icon {
  color: rgba(31, 164, 164, .16);
}

.classroom-material .course-stage-grid b {
  display: inline-flex;
  width: fit-content;
  margin-right: 8px;
  padding: 6px 9px;
  vertical-align: top;
  border-radius: 4px;
  background: var(--course-primary-button);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.classroom-material .course-stage-grid h4 {
  display: inline;
  margin: 0;
  color: var(--course-ink);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 800;
}

.classroom-material .course-stage-grid p {
  display: none;
}

.classroom-material .course-stage-grid ul {
  margin: 16px 0 0;
  padding-left: 20px;
  color: #4b4453;
  font-size: 15px;
  line-height: 1.68;
}

.classroom-material .course-stage-grid li + li {
  margin-top: 4px;
}

.classroom-material .course-stage-grid em {
  margin-top: 18px;
  width: calc(100% - 154px);
  min-height: 46px;
  padding: 10px 12px;
  display: block;
  border-radius: 4px;
  background: rgba(237, 220, 255, .58);
  color: var(--course-primary);
  font-size: 14px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 800;
}

.classroom-material .course-module-note {
  margin: -2px 0 0;
  padding: 0 32px 28px;
  color: #4b4453;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
  font-style: italic;
}

.classroom-material .course-gains-panel {
  padding: 36px;
  border: 1px solid rgba(162, 99, 248, .30);
  border-radius: 8px;
  background: rgba(237, 220, 255, .38);
}

.classroom-material .course-gain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.classroom-material .course-gain-grid article {
  min-height: 190px;
  padding: 24px;
  display: grid;
  justify-items: center;
  text-align: center;
  border: 1px solid var(--course-surface-high);
  border-radius: 6px;
  background: var(--course-surface);
}

.classroom-material .course-gain-grid i {
  width: 46px;
  height: 46px;
  display: block;
  margin-bottom: 18px;
  background: center / contain no-repeat;
}

.classroom-material .course-gain-grid .icon-code i {
  background-image: url("assets/nav-6.svg");
}

.classroom-material .course-gain-grid .icon-molecule i {
  background-image: url("assets/nav-5.svg");
}

.classroom-material .course-gain-grid .icon-model i {
  background-image: url("assets/nav-2.svg");
}

.classroom-material .course-gain-grid h3 {
  margin: 0;
  color: var(--course-ink);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 780;
}

.classroom-material .course-gain-grid p {
  margin: 12px 0 0;
  color: var(--course-muted);
  font-size: 15px;
  line-height: 1.7;
}

.classroom-material .course-contact {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto 72px;
  padding: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 40px;
  align-items: center;
  border: 1px solid var(--course-surface-high);
  border-radius: 8px;
  background: var(--course-surface);
}

.classroom-material .course-contact h2 {
  margin: 12px 0 0;
  color: var(--course-ink);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.22;
}

.classroom-material .course-contact p {
  max-width: 720px;
  margin: 18px 0 28px;
  color: var(--course-muted);
  font-size: 16px;
  line-height: 1.75;
}

.classroom-material .course-contact-qr {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.classroom-material .course-contact-qr img {
  width: 168px;
  height: 168px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid var(--course-surface-high);
  border-radius: 8px;
  background: #fff;
}

.classroom-material .course-contact-qr p {
  margin: 0;
  color: var(--course-muted);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 760;
}

.classroom-material .course-contact-qr .course-contact-manager {
  margin-top: -4px;
  color: rgba(17, 17, 17, .74);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .classroom-material .course-stat-grid,
  .classroom-material .course-stage-grid,
  .classroom-material .course-gain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-material .course-path-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .classroom-material .course-page {
    width: 100%;
    padding-top: 64px;
  }

  .classroom-material .course-hero {
    min-height: clamp(460px, 74dvh, 620px);
    padding: 58px 18px;
  }

  .classroom-material .course-stat-grid,
  .classroom-material .course-section,
  .classroom-material .course-contact {
    width: calc(100% - 32px);
  }

  .classroom-material .course-hero h1 {
    font-size: 32px;
    line-height: 1.25;
  }

  .classroom-material .course-hero p:not(.course-eyebrow) {
    font-size: 16px;
  }

  .classroom-material .course-actions {
    flex-direction: column;
  }

  .classroom-material .course-stat-grid,
  .classroom-material .course-stage-grid,
  .classroom-material .course-gain-grid,
  .classroom-material .course-contact {
    grid-template-columns: 1fr;
  }

  .classroom-material .course-module-block {
    position: relative;
    top: auto;
    margin-top: 0;
    margin-bottom: 28px;
    box-shadow: 0 16px 34px rgba(20, 18, 32, .08);
  }

  .classroom-material .course-module-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px;
  }

  .classroom-material .course-module-head::after {
    aspect-ratio: 16 / 8.8;
    justify-self: stretch;
  }

  .classroom-material .course-module-head small {
    display: inline-flex;
    margin-top: 16px;
  }

  .classroom-material .course-module-intro {
    padding: 22px 24px 0;
  }

  .classroom-material .course-stage-grid {
    padding: 24px;
  }

  .classroom-material .course-stage-icon {
    width: 108px;
    height: 108px;
    right: 4px;
    bottom: 0;
  }

  .classroom-material .course-stage-grid em {
    width: calc(100% - 118px);
  }

  .classroom-material .course-gains-panel,
  .classroom-material .course-contact {
    padding: 24px;
  }

  .classroom-material .course-contact-qr {
    justify-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .classroom-material .course-hero::after {
    animation: none;
  }
}

@media (max-width: 900px) {
  .home2-hero .hero-inner {
    width: 100%;
    height: auto;
    padding: 38px 0 30px;
  }
  .home2-hero .hero-art img {
    width: 610px;
  }
  .home2-hero-eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
  }
  .home2-hero-lead {
    margin: 18px auto 0;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
  }
  .home2-hero-actions {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .home2-hero-actions .pill {
    width: min(280px, calc(100vw - 48px));
    font-size: 17px;
  }
  .home2-page .home2-action-btn {
    height: 52px;
    justify-content: center;
    gap: 10px;
  }
  .home2-page .home2-action-btn svg {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .home2-showcase {
    min-height: auto;
  }
  .home2-showcase-inner,
  .home2-showcase-reverse .home2-showcase-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 54px 20px;
  }
  .home2-showcase-reverse .home2-showcase-visual {
    order: 2;
  }
  .home2-showcase-copy {
    text-align: center;
  }
  .home2-showcase-copy span {
    margin-bottom: 14px;
    font-size: 12px;
  }
  .home2-showcase-copy h2 {
    font-size: 28px;
    line-height: 1.48;
  }
  .home2-showcase-copy p {
    margin: 18px auto 26px;
    font-size: 16px;
    line-height: 1.8;
  }
  .home2-showcase-actions {
    justify-content: center;
  }
  .home2-showcase-actions .pill.hero-cta,
  .home2-showcase-copy > .pill.hero-cta {
    width: min(280px, calc(100vw - 48px));
    min-width: 0;
    font-size: 17px;
    white-space: normal;
  }
  .home2-showcase-visual img {
    border-radius: 8px;
  }
}

@media (min-width: 1180px) {
  .home2-showcase-copy h2.home2-asset-heading {
    width: max-content;
    max-width: calc(100vw - 120px);
    white-space: nowrap;
    font-size: clamp(38px, 2.55vw, 44px);
  }
}

@media (max-width: 1179px) {
  .home2-showcase-copy h2.home2-asset-heading {
    white-space: normal;
  }
}

.paid-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.paid-modal.is-open {
  display: flex;
}

.paid-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 20, .58);
  backdrop-filter: blur(8px);
}

.paid-modal-panel {
  position: relative;
  overflow: hidden;
  width: min(470px, 100%);
  padding: 34px 32px 28px;
  border: 1px solid rgba(155, 92, 255, .16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(209, 139, 255, .20), transparent 34%),
    radial-gradient(circle at 100% 10%, rgba(127, 59, 188, .12), transparent 32%),
    #fff;
  box-shadow: 0 26px 80px rgba(35, 20, 52, .28);
}

.paid-modal-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #7A4BD9, #9B5CFF, #D18BFF);
}

.paid-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #6c5a7e;
  background: #f4eff8;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.paid-modal-mark {
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #7A4BD9;
  background: linear-gradient(135deg, rgba(155, 92, 255, .16), rgba(209, 139, 255, .20));
}

.paid-modal-mark svg {
  width: 26px;
  height: 26px;
}

.paid-modal-eyebrow {
  margin: 0 0 8px;
  color: #7A4BD9;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.paid-modal-panel h2 {
  margin: 0 0 18px;
  color: #1f1630;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
}

.paid-modal-lead {
  margin: 0 0 24px;
  color: rgba(31, 22, 48, .66);
  font-size: 14px;
  line-height: 1.8;
}

.paid-form {
  display: grid;
  gap: 16px;
}

.paid-form label {
  display: grid;
  gap: 8px;
  color: #3f334f;
  font-size: 14px;
  font-weight: 800;
}

.paid-form .field-tag {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  vertical-align: middle;
}
.paid-form .field-tag.req { color: #e5484d; background: rgba(229, 72, 77, .12); }
.paid-form .field-tag.opt { color: rgba(63, 51, 79, .58); background: rgba(63, 51, 79, .08); }

.paid-form input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(127, 59, 188, .18);
  border-radius: 10px;
  outline: none;
  background: #fbf8ff;
  color: #1f1630;
  font: inherit;
}


.paid-form textarea {
  width: 100%;
  min-height: 108px;
  padding: 12px 14px;
  border: 1px solid rgba(127, 59, 188, .18);
  border-radius: 10px;
  outline: none;
  resize: vertical;
  background: #fbf8ff;
  color: #1f1630;
  font: inherit;
  line-height: 1.6;
}

.paid-form textarea:focus {
  border-color: #9b5cff;
  box-shadow: 0 0 0 3px rgba(155, 92, 255, .14);
}

.horizontal-modal-panel {
  max-height: min(92vh, 780px);
  overflow-y: auto;
}
.paid-form input:focus {
  border-color: #9b5cff;
  box-shadow: 0 0 0 3px rgba(155, 92, 255, .14);
}

.paid-form button[type="submit"] {
  height: 50px;
  margin-top: 6px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #7A4BD9 0%, #9B5CFF 48%, #D18BFF 100%);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(155, 92, 255, .24);
}

.paid-form button[type="submit"]:disabled {
  cursor: wait;
  opacity: .72;
}

.paid-form-status {
  min-height: 22px;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.paid-form-status.is-pending { color: #7A4BD9; }
.paid-form-status.is-success { color: #16824b; }
.paid-form-status.is-error { color: #b42318; }

@media (max-width: 720px) {
  .paid-modal-panel {
    padding: 30px 20px 22px;
  }
}

/* ===================== 移动端汉堡导航 ===================== */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 10000;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .28s ease, opacity .2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0, 0, 0, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9995;
  width: min(82vw, 340px);
  height: 100%;
  padding: 84px 22px 36px;
  background: #fff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .14);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.mobile-nav-open { overflow: hidden; }
body.mobile-nav-open .mobile-nav { transform: translateX(0); }
body.mobile-nav-open .mobile-nav-overlay { opacity: 1; pointer-events: auto; }

.mobile-nav-link {
  display: block;
  padding: 13px 6px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.mobile-nav-link.active { color: var(--green); }
.mobile-nav-group { padding: 6px 0 2px; }
.mobile-nav-group-title {
  margin: 0;
  padding: 8px 6px 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(17, 17, 17, .5);
}
.mobile-nav-sublink {
  display: block;
  padding: 11px 6px 11px 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.mobile-nav-sublink.active { color: var(--green); }
.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.mobile-nav-actions .pill { width: 100%; height: 46px; font-size: 16px; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
}
@media (min-width: 901px) {
  .mobile-nav,
  .mobile-nav-overlay,
  .nav-toggle { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav-overlay,
  .nav-toggle span { transition: none; }
}