/* Soft gradient surfaces. Only opacity and the local light's transform change on input. */
:is(#about,#capabilities) {
  position:relative;
  isolation:isolate;
  overflow:clip;
  --cap-presence:0;
  --cap-aqua:.7;
  --cap-iris:.3;
  background:linear-gradient(130deg,#f2fafc 0%,#dbeff3 30%,#bddfeb 65%,#d9e1f5 100%);
}
:is(#about,#capabilities) > :not(.cap-atmosphere) {position:relative;z-index:1;}
#about .about-copy > p:not(.lead) {color:#3f6371;}
.cap-atmosphere {
  position:absolute;inset:0;z-index:0;overflow:hidden;
  contain:paint;pointer-events:none;user-select:none;
}
.cap-atmosphere > span {position:absolute;display:block;pointer-events:none;}
.cap-gradient-aqua,.cap-gradient-iris {
  inset:0;
  transition:opacity .8s cubic-bezier(.2,.65,.3,1);
}
.cap-gradient-aqua {
  background:
    radial-gradient(ellipse at 17% 15%,#eafff7 0%,transparent 60%),
    linear-gradient(128deg,#d5f5ec 5%,#98ddd9 54%,#b0dcf1 100%);
  opacity:calc(var(--cap-presence) * var(--cap-aqua));
}
.cap-gradient-iris {
  background:
    radial-gradient(ellipse at 80% 18%,#ecedff 0%,transparent 63%),
    linear-gradient(128deg,#e9f4ff 0%,#b9d4ef 42%,#bcbcea 80%,#dce0f8 100%);
  opacity:calc(var(--cap-presence) * var(--cap-iris));
}
.cap-gradient-halo {
  width:720px;height:720px;left:0;top:0;border-radius:50%;
  background:radial-gradient(ellipse at center,#ffffffa8 0%,#e7fff979 23%,#b5e9eb30 47%,transparent 70%);
  transform:translate3d(var(--cap-x,65%),var(--cap-y,0px),0) translate(-50%,-50%);
  opacity:var(--cap-presence);
  transition:transform .28s ease-out,opacity .75s ease;
}
:is(#about,#capabilities).cap-gradient-interacting {--cap-presence:1;}
#capabilities .cap-card {
  background:linear-gradient(145deg,#ffffffe5,#f5fcfbd1);
  border-color:#ffffffb8;
  box-shadow:0 14px 38px #255b730b,inset 0 1px 0 #ffffffeb;
}
#capabilities .cap-card.cap-feature {
  background:linear-gradient(145deg,#e9faf8ed,#f1fbfbd9);
  border-color:#93c9d1c9;
}
@media(max-width:760px) {
  :is(#about,#capabilities) {background:linear-gradient(155deg,#eef9fa 0%,#c1e4ed 43%,#d5dcf1 75%,#e4f1f6 100%);}
  .cap-gradient-halo {width:460px;height:460px;transition:transform .16s ease-out,opacity .7s ease;}
  #capabilities .cap-card {background:linear-gradient(125deg,#fffffff0,#f3fbfae6);}
}
@media(prefers-reduced-motion:reduce) {
  .cap-gradient-halo {display:none;}
  .cap-gradient-aqua,.cap-gradient-iris {transition:opacity .15s linear;}
}
@media(forced-colors:active) {.cap-atmosphere {display:none;}}