:root {
  --blue: #0868ef;
  --ink: #0a1428;
  --muted: #637795;
  --line: #dce6f2;
  --paper: #ffffff;
  --bg: #f7faff;
  --shadow: 0 18px 44px rgba(31, 66, 111, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--bg); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; }

.site-header { position: sticky; top: 0; z-index: 30; height: 84px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(18px); }
.header-inner { width: min(1440px, calc(100% - 64px)); height: 100%; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; }
.brand { display: inline-flex; flex-direction: column; width: max-content; }
.brand strong { font-size: 20px; letter-spacing: .02em; }
.brand span { display: flex; align-items: center; gap: 10px; margin-top: 5px; color: #8391a7; font-size: 9px; letter-spacing: .13em; }
.brand i, footer i { width: 1px; height: 12px; background: #c5d0df; }
.main-nav { height: 100%; display: flex; align-items: center; gap: 54px; font-size: 20px; font-weight: 750; letter-spacing: .02em; }
.main-nav a { position: relative; display: flex; height: 100%; align-items: center; }
.main-nav .active { color: var(--blue); }
.main-nav .active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--blue); }
.login-preview { justify-self: end; width: 92px; height: 42px; border-radius: 24px; color: #fff; background: linear-gradient(105deg, #0968e7, #0878f4); box-shadow: 0 10px 26px rgba(8,104,239,.2); font-weight: 700; cursor: default; }

.shell { width: min(1440px, calc(100% - 64px)); margin-inline: auto; }
.hero { min-height: 610px; display: grid; grid-template-columns: .78fr 1.22fr; gap: 62px; align-items: center; padding-block: 58px; }
.eyebrow { display: flex; align-items: center; gap: 17px; margin: 0; color: #7690b5; font-size: 11px; font-weight: 700; letter-spacing: .23em; }
.eyebrow span { width: 38px; height: 3px; border-radius: 3px; background: var(--blue); }
.hero h1 { margin: 32px 0 26px; font-size: clamp(54px, 4.3vw, 78px); line-height: 1.1; letter-spacing: -.055em; }
.hero-lead { margin: 0; color: #526d95; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 38px; }
.film-button { min-height: 58px; padding: 0 28px; display: inline-flex; align-items: center; gap: 12px; border-radius: 31px; color: white; background: linear-gradient(105deg, #0968e7, #0878f4); box-shadow: 0 14px 32px rgba(8,104,239,.24); font-weight: 700; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.film-button:hover, .film-button:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(8,104,239,.32); outline: none; }
.play-mini { position: relative; width: 22px; height: 22px; border-radius: 50%; background: white; }
.play-mini::after { content: ""; position: absolute; left: 9px; top: 6px; border-left: 7px solid var(--blue); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.vision-link { display: inline-flex; align-items: center; gap: 18px; padding: 16px 0 16px 26px; border-left: 1px solid #cad7e7; color: #7486a3; background: transparent; font-size: 11px; font-weight: 700; letter-spacing: .1em; cursor: pointer; }
.vision-link span { color: #496c9e; font-size: 25px; font-weight: 400; transition: transform .2s ease; }
.vision-link:hover span { transform: translateX(5px); }

.hero-film { position: relative; width: 100%; aspect-ratio: 733 / 370; overflow: hidden; border-radius: 19px; background: #061834; box-shadow: 0 28px 60px rgba(21, 52, 94, .16); cursor: pointer; }
.hero-crop { position: absolute; inset: 0; display: block; background-image: url("assets/hero-vision-hd-v2.png"); background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform .75s ease, filter .75s ease; }
.hero-film::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(1,13,34,.28),transparent 42%),linear-gradient(180deg,transparent 48%,rgba(2,15,37,.38)); pointer-events: none; }
.hero-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 52%, rgba(255,255,255,.1), transparent 68%); transform: translateX(-130%); transition: transform 1.1s ease; }
.hero-film:hover .hero-crop { transform: scale(1.015); filter: saturate(1.07); }
.hero-film:hover::after { transform: translateX(120%); }
.hero-film-label { position: absolute; z-index: 3; left: 25px; bottom: 25px; display: flex; flex-direction: column; align-items: flex-start; color: rgba(255,255,255,.93); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-shadow: 0 2px 14px rgba(0,0,0,.46); }
.hero-film-label small { margin-top: 5px; font-size: 9px; letter-spacing: .18em; }
.hero-play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 66px; height: 66px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(0,20,50,.28); transform: translate(-50%,-50%); transition: transform .25s ease,background .25s ease; }
.hero-play::after { content: ""; position: absolute; left: 27px; top: 21px; border-left: 16px solid #31547f; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.hero-film:hover .hero-play { transform: translate(-50%,-50%) scale(1.07); background: #fff; }

.foundation-section { border-top: 1px solid #edf2f8; border-bottom: 1px solid #e7eef7; background: white; }
.foundation-section .shell { padding-block: 58px 54px; }
.foundation-heading { display: grid; grid-template-columns: 1fr 500px; gap: 60px; align-items: end; }
.foundation-heading h2 { margin: 17px 0 0; font-size: clamp(34px, 3vw, 49px); line-height: 1.18; letter-spacing: -.04em; }
.foundation-intro { margin: 0 0 4px; padding-left: 36px; border-left: 2px solid #dfe8f3; color: #6b7f9d; font-size: 15px; line-height: 1.8; }
.foundation-grid { display: grid; grid-template-columns: .9fr 1.45fr; gap: 34px; margin-top: 39px; }
.capability-block, .industry-block { min-width: 0; }
.capability-block { padding-right: 32px; border-right: 1px solid var(--line); }
.capability-block h3, .industry-block h3 { margin: 0 0 14px; color: #7690b5; font-size: 14px; font-weight: 500; }
.capability-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.mini-card { position: relative; min-width: 0; height: 154px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fbfdff; box-shadow: 0 7px 18px rgba(37,72,115,.035); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mini-card:hover, .mini-card:focus-visible, .industry-card:hover, .industry-card:focus-visible { transform: translateY(-4px); border-color: #9ec8f9; box-shadow: 0 14px 28px rgba(27,74,131,.12); outline: none; }
.mini-card strong, .industry-card strong { position: absolute; left: 13px; bottom: 12px; font-size: 14px; }
.mini-card b, .industry-card b { position: absolute; right: 11px; bottom: 10px; color: #7990af; font-size: 20px; font-weight: 400; }
.mini-visual { position: absolute; left: 0; right: 0; top: 0; height: 105px; overflow: hidden; background: linear-gradient(145deg, #f8fbff, #e9f2ff); }
.visual-wave i { position: absolute; left: -12%; width: 125%; height: 42px; border-radius: 50%; border-top: 2px solid rgba(62,126,235,.19); transform: rotate(-4deg); }
.visual-wave i:nth-child(1) { top: 30px; box-shadow: 0 -14px 24px rgba(60,125,240,.14); }
.visual-wave i:nth-child(2) { top: 45px; left: -5%; transform: rotate(5deg); }
.visual-wave i:nth-child(3) { top: 59px; left: -18%; transform: rotate(-8deg); }
.visual-network::before { content: ""; position: absolute; inset: 17px 24px; opacity: .55; background-image: linear-gradient(33deg, transparent 48%, #7caef0 49%, #7caef0 51%, transparent 52%), linear-gradient(-28deg, transparent 48%, #9cbfea 49%, #9cbfea 51%, transparent 52%); }
.visual-network i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #4d95ef; box-shadow: 0 0 0 5px rgba(74,147,235,.12); }
.visual-network i:nth-child(1) { left: 18%; top: 28%; }.visual-network i:nth-child(2) { left: 47%; top: 19%; }.visual-network i:nth-child(3) { left: 73%; top: 37%; }.visual-network i:nth-child(4) { left: 34%; top: 69%; }.visual-network i:nth-child(5) { left: 68%; top: 72%; }
.visual-bars { display: flex; align-items: end; justify-content: center; gap: 7px; padding-bottom: 16px; }
.visual-bars i { width: 17px; border-radius: 4px 4px 1px 1px; background: linear-gradient(#a8cbfb, #3a86e8); box-shadow: 0 8px 18px rgba(46,127,232,.15); }
.visual-bars i:nth-child(1) { height: 34px; }.visual-bars i:nth-child(2) { height: 51px; }.visual-bars i:nth-child(3) { height: 70px; }.visual-bars i:nth-child(4) { height: 87px; }
.visual-cubes { display: grid; place-items: center; }
.visual-cubes i { position: absolute; width: 37px; height: 37px; border: 1px solid #8fb9f1; background: linear-gradient(145deg, rgba(255,255,255,.95), #bcd7fb); transform: rotate(30deg) skew(-6deg); box-shadow: 10px 14px 20px rgba(33,111,214,.12); }
.visual-cubes i:nth-child(1) { left: 25%; top: 27%; }.visual-cubes i:nth-child(2) { left: 49%; top: 18%; }.visual-cubes i:nth-child(3) { left: 39%; top: 49%; }.visual-cubes i:nth-child(4) { left: 64%; top: 48%; }

.industry-cards { display: grid; grid-template-columns: repeat(7,1fr); gap: 9px; }
.industry-card { position: relative; min-width: 0; height: 154px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.industry-card img { display: block; width: 100%; height: 105px; object-fit: cover; filter: saturate(.88); transition: transform .5s ease, filter .5s ease; }
.industry-card:hover img { transform: scale(1.05); filter: saturate(1.04); }

.collaboration { display: grid; grid-template-columns: 1fr 360px; gap: 16px; padding-block: 34px 28px; }
.co-create-card, .contact-card { min-height: 235px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow); }
.co-create-card { position: relative; display: block; background: #fff; }
.co-create-copy { position: relative; z-index: 2; padding: 28px 32px; }
.card-label { display: flex; align-items: center; gap: 13px; margin: 0; font-weight: 700; }
.card-label > span { width: 28px; height: 3px; background: var(--blue); }
.card-label small { color: #8aa0bf; font-size: 9px; letter-spacing: .16em; }
.co-create-card h2 { margin: 19px 0 8px; font-size: clamp(25px, 2.2vw, 36px); letter-spacing: -.035em; }
.co-create-card p:not(.card-label) { margin: 0; color: #6680a4; font-size: 14px; line-height: 1.65; }
.co-create-display { display: inline-flex; min-width: 150px; align-items: center; justify-content: space-between; gap: 22px; margin-top: 15px; padding: 10px 15px 10px 20px; border-radius: 24px; color: #fff; background: var(--blue); font-size: 13px; font-weight: 700; user-select: none; }
.co-create-display svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wave-field { position: relative; overflow: hidden; }
.wave-field::before { content: ""; position: absolute; inset: 25% -8% -35% -10%; border-radius: 50%; background: radial-gradient(ellipse at 40% 70%, rgba(42,126,235,.18), transparent 62%); transform: rotate(-5deg); }
.wave-field i { position: absolute; left: -14%; width: 135%; height: 95px; border-radius: 50%; border-top: 2px solid rgba(40,115,224,.27); transform: rotate(-6deg); filter: drop-shadow(0 -4px 8px rgba(43,121,224,.07)); }
.wave-field i:nth-child(1) { top: 76px; }.wave-field i:nth-child(2) { top: 94px; left: -8%; transform: rotate(4deg); }.wave-field i:nth-child(3) { top: 111px; left: -18%; transform: rotate(-2deg); }.wave-field i:nth-child(4) { top: 129px; left: -6%; transform: rotate(7deg); }.wave-field i:nth-child(5) { top: 146px; left: -15%; transform: rotate(1deg); }
.contact-card { padding: 28px 31px; }
.contact-item { margin-top: 26px; }
.contact-item small { display: block; color: #8294ad; font-size: 13px; }
.contact-item strong { display: block; margin-top: 7px; color: var(--blue); font-size: 17px; font-weight: 700; }
.contact-item.international { padding-top: 19px; border-top: 1px solid var(--line); }

footer { height: 52px; display: flex; align-items: center; justify-content: center; gap: 14px; border-top: 1px solid var(--line); color: #91a1b7; background: white; font-size: 10px; letter-spacing: .15em; }
footer > span { width: min(34vw, 510px); height: 1px; background: var(--line); }

.film-dialog { position: fixed; z-index: 100; inset: 0; display: none; place-items: center; padding: clamp(12px, 3vw, 40px); background: rgba(0,8,22,.96); }
.film-dialog.is-open { display: grid; }
.film-stage { position: relative; width: min(100%, 1680px); }
.film-stage video { display: block; width: 100%; max-height: calc(100vh - 48px); border-radius: 16px; background: #000; box-shadow: 0 28px 90px rgba(0,0,0,.45); }
.film-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: white; background: rgba(3,18,43,.72); font-size: 26px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); }
.film-close:hover, .film-close:focus-visible { background: var(--blue); outline: none; }

@media (max-width: 1180px) {
  .header-inner, .shell { width: min(100% - 36px, 1040px); }
  .brand span { display: none; }
  .main-nav { gap: 25px; font-size: 17px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-block: 52px; }
  .hero-copy { max-width: 720px; }
  .hero-film { max-width: 900px; }
  .foundation-heading { grid-template-columns: 1fr; gap: 24px; }
  .foundation-intro { max-width: 760px; }
  .foundation-grid { grid-template-columns: 1fr; }
  .capability-block { padding-right: 0; padding-bottom: 28px; border-right: 0; border-bottom: 1px solid var(--line); }
  .industry-cards { grid-template-columns: repeat(4,1fr); }
  .collaboration { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-header { height: auto; }
  .header-inner { grid-template-columns: 1fr auto; padding-block: 14px; gap: 12px; }
  .brand strong { font-size: 17px; }
  .main-nav { grid-column: 1 / -1; order: 3; height: 42px; justify-content: space-between; font-size: 13px; }
  .login-preview { grid-column: 2; grid-row: 1; width: 68px; height: 38px; }
  .hero { gap: 38px; padding-block: 42px; }
  .hero h1 { font-size: 44px; }
  .hero-lead { font-size: 15px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .vision-link { margin-left: 8px; }
  .foundation-section .shell { padding-block: 45px; }
  .foundation-heading h2 { font-size: 34px; }
  .foundation-intro { padding-left: 20px; }
  .capability-cards { grid-template-columns: 1fr 1fr; }
  .industry-cards { grid-template-columns: 1fr 1fr; }
  .co-create-card { grid-template-columns: 1fr; }
  .co-create-copy { padding: 26px 22px 34px; }
  .co-create-card h2 { font-size: 27px; }
  .co-create-card p br { display: none; }
  .wave-field { display: none; }
  .contact-card { padding: 26px 22px; }
  .contact-item strong { font-size: 15px; }
  footer > span { width: 16vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

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