*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#0f172a;background:#0b1220}
.split{display:flex;min-height:100vh}

/* ---------- wordmark ---------- */
.wordmark{display:inline-flex;align-items:baseline;font-weight:900;letter-spacing:-.02em;line-height:1}
.wordmark .w1{color:#fff}
.wordmark .w2{color:#3b82f6;position:relative}
.wordmark.dark .w1{color:#1d4ed8}
.wordmark.dark .w2{color:#0f172a}
.wordmark .ping{position:absolute;right:-.12em;top:-.42em;width:.36em;height:.36em;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:#ef4444;box-shadow:0 0 0 .07em rgba(239,68,68,.25)}
.wordmark .ping::after{content:"";position:absolute;inset:30%;border-radius:50%;background:#fff}
.wordmark.sm{font-size:28px}.wordmark.md{font-size:36px}.wordmark.xl{font-size:clamp(56px,6.6vw,96px)}
.wordmark.xl .ping{display:none}

/* ---------- hero ---------- */
.hero{position:relative;flex:1;min-width:0;overflow:hidden;background:#0b1424;color:#e2e8f0}
.hero .photo{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.8)}
.hero.has-photo .scene{opacity:.35}
.scene{position:absolute;inset:0;width:100%;height:100%}
.shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,14,28,.94) 0%,rgba(8,14,28,.78) 45%,rgba(8,14,28,.35) 100%),
  linear-gradient(0deg,rgba(8,14,28,.85) 0%,rgba(8,14,28,0) 35%)}
.hero:not(.has-photo) .shade{background:linear-gradient(90deg,rgba(8,14,28,.75) 0%,rgba(8,14,28,.25) 60%,rgba(8,14,28,0) 100%),
  linear-gradient(0deg,rgba(8,14,28,.7) 0%,rgba(8,14,28,0) 30%)}
.tw{animation:tw 4s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.15}to{opacity:.9}}
.beam path{animation:beam 2.4s ease-in-out infinite}
.beam path:nth-child(2){animation-delay:.3s}.beam path:nth-child(3){animation-delay:.6s}
@keyframes beam{0%,100%{opacity:.08}50%{opacity:.7}}

.hero-inner{position:relative;z-index:2;height:100%;min-height:100vh;display:flex;flex-direction:column;padding:52px 58px 30px}
.hero-main{margin:auto 0;padding:40px 0 28px;max-width:920px}
.kicker{display:inline-block;background:#2563eb;color:#fff;font-weight:800;font-size:13px;letter-spacing:.14em;padding:6px 16px;border-radius:4px}
.hero h1{margin:22px 0 6px}
.tagline{margin:0 0 26px;font-size:20px;letter-spacing:.03em;color:#cbd5e1}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:46px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:5px 14px;border-radius:999px;border:1px solid}
.pill.live{color:#4ade80;background:rgba(22,101,52,.25);border-color:rgba(74,222,128,.35)}
.pill.live i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.pill.blue{color:#93c5fd;background:rgba(30,64,175,.25);border-color:rgba(96,165,250,.4)}
.pill.amber{color:#fcd34d;background:rgba(146,64,14,.25);border-color:rgba(252,211,77,.4)}
.pill.green2{color:#86efac;background:rgba(22,101,52,.2);border-color:rgba(134,239,172,.35)}
.feat-title{font-size:13px;font-weight:800;letter-spacing:.16em;color:#94a3b8;margin-bottom:14px}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feat{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid rgba(59,130,246,.28);border-radius:8px;
  background:rgba(9,18,36,.72);backdrop-filter:blur(3px);transition:border-color .2s,transform .2s}
.feat:hover{border-color:rgba(96,165,250,.6);transform:translateY(-2px)}
.feat .ic{flex:0 0 38px;height:38px;border-radius:8px;display:grid;place-items:center;background:rgba(37,99,235,.18);font-size:18px}
.feat b{display:block;color:#fff;font-size:15px;margin-bottom:3px}
.feat span{display:block;font-size:13px;line-height:1.4;color:#94a3b8}
.stats{display:flex;flex-wrap:wrap;gap:0}
.stats div{padding:0 34px;border-left:1px solid rgba(148,163,184,.25)}
.stats div:first-child{padding-left:0;border-left:0}
.stats b{display:block;font-size:28px;font-weight:900;color:#fff;line-height:1.1}
.stats b small{font-size:15px;font-weight:600;color:#94a3b8;margin-left:2px}
.stats b.g{color:#4ade80}.stats b.b{color:#60a5fa}.stats b.y{color:#fbbf24}
.stats span{font-size:12px;letter-spacing:.06em;color:#94a3b8}

/* ---------- form ---------- */
.side-form{flex:0 0 500px;background:#fff;display:flex;flex-direction:column;justify-content:center;padding:40px 52px 22px;position:relative}
.form-wrap{width:100%;max-width:420px;margin:auto}
.logo-dark{margin-bottom:46px}
.side-form h2{margin:0 0 6px;font-size:28px;font-weight:900;letter-spacing:-.01em}
.hint{margin:0 0 30px;color:#475569;font-size:15px}
a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}
label{display:block;font-weight:600;font-size:15px;margin-bottom:8px;color:#0f172a}
.lbl-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px}
.lbl-row a{font-size:13px}
input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#0f172a;transition:border-color .15s,box-shadow .15s}
input:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
input:disabled{background:#f1f5f9}
.pw{position:relative}
.pw input{padding-right:46px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;font-size:17px;opacity:.55;padding:6px}
.eye:hover{opacity:1}
.submit{margin-top:32px;width:100%;border:0;border-radius:6px;padding:15px;font:inherit;font-size:17px;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(90deg,#1e40af,#2563eb 55%,#3b82f6);box-shadow:0 6px 18px rgba(37,99,235,.25);transition:filter .15s,transform .15s}
.submit:hover{filter:brightness(1.08)}.submit:active{transform:translateY(1px)}
.submit:disabled{background:#94a3b8;box-shadow:none;cursor:not-allowed}
.secure{margin-top:28px;background:#f1f5f9;border-radius:6px;padding:12px 16px;font-size:13px;color:#475569}
.msg{padding:11px 14px;border-radius:6px;font-size:14px;margin-bottom:16px}
.msg.err{background:#fee2e2;color:#991b1b}.msg.ok{background:#dcfce7;color:#14532d}
.msg.warn{background:#fef3c7;color:#78350f}.msg.info{background:#dbeafe;color:#1e3a8a}
footer{text-align:center;font-size:12px;color:#64748b;margin-top:24px}

/* ---------- responsif ---------- */
@media (max-width:1500px){.feat{padding:14px;gap:12px}.feat b{font-size:14px}.feat span{font-size:12.5px}.feats{gap:10px}.hero-inner{padding:40px 44px 26px}}
@media (max-width:1280px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}.side-form{flex-basis:440px;padding:36px 40px 20px}}
@media (max-width:980px){
  .split{flex-direction:column}
  .hero-inner{min-height:auto;padding:28px 24px 26px}
  .hero-main{padding:22px 0 10px}
  .hero .feats,.hero .feat-title{display:none}
  .pills{margin-bottom:22px}
  .tagline{font-size:16px;margin-bottom:18px}
  .wordmark.xl{font-size:52px}
  .stats div{padding:0 18px}.stats b{font-size:22px}
  .side-form{flex:1 0 auto;padding:30px 24px 18px}
  .logo-dark{display:none}
}
@media (max-width:560px){.stats div:nth-child(n+3){display:none}.hero .logo{display:none}}