/* =====================================================================
Project:        saramacca.co.uk
Author:         Michael Braam
Organisation:   Aivion Studios
Framework:      Custom Build (Aivion Nexus Inspired Design System)

Copyright ©
Michael Braam / Aivion Studios. All rights reserved.
Visit for more info: www.aivionstudios.nl

This source code and its design structure are proprietary.
Redistribution, modification or commercial use is prohibited
without explicit written permission from the author.

Original release:  20-01-2026 | V1.0
Last Updated:      -
====================================================================== */

:root{
    --bg:#f4f5f7;
    --ink:#0b1220;
    --muted:#5b6b83;
    --shadow:0 28px 90px rgba(0,0,0,.18);
    --radius:28px;
    --max:1120px;

    --c-blue: rgba(95, 160, 255, .16);
    --c-rose: rgba(255, 135, 170, .14);
    --c-warm: rgba(255, 215, 160, .12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
    margin:0;
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:46px 20px 34px;
    background: var(--bg);
    color:var(--ink);

    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x:hidden;
}

/* Background motif */
.bg{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
    background:
            radial-gradient(1100px 560px at 50% 18%, rgba(255,255,255,.70), transparent 62%),
            radial-gradient(1200px 740px at 50% 110%, rgba(0,0,0,.05), transparent 55%),
            var(--bg);
}
.bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            repeating-linear-gradient(135deg,
            rgba(15,23,42,.07) 0px,
            rgba(15,23,42,.07) 1px,
            transparent 1px,
            transparent 10px
            ),
            repeating-linear-gradient(135deg,
            rgba(15,23,42,.035) 0px,
            rgba(15,23,42,.035) 1px,
            transparent 1px,
            transparent 22px
            );
    opacity:.50;
    filter: blur(.2px);
    mask-image: radial-gradient(900px 520px at 50% 35%, rgba(0,0,0,.95), transparent 80%);
}

.wrap{
    width:min(96vw, var(--max));
    display:grid;
    gap:14px;
    justify-items:center;
}

.wrap--login{
    align-items:center;
}

.card{
    width:100%;
    min-height:560px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    position:relative;

    background:
            linear-gradient(
                    90deg,
                    rgba(255,255,255,.98) 0%,
                    rgba(255,255,255,.94) 40%,
                    rgba(255,255,255,.72) 58%,
                    rgba(255,255,255,.40) 74%,
                    rgba(255,255,255,.18) 100%
            ),
            url("/images/background.png") no-repeat;

    background-size:cover;
    background-position:right center;
}

.card::before{
    content:"";
    position:absolute;
    inset:-6%;
    pointer-events:none;
    background:
            radial-gradient(420px 320px at 22% 30%, var(--c-blue), transparent 72%),
            radial-gradient(520px 380px at 70% 22%, var(--c-rose), transparent 74%),
            radial-gradient(560px 420px at 60% 86%, var(--c-warm), transparent 76%),
            radial-gradient(520px 420px at 18% 85%, rgba(15,23,42,.05), transparent 78%);
    filter: blur(18px);
    opacity:.65;
    mix-blend-mode: multiply;
}
.card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
            radial-gradient(900px 520px at 20% 35%, rgba(255,255,255,.28), transparent 60%),
            radial-gradient(1200px 720px at 90% 55%, rgba(0,0,0,.06), transparent 55%);
    opacity:.55;
}

.card__content{
    position:relative;
    z-index:1;
    max-width:700px;
    padding:66px 66px;
}

.card--login{
    display:flex;
    align-items:center;
    min-height:620px;
}

.card__content--login{
    width:min(100%, 540px);
}

.eyebrow{
    margin:0 0 14px;
    font-size:12px;
    line-height:1;
    letter-spacing:.24em;
    text-transform:uppercase;
    font-weight:700;
    color:rgba(11,18,32,.58);
}

h1{
    margin:0 0 16px;
    font-size:clamp(28px, 2.6vw, 46px);
    line-height:1.05;
    letter-spacing:-0.035em;
    font-weight:820;
}

p{
    margin:0 0 14px;
    line-height:1.68;
    font-size:16px;
    color:rgba(11,18,32,.88);
}

.lead{
    max-width:34rem;
    font-size:17px;
    color:rgba(11,18,32,.78);
}

.address{
    margin-top:14px;
    padding-left:14px;
    border-left:3px solid rgba(11,18,32,.18);
    color:rgba(11,18,32,.86);
}

.contact{
    margin-top:22px;
    display:grid;
    gap:10px;
}

.contact__row{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15.5px;
    color:rgba(11,18,32,.92);
}

.icon{
    width:18px;
    height:18px;
    display:inline-block;
    color:rgba(11,18,32,.72);
}
.icon svg{ width:18px; height:18px; display:block; }

.contact a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid rgba(11,18,32,.18);
}
.contact a:hover{
    border-bottom-color: rgba(11,18,32,.38);
}

.login-panel{
    width:min(100%, 430px);
    margin-top:30px;
    padding:24px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.62);
    background:rgba(255,255,255,.56);
    box-shadow:0 22px 55px rgba(15,23,42,.12);
    backdrop-filter: blur(18px);
}

.login-form{
    display:grid;
    gap:16px;
}

.login-field{
    display:grid;
    gap:8px;
}

.login-label{
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:700;
    color:rgba(11,18,32,.72);
}

.login-input{
    width:100%;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid rgba(11,18,32,.12);
    background:rgba(255,255,255,.88);
    color:var(--ink);
    font:inherit;
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.login-input:focus{
    outline:none;
    border-color:rgba(95,160,255,.55);
    box-shadow:0 0 0 4px rgba(95,160,255,.16);
    background:#fff;
}

.login-alert{
    margin:0 0 18px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid transparent;
    font-size:14px;
    line-height:1.55;
}

.login-alert--success{
    color:#114332;
    background:rgba(62, 168, 115, .10);
    border-color:rgba(62, 168, 115, .22);
}

.login-alert--error{
    color:#7a1821;
    background:rgba(205, 67, 84, .10);
    border-color:rgba(205, 67, 84, .18);
}

.login-actions{
    margin:0 0 18px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.login-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:52px;
    padding:14px 18px;
    border:0;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(11,18,32,.96), rgba(31,61,121,.94));
    box-shadow:0 18px 34px rgba(15,23,42,.18);
    color:#fff;
    font:inherit;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.login-button:hover{
    transform:translateY(-1px);
    box-shadow:0 22px 38px rgba(15,23,42,.22);
}

.login-button--secondary{
    width:auto;
    min-height:46px;
    padding:12px 18px;
    background:rgba(255,255,255,.76);
    color:var(--ink);
    border:1px solid rgba(11,18,32,.10);
    box-shadow:none;
}

.login-note{
    margin:18px 0 0;
    font-size:14px;
    color:rgba(11,18,32,.58);
}

footer{
    text-align:center;
    font-size:13px;
    color:var(--muted);
}
footer p{ margin:0; } /* voorkomt rare mobiele spacing */

@media (max-width: 720px){
    body{
        min-height: 100vh;
        padding: 18px 14px;
        display: grid;
        place-items: center;
    }
    .wrap{
        width: 100%;
        gap: 12px;
        justify-items: center;
    }
    .card{
        width: min(94vw, 520px);
        min-height: clamp(360px, 62vh, 520px);
        border-radius: 22px;
        box-shadow: 0 18px 55px rgba(0,0,0,.18);
        background-position: 78% 45%;
    }

    .card__content{
        padding: 24px 22px;
        max-width: unset;
    }

    .card--login{
        min-height: unset;
        align-items: stretch;
    }

    .card__content--login{
        width: 100%;
    }

    .lead{
        font-size:16px;
    }

    .login-panel{
        width:100%;
        margin-top:24px;
        padding:18px;
        border-radius:20px;
    }

    .login-actions{
        flex-direction:column;
    }

    .login-button--secondary{
        width:100%;
    }

    footer{
        margin-top: 6px;
        background: transparent;
        padding: 0;
        text-align: center;
    }
}