/* Shared interaction layer for the promotional site. */
:root{
  --interaction-coral:#ff7058;
  --interaction-ice:#8bf4f7;
  --interaction-ink:#090912;
}

button,.btn,.links a,.product-nav a,.matrix-item,.card,.case,.feature,.product-card,.audience-item,.tab,.step,.node{
  -webkit-tap-highlight-color:transparent;
}

nav .links a:not(.btn),nav .product-nav a:not(.product-nav-btn){
  position:relative;
  transition:color .25s ease,transform .25s ease;
}
nav .links a:not(.btn)::after,nav .product-nav a:not(.product-nav-btn)::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:1px;
  background:var(--interaction-ice);
  transition:right .25s ease;
}
nav .links a:not(.btn):hover,nav .product-nav a:not(.product-nav-btn):hover{transform:translateY(-1px)}
nav .links a:not(.btn):hover::after,nav .links a[aria-current="page"]:not(.btn)::after,
nav .product-nav a:not(.product-nav-btn):hover::after,nav .product-nav a[aria-current="page"]:not(.product-nav-btn)::after{right:0}

.btn,.product-nav-btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease!important}
.btn::after,.product-nav-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 28%,#fff7 50%,transparent 72%);
  transform:translateX(-130%);
  transition:transform .55s ease;
}
.btn:hover,.product-nav-btn:hover{transform:translateY(-3px)!important;box-shadow:0 12px 24px #ff70583d}
.btn:hover::after,.product-nav-btn:hover::after{transform:translateX(130%)}

.card,.case,.feature,.product-card,.audience-item{
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease;
}
.card:hover,.case:hover,.feature:hover,.product-card:hover,.audience-item:hover{
  transform:translateY(-10px);
  box-shadow:0 24px 48px #0b0b1430;
}
.card::after,.case::after,.feature::after,.product-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(120deg,transparent 25%,#ffffff30 48%,transparent 70%);
  transform:translateX(-80%);
  transition:opacity .25s ease,transform .7s ease;
}
.card:hover::after,.case:hover::after,.feature:hover::after,.product-card:hover::after{opacity:1;transform:translateX(80%)}
.card,.case,.feature,.product-card{position:relative;overflow:hidden;isolation:isolate}

/* Homepage service carousel: two identical tracks make the loop seamless. */
.service-carousel-section{padding:66px 0 76px;background:#10101c;color:#fff;overflow:hidden}
.service-carousel-head{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:26px}
.service-carousel-head h2{margin:10px 0 0;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.055em}
.service-carousel-head p{max-width:370px;margin:0;color:#aaa7b8;font-size:14px;line-height:1.8}
.service-carousel-viewport{position:relative;overflow:hidden;margin:0 -21px;padding:10px 21px 26px}
.service-carousel-viewport::before,.service-carousel-viewport::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:9%;pointer-events:none}
.service-carousel-viewport::before{left:0;background:linear-gradient(90deg,#10101c,transparent)}
.service-carousel-viewport::after{right:0;background:linear-gradient(270deg,#10101c,transparent)}
.service-carousel-track{display:flex;width:max-content;gap:16px;animation:serviceCarousel 42s linear infinite}
.service-carousel-viewport:hover .service-carousel-track{animation-play-state:paused}
.service-carousel-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:clamp(270px,30vw,360px);min-height:270px;padding:25px;border:1px solid #ffffff22;border-radius:14px;background:linear-gradient(145deg,#202031,#141420);overflow:hidden;box-shadow:0 16px 32px #0003}
.service-carousel-card:hover{border-color:#8bf4f766;box-shadow:0 24px 48px #0006;transform:translateY(-6px)}
.service-carousel-card:nth-child(2n){background:linear-gradient(145deg,#34283c,#171520)}
.service-carousel-card:nth-child(3n){background:linear-gradient(145deg,#1f3840,#121b24)}
.service-carousel-card small{color:var(--interaction-ice);font:700 10px/1.4 Consolas,"SFMono-Regular",monospace;letter-spacing:.12em}
.service-carousel-card h3{position:relative;z-index:1;margin:18px 0 8px;font-size:24px;line-height:1.2;letter-spacing:-.045em}
.service-carousel-card p{position:relative;z-index:1;max-width:280px;margin:0;color:#c8c5d3;font-size:13px;line-height:1.8}
.service-carousel-card a{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-top:23px;padding-top:14px;border-top:1px solid #ffffff24;color:#fff;font-size:12px;font-weight:700}
.service-carousel-card a span{font-size:18px;color:var(--interaction-coral);transition:transform .25s ease}
.service-carousel-card:hover a span{transform:translateX(6px)}
.service-carousel-card::before{content:"";position:absolute;right:-42px;bottom:-72px;width:190px;height:190px;border:1px solid #8bf4f733;border-radius:50%;box-shadow:0 0 0 24px #8bf4f70a,0 0 0 48px #8bf4f705;transition:transform .45s ease}
.service-carousel-card:hover::before{transform:scale(1.14) rotate(12deg)}
@keyframes serviceCarousel{to{transform:translateX(calc(-50% - 8px))}}

@media(max-width:760px){
  .service-carousel-section{padding:56px 0 62px}
  .service-carousel-head{display:block}
  .service-carousel-head p{margin-top:17px}
  .service-carousel-viewport{margin:0 -21px;padding-left:21px;padding-right:21px}
  .service-carousel-card{width:min(78vw,330px);min-height:250px}
}
@media(prefers-reduced-motion:reduce){
  .btn,.product-nav-btn,.card,.case,.feature,.product-card,.service-carousel-card{transition:none!important}
  .service-carousel-track{animation:none!important}
  .btn::after,.product-nav-btn::after,.card::after,.case::after,.feature::after,.product-card::after{display:none}
}

/* Premium information rail replacing the flat announcement strip. */
.ticker{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  min-height:82px;
  padding:0!important;
  color:#e9f6f7!important;
  background:#0b1119!important;
  border-top:1px solid #ffffff18;
  border-bottom:1px solid #ffffff18;
  overflow:hidden;
  isolation:isolate;
}
.ticker::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:radial-gradient(circle at 73% 50%,#17444e99,transparent 28%),linear-gradient(90deg,#ff70580e,transparent 42%,#8bf4f70b);
  pointer-events:none;
}
.ticker::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:0;
  width:22%;
  background:linear-gradient(90deg,#0b1119,transparent);
  pointer-events:none;
}
.ticker-label{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:184px;
  padding-left:max(21px,calc((100vw - 1160px)/2));
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  white-space:nowrap;
}
.ticker-label::after{
  content:"";
  position:absolute;
  top:20px;
  right:0;
  bottom:20px;
  width:1px;
  background:linear-gradient(180deg,transparent,#8bf4f766,transparent);
}
.ticker-label i{
  position:relative;
  display:block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--interaction-coral);
  box-shadow:0 0 0 5px #ff70581c,0 0 20px #ff7055;
  animation:tickerPulse 2.4s ease-in-out infinite;
}
.ticker-label i::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid #ff705899;
  border-radius:50%;
  animation:tickerRing 2.4s ease-out infinite;
}
.ticker-label span{display:flex!important;flex-direction:column;gap:2px;animation:none!important}
.ticker-label small{color:#8fa9af;font:600 9px/1 Consolas,"SFMono-Regular",monospace;letter-spacing:.1em}
.ticker-window{
  position:relative;
  min-width:0;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 92%,transparent);
}
.ticker-window::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:-8%;
  width:1px;
  background:#8bf4f7;
  box-shadow:0 0 18px 3px #8bf4f766;
  opacity:.55;
  pointer-events:none;
  animation:tickerScan 8s linear infinite;
}
.ticker-track{
  display:flex!important;
  align-items:center;
  width:max-content;
  animation:marquee 34s linear infinite!important;
}
.ticker-track>span{
  display:inline-flex!important;
  align-items:center;
  min-height:82px;
  padding:0 18px!important;
  color:#d6e6e8!important;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  animation:none!important;
}
.ticker-track b{
  display:inline-grid;
  place-items:center;
  width:7px;
  height:7px;
  margin:0 25px!important;
  border-radius:50%;
  color:var(--interaction-coral)!important;
  background:var(--interaction-coral);
  box-shadow:0 0 12px #ff7055;
  font-size:0;
}
.ticker-track b::after{content:"";width:3px;height:3px;border-radius:50%;background:#fff}
.ticker-window:hover .ticker-track{animation-play-state:paused!important}
@keyframes tickerPulse{50%{opacity:.65;transform:scale(.78)}}
@keyframes tickerRing{0%{opacity:.8;transform:scale(.65)}100%{opacity:0;transform:scale(1.8)}}
@keyframes tickerScan{to{left:108%}}
@media(max-width:760px){
  .ticker{grid-template-columns:1fr;min-height:72px}
  .ticker-label{min-width:0;padding:13px 21px 0;font-size:11px}
  .ticker-window{width:100%}
  .ticker-track>span{min-height:52px;padding-bottom:10px!important;font-size:12px}
  .ticker-track b{margin:0 16px!important}
}
@media(prefers-reduced-motion:reduce){
  .ticker-label i,.ticker-label i::after,.ticker-track,.ticker-window::before{animation:none!important}
}

/* Keep the first viewport focused on the page topic instead of a decorative label. */
body>.hero>.wrap>.intro>.eyebrow,
body>.hero>.wrap>.copy>.tag,
body>.detail-hero .hero-copy>.eyebrow{
  display:none!important;
}

/* Place first-screen title groups near the 38.2% visual axis. */
:root{--hero-golden-shift:clamp(24px,3vh,32px)}
body>.hero>.wrap>.copy,
body>.hero>.wrap>.intro,
body>.detail-hero .hero-copy{
  transform:translateY(calc(var(--hero-golden-shift) * -1));
}
@media(max-width:760px){
  :root{--hero-golden-shift:12px}
}

/* Golden-ratio type scale for all card-based content. */
:root{
  --card-copy-size:14px;
  --card-title-size:22.65px;
  --card-label-size:11px;
  --card-copy-line:1.72;
}
.card small,.case small,.feature .no,.matrix-item small,.matrix-core small,
.service-carousel-card small,.control-panel small,.product-card .launch{
  font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","HarmonyOS Sans SC",sans-serif!important;
  font-size:var(--card-label-size)!important;
  line-height:1.45!important;
  letter-spacing:.05em!important;
  font-weight:700;
}
.card h3,.feature h3,.matrix-item h3,.service-carousel-card h3{
  margin:18px 0 11px!important;
  font-size:clamp(20px,1.6vw,var(--card-title-size))!important;
  line-height:1.28!important;
  letter-spacing:0!important;
}
.case h3,.control-panel h3{
  font-size:clamp(22px,1.8vw,24px)!important;
  line-height:1.3!important;
  letter-spacing:0!important;
}
.card p,.case p,.feature p,.matrix-item p,.service-carousel-card p,
.control-panel p,.product-card p,.audience-item p{
  font-size:var(--card-copy-size)!important;
  line-height:var(--card-copy-line)!important;
  letter-spacing:0!important;
}
.card a,.case a,.service-carousel-card a,.product-card a{
  line-height:1.5;
  letter-spacing:0;
}
@media(max-width:760px){
  :root{--card-copy-size:13.5px;--card-title-size:21px}
  .card h3,.feature h3,.matrix-item h3,.service-carousel-card h3{margin-top:16px!important}
}