:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --b1:#6EE7B7;
  --b2:#10B981;
  --b3:#374151;
  --shadow:0 18px 45px rgba(15,23,42,.10);
  --shadow2:0 10px 24px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 600px at 10% 10%, #eef3fb 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 20%, #eff7ff 0%, transparent 55%),
    linear-gradient(135deg, rgba(110,231,183,.12), transparent 55%),
    var(--bg);
}
.bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size:14px 14px;
  opacity:.26;
  mask-image:radial-gradient(900px 650px at 85% 20%, #000 0%, transparent 65%);
}
.bg::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(closest-side at 70% 30%, rgba(16,185,129,.14), transparent 60%);
  filter:blur(10px);
  animation:drift 9s ease-in-out infinite;
  opacity:.8;
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-2.5%,1.8%,0)}
}
.wrap{
  position:relative;
  min-height:100%;
  display:grid;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,2.4vw,32px);
}
.wrap{
  grid-template-columns: minmax(280px,520px) minmax(280px,760px);
  gap:clamp(14px,3.2vw,56px);
}
.card{
  background:var(--card);
  border:1px solid rgba(229,231,235,.92);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  width:100%;
}
.accent{
  height:10px;
  background:linear-gradient(90deg,var(--b3),var(--b1));
}
.body{
  padding:clamp(18px,2.2vw,32px);
}
.brand{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:18px;
}
.mark{
  width:46px;
  height:46px;
  border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 50%),
    linear-gradient(180deg,var(--b2),var(--b3));
  box-shadow:var(--shadow2);
  position:relative;
}
.mark::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.45);
  opacity:.9;
}
.brand h1{
  margin:0;
  font-size:clamp(26px,2.6vw,38px);
  line-height:1.05;
  letter-spacing:-.02em;
}
.brand p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
}
.err{
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.25);
  color:#991b1b;
  padding:10px 12px;
  border-radius:12px;
  margin:0 0 14px;
  font-size:14px;
}
.field{display:block;margin:12px 0}
.label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
.box{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:12px;
  height:52px;
  padding:0 10px 0 12px;
  background:#fff;
  box-shadow:0 0 0 0 rgba(16,185,129,.0);
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
}
.box:focus-within{
  border-color:rgba(16,185,129,.55);
  box-shadow:0 0 0 4px rgba(16,185,129,.12);
  transform:translateY(-1px);
}
.ico{width:18px;height:18px;color:#64748b;flex:0 0 auto}
.box input{
  border:0;
  outline:none;
  font-size:16px;
  width:100%;
  height:100%;
  padding:0;
  background:transparent;
  color:var(--text);
}
.box input::placeholder{color:#9aa3af}
.peek{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:6px;
  border-radius:10px;
  color:#64748b;
  transition:background .15s ease,color .15s ease;
}
.peek:hover{background:rgba(148,163,184,.18);color:#334155}
.peek svg{width:18px;height:18px;display:block}
.btn{
  width:100%;
  height:54px;
  margin-top:14px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  color:#fff;
  font-weight:800;
  font-size:16px;
  background:linear-gradient(180deg,var(--b2),var(--b3));
  box-shadow:0 12px 22px rgba(16,185,129,.18);
  position:relative;
  overflow:hidden;
  transform:translateY(0);
  transition:transform .08s ease,filter .15s ease,box-shadow .15s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:1px 1px auto;
  height:45%;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);
  pointer-events:none;
}
.btn:hover{
  filter:brightness(1.03);
  box-shadow:0 14px 26px rgba(16,185,129,.20);
}
.btn:active{transform:translateY(1px);box-shadow:0 10px 18px rgba(16,185,129,.18)}
.btn .spinner{
  position:absolute;
  right:16px;
  top:50%;
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  transform:translateY(-50%) rotate(0deg);
  opacity:0;
}
.btn.loading .spinner{
  opacity:1;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.trust{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(248,250,252,.8);
  border:1px solid rgba(226,232,240,.85);
  color:#64748b;
  font-size:13px;
}
.trust svg{width:16px;height:16px;color:#64748b}
.hero{
  position:relative;
  width:100%;
  min-height:520px;
  border-radius:26px;
}
.mesh{
  position:absolute;
  inset:0;
  border-radius:26px;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(110,231,183,.22), transparent 65%),
    radial-gradient(closest-side at 70% 60%, rgba(16,185,129,.14), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.0) 60%);
  filter:saturate(1.02);
}
.mesh::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  background:
    repeating-linear-gradient(60deg, rgba(203,213,225,.18) 0 1px, transparent 1px 22px);
  opacity:.55;
  mask-image:radial-gradient(900px 650px at 70% 30%, #000 0%, transparent 70%);
}
.float{
  position:absolute;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(226,232,240,.78);
  box-shadow:var(--shadow2);
  backdrop-filter: blur(8px);
  overflow:hidden;
}
.wHead{
  height:28px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  background:rgba(248,250,252,.65);
  border-bottom:1px solid rgba(226,232,240,.75);
}
.dot{
  width:8px;height:8px;border-radius:999px;background:rgba(148,163,184,.55)
}
.w1{left:6%;top:14%;width:260px;height:220px;animation:f1 6.5s ease-in-out infinite}
.w2{right:6%;top:18%;width:320px;height:190px;animation:f2 7.2s ease-in-out infinite}
.w3{right:18%;bottom:14%;width:210px;height:200px;animation:f3 6.8s ease-in-out infinite}
@keyframes f1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes f2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,12px,0)}}
@keyframes f3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
.ring{display:grid;place-items:center;height:132px;margin-top:10px}
.ring svg{width:120px;height:120px}
.rbg{fill:none;stroke:rgba(148,163,184,.35);stroke-width:10}
.r1,.r2{fill:none;stroke-width:10;stroke-linecap:round;transform-origin:60px 60px;transform:rotate(-90deg)}
.r1{stroke:rgba(16,185,129,.65);stroke-dasharray:120 276;stroke-dashoffset:0;animation:ring1 3.8s ease-in-out infinite}
.r2{stroke:rgba(110,231,183,.75);stroke-dasharray:86 276;stroke-dashoffset:-140;animation:ring2 4.4s ease-in-out infinite}
@keyframes ring1{0%,100%{stroke-dasharray:120 276}50%{stroke-dasharray:170 276}}
@keyframes ring2{0%,100%{stroke-dasharray:86 276}50%{stroke-dasharray:130 276}}
.bars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px;margin-top:14px}
.bars span{height:10px;border-radius:999px;background:rgba(148,163,184,.35);position:relative;overflow:hidden}
.bars span::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(16,185,129,.20), rgba(16,185,129,.55), rgba(16,185,129,.20));
  transform:translateX(-60%);
  animation:shimmer 2.6s ease-in-out infinite;
  opacity:.85;
}
@keyframes shimmer{50%{transform:translateX(60%)}}
.bars.thin{grid-template-columns:1fr 1fr 1fr}
.bars.thin span{height:8px}
.line{width:100%;height:110px;padding:14px 14px 0 14px}
.lg{stroke:rgba(148,163,184,.35);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.lp{stroke:rgba(16,185,129,.78);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:360;stroke-dashoffset:360;animation:draw 2.2s ease forwards}
.pt{fill:rgba(16,185,129,.85);opacity:.0;animation:pop 2.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
.cal{position:relative;width:100%;height:100%}
.calTop{height:40px;background:linear-gradient(90deg, rgba(16,185,129,.9), rgba(110,231,183,.9))}
.calGrid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  padding:14px;
}
.calGrid span{
  height:16px;
  border-radius:6px;
  background:rgba(148,163,184,.28);
  overflow:hidden;
  position:relative;
}
.calGrid span::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(110,231,183,.20), rgba(16,185,129,.45), rgba(110,231,183,.20));
  transform:translateX(-60%);
  animation:shimmer 2.8s ease-in-out infinite;
  opacity:.85;
}
.chk{
  position:absolute;
  right:16px;
  bottom:16px;
  width:34px;
  height:34px;
  padding:6px;
  border-radius:12px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(226,232,240,.85);
  color:rgba(16,185,129,.95);
  box-shadow:0 10px 18px rgba(16,185,129,.12);
  animation:chk 3.6s ease-in-out infinite;
}
@keyframes chk{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.tag{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(226,232,240,.78);
  box-shadow:var(--shadow2);
  backdrop-filter: blur(8px);
}
.pulse{
  width:10px;height:10px;border-radius:999px;background:rgba(16,185,129,.95);
  box-shadow:0 0 0 0 rgba(16,185,129,.45);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}
  70%{box-shadow:0 0 0 10px rgba(16,185,129,.0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,.0)}
}
.t{font-size:13px;color:#334155;font-weight:700}

@media (max-width: 980px){
  .wrap{grid-template-columns:1fr}
  .hero{order:1;min-height:unset}
  .card{order:2}
  .hero{height:auto}
  .w1{left:6%;top:8%}
  .w2{right:6%;top:36%}
  .w3{right:14%;bottom:10%}
}
@media (max-width: 560px){
  .hero{min-height:420px}
  .w2{width:300px}
  .w1{width:240px}
  .w3{width:190px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}