* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 15px/1.5 "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; color: #0f1e33; background: #06101c; overflow: hidden; }
#bg { position: fixed; inset: 0; background: radial-gradient(1000px 600px at 70% 30%, #163f63, #07131f 70%); }
#bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,16,28,.88) 0%, rgba(6,16,28,.55) 45%, rgba(6,16,28,.15) 100%); pointer-events: none; }
.wrap { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px); align-items: center; gap: 40px; padding: 0 6vw; }
.pitch { color: #eaf3fb; max-width: 560px; }
.logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.logo { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #14b8a6, #1d6fd6); display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(20,184,166,.7); }
.logo svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.logo-row b { font-size: 19px; letter-spacing: -.01em; }
.pitch h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; margin: 0 0 16px; letter-spacing: -.02em; }
.pitch h2 span { background: linear-gradient(90deg, #5eead4, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pitch p { color: #b9cde0; font-size: 17px; margin: 0 0 24px; max-width: 480px; }
.feats { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.feats li { display: flex; gap: 10px; align-items: center; color: #d5e6f5; }
.feats i { width: 26px; height: 26px; border-radius: 8px; background: rgba(94,234,212,.14); border: 1px solid rgba(94,234,212,.3); display: grid; place-items: center; flex: none; }
.feats svg { width: 15px; height: 15px; stroke: #5eead4; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.card { background: rgba(255,255,255,.92); backdrop-filter: blur(18px); border-radius: 24px; padding: 34px 32px 30px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.6); animation: rise .5s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.card h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.card .sub { color: #5c6d82; margin: 4px 0 4px; }
label { display: block; font-size: 13px; font-weight: 600; color: #3f5068; margin-top: 16px; }
.field { position: relative; }
input { width: 100%; padding: 12px 14px; margin-top: 6px; border: 1.5px solid #dbe3ed; border-radius: 12px; font: inherit; background: #fbfcfe; color: #0f1e33; transition: border-color .12s, box-shadow .12s; }
input:focus { outline: none; border-color: #0f9d8f; box-shadow: 0 0 0 4px rgba(15,157,143,.16); }
.eye { position: absolute; right: 8px; top: 12px; border: 0; background: none; color: #6b7c92; cursor: pointer; padding: 4px 8px; font-size: 12.5px; font-weight: 600; margin: 0; width: auto; }
button.go { width: 100%; margin-top: 22px; padding: 13px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, #14b8a6, #0f9d8f 55%, #0b7f74); box-shadow: 0 14px 28px -12px rgba(15,157,143,.8); transition: transform .12s, box-shadow .12s; }
button.go:hover { transform: translateY(-1px); box-shadow: 0 18px 32px -12px rgba(15,157,143,.9); }
button.go:disabled { opacity: .6; transform: none; }
.err { color: #b3372e; font-size: 13.5px; margin-top: 12px; min-height: 20px; }
.foot { text-align: center; color: #7b8ca1; font-size: 12.5px; margin-top: 14px; }
@media (max-width: 900px) { body { overflow: auto; } .wrap { grid-template-columns: 1fr; padding: 28px 18px; height: auto; min-height: 100%; } .pitch { display: none; } #bg::after { background: rgba(6,16,28,.55); } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }