/* Set 052 — dedicated cloud-layer composition */
:root{
  --cloud-fog:#f8f6ff;
  --cloud-white:#ffffff;
  --cloud-violet:#7c3aed;
  --cloud-violet-bright:#9b6dff;
  --cloud-grape:#28113f;
  --cloud-grape-soft:#4a2865;
  --cloud-sky:#5fc8ff;
  --cloud-lilac:#e9ddff;
  --cloud-mist:#f0ebf8;
  --cloud-ink-muted:#6c5c78;
  --cloud-line:rgba(66,30,93,.17);
  --cloud-display:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --cloud-body:"Segoe UI","Microsoft YaHei UI",sans-serif;
}

body.cloud-home{
  margin:0;
  color:var(--cloud-grape);
  background:var(--cloud-fog);
  font-family:var(--cloud-body);
  line-height:1.72;
  overflow-x:clip;
}

.cloud-home::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%,rgba(155,109,255,.18),transparent 24rem),
    radial-gradient(circle at 88% 30%,rgba(95,200,255,.15),transparent 25rem),
    linear-gradient(180deg,#fbfaff 0%,#f6f1ff 42%,#faf9ff 100%);
}

.cloud-home a{color:inherit}
.cloud-home .cloud-shell{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}

.cloud-home .site-header{
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid rgba(67,33,91,.12);
  background:rgba(248,246,255,.86);
  backdrop-filter:blur(18px);
}

.cloud-home .nav{min-height:72px}
.cloud-home .brand{color:var(--cloud-grape)}
.cloud-home .nav-links a{color:var(--cloud-grape-soft)}
.cloud-home .nav-links a:hover{color:var(--cloud-violet)}
.cloud-home .cta,
.cloud-home .cloud-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:140px;
  min-height:50px;
  padding:0 24px;
  border:1px solid var(--cloud-violet);
  border-radius:999px;
  color:#fff;
  background:var(--cloud-violet);
  box-shadow:0 12px 30px rgba(93,43,171,.24);
  font-weight:800;
  white-space:nowrap;
  word-break:keep-all;
  writing-mode:horizontal-tb;
  transition:transform .2s ease,box-shadow .2s ease;
}

.cloud-home .cta:hover,
.cloud-home .cloud-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(93,43,171,.3);
}

.cloud-home a:focus-visible,
.cloud-home summary:focus-visible{
  outline:3px solid var(--cloud-sky);
  outline-offset:4px;
}

.cloud-hero{padding:clamp(58px,8vw,112px) 0 clamp(88px,11vw,150px)}
.hero-intro{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  column-gap:clamp(42px,8vw,118px);
  align-items:end;
  margin-bottom:clamp(52px,7vw,92px);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  color:var(--cloud-violet);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
}

.eyebrow span{
  width:28px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cloud-violet),var(--cloud-sky));
}

.hero-intro .eyebrow{grid-column:1/-1}
.hero-intro h1{
  max-width:10.5ch;
  margin:0;
  font-family:var(--cloud-display);
  font-size:clamp(50px,7vw,92px);
  font-weight:900;
  line-height:.99;
  letter-spacing:-.065em;
}

.hero-lead{
  max-width:560px;
  margin:0 0 28px;
  color:var(--cloud-ink-muted);
  font-size:clamp(16px,1.7vw,19px);
}

.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.hero-actions span{color:var(--cloud-ink-muted);font-size:12px;font-weight:700}

.cloud-section-map{
  position:relative;
  width:min(940px,100%);
  margin-inline:auto;
}

.map-caption{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-bottom:15px;
  color:var(--cloud-ink-muted);
  font-size:12px;
}

.map-caption strong{color:var(--cloud-grape);letter-spacing:.12em}
.device-entry{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  min-height:84px;
  padding:16px 24px;
  border:1px solid rgba(86,43,119,.14);
  border-radius:44px 44px 24px 24px;
  background:rgba(255,255,255,.92);
  box-shadow:0 22px 70px rgba(78,38,103,.09);
}

.device-entry>span,
.route-title>span,
.layer-label>span{font-weight:900}
.device-pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.device-pills b{
  padding:9px 15px;
  border-radius:999px;
  color:var(--cloud-grape-soft);
  background:var(--cloud-mist);
  font-size:12px;
}

.cloud-bridge{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:90px;
  height:72px;
  margin:-2px auto;
  overflow:hidden;
}

.cloud-bridge::before,
.cloud-bridge::after{
  content:"";
  position:absolute;
  top:22px;
  width:55%;
  height:68px;
  border-radius:50%;
  background:#eee5ff;
}
.cloud-bridge::before{left:-7%}
.cloud-bridge::after{right:-7%;background:#e8f6ff}
.cloud-bridge i{
  z-index:1;
  width:2px;
  height:100%;
  background:linear-gradient(var(--cloud-violet),rgba(124,58,237,.12));
}

.client-layer{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  align-items:center;
  gap:38px;
  min-height:390px;
  padding:42px 54px;
  border:1px solid rgba(80,38,111,.16);
  border-radius:76px 30px 76px 30px;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(243,237,255,.96));
  box-shadow:0 32px 90px rgba(68,30,96,.13);
}

.layer-label{align-self:start;padding-top:28px}
.layer-label::after{
  content:"";
  display:block;
  width:64px;
  height:2px;
  margin-top:18px;
  background:linear-gradient(90deg,var(--cloud-violet),var(--cloud-sky));
}
.layer-label small{display:block;margin-top:8px;color:var(--cloud-ink-muted)}

.cloud-client-visual{
  align-self:center;
  height:auto;
  margin:0;
  padding:0;
  overflow:visible;
  transform:none;
}

.route-orchestration{
  position:relative;
  z-index:2;
  margin:-24px 42px 0;
  padding:60px 40px 28px;
  border-radius:0 0 52px 52px;
  color:#fff;
  background:var(--cloud-grape);
  box-shadow:0 28px 60px rgba(40,17,63,.2);
}

.route-title{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}
.route-title small{color:#cdb9dc}
.route-lanes{display:grid;gap:11px}
.route-lanes i{
  position:relative;
  display:block;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  overflow:hidden;
}
.route-lanes i em{
  display:block;
  width:72%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--cloud-violet-bright),var(--cloud-sky));
}
.route-lanes i:nth-child(2) em{width:88%}
.route-lanes i:nth-child(3) em{width:58%}
.route-labels{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;color:#d8c9e3;font-size:11px}
.route-labels span:nth-child(2){text-align:center}
.route-labels span:last-child{text-align:right}

.orchestration{padding:clamp(86px,11vw,150px) 0;background:rgba(255,255,255,.55)}
.band-heading{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:12px 70px;
  margin-bottom:56px;
}
.band-heading .eyebrow{grid-column:1/-1}
.band-heading h2,
.ribbon-copy h2,
.principles-layout h2,
.stream-heading h2,
.faq-band h2,
.final-band h2{
  margin:0;
  font-family:var(--cloud-display);
  font-size:clamp(34px,4.8vw,62px);
  line-height:1.08;
  letter-spacing:-.045em;
}
.band-heading>p:last-child{max-width:590px;margin:6px 0 0;color:var(--cloud-ink-muted)}

.swimlanes{border-top:1px solid var(--cloud-line)}
.swimlanes article{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 140px;
  gap:30px;
  align-items:center;
  min-height:128px;
  padding:24px 10px;
  border-bottom:1px solid var(--cloud-line);
  transition:padding .2s ease,background .2s ease;
}
.swimlanes article:hover{padding-inline:24px;background:rgba(235,224,255,.46)}
.lane-index{color:var(--cloud-violet);font-size:12px;font-weight:900;letter-spacing:.16em}
.swimlanes h3{margin:0 0 4px;font-size:22px}
.swimlanes p{max-width:640px;margin:0;color:var(--cloud-ink-muted)}
.swimlanes b{
  justify-self:end;
  min-width:110px;
  padding:9px 14px;
  border-radius:999px;
  color:var(--cloud-grape-soft);
  background:var(--cloud-lilac);
  font-size:12px;
  text-align:center;
}

.client-ribbon{
  position:relative;
  padding:clamp(90px,12vw,164px) 0;
  overflow:hidden;
  background:linear-gradient(110deg,#291340 0 48%,#492166 48% 100%);
  color:#fff;
}
.client-ribbon::before{
  content:"";
  position:absolute;
  right:-10%;
  bottom:-45%;
  width:56%;
  aspect-ratio:1.7;
  border-radius:50%;
  background:rgba(95,200,255,.14);
}
.ribbon-layout{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:clamp(50px,9vw,130px)}
.ribbon-copy{position:relative;z-index:2}
.ribbon-copy .eyebrow{color:#c6a8ff}
.ribbon-copy p:not(.eyebrow){margin:24px 0;color:#d9cde1}
.inline-link{display:inline-flex;gap:12px;align-items:center;font-weight:800}
.inline-link span{color:var(--cloud-sky);font-size:22px}

.device-visual{
  position:relative;
  z-index:1;
  align-self:center;
  height:auto;
  margin:0;
  padding:0;
  overflow:visible;
  transform:none;
}

.cloud-principles{padding:clamp(90px,12vw,170px) 0}
.principles-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(48px,9vw,128px)}
.principles-layout header{position:sticky;top:120px;align-self:start}
.principle-bars{list-style:none;margin:0;padding:0;border-top:1px solid var(--cloud-line)}
.principle-bars li{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:28px;
  padding:32px 0;
  border-bottom:1px solid var(--cloud-line);
}
.principle-bars span{font-weight:900}
.principle-bars p{margin:0;color:var(--cloud-ink-muted)}

.insight-stream{padding:clamp(84px,10vw,140px) 0;background:#eee7fa}
.stream-heading{display:grid;grid-template-columns:.7fr 1.3fr;gap:20px 60px;margin-bottom:50px}
.stream-heading .eyebrow{grid-column:1/-1}
.stream{border-top:1px solid rgba(66,30,93,.22)}
.stream a{
  display:grid;
  grid-template-columns:140px 1fr 130px;
  gap:28px;
  align-items:center;
  padding:30px 8px;
  border-bottom:1px solid rgba(66,30,93,.22);
}
.stream a:hover strong{color:var(--cloud-violet)}
.stream small{color:var(--cloud-violet);font-weight:900}
.stream strong{font-size:clamp(18px,2.2vw,26px);transition:color .2s ease}
.stream span{text-align:right;font-size:13px;font-weight:800}

.cloud-faq{padding:clamp(90px,12vw,166px) 0}
.faq-band{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(50px,9vw,124px)}
.faq-lines{border-top:1px solid var(--cloud-line)}
.faq-lines details{
  padding:0;
  border:0;
  border-bottom:1px solid var(--cloud-line);
  border-radius:0;
  background:transparent;
}
.faq-lines summary{
  position:relative;
  padding:24px 38px 24px 0;
  color:var(--cloud-grape);
  font-size:17px;
  font-weight:900;
}
.faq-lines summary::after{content:"+";position:absolute;right:4px;color:var(--cloud-violet);font-size:24px}
.faq-lines details[open] summary::after{content:"–"}
.faq-lines p{max-width:650px;margin:0 0 28px;color:var(--cloud-ink-muted)}

.cloud-final{padding:0 0 90px}
.final-band{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
  padding:clamp(38px,6vw,72px);
  border-radius:70px 24px 70px 24px;
  overflow:hidden;
  color:#fff;
  background:var(--cloud-violet);
}
.final-band::before,
.final-band::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.1);
}
.final-band::before{width:260px;height:100px;right:18%;top:-55px}
.final-band::after{width:190px;height:80px;right:3%;bottom:-48px}
.final-band>div,.final-band>a{position:relative;z-index:1}
.final-band p{margin:0 0 8px;color:#eaddff}
.final-band h2{max-width:16ch}
.cloud-home .cloud-button-light{border-color:#fff;color:var(--cloud-grape);background:#fff;box-shadow:none}

.cloud-home .site-footer{
  margin-top:0;
  border-color:rgba(66,30,93,.14);
  background:#e9e1f2;
}
.cloud-home .site-footer h2,
.cloud-home .site-footer h3{color:var(--cloud-grape)}
.cloud-home .footer-grid p,
.cloud-home .footer-grid a,
.cloud-home .copyright{color:var(--cloud-grape-soft)}

@media(max-width:900px){
  .hero-intro,
  .band-heading,
  .ribbon-layout,
  .principles-layout,
  .stream-heading,
  .faq-band{grid-template-columns:1fr}
  .hero-intro{align-items:start}
  .hero-lead{margin-top:24px}
  .client-layer{grid-template-columns:1fr;padding:38px}
  .layer-label{padding-top:0}
  .principles-layout header{position:static}
  .ribbon-copy{max-width:680px}
  .device-visual{max-width:760px;justify-self:center}
}

@media(max-width:680px){
  .cloud-home .cloud-shell{width:min(100% - 24px,1180px)}
  .cloud-hero{padding-top:42px}
  .hero-intro h1{font-size:clamp(44px,15vw,66px)}
  .map-caption{display:block}
  .map-caption span{display:block;margin-top:5px}
  .device-entry{grid-template-columns:1fr;gap:14px;padding:20px;border-radius:30px 30px 18px 18px}
  .device-pills{justify-content:flex-start}
  .cloud-bridge{gap:42px}
  .client-layer{padding:26px 18px;border-radius:42px 20px}
  .route-orchestration{margin:-16px 8px 0;padding:48px 18px 24px;border-radius:0 0 32px 32px}
  .route-title{display:block}
  .route-title small{display:block;margin-top:4px}
  .swimlanes article{grid-template-columns:70px 1fr;gap:16px;padding-block:24px}
  .swimlanes b{grid-column:2;justify-self:start}
  .client-ribbon{background:linear-gradient(155deg,#291340 0 56%,#492166 56% 100%)}
  .principle-bars li{grid-template-columns:1fr;gap:8px}
  .stream a{grid-template-columns:1fr;gap:8px}
  .stream span{text-align:left}
  .final-band{grid-template-columns:1fr;border-radius:44px 18px;padding:34px 24px}
  .cloud-home .cloud-button-light{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .cloud-home *{scroll-behavior:auto!important;transition:none!important}
}

/* Mandatory natural-ratio media safety — keep as final override */
.cloud-home .cloud-section-map{align-items:center}
.cloud-home .cloud-client-visual,
.cloud-home .device-visual{
  align-self:center;
  height:auto;
  min-height:0;
  max-height:none;
  margin-top:0;
  margin-bottom:0;
  padding:0;
  overflow:visible;
  clip-path:none;
  transform:none;
}
.cloud-home .cloud-client-visual img,
.cloud-home .device-visual img{
  display:block;
  width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  max-height:none;
  margin:0;
  padding:0;
  object-fit:contain;
  object-position:center;
  clip-path:none;
  transform:none;
}