/* ===============================================================
   v9 - the live-demo band takes the header's gradient.
   The page now alternates dark and paper instead of running one
   flat tone from the hero to the footer.
   ===============================================================*/

.sec.demo{
  background:linear-gradient(148deg,#080B26 0%,#151C55 26%,#2A5CC0 66%,#249EA8 100%);
  color:#fff;position:relative;overflow:hidden;isolation:isolate;
  padding:170px 0 180px;
}

/* the same drifting light as the hero */
.sec.demo .aura{position:absolute;inset:-20%;z-index:0;pointer-events:none}
.sec.demo .aura i{position:absolute;display:block;border-radius:50%;filter:blur(92px)}
.sec.demo .aura i:nth-child(1){width:44vmax;height:44vmax;top:-14vmax;right:-8vmax;opacity:.5;
  background:radial-gradient(circle,#3F7BE0,rgba(63,123,224,0) 68%);
  animation:demoA 40s ease-in-out infinite alternate}
.sec.demo .aura i:nth-child(2){width:38vmax;height:38vmax;bottom:-16vmax;left:-10vmax;opacity:.46;
  background:radial-gradient(circle,#1FA0AC,rgba(31,160,172,0) 68%);
  animation:demoB 50s ease-in-out infinite alternate}
.sec.demo .aura i:nth-child(3){width:26vmax;height:26vmax;top:44%;left:26%;opacity:.2;
  background:radial-gradient(circle,#F47822,rgba(244,120,34,0) 66%);
  animation:demoC 58s ease-in-out infinite alternate}
@keyframes demoA{to{transform:translate3d(-7vmax,6vmax,0) scale(1.14)}}
@keyframes demoB{to{transform:translate3d(7vmax,-5vmax,0) scale(.92)}}
@keyframes demoC{to{transform:translate3d(5vmax,-8vmax,0) scale(1.2)}}
@media (prefers-reduced-motion:reduce){.sec.demo .aura i{animation:none}}

/* the waves that join it to the paper above and below */
.sec.demo::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:150px;z-index:2;pointer-events:none;
  background:var(--paper);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,44 C1230,110 980,136 720,112 C460,88 220,22 0,68 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,44 C1230,110 980,136 720,112 C460,88 220,22 0,68 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.sec.demo::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:150px;z-index:2;pointer-events:none;
  background:var(--paper);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,76 C240,14 520,2 780,34 C1040,66 1250,128 1440,96 L1440,150 L0,150 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,76 C240,14 520,2 780,34 C1040,66 1250,128 1440,96 L1440,150 L0,150 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* hairlines go white on the dark ground */
.sec.demo .streams{z-index:1;opacity:.5}
.sec.demo .streams span:nth-child(1){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none'%3E%3Cpath d='M0,300 C300,120 700,90 1000,180 C1250,254 1420,340 1600,300' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2'/%3E%3Cpath d='M0,336 C300,156 700,126 1000,216 C1250,290 1420,376 1600,336' fill='none' stroke='%23A8E2E4' stroke-opacity='.42' stroke-width='2'/%3E%3C/svg%3E");
}
.sec.demo .streams span:nth-child(2){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none'%3E%3Cpath d='M0,140 C260,320 640,360 980,270 C1240,202 1430,110 1600,150' fill='none' stroke='%23ffffff' stroke-opacity='.44' stroke-width='2'/%3E%3Cpath d='M0,104 C260,284 640,324 980,234 C1240,166 1430,74 1600,114' fill='none' stroke='%23F47822' stroke-opacity='.34' stroke-width='2'/%3E%3C/svg%3E");
}

/* type inverts */
.sec.demo .sechead h2{color:#fff}
.sec.demo .sechead p{color:rgba(255,255,255,.76)}
.sec.demo .kicker{color:var(--aqua)}
.sec.demo .more{color:rgba(255,255,255,.6)}

/* the panels stay white and now genuinely lift off the ground */
.sec.demo .agents li{
  background:#fff;border-color:rgba(255,255,255,.14);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.85);
}
.sec.demo .agents li:hover{
  border-color:rgba(244,120,34,.7);
  box-shadow:0 44px 84px -34px rgba(0,0,0,.9);
}

@media (max-width:1000px){.sec.demo{padding:130px 0 140px}}

/* the white panels keep the light palette inside the dark band */
.sec.demo .agents li{color:var(--ink)}
.sec.demo .agents h3{color:var(--ink)}
.sec.demo .agents .desc{color:var(--slate)}
.sec.demo .agents .n{color:var(--slate)}
.sec.demo .agents .he{color:var(--orange)}
.sec.demo .agents .mod{color:var(--royal);background:rgba(42,92,192,.09)}

/* SAP partner lockup in the footer */
.foot-brand{display:flex;align-items:center;gap:16px}
.foot-brand .sapmark{height:26px;width:auto;display:block}
.foot-brand span{white-space:nowrap}
/* the assistant lockups read a touch larger */
.tools figcaption{font-size:16px}
.tools img{height:28px}
@media (max-width:640px){.foot-brand{gap:12px}.foot-brand .sapmark{height:22px}}