:root{
    --blue-700:#1f6f91;
    --blue-800:#1a627f;
    --blue-300:#7db8d1;
    --blue-200:#a9d3e3;
    --blue-100:#cfe8f1;
    --ink:#0f2e3a;
    --muted:#6b7a86;
    --accent:#176ea5;
    --danger:#d9534f;
    --card:#ffffff;
    --shadow:0 8px 30px rgba(0,0,0,.15);
}

html,body{
    height:100%;
}
body{
    margin:0;
    font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:#fff;
}

/* Layout */
.wrap{
    display:grid;
    grid-template-columns: 1fr 1fr;
    min-height:100vh;
}
.left{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 24px 0;
    overflow:hidden;
    background:#fff;
}
.right{
    /* Replaced gradient with your background image */
    background:
        linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)), /* subtle readability veil */
        url("https://marketplace-web01.parklogic.com/images/bg-06.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
}

/* Left content */
.left-inner{
    max-width:620px;
    text-align:center;
}
.eyebrow{
    letter-spacing:.35em;
    font-size:12px;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:10px;
}
.domain{
    font-family:"Montserrat",sans-serif;
    font-weight:700;
    font-size: clamp(14px, 6vw, 36px);
    color:var(--accent);
    margin:0 0 12px 0;
}
.sub{
    font-weight:600;
    color:var(--ink);
    margin:0 0 16px 0;
}
.tiny{
    font-size:13px;
    color:var(--muted);
    line-height:1.5;
    max-width:520px;
    margin:0 auto;
}

/* Waves */
.waves{
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    pointer-events:none;
}
.waves svg{
    display:block;
    width:100%;
    height:auto;
}

/* Card/form */
.card{
    width:min(640px, 92vw);
    background:var(--card);
    border-radius:8px;
    box-shadow:var(--shadow);
    padding:40px 44px;
}
.card h2{
    margin:0 0 24px 0;
    text-align:center;
    font-weight:700;
    font-size:24px;
    letter-spacing:.08em;
    color:var(--muted);
    text-transform:uppercase;
}
.card .headline{
    margin:-6px 0 24px 0;
    text-align:center;
    font-family:"Montserrat",sans-serif;
    font-weight:700;
    color:var(--accent);
    font-size: clamp(14px, 5vw, 24px);
}

form{
    display:grid;
    gap:18px;
}
.fld{
    display:flex;
    flex-direction:column;
}
.lbl{
    font-size:15px;
    font-weight:700;
    color:#2b3c45;
    margin-bottom:6px;
}
.req{
    font-size:12px;
    color:var(--danger);
    margin-top:6px;
    visibility:hidden;
}
.error-text{
    font-size:12px;
    color:var(--danger);
    margin-top:6px;
    display:none;
}

.inp{
    border:none;
    border-bottom:2px solid #e5edf2;
    padding:12px 8px;
    font-size:16px;
    outline:none;
    background:#fff;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.inp:focus{
    border-bottom-color:var(--accent);
    box-shadow:0 2px 0 0 var(--accent);
}
.invalid{
    border-bottom-color:var(--danger) !important;
    box-shadow:0 2px 0 0 var(--danger) !important;
}

.row{
    display:grid;
    gap:18px;
    grid-template-columns: 1fr 1fr;
}

/* EUR prefix input */
.prefix-input{
    display:flex;
    align-items:center;
    gap:8px;
    border-bottom:2px solid #e5edf2;
    padding-bottom:2px;
}
.prefix-input:focus-within{
    border-bottom-color:var(--accent);
    box-shadow:0 2px 0 0 var(--accent);
}
.prefix{
    font-weight:700;
    color:#2b3c45;
    white-space:nowrap;
}
.prefix-input .inp{
    border:none;
    padding-left:0;
}

.captcha{
    border:1px solid #d8dee4;
    border-radius:4px;
    padding:10px;
    height:78px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#495a64;
    background:#fafbfc;
}
.captcha .box{
    width:22px;
    height:22px;
    border:2px solid #b9c3ca;
    border-radius:3px;
    background:#fff;
}

.btnbar{
    display:flex;
    justify-content:center;
    margin-top:8px;
}
.btn{
    appearance:none;
    border:none;
    border-radius:32px;
    padding:14px 32px;
    font-weight:700;
    letter-spacing:.03em;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
    transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;
    box-shadow:0 6px 20px rgba(23,110,165,.35);
}
.btn:active{
    transform:translateY(1px);
}
.btn:hover{
    filter:brightness(1.05);
}

.footer{
    position:absolute;
    right:16px;
    bottom:20px;
    font-size:12px;
    color:#8aa0ad;
}
.footer a{
    color:#8aa0ad;
    text-decoration:none;
    border-bottom:1px dotted #8aa0ad;
}

@media (max-width: 980px){
    .wrap{
        grid-template-columns: 1fr;
    }
    .left{
        padding-bottom:160px;
    }
    .right{
        padding:28px 16px 56px;
    }
    .card{
        padding:28px 20px;
    }
    .row{
        grid-template-columns: 1fr;
    }
    .footer{
        position:static;
        margin-top:14px;
        text-align:center;
        width:100%;
    }
}