/* One sizing system per section. Short windows scroll instead of squeezing
   the content; the robot scales with the hero rather than the screen width. */
:root {
  --page-inset:clamp(22px,4.583333vw,88px);
  --hero-height:clamp(460px,58.333333svh,690px);
  --card-height:clamp(280px,31.574074svh,360px);
  --card-gap:clamp(12px,.833333vw,16px);
  --ecosystem-gap:clamp(32px,4.166667vw,80px);
}
body {overflow-x:clip}
.ecosystem-title {margin:0;font-size:22px;line-height:1.2;padding-left:12px;position:relative;color:#fff}
.ecosystem-title:before {content:"";position:absolute;left:0;top:0;width:3px;height:1.2em;background:var(--cyan)}
.hero-copy>.eyebrow,.hero-actions,.hero-footer,.visual-label {display:none}
.hero-grid {display:none}
.hero-signature.signature-cn {display:block;z-index:1}

@media (min-width:761px) {
  .header {position:absolute;top:clamp(48px,8.98svh,96px);left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:1920px;height:56px;padding:0 var(--page-inset);margin:0;gap:32px}
  .header nav {position:static;flex:0 1 auto;width:min(38.541667vw,740px);margin:0 3%;gap:24px;justify-content:space-between}
  .header nav a,.header nav button {font-size:clamp(14px,1.04vw,18px);padding:8px 0}
  .header .brand-symbol {width:clamp(40px,2.92vw,56px);height:clamp(40px,2.92vw,56px)}
  .header .brand-wordmark {width:clamp(126px,9.375vw,180px)}
  .header-code {display:flex;margin-left:auto;font-size:clamp(10px,.833333vw,14px)}
  .site-frame {inset:18px 24px auto;font-size:8px}
  .site-frame:before,.site-frame:after {height:calc(var(--hero-height) + var(--card-height) - 50px)}
  .hero {height:var(--hero-height);max-width:1920px;margin:0 auto;padding:calc(var(--hero-height)*.44) var(--page-inset) 0;overflow:hidden}
  .hero-copy {width:62%;z-index:3}
  .hero h1 {font-size:clamp(42px,4.05vw,76px);line-height:1.12;letter-spacing:-.035em;margin:0 0 12px;white-space:nowrap}
  .hero-copy>p {font-size:clamp(13px,1.04vw,17px);max-width:650px;line-height:1.65}
  .slide-controls {margin-top:22px;gap:8px}
  .slide-controls button {width:12px;height:12px}
  .slide-controls .hero-play-toggle {width:20px;height:18px}
  .hero-signature.signature-cn {left:clamp(400px,34.375vw,660px);top:12px;width:clamp(250px,20.833333vw,400px)}
  .hero-visual {inset:0;width:100%;height:100%;overflow:hidden}
  .hero-art {position:absolute;left:78%;top:-12px;right:auto;bottom:auto;width:min(73.541667vw,calc(var(--hero-height)*1.78));height:auto;max-width:none;transform:translateX(-46%);object-fit:contain;object-position:center}
  .solutions {height:auto;padding:0 var(--page-inset);position:relative}
  .section-top {position:absolute;left:50%;right:auto;top:-40px;transform:translateX(-50%);width:calc(100% - var(--page-inset)*2);max-width:1744px;height:32px;margin:0;display:block}
  .section-top h2 {position:relative;top:auto;left:auto;font-size:clamp(20px,1.458333vw,26px);line-height:1.2;padding-left:12px;color:#111}
  .section-top h2:before {top:0;width:3px;height:1.2em}
  .section-top>span {display:none}
  .capability-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.1fr);gap:var(--card-gap);max-width:1744px;margin:0 auto;height:auto}
  .feature-card {height:var(--card-height);padding:36px clamp(14px,.9375vw,20px);min-width:0}
  .feature-card .card-no {top:12px;left:clamp(14px,.9375vw,20px);font-size:9px}
  .feature-card h3 {font-size:clamp(27px,2.291667vw,40px);margin:0;line-height:1.2;letter-spacing:-.03em}
  .feature-ai-editing h3 {font-size:clamp(24px,1.979167vw,36px)}
  .card-sub {font-size:clamp(10px,.729167vw,13px);margin-top:4px;line-height:1.5}
  .card-bottom {left:clamp(14px,.833333vw,20px);right:14px;bottom:18px}
  .card-bottom strong {font-size:clamp(19px,1.5625vw,27px);line-height:1.25}
  .card-arrow {width:28px;height:28px;font-size:20px;flex-shrink:0}
  .data-stream {font-size:clamp(7px,.520833vw,10px);letter-spacing:.5px}
  .operator-grid {position:relative;grid-column:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin:0 0 0 var(--ecosystem-gap);height:var(--card-height)}
  .ecosystem-title {position:absolute;left:0;top:-40px;font-size:clamp(20px,1.458333vw,26px);text-shadow:0 1px 7px #0008}
  .operator-card {display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;height:100%;padding:36px 12px 0}
  .operator-no {font-size:9px;top:13px;right:9px}
  .tool-card h3 {font-size:clamp(18px,1.458333vw,26px);min-height:2.4em;margin:0;line-height:1.2;white-space:normal}
  .operator-card>p {font-size:clamp(10px,.729167vw,12px);margin:4px 0 0}
  .operator-art {position:absolute;top:47%;left:8%;right:0;margin:0;height:32%;width:auto}
  .operator-footer {position:absolute;left:8%;right:6%;bottom:14px;margin:0;font-size:clamp(11px,.9375vw,16px);line-height:1.32}
  .operator-footer>span {font-size:18px}
  .solution-bottom {position:relative;left:auto;right:auto;bottom:auto;height:auto;min-height:56px;max-width:none;padding:12px var(--page-inset);margin:42px calc(var(--page-inset)*-1) 0;background:#0b0c0d}
  .solution-bottom>span {font-size:9px}
  .solution-bottom>p,.solution-bottom button {font-size:11px}
}

/* Tablet and smaller laptops: ecosystem cards move onto their own row. */
@media (min-width:761px) and (max-width:1279px) {
  :root {--hero-height:clamp(450px,60svh,580px);--card-height:320px}
  .header {gap:24px}
  .header nav {flex:1;width:auto;margin:0;gap:24px}
  .header-code {display:none}
  .hero-copy {width:75%}
  .hero h1 {font-size:clamp(38px,4.25vw,52px)}
  .hero-copy>p {max-width:430px}
  .hero-signature.signature-cn {left:0;top:145px;width:235px}
  .hero-art {left:82%;top:calc(clamp(48px,8.98svh,96px) + 72px);width:min(80vw,calc(var(--hero-height)*1.38))}
  .capability-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .feature-card {height:var(--card-height)}
  .operator-grid {grid-column:1/-1;height:auto;margin:24px 0 0;gap:12px}
  .ecosystem-title {position:relative;top:auto;grid-column:1/-1;margin:0 0 4px;text-shadow:none}
  .operator-card {height:260px;padding-top:30px}
  .tool-card h3 {font-size:21px}
  .operator-footer {font-size:13px}
  .solution-bottom {margin-top:32px}
}

@media (max-width:760px) {
  .header {position:relative;top:auto;left:auto;right:auto;transform:none;height:96px;padding:28px 6% 10px;margin:auto;gap:20px}
  .header .brand-symbol {width:38px;height:38px}
  .header .brand-wordmark {width:116px}
  .header nav {z-index:10;top:84px}
  .header-code {display:none}
  .hero {height:620px;padding:24px 6% 0;overflow:hidden;scroll-margin-top:96px}
  .hero-copy {width:100%}
  #hero-title {font-size:clamp(30px,10.1vw,48px);margin:0 0 12px;letter-spacing:-.04em;line-height:1.18;white-space:nowrap}
  .hero-copy>p {max-width:100%;font-size:13px;line-height:1.7}
  .slide-controls {margin-top:18px}
  .hero-signature.signature-cn {left:0;top:145px;width:210px}
  .hero-visual {inset:auto 0 0;height:420px;width:100%;overflow:hidden}
  .hero-art {position:absolute;left:50%;right:auto;top:auto;bottom:0;width:min(130vw,650px);height:auto;max-width:none;transform:translateX(-46%);object-fit:contain}
  .solutions {height:auto;padding:0 6%}
  .section-top {position:relative;top:auto;left:auto;right:auto;transform:none;width:auto;height:62px;display:flex;align-items:center;margin:0}
  .section-top h2 {font-size:21px;padding-left:12px}
  .section-top>span {display:none}
  .capability-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;height:auto}
  .feature-card {height:300px;padding:38px 14px 18px}
  .feature-card h3 {margin:0;font-size:27px;letter-spacing:-.03em}
  .feature-ai-editing h3 {font-size:22px}
  .card-sub {font-size:10px;line-height:1.55;max-width:145px}
  .card-bottom strong {font-size:19px}
  .operator-grid {position:relative;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;margin:22px 0 0;gap:12px}
  .ecosystem-title {grid-column:1/-1;font-size:21px;margin:0 0 6px}
  .operator-card {display:flex;flex-direction:column;height:270px;padding:30px 14px 16px}
  .tool-card h3 {font-size:20px;margin:0;min-height:2.4em}
  .operator-card>p {font-size:11px;margin-top:5px}
  .operator-art {position:absolute;left:8%;right:0;top:47%;width:auto;height:32%;margin:0}
  .operator-footer {position:absolute;left:8%;right:7%;bottom:15px;margin:0;font-size:12px;line-height:1.4}
  .solution-bottom {margin:30px -6.818182% 0;padding:18px 6.818182%;max-width:none;background:#0b0c0d}
}

@media (max-width:540px) {
  .capability-grid {grid-template-columns:minmax(0,1fr);gap:18px}
  .feature-card {height:340px;padding:38px 20px 20px}
  .feature-card .card-no {left:20px}
  .feature-card h3 {font-size:34px}
  .feature-ai-editing h3 {font-size:29px}
  .card-sub {max-width:200px;font-size:11px}
  .card-bottom {left:20px;right:18px;bottom:20px}
  .card-bottom strong {font-size:23px}
  .collection-robot {height:118%;bottom:-3%;right:0;width:100%;overflow:hidden;clip-path:inset(0 0 2.5% 0)}
  .collection-figure {left:65%;max-width:none;contain:paint}
  .data-stream {font-size:8px;width:76%;letter-spacing:.4px}
  .operator-grid {gap:10px}
  .tool-card h3 {font-size:clamp(16px,5vw,20px)}
  .operator-footer {font-size:11px}
}

@media (max-width:360px) {
  .hero-signature.signature-cn {top:155px;width:190px}
  .feature-ai-editing h3 {font-size:26px}
  .card-bottom strong {font-size:21px}
  .operator-card {height:260px;padding-left:10px;padding-right:10px}
}