:root {
      --nav-height: 140px;
      --panel-bg: rgba(255, 255, 255, 0.88);
      --panel-border: rgba(255, 255, 255, 0.24);
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-height);
    }

    body {
      background:
        radial-gradient(circle at top, rgba(22, 163, 74, 0.25), transparent 30%),
        linear-gradient(180deg, #081c15 0%, #0f3d2e 45%, #081c15 100%);
      color: #1f2937;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }

    @media (min-width: 768px) {
      :root {
        --nav-height: 88px;
      }
    }

    .snap-shell {
      scroll-snap-type: y proximity;
    }

    .snap-panel {
      scroll-snap-align: start;
      /* scroll-margin-top: var(--nav-height); */
    }

    .glass-panel {
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      backdrop-filter: blur(14px);
    }

    .section-frame {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .section-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(8, 28, 21, 0.78), rgba(15, 61, 46, 0.48));
      z-index: -1;
    }

    .bg-cover-art {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }