/* Theme */
:root {
  --bg:#07070a;
  --ink:#f6f7fb;
  --muted:#b8b9c2;
  --hot:#ff5ccd;
  --acid:#21ffd7;
  --xrpl:#00a1e0;
  --card:rgba(255,255,255,0.06);
  --glass:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.14);
  --shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 1px var(--border);
}
* { box-sizing:border-box }
html,body { margin:0; padding:0; background: radial-gradient(1200px 600px at 80% -10%, rgba(255,92,205,.17), transparent 60%), radial-gradient(900px 500px at 10% 120%, rgba(33,255,215,.12), transparent 60%), var(--bg); color:var(--ink); font-family: 'Archivo', system-ui, -apple-system; }
a { color:var(--ink); text-decoration:none }
.wrap { max-width:1200px; margin-inline:auto; padding: 24px; }

/* Noise overlay for extra edge */
body::after { content:""; position:fixed; inset:0; pointer-events:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.03"/></svg>'); mix-blend-mode: soft-light; }

/* Nav */
header.nav { position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg, rgba(7,7,10,.85), rgba(7,7,10,.45)); border-bottom:1px solid var(--border); z-index:50 }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 10px 24px; max-width:1200px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .sig { font-weight:900; letter-spacing:.5px; font-size:18px; text-transform:uppercase }
.badge { font-family:'Chakra Petch', monospace; font-weight:700; padding:4px 8px; border-radius:999px; background:linear-gradient(90deg,var(--hot),var(--xrpl)); color:#0c0c12; }
.nav a.btn { padding:10px 16px; border-radius:12px; border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow); transition:.15s; font-weight:700 }
.nav a.btn:hover { transform: translateY(-1px); border-color:var(--acid) }
.burger { display:none; background:var(--card); border:1px solid var(--border); color:var(--ink); padding:8px 12px; border-radius:10px; }

/* CTA */
.cta { display:flex; gap:10px; align-items:center }
.cta .pill { padding:12px 18px; border-radius:999px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; box-shadow:var(--shadow); border:1px solid var(--border) }
.pill.primary { background:linear-gradient(90deg, var(--hot), var(--xrpl)); color:#0b0b10 }
.pill.ghost { background:var(--card) }

/* Hero - FORCED LAYOUT */
.hero { 
  display: block !important; 
  position: relative !important;
  min-height: 70svh;
  width: 100% !important;
  overflow: hidden !important;
}
.hero > div:first-child {
  /* Left column - text content */
  width: 60% !important;
  float: left !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
.hero > div:last-child,
.hero > #debug-container {
  /* Right column - image */
  width: 40% !important;
  float: right !important;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
}
.hero::after {
  content: "";
  display: table;
  clear: both;
}
.hero-img { 
  width: 100%; 
  border: 1px solid var(--border); 
  box-shadow: var(--shadow); 
  border-radius: 24px; 
  min-height: 300px; 
  background: var(--glass); 
  position: relative; 
}
.hero-img img { 
  display: block; 
  width: 100%; 
  height: auto; 
}
.hero-img-container { 
  position: relative; 
}
.img-fallback { 
  position: absolute; 
  right: 10px; 
  bottom: 10px; 
  padding: 8px 12px; 
  border-radius: 999px; 
  background: var(--card); 
  border: 1px solid var(--border); 
  box-shadow: var(--shadow); 
  font-weight: 800; 
  text-transform: uppercase; 
  letter-spacing: .5px; 
  display: none;
}
.img-fallback.show { display:inline-block }
.kicker { color:var(--muted); font-weight:700; letter-spacing:1.5px; text-transform:uppercase }
h1 { font-size: clamp(40px, 7vw, 96px); line-height:1; margin:8px 0 10px; font-weight:900; letter-spacing:-1px }

/* Glitch edge */
.glitch { position:relative; display:inline-block }
.glitch::before, .glitch::after { content: attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%; mix-blend-mode:screen; filter:blur(.5px); }
.glitch::before { transform:translate(2px,0); color: var(--hot); clip-path: inset(0 0 0 0); animation:clipA 3s infinite linear alternate }
.glitch::after  { transform:translate(-2px,0); color: var(--xrpl); animation:clipB 2.7s infinite linear alternate }
@keyframes clipA { 0%{clip-path: inset(0 0 85% 0)} 50%{clip-path: inset(40% 0 20% 0)} 100%{clip-path: inset(85% 0 0 0)} }
@keyframes clipB { 0%{clip-path: inset(85% 0 0 0)} 50%{clip-path: inset(20% 0 40% 0)} 100%{clip-path: inset(0 0 85% 0)} }

.sub { font-size: clamp(16px, 2.4vw, 22px); color:var(--muted); max-width:60ch }

/* Marquee */
.marquee { 
  margin-top: 18px; 
  border: 1px dashed var(--border); 
  border-radius: 16px; 
  padding: 10px 0; 
  overflow: hidden; 
  background: rgba(255,255,255,.03);
  width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
}
.marquee-track { display: flex; gap: 26px; animation: scroll 24s linear infinite }
@keyframes scroll { to { transform: translateX(-50%) } }
.tag { white-space:nowrap; background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); padding:8px 16px; border-radius:999px; border:1px solid var(--border); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) }

/* Grid + Cards */
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:18px; margin-top:42px }
.card { grid-column: span 4; padding:20px; border-radius:20px; background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow) }
.card h3 { margin:0 0 8px; font-size:22px }
.muted { color:var(--muted) }
.token-box { display:flex; gap:10px; align-items:center; padding:14px; border-radius:14px; background:rgba(0,161,224,.08); border:1px solid rgba(0,161,224,.3) }
.token-box code { font-family:'Chakra Petch', monospace; font-weight:700 }
.copy { cursor:pointer; border:1px solid var(--border); padding:8px 12px; border-radius:8px; background:var(--card) }
.avatar { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:22px; border:1px solid var(--border); background:#111; box-shadow:var(--shadow) }
.road { list-style:none; padding:0; margin:0 }
.road li { padding:12px 0; border-bottom:1px dashed var(--border) }
.road li:last-child { border-bottom:none }
.foot { margin-top:64px; padding:24px 0; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.tiny { font-size:12px; color:var(--muted) }
.btn-row { display:flex; gap:12px; flex-wrap:wrap }
.outline { border:1px solid var(--border); border-radius:12px; padding:12px 16px; background:var(--card); font-weight:800; text-transform:uppercase; letter-spacing:.7px }

/* Responsive */
@media (max-width:1000px) {
  .hero { grid-template-columns: 1fr !important; min-height:unset }
  .hero > .hero-img-container { 
    order: -1; /* Move image above text on mobile */
  }
  .card { grid-column: span 12 }
  .nav-inner { gap:10px }
  nav.nav { display:none }
  .burger { display:block }
  .hero-img { aspect-ratio: 16 / 9 }
}