/* Explain: Page-level layout utilities and decorative backgrounds */
.section-pad {
    padding-block: clamp(5rem, 9vw, 8rem);
}

.hero-shell {
    min-height: 100svh;
}

.hero-aurora {
    background:
        radial-gradient(circle at 72% 18%, rgba(201, 166, 70, 0.24), transparent 24rem),
        radial-gradient(circle at 16% 72%, rgba(59, 20, 95, 0.58), transparent 26rem),
        linear-gradient(110deg, var(--midnight-color) 0%, var(--midnight-color) 49%, #24103c 49%, #2d124c 100%);
}

.hero-aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: linear-gradient(rgba(247, 241, 227, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 241, 227, 0.08) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 65% 40%, black, transparent 64%);
}

.image-cascade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 11, 46, 0.04), rgba(22, 11, 46, 0.42));
}

.sticky-panel {
    background:
        linear-gradient(135deg, rgba(201, 166, 70, 0.15), transparent 40%),
        var(--primary-color);
}

.full-purple {
    background:
        radial-gradient(circle at 12% 12%, rgba(201, 166, 70, 0.18), transparent 24rem),
        linear-gradient(135deg, var(--primary-color), #2b0f4a 58%, var(--midnight-color));
}

.vault-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.metallic-orb {
    background: radial-gradient(circle, rgba(201, 166, 70, 0.42), rgba(201, 166, 70, 0.08) 45%, transparent 70%);
    filter: blur(4px);
}

.process-line {
    position: relative;
}

.contact-panel {
    background:
        radial-gradient(circle at 90% 18%, rgba(201, 166, 70, 0.2), transparent 22rem),
        linear-gradient(180deg, var(--ivory-color), #fffaf0);
}

@media (min-width: 768px) {
    .vault-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vault-grid article:first-child,
    .vault-grid article:last-child {
        grid-column: span 2 / span 2;
    }
}

@media (min-width: 1024px) {
    .vault-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .vault-grid article {
        grid-column: span 2 / span 2;
    }

    .vault-grid article:first-child,
    .vault-grid article:last-child {
        grid-column: span 3 / span 3;
    }

    .process-line::before {
        content: "";
        position: absolute;
        left: 3rem;
        right: 3rem;
        top: 3.5rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(201, 166, 70, 0.55), transparent);
    }
}