:root{
  --bg-top:#0b1627;
  --bg-mid:#0a0f1e;
  --bg-bot:#070913;

  --ink:#eef2ff;
  --muted:rgba(238,242,255,.72);

  --gold1:#f0d9a6;
  --gold2:#caa45a;

  --blue1:#7dd3fc;
  --blue2:#60a5fa;
  --blue3:#3b82f6;

  --border:rgba(255,255,255,.12);
  --shadow:0 18px 60px rgba(0,0,0,.55);
}

*{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;
  color:var(--ink);

  /* Dark Aion-style background (NO IMAGE) */
  background:
    radial-gradient(circle at 20% 10%, rgba(125,211,252,.14), transparent 42%),
    radial-gradient(circle at 80% 15%, rgba(96,165,250,.10), transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(167,139,250,.08), transparent 48%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%);

  background-attachment: fixed;
}

a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 16px}

.topbar{
  background:rgba(5,8,18,.65);
  border-bottom:1px solid var(--border);
  font-size:12px;
}
.topbar .row{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:8px 0;color:var(--muted)
}
.dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:#34d399;margin-right:8px;vertical-align:middle}
.sep{opacity:.35;margin:0 10px}

.navwrap{
  background:rgba(6,10,20,.60);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px;width:auto}
.brand .text{line-height:1.1}
.brand .name{font-weight:800;letter-spacing:.4px}
.brand .tag{font-size:12px;color:var(--muted);margin-top:2px}

.menu{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.menu a{font-size:14px;color:rgba(238,242,255,.82);padding:8px 10px;border-radius:12px}
.menu a:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu a.active{color:#fff;background:rgba(96,165,250,.14);outline:1px solid rgba(125,211,252,.18)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:14px;font-weight:800;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.btn:hover{background:rgba(255,255,255,.12)}
.btn-primary{
  border:1px solid rgba(240,217,166,.40);
  background: linear-gradient(180deg, rgba(240,217,166,.95), rgba(202,164,90,.95));
  color:#1b1a14;
}
.btn-primary:hover{background: linear-gradient(180deg, rgba(246,226,170,.98), rgba(215,176,92,.98))}
.btn-blue{
  border:1px solid rgba(125,211,252,.35);
  background: linear-gradient(180deg, rgba(96,165,250,.95), rgba(59,130,246,.95));
  color:#061022;
}
.btn-blue:hover{background: linear-gradient(180deg, rgba(125,211,252,.98), rgba(59,130,246,.98))}
.btn-ghost{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff}

.hero{
  margin-top:26px;
  border:1px solid var(--border);
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(125,211,252,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.hero-inner{padding:34px 22px 28px;text-align:center}
.hero-logo{max-width:680px;width:100%;height:auto;margin:6px auto 8px;display:block;filter: drop-shadow(0 18px 45px rgba(0,0,0,.55));}
.hero h1{margin:8px 0 0;font-size:34px;letter-spacing:.2px;color:#fff}
.hero p{margin:8px auto 0;max-width:720px;color:var(--muted)}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

.section-title{
  margin:28px 0 10px;
  text-align:center;
  font-size:20px;
  letter-spacing:.6px;
  color:#fff;
}

.grid{display:grid;gap:14px}
.grid.info{grid-template-columns:repeat(4, minmax(0,1fr))}
.grid.steps{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 980px){.grid.info{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 720px){.grid.steps{grid-template-columns:1fr}.menu{display:none}}

.card{
  /* DARK cards (this fixes your white/washed look) */
  background: linear-gradient(180deg, rgba(10,16,32,.72), rgba(10,16,32,.48));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.30);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(240,217,166,.18), rgba(125,211,252,.10), rgba(167,139,250,.08));
  opacity:.35;
  pointer-events:none;
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  padding:1px;
  box-sizing:border-box;
}
.card h3{margin:0;font-size:16px;color:#fff}
.card .small{margin-top:6px;color:var(--muted);font-size:13px}
.card.center{text-align:center}

.footer{
  margin:28px 0 24px;
  color:rgba(238,242,255,.70);
  font-size:12px;
  text-align:center;
}
.footer a{color:rgba(238,242,255,.85)}
.footer a:hover{color:#fff;text-decoration:underline}

a {
  color: #4da3ff;       /* Aion-style blue */
  text-decoration: none;
}

a:hover {
  color: #7dbbff;
  text-decoration: underline;
}

a {
  color: #4da3ff !important;
}