:root{
  --bg1:#070a1f; --bg2:#0d1240; --panel:#0b1034cc; --stroke:#2837a0;
  --text:#eef1ff; --muted:#b9c0ff; --accent:#7c5cff; --accent2:#19e3ff; --accent3:#ff68d7;
  --success:#27e1a8; --warn:#ffd166;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 360px at 6% -10%, #7c5cff33, transparent),
    radial-gradient(900px 360px at 96% 110%, #19e3ff2b, transparent),
    linear-gradient(180deg,var(--bg1),var(--bg2));
}
a{color:#a7b2ff;text-decoration:none}
.small{font-size:12px;opacity:.8}
.container{max-width:1180px;margin:0 auto;padding:18px}
.card{
  background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(0,0,0,.35); padding:16px;
}
/* NAV */
.nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; background:linear-gradient(180deg,#11164acc,#0b0f38cc); border-bottom:1px solid var(--stroke); backdrop-filter:blur(8px)
}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:32px;height:32px}
.name{font-weight:900;letter-spacing:.3px}
.menu{display:flex;gap:12px}
.menu a{padding:8px 10px;border-radius:10px}
.menu a:hover{background:#151b58}
.actions{display:flex;gap:8px}
/* HERO */
.hero{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:18px; align-items:center;
  padding:22px 18px 0 18px;
}
.hero-copy h1{margin:0 0 8px 0; font-size:44px; line-height:1.05}
.hero-copy p{opacity:.85;margin:0 0 12px 0}
.hero-cta{display:flex;gap:12px;align-items:center}
.badge{padding:6px 10px;border:1px solid #3444b1;border-radius:999px;color:var(--muted);font-size:12px}
.hero-viz{position:relative;height:200px}
.orb{position:absolute;border-radius:50%;filter:blur(8px)}
.orb-a{width:160px;height:160px;background:#7c5cff66;right:40px;top:0;animation:float 6s ease-in-out infinite}
.orb-b{width:120px;height:120px;background:#19e3ff55;left:10px;bottom:0;animation:float 7s ease-in-out infinite reverse}
.portal{position:absolute;inset:auto 0 30px 0;margin:auto;width:220px;height:220px;border-radius:50%;border:3px dashed #19e3ff66}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
/* BUTTONS */
.btn{
  padding:12px 16px;border-radius:12px;border:1px solid var(--stroke);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;font-weight:800;letter-spacing:.3px;cursor:pointer;box-shadow:0 6px 22px rgba(20,24,70,.6)
}
.btn.tiny{padding:8px 10px;font-size:12px}
.btn.lg{padding:14px 18px;font-size:16px}
.btn.ghost{background:linear-gradient(135deg,#1c235d,#141a4d);color:#e6e9ff}
.tag{padding:6px 8px;border:1px solid var(--stroke);border-radius:10px;background:#1a2156;color:#dfe3ff;cursor:pointer}
/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.stat{background:#0c123c;border:1px solid #24329a;border-radius:14px;padding:14px;text-align:center}
.num{font-size:22px;font-weight:900}
/* BRIDGE/TRADE */
.bridge .bridge-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.row{display:flex;align-items:flex-end;gap:10px;margin:10px 0}
.field{flex:1}
label{display:block;font-size:12px;opacity:.8;margin-bottom:6px}
input, select{
  width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--stroke);background:#0b1038;color:var(--text);outline:none
}
.input-affix{position:relative}
.input-affix .tag{position:absolute;right:6px;top:6px}
.estimates{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.hint{margin-top:8px;opacity:.8}
.bridge-actions{display:flex;gap:10px;margin-top:12px}
/* Switch */
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#1b2258;border:1px solid #2b3aa0;border-radius:999px;transition:.2s}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:2px;background:#aeb6ff;border-radius:50%;transition:.2s}
input:checked + .slider{background:linear-gradient(135deg,var(--accent),var(--accent2))}
input:checked + .slider:before{transform:translateX(20px);background:white}
/* Features + Roadmap */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.road h4{margin:.2rem 0 .4rem 0}
.road ul{margin:0;padding-left:18px;line-height:1.6}
/* FOOTER */
.footer{text-align:center;padding:18px;opacity:.7}
/* MODAL */
.modal{position:fixed;inset:0;background:rgba(6,10,28,.7);display:none;align-items:center;justify-content:center;z-index:100}
.modal-card{width:92%;max-width:520px;background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:16px}
.modal-title{font-size:18px;font-weight:900}
.progress{height:10px;border:1px solid var(--stroke);border-radius:999px;background:#0b1038;margin:10px 0 6px 0;overflow:hidden}
.progbar{height:100%;width:0;background:linear-gradient(135deg,var(--accent),var(--accent2));transition:width .4s}
.steps{margin:0;padding-left:18px;line-height:1.6}
.modal-actions{display:flex;justify-content:flex-end;margin-top:12px}
/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:1fr}
  .road{grid-template-columns:1fr}
}