:root {
  --g-shade: 14, 42, 96;          
  --g-dark: #12336f;
  --g-dark2: #1b4b97;
  --g-sky: #B4DCFF;
  --v-deep: #0f2c63;
  --v-mid: #18428a;
  --v-place-rgb: 24, 66, 138;
  --v-dock-rgb: 30, 78, 156;
  --v-menu-bg:
    radial-gradient(95% 42% at 100% 100%, rgba(98, 186, 243, .5), transparent 70%),
    radial-gradient(80% 36% at 0% 0%, rgba(58, 104, 206, .38), transparent 70%),
    linear-gradient(180deg, #0f2c63 0%, #163d82 52%, #1e4e9c 100%);
  --v-foot-fade: linear-gradient(180deg, #f2f2f2 0%, #e4ebf7 24%, #b4c8ea 48%, #5f8acb 70%, #24519c 88%, #10306a 100%);
  --v-foot-bg:
    radial-gradient(44% 52% at 0% 42%, rgba(46, 102, 192, .6), transparent 72%),
    radial-gradient(40% 58% at 100% 58%, rgba(24, 84, 185, .6), transparent 72%),
    radial-gradient(55% 40% at 72% 100%, rgba(96, 176, 236, .28), transparent 72%),
    linear-gradient(172deg, #10306a 0%, #143b7e 52%, #11346f 100%);
  --v-foot-glow: radial-gradient(closest-side, rgba(120, 180, 255, .14), transparent 70%);
}

.g1-hero {
  background:
    radial-gradient(70% 52% at 78% 104%, rgba(132, 214, 251, .95) 0%, rgba(92, 184, 241, .62) 34%, rgba(92, 184, 241, 0) 72%),
    radial-gradient(48% 36% at 12% 62%, rgba(64, 112, 222, .5), rgba(64, 112, 222, 0) 70%),
    radial-gradient(80% 50% at 55% 88%, rgba(44, 118, 206, .7), rgba(44, 118, 206, 0) 70%),
    linear-gradient(180deg, #0f2a5e 0%, #13387a 36%, #1b4d9a 68%, #2a6cc0 100%);
}
.g1-light i:nth-child(1) {
  width: 620px; height: 620px; right: -180px; bottom: -260px;
  background: radial-gradient(closest-side, rgba(170, 228, 255, .55), rgba(170, 228, 255, 0));
  animation: c1-drift1 16s ease-in-out infinite alternate;
}
.g1-light i:nth-child(2) {
  width: 520px; height: 380px; left: -160px; top: 34%;
  background: radial-gradient(closest-side, rgba(78, 128, 232, .32), rgba(78, 128, 232, 0));
  animation: c1-drift2 21s ease-in-out infinite alternate;
}
.g1-light i:nth-child(3) {
  width: 420px; height: 420px; right: 18%; top: -160px;
  background: radial-gradient(closest-side, rgba(70, 140, 230, .3), rgba(70, 140, 230, 0));
  animation: c1-drift1 24s ease-in-out -8s infinite alternate-reverse;
}
@keyframes c1-drift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-60px, -40px, 0) scale(1.12); } }
@keyframes c1-drift2 { from { transform: translate3d(0, 0, 0); opacity: .8; } to { transform: translate3d(70px, -30px, 0); opacity: 1; } }

@media (min-width: 1024px) {
  .g1-hero__photo, .g1-hero__main::before { display: none; }
  .g1-hero__main { justify-content: center; padding: 20px 40px 20px 0; }
  .g1-h1 { font-size: clamp(52px, 4.8vw, 72px); max-width: 16ch; }
  .g1-sub { font-size: 19px; max-width: 40ch; color: rgba(255, 255, 255, .9); }
}

.g1-step { background: linear-gradient(118deg, #143a7e 0%, #1d57ad 55%, #3585d8 100%); }