*{
    box-sizing:border-box;
}

:root{
    color-scheme:light;
    --bg:#eef3f8;
    --card:#ffffff;
    --text:#16304d;
    --muted:#6d7d8f;
    --line:#dbe4ec;
    --accent:#0e6fbd;
    --accent-dark:#0b5b9a;
    --shadow:0 22px 60px rgba(27,55,82,.14);
}

html,body{
    margin:0;
    min-height:100%;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
        radial-gradient(circle at top,#ffffff 0,#eef3f8 42%,#e5edf4 100%);
    color:var(--text);
}

body{
    min-height:100dvh;
}

a{
    color:inherit;
}

.start-shell{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:
        max(24px,env(safe-area-inset-top))
        18px
        max(20px,env(safe-area-inset-bottom));
}

.start-card{
    width:min(100%,520px);
    background:rgba(255,255,255,.97);
    border:1px solid rgba(203,216,227,.9);
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:30px 24px 24px;
    text-align:center;
}

.logo-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:12px;
}

.logo{
    width:92px;
    height:auto;
    display:block;
}

.eyebrow{
    margin:0 0 6px;
    font-size:.76rem;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.16em;
    color:var(--accent);
}

h1{
    margin:0;
    font-size:clamp(2rem,7vw,2.7rem);
    line-height:1.05;
    letter-spacing:-.035em;
}

.lead{
    margin:14px auto 24px;
    max-width:390px;
    color:var(--muted);
    font-size:1rem;
    line-height:1.55;
}

.language-grid{
    display:grid;
    gap:12px;
}

.language-button{
    min-height:74px;
    display:grid;
    grid-template-columns:48px 1fr 28px;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    border:1px solid var(--line);
    border-radius:18px;
    text-decoration:none;
    background:#fff;
    text-align:left;
    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.language-button:hover,
.language-button:focus-visible{
    transform:translateY(-1px);
    border-color:#9fc8e6;
    box-shadow:0 10px 26px rgba(25,76,113,.1);
    background:#f9fcff;
    outline:none;
}

.language-button:active{
    transform:translateY(0);
}

.flag{
    font-size:2rem;
    line-height:1;
}

.language-copy{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.language-copy strong{
    font-size:1.06rem;
}

.language-copy small{
    color:var(--muted);
    font-size:.82rem;
}

.arrow{
    justify-self:end;
    font-size:2rem;
    line-height:1;
    color:var(--accent);
    font-weight:300;
}

.offline-note{
    margin-top:20px;
    display:grid;
    grid-template-columns:36px 1fr;
    align-items:start;
    gap:10px;
    padding:14px;
    border-radius:16px;
    background:#f2f8fc;
    border:1px solid #d8eaf7;
    text-align:left;
}

.offline-note p{
    margin:0;
    color:#466078;
    font-size:.86rem;
    line-height:1.45;
}

.offline-icon{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-weight:800;
}

footer{
    width:min(100%,620px);
    text-align:center;
    color:#6f7f8e;
    font-size:.76rem;
    line-height:1.55;
    padding:0 12px;
}

footer a{
    color:#506b83;
    text-decoration:none;
}

footer a:hover,
footer a:focus-visible{
    text-decoration:underline;
}

@media (max-width:420px){
    .start-shell{
        justify-content:flex-start;
        padding-top:max(18px,env(safe-area-inset-top));
    }

    .start-card{
        border-radius:24px;
        padding:24px 16px 18px;
    }

    .logo{
        width:78px;
    }

    .lead{
        margin-bottom:20px;
    }

    .language-button{
        min-height:68px;
        border-radius:16px;
    }

    .flag{
        font-size:1.75rem;
    }
}