:root {
    --hero-ratio: 1.738820;   /* hero.jpg — 2683 / 1543 */
}

body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    background: #2f2f2f;
}

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;   /* keeps phones honest when the URL bar hides */
    overflow: hidden;
}

.stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100vw, calc(100dvh * var(--hero-ratio)));
    aspect-ratio: var(--hero-ratio);
}

.hero-photo {
    width: 100%;
    height: 100%;
    background-image: url('/images/home/hero.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.screen {
    position: absolute;
    top: 27.28%;
    left: 41.56%;
    width: 16.18%;
    height: 34.61%;
    z-index: 2;
    overflow: hidden;
    background: #fff;
    border-radius: 3.92% / 3.18%;
}
.screen-gif {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.logo {
    position: absolute;
    top: 4vh;
    left: 3.5vw;
    width: clamp(70px, 9vw, 170px);
    z-index: 3;
    display: block;
}
.logo img { width: 100%; height: auto; display: block; }

.headline {
    position: absolute;
    top: 7vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: #fff;
    font-size: clamp(24px, 3vw, 62px);
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.nav {
    position: absolute;
    top: 34vh;
    right: 4vw;
    z-index: 3;
    display: flex;
    flex-direction: column;
    text-align: right;
    font-size: clamp(16px, 2vw, 40px);
    gap: 1.4em;          /* em, so the gap tracks the font size */
}
.nav a {
    color: #fff;
    text-decoration: none;
    font-size: inherit;
    font-weight: 400;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    transition: opacity .15s ease;
}
.nav a:hover { opacity: .75; }

.hero-bottom { display: contents; }

.stores {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7vh;
    height: clamp(34px, 6vh, 70px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.4vw;
}
.store {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 4% / 12%;
    transition: transform .15s ease;
}
.store:hover { transform: translateY(-6%); }
.store img { position: absolute; width: 100%; height: 100%; display: block; }

.store--gplay   { aspect-ratio: 288 / 87; }
.store--apple   { aspect-ratio: 265 / 89; }
.store--windows { aspect-ratio: 275 / 88; }

.store--gplay img {
    width: 114.58%;    /* 330 / 288 */
    height: 147.13%;   /* 128 / 87  */
    left: -6.94%;      /* 20 / 288, resolves against width  */
    top: -22.99%;      /* 20 / 87,  resolves against height */
}

@media (orientation: portrait) {
    :root { --hero-ratio: 0.692402; }   /* 1130 / 1632 */

    .hero-photo { background-image: url('/images/home/hero-phone.jpg'); }

    .screen {
        top: 25.80%;
        left: 30.71%;
        width: 38.41%;
        height: 32.72%;
    }

    :root { --logo-size: clamp(60px, min(22vw, 12vh), 170px); }

    .logo {
        top: 4vh;
        left: 50%;
        transform: translateX(-50%);
        width: var(--logo-size);
    }

    .headline {
        top: calc(5.5vh + var(--logo-size));
        font-size: clamp(20px, 6vw, 40px);
    }

    .hero-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.2vh;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 4vh;
        z-index: 3;
    }

    .nav {
        position: static;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: clamp(15px, 4.2vw, 28px);
        gap: 0.5em;
    }

    .stores {
        position: static;
        transform: none;
        height: clamp(30px, min(5.4vh, 8.6vw), 58px);
        gap: 2vw;
    }
}