@font-face {
  font-family:Morning Display;
  src:url('/site-assets/morning-display.ttf') format('truetype');
  font-style:normal;
  font-weight:800;
  font-display:swap
}
:root {
  --ink:#142341;
  --muted:#56647a;
  --blue:#315bea;
  --cyan:#147e98;
  --line:#d7e0f0;
  --surface:#f4f7fe;
  --ease:cubic-bezier(.16,1,.3,1);
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,Arial,sans-serif;
  color:var(--ink);
  background:var(--surface);
  color-scheme:light;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--surface);
  overflow-x:hidden
}
button,input,textarea,select {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button,a {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.48;
  cursor:not-allowed
}
img {
  max-width:100%
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px
}
::selection {
  background:#275aca;
  color:#fff
}
input,textarea {
  caret-color:var(--cyan)
}
* {
  scrollbar-color:#9daed0 #eef2fa;
  scrollbar-width:thin
}
*::-webkit-scrollbar {
  width:7px;
  height:7px
}
*::-webkit-scrollbar-thumb {
  background:var(--surface);
  border-radius:8px
}
*::-webkit-scrollbar-track {
  background:var(--surface)
}
.icon {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
.skip {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:100;
  padding:14px;
  background:var(--surface)
}
.skip:focus {
  top:10px
}
.reading-progress {
  position:fixed;
  left:0;
  top:0;
  z-index:50;
  height:2px;
  width:100%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(var(--reading,0));
  transform-origin:left;
  pointer-events:none
}
.preview-banner {
  position:relative;
  padding:9px 20px;
  background:var(--surface);
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  text-align:center
}
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 max(32px,calc((100vw - 1280px)/2));
  height:90px;
  background:var(--surface);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px)
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:16px;
  white-space:nowrap;
  font-size:26px;
  font-weight:650;
  line-height:1.2
}
.brand img {
  width:35px;
  height:35px;
  object-fit:contain;
  transform:scale(1.5);
  filter:brightness(0)
}
.brand-sub {
  display:block;
  font-size:11px;
  letter-spacing:.07em;
  margin-top:5px;
  color:var(--muted);
  font-weight:400
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:14px;
  color:var(--muted)
}
.site-header nav>a {
  transition:color .2s
}
.site-header nav>a:hover {
  color:var(--muted)
}
.nav-contact {
  display:inline-flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:11px 18px;
  background:var(--surface)
}
.nav-contact .icon {
  width:17px
}
.menu-toggle {
  display:none
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:50px;
  padding:14px 25px;
  border:1px solid transparent;
  border-radius:7px;
  font-size:14px;
  font-weight:600;
  transition:background .2s,color .2s,transform .25s var(--ease)
}
.button:hover {
  transform:translateY(-2px)
}
.button-primary {
  background:linear-gradient(110deg,#315bea,#2863c7);
  color:var(--muted)
}
.button-secondary,.button-outline {
  background:var(--surface);
  border-color:var(--line);
  color:var(--muted)
}
.button-secondary:hover,.button-outline:hover {
  background:var(--surface)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  padding:8px 0
}
.text-link .icon {
  transition:transform .25s var(--ease)
}
.text-link:hover .icon {
  transform:translateX(5px)
}
.hero {
  position:relative;
  isolation:isolate;
  text-align:center;
  padding:47px 28px 50px;
  max-width:1440px;
  margin:auto
}
.hero-beams {
  position:absolute;
  inset:-90px calc(50% - 50vw) 0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none
}
.beam {
  position:absolute;
  top:0;
  width:60vw;
  height:80vh;
  filter:blur(50px);

}
.beam-left {
  left:0;
  transform-origin:left top;
  transform:rotate(20deg);
  background:radial-gradient(ellipse at 0 0,#afc9ff60 0%,#c6d6ff45 40%,transparent 85%)
}
.beam-right {
  right:0;
  transform-origin:right top;
  transform:rotate(-20deg);
  background:radial-gradient(ellipse at 100% 0,#afc9ff60 0%,#c6d6ff45 40%,transparent 85%)
}
.hero-copy {
  position:relative;
  z-index:2
}
.hero-intro {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 20px;
  padding:8px 15px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:30px;
  font-size:12px;
  color:var(--muted)
}
.status-dot,.lens-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cyan)
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-family:Morning Display,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:clamp(52px,6.1vw,86px);
  line-height:1.18;
  letter-spacing:-.035em;
  font-weight:800;
  margin:0 0 24px;
  background:linear-gradient(120deg,#122443 28%,#315bea 72%,#397bbd 100%);
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text
}
h2 {
  font-size:clamp(30px,3vw,44px);
  line-height:1.4;
  letter-spacing:-.025em;
  font-weight:650;
  margin-bottom:0
}
h3 {
  font-weight:600;
  line-height:1.45
}
.hero-description,#heroDescription {
  font-size:17px;
  color:var(--muted);
  line-height:1.9;
  max-width:690px;
  margin:0 auto 28px
}
.hero-actions {
  display:flex;
  gap:14px;
  justify-content:center
}
.hero-intro {
}
.hero h1 {
}
.hero #heroDescription {
}
.hero-actions {
}
.content-stage {
  max-width:1150px;
  margin:60px auto 0;
  perspective:1400px
}
.content-rail {
  display:grid;
  grid-template-columns:1fr 1.18fr 1fr;
  gap:20px;
  align-items:center;
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .5s var(--ease);
  transform-style:preserve-3d
}
.film {
  height:365px;
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:12px;
  text-align:left;
  background:var(--surface);
  isolation:isolate;

}
.film-beauty {
  transform:rotate(-4deg);
  height:330px
}
.film-tech {
  transform:rotate(4deg);
  height:330px;

}
.film-life {
}
.film-image {
  position:absolute;
  inset:0;
  background-image:url('/site-assets/campaign-directions.png');
  background-size:300% auto;
  background-repeat:no-repeat;
  transition:transform .7s var(--ease)
}
.photo-beauty {
  background-position:0% 48%
}
.photo-life {
  background-position:50% 48%
}
.photo-tech {
  background-position:100% 48%
}
.film:hover .film-image {
  transform:scale(1.055)
}
.film:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 15%,#0002 40%,#020714e8 100%);
  z-index:0
}
.film-copy {
  position:absolute;
  left:28px;
  right:24px;
  bottom:23px;
  z-index:1;
  color:#fff
}
.film-copy small {
  display:block;
  font-size:11px;
  line-height:1.6;
  color:#e3e9f2;
  margin-bottom:11px
}
.film-copy strong {
  font-size:28px;
  line-height:1.45;
  font-weight:600;
  letter-spacing:-.02em;
  display:block;
  margin-bottom:18px
}
.film-copy>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px
}
.film-copy .icon {
  width:18px
}
.stage-caption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  text-align:left;
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
  margin-top:28px
}
.stage-caption>span:first-child {
  color:var(--muted)
}
.section {
  max-width:1280px;
  padding:92px 40px;
  margin:0 auto
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:44px
}
.section-head>p {
  max-width:360px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.9
}
.section-head.compact {
  margin-bottom:30px
}
.section-head.compact h2 {
  font-size:28px
}
.section-head.compact h2 span {
  color:var(--muted);
  font-size:18px;
  font-weight:400;
  display:inline-block;
  margin-top:9px
}
.partners {
  padding-top:46px;
  padding-bottom:70px
}
.partners .section-head>p {
  font-size:12px
}
.brand-wall {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.brand-wall li {
  display:flex;
  align-items:center;
  justify-content:center;
  height:90px;
  font-weight:650;
  font-size:21px;
  color:var(--muted);
  letter-spacing:-.02em;
  transition:color .2s,background .2s
}
.brand-wall li:nth-child(-n+8) {
  border-bottom:1px solid var(--line)
}
.brand-wall li:hover {
  background:var(--surface);
  color:var(--muted)
}
.brand-wall li:nth-child(2),.brand-wall li:nth-child(14),.brand-wall li:nth-child(16) {
  font-size:17px
}
.brand-wall li:nth-child(3),.brand-wall li:nth-child(4),.brand-wall li:nth-child(10) {
  font-weight:600;
  letter-spacing:-.035em
}
.services {
  padding-top:70px
}
.service-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
  margin-bottom:64px
}
.service-item {
  padding-top:23px;
  border-top:1px solid var(--line)
}
.service-item h3 {
  font-size:21px;
  margin:16px 0 12px
}
.service-item p {
  font-size:14px;
  color:var(--muted);
  line-height:1.9;
  margin:0
}
.service-icon {
  display:inline-flex;
  color:var(--muted)
}
.service-icon svg {
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round
}
.method-workspace {
  display:grid;
  grid-template-columns:290px 1fr;
  gap:52px;
  background:var(--surface);
  padding:40px;
  border-radius:12px
}
.method-tabs {
  display:flex;
  flex-direction:column
}
.method-tab {
  display:flex;
  align-items:center;
  gap:22px;
  text-align:left;
  min-height:68px;
  padding:0 20px;
  background:transparent;
  color:var(--muted);
  border:0;
  border-bottom:1px solid var(--line);
  font-size:16px;
  transition:background .2s,color .2s
}
.method-tab .icon {
  margin-left:auto;
  width:16px;
  opacity:0
}
.method-tab[aria-selected=true] {
  color:var(--muted);
  background:var(--surface);
  border-bottom-color:transparent;
  border-radius:6px
}
.method-tab[aria-selected=true] .icon {
  opacity:1
}
.step-index {
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--muted)
}
.method-panels {
  position:relative;
  min-height:340px;
  padding:40px 34px 20px 0
}
.method-panel {
}
.method-panel h3 {
  font-size:30px;
  max-width:490px;
  margin:0 0 18px;
  position:relative
}
.method-panel>p {
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
  position:relative;
  max-width:520px
}
.method-count {
  position:absolute;
  right:0;
  top:-15px;
  font-size:135px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.04em;
  color:var(--muted);
  pointer-events:none
}
.delivery {
  border-top:1px solid var(--line);
  padding:20px 0 18px;
  display:flex;
  gap:20px;
  align-items:baseline;
  position:relative;
  font-size:12px
}
.delivery>span {
  color:var(--muted);
  white-space:nowrap
}
.delivery strong {
  font-weight:400;
  color:var(--muted);
  line-height:1.8
}
.solutions {
  background:var(--surface)
}
.solutions .section {
  padding-top:82px;
  padding-bottom:85px
}
.industry-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:30px
}
.industry-tabs button {
  border:1px solid var(--line);
  border-radius:5px;
  background:transparent;
  color:var(--muted);
  padding:12px 22px;
  font-size:14px;
  transition:color .2s,background .2s
}
.industry-tabs button[aria-selected=true] {
  background:var(--surface);
  border-color:var(--line);
  color:var(--muted)
}
.industry-tabs button:hover:not([aria-selected=true]) {
  color:var(--muted);
  background:var(--surface)
}
.industry-panel {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:60px;
  align-items:center;
  min-height:440px
}
.industry-art {
  height:440px;
  position:relative;
  border-radius:12px;
  background-image:url('/site-assets/campaign-directions.png');
  background-size:300% auto;
  background-repeat:no-repeat;

}
.industry-art>span {
  position:absolute;
  left:20px;
  bottom:20px;
  background:#0c172ed9;
  padding:7px 11px;
  font-size:11px;
  color:#eef5ff;
  border-radius:3px
}
.industry-copy h3 {
  font-size:32px;
  line-height:1.5;
  letter-spacing:-.02em;
  margin-bottom:20px
}
.industry-copy>p {
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
  max-width:470px
}
.industry-copy dl {
  margin:24px 0 16px
}
.industry-copy dl>div {
  padding:14px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:95px 1fr;
  gap:20px;
  font-size:13px;
  line-height:1.8
}
.industry-copy dt {
  color:var(--muted)
}
.industry-copy dd {
  margin:0;
  color:var(--muted)
}
.resources {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:90px;
  row-gap:40px;
  align-items:center
}
.resource-intro>p {
  color:var(--muted);
  line-height:1.9;
  font-size:15px;
  margin:24px 0
}
.resource-promises {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin:26px 0;
  color:var(--muted);
  font-size:12px
}
.resource-promises span:before {
  content:"";
  display:inline-block;
  vertical-align:3px;
  width:3px;
  height:3px;
  background:var(--surface);
  border-radius:50%;
  margin-right:8px
}
.resource-lens {
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,#f2f6ff,#fff)
}
.lens-header {
  padding:22px 28px;
  display:flex;
  gap:12px;
  align-items:center;
  border-bottom:1px solid var(--line);
  font-size:14px;
  font-weight:400
}
.resource-lens dl {
  margin:0;
  padding:10px 28px
}
.resource-lens dl>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
  font-size:13px
}
.resource-lens dl>div:last-child {
  border:0
}
.resource-lens dt {
  color:var(--muted)
}
.resource-lens dd {
  margin:0;
  color:var(--muted)
}
.resource-lens>p {
  padding:14px 28px 22px;
  color:var(--muted);
  font-size:11px;
  line-height:1.8;
  margin:0
}
.resource-lens.lens-seen dl>div {
}
.resource-lens.lens-seen dl>div:nth-child(2) {
}
.resource-lens.lens-seen dl>div:nth-child(3) {
}
.resource-lens.lens-seen dl>div:nth-child(4) {
}
#resourceStats,.creator-section {
  grid-column:1/-1
}
.stats-panel {
  padding:28px 0;
  border-top:1px solid var(--line)
}
.stats-numbers {
  display:flex;
  gap:70px
}
.stats-numbers strong {
  display:block;
  font-size:40px;
  letter-spacing:-.03em;
  font-weight:600;
  color:var(--muted)
}
.stats-numbers span {
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-top:8px
}
.stat-types {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px
}
.stat-types span {
  font-size:12px;
  color:var(--muted)
}
.stats-note {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  max-width:850px;
  margin:20px 0 0
}
.creator-list {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px
}
.creator {
  padding:24px;
  background:var(--surface);
  border-radius:12px
}
.creator img {
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:16px
}
.creator h4 {
  margin:4px 0 8px;
  font-size:18px
}
.creator p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted)
}
.relation {
  font-size:11px;
  color:var(--muted)
}
.avatar-initial {
  display:inline-flex;
  width:72px;
  height:72px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  color:var(--muted);
  font-size:32px;
  margin-bottom:12px
}
.case-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:36px
}
.case img,.case-placeholder {
  display:block;
  aspect-ratio:1.5;
  object-fit:cover;
  width:100%;
  border-radius:12px;
  background:var(--surface)
}
.case-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:var(--muted)
}
.case h3 {
  font-size:24px;
  margin:12px 0
}
.case small {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:20px
}
.case p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted)
}
.insights {
  border-top:1px solid var(--line);
  padding-top:78px
}
.insight-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:28px
}
.insight>a {
  display:block
}
.insight-visual {
  height:220px;
  overflow:hidden;
  border-radius:10px;
  transition:filter .3s,transform .5s var(--ease)
}
.insight a:hover .insight-visual {
  filter:brightness(1.15);
  transform:translateY(-4px)
}
.insight-flow {
  background:#123163;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px;
  position:relative
}
.insight-flow:before {
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  left:-120px;
  top:-150px;
  border-radius:50%;
  border:50px solid #8bbfff28
}
.insight-flow span {
  font-size:17px;
  color:#e7f2ff;
  writing-mode:vertical-rl;
  letter-spacing:.18em
}
.insight-flow i {
  width:30px;
  height:1px;
  background:#76b7ff;
  position:relative
}
.insight-flow i:after {
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  right:0;
  top:-3px;
  border-right:1px solid #76b7ff;
  border-top:1px solid #76b7ff;
  transform:rotate(45deg)
}
.insight-type {
  background:var(--surface);
  color:var(--muted);
  position:relative;
  padding:35px
}
.insight-type span {
  font-size:36px;
  font-weight:650;
  line-height:1.55;
  position:relative;
  z-index:1
}
.insight-type i {
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  border:23px solid var(--line);
  right:-30px;
  bottom:-40px
}
.insight-frame {
  background:var(--surface);
  padding:26px;
  display:flex;
  align-items:center;
  justify-content:center
}
.insight-frame>div {
  width:170px;
  transform:rotate(-12deg);
  border:1px solid var(--line);
  padding:14px
}
.insight-frame span {
  display:block;
  font-size:24px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding:7px;
  text-align:center
}
.insight-frame span:last-child {
  border:0
}
.insight-body {
  padding:24px 0 0
}
.source {
  font-size:11px;
  color:var(--muted)
}
.insight-body h3 {
  font-size:23px;
  margin:13px 0 15px;
  line-height:1.6
}
.insight-body p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  margin-bottom:13px
}
.insight-body .text-link {
  font-size:12px
}
.editorial-note {
  margin:30px 0 0;
  font-size:11px;
  color:var(--muted);
  line-height:1.7
}
.about {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:90px;
  border-top:1px solid var(--line);
  align-items:center
}
.about-brand {
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative
}
.about-brand:before {
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:radial-gradient(ellipse,#9cbbff55,transparent 65%);
  filter:blur(25px)
}
.about-brand img {
  width:64%;
  filter:brightness(0);
  position:relative
}
.about-brand>span {
  font-size:28px;
  letter-spacing:-.03em;
  color:var(--muted);
  margin-top:0
}
.about-copy>p {
  font-size:15px;
  line-height:1.95;
  color:var(--muted);
  margin-top:24px
}
.team-disciplines {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 26px;
  margin-top:25px;
  font-size:13px;
  color:var(--muted)
}
.team-disciplines>span {
  padding:15px 0;
  border-top:1px solid var(--line)
}
.questions {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:90px;
  padding-top:30px
}
.questions details {
  border-bottom:1px solid var(--line);
  padding:0
}
.questions summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  font-size:16px;
  line-height:1.8;
  padding:22px 0
}
.questions summary::-webkit-details-marker {
  display:none
}
.questions summary>span {
  font-size:24px;
  color:var(--muted);
  font-weight:300;
  transition:transform .25s
}
.questions details[open] summary>span {
  transform:rotate(45deg)
}
.questions details p {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  max-width:620px;
  margin-bottom:24px
}
.cooperation {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:90px
}
.cooperation-copy>p {
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
  margin:25px 0 32px;
  max-width:390px
}
.cooperation-copy .business-contact {
  font-size:13px
}
.lead-card {
  padding:34px;
  background:var(--surface);
  border-radius:12px
}
form label {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:20px;
  line-height:1.6
}
form label>span:not(.consent span) {
  color:var(--muted)
}
input,textarea,select {
  width:100%;
  display:block;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--surface);
  color:var(--muted);
  padding:12px 13px;
  min-height:45px;
  margin-top:9px;
  outline:none;
  font-size:14px
}
input:focus,textarea:focus,select:focus {
  border-color:var(--line)
}
input::placeholder,textarea::placeholder {
  color:var(--muted);
  opacity:1
}
textarea {
  resize:vertical
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.optional-fields {
  margin-bottom:18px
}
.optional-fields>summary {
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  padding:10px 0
}
.optional-fields[open]>summary {
  margin-bottom:16px
}
.form-trap {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}
.consent {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:11px;
  line-height:1.9;
  margin:15px 0
}
.consent input {
  appearance:auto;
  display:inline-block;
  flex:none;
  width:16px;
  min-height:16px;
  height:16px;
  margin:3px 0 0;
  accent-color:#508bf8
}
.consent a {
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--muted)
}
.form-status {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin:12px 0
}
#leadSubmit {
  width:100%
}
.text-button {
  background:none;
  border:0;
  color:var(--muted);
  padding:12px 0;
  display:block;
  cursor:pointer;
  font-size:13px
}
.success-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:#173f38;
  color:#83ddbf;
  border-radius:50%;
  font-size:22px;
  margin-bottom:20px
}
#leadSuccess h3 {
  font-size:24px
}
#leadSuccess p {
  font-size:14px;
  color:var(--muted);
  line-height:1.9
}
.footer {
  max-width:1280px;
  padding:40px 40px 28px;
  margin:auto;
  border-top:1px solid var(--line)
}
.footer-top {
  display:flex;
  align-items:center;
  gap:35px
}
.footer-top>p {
  font-size:14px;
  color:var(--muted);
  margin:0
}
.footer-links {
  margin-left:auto;
  display:flex;
  gap:28px;
  font-size:12px;
  color:var(--muted)
}
.footer-bottom {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:32px;
  font-size:10px;
  color:var(--muted);
  line-height:1.7
}
.detail-page {
  max-width:880px;
  min-height:70vh;
  padding-top:55px
}
.detail-page h1 {
  font-size:42px;
  margin:30px 0;
  color:var(--muted);
  background:none;
  line-height:1.5
}
.detail-page h2 {
  font-size:22px;
  margin:30px 0 14px
}
.detail-page p {
  font-size:15px;
  line-height:2;
  color:var(--muted);
  white-space:pre-line
}
.detail-page .back-link {
  font-size:13px;
  color:var(--muted)
}
.case-cover {
  width:100%;
  border-radius:12px;
  margin:25px 0
}
.case-client-logo {
  max-height:80px;
  object-fit:contain;
  margin:15px 0
}
dialog {
  position:fixed;
  max-width:410px;
  width:calc(100% - 40px);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--muted);
  padding:34px;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px)
}
dialog::backdrop {
  background:var(--surface)
}
dialog h2 {
  font-size:25px;
  margin:0 0 24px
}
dialog p {
  font-size:14px;
  line-height:1.9;
  color:var(--muted)
}
.dialog-close {
  position:absolute;
  right:12px;
  top:10px;
  color:var(--muted);
  border:0;
  background:transparent;
  width:32px;
  height:32px;
  font-size:25px
}
#wechatContent img {
  display:block;
  max-width:230px;
  margin:20px auto
}
.noscript {
  background:var(--surface);
  color:var(--muted);
  padding:20px;
  text-align:center
}
.motion-pause {
  position:absolute;
  right:0;
  bottom:-25px;
  border:0;
  background:none;
  color:var(--muted);
  font-size:11px
}





@media(min-width:1600px) {
  .hero {
    padding-top:65px
  }
  .content-stage {
    margin-top:68px
  }
  .film {
    height:410px
  }
  .film-beauty,.film-tech {
    height:370px
  }
}
@media(max-width:1100px) {
  .site-header {
    padding:0 28px;
    gap:20px
  }
  .site-header nav {
    gap:17px;
    font-size:12px
  }
  .nav-contact {
    padding:10px 12px
  }
  .section {
    padding-left:30px;
    padding-right:30px
  }
  .content-rail {
    gap:16px
  }
  .film-copy {
    left:22px;
    right:20px
  }
  .film-copy strong {
    font-size:23px
  }
  .brand-wall {
    grid-template-columns:repeat(4,1fr)
  }
  .brand-wall li:nth-child(-n+12) {
    border-bottom:1px solid var(--line)
  }
  .section-head {
    gap:35px
  }
  .method-workspace {
    grid-template-columns:240px 1fr;
    gap:32px;
    padding:28px
  }
  .method-panels {
    padding-right:0
  }
  .method-panel h3 {
    font-size:26px
  }
  .industry-panel {
    gap:35px
  }
  .industry-art {
    height:420px
  }
  .resources {
    column-gap:45px
  }
  .cooperation {
    gap:48px
  }
  .about,.questions {
    gap:50px
  }
  .insight-grid {
    gap:20px
  }
  .insight-body h3 {
    font-size:20px
  }
  .insight-flow {
    gap:7px;
    padding:16px
  }
  .insight-flow i {
    width:15px
  }
  .insight-type {
    padding:30px
  }
  .insight-type span {
    font-size:31px
  }
  .footer-top {
    gap:25px
  }
  .footer-links {
    gap:16px
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:85px
  }
  .site-header {
    height:76px;
    padding:0 23px
  }
  .brand {
    font-size:22px;
    gap:13px
  }
  .brand img {
    width:29px;
    height:29px
  }
  .brand-sub {
    font-size:9px
  }
  .menu-toggle {
    display:block;
    background:var(--surface);
    color:var(--muted);
    padding:10px 15px;
    border:1px solid var(--line);
    border-radius:6px;
    font-size:12px
  }
  .site-header nav {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    padding:20px 24px;
    background:var(--surface);
    flex-direction:column;
    align-items:stretch;
    font-size:15px;
    gap:0;
    border-bottom:1px solid var(--line)
  }
  .site-header nav.open {
    display:flex
  }
  .site-header nav>a {
    padding:14px
  }
  .nav-contact {
    margin-top:10px;
    justify-content:space-between
  }
  .hero {
    padding:35px 22px 30px
  }
  .hero-intro {
    font-size:10px;
    margin-bottom:22px;
    padding:8px 12px
  }
  h1 {
    font-size:clamp(46px,10.4vw,70px);
    line-height:1.28;
    margin-bottom:22px
  }
  .hero #heroDescription {
    font-size:14px;
    line-height:1.9;
    max-width:420px;
    margin-bottom:25px
  }
  .hero-actions {
    gap:10px
  }
  .button {
    min-height:46px;
    font-size:12px;
    padding:12px 18px;
    gap:14px
  }
  .button .icon {
    width:17px
  }
  .content-stage {
    margin-top:38px
  }
  .content-rail {
    grid-template-columns:repeat(3,1fr);
    gap:9px
  }
  .film,.film-beauty,.film-tech {
    height:230px;
    border-radius:8px
  }
  .film-beauty,.film-tech {
    height:208px
  }
  .film-copy {
    left:11px;
    right:10px;
    bottom:14px
  }
  .film-copy small {
    display:none
  }
  .film-copy strong {
    font-size:17px;
    line-height:1.5;
    margin-bottom:15px
  }
  .film-copy>span {
    font-size:9px
  }
  .film-copy .icon {
    width:12px
  }
  .film-image {
    background-size:auto 100%;
    background-size:300% 100%
  }
  .stage-caption {
    margin-top:23px;
    font-size:9px;
    gap:10px;
    flex-direction:column;
    align-items:center;
    text-align:center
  }
  .beam {
    height:65vh;
    filter:blur(35px)
  }
  .section {
    padding:62px 24px
  }
  .section-head {
    display:block;
    margin-bottom:30px
  }
  .section-head>p {
    max-width:540px;
    font-size:14px;
    line-height:1.9;
    margin-top:20px
  }
  .section-head.compact h2 {
    font-size:24px
  }
  .section-head.compact h2 span {
    font-size:14px
  }
  .section-head.compact>p {
    font-size:11px;
    margin-top:16px
  }
  h2 {
    font-size:30px;
    line-height:1.4
  }
  .partners {
    padding-top:33px;
    padding-bottom:40px
  }
  .brand-wall li {
    height:69px;
    font-size:17px
  }
  .brand-wall li:nth-child(2),.brand-wall li:nth-child(14),.brand-wall li:nth-child(16) {
    font-size:13px
  }
  .service-list {
    grid-template-columns:1fr;
    gap:23px;
    margin-bottom:35px
  }
  .service-item {
    padding-top:22px;
    display:grid;
    grid-template-columns:31px 1fr;
    gap:8px 17px
  }
  .service-icon {
    grid-row:1/3;
    padding-top:2px
  }
  .service-item h3 {
    margin:0;
    font-size:19px
  }
  .service-item p {
    font-size:13px;
    grid-column:2
  }
  .method-workspace {
    grid-template-columns:1fr;
    gap:24px;
    padding:20px
  }
  .method-tabs {
    flex-direction:row;
    overflow-x:auto;
    padding-bottom:7px
  }
  .method-tab {
    flex:0 0 116px;
    min-height:52px;
    padding:10px 11px;
    font-size:12px;
    gap:9px;
    border-bottom:1px solid var(--line)
  }
  .method-tab .icon {
    display:none
  }
  .step-index {
    font-size:10px
  }
  .method-panels {
    min-height:270px;
    padding:15px 4px 0
  }
  .method-panel h3 {
    font-size:24px;
    max-width:340px
  }
  .method-panel>p {
    font-size:13px
  }
  .method-count {
    font-size:85px;
    top:0
  }
  .delivery {
    font-size:11px;
    gap:14px;
    display:block;
    padding:16px 0 9px
  }
  .delivery strong {
    display:block;
    margin-top:6px
  }
  .method-panel .text-link {
    font-size:12px
  }
  .solutions .section {
    padding-top:60px;
    padding-bottom:60px
  }
  .industry-tabs {
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:0 0 10px;
    margin-bottom:20px
  }
  .industry-tabs button {
    white-space:nowrap;
    padding:11px 16px;
    font-size:12px
  }
  .industry-panel {
    grid-template-columns:1fr;
    gap:25px;
    min-height:0
  }
  .industry-art {
    height:270px;
    background-size:300% auto;
    background-position-y:46%;
    border-radius:8px
  }
  .industry-copy h3 {
    font-size:27px;
    margin:0 0 18px
  }
  .industry-copy>p {
    font-size:14px
  }
  .industry-copy dl {
    margin-top:20px
  }
  .industry-copy dl>div {
    grid-template-columns:78px 1fr;
    gap:12px;
    font-size:12px
  }
  .resources {
    grid-template-columns:1fr;
    gap:30px
  }
  .resource-intro>p {
    font-size:14px;
    margin:20px 0
  }
  .resource-promises {
    gap:15px;
    font-size:10px;
    margin:20px 0 12px
  }
  .resource-lens dl>div {
    font-size:12px;
    gap:10px
  }
  .resource-lens dl {
    padding:7px 20px
  }
  .lens-header {
    padding:20px;
    font-size:12px
  }
  .resource-lens>p {
    padding:12px 20px 20px;
    font-size:10px
  }
  .stats-numbers {
    gap:45px
  }
  .stats-numbers strong {
    font-size:34px
  }
  .creator-list {
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .creator {
    padding:18px
  }
  .case-list {
    grid-template-columns:1fr;
    gap:30px
  }
  .insight-grid {
    grid-template-columns:1fr;
    gap:36px
  }
  .insight>a {
    display:grid;
    grid-template-columns:120px 1fr;
    gap:20px
  }
  .insight-visual {
    height:180px;
    border-radius:8px
  }
  .insight-flow {
    gap:9px;
    flex-direction:column;
    padding:20px
  }
  .insight-flow span {
    font-size:13px;
    writing-mode:horizontal-tb;
    letter-spacing:0
  }
  .insight-flow i {
    width:1px;
    height:12px
  }
  .insight-flow i:after {
    top:5px;
    right:-2px;
    width:5px;
    height:5px;
    transform:rotate(135deg)
  }
  .insight-body {
    padding:0
  }
  .source {
    font-size:9px
  }
  .insight-body h3 {
    font-size:18px;
    margin:10px 0;
    line-height:1.5
  }
  .insight-body p {
    font-size:12px;
    margin-bottom:8px
  }
  .insight-body .text-link {
    font-size:11px
  }
  .insight-type {
    padding:23px 15px;
    display:flex;
    align-items:center
  }
  .insight-type span {
    font-size:25px
  }
  .insight-frame {
    padding:15px
  }
  .insight-frame>div {
    padding:6px;
    transform:rotate(-7deg);
    width:90px
  }
  .insight-frame span {
    font-size:18px;
    padding:9px
  }
  .editorial-note {
    font-size:10px;
    line-height:1.9
  }
  .about {
    grid-template-columns:1fr;
    gap:20px
  }
  .about-brand {
    aspect-ratio:auto;
    height:190px;
    align-items:flex-start;
    flex-direction:row;
    justify-content:flex-start;
    gap:20px;
    align-items:center
  }
  .about-brand img {
    height:180px;
    width:180px
  }
  .about-brand>span {
    font-size:35px
  }
  .about-copy>p {
    font-size:14px;
    margin-top:20px
  }
  .team-disciplines {
    font-size:12px
  }
  .questions {
    grid-template-columns:1fr;
    gap:25px;
    padding-top:10px
  }
  .questions summary {
    font-size:14px;
    line-height:1.9;
    padding:20px 0
  }
  .questions details p {
    font-size:13px
  }
  .cooperation {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:60px
  }
  .cooperation-copy>p {
    font-size:14px;
    margin:22px 0
  }
  .lead-card {
    padding:23px 19px
  }
  .form-grid {
    gap:15px
  }
  .form-grid label {
    min-width:0
  }
  form label {
    font-size:11px
  }
  input,textarea,select {
    font-size:16px;
    padding:11px;
    min-height:44px
  }
  .consent {
    font-size:10px
  }
  .form-status {
    font-size:11px
  }
  .footer {
    padding:28px 24px 22px
  }
  .footer-top {
    flex-wrap:wrap;
    gap:24px
  }
  .footer-top>p {
    font-size:11px;
    margin-left:auto;
    max-width:125px;
    line-height:1.8
  }
  .footer-links {
    margin:0;
    gap:26px;
    width:100%;
    font-size:12px
  }
  .footer-bottom {
    gap:12px;
    flex-wrap:wrap;
    font-size:9px;
    margin-top:25px
  }
  .detail-page {
    padding-top:35px
  }
  .detail-page h1 {
    font-size:30px;
    line-height:1.5
  }
  .detail-page h2 {
    font-size:21px
  }
  .detail-page p {
    font-size:14px
  }
}
@media(max-width:370px) {
  .hero {
    padding-left:16px;
    padding-right:16px
  }
  .hero h1 {
    font-size:44px
  }
  .film-copy strong {
    font-size:15px
  }
  .film-copy>span {
    font-size:8px
  }
  .section {
    padding-left:20px;
    padding-right:20px
  }
  .brand-wall li {
    font-size:15px
  }
  .insight>a {
    grid-template-columns:95px 1fr;
    gap:15px
  }
  .insight-type span {
    font-size:21px
  }
  .about-brand {
    gap:8px
  }
  .about-brand img {
    width:150px;
    height:150px
  }
  .about-brand>span {
    font-size:30px
  }
  .form-grid {
    grid-template-columns:1fr;
    gap:0
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition-duration:.01ms!important
  }
  .content-rail {
    transform:none!important
  }
  .film:hover .film-image,.button:hover,.insight a:hover .insight-visual {
    transform:none
  }
  .film {
    clip-path:none
  }
}
.industry-copy h3 {
  white-space:pre-line
}
@media(max-width:760px) {
  .content-stage {
    margin-left:0;
    margin-right:0;
    padding:0;
  }
  .content-rail {
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:12px 0 18px;
    transform:none;
    scrollbar-width:thin;
  }
  .film,.film:nth-child(2) {
    flex:0 0 78vw;
    max-width:330px;
    height:340px;
    transform:none;
    scroll-snap-align:center;
  }
  .film-image {
    background-size:300% auto;
  }
  .film-copy {
    padding:24px;
  }
  .film-copy small {
    display:block;
    font-size:11px;
    line-height:1.8;
    margin-bottom:12px;
  }
  .film-copy strong {
    font-size:28px;
    line-height:1.45;
    word-break:keep-all;
  }
  .film-copy>span {
    font-size:12px;
    margin-top:20px;
  }
  .stage-caption {
    padding:0 24px;
  }
}

/* Morning: bright surfaces, vivid blue accents and a shared brand rhythm. */
:root, body { background:#fcfdff; }
.site-header { background:#ffffffd9; border-bottom:1px solid #e7edf780; }
.brand { color:var(--ink); }
.brand-sub { color:#60718b; }
.site-header nav { color:var(--ink); }
.site-header nav>a:hover { color:var(--blue); }
.nav-contact { color:var(--blue); background:#eef3ff; border-color:#cedbf6; }
.button-primary { color:#fff; }
.button-secondary,.button-outline { background:#ffffffb3; color:var(--ink); border-color:#c7d3ea; }
.button-secondary:hover,.button-outline:hover { background:#eaf0ff; }
.text-link,.service-icon,.step-index,.resource-promises,.relation,.consent a,.text-button { color:var(--blue); }
.hero { padding-top:60px; }
.hero-intro { color:#354f7e; background:#edf3ffb0; border-color:#d0def5; }
.hero-beams { background:radial-gradient(ellipse at 50% 12%,#ecf2ff 0%,transparent 67%); }
.beam-left { opacity:.75; }
.beam-right { opacity:.8; }
.hero h1 { font-size:clamp(52px,6.7vw,94px); }
#heroDescription { color:#53627b; }
.film { box-shadow:0 24px 40px -28px #183b7199; }
.stage-caption { color:#64738b; }
.stage-caption>span:first-child { color:#435674; }
.brand-wall li { color:#263956; }
.brand-wall li:hover { color:var(--blue); background:#edf3ff; }
.brand-wall li:nth-child(-n+8) { border-color:var(--line); }
.method-workspace { background:linear-gradient(130deg,#f0f5ff,#f8faff); border:1px solid #dce6f5; }
.method-tab[aria-selected=true] { background:#315bea; color:#fff; }
.method-tab[aria-selected=true] .step-index { color:#dfe9ff; }
.method-count { color:#dce6f7; }
.method-panel h3 { color:var(--ink); }
.solutions { background:#eef3fc; }
.industry-tabs button { color:#354766; background:#f8faff; }
.industry-tabs button[aria-selected=true] { background:#315bea; color:#fff; border-color:#315bea; }
.industry-tabs button:hover:not([aria-selected=true]) { background:#dfe9fc; color:#19365e; }
.industry-copy dd,.resource-lens dd,.delivery strong,.team-disciplines { color:#293d5c; }
.resource-lens dt,.stats-note,.source,.editorial-note { color:#5a6b85; }
.stats-numbers strong { color:var(--blue); }
.insight-flow { background:#315bea; }
.insight-type { background:#dce8ff; color:#1b3b70; }
.insight-frame { background:#e9ecfa; }
.insight-frame span { color:#31508c; }
.about-brand>span { color:#315bea; }
.lead-card { background:#eef3fb; }
input,textarea,select { background:#fff; color:var(--ink); border-color:#bdcbe0; }
input:focus,textarea:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px #315bea12; }
input::placeholder,textarea::placeholder { color:#65748b; }
.detail-page h1 { color:var(--ink); }
dialog { background:#fffffff0; color:var(--ink); }
dialog::backdrop { background:#24456d3b; }
.menu-toggle { color:#284573; background:#eef3ff; }
.site-header nav.open { background:#fffffff5; border-color:var(--line); }
.motion-ready .film-image { transition:none; }
.motion-paused * { animation-play-state:paused!important; }
@media(max-width:760px) {
  .hero { padding-top:38px; }
  .hero h1 { font-size:clamp(42px,11.8vw,62px); }
  .content-stage { margin-top:38px; }
  .film-copy { left:24px;right:24px;bottom:24px;padding:0; }
  .film-copy strong { font-size:28px;line-height:1.45;word-break:normal; }
  .method-count { font-size:75px;top:8px;opacity:.55; }
  .form-grid { grid-template-columns:1fr;gap:0; }
}