:root{
  --bg:#020816;
  --bg2:#041536;
  --panel:#07152d;
  --panel2:#0b1d3b;
  --line:#18365f;
  --text:#f5f9ff;
  --muted:#93a8c4;
  --blue:#0b6cff;
  --blue2:#00b7ff;
  --cyan:#00d8f5;
  --lime:#9bf20f;
  --green:#35d861;
  --danger:#ff6675;
  --shadow:0 30px 100px #0009;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 0%,#0b6cff24 0,transparent 30%),
    radial-gradient(circle at 88% 15%,#00d8f516 0,transparent 25%),
    radial-gradient(circle at 80% 85%,#9bf20f0d 0,transparent 30%),
    linear-gradient(180deg,#020816,#041024 52%,#020816);
}
.hidden{display:none!important}
button,input{font:inherit}

.page{width:min(1180px,100%);margin:0 auto;padding:0 clamp(18px,4vw,46px) 34px}
.topbar{
  min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-bottom:1px solid #ffffff0b;
}
.nexo-brand img{width:min(260px,52vw);height:70px;object-fit:contain;object-position:left center}
.account-chip{
  border:1px solid #2a4b78;background:#0a1a35;padding:9px 13px;border-radius:999px;
  color:#dceaff;font-size:12px;font-weight:900;box-shadow:inset 0 0 0 1px #ffffff05
}

.hero{padding:54px 0 32px;max-width:860px}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:950;color:var(--blue2)}
.hero h1{
  margin:14px 0 18px;font-size:clamp(48px,7.5vw,88px);line-height:.93;letter-spacing:-.06em
}
.hero h1 span{
  background:linear-gradient(90deg,#0b6cff,#00c8ff 52%,#9bf20f);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero p{margin:0;color:#9db0ca;font-size:clamp(16px,2vw,20px);line-height:1.65;max-width:760px}

.apps-section{padding:12px 0 22px}
.section-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px
}
.section-heading h2,.explain h2{margin:6px 0 0;font-size:clamp(25px,3vw,36px);letter-spacing:-.035em}
.login-hint{font-size:12px;color:#7891b1;text-align:right}

.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.app-button{
  position:relative;min-height:104px;border:1px solid #173864;border-radius:20px;padding:13px;
  display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;column-gap:12px;
  align-items:center;text-align:left;cursor:pointer;
  background:linear-gradient(145deg,#081a37,#06142d);color:#fff;
  box-shadow:0 18px 55px #0004;transition:.18s transform,.18s border-color,.18s box-shadow,.18s opacity
}
.app-button:hover{transform:translateY(-2px);border-color:#2d7ddc;box-shadow:0 22px 60px #00163380}
.app-button.locked{opacity:.72}
.app-button.requested{border-color:#00b7ff;box-shadow:0 0 0 2px #00b7ff1f,0 22px 60px #00163380}
.app-icon{
  grid-row:1/3;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,#ffffff,#e8f2ff);overflow:hidden
}
.app-icon img{width:50px;height:50px;object-fit:contain}
.app-copy{align-self:end;min-width:0}
.app-copy b{display:block;font-size:15px}
.app-copy small{display:block;margin-top:4px;color:#8199b8;font-size:10px;line-height:1.3}
.app-state{
  align-self:start;justify-self:start;margin-top:5px;font-size:10px;font-weight:900;
  color:#74b8ff
}
.app-button.ready .app-state{color:var(--lime)}
.app-button.ready:after{
  content:"";position:absolute;right:12px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 15px #9bf20f
}

.login-zone{padding:14px 0 48px;display:flex;justify-content:center}
.auth-card{
  width:min(560px,100%);
  background:
    linear-gradient(180deg,#0b1b38e8,#06142df4);
  border:1px solid #1d4474;border-radius:28px;padding:28px;
  box-shadow:var(--shadow),inset 0 1px 0 #ffffff08;backdrop-filter:blur(18px)
}
.card-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.nexo-orb{
  width:48px;height:48px;border-radius:16px;
  background:linear-gradient(135deg,var(--blue),var(--cyan) 62%,var(--lime));
  display:grid;place-items:center;color:#fff;font-weight:950;font-size:20px;
  box-shadow:0 12px 34px #087cff44
}
.card-head h2{margin:4px 0 0;font-size:32px;letter-spacing:-.035em}
.mode-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border:1px solid #16365d;
  border-radius:15px;background:#020b1c;margin-bottom:20px
}
.mode-tabs button{
  border:0;border-radius:11px;padding:11px 12px;color:#8299b7;background:transparent;
  font-weight:850;cursor:pointer
}
.mode-tabs button.active{
  background:linear-gradient(135deg,#0b5cd1,#087bd9);color:#fff;
  box-shadow:0 8px 24px #0067d933
}
form{display:grid;gap:14px}
label{display:grid;gap:7px;color:#cbd8eb;font-size:12px;font-weight:780}
input{
  width:100%;background:#020a19;border:1px solid #1b416f;border-radius:14px;color:#fff;
  padding:14px 15px;outline:none;transition:.18s border,.18s box-shadow
}
input:focus{border-color:#0a88ff;box-shadow:0 0 0 4px #0b6cff1a}
input::placeholder{color:#506987}
.password-wrap{position:relative}
.password-wrap input{padding-right:66px}
.show-password{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;
  background:#0d2245;color:#b8cff0;padding:7px 9px;border-radius:9px;
  font-size:11px;font-weight:850;cursor:pointer
}
.remember{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:8px;font-weight:650;color:#8ca4c3}
.remember input{width:16px;height:16px;accent-color:var(--blue)}
.primary,.secondary{border:0;border-radius:14px;padding:14px 16px;font-weight:900;cursor:pointer}
.primary{
  background:linear-gradient(100deg,#075ff0,#00a8f5 70%,#62d93a);color:#fff;
  box-shadow:0 14px 34px #0477e733
}
.primary:disabled{opacity:.55;cursor:wait}
.secondary{background:#0a1c39;color:#e6f0ff;border:1px solid #244b79}
.danger{color:#ffdce0;border-color:#7b3742;background:#27141c}
.status{min-height:20px;margin-top:12px;font-size:12px;color:#96a9c2}
.status.error{color:#ff9da6}.status.success{color:#86ecb0}

.security-note{display:flex;gap:10px;align-items:flex-start;border-top:1px solid #19385f;margin-top:20px;padding-top:18px}
.security-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);margin-top:5px;box-shadow:0 0 14px #9bf20f}
.security-note p{margin:0;color:#748ba9;font-size:11px;line-height:1.6}
.security-note b{color:#b8cae2}

.connected{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.connected-avatar{
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--cyan),var(--lime));
  display:grid;place-items:center;color:#fff;font-size:20px;font-weight:950
}
.connected h3{margin:5px 0 2px}.connected p{margin:0;color:var(--muted);font-size:12px}
.connected-message{
  grid-column:1/-1;border:1px solid #1c4776;background:#071a35;border-radius:14px;padding:12px 14px;
  color:#9db6d5;font-size:12px;line-height:1.55
}
.connected .danger{grid-column:1/-1}

.explain{padding:44px 0 20px;border-top:1px solid #ffffff0b}
.explain-head{margin-bottom:18px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.feature-grid article{
  border:1px solid #163860;border-radius:20px;padding:20px;background:linear-gradient(145deg,#07172f,#051126)
}
.feature-grid article>span{font-size:11px;font-weight:950;color:var(--lime)}
.feature-grid h3{margin:9px 0 7px;font-size:17px}.feature-grid p{margin:0;color:#8298b6;font-size:13px;line-height:1.55}
footer{text-align:center;padding:32px 0 8px;color:#4f6786;font-size:11px}

.auth-splash{
  position:fixed;inset:0;z-index:100;background:#f7fbff;display:grid;place-items:center;
  transition:.35s opacity,.35s visibility
}
.auth-splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-core{width:min(520px,78vw);text-align:center}
.splash-core img{width:min(360px,75vw);height:150px;object-fit:contain}
.splash-line{width:min(310px,62vw);height:5px;border-radius:999px;background:#dfe9f5;overflow:hidden;margin:16px auto 14px}
.splash-line span{
  display:block;height:100%;width:38%;border-radius:inherit;
  background:linear-gradient(90deg,#075ff0,#00c7ff,#9bf20f);
  animation:load 1.15s ease-in-out infinite
}
.splash-core p{margin:0;color:#506682;font-weight:760;font-size:14px}
@keyframes load{0%{transform:translateX(-110%)}60%{transform:translateX(165%)}100%{transform:translateX(260%)}}

@media(max-width:900px){
  .app-grid{grid-template-columns:1fr 1fr}
  .feature-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .page{padding:0 16px 26px}
  .topbar{min-height:78px}
  .nexo-brand img{width:190px;height:56px}
  .account-chip{font-size:10px;padding:7px 9px}
  .hero{padding:38px 0 24px}
  .hero h1{font-size:47px}
  .hero p{font-size:15px}
  .section-heading{align-items:flex-start;flex-direction:column;gap:8px}
  .login-hint{text-align:left}
  .app-grid{grid-template-columns:1fr}
  .app-button{min-height:86px;grid-template-columns:52px 1fr;padding:11px 12px;border-radius:17px}
  .app-icon{width:52px;height:52px;border-radius:14px}.app-icon img{width:46px;height:46px}
  .auth-card{padding:20px;border-radius:23px}
  .login-zone{padding-bottom:36px}
}