.saas-hero{
  position:relative;
  min-height:540px;
  display:grid;
  place-items:center;
  perspective:1200px;
  z-index:1;
  isolation:isolate;
}

.saas-glow{
  position:absolute;
  inset:0;
  border-radius:36px;
  background:
    radial-gradient(circle at 24% 24%,#62c7b04d 0,transparent 28%),
    radial-gradient(circle at 76% 62%,#7564ca2e 0,transparent 32%),
    linear-gradient(145deg,#f3faf7,#fbfcfc);
  filter:blur(8px);
  transform:rotate(-2deg) scale(.98);
  animation:heroGlow 8s ease-in-out infinite;
}

.saas-window{
  position:relative;
  width:min(560px,100%);
  border:1px solid #d7e6e1;
  border-radius:28px;
  background:linear-gradient(145deg,#ffffffee,#f7fbf9f5);
  box-shadow:0 32px 95px #17352f20;
  overflow:hidden;
  transform:rotate(.7deg);
  animation:commandFloat 7s ease-in-out infinite;
}

.saas-window:before{
  content:"";
  position:absolute;
  inset:46px 0 0;
  background:
    linear-gradient(90deg,transparent 49%,#87bfb42b 50%,transparent 51%),
    linear-gradient(0deg,transparent 49%,#87bfb42b 50%,transparent 51%);
  background-size:58px 58px;
  mask-image:linear-gradient(180deg,#000,transparent 78%);
  pointer-events:none;
  animation:gridDrift 14s linear infinite;
}

.saas-window:after{
  content:"";
  position:absolute;
  right:-80px;
  top:70px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:#62c7b01f;
  filter:blur(2px);
  pointer-events:none;
}

.saas-bar{
  position:relative;
  z-index:2;
  height:54px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  background:#102239;
  color:#fff;
}

.saas-bar span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#62c7b0;
  opacity:.9;
  animation:statusPulse 2.4s ease-in-out infinite;
}

.saas-bar span:nth-child(2){
  background:#9fb2c4;
  animation-delay:.35s;
}

.saas-bar span:nth-child(3){
  background:#7564ca;
  animation-delay:.7s;
}

.saas-bar b{
  margin-left:auto;
  font:800 12px "Manrope";
  letter-spacing:.02em;
}

.saas-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:12px;
  padding:18px;
}

.saas-card{
  min-height:132px;
  padding:20px;
  border:1px solid #dfe8e4;
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 45px #17352f10;
  transform:translateZ(0);
}

.saas-card:nth-child(2),
.saas-card:nth-child(3){
  animation:metricLift 6s ease-in-out infinite;
}

.saas-card:nth-child(3){
  animation-delay:1.1s;
}

.saas-card small{
  display:block;
  font-size:9px;
  letter-spacing:.14em;
  font-weight:900;
  color:#66766f;
}

.saas-card strong{
  display:block;
  margin-top:16px;
  font:900 34px/1 "Manrope";
  letter-spacing:-.06em;
  color:#102239;
}

.saas-card em{
  display:block;
  margin-top:8px;
  color:#39a88f;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}

.saas-main{
  grid-row:span 2;
  min-height:276px;
  background:linear-gradient(145deg,#102239,#17314e);
  color:#fff;
}

.saas-main small,
.saas-main strong{
  color:#fff;
}

.saas-main em{
  color:#7bd9c4;
}

.chart-bars{
  height:112px;
  margin-top:34px;
  display:flex;
  align-items:end;
  gap:10px;
}

.chart-bars i{
  flex:1;
  border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#75d5c0,#3aa98f);
  box-shadow:0 12px 28px #0715253d;
  transform-origin:bottom;
  animation:barBreathe 3.8s ease-in-out infinite;
}

.chart-bars i:nth-child(1){height:34%;animation-delay:.05s}
.chart-bars i:nth-child(2){height:58%;animation-delay:.35s}
.chart-bars i:nth-child(3){height:45%;animation-delay:.7s}
.chart-bars i:nth-child(4){height:78%;animation-delay:1s}
.chart-bars i:nth-child(5){height:64%;background:linear-gradient(180deg,#8f83dc,#7564ca);animation-delay:1.35s}
.chart-bars i:nth-child(6){height:92%;animation-delay:1.7s}

.saas-wide{
  grid-column:1/-1;
  min-height:142px;
}

.activity-lines{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.activity-lines span{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  border-radius:18px;
  background:#f3f8f6;
  color:#455852;
  animation:workflowSlide 6s ease-in-out infinite;
}

.activity-lines span b{
  grid-column:2;
  color:#2b5362;
  font:800 12px/1.2 "Manrope",sans-serif;
}

.activity-lines span em{
  display:none;
  color:#5f7580;
  font:700 10px/1.2 "DM Sans",sans-serif;
  font-style:normal;
}

.activity-lines span:nth-child(2){
  animation-delay:.8s;
}

.activity-lines span:nth-child(3){
  animation-delay:1.6s;
}

.activity-lines i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#58c4ac;
  box-shadow:0 0 0 6px #58c4ac1a;
  animation:dotPulse 2s ease-in-out infinite;
}

.command-message{
  position:relative;
  z-index:2;
  margin:0 18px 18px;
  padding:0 18px 18px;
  border:1px solid #d7e6e1;
  border-radius:18px;
  background:
    radial-gradient(circle at 10% 0,#62c7b026,transparent 42%),
    linear-gradient(145deg,#ffffff,#f1f8f5);
  box-shadow:0 18px 45px #17352f10;
}

.command-message span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:#2f8f79;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.command-message span:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#58c4ac;
  box-shadow:0 0 0 6px #58c4ac1a;
  animation:dotPulse 2.2s ease-in-out infinite;
}

.home-hero .hero-copy{
  position:relative;
  z-index:3;
}

@keyframes commandFloat{
  0%,100%{transform:rotate(.7deg) translateY(0)}
  50%{transform:rotate(.7deg) translateY(-10px)}
}

@keyframes heroGlow{
  0%,100%{opacity:.75;transform:rotate(-2deg) scale(.98)}
  50%{opacity:1;transform:rotate(-1deg) scale(1.02)}
}

@keyframes gridDrift{
  from{background-position:0 0,0 0}
  to{background-position:58px 0,0 58px}
}

@keyframes statusPulse{
  0%,100%{opacity:.55;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.08)}
}

@keyframes metricLift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@keyframes barBreathe{
  0%,100%{transform:scaleY(.9)}
  50%{transform:scaleY(1)}
}

@keyframes workflowSlide{
  0%,100%{transform:translateX(0);background:#f3f8f6}
  50%{transform:translateX(5px);background:#edf7f4}
}

@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 4px #58c4ac18}
  50%{box-shadow:0 0 0 8px #58c4ac22}
}

.command-message strong{
  display:block;
  max-width:430px;
  margin-top:12px;
  font:900 27px/1.08 "Manrope";
  letter-spacing:-.055em;
  color:#102239;
}

.command-message p{
  max-width:470px;
  margin:10px 0 0;
  color:#61706a;
  font-size:14px;
  line-height:1.55;
}

@media(max-width:900px){
  .saas-hero{
    min-height:auto;
    padding:25px 0 5px;
  }

  .saas-window{
    transform:none;
    animation:none;
  }
}

@media(max-width:600px){
  .saas-grid{
    grid-template-columns:1fr;
  }

  .saas-main,
  .saas-wide{
    grid-column:auto;
    grid-row:auto;
    min-height:auto;
  }

  .chart-bars{
    height:85px;
    margin-top:25px;
  }
}

@media(prefers-reduced-motion:reduce){
  .saas-glow,
  .saas-window,
  .saas-window:before,
  .saas-bar span,
  .saas-card,
  .chart-bars i,
  .activity-lines span,
  .activity-lines i,
  .command-message span:before{
    animation:none!important;
  }
}