/* Subpages: match homepage immersive shell (dark chrome + ambient + full-viewport hero) */

html {
    background: var(--bg, #061f26);
    color-scheme: dark only;
}

html:not(.page-home) {
    --logo-icon-height: 28px;
    --logo-icon-max-width: 76px;
    --logo-footer-height: 28px;
    --logo-footer-max-width: 76px;
}

@keyframes float-blob {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    50% {
        transform: translate(70px, 60px) scale(1.08) rotate(180deg);
    }
    100% {
        transform: translate(-60px, 110px) scale(0.92) rotate(360deg);
    }
}

html:not(.page-home) .ambient-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

html:not(.page-home) .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.28;
    animation: float-blob 28s infinite alternate ease-in-out;
    mix-blend-mode: screen;
}

html:not(.page-home) .blob-1 {
    width: 520px;
    height: 520px;
    background: var(--primary, #009999);
    top: -14%;
    left: -8%;
}

html:not(.page-home) .blob-2 {
    width: 600px;
    height: 600px;
    background: var(--petrol, #2e7f8f);
    bottom: -20%;
    right: -10%;
    opacity: 0.22;
    animation-delay: -6s;
}

html:not(.page-home) .blob-3 {
    width: 380px;
    height: 380px;
    background: var(--accent, #9be6ff);
    top: 28%;
    left: 42%;
    opacity: 0.14;
    animation-delay: -12s;
}

html:not(.page-home) .blob-4 {
    width: 320px;
    height: 320px;
    background: var(--success, #71d7c1);
    bottom: 8%;
    left: 8%;
    opacity: 0.16;
    animation-delay: -18s;
}

/* First screen = full viewport (like homepage .hero) */
html:not(.page-home) .page-hero,
html:not(.page-home) .blog-page-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: calc(96px + env(safe-area-inset-top, 0px)) 24px 72px !important;
    overflow: hidden;
}

html:not(.page-home) .page-hero::before,
html:not(.page-home) .blog-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(ellipse at center, black 38%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 38%, transparent 82%);
    z-index: 0;
}

html:not(.page-home) .page-hero > *,
html:not(.page-home) .blog-page-hero > * {
    position: relative;
    z-index: 1;
}

html:not(.page-home) .page-hero .section-container,
html:not(.page-home) .page-hero .hero-grid,
html:not(.page-home) .blog-page-hero .section-container {
    width: 100%;
}

@media (max-width: 768px) {
    html:not(.page-home) {
        --logo-icon-height: 26px;
        --logo-icon-max-width: 70px;
        --logo-footer-height: 26px;
        --logo-footer-max-width: 70px;
    }

    html:not(.page-home) .page-hero,
    html:not(.page-home) .blog-page-hero {
        padding: calc(80px + env(safe-area-inset-top, 0px)) 16px 56px !important;
    }
}

@media (prefers-color-scheme: light) {
    html:not(.page-home) {
        color-scheme: dark only;
        background: var(--bg, #061f26) !important;
    }
}

/* Below-the-fold sections: skip layout/paint until near viewport (no visual change) */
@supports (content-visibility: auto) {
    html:not(.page-home) main > section.section,
    html:not(.page-home) main > section.blog-section {
        content-visibility: auto;
        contain-intrinsic-size: auto 520px;
    }
}