*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0B1F33;--ink2:#5A6B7C;--ink3:#93A1B0;
  --line:#E4E8EE;--line2:#EEF1F6;
  --brand:#1B5FAE;--brand-d:#15498C;--brand-l:#EAF2FC;--cyan:#2BB1C4;
  --deep:#0C2137;--ok:#1E8E5A;--err:#D2413A;--warn:#D9822B;
  --r:10px;
}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  color:var(--ink);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:#F4F6FA;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px;min-height:100vh;position:relative;overflow-x:hidden;
}
body::before,body::after{content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0}
body::before{width:560px;height:560px;background:#DAE7FD;filter:blur(110px);opacity:.75;left:-160px;top:-180px}
body::after{width:480px;height:480px;background:#E4EDF9;filter:blur(110px);opacity:.8;right:-140px;bottom:-160px}
button{font-family:inherit;cursor:pointer}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.card{
  position:relative;z-index:1;
  width:min(960px,100%);min-height:570px;
  display:flex;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 20px 56px -16px rgba(12,33,55,.18),0 0 0 1px rgba(12,33,55,.05);
}

/* ==================== 左侧介绍区 ==================== */
.pitch{
  flex:1 1 auto;background:#F6FAFF;
  padding:42px 38px 34px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.pitch::before{
  content:"";position:absolute;right:-60px;bottom:-50px;width:380px;height:380px;
  background:var(--mark) center/contain no-repeat;
  opacity:.055;pointer-events:none;
}
.pitch-logo{display:flex;align-items:center;gap:10px;position:relative}
.pitch-logo img:first-child{width:40px;height:40px}
.pitch-logo img:last-child{height:23px}
.pill{
  display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  font-size:12px;color:var(--brand);background:var(--brand-l);
  padding:5px 12px;border-radius:20px;position:relative;margin-top:20px;
}
.pill i{width:5px;height:5px;border-radius:50%;background:var(--brand);display:block}
.pitch h1{
  font-size:27px;line-height:1.5;font-weight:500;letter-spacing:.3px;
  margin-top:16px;position:relative;
}
.pitch h1 span{color:var(--brand)}
.pitch .sub{font-size:13px;color:var(--ink2);margin-top:9px;position:relative}
.cta{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  margin-top:20px;height:36px;padding:0 16px;border-radius:18px;
  background:var(--brand);color:#fff;font-size:13px;position:relative;
  transition:background .15s;
}
.cta:hover{background:var(--brand-d);text-decoration:none}
.cta span{font-size:15px;line-height:1;transform:translateY(-1px)}

/* ==================== 产品视觉（示意卡片） ==================== */
.visual{position:relative;margin-top:auto;padding-top:24px;height:264px;display:flex;align-items:center;justify-content:center}
.app{
  width:280px;background:#fff;border-radius:13px;padding:13px 15px 12px;
  box-shadow:0 12px 30px -10px rgba(12,33,55,.2),0 0 0 1px rgba(12,33,55,.05);
  position:relative;z-index:2;
}
.app-head{display:flex;align-items:center;gap:4px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.app-head i{width:6px;height:6px;border-radius:50%;background:#E1E6EE;display:block}
.app-head span{margin-left:auto;font-size:10.5px;color:var(--ink3);letter-spacing:.2px}
.app-body{display:flex;align-items:center;gap:16px;padding:14px 0 10px}
.ring{position:relative;width:72px;height:72px;flex-shrink:0}
.ring svg{display:block}
.ring-bar{stroke-dasharray:188.5;stroke-dashoffset:188.5;animation:ring 1.3s .35s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ring{to{stroke-dashoffset:6.8}}
.ring-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px}
.ring-txt b{font-size:16px;font-weight:500;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ring-txt span{font-size:9px;color:var(--ink3)}
.kv{list-style:none;flex:1;display:flex;flex-direction:column;gap:7px}
.kv li{display:flex;align-items:baseline;justify-content:space-between;font-size:11.5px;color:var(--ink3)}
.kv b{font-size:13px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.kv b.warn{color:var(--warn)}
.kv em{font-style:normal;font-size:9.5px;color:var(--ink3);margin-left:1px;font-weight:400}
.bars{display:flex;align-items:flex-end;gap:5px;height:42px;padding-top:6px;border-top:1px solid var(--line2)}
.bars i{
  flex:1;background:#C9DCF6;border-radius:3px 3px 1px 1px;
  height:var(--h);transform-origin:bottom;
  animation:grow .65s cubic-bezier(.2,.8,.2,1) backwards;
}
.bars i:nth-child(1){animation-delay:.15s}
.bars i:nth-child(2){animation-delay:.22s}
.bars i:nth-child(3){animation-delay:.29s}
.bars i:nth-child(4){animation-delay:.36s}
.bars i:nth-child(5){animation-delay:.43s;background:#1D5FD0}
.bars i:nth-child(6){animation-delay:.5s}
.bars i:nth-child(7){animation-delay:.57s}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.app-cap{font-size:10px;color:#B7C1CC;margin-top:6px;letter-spacing:.2px}

.bubble{
  position:absolute;display:flex;align-items:center;gap:7px;
  background:#fff;border-radius:9px;padding:7px 10px 7px 7px;
  box-shadow:0 6px 18px -6px rgba(12,33,55,.16),0 0 0 1px rgba(12,33,55,.05);
  font-size:11.5px;color:var(--ink);white-space:nowrap;z-index:3;
  animation:float 4s ease-in-out infinite;
}
.bubble .bi{
  width:20px;height:20px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:10px;color:#fff;flex-shrink:0;
}
.b1{left:0;top:8px;animation-delay:0s}
.b1 .bi{background:#1D5FD0}
.b2{right:0;top:46px;animation-delay:.9s}
.b2 .bi{background:#D9822B}
.b3{left:0;bottom:14px;animation-delay:1.7s}
.b3 .bi{background:#1E8E5A}
.b4{right:0;bottom:54px;animation-delay:2.5s}
.b4 .bi{background:#534AB7}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  .bubble,.bars i,.ring-bar{animation:none}
  .bars i{transform:none}
  .ring-bar{stroke-dashoffset:6.8}
}

/* ==================== 右侧表单区 ==================== */
.form-side{
  flex:0 0 400px;width:400px;background:#fff;
  padding:38px 42px 30px;display:flex;flex-direction:column;
}
.brand-line{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.brand-line .mark-img{width:32px;height:32px}
.brand-line .text-img{height:19px}
.brand-line em{font-style:normal;font-size:11px;color:var(--ink3);align-self:flex-end;margin-bottom:1px}

.head h2{font-size:21px;font-weight:500;letter-spacing:.3px}
.head p{font-size:12.5px;color:var(--ink2);margin-top:5px}

/* 登录表单（原 tabs 移除后，表单直接跟在标题下方） */
.login-form{margin-top:22px;width:100%}

.field{margin-bottom:14px}
.field > label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:6px}
.control{position:relative}
.control input{
  width:100%;height:42px;border:1px solid var(--line);border-radius:9px;
  padding:0 13px;font-size:13.5px;color:var(--ink);background:#fff;outline:none;
  transition:border-color .15s,box-shadow .15s;font-family:inherit;
}
.control input::placeholder{color:#B7C1CC}
.control input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,95,208,.11)}
.control input.invalid{border-color:var(--err);background:#FEF8F8}
.control input[type=password]{letter-spacing:1.5px}
.toggle-eye{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  background:none;border:none;font-size:11.5px;color:var(--ink3);padding:6px 8px;border-radius:6px;
}
.toggle-eye:hover{color:var(--brand);background:var(--brand-l)}

/* 若依 jquery.validate 的错误提示（label.error）挂在 .control 内，收敛一下样式 */
.field label.error{margin:5px 0 0;font-size:11.5px;color:var(--err);display:block}
.field label.error i{margin-right:2px}

.btn{
  width:100%;height:43px;border-radius:9px;font-size:14.5px;font-weight:500;
  border:none;transition:background .15s,transform .05s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn:active{transform:translateY(.5px)}
.btn-primary{
  background:linear-gradient(135deg,#1B5FAE,#2492C4);color:#fff;
  box-shadow:0 8px 18px -8px rgba(27,95,174,.5);
}
.btn-primary:hover{background:linear-gradient(135deg,#15498C,#1D7FB2)}
.btn-primary:disabled{opacity:.65;cursor:default;transform:none}

.spin{
  width:15px;height:15px;border:1.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.errline{font-size:12px;color:var(--err);margin:0 0 16px;height:0;overflow:hidden;transition:height .15s;opacity:0}
.errline.show{height:18px;opacity:1;margin-bottom:16px}

.form-foot{
  margin-top:auto;padding-top:22px;display:flex;align-items:center;
  justify-content:space-between;font-size:12px;color:var(--ink3);
}

.page-foot{position:relative;z-index:1;margin-top:26px;font-size:11.5px;color:#A9B4C2;text-align:center}
.page-foot span{margin:0 8px;color:#CDD5DF}
.page-foot a{color:#A9B4C2}

/* ==================== 弹窗 ==================== */
.modal{
  position:fixed;inset:0;background:rgba(11,31,51,.4);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;padding:24px;z-index:50;
}
.modal.open{display:flex;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  background:#fff;border-radius:15px;width:100%;max-width:418px;padding:26px;
  animation:pop .22s cubic-bezier(.2,.8,.3,1);max-height:calc(100vh - 48px);overflow:auto;
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.sheet h3{font-size:16.5px;font-weight:500}
.sheet .sub{font-size:12.5px;color:var(--ink2);margin-top:6px}
.trial-field{margin-bottom:12px}
.trial-field label{display:block;font-size:12px;color:var(--ink2);margin-bottom:5px}
.trial-field input,.trial-field select{
  width:100%;height:40px;border:1px solid var(--line);border-radius:8px;padding:0 11px;
  font-size:13px;font-family:inherit;color:var(--ink);outline:none;background:#fff;
}
.trial-field input:focus,.trial-field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,95,208,.1)}
.trial-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.close-x{
  position:absolute;top:14px;right:16px;background:none;border:none;
  font-size:19px;color:var(--ink3);line-height:1;padding:4px;
}
.close-x:hover{color:var(--ink)}
.sheet-wrap{position:relative}

.toast{
  position:fixed;left:50%;top:26px;transform:translate(-50%,-16px);
  background:#0B1F33;color:#fff;font-size:12.5px;padding:10px 17px;border-radius:9px;
  opacity:0;pointer-events:none;transition:.25s;z-index:80;display:flex;align-items:center;gap:9px;
  max-width:calc(100vw - 32px);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast i{width:6px;height:6px;border-radius:50%;background:#4ADE80;display:block;flex-shrink:0}

/* ==================== 响应式 ==================== */
@media (max-height:780px) and (min-width:921px){
  body{justify-content:flex-start;padding:24px}
  .card{min-height:auto}
  .pitch{padding:32px 38px 28px}
  .pitch h1{font-size:24px;margin-top:12px}
  .cta{margin-top:16px}
  .visual{height:236px;padding-top:16px}
  .form-side{padding:30px 42px 26px}
  .brand-line{margin-bottom:20px}
  .login-form{margin-top:18px}
}
@media (max-width:920px){
  body{padding:0;justify-content:flex-start}
  .card{width:100%;min-height:100vh;border-radius:0;box-shadow:none;flex-direction:column}
  .pitch{width:100%;flex:none;padding:30px 28px 24px}
  .pitch::before{display:none}
  .pitch h1{font-size:22px}
  .pitch .sub{font-size:12.5px}
  .cta{display:none}
  .visual{display:none}
  .form-side{flex:1;width:100%;padding:26px 28px 30px}
  .page-foot{padding:18px 0 22px;margin-top:0}
  .login-form{margin-top:18px}
}
@media (max-width:420px){
  .trial-grid{grid-template-columns:1fr}
  .sheet{padding:22px 18px}
  .pitch{padding:26px 22px 20px}
  .form-side{padding:22px 22px 26px}
}