:root {
    --heimdall-hero-height-desktop: 530px;
    --heimdall-hero-height-mobile: 660px;
}

.hero, .software-hero, .about-hero, .contact-hero, .error-page {
    min-height: var(--heimdall-hero-height-desktop) !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.985) 0%, rgba(255,255,255,.955) 31%, rgba(255,255,255,.72) 48%, rgba(255,255,255,.28) 70%, rgba(255,255,255,.17) 100%),
        url("../assets/brand/banner-main.png") 50% 50% / auto 100% no-repeat !important;
    background-color: #f8fbfd !important;
}

.hero-grid, .software-hero-grid, .about-hero-grid, .contact-hero-grid, .error-grid {
    min-height: var(--heimdall-hero-height-desktop) !important;
    grid-template-columns: minmax(0, 760px) 1fr !important;
    align-items: center !important;
}

.hero-copy, .software-hero-copy, .about-hero-copy, .contact-hero-copy, .error-copy {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

.software-hero, .about-hero, .contact-hero {
    background-position: 50% 50% !important;
}

.device-shell {
    position: relative;
    width: min(330px, 78%);
    aspect-ratio: 9 / 18.7;
    padding: 10px;
    border: 2px solid rgba(13,18,25,.95);
    border-radius: 44px;
    background: linear-gradient(145deg, #20242b, #0c0f14 72%);
    box-shadow: 0 32px 70px rgba(20,53,77,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.device-shell::before {
    position: absolute; z-index: 4; top: 8px; left: 50%; width: 31%; height: 24px;
    content: ""; transform: translateX(-50%); border-radius: 0 0 16px 16px; background: #090b0f;
}
.device-shell::after {
    position: absolute; z-index: 5; bottom: 10px; left: 50%; width: 34%; height: 4px;
    content: ""; transform: translateX(-50%); border-radius: 999px; background: rgba(255,255,255,.88);
}
.device-screen {
    position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 34px; background: #f7f6f8;
}
.device-screen img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.device-camera {
    position: absolute; z-index: 6; top: 14px; left: 50%; width: 7px; height: 7px; margin-left: 42px;
    border-radius: 50%; background: #1c2229;
}

.product-device.real-device { display: grid; place-items: center; padding: 38px 28px; }
.product-device .device-shell { width: min(326px, 78%); }

.app-preview.real-app-preview-wrap {
    min-height: 470px; display: grid; place-items: end center; padding: 28px 22px 0;
}
.app-preview .device-shell {
    width: min(236px, 72%); margin-bottom: -44px; border-radius: 36px; padding: 8px;
}
.app-preview .device-screen { border-radius: 28px; }

.product-real-screenshot, .home-real-screenshot {
    width: 100% !important; max-height: none !important; height: 100% !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}

.odobuddy-shot-viewport { min-height: 470px; padding: 24px 16px 0; }
.gallery-device-shell {
    position: relative; width: min(214px, 82%); aspect-ratio: 9 / 18.7; padding: 6px;
    border: 1px solid rgba(16,22,30,.9); border-radius: 29px 29px 0 0; background: #181c22;
    box-shadow: 0 18px 38px rgba(20,54,78,.15);
}
.gallery-device-shell::before {
    position: absolute; z-index: 4; top: 5px; left: 50%; width: 31%; height: 15px;
    content: ""; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: #090b0f;
}
.gallery-device-screen {
    width: 100%; height: 100%; overflow: hidden; border-radius: 23px 23px 0 0; background: #f7f6f8;
}
.gallery-device-screen img {
    display: block; width: 100% !important; height: 100% !important; object-fit: cover;
    object-position: top center; border-radius: 0 !important; box-shadow: none !important;
}

.odobuddy-brand-lockup img {
    width: 132px; max-height: 72px; object-fit: contain; object-position: left center;
    filter: drop-shadow(0 10px 22px rgba(38,103,185,.10));
}

@media (max-width: 860px) {
    .hero, .software-hero, .about-hero, .contact-hero, .error-page {
        min-height: var(--heimdall-hero-height-mobile) !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(255,255,255,.96) 42%, rgba(255,255,255,.76) 60%, rgba(255,255,255,.27) 100%),
            url("../assets/brand/banner-main.png") 58% 50% / auto 100% no-repeat !important;
    }
    .hero-grid, .software-hero-grid, .about-hero-grid, .contact-hero-grid, .error-grid {
        min-height: var(--heimdall-hero-height-mobile) !important;
    }
    .hero-copy, .software-hero-copy, .about-hero-copy, .contact-hero-copy, .error-copy {
        padding-top: 54px !important; padding-bottom: 250px !important;
    }
    .product-device .device-shell { width: min(286px, 72%); }
}

@media (max-width: 680px) {
    :root { --heimdall-hero-height-mobile: 620px; }
    .hero-copy, .software-hero-copy, .about-hero-copy, .contact-hero-copy, .error-copy {
        padding-top: 48px !important; padding-bottom: 230px !important;
    }
    .gallery-device-shell { width: min(260px, 72%); }
    .odobuddy-shot-viewport { min-height: 500px; }
}