*{box-sizing:border-box}
:root{
 --hp-blue:#126DFF;--hp-blue2:#0755D4;--hp-navy:#061B3D;--hp-navy2:#092D5D;
 --hp-ink:#152D49;--hp-muted:#718399;--hp-line:#D5E0EB;--hp-bg:#F5F8FC;
}
html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif}
body{background:var(--hp-bg);color:var(--hp-ink)}
a{color:inherit}
.hpx98-shell{min-height:100vh;display:grid;grid-template-columns:minmax(520px,1.06fr) minmax(540px,.94fr);background:#fff}

/* BRAND PANEL */
.hpx98-brand{
 position:relative;overflow:hidden;min-height:100vh;padding:46px clamp(44px,6vw,88px);
 display:flex;flex-direction:column;color:#fff;
 background:
 radial-gradient(circle at 84% 10%,rgba(28,117,255,.34),transparent 27%),
 radial-gradient(circle at 18% 88%,rgba(15,89,200,.29),transparent 34%),
 linear-gradient(145deg,#04162F 0%,#07244E 47%,#0A4590 100%);
}
.hpx98-brand:before{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:
 radial-gradient(circle at 50% 43%,rgba(23,112,255,.12),transparent 28%),
 linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
 background-size:auto,42px 42px,42px 42px;
}
.hpx98-orbit,.hpx98-orbit:before,.hpx98-orbit:after{
 position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08);pointer-events:none
}
.hpx98-orbit{width:480px;height:480px;right:-185px;top:-130px}
.hpx98-orbit:before{content:"";width:330px;height:330px;left:74px;top:74px}
.hpx98-orbit:after{content:"";width:180px;height:180px;left:149px;top:149px}

.hpx98-brand-top{position:relative;z-index:2}
.hpx98-brand-logo{
 display:block;width:min(410px,72%);max-height:122px;object-fit:contain;object-position:left center;
 filter:brightness(0) invert(1)
}
.hpx98-copy{position:relative;z-index:2;margin:auto 0 34px;max-width:650px}
.hpx98-kicker{display:inline-flex;align-items:center;gap:9px;color:#73B4FF;font-size:10px;font-weight:850;letter-spacing:1.7px;margin-bottom:18px}
.hpx98-kicker:before{content:"";width:24px;height:2px;border-radius:999px;background:#2D83FF}
.hpx98-copy h1{margin:0 0 19px;font-size:clamp(46px,4.6vw,70px);line-height:1.02;letter-spacing:-2.4px;font-weight:560}
.hpx98-copy h1 strong{color:#3F97FF;font-weight:800}
.hpx98-copy p{margin:0;max-width:570px;color:#C7D7E8;font-size:15px;line-height:1.72}
.hpx98-benefits{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:34px 0 18px}
.hpx98-benefit{padding:13px 12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);border-radius:13px;min-height:112px}
.hpx98-benefit svg{width:23px;height:23px;fill:none;stroke:#398DFF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:13px}
.hpx98-benefit strong,.hpx98-benefit small{display:block}
.hpx98-benefit strong{font-size:11px;margin-bottom:4px}.hpx98-benefit small{font-size:9px;color:#B7C9DA;line-height:1.4}
.hpx98-brand-footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#89A7C4;font-size:9px}
.hpx98-brand-footer span:first-child{display:flex;align-items:center;gap:8px}
.hpx98-brand-footer span:first-child:before{content:"";width:6px;height:6px;border-radius:50%;background:#3E9BFF;box-shadow:0 0 0 5px rgba(62,155,255,.12)}

/* AUTH PANEL */
.hpx98-auth{
 min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;
 padding:44px clamp(34px,5vw,78px);
 background:radial-gradient(circle at 91% 9%,rgba(18,109,255,.07),transparent 30%),linear-gradient(180deg,#FCFDFE,#F5F8FC)
}
.hpx98-auth-wrap{width:min(500px,100%)}
.hpx98-card{
 background:rgba(255,255,255,.98);border:1px solid rgba(210,223,235,.96);border-radius:22px;
 padding:36px 38px 30px;box-shadow:0 28px 78px rgba(18,51,83,.12),0 5px 16px rgba(18,51,83,.04)
}
.hpx98-card-logo{text-align:center;margin-bottom:24px}
.hpx98-card-logo img{display:block;width:min(355px,86%);max-height:108px;object-fit:contain;margin:0 auto}
.hpx98-heading{text-align:center;margin-bottom:25px}
.hpx98-heading .label{display:inline-block;color:#1175D6;font-size:8px;font-weight:850;letter-spacing:1.55px;margin-bottom:8px}
.hpx98-heading h2{margin:0 0 8px;font-size:29px;line-height:1.12;color:#102A46;letter-spacing:-.55px}
.hpx98-heading p{margin:0;color:#73869A;font-size:12px}
.hpx98-error{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;margin-bottom:17px;border:1px solid #F0C8C8;background:#FFF4F4;color:#AA3030;border-radius:10px;font-size:11px;line-height:1.5}
.hpx98-error svg{flex:0 0 17px;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hpx98-form{display:grid;gap:16px}
.hpx98-field>span{display:block;font-size:11px;font-weight:750;color:#2B425B;margin-bottom:7px}
.hpx98-input{height:52px;display:flex;align-items:center;border:1px solid #CAD8E5;border-radius:11px;background:#fff;overflow:hidden;transition:.18s ease}
.hpx98-input:focus-within{border-color:#1D7DDB;box-shadow:0 0 0 3px rgba(29,125,219,.10)}
.hpx98-input>svg{flex:0 0 auto;width:19px;height:19px;margin-left:14px;fill:none;stroke:#7D92A6;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.hpx98-input input{height:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;padding:0 12px;color:#18324D;font-size:12px}
.hpx98-input input::placeholder{color:#A4B2BF}
.hpx98-toggle{width:48px;height:100%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:#8196AA}
.hpx98-toggle svg{width:19px;height:19px;margin:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.hpx98-options{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:-2px}
.hpx98-options label{display:flex;align-items:center;gap:7px;color:#6F8194;font-size:10px;cursor:pointer}
.hpx98-options input{width:15px;height:15px;margin:0;accent-color:#126DFF}
.hpx98-options a{color:#0874D3;text-decoration:none;font-size:10px;font-weight:750}.hpx98-options a:hover{text-decoration:underline}
.hpx98-submit{height:52px;border:0;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;color:#fff;font-size:13px;font-weight:800;background:linear-gradient(135deg,#126DFF,#0755C9);box-shadow:0 11px 26px rgba(10,88,207,.22);transition:.18s ease}
.hpx98-submit:hover{transform:translateY(-1px);box-shadow:0 14px 31px rgba(10,88,207,.28)}
.hpx98-submit svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hpx98-security{margin-top:20px;padding-top:18px;border-top:1px solid #E5EDF4;display:flex;justify-content:center;align-items:center;gap:7px;color:#8B9BAD;font-size:8.5px}
.hpx98-security svg{width:14px;height:14px;fill:none;stroke:#6F9ABD;stroke-width:1.6}
.hpx98-help{text-align:center;margin-top:18px;color:#8496A9;font-size:9.5px}.hpx98-help a{color:#0874D3;text-decoration:none;font-weight:750}
.hpx98-create{text-align:center;margin-top:11px;color:#8A9AAB;font-size:9px}.hpx98-create a{color:#0874D3;text-decoration:none;font-weight:750}
.hpx98-footer{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:17px;color:#9AA8B5;font-size:8px}

@media(max-width:1120px){
 .hpx98-shell{grid-template-columns:minmax(430px,.9fr) minmax(500px,1.1fr)}
 .hpx98-brand{padding:38px}.hpx98-copy h1{font-size:48px}.hpx98-benefits{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:850px){
 .hpx98-shell{display:block}.hpx98-brand{min-height:auto;padding:27px 24px 34px}.hpx98-brand-logo{width:270px}
 .hpx98-copy{margin:43px 0 3px}.hpx98-copy h1{font-size:38px}.hpx98-copy p{font-size:12px}
 .hpx98-benefits,.hpx98-brand-footer{display:none}.hpx98-auth{min-height:auto;padding:34px 18px}.hpx98-card{padding:30px 24px 26px}
}
@media(max-width:480px){
 .hpx98-brand{padding:23px 18px 29px}.hpx98-brand-logo{width:230px}.hpx98-copy{margin-top:34px}.hpx98-copy h1{font-size:31px;letter-spacing:-1.2px}
 .hpx98-auth{padding:26px 13px}.hpx98-card{padding:26px 19px 23px;border-radius:18px}.hpx98-card-logo img{width:min(300px,90%)}.hpx98-heading h2{font-size:25px}
}