.page-view__content,
.page-view__sections {
    display: flex;
    flex-direction: column;
}

.page-view__section-header {
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
    margin-bottom: var(--size-mid);
}

.page-view__section-title--align-left,
.page-view__section-description--align-left {
    text-align: left;
}

.page-view__section-title--align-center,
.page-view__section-description--align-center {
    text-align: center;
}

.page-view__section-title--align-right,
.page-view__section-description--align-right {
    text-align: right;
}

.page-view__sections > .page-view__section:nth-child(2n) {
    background-color: var(--color-bg-top);
}

.page-view__section-group {
    display: flow-root;
}

.page-view__section-group--background {
    background: var(--page-view-section-group-background, var(--color-bg-top));
}

.page-view__section-group--style-surface {
    --page-view-section-group-background: var(--color-bg-top);
}

.page-view__section-group--style-muted {
    --page-view-section-group-background: color-mix(
        in srgb,
        var(--color-bg-bottom) 78%,
        var(--color-bg-top) 22%
    );
}

.page-view__section-group--style-primary-soft {
    --page-view-section-group-background: color-mix(
        in srgb,
        var(--color-primary) 10%,
        var(--color-bg-top) 90%
    );
}

.page-view__section-group--style-accent-soft {
    --page-view-section-group-background: color-mix(
        in srgb,
        var(--color-accent) 10%,
        var(--color-bg-top) 90%
    );
}

.page-view__section-group--style-primary-gradient {
    --page-view-section-group-background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-primary) 16%, transparent) 0%,
            color-mix(in srgb, var(--color-primary) 4%, transparent) 100%
        ),
        var(--color-bg-top);
}

.page-view__section-group--style-accent-gradient {
    --page-view-section-group-background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-accent) 16%, transparent) 0%,
            color-mix(in srgb, var(--color-accent) 4%, transparent) 100%
        ),
        var(--color-bg-top);
}

.page-view__section-group--style-immersive {
    --page-view-section-group-background:
        linear-gradient(
            108deg,
            rgba(2, 6, 23, 0.93) 0%,
            rgba(2, 6, 23, 0.82) 46%,
            rgba(2, 6, 23, 0.34) 100%
        ),
        radial-gradient(
            circle at 20% 24%,
            color-mix(in srgb, var(--color-primary) 36%, transparent) 0%,
            transparent 40%
        ),
        radial-gradient(
            circle at 76% 68%,
            color-mix(in srgb, var(--color-accent, #60a5fa) 34%, transparent) 0%,
            transparent 38%
        ),
        radial-gradient(
            circle at 38% 82%,
            color-mix(in srgb, var(--color-primary) 26%, transparent) 0%,
            transparent 34%
        ),
        radial-gradient(
            circle at 84% 22%,
            color-mix(in srgb, var(--color-accent, #60a5fa) 24%, transparent) 0%,
            transparent 32%
        ),
        var(--color-bg-bottom-dark);
}

:root[data-theme="light"]
    .page-view__section-group--background.page-view__section-group--style-immersive
{
    --color-bg-top: color-mix(in srgb, #0f172a 76%, #111827 24%);
    --color-text: #f8fafc;
    --color-secondary: #cbd5e1;
    --color-border: color-mix(in srgb, #cbd5e1 34%, transparent);
    --color-border-hover: color-mix(in srgb, #e2e8f0 52%, transparent);
    --color-primary-transparent: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

:root[data-theme="light"]
    .page-view__section-group--background.page-view__section-group--style-immersive
    > .page-view__section {
    color: var(--color-text);
}

:root[data-theme="light"]
    .page-view__section-group--background.page-view__section-group--style-immersive
    .page-view__section-title {
    color: var(--color-text-darker);
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.5);
}

:root[data-theme="light"]
    .page-view__section-group--background.page-view__section-group--style-immersive
    .page-view__section-description {
    color: color-mix(in srgb, var(--color-text-darker) 88%, #93c5fd 12%);
    opacity: 0.92;
}

.page-view__section-group--background.page-view__section-group--style-immersive {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-size: auto, 140% 140%, 140% 140%, 130% 130%, 126% 126%, auto;
    background-position: 0 0, 0% 0%, 100% 100%, 20% 82%, 84% 18%, 0 0;
    animation: page-view-section-group-immersive-background-drift 44s ease-in-out infinite;
}

.page-view__section-group--background.page-view__section-group--style-immersive::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(1, 4, 16, 0.8) 14%,
        rgba(2, 6, 23, 0.22) 34%,
        rgba(2, 6, 23, 0.22) 66%,
        rgba(1, 4, 16, 0.8) 86%,
        rgba(0, 0, 0, 0.92) 100%
    );
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    will-change: top, left, transform, opacity;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--1 {
    top: 10%;
    left: 12%;
    width: clamp(220px, 30vw, 420px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-primary) 50%, transparent) 0%,
        transparent 72%
    );
    opacity: 0.44;
    animation: page-view-section-group-immersive-drift 34s ease-in-out infinite;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--2 {
    top: 78%;
    left: 22%;
    width: clamp(140px, 18vw, 300px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent, #60a5fa) 50%, transparent) 0%,
        transparent 74%
    );
    opacity: 0.24;
    animation:
        page-view-section-group-immersive-drift-secondary 41s ease-in-out infinite,
        page-view-section-group-immersive-blink 9s ease-in-out infinite;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--3 {
    top: 24%;
    left: 82%;
    width: clamp(180px, 24vw, 340px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-primary) 42%, transparent) 0%,
        transparent 74%
    );
    opacity: 0.28;
    animation: page-view-section-group-immersive-drift 39s ease-in-out infinite;
    animation-delay: -13s;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--4 {
    top: 64%;
    left: 74%;
    width: clamp(130px, 16vw, 260px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent, #60a5fa) 44%, transparent) 0%,
        transparent 76%
    );
    opacity: 0.18;
    animation:
        page-view-section-group-immersive-drift-secondary 47s ease-in-out infinite,
        page-view-section-group-immersive-blink 11s ease-in-out infinite;
    animation-delay: -9s, -3s;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--5 {
    top: 22%;
    left: 36%;
    width: clamp(90px, 12vw, 190px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-primary) 38%, #ffffff 24%) 0%,
        transparent 74%
    );
    opacity: 0.2;
    animation:
        page-view-section-group-immersive-orbit 53s ease-in-out infinite,
        page-view-section-group-immersive-blink 13s ease-in-out infinite;
    animation-delay: -11s, -3s;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--6 {
    top: 68%;
    left: 62%;
    width: clamp(110px, 14vw, 210px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent, #60a5fa) 42%, #ffffff 18%) 0%,
        transparent 76%
    );
    opacity: 0.16;
    animation:
        page-view-section-group-immersive-orbit 61s ease-in-out infinite,
        page-view-section-group-immersive-blink 17s ease-in-out infinite;
    animation-delay: -27s, -8s;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--7 {
    top: 14%;
    left: 56%;
    width: clamp(120px, 17vw, 240px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-primary) 34%, transparent) 0%,
        transparent 76%
    );
    opacity: 0.14;
    animation:
        page-view-section-group-immersive-drift-secondary 45s ease-in-out infinite,
        page-view-section-group-immersive-blink 15s ease-in-out infinite;
    animation-delay: -19s, -6s;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--8 {
    top: 82%;
    left: 84%;
    width: clamp(100px, 13vw, 190px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent, #60a5fa) 38%, #ffffff 14%) 0%,
        transparent 77%
    );
    opacity: 0.12;
    animation:
        page-view-section-group-immersive-orbit 57s ease-in-out infinite,
        page-view-section-group-immersive-blink 19s ease-in-out infinite;
    animation-delay: -33s, -11s;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--9 {
    top: 46%;
    left: 6%;
    width: clamp(160px, 20vw, 300px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-primary) 36%, transparent) 0%,
        transparent 75%
    );
    opacity: 0.16;
    animation: page-view-section-group-immersive-drift 43s ease-in-out infinite;
    animation-delay: -21s;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow--10 {
    top: 52%;
    left: 48%;
    width: clamp(80px, 10vw, 160px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent, #60a5fa) 34%, #ffffff 20%) 0%,
        transparent 78%
    );
    opacity: 0.13;
    animation:
        page-view-section-group-immersive-orbit 49s ease-in-out infinite,
        page-view-section-group-immersive-blink 12s ease-in-out infinite;
    animation-delay: -7s, -2s;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-effect {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-effect--beam {
    top: -18%;
    left: -20%;
    width: clamp(280px, 42vw, 760px);
    height: clamp(220px, 36vw, 520px);
    inset: auto;
    border-radius: 44% 56% 52% 48% / 62% 48% 52% 38%;
    mix-blend-mode: screen;
    opacity: 0.16;
    filter: blur(8px);
    background:
        radial-gradient(
            ellipse at 28% 34%,
            color-mix(in srgb, var(--color-primary) 34%, transparent) 0%,
            transparent 68%
        ),
        radial-gradient(
            ellipse at 74% 60%,
            color-mix(in srgb, var(--color-accent, #60a5fa) 30%, transparent) 0%,
            transparent 72%
        );
    transform: translate3d(0, 0, 0) rotate(-12deg) scale(0.92);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    animation: page-view-section-group-immersive-beam-sweep 38s ease-in-out infinite;
}

.page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-effect--dust {
    opacity: 0.22;
    mix-blend-mode: screen;
    filter: blur(0.25px);
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.38) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgba(96, 165, 250, 0.28) 0 1.2px, transparent 1.5px),
        radial-gradient(circle, rgba(147, 197, 253, 0.24) 0 1px, transparent 1.4px);
    background-size: 170px 170px, 230px 230px, 280px 280px;
    background-position: 0 0, 42px 26px, -30px 72px;
    will-change: background-position, opacity;
    animation:
        page-view-section-group-immersive-particles 52s linear infinite,
        page-view-section-group-immersive-dust-flicker 15s ease-in-out infinite;
}

.page-view__section-group--background.page-view__section-group--style-immersive > .page-view__section {
    position: relative;
    z-index: 2;
}

@keyframes page-view-section-group-immersive-background-drift {
    0% {
        background-position: 0 0, 0% 0%, 100% 100%, 20% 82%, 84% 18%, 0 0;
    }
    24% {
        background-position: 0 0, 6% 4%, 92% 88%, 26% 76%, 78% 24%, 0 0;
    }
    48% {
        background-position: 0 0, 10% 8%, 88% 84%, 30% 70%, 72% 30%, 0 0;
    }
    72% {
        background-position: 0 0, 4% 12%, 94% 78%, 24% 66%, 80% 36%, 0 0;
    }
    100% {
        background-position: 0 0, 0% 0%, 100% 100%, 20% 82%, 84% 18%, 0 0;
    }
}

@keyframes page-view-section-group-immersive-drift {
    0% {
        top: 10%;
        left: 12%;
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.94);
    }
    20% {
        top: 16%;
        left: 86%;
        opacity: 0.26;
        transform: translate(-50%, -50%) scale(1.06);
    }
    40% {
        top: 80%;
        left: 88%;
        opacity: 0.34;
        transform: translate(-50%, -50%) scale(1.12);
    }
    60% {
        top: 84%;
        left: 14%;
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(1.1);
    }
    80% {
        top: 48%;
        left: 52%;
        opacity: 0.29;
        transform: translate(-50%, -50%) scale(1.02);
    }
    100% {
        top: 10%;
        left: 12%;
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.94);
    }
}

@keyframes page-view-section-group-immersive-drift-secondary {
    0% {
        top: 78%;
        left: 22%;
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.86);
    }
    22% {
        top: 24%;
        left: 18%;
        opacity: 0.28;
        transform: translate(-50%, -50%) scale(1.02);
    }
    45% {
        top: 14%;
        left: 76%;
        opacity: 0.22;
        transform: translate(-50%, -50%) scale(0.94);
    }
    68% {
        top: 64%;
        left: 88%;
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1.08);
    }
    86% {
        top: 86%;
        left: 54%;
        opacity: 0.18;
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% {
        top: 78%;
        left: 22%;
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.86);
    }
}

@keyframes page-view-section-group-immersive-blink {
    0%,
    32%,
    62%,
    100% {
        opacity: 0.1;
    }
    16%,
    48% {
        opacity: 0.58;
    }
}

@keyframes page-view-section-group-immersive-orbit {
    0% {
        top: 22%;
        left: 36%;
        opacity: 0.14;
        transform: translate(-50%, -50%) scale(0.84);
    }
    24% {
        top: 10%;
        left: 70%;
        opacity: 0.24;
        transform: translate(-50%, -50%) scale(1.06);
    }
    52% {
        top: 58%;
        left: 88%;
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.96);
    }
    76% {
        top: 84%;
        left: 46%;
        opacity: 0.24;
        transform: translate(-50%, -50%) scale(1.08);
    }
    100% {
        top: 22%;
        left: 36%;
        opacity: 0.14;
        transform: translate(-50%, -50%) scale(0.84);
    }
}

@keyframes page-view-section-group-immersive-beam-sweep {
    0% {
        opacity: 0.1;
        transform: translate3d(-8%, -6%, 0) rotate(-12deg) scale(0.92);
    }
    28% {
        opacity: 0.2;
        transform: translate3d(12%, -10%, 0) rotate(-5deg) scale(1.04);
    }
    58% {
        opacity: 0.16;
        transform: translate3d(24%, 14%, 0) rotate(6deg) scale(0.98);
    }
    82% {
        opacity: 0.24;
        transform: translate3d(-2%, 20%, 0) rotate(10deg) scale(1.08);
    }
    100% {
        opacity: 0.1;
        transform: translate3d(-8%, -6%, 0) rotate(-12deg) scale(0.92);
    }
}

@keyframes page-view-section-group-immersive-particles {
    0% {
        background-position: 0 0, 42px 26px, -30px 72px;
    }
    50% {
        background-position: 90px -70px, -48px 88px, 40px -36px;
    }
    100% {
        background-position: 180px -140px, -138px 150px, 110px -94px;
    }
}

@keyframes page-view-section-group-immersive-dust-flicker {
    0%,
    100% {
        opacity: 0.14;
    }
    22% {
        opacity: 0.24;
    }
    44% {
        opacity: 0.18;
    }
    68% {
        opacity: 0.26;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-view__section-group--background.page-view__section-group--style-immersive {
        animation: none;
    }

    .page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-glow,
    .page-view__section-group--background.page-view__section-group--style-immersive .page-view__section-group-effect {
        animation: none;
    }
}

.page-view__section-group > .page-view__section {
    background-color: transparent;
}

.page-view__section-group > .page-view__section:nth-child(2n) {
    background-color: transparent;
}

.page-view__header-container {
    display: grid;
    gap: var(--size-xs);
    width: 100%;
}

.page-view__section-container > :nth-child(2) {
    margin-top: 0 !important;
}

.page-view__section-container > :last-child {
    margin-bottom: 0 !important;
}