body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b0f1a 0%, #0f1629 100%);
    color: #fff;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}
.overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    opacity: 0.05;
}
.content {
    text-align: center;
    z-index: 2;
}
h1 {
    font-size: 2.8rem;
    margin: 0.2em 0;
    font-weight: 800;
    letter-spacing: 4px;
}
h2 {
    font-size: 1rem;
    font-weight: 400;
    color: #aaa;
    margin-bottom: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.mainlogo {
    height: 28vh;
    min-width: 65%;
}
.tagline {
    font-size: 1.1rem;
    margin-bottom: 2em;
    color: #b5b5c5;
}
.progress {
    width: 280px;
    height: 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    margin: 0 auto 10px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    width: 62%;
    background: linear-gradient(90deg, #23d5ab, #7c5cff);
}
.percent {
    font-size: 0.9rem;
    color: #bbb;
}
nav {
    position: absolute;
    top: 30px;
    right: 40px;
    display: flex;
    gap: 24px;
}
nav a {
    text-decoration: none;
    color: #aaa;
    font-size: 0.9rem;
    transition: color .2s;
}
nav a:hover {
    color: #fff;
}
.socials {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.socials a {
    color: #aaa;
    font-size: 1.2rem;
    transition: color .2s;
    text-decoration: none;
}
.socials a:hover {
    color: #fff;
}
footer {
    position: absolute;
    bottom: 30px;
    font-size: 0.8rem;
    color: #777;
    width: 100%;
    text-align: center;
}
/* === Responsive crypto background === */
.bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
    radial-gradient(1200px 700px at 50% 0%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(900px 600px at 90% 20%, rgba(35,213,171,.14), transparent 60%),
    radial-gradient(800px 600px at 10% 80%, rgba(124,92,255,.10), transparent 60%),
    #0b0f1a;
}
/* subtle grid + icons via SVG pattern */
.bg::before{
    content:""; position:absolute; inset:0; opacity:.18;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%23172834" offset="0"/><stop stop-color="%23101a2b" offset="1"/></linearGradient></defs><rect width="160" height="160" fill="none"/><g stroke="%231a2a3e" stroke-width="1" opacity="0.55"><path d="M0 80 H160"/><path d="M80 0 V160"/></g><g fill="none" stroke="%23253a55" stroke-width="1" opacity="0.35"><path d="M20 120 l15 -30 l18 40 l22 -60 l18 24 l14 -22"/></g><g fill="%232a4369" opacity="0.35"><text x="18" y="26" font-size="18" font-family="Inter, Arial">$</text><text x="120" y="76" font-size="18" font-family="Inter, Arial">฿</text><text x="72" y="142" font-size="18" font-family="Inter, Arial">Ξ</text><text x="138" y="142" font-size="18" font-family="Inter, Arial">₿</text><text x="10" y="88" font-size="18" font-family="Inter, Arial">XRP</text></g></svg>');
    background-size: 220px 220px; /* scales for desktop */
}

/* layout wrapper for stacking order */
.wrap{ position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

/* Typography scaling */
h1{ font-size: clamp(1.8rem, 5vw, 3rem); }
h2{ font-size: clamp(.75rem, 2vw, 1rem); }
.tagline{ font-size: clamp(.95rem, 2.2vw, 1.1rem); }

/* Progress scales */
.progress{ width: clamp(220px, 40vw, 420px); }

/* Nav & socials responsive */
@media (max-width: 900px){
    nav{ right: 20px; gap: 16px; }
    .socials{ left: 16px; gap:14px; }
}
@media (max-width: 640px){
    nav{ top: 18px; right: 16px; gap: 12px; }
    .socials{ display:none; }
    footer{ bottom: 18px; padding: 0 16px; }
}

/* Base nav styles */
nav a {
  text-decoration: none;
  color: #aaa; /* default */
  font-weight: 500;
  padding: 6px 10px;
  transition: color 0.2s, background 0.2s;
}

/* Hover effect */
nav a:hover {
  color: #fff;
}

/* Active state */
nav a.active {
  color: #23d5ab;       /* bright accent color */
  border-bottom: 2px solid #23d5ab; /* underline or highlight */
}