:root{
  --border-blue:#2f6fed;
  --text-dark:#0f1b33;
  --text-muted:#8993a4;
  --field-bg:#eef0f2;
  --banner-bg:#fdf1c7;
  --banner-border:#f6e6a8;
  --link-blue:#2f6fed;
  --signin-blue:#8ec5f5;
  --signin-blue-hover:#78b7f2;
  --orange:#f5c479;
  --orange-dark:#f0b45f;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f7f8fa;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text-dark);
  padding:24px;
}

.card{
  width:100%;
  max-width:600px;
  background:#ffff;
  border:1px dashed var(--border-blue);
  border-radius:14px;
  padding:32px 100px 40px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-bottom:24px;
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0px;
  margin-bottom:24px;
}
.brand img{ width:32px; height:32px; }

.brand-text{
  position:relative;
  display:inline-block;
}
.brand-text .brand-name{
  font-size:22px;
  font-weight:700;
  color:#3699f0;
  line-height:1;
}
.brand-text .brand-sub{
  position:absolute;
  right:-6px;
  bottom:-10px;
  font-size:11px;
  font-weight:700;
  color:#e0912b;
  font-style:italic;
}

h1{
  text-align:center;
  font-size:26px;
  font-weight:700;
  margin:0 0 20px;
  color:var(--text-dark);
}

.banner{
  background:var(--banner-bg);
  border:1px solid var(--banner-border);
  border-radius:10px;
  padding:20px 24px;
  text-align:center;
  margin-bottom:24px;
}
.banner p{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.5;
  color:#3a3f2f;
}
.banner a{
  color:var(--link-blue);
  text-decoration:none;
  font-weight:600;
}
.banner a:hover{ text-decoration:underline; }

.lang-toggle{
  display:inline-flex;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #e3d9a0;
}
.lang-toggle button{
  border:none;
  padding:6px 18px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  background:#fff;
  color:#333;
}
.lang-toggle button.active{
  background:var(--border-blue);
  color:#fff;
}

.field{
  margin-bottom:16px;
}

input[type="email"],
input[type="password"]{
  width:100%;
  border:1px solid #e2e5ea;
  background:var(--field-bg);
  border-radius:8px;
  padding:10px 16px 24px;
  font-size:12px;
  color:var(--text-dark);
  outline:none;
}
input::placeholder{ color:#9aa1ac; }
input:focus{
  border-color:var(--border-blue);
  box-shadow:0 0 0 3px rgba(47,111,237,0.15);
}

.signin-btn {
    display: block;
    width: 400px;
    margin: 0 auto;
    border: none;
    border-radius: 8px;
    padding: 14px 30px;
    background: var(--signin-blue);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.signin-btn:hover {
    background: var(--signin-blue-hover);
}
.forgot{
  text-align:center;
  margin:20px 0 20px;
}
.forgot a{
  color:var(--text-muted);
  font-size:14px;
  text-decoration:none;
}
.forgot a:hover{ text-decoration:underline; }

.mini-links{
  display:flex;
  gap:16px;
  margin-bottom:20px;
}
.mini-links .box{
  flex:1;
  border:1px dashed #d7dbe0;
  border-radius:8px;
  padding:16px 12px;
  text-align:center;
  font-size:13.5px;
  color:var(--text-dark);
}
.mini-links .box a{
  color:var(--link-blue);
  text-decoration:none;
  font-weight:600;
}
.mini-links .box a:hover{ text-decoration:underline; }

.corporate-btn{
  display:block;
  width:70%;
  margin:0 auto;
  border:none;
  border-radius:8px;
  padding:16px 16px;
  background:var(--orange);
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease;
}
.corporate-btn:hover{ background:var(--orange-dark); }

@media (max-width:480px){
  .card{ padding:24px 20px 28px; }
  .mini-links{ flex-direction:column; }
}
@media (max-width:768px){
  .card{ padding:36px 60px 24px; }
}

@media (max-width:600px){
  .card{ padding:32px 32px 24px; }
  .brand img{ width:28px; height:28px; }
  .brand span{ font-size:18px; }
  h1{ font-size:24px; }
}

@media (max-width:480px){
  .card{ padding:24px 20px 24px; }
  .banner{ padding:16px 16px; }
  .banner p{ font-size:13px; }
  h1{ font-size:22px; }
  .mini-links{ flex-direction:column; gap:12px; }
  .signin-btn, .corporate-btn{ font-size:14px; padding:14px 12px; }
  input[type="email"],
  input[type="password"]{ padding:10px 14px 20px; font-size:13.5px; }
}

@media (max-width:360px){
  .card{ padding:20px 14px 20px; border-radius:10px; }
  .brand img{ width:24px; height:24px; }
  .brand span{ font-size:16px; }
  h1{ font-size:20px; }
  .banner p{ font-size:12px; }
  .lang-toggle button{ padding:5px 12px; font-size:10.5px; }
  .mini-links .box{ font-size:12.5px; padding:12px 10px; }
}