/* ════════════════════════════════════════════════════════════
   Alenas — Auth-pagina's (login / register / agreement / join)
   Split-screen in de nieuwe lichte stijl. Standalone (eigen head).
   ════════════════════════════════════════════════════════════ */
:root{--bg:#FCFCFD;--ink:#14181E;--body:#586472;--mut:#8A94A3;--blu:#5B8FF9;--blud:#3E67D6;--line:rgba(20,24,30,.10);
  --d:'Plus Jakarta Sans',sans-serif;--s:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body.auth-body{font-family:var(--s);color:var(--ink);background:#fff}
.auth-body a{text-decoration:none;color:inherit}
.auth-body svg{display:block}
.auth-body img{display:block;max-width:100%}
.auth{display:flex;min-height:100vh}

/* LINKS: promo-paneel */
.auth-left{flex:1.05;position:relative;overflow:hidden;display:flex;align-items:center;
  background:linear-gradient(150deg,#05070d 0%,#0a1526 38%,#1c3a6e 72%,#2f56a8 100%);color:#fff;padding:64px}
.auth-left__glow{position:absolute;inset:0;background:radial-gradient(520px 380px at 22% 34%,rgba(91,143,249,.22),transparent 60%);pointer-events:none;animation:glowPulse 12s ease-in-out infinite}
.auth-left__orb{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0}
.auth-left__orb--1{width:360px;height:360px;background:radial-gradient(circle,rgba(91,143,249,.45),transparent 70%);top:-70px;left:8%;animation:orb1 16s ease-in-out infinite}
.auth-left__orb--2{width:300px;height:300px;background:radial-gradient(circle,rgba(62,103,214,.42),transparent 70%);bottom:-60px;left:32%;animation:orb2 20s ease-in-out infinite}
.auth-left__orb--3{width:240px;height:240px;background:radial-gradient(circle,rgba(124,166,251,.3),transparent 70%);top:34%;right:-40px;animation:orb3 18s ease-in-out infinite}
.auth-left__inner{position:relative;max-width:440px;margin:0 auto 0 6%}
.auth-left .eyebrow{font-family:var(--d);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9DBBFA}
.auth-left h1{font-family:var(--d);font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2.4rem,4vw,3.4rem);margin:16px 0 18px}
.auth-left h1 .hl{color:#7CA6FB}
.auth-left .lead{font-size:1.05rem;line-height:1.6;color:#c9d3e2;max-width:30em;margin-bottom:38px}
.auth-left .lead a{color:#9DBBFA;font-weight:600;border-bottom:1px solid rgba(157,187,250,.4)}
.auth-left .lead a:hover{color:#c9d3e2;border-bottom-color:#c9d3e2}
.features{list-style:none;display:flex;flex-direction:column;gap:22px}
.features li{display:flex;gap:14px;align-items:flex-start}
.features .ic{width:40px;height:40px;flex-shrink:0;border-radius:11px;background:rgba(124,166,251,.14);border:1px solid rgba(124,166,251,.22);color:#9DBBFA;display:flex;align-items:center;justify-content:center}
.features .ic svg{width:19px;height:19px}
.features .t{font-family:var(--d);font-weight:700;font-size:15px}
.features .st{font-size:13px;color:#9aa7bb;margin-top:2px}

/* RECHTS: formulier */
.auth-right{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:40px}
.auth-form{width:100%;max-width:400px}
.auth-logo{width:52px;height:52px;background:url(../images/alenas-mark.png) center/contain no-repeat;margin:0 auto 22px}
.auth-form h2{font-family:var(--d);font-weight:800;font-size:1.7rem;text-align:center;margin-bottom:8px}
.auth-form .sub{text-align:center;color:var(--body);font-size:.95rem;margin-bottom:30px}
.fld{margin-bottom:18px}
.fld label{display:block;font-family:var(--d);font-weight:600;font-size:11px;letter-spacing:.08em;color:var(--mut);margin-bottom:8px;text-transform:uppercase}
.fld input,.fld select{width:100%;border:1px solid var(--line);border-radius:11px;padding:14px 15px;font-size:15px;font-family:var(--s);color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.fld select{cursor:pointer}
.fld input::placeholder{color:#aab2bf}
.fld small{display:block;font-size:12px;color:var(--mut);margin-top:6px;line-height:1.4}
.fld input.is-error,.fld select.is-error{border-color:#d67c7c;box-shadow:0 0 0 4px rgba(216,88,88,.12)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 4px rgba(91,143,249,.16)}
.forgot{display:block;text-align:right;font-size:13px;color:var(--body);margin:-4px 0 22px}
.forgot:hover{color:var(--blud)}
.auth-error{color:#C0504A;background:rgba(216,88,88,.08);border:1px solid rgba(216,88,88,.28);border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.45;margin-bottom:16px}
.auth-error:empty{display:none}
.auth-note-ok{color:#12805A;background:rgba(23,160,107,.10);border:1px solid rgba(23,160,107,.28);border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.45;margin-bottom:16px}
.auth-note-ok:empty{display:none}
.btn{width:100%;border:none;background:var(--blu);color:#fff;font-family:var(--d);font-weight:700;font-size:15px;padding:15px;border-radius:11px;cursor:pointer;box-shadow:0 14px 30px -12px rgba(91,143,249,.7);transition:background .15s,transform .15s}
.btn:hover{background:var(--blud);transform:translateY(-1px)}
.btn:disabled{opacity:.65;cursor:default;transform:none}
.note{text-align:center;font-size:14px;color:var(--body);margin-top:24px}
.note a{color:var(--blud);font-weight:600}
.support{text-align:center;font-size:12.5px;color:var(--mut);margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.support a{color:var(--blud);font-weight:600}

/* Agreement-checkboxes */
.chk{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.chk:last-of-type{border-bottom:none;margin-bottom:8px}
.chk input{width:20px;height:20px;flex-shrink:0;accent-color:var(--blu);margin-top:1px;cursor:pointer}
.chk span{font-size:13.5px;line-height:1.5;color:var(--ink)}
.chk a{color:var(--blud);font-weight:600}

/* Join-opt-in */
.optin{display:flex;gap:11px;align-items:flex-start;margin:2px 0 22px;cursor:pointer}
.optin input{width:18px;height:18px;flex-shrink:0;accent-color:var(--blu);margin-top:1px;cursor:pointer}
.optin span{font-size:13px;line-height:1.5;color:var(--body)}

@keyframes glowPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,34px)}}
@keyframes orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,-46px)}}
@keyframes orb3{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}
@media (prefers-reduced-motion:reduce){.auth-left__glow,.auth-left__orb{animation:none}}

@media (max-width:900px){
  .auth-left{display:none}
  .auth-right{padding:32px 22px}
}