.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--brand-blue-a), var(--brand-blue-b));
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.hero::before {
  right: -150px;
  bottom: 30px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(43, 63, 197, 0.55) 0%, rgba(43, 63, 197, 0.18) 58%, rgba(43, 63, 197, 0) 72%);
}

.hero::after {
  left: -180px;
  top: 100px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 72%);
}

.hero-gold {
  background: linear-gradient(100deg, #f2bb62, #f2d86a);
}

.hero-dark {
  background: linear-gradient(90deg, #031726, #375f7b);
}

.hero-grid {
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  align-items: center;
  gap: 3.5rem;
  position: relative;
  z-index: 2;
  padding: 36px 0 150px;
}

.hero-copy {
  color: var(--white);
  max-width: 590px;
}

.hero-copy h2 {
  margin: 0;
  font-size: clamp(3.6rem, 5vw, 5.25rem);
  line-height: 1.12;
  font-weight: 700;
}

.hero-copy p {
  margin: 1.6rem 0 0;
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 2;
  max-width: 33rem;
}

.hero-visual {
  height: 560px;
  position: relative;
}

.hero-visual::before {
  content: "";
  position: absolute;
  right: -2%;
  bottom: 0;
  width: 100%;
  height: 86%;
  border-radius: 54% 46% 0 0;
  background: linear-gradient(145deg, rgba(49, 63, 197, 0.92), rgba(34, 92, 222, 0.58));
}

.server-stack {
  position: absolute;
  right: 18px;
  bottom: 24px;
  display: grid;
  gap: 12px;
  animation: drift 4.4s ease-in-out infinite;
}

.server-stack.soft .rack {
  opacity: 0.64;
}

.rack {
  width: 326px;
  height: 72px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(54, 64, 212, 0.95), rgba(16, 20, 117, 0.95));
  box-shadow: inset -10px 0 0 rgba(0, 0, 0, 0.22);
  opacity: 0.94;
}

.glass-card {
  position: absolute;
  left: 24px;
  bottom: 162px;
  width: 60%;
  height: 34%;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18));
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 24px 40px rgba(18, 30, 96, 0.16);
}

.glass-card::before,
.glass-card::after {
  content: "";
  position: absolute;
}

.glass-card::before {
  top: 10px;
  left: 14px;
  width: 54px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 18px 0 0 rgba(255, 255, 255, 0.58), 36px 0 0 rgba(255, 255, 255, 0.48);
}

.glass-card::after {
  inset: 52px 16% 14% 16%;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(149, 245, 221, 0.75), rgba(126, 210, 245, 0.32));
  clip-path: polygon(0 72%, 21% 52%, 38% 64%, 70% 26%, 100% 0, 100% 100%, 0 100%);
}

.laptop {
  position: absolute;
  left: 120px;
  bottom: 20px;
  width: 58%;
  height: 35%;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(236, 251, 255, 0.88), rgba(183, 224, 255, 0.68));
  box-shadow: 0 20px 35px rgba(5, 12, 78, 0.28);
}

.laptop::before,
.laptop::after {
  content: "";
  position: absolute;
}

.laptop::before {
  inset: 10px 10px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.95), rgba(209, 234, 255, 0.9));
}

.laptop::after {
  left: -10%;
  right: -10%;
  bottom: -14px;
  height: 16px;
  border-radius: 999px 999px 14px 14px;
  background: linear-gradient(180deg, #a6d6ff, #6baef2);
}

.visual-doc::before {
  background: linear-gradient(145deg, rgba(39, 68, 198, 0.92), rgba(45, 144, 233, 0.75));
}

.device-panel,
.lock-card,
.stack-slim {
  position: absolute;
  border-radius: 14px;
}

.device-panel {
  width: 52%;
  height: 44%;
  left: 8%;
  bottom: 12%;
  background: linear-gradient(180deg, #e4eef7, #a3bdd8);
}

.lock-card {
  width: 34%;
  height: 29%;
  right: 3%;
  bottom: 18%;
  background: linear-gradient(180deg, #cce8fb, #54a8ef);
}

.stack-slim {
  width: 40%;
  height: 52%;
  right: 28%;
  bottom: 26%;
  border: 10px solid rgba(59, 79, 199, 0.86);
  background: linear-gradient(180deg, rgba(233, 247, 255, 0.2), rgba(171, 219, 255, 0.2));
}

.visual-monitor::before {
  right: -1%;
  width: 96%;
  height: 80%;
  border-radius: 24px;
  background: linear-gradient(180deg, #f7f7f7 35%, #296ce7 35%);
}

.monitor,
.monitor-glass {
  position: absolute;
  border-radius: 12px;
}

.monitor {
  right: 8%;
  bottom: 20px;
  width: 64%;
  height: 46%;
  background: linear-gradient(180deg, #61d0dd, #347cd7);
  box-shadow: inset 0 0 0 10px #2b4c8e;
}

.monitor-glass {
  right: 22%;
  bottom: 30px;
  width: 56%;
  height: 72%;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

.visual-files::before {
  background: linear-gradient(145deg, rgba(39, 68, 198, 0.75), rgba(20, 34, 148, 0.5));
}

.file-chip,
.desktop {
  position: absolute;
  border-radius: 12px;
}

.file-chip {
  left: 2%;
  bottom: 12%;
  width: 24%;
  height: 42%;
  background: linear-gradient(180deg, #f2fbff, #c6dcf0);
  box-shadow: 0 16px 30px rgba(4, 12, 64, 0.25);
}

.desktop {
  right: 3%;
  bottom: 10%;
  width: 56%;
  height: 45%;
  background: linear-gradient(180deg, #78d6de, #75a6e2);
  box-shadow: inset 0 0 0 10px rgba(18, 54, 117, 0.34);
}

.visual-home::before {
  background: linear-gradient(145deg, rgba(52, 66, 214, 0.88), rgba(39, 56, 182, 0.66));
}

.download-arrow {
  position: absolute;
  right: 39%;
  bottom: 44px;
  width: 86px;
  height: 212px;
  background: linear-gradient(180deg, #ffd96a, #ffb82b);
  clip-path: polygon(30% 0, 70% 0, 70% 56%, 100% 56%, 50% 100%, 0 56%, 30% 56%);
  z-index: 3;
}

.hero-wave {
  height: 188px;
  position: relative;
  margin-top: -122px;
  background: var(--bg-light);
  border-radius: 52% 48% 0 0 / 74% 74% 0 0;
}

.hero-wave::before,
.hero-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: inherit;
}

.hero-wave::before {
  top: -18px;
  height: 100%;
  width: 98.5%;
  opacity: 0.16;
  background: #8cc1ef;
}

.hero-wave::after {
  top: -34px;
  height: 100%;
  width: 96.5%;
  opacity: 0.11;
  background: #7db3ea;
}

.tick-list {
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.3rem;
}

.tick-list li {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: clamp(1.1rem, 1.5vw, 1.85rem);
  font-weight: 600;
}

.tick-list li::before {
  content: "\2713";
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #ecf2ff;
  color: #3f7ce6;
  display: grid;
  place-items: center;
  font-size: 1rem;
}