*{box-sizing:border-box;}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#0b1636 0,#050818 45%,#02030a 100%);
  color:#e6ecff;
}
a{text-decoration:none;color:#7fb5ff;}
a:hover{text-decoration:underline;}
header{
  background:rgba(4,9,24,0.96);
  border-bottom:1px solid rgba(72,110,255,0.55);
  backdrop-filter:blur(16px);
  padding:14px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
}
.header-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.header-left img{
  width:38px;
  height:38px;
  border-radius:14px;
  box-shadow:0 0 18px rgba(0,200,255,0.7);
}
.header-brand{
  display:flex;
  flex-direction:column;
}
.header-brand-title{
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#f5f7ff;
}
.header-brand-sub{
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#7c92d8;
}
nav{
  display:flex;
  gap:14px;
  font-size:14px;
}
nav a{
  color:#c1d2ff;
}
nav a:hover{
  color:#7fd6ff;
}
.btn-primary{
  background:linear-gradient(120deg,#2b82ff,#14d1ff);
  color:#02030a;
  border:none;
  border-radius:999px;
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.btn-primary:hover{
  filter:brightness(1.08);
}
.page{
  max-width:1120px;
  margin:0 auto;
  padding:26px 20px 40px;
}
.hero{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2.6fr);
  gap:26px;
  align-items:center;
  margin-top:16px;
}
@media(max-width:840px){
  .hero{grid-template-columns:1fr;}
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(11,23,60,0.95);
  border:1px solid rgba(58,104,255,0.8);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#9badff;
}
.hero-badge-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:radial-gradient(circle,#32f1ff,#2b82ff);
  box-shadow:0 0 15px rgba(50,241,255,0.9);
}
.hero-title{
  font-size:32px;
  margin:12px 0 4px;
}
.hero-title span{
  background:linear-gradient(120deg,#ffffff,#dde6ff,#4fe0ff);
  -webkit-background-clip:text;
  color:transparent;
}
.hero-sub{
  font-size:14px;
  color:#8ea0df;
  max-width:520px;
}
.hero-cta-row{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn-outline{
  border-radius:999px;
  border:1px solid rgba(122,143,224,0.9);
  background:transparent;
  color:#e0e6ff;
  padding:8px 16px;
  font-size:13px;
  cursor:pointer;
}
.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.hero-pill{
  font-size:11px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(6,13,40,0.95);
  border:1px solid rgba(72,98,210,0.85);
}
.hero-visual{
  position:relative;
  min-height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.orbit-ring{
  position:absolute;
  border-radius:999px;
  border:1px dashed rgba(49,137,255,0.7);
  width:230px;
  height:230px;
  animation:spin 26s linear infinite;
}
.orbit-ring.secondary{
  width:280px;
  height:280px;
  border-style:solid;
  border-color:rgba(40,196,255,0.45);
  animation-duration:40s;
  animation-direction:reverse;
}
.orbit-glow{
  position:absolute;
  width:210px;
  height:210px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(30,200,255,0.25),transparent 65%);
  filter:blur(4px);
}
.hero-logo-card{
  position:relative;
  width:140px;
  height:140px;
  border-radius:32px;
  background:#050a19;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 40px rgba(27,187,255,0.9);
}
.hero-logo-card img{
  width:80%;
  height:auto;
}
.section{
  margin-top:40px;
}
.section h2{
  font-size:22px;
  margin-bottom:8px;
}
.section p{
  font-size:14px;
  color:#9aa9e5;
}
.grid-two{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-top:18px;
}
.card{
  background:rgba(7,13,34,0.96);
  border-radius:16px;
  border:1px solid rgba(65,94,201,0.9);
  padding:16px 18px;
  box-shadow:0 0 28px rgba(3,30,92,0.75);
}
.card h3{
  margin-top:0;
  font-size:16px;
}
.mono{
  font-family:ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;
  padding:7px 9px;
  border-radius:9px;
  background:#050b21;
  border:1px solid #4258a8;
  word-break:break-all;
  color:#d7e2ff;
}
.qr-wrap{
  display:flex;
  justify-content:center;
  margin-top:10px;
}
.qr-wrap img{
  width:190px;
  max-width:100%;
  border-radius:16px;
  box-shadow:0 0 22px rgba(30,200,255,0.7);
}
ul.steps{
  padding-left:18px;
  font-size:13px;
  color:#a6b4f0;
}
footer{
  padding:16px;
  text-align:center;
  color:#8090cf;
  border-top:1px solid rgba(60,89,192,0.75);
  margin-top:30px;
  font-size:12px;
}