/* Atmospheric layers stay behind the existing content and never capture input. */
body {
  background:
    radial-gradient(ellipse 75% 750px at 92% 280px, #68549a47, transparent 74%),
    radial-gradient(ellipse 55% 680px at 0% 920px, #394f7538, transparent 75%),
    radial-gradient(ellipse 70% 540px at 65% 1550px, #70608a22, transparent 75%),
    #161826;
}

main { position: relative; isolation: isolate; }
main::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 0 auto;
  height: 1060px;
  background-image:
    linear-gradient(#c9b6f00b 1px, transparent 1px),
    linear-gradient(90deg, #c9b6f00b 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 72% 70% at 77% 28%, #000, transparent 85%);
}

.site-header {
  background: #161826d9;
  border-bottom-color: #a592cc16;
}

.hero { isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 35% 55% at 76% 42%, #ab84cf20, transparent 90%),
    radial-gradient(ellipse 30% 60% at 95% 16%, #9184d920, transparent 90%);
}
.motion-halo {
  background: radial-gradient(ellipse, #9d80cf49, #8063a725 44%, transparent 71%);
}
.motion-orbit {
  border-color: #bfa4e42b;
  box-shadow: 0 0 0 43px #bfa4e406, 0 0 0 44px #bfa4e412,
    0 0 0 88px #bfa4e404, 0 0 0 89px #bfa4e40a;
}
.ability-ribbon {
  background: linear-gradient(90deg, transparent, #b59ac00b 50%, transparent);
  border-color: #ad95ce24;
}
.demo-section { position: relative; isolation: isolate; }
.demo-section::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: 70px 0 0;
  background: radial-gradient(ellipse at 50% 54%, #8a6cbb36, transparent 72%);
}
.product-window {
  box-shadow: 0 38px 100px #05061065, 0 0 65px #9b81c416;
  outline: 1px solid #c2abea20;
  outline-offset: 7px;
}

.work-section {
  background:
    radial-gradient(ellipse at 4% 0%, #75628f2e, transparent 58%),
    radial-gradient(ellipse at 96% 100%, #40496b2b, transparent 54%),
    #1b1d2d;
  border-block-color: #ad94c923;
}
.abilities {
  background: radial-gradient(ellipse at 86% 55%, #62547919, transparent 68%);
}
.ability-card {
  background-color: #212334;
  background-image: linear-gradient(135deg, #b4a0db08, transparent 65%);
}

.anywhere {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 8% 0%, #f6ede3 0%, transparent 51%),
    radial-gradient(ellipse at 95% 75%, #cfc2ea 0%, transparent 56%),
    #ecebf1;
}
.anywhere::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(#6c5b8a26 .7px, transparent .9px);
  background-size: 16px 16px;
  mask-image: linear-gradient(90deg, transparent 38%, #000);
}
.principle {
  background:
    radial-gradient(ellipse at 50% 44%, #7d639f35, transparent 68%);
}
.closing {
  background: radial-gradient(ellipse at 78% 100%, #9071b32b, transparent 72%);
  border-top-color: #b29acd33;
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(ellipse 140% 670px at 100% 510px, #68549a3d, transparent 76%),
      radial-gradient(ellipse 140% 600px at 0% 1360px, #394f752b, transparent 76%),
      #161826;
  }
  main::before { height: 1130px; background-size: 48px 48px; }
  .motion-orbit { box-shadow: 0 0 0 25px #bfa4e405, 0 0 0 26px #bfa4e413; }
  .product-window { outline-offset: 4px; }
}