:root{--green:#235a48;--green-2:#1b4a3c;--deep:#0f2e27;--lime:#c7e5a5;--ink:#1c2a29;--muted:#7b8588;--line:#e3e8e5;--canvas:#f6f7f9;--danger:#b4553a;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--canvas)}
button,input{font:inherit}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
.shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);min-height:100vh}

/* Brand side */
.brand-side{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 10%,#1f5546 0%,#153b32 45%,var(--deep) 100%);color:#d9e5df;padding:44px 52px;display:flex;flex-direction:column}
.brand-side:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 80%);pointer-events:none}
.brand,.mobile-brand{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:700;letter-spacing:-1px;color:#fff;position:relative;z-index:1}
.brand b,.mobile-brand b{font-weight:400;color:#d4e2d8}
.brand small{display:block;font-size:8px;letter-spacing:1.6px;margin-top:4px;color:#a5c0b4;font-weight:500}
.mark{display:grid;place-items:center;width:36px;height:36px;border:1px solid #bad6a6;border-radius:50%;position:relative}
.mark:before{content:"";position:absolute;inset:6px;border:1px solid #bad6a6;border-radius:50%}
.mark:after{content:"";position:absolute;left:17px;top:1px;width:1px;height:17px;background:var(--lime);transform:rotate(40deg);transform-origin:bottom}
.mark span{width:5px;height:5px;background:var(--lime);border-radius:50%}

.scope{position:relative;width:min(400px,72%);aspect-ratio:1;margin:auto;z-index:1}
.ring{position:absolute;border-radius:50%;border:1px solid #bad6a62e}
.r1{inset:0}.r2{inset:17%}.r3{inset:34%;border-color:#bad6a650}
.cross{position:absolute;inset:0;background:linear-gradient(#bad6a61f,#bad6a61f) center/1px 100% no-repeat,linear-gradient(90deg,#bad6a61f,#bad6a61f) center/100% 1px no-repeat}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#c7e5a500 0deg,#c7e5a500 290deg,#c7e5a54d 352deg,#c7e5a5a0 360deg);animation:spin 5.5s linear infinite}
.blip{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 #c7e5a580;animation:ping 5.5s ease-out infinite}
.b1{left:68%;top:27%;animation-delay:.9s}.b2{left:30%;top:62%;animation-delay:3.7s}.b4{left:76%;top:70%;animation-delay:1.9s;opacity:.7}
.blip.hot{left:39%;top:31%;background:#f0a27f;animation-delay:4.6s}
.tag{position:absolute;display:flex;align-items:center;gap:7px;font-size:11px;color:#e7f0ea;background:#0b241ecc;border:1px solid #ffffff1c;padding:7px 11px;border-radius:999px;backdrop-filter:blur(6px);white-space:nowrap}
.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.t1{left:72%;top:18%}.t2{right:66%;top:38%}.tag.warn .dot{background:#f0a27f}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%,6%{box-shadow:0 0 0 0 #c7e5a5aa;transform:scale(1.25)}30%{box-shadow:0 0 0 14px #c7e5a500;transform:scale(1)}100%{box-shadow:0 0 0 14px #c7e5a500}}

.pitch{position:relative;z-index:1}
.pitch h2{font-size:30px;line-height:1.22;letter-spacing:-.8px;font-weight:500;color:#fff;margin:0 0 26px}
.pitch ul{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid #ffffff17;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pitch strong{display:block;font-size:20px;color:var(--lime);font-weight:600;letter-spacing:-.4px}
.pitch span{display:block;font-size:11px;color:#a5c0b4;margin-top:5px;line-height:1.5}

/* Form side */
.form-side{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px;gap:22px}
.mobile-brand{display:none;color:var(--deep)}.mobile-brand b{color:#5d7b6c}
.mobile-brand .mark{border-color:#7fa58f}.mobile-brand .mark:before{border-color:#7fa58f}.mobile-brand .mark:after,.mobile-brand .mark span{background:var(--green)}
.card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:38px 36px 30px;box-shadow:0 1px 2px #1c2a2908,0 18px 50px -22px #1c2a2930}
.eyebrow{font-size:9px;letter-spacing:1.6px;color:#7f9a6f;font-weight:600}
h1{font-size:28px;letter-spacing:-.8px;margin:10px 0 8px;font-weight:600}
.lead{margin:0 0 26px;color:var(--muted);font-size:13px;line-height:1.6}
label{display:block;font-size:12px;font-weight:500;color:#4d6157;margin:0 0 8px}
.field{display:flex;align-items:center;gap:10px;border:1px solid #dfe6e1;background:#fcfdfc;border-radius:10px;padding:0 12px;margin-bottom:18px;transition:border-color .15s,box-shadow .15s,background .15s}
.field svg{color:#9aaba1}
.field:focus-within{border-color:#7fa58f;background:#fff;box-shadow:0 0 0 4px #235a4814}
.field:focus-within svg{color:var(--green)}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:13px 0;font-size:14px;color:var(--ink)}
.field input::placeholder{color:#b5c0b9}
.reveal{border:0;background:#eef3ef;color:#5d7260;font-size:11px;font-weight:500;padding:5px 9px;border-radius:6px;cursor:pointer}
.reveal:hover{background:#e3ece5}
.caps{margin:-10px 0 14px;font-size:11px;color:#a07a2c}
.remember{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:400;color:#5d6f63;margin:4px 0 24px;cursor:pointer}
.remember input{width:16px;height:16px;accent-color:var(--green);margin:0}
.submit{position:relative;width:100%;border:0;border-radius:10px;padding:14px;background:linear-gradient(180deg,#2a6a55,var(--green));color:#fff;font-size:14px;font-weight:600;letter-spacing:.1px;cursor:pointer;box-shadow:0 8px 20px -10px #235a48b0,inset 0 1px 0 #ffffff1f;transition:transform .1s,filter .15s}
.submit:hover{filter:brightness(1.07)}.submit:active{transform:translateY(1px)}
.submit:disabled{cursor:wait;filter:saturate(.7) brightness(.95)}
.spinner{display:none;position:absolute;right:18px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.submit.loading .spinner{display:block}
.alert{display:flex;gap:9px;align-items:flex-start;background:#fbefe9;border:1px solid #f1d5c9;color:var(--danger);font-size:12px;line-height:1.5;padding:11px 13px;border-radius:10px;margin:-6px 0 20px}
.alert:before{content:"!";display:grid;place-items:center;flex-shrink:0;width:17px;height:17px;border-radius:50%;background:var(--danger);color:#fff;font-size:11px;font-weight:700;margin-top:1px}
.shake{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.foot{display:flex;align-items:center;gap:7px;margin:22px 0 0;padding-top:18px;border-top:1px solid #eef1ef;font-size:11px;color:#97a39b}
.foot svg{width:14px;height:14px;color:#9fb59d}
code{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;background:#f2f5f2;padding:1px 5px;border-radius:4px;color:#5d7260}
.legal{font-size:11px;color:#a3ada7;margin:0}
button:focus-visible,input:focus-visible{outline:3px solid #88b6a2;outline-offset:2px}
.field input:focus-visible{outline:0}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .brand-side{display:none}
  .mobile-brand{display:flex}
  .form-side{justify-content:flex-start;padding:48px 16px 28px;background:radial-gradient(90% 40% at 50% 0%,#e3eee6 0%,var(--canvas) 70%)}
}
@media(max-width:420px){.card{padding:28px 20px 24px;border-radius:16px}h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){.sweep,.blip,.spinner{animation:none}.shake{animation:none}}