:root {
    --green: #00845f;
    --gold: #c79a45;
    --ink: #f4f1e8;
    --muted: #b8c5bd;
    --panel: rgba(8, 25, 21, 0.84);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #030807;
    color: var(--ink);
    font-family: Inter, Segoe UI, Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.pixel-page {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background: #030807;
}

.pixel-shell {
    position: relative;
    width: min(100%, 935px);
    margin: 0 auto;
    line-height: 0;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.72);
}

.desktop-mockup {
    display: block;
    width: 100%;
    height: auto;
}

.mobile-home {
    display: none;
}

.hotspot {
    position: absolute;
    display: block;
    border-radius: 6px;
    outline: 0;
}

.hotspot:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    background: rgba(199, 154, 69, 0.08);
}

.nav-home { left: 37.3%; top: 1.75%; width: 4.6%; height: 1.2%; }
.nav-loans { left: 43.1%; top: 1.75%; width: 4.6%; height: 1.2%; }
.nav-invest { left: 48.8%; top: 1.75%; width: 4.8%; height: 1.2%; }
.nav-banking { left: 54.4%; top: 1.75%; width: 5.8%; height: 1.2%; }
.nav-about { left: 61.2%; top: 1.75%; width: 6.3%; height: 1.2%; }
.nav-support { left: 68.5%; top: 1.75%; width: 9.5%; height: 1.2%; }
.login-hotspot { left: 79.7%; top: 1.25%; width: 7.7%; height: 1.85%; }
.apply-hotspot { left: 88.2%; top: 1.25%; width: 9.8%; height: 1.85%; }
.hero-loans { left: 9%; top: 15.6%; width: 12.7%; height: 1.85%; }
.hero-invest { left: 22.8%; top: 15.6%; width: 14.6%; height: 1.85%; }
.card-loans { left: 7.3%; top: 31.8%; width: 11.3%; height: 1.75%; }
.card-invest { left: 36.9%; top: 31.8%; width: 12.5%; height: 1.75%; }
.card-banking { left: 66.9%; top: 31.8%; width: 11.8%; height: 1.75%; }
.calculator-apply { left: 7.2%; top: 53%; width: 15.7%; height: 1.8%; }
.advisor-call { left: 25%; top: 53%; width: 16.3%; height: 1.8%; }
.cta-apply { left: 77.8%; top: 81.2%; width: 15.5%; height: 1.9%; }
.cta-advisor { left: 77.8%; top: 84.2%; width: 15.5%; height: 1.9%; }

.sr-content {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 74% 18%, rgba(0, 132, 95, 0.28), transparent 32%),
        linear-gradient(135deg, #030807, #08231d);
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 420px;
    gap: 34px;
    align-items: center;
    width: min(1040px, calc(100% - 40px));
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.horse {
    color: var(--gold);
    font-size: 38px;
}

.site-brand b {
    display: block;
    color: #2eb67d;
    font-size: 24px;
    letter-spacing: 1px;
}

.site-brand small {
    display: block;
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.login-shell h1 {
    margin: 34px 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    line-height: 1;
}

.login-shell p {
    color: var(--muted);
    line-height: 1.7;
}

.login-card {
    display: grid;
    gap: 18px;
    padding: 28px;
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.login-card label {
    display: grid;
    gap: 8px;
    color: var(--ink);
    font-weight: 800;
}

.login-card input {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 12px;
    font: inherit;
}

.login-card button {
    min-height: 44px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, #038a62, #006b4f);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.login-error {
    padding: 12px;
    border-radius: 6px;
    background: rgba(164, 49, 49, 0.22);
    color: #ffd8d2;
}

@media (max-width: 980px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-shell h1 {
        font-size: 44px;
    }
}

@media (max-width: 720px) {
    .pixel-page {
        display: block;
        min-height: 100vh;
        background: #030807;
    }

    .pixel-shell {
        width: 100%;
        min-height: 100vh;
        line-height: normal;
        box-shadow: none;
    }

    .desktop-mockup,
    .hotspot {
        display: none;
    }

    .mobile-home {
        display: block;
        min-height: 100vh;
        padding: 18px;
        background:
            linear-gradient(rgba(3, 8, 7, 0.52), rgba(3, 8, 7, 0.92)),
            url("../img/public-site.png") center top / cover no-repeat;
    }

    .mobile-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .mobile-brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        gap: 10px;
        color: #fff;
        font-weight: 900;
    }

    .mobile-brand span {
        display: grid;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        place-items: center;
        border: 1px solid rgba(199, 154, 69, 0.58);
        border-radius: 8px;
        background: rgba(0, 132, 95, 0.82);
        color: #fff;
        font-size: 14px;
    }

    .mobile-brand strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-login,
    .mobile-actions a,
    .mobile-panel a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border-radius: 7px;
        font-weight: 900;
    }

    .mobile-login {
        flex: 0 0 auto;
        padding: 0 16px;
        background: var(--gold);
        color: #07130f;
    }

    .mobile-hero {
        padding: 72px 0 42px;
    }

    .mobile-hero p,
    .mobile-products small {
        margin: 0 0 10px;
        color: var(--gold);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .mobile-hero h1 {
        max-width: 11ch;
        margin: 0;
        color: #fff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 44px;
        line-height: 1;
    }

    .mobile-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 28px;
    }

    .mobile-actions a:first-child,
    .mobile-panel a {
        background: #038a62;
        color: #fff;
    }

    .mobile-actions a:last-child {
        border: 1px solid rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .mobile-products {
        display: grid;
        gap: 12px;
    }

    .mobile-products a,
    .mobile-panel {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        background: rgba(8, 25, 21, 0.88);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    }

    .mobile-products a {
        display: grid;
        gap: 7px;
        padding: 18px;
    }

    .mobile-products strong {
        color: #fff;
        font-size: 22px;
    }

    .mobile-products span,
    .mobile-panel p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.55;
    }

    .mobile-panel {
        display: grid;
        gap: 14px;
        margin-top: 12px;
        padding: 20px;
    }

    .mobile-panel h2 {
        margin: 0;
        color: #fff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 30px;
        line-height: 1.08;
    }

    .mobile-panel p {
        margin: 0;
    }

    .login-page {
        display: block;
        padding: 22px;
    }

    .login-shell {
        width: 100%;
        min-height: calc(100vh - 44px);
        align-content: center;
    }

    .login-shell h1 {
        font-size: 38px;
    }

    .login-card {
        padding: 20px;
    }
}

@media (max-width: 380px) {
    .mobile-hero h1 {
        font-size: 38px;
    }

    .mobile-brand strong {
        max-width: 150px;
    }
}