*{box-sizing:border-box}
:root{
  --navy:#0b3978;
  --blue:#1677ee;
  --blue2:#2a92ff;
  --text:#17375f;
  --muted:#7b8ba2;
  --border:#d6e0ed;
}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif}
body{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 28%,rgba(86,157,255,.18),transparent 30%),
    radial-gradient(circle at 72% 8%,rgba(255,255,255,.98),transparent 35%),
    linear-gradient(135deg,#eef5ff 0%,#fbfdff 48%,#f8fbff 100%);
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(61,128,217,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,128,217,.025) 1px,transparent 1px);
  background-size:48px 48px;
}
.page{
  min-height:100vh;
  display:grid;
  grid-template-columns:57% 43%;
}
.brand-side{
  position:relative;
  min-width:0;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  justify-content:center;
}
.brand-content{
  z-index:3;
  position:relative;
  width:min(650px,82%);
  text-align:center;
  margin-top:8.2vh;
}
.falcon-logo{
  width:245px;
  max-width:42%;
  height:auto;
  display:block;
  margin:0 auto 4px;
  filter:drop-shadow(0 12px 18px rgba(16,86,190,.11));
}
.brand-content h1{
  margin:2px 0 10px;
  color:#0b3978;
  font-size:clamp(40px,3.3vw,64px);
  line-height:1.1;
  font-weight:800;
  letter-spacing:.06em;
}
.falcon-en{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.falcon-en strong{
  font-size:clamp(20px,1.55vw,29px);
  letter-spacing:.18em;
  color:#1168dc;
}
.falcon-en .line{
  width:50px;height:2px;
  background:#3287f2;
  border-radius:999px;
}
.slogan{
  margin:18px 0 0;
  color:#66809e;
  font-size:clamp(17px,1.25vw,24px);
  letter-spacing:.10em;
}
.sms-visual{
  z-index:2;
  position:absolute;
  left:4%;
  bottom:2%;
  width:82%;
  height:37%;
  min-height:255px;
}
.visual-floor{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border:1px solid rgba(83,151,244,.22);
  border-radius:50%;
}
.floor-1{bottom:28px;width:540px;height:150px;background:rgba(219,236,255,.16)}
.floor-2{bottom:8px;width:670px;height:205px}
.visual-base{
  position:absolute;
  left:50%;bottom:40px;transform:translateX(-50%);
  width:280px;height:62px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(192,220,255,.72));
  border:1px solid rgba(153,196,251,.55);
  box-shadow:0 14px 45px rgba(39,121,230,.15);
}
.bubble-main{
  position:absolute;
  left:50%;bottom:90px;transform:translateX(-50%);
  width:145px;height:100px;border-radius:18px;
  background:linear-gradient(145deg,#3fa0ff,#166be9);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 16px 30px rgba(36,117,229,.18);
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.bubble-main::after{
  content:"";position:absolute;right:19px;bottom:-18px;width:30px;height:30px;
  background:#166be9;clip-path:polygon(0 0,100% 0,100% 100%);
}
.bubble-main i{display:block;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.45)}
.float-card{
  position:absolute;
  width:57px;height:57px;border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(93,170,255,.94),rgba(45,126,237,.9));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 12px 24px rgba(39,119,225,.15);
}
.float-card svg{
  width:29px;height:29px;
  fill:none;stroke:#fff;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
}
.float-user{left:24%;bottom:151px}
.float-mail{left:11%;bottom:64px}
.float-chart{right:18%;bottom:139px}
.route{position:absolute;inset:auto 0 42px 0;width:100%;height:205px}
.route path{fill:none;stroke:#9ac8ff;stroke-width:1.7;stroke-dasharray:6 5}
.route circle{fill:#90c1fa}
.plane{position:absolute;right:7%;top:0;width:54px;height:54px}
.plane svg{width:100%;height:100%;fill:#a7d2ff;stroke:#79b8ff;stroke-width:1.5;stroke-linejoin:round}
.brand-side::after{
  content:"";
  position:absolute;left:-12%;right:-6%;bottom:-18%;height:37%;
  background:linear-gradient(180deg,rgba(223,238,255,.1),rgba(159,202,255,.25));
  border-radius:50% 50% 0 0/38% 38% 0 0;
}
.login-side{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px 6vw 34px 22px;
}
.login-card{
  width:min(520px,100%);
  padding:42px 44px 38px;
  border:1px solid rgba(188,203,224,.78);
  border-radius:20px;
  background:rgba(255,255,255,.91);
  box-shadow:0 24px 64px rgba(36,80,136,.13);
  backdrop-filter:blur(16px);
}
.login-head{text-align:center;margin-bottom:40px}
.login-head h2{margin:0;color:#0b3978;font-size:34px;font-weight:800;letter-spacing:.06em}
.login-head p{margin:10px 0 16px;color:#7a8ba4;font-size:18px}
.accent{display:block;margin:auto;width:43px;height:3px;border-radius:99px;background:linear-gradient(90deg,#0f75ff,#4db3ff)}
form>label{
  display:block;margin:0 0 10px;
  font-size:15px;font-weight:700;color:#173f73;
}
form>label.password-label{margin-top:25px}
.field{
  height:56px;
  display:flex;align-items:center;
  border:1px solid #cfdbe9;
  border-radius:9px;
  background:#fff;
  transition:.18s ease;
}
.field:focus-within{border-color:#6aacf9;box-shadow:0 0 0 4px rgba(25,118,238,.09)}
.field-icon{
  flex:0 0 auto;
  width:23px;height:23px;margin-left:15px;
  fill:none;stroke:#7f91aa;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.field input{
  min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;
  padding:0 13px;font-size:15.5px;color:#1d3c63;
}
.field input::placeholder{color:#a5b1c1}
.eye{
  flex:0 0 46px;
  width:46px;height:54px;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:#7d8fa7;
}
.eye svg{
  grid-area:1/1;width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.eye-close{display:none}
.eye.active .eye-open{display:none}
.eye.active .eye-close{display:block}
.options{
  margin:22px 0 30px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:14.5px;color:#74859c;
}
.options a{color:#1677ee;text-decoration:none;font-weight:600}
.remember{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.remember input{position:absolute;opacity:0}
.checkmark{
  width:21px;height:21px;border-radius:4px;
  border:1px solid #9cbce4;background:#fff;
  display:grid;place-items:center;
}
.checkmark svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.remember input:checked+.checkmark{background:#1680f4;border-color:#1680f4}
.remember input:checked+.checkmark svg{opacity:1}
.submit-btn{
  width:100%;height:62px;border:0;border-radius:9px;cursor:pointer;
  background:linear-gradient(90deg,#0b79f4,#1976ed 58%,#1c70e5);
  color:#fff;font-size:20px;font-weight:700;letter-spacing:.10em;
  display:flex;align-items:center;justify-content:center;gap:14px;
  box-shadow:0 14px 28px rgba(23,112,232,.19);
  transition:.18s ease;
}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(23,112,232,.25)}
.submit-btn svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.safe{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:13px}
.safe span{width:48px;height:1px;background:#d8e3ef}
.safe em{font-style:normal;font-size:13.5px;letter-spacing:.13em;color:#8594a8}
@media (max-width:1120px){
  .page{grid-template-columns:1fr}
  .brand-side{min-height:42vh}
  .brand-content{margin-top:3vh}
  .falcon-logo{width:170px}
  .brand-content h1{font-size:39px}
  .sms-visual{display:none}
  .login-side{min-height:58vh;padding:22px 20px 46px}
}
@media (max-width:600px){
  .brand-side{min-height:35vh}
  .brand-content{width:92%}
  .falcon-logo{width:130px}
  .brand-content h1{font-size:30px}
  .falcon-en strong{font-size:17px}
  .falcon-en .line{width:28px}
  .slogan{font-size:14px}
  .login-card{padding:32px 22px 28px}
  .login-head{margin-bottom:30px}
  .login-head h2{font-size:29px}
}