:root{

  --bg: #070b14;

  --panel: rgba(255,255,255,0.06);

  --panel-2: rgba(255,255,255,0.045);

  --border: rgba(255,255,255,0.10);

  --text: rgba(255,255,255,0.92);

  --muted: rgba(255,255,255,0.70);

  --muted2: rgba(255,255,255,0.58);

  --shadow: 0 12px 28px rgba(0,0,0,0.40);

  --radius: 18px;



  --btn: rgba(255,255,255,0.08);

  --btnHover: rgba(255,255,255,0.12);

  --primary: #2b6cff;

  --primaryHover: #1f5be0;

}



*{ box-sizing: border-box; }

html, body{ height:100%; }

body{

  margin:0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  color: var(--text);

  background:

    radial-gradient(1200px 600px at 20% -10%, rgba(43,108,255,0.22), transparent 55%),

    radial-gradient(1000px 700px at 90% 10%, rgba(110,231,183,0.10), transparent 50%),

    radial-gradient(900px 700px at 60% 110%, rgba(168,85,247,0.10), transparent 55%),

    var(--bg);

}



a{ color: inherit; text-decoration: none; }

a:hover{ text-decoration: none; }



.wrap{

  width: min(1100px, calc(100% - 32px));

  margin: 0 auto;

}



/* Topbar */

.topbar{

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(7,11,20,0.72);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255,255,255,0.06);

}

.topbar-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding: 14px 0;

  gap: 16px;

}

.brand{

  display:flex;

  align-items:baseline;

  gap: 10px;

  white-space: nowrap;

}

.brand-link{

  font-weight: 800;

  letter-spacing: 0.6px;

}

.brand-dot{ opacity: 0.55; }

.brand-sub{

  font-size: 0.95rem;

  color: var(--muted2);

}



.nav{

  display:flex;

  align-items:center;

  gap: 14px;

  flex-wrap: wrap;

  justify-content: flex-end;

}

.nav a{

  color: var(--muted);

  font-size: 0.95rem;

  padding: 8px 10px;

  border-radius: 12px;

}

.nav a:hover{

  background: rgba(255,255,255,0.06);

  color: var(--text);

}



/* Card */

.card{

  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}



/* Hero */

.hero{

  padding: 34px 28px;

  margin-top: 22px;

}

.hero h1{

  margin: 0 0 10px;

  font-size: clamp(28px, 3.4vw, 46px);

  letter-spacing: -0.6px;

  line-height: 1.08;

}

.hero p{

  margin: 0 0 18px;

  font-size: 1.05rem;

  line-height: 1.6;

}



/* Utilities */

.muted{ color: var(--muted); }

.mt{ margin-top: 16px; }

.section{ padding: 24px; margin-top: 18px; }

.br-sm{ display: none; }



.badge{

  display:inline-flex;

  align-items:center;

  gap: 8px;

  font-size: 0.92rem;

  color: rgba(255,255,255,0.86);

  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(255,255,255,0.06);

  border: 1px solid rgba(255,255,255,0.10);

  margin-bottom: 10px;

}



/* Buttons */

.btnrow{

  display:flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 14px;

}

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding: 12px 16px;

  border-radius: 14px;

  background: var(--btn);

  border: 1px solid rgba(255,255,255,0.12);

  color: var(--text);

  font-weight: 650;

  letter-spacing: 0.2px;

}

.btn:hover{ background: var(--btnHover); }

.btn.primary{

  background: var(--primary);

  border-color: rgba(255,255,255,0.10);

}

.btn.primary:hover{ background: var(--primaryHover); }

.btn.small{

  padding: 10px 12px;

  font-size: 0.92rem;

}



/* Grid */

.grid{

  display:grid;

  gap: 14px;

}

.grid.two{

  grid-template-columns: repeat(2, minmax(0, 1fr));

}

.mini{

  padding: 18px 18px;

  background: var(--panel-2);

}

.mini p{ margin: 0; line-height: 1.55; }



/* Notice */

.notice{

  margin-top: 16px;

  padding: 14px 14px;

  border-radius: 14px;

  border: 1px dashed rgba(255,255,255,0.22);

  background: rgba(0,0,0,0.20);

  color: rgba(255,255,255,0.80);

  line-height: 1.55;

}

.notice strong{ color: rgba(255,255,255,0.92); }



/* Typography blocks */

h2{

  margin: 0 0 10px;

  font-size: 1.45rem;

  letter-spacing: -0.2px;

}

.bullets{

  margin: 10px 0 0;

  padding-left: 18px;

  color: var(--muted);

  line-height: 1.65;

}

.bullets strong{ color: rgba(255,255,255,0.90); }



.steps{

  margin: 10px 0 0;

  padding-left: 18px;

  color: var(--muted);

  line-height: 1.8;

}



/* Soft box */

.soft{

  margin-top: 14px;

  padding: 14px;

  border-radius: 14px;

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.10);

}

.soft-title{

  font-weight: 750;

  margin-bottom: 6px;

}

code{

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  font-size: 0.95em;

  padding: 2px 6px;

  border-radius: 10px;

  background: rgba(0,0,0,0.25);

  border: 1px solid rgba(255,255,255,0.10);

}



/* Quick links */

.quick{

  display:grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-top: 12px;

}

.q{

  padding: 16px;

  border-radius: 16px;

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.10);

}

.q:hover{

  background: rgba(255,255,255,0.07);

  border-color: rgba(255,255,255,0.14);

}

.q-title{

  font-weight: 800;

  margin-bottom: 6px;

}



/* Footer */

.footer{

  margin-top: 22px;

  border-top: 1px solid rgba(255,255,255,0.08);

  background: rgba(0,0,0,0.18);

}

.footer-inner{

  display:flex;

  justify-content: space-between;

  align-items:flex-start;

  gap: 16px;

  padding: 18px 0 10px;

}

.footer-bottom{

  padding: 0 0 18px;

}

.footer-brand{

  font-weight: 900;

  letter-spacing: 0.6px;

  margin-bottom: 4px;

}

.footer-muted{

  color: var(--muted2);

  font-size: 0.95rem;

  line-height: 1.5;

}

.footer-right{

  display:flex;

  gap: 10px;

  flex-wrap: wrap;

  justify-content: flex-end;

  color: var(--muted);

}

.footer-right a{

  padding: 8px 10px;

  border-radius: 12px;

}

.footer-right a:hover{

  background: rgba(255,255,255,0.06);

  color: var(--text);

}

.sep{ opacity: 0.35; }



/* Responsive */

@media (max-width: 860px){

  .grid.two{ grid-template-columns: 1fr; }

  .quick{ grid-template-columns: 1fr; }

  .footer-inner{ flex-direction: column; }

}



@media (max-width: 560px){

  .hero{ padding: 26px 18px; }

  .brand-sub{ display:none; }

  .br-sm{ display:block; }

  .nav{ gap: 6px; }

  .nav a{ padding: 8px 8px; }

}