:root{
  --bg:#0e0b00;
  --gold:#ffcc33;
  --gold-soft:#ffb300;
  --text:#e4d7a1;
  --muted: rgba(255,224,128,.55);
  --panel: rgba(255,224,128,.04);
  --border: rgba(255,204,51,.18);
}
*{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";
  background: radial-gradient(1200px 600px at 50% 45%, rgba(255,204,51,0.25), transparent 65%), var(--bg);
  color:var(--text);
}
main{min-height:100vh; position:relative; overflow:hidden}
header.nav{
  position:sticky; top:0; z-index:10;
  display:flex; gap:20px; align-items:center; justify-content:space-between;
  padding:18px clamp(16px,4vw,64px); background:rgba(14,11,0,.55); backdrop-filter: blur(6px);
  text-transform:uppercase; letter-spacing:.18em; color:var(--gold);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; gap:12px; align-items:center; font-weight:800; font-size:14px; margin:0}
.brand img{width:28px; height:28px; filter: drop-shadow(0 0 6px rgba(255,204,51,.5));}
header.nav .right{display:flex; gap:12px; align-items:center}
.badge{font-size:12px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#1a1300;
  background:linear-gradient(180deg, #ffd96a, #ffbf1f);
  padding:10px 16px; border-radius:999px; font-weight:800; letter-spacing:.15em;
  box-shadow:0 0 24px rgba(255,191,31,.35), inset 0 0 8px rgba(255,255,255,.35);
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
/* Centered hero */
.hero.centered{ min-height: calc(100vh - 96px); display:grid; place-items:center; position:relative; }
.hero.centered .hero-content{ text-align:center; }
.hero-title{ font-size: clamp(28px, 6vw, 68px); letter-spacing:.35em; text-transform:uppercase; color: var(--gold);
  text-shadow: 0 0 18px rgba(255,204,51,.55); margin: 0 0 18px 0; }
.btn.big{ padding:14px 22px; font-size:14px; letter-spacing:.22em }

/* Ramen bowls animated background */
.ramen-sky{ position: fixed; inset: -10% -10% -10% -10%; pointer-events:none; z-index:-1; }
.ramen-sky span{ position:absolute; width:80px; height:80px; background: url('assets/ramen.svg') center/contain no-repeat;
  opacity:.12; filter: drop-shadow(0 0 8px rgba(255,204,51,.4)); animation: ramenFloat linear infinite; }
.ramen-sky span:nth-child(1){ left:5%;  top:80%; animation-duration:38s; animation-delay:-2s; transform: scale(1.0); }
.ramen-sky span:nth-child(2){ left:18%; top:72%; animation-duration:46s; animation-delay:-9s; transform: scale(0.9); }
.ramen-sky span:nth-child(3){ left:34%; top:78%; animation-duration:42s; animation-delay:-14s; transform: scale(1.1); }
.ramen-sky span:nth-child(4){ left:53%; top:82%; animation-duration:50s; animation-delay:-21s; transform: scale(0.95); }
.ramen-sky span:nth-child(5){ left:70%; top:75%; animation-duration:44s; animation-delay:-7s; transform: scale(1.05); }
.ramen-sky span:nth-child(6){ left:86%; top:83%; animation-duration:40s; animation-delay:-17s; transform: scale(0.9); }
@keyframes ramenFloat{ 0%{ transform: translateY(0) rotate(0deg) scale(1); }
 50%{ transform: translateY(-40vh) rotate(10deg) scale(1.05); opacity:.16; }
 100%{ transform: translateY(-80vh) rotate(20deg) scale(1); opacity:.1; } }

/* Trading layout */
.trade-grid{ display:grid; grid-template-columns: 240px 1fr; gap:16px; width:min(1200px, 95vw); margin: 24px auto; }
.trade-sidebar{ border:1px solid var(--border); border-radius:16px; background:var(--panel); padding:10px; }
.trade-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.trade-list li{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:12px; cursor:pointer; border:1px solid transparent; }
.trade-list li:hover{ background: rgba(255,224,128,.06); border-color: var(--border); }
.trade-list li.active{ background: rgba(255,224,128,.12); border-color: var(--border); }
.trade-list .symbol{ font-weight:800; color:var(--gold); letter-spacing:.08em }
.trade-list .leverage{ font-size:12px; opacity:.7 }
.card{ border:1px solid var(--border); border-radius:16px; background:var(--panel); padding:12px; }
.chart-card{ border:1px solid var(--border); border-radius:16px; background:var(--panel); padding:12px; }
.chart-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.chart-title{ margin:0; color:var(--gold) }
.chart-frame{ width:100%; height:560px; border:0; border-radius:12px; background:#0a0a0a }
@media (max-width: 960px){ .trade-grid{ grid-template-columns: 1fr; } }

.footer{padding:24px; text-align:center; font-size:12px; letter-spacing:.12em; opacity:.7; border-top:1px solid var(--border); margin-top:24px}