:root{
  --bg:#FFFDF3;
  --white:#ffffff;
  --text:#111111;
  --muted:#333333;
  --muted2:#666666;
  --accent:#C73E0A;
  --accentHover:#A63308;
  --borderSoft:#E3DDD1;
  --title:#D65050;
  --radius:8px;
  --container:1120px;
  --card:820px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Source Sans Pro","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.site-header{background:var(--white);height:80px;display:flex;align-items:center;}
.header-inner{width:100%;display:flex;align-items:center;justify-content:space-between;}
.header-left img{height:40px;width:auto;display:block;object-fit:contain;}
.lang{display:flex;align-items:center;gap:24px;}
.lang a{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;color:var(--text);}
.lang a[aria-current="page"]{text-decoration-thickness:3px;}
.footer-strip{width:100%;display:block;height:auto;}
/* landing */
.landing{padding:60px 0 80px;}
.landing-title{font-size:44px;line-height:1.15;margin:0;font-weight:700;}
.landing-lead{margin:16px 0 0;font-size:18px;line-height:1.5;color:var(--muted);max-width:820px;}
.roles{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.role-card{cursor:pointer;user-select:none;background:transparent;border:0;padding:0;}
.role-card .inner{padding:0;}
.role-card.active .inner{background:var(--white);border:2px solid var(--accent);border-radius:var(--radius);padding:24px;}
.role-title{display:flex;align-items:flex-start;gap:12px;margin:0;font-size:26px;font-weight:600;color:var(--accent);line-height:1.1;}
.role-desc{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--muted);}
.center-actions{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.select{width:320px;height:48px;border-radius:8px;border:2px solid var(--accent);background:var(--white);color:var(--accent);font-size:16px;font-weight:600;padding:0 14px;}
.btn{width:320px;height:48px;border-radius:8px;background:var(--accent);color:var(--white);border:none;font-size:18px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:14px;}
.btn:hover{background:var(--accentHover);}
.btn .icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;}
/* form */
.form{padding:40px 0 70px;}
.form-card{max-width:var(--card);margin:0 auto;background:var(--white);border:1px solid var(--borderSoft);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.form-pad{padding:44px;}
.form-title{text-align:center;font-size:44px;font-weight:600;margin:0;color:var(--title);}
.form-sub{text-align:center;margin-top:10px;font-size:13px;line-height:1.45;color:var(--muted2);max-width:680px;margin-left:auto;margin-right:auto;}
.section-title{margin-top:34px;margin-bottom:10px;font-size:18px;font-weight:700;color:var(--accent);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-doc{display:grid;grid-template-columns:180px 1fr;gap:16px;}
.field{margin-top:12px}
.field label{display:block;margin-bottom:8px;font-size:18px;font-weight:700;color:var(--accent);}
.control{width:100%;height:48px;border-radius:8px;border:1px solid var(--borderSoft);background:var(--white);padding:0 14px;font-size:16px;}
.controls-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.actions{margin-top:36px;display:flex;justify-content:space-between;align-items:center;}
.btn-outline{height:48px;border-radius:999px;border:1px solid var(--borderSoft);background:transparent;padding:0 22px;cursor:pointer;font-size:14px;}
.btn-primary{height:48px;border-radius:999px;border:none;background:var(--accent);color:var(--white);padding:0 40px;cursor:pointer;font-size:16px;font-weight:700;}
.btn-primary:hover{background:var(--accentHover);}

/* validation (only applied when JS adds the classes; does not affect layout by default) */
.control.is-invalid{border:2px solid var(--title);}
.field-error{margin-top:6px;font-size:12px;line-height:1.3;color:var(--title);}

/* accessibility */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(max-width:900px){
  .roles{grid-template-columns:1fr;}
  .grid-2,.grid-doc{grid-template-columns:1fr;}
  .form-pad{padding:28px 22px;}
  .lang{gap:16px}
}



/* bank login card */
.bank-shell{padding:54px 0 80px;}
.bank-wrap{max-width:760px;margin:0 auto;}
.bank-back{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:18px;font-weight:600;margin-bottom:26px;}
.bank-back:hover{text-decoration:underline;}
.bank-title{font-size:30px;line-height:1.2;font-weight:600;margin:0 0 24px;}
.bank-tabs{display:flex;gap:28px;margin:0 0 18px;padding:0;list-style:none;}
.bank-tabs a{color:var(--muted2);text-decoration:none;font-size:18px;padding-bottom:6px;border-bottom:1px solid transparent;}
.bank-tabs a.active{color:var(--text);border-bottom-color:var(--accent);}
.bank-card{max-width:430px;background:var(--white);border:1px solid var(--borderSoft);box-shadow:0 1px 2px rgba(0,0,0,.04);padding:34px 34px 28px;border-radius:2px;}
.bank-auth-logo-wrap{display:flex;justify-content:center;align-items:center;margin-bottom:30px;}
.bank-auth-logo{min-height:56px;display:flex;align-items:center;justify-content:center;padding:8px 18px;border-bottom:3px solid var(--accent);font-size:34px;font-weight:700;color:var(--accent);letter-spacing:.2px;text-align:center;}
.bank-login-grid{display:grid;gap:18px;}
.bank-login-field{display:grid;gap:8px;}
.bank-login-label{display:block;font-size:14px;color:var(--muted2);font-weight:600;}
.bank-login-input{width:100%;height:54px;border:none;border-bottom:1px solid var(--borderSoft);background:transparent;padding:0 4px;font-size:19px;color:var(--text);border-radius:0;}
.bank-login-input:focus{outline:none;border-bottom:2px solid var(--accent);}
.bank-login-input[readonly]{color:#4f4f4f;background:transparent;}
.bank-login-actions{margin-top:26px;}
.bank-login-btn{width:100%;height:50px;border:none;border-radius:4px;background:var(--accent);color:var(--white);font-size:18px;font-weight:700;cursor:pointer;}
.bank-login-btn:hover{background:var(--accentHover);}
@media(max-width:900px){
  .bank-shell{padding-top:34px;}
  .bank-card{max-width:100%;padding:24px 20px;}
  .bank-auth-logo{font-size:28px;min-height:48px;}
}