/* =====================================================================
   Aanmelden — huisstijl van de Intermat Online Toolbox (intermat-tools.be),
   overgenomen van het Salesdashboard zodat alle tools er hetzelfde uitzien.
   Altijd donker, los van het thema van de app.
   ===================================================================== */
:root{
  --navy:#0a2936; --navy-top:#14485a; --kaart:#12384a;
  --cyaan:#62bee3; --cyaan-vol:#379fca; --op-cyaan:#04222e;
  --tekst:#f2f7fa; --tekst-dim:#a4bfcc;
  --lijn:rgba(255,255,255,.12); --invoer:rgba(255,255,255,.055);
  --fout:#f0796f; --melding-fout:#ffd9d6;
  --hex-lijn:rgba(98,190,227,.16); --hex-vlak:rgba(98,190,227,.045);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--tekst);background:var(--navy) linear-gradient(145deg,var(--navy-top) 0%,var(--navy) 62%);
  font-family:Barlow,"Segoe UI",system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;position:relative;overflow-x:clip}

/* zeshoeken op de achtergrond, zoals het logo */
.hex{position:fixed;pointer-events:none;z-index:0}
.hex.een{top:-120px;right:-150px;width:560px;height:560px;transform:rotate(-8deg)}
.hex.twee{bottom:-190px;left:-190px;width:480px;height:480px;transform:rotate(12deg)}
@media (max-width:640px){.hex{display:none}}

/* de kaart: kort cyaan streepje linksboven */
.kaart{border:1px solid var(--lijn);border-radius:13px;padding:34px 32px 28px;width:100%;max-width:400px;position:relative;z-index:1;
  background:var(--kaart) linear-gradient(90deg,var(--cyaan-vol) 0 46px,transparent 46px) no-repeat;background-size:100% 3px;
  box-shadow:0 22px 60px rgba(0,0,0,.4)}
.logo{display:block;margin:0 auto 12px;height:40px;width:auto;max-width:280px;mix-blend-mode:screen;object-fit:contain}
.subtitel{text-align:center;color:var(--cyaan);text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:600;margin:0 0 26px}
.uitleg{color:var(--tekst-dim);font-size:13.5px;text-align:center;margin:-12px 0 22px}

label{display:block;color:var(--cyaan);text-transform:uppercase;font-size:11px;letter-spacing:.1em;margin-bottom:6px;font-weight:600}
input{width:100%;background:var(--invoer);border:1px solid var(--lijn);color:var(--tekst);padding:11px 12px;border-radius:8px;
  font-size:14px;font-family:inherit;margin-bottom:16px}
input:focus{outline:none;border-color:var(--cyaan)}
button{width:100%;background:var(--cyaan-vol);color:var(--op-cyaan);border:none;padding:13px;border-radius:10px;
  font-size:15px;font-weight:700;font-family:inherit;cursor:pointer}
button:hover{filter:brightness(1.08)}
button:focus-visible{outline:2px solid var(--cyaan);outline-offset:2px}

.melding{background:rgba(240,121,111,.15);border:1px solid var(--fout);color:var(--melding-fout);padding:11px 14px;border-radius:8px;margin-bottom:18px;font-size:13.5px}

footer{color:rgba(255,255,255,.34);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:26px;text-align:center;position:relative;z-index:1}