:root{--bg:#0b0e14;--card:#111827;--text:#fff;--accent:#7c3aed}
[data-theme="light"]{--bg:#fff;--card:#f4f6fb;--text:#0b0e14}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}

header{position:relative;}
.header-bg{
 position:absolute;inset:0;
 background:url('assets/barchart.svg') center/1200px no-repeat;
 animation: float 18s linear infinite;
}
@keyframes float{
 0%{transform:translateX(0)}
 50%{transform:translateX(-40px)}
 100%{transform:translateX(0)}
}

.header-inner{
 position:relative;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:16px 24px;
}

.brand{display:flex;align-items:center;gap:12px}
.brand img{width:68px;height:68px;border-radius:50%;}
.brand h1{font-size:1.8rem;margin:0}

.hero-avatar{
 position:absolute;
 right:240px; /* shifted ~10% left */
 top:120px;
 width:380px; /* doubled */
 height:380px; /* doubled */
 border-radius:50%;
 overflow:hidden;
 background:#111;
 box-shadow:0 30px 80px rgba(0,0,0,.55);
 z-index:2;
}
.hero-avatar img{
 width:100%;
 height:100%;
 object-fit:cover;
}

nav{display:flex;gap:16px;flex-wrap:wrap;padding:12px 24px}
nav a.main{font-weight:700}

.hero{padding:40px 24px}
.card{background:var(--card);border-radius:20px;padding:24px;margin-bottom:24px}
button{padding:14px 20px;border-radius:14px;border:none;background:var(--accent);color:#fff;font-weight:600}

.project-logo{max-width:220px;margin:24px auto;display:block}
iframe{width:100%;border:none;border-radius:12px}
.annotation{opacity:.85;margin:8px 0 12px;font-size:.95rem}

.links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.links a{padding:12px 18px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600}

footer{text-align:center;padding:32px}
footer img{width:56px}

@media(max-width:900px){
 .brand h1{font-size:1.5rem}

 /* Create real vertical space so the avatar doesn't sit on top of the nav/hero */
 header{min-height:260px}

 .hero-avatar{
   position:absolute;
   right:16px;
   top:110px;
   width:160px;
   height:160px;
   z-index:2;
 }
}

/* NFT Terms – visual grid */
.terms-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  margin-top:20px;
}
.term-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:18px;
}
.term-card h3{
  margin:0 0 8px;
  font-size:1.05rem;
}
.term-card p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.chart-heading{
  font-size:0.95rem;
  margin:6px 0 8px;
  color:var(--muted);
}

/* Homepage subtle data backdrop */
body.home::after{
  content:"";
  position:fixed;
  inset:0;
  background:url('assets/data-backdrop.png') center/1100px no-repeat;
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}

/* NFT Projects dropdown */
.dropdown{
  position:relative;
  display:inline-block;
}

.dropbtn{
  background:none;
  border:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  padding:0;
}

.dropdown-content{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--card);
  min-width:220px;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.4);
  z-index:10;
}

.dropdown-content a{
  display:block;
  padding:10px 14px;
}

.dropdown-content a:hover{
  background:rgba(255,255,255,.06);
}

.dropdown:hover .dropdown-content{
  display:block;
}

.dropdown-content a.active{
  background:rgba(124,58,237,.18);
  font-weight:700;
}