*{box-sizing:border-box}
:root{
  --ei-navy:#0b2e54;
  --ei-blue:#09a7e3;
  --ei-cyan:#23c7ef;
  --ei-text:#183a57;
  --ei-muted:#6b7f91;
  --ei-line:#d9ebf5;
  --ei-bg:#f7fbfe;
  --ei-card:rgba(255,255,255,.95);
}
html,body{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ei-text);
  background:#eef5fb url("/static/img/unified_background.png") center top / cover no-repeat fixed;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.14));
  pointer-events:none;
  z-index:0;
}
body>*{position:relative;z-index:1}
.topbar{
  min-height:72px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(11,46,84,.08);
  box-shadow:0 4px 20px rgba(11,46,84,.05);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  backdrop-filter:blur(10px);
}
.brand{
  font-size:20px;
  font-weight:900;
  color:var(--ei-navy);
  text-decoration:none;
  letter-spacing:-.02em;
}
.brand::before{
  content:"";
  display:inline-block;
  width:9px;height:28px;
  border-radius:5px;
  background:linear-gradient(180deg,var(--ei-blue),#0579bb);
  margin-right:9px;
  vertical-align:middle;
  box-shadow:8px 7px 0 -2px #0b5c96,16px -2px 0 -2px #0b2e54;
}
.topnav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.container{max-width:1160px;margin:0 auto;padding:38px 24px 70px;position:relative}
h1,h2,h3{color:var(--ei-navy);letter-spacing:-.02em}
h1{font-size:clamp(30px,4vw,46px);line-height:1.05}
h2{line-height:1.15}
.card{
  background:var(--ei-card);
  border:1px solid var(--ei-line);
  border-radius:22px;
  padding:28px;
  box-shadow:0 18px 50px rgba(11,46,84,.10);
  backdrop-filter:blur(8px);
}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border-radius:10px;text-decoration:none;
  font-weight:800;cursor:pointer;font-size:14px;border:1px solid transparent;
  transition:.18s ease;
}
.button:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(11,46,84,.10)}
.button-primary{background:linear-gradient(135deg,var(--ei-cyan),var(--ei-blue));color:#fff}
.button-secondary{background:#fff;border-color:#78cdec;color:#087ba8}
.button-green{background:linear-gradient(135deg,#0b91bf,#13b6d9);color:#fff}
.muted{color:var(--ei-muted)}
.success,.error,.note{padding:15px 17px;border-radius:12px;margin:18px 0}
.success{background:#edf9f6;color:#176847;border:1px solid #d7efe7}
.error{background:#fff0f0;color:#a22a2a;border:1px solid #efc7c7}
.note{background:#eef8fd;color:#35667f;border:1px solid #d9eef8;line-height:1.5}
.stepper{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.step{padding:8px 11px;border-radius:999px;background:#edf3f7;color:#708392;font-size:12px;font-weight:800;border:1px solid #e3edf3}
.step.done{background:#eef9f6;color:#17735b;border-color:#d9eee7}
.step.active{background:#eaf8fe;color:#057fab;border-color:#bfe9f7}
.profile-grid,.form-grid,.choice-grid,.flow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.profile-field,.flow-panel{padding:16px;background:#f9fcfe;border-radius:14px;border:1px solid #e3eef4}
.profile-label{display:block;font-size:11px;text-transform:uppercase;font-weight:800;color:#81919a;margin-bottom:5px}
.profile-value{font-weight:800}
.form-field label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}
.form-field input,.form-field select,.form-field textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cbdde8;border-radius:9px;font-size:15px;background:#fff}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.flow-label{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;text-transform:uppercase;margin-bottom:8px}
.flow-label.mobile{background:#e8f6fd;color:#087ba8}.flow-label.cloud{background:#ecf8f4;color:#117a65}
.qr-image{width:250px;height:250px;max-width:100%;object-fit:contain;display:block;margin:15px auto;background:#fff;padding:10px;border-radius:12px;border:1px solid #e2edf3}
.code-link{margin-top:12px;padding:12px;border:1px solid #dce6eb;border-radius:9px;background:#fff;color:#617682;font-size:11px;word-break:break-all}
.bank-a-banner,.bank-b-banner{padding:24px 26px;border-radius:18px;color:#fff;margin-bottom:22px;box-shadow:0 12px 28px rgba(11,46,84,.10)}
.bank-a-banner{background:linear-gradient(135deg,#0b2e54,#08a9df)}
.bank-b-banner{background:linear-gradient(135deg,#0a527d,#18b8d9)}
.bank-a-banner h1,.bank-b-banner h1{color:#fff}
.language-switch{display:flex;gap:6px;align-items:center;margin-left:8px}
.language-switch a{padding:8px 10px;border-radius:999px;border:1px solid #8ed5ef;text-decoration:none;font-weight:800;font-size:12px;color:#0a5070;background:#fff}
.language-switch a.active{background:var(--ei-blue);color:#fff;border-color:var(--ei-blue)}
@media(max-width:800px){
  body{background-attachment:scroll;background-position:62% 0}
  body::before{inset:0}
  .choice-grid,.flow-grid,.profile-grid,.form-grid{grid-template-columns:1fr}
  .topbar{padding:12px 16px;align-items:flex-start;gap:12px}.topnav{justify-content:flex-end}
}

.tech-note{margin-top:22px;padding:16px 18px;border-radius:14px;border:1px solid #b8dff0;background:rgba(240,249,253,.96);color:#31576c;line-height:1.5}
.tech-note strong{color:#0b2e54}.tech-note code{font-family:Consolas,monospace;background:#fff;padding:2px 5px;border-radius:5px}
.protocol-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:24px}
.protocol-step{padding:12px 10px;border-radius:12px;background:rgba(255,255,255,.95);border:1px solid #d7eaf4;text-align:center;font-size:12px;font-weight:800;color:#244b62}
.protocol-step b{display:block;color:#08a0d8;font-size:11px;margin-bottom:4px}
@media(max-width:900px){.protocol-strip{grid-template-columns:1fr 1fr}}