:root{
    /* --color-primary: #324782; CMYK */
    --color-primary: #17398E;
    --text: rgba(255,255,255,1);
    --text-muted: rgba(255,255,255,0.6);
    --line: rgba(255,255,255,0.28);
    --line-strong: rgba(255,255,255,0.9);
    --fs-label: clamp(11px, 0.18vw + 10.4px, 13px);
    --fs-body:  clamp(15px, 0.25vw + 14.2px, 17px);
    --fs-lead:  clamp(19px, 1.1vw + 15.2px, 28px);
    --fs-claim: clamp(48px, 9.5vw, 148px);
    --space-page:   clamp(24px, 4.5vw, 72px);
    --space-block:  clamp(32px, 5vh, 72px);
    --space-footer: clamp(40px, 7vh, 88px);
    --space-gap:    clamp(20px, 3vh, 40px);
}

body, html{
    scroll-behavior: smooth;
}

html{
    -webkit-text-size-adjust: 100%;
}

body{
    background: var(--color-primary);
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    margin: 0;
    padding: 0;
    color: var(--text);
}

*, ::after, ::before {
    box-sizing: border-box;
}

main{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 1440px;
    margin-inline: auto;
    padding-block: var(--space-page);
    padding-left: max(var(--space-page), env(safe-area-inset-left));
    padding-right: max(var(--space-page), env(safe-area-inset-right));

    > *{
        flex: 0 0 auto;
    }
}

header{
    border-bottom: 1px solid var(--line);
    padding-bottom: clamp(14px, 1.8vh, 24px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px clamp(16px, 3vw, 40px);

    svg{
        display: block;
        width: clamp(112px, 13vw, 180px);
        height: auto;
    }
}

.content{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: var(--fs-lead);
    padding-block: var(--space-block);
    line-height: 1.55;
    text-rendering: geometricPrecision;
    position: relative;

    .claim{
        position: relative;
        display: block;
        min-height: 1.2em;
        margin-bottom: var(--space-gap);
        font-size: var(--fs-claim);
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.025em;

        span{
            position: absolute;
            inset: 0 auto auto 0;
            display: block;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(22px);
            transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0s linear 0.35s;
            will-change: opacity, transform;

            &.active{
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateY(0);
                transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0s linear 0s;
            }

            &.out{
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(-22px);
                transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0s linear 0.35s;
            }
        }
    }

    .lead{
        max-width: 38ch;
        text-wrap: pretty;
    }

    .divider{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 14px;
        overflow: hidden;
        pointer-events: none;

        &::before{
            content: "";
            position: absolute;
            inset: 50% 0 auto 0;
            height: 1px;
            transform: translateY(-50%);
            background: var(--line);
        }

        .line{
            --line-width: clamp(80px, 18vw, 180px);
            position: absolute;
            left: calc(0px - var(--line-width));
            top: 50%;
            width: var(--line-width);
            height: 2px;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.95);
            /* box-shadow: 0 0 14px rgba(255,255,255,0.8); */
            animation: railSlide 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
            will-change: left;
        }
    }
}

@keyframes railSlide {
    from {
        left: calc(0px - var(--line-width));
    }
    to {
        left: 100%;
    }
}

footer{
    padding-top: var(--space-footer);
    line-height: 1.5;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: clamp(24px, 3.5vw, 56px);

    p{
        overflow-wrap: break-word;
    }
}

/* Text */
.title{
    display: block;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    font-size: var(--fs-label);
    line-height: 1.4;
    text-transform: uppercase;

    + p{
        margin-top: 8px;
    }
}

@media (min-width: 560px){
    header .title{
        text-align: right;
    }
}

.btn{
    display: inline-flex;
    align-items: center;
    border:1px solid var(--line);
    border-radius: 50px;
    padding: 0.75em 1.6em;
    font-size: var(--fs-body);
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .25s ease-out, background-color .25s ease-out;
    white-space: nowrap;

    &:hover{
        border-color: var(--line-strong);
        background-color: rgba(255,255,255,0.07);
    }

    &:focus-visible{
        outline: 2px solid var(--text);
        outline-offset: 3px;
    }
}

.btn-container{
    margin-top: var(--space-gap);
    font-size: var(--fs-body);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
}