:root{
  --bg:#071029;
  --panel: rgba(255,255,255,0.03);
  --muted: #97a6b3;
  --text: #e6f7ff;
  --accent: #00C2FF;
  --accent-2: #00FFA3;
  --card-radius: 12px;
  --glass: rgba(255,255,255,0.04);
  --max-width: 1100px;
  --container-padding: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#001525 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  font-size:16px;
}

.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding: calc(var(--container-padding) * 1) ;
}

/* Header */
.site-header{
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(7,16,41,0.6), rgba(7,16,41,0.35));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position:sticky;
  top:0;
  z-index:20;
}
.header-inner{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.brand{
  color:var(--text);
  font-weight:700;
  font-size:20px;
  text-decoration:none;
}
.nav a{
  color:var(--muted);
  margin-left:14px;
  text-decoration:none;
  font-size:14px;
}
.search{
  display:flex;
  gap:10px;
  align-items:center;
  flex:1;
  margin:0 24px;
}
.search input[type="search"]{
  flex:1;
  min-width:220px;
  padding:12px 14px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  border-radius:10px;
  outline:none;
}
.search input::placeholder{color:rgba(230,247,255,0.35)}
.btn{
  border-radius:10px;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer;
  border:0;
  background:transparent;
  color:var(--text);
}
.btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#001;
  box-shadow: 0 6px 18px rgba(0,194,255,0.12), 0 2px 6px rgba(0,255,163,0.04);
}
.btn.outline{
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;
}

/* Hero */
.hero{
  padding:56px 0;
}
.hero-inner{
  display:flex;
  gap:32px;
  align-items:center;
}
.hero-copy{flex:1; max-width:620px}
.hero-copy h1{
  margin:0 0 12px 0;
  font-size:32px;
  letter-spacing:-0.4px;
}
.lead{color:var(--muted); margin:0 0 18px 0}
.hero-ctas{display:flex; gap:12px}
.hero-art{width:380px; height:240px; border-radius:16px; overflow:hidden; background:linear-gradient(135deg, rgba(0,194,255,0.06), rgba(0,255,163,0.03)); display:flex; align-items:center; justify-content:center}
.hero-svg{width:100%; height:100%; opacity:0.95;}

/* Features */
.features{padding:28px 0}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--panel); padding:18px; border-radius:var(--card-radius); box-shadow: 0 6px 24px rgba(2,10,20,0.45); border:1px solid rgba(255,255,255,0.02)}
.feature h3{margin:0 0 8px 0}
.feature p{color:var(--muted); margin:0}

/* How */
.how{padding:18px 0}
.how-steps{padding-left:18px; color:var(--muted)}

/* Demo tx card */
.demo{padding:20px 0}
.tx-card{padding:18px; display:block}
.tx-summary{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.row{display:flex; gap:12px; align-items:center}
.col{min-width:120px}
.small{min-width:90px}
.muted{color:var(--muted); font-size:13px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; color:var(--text)}
.status{padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px}
.status.confirmed{background:linear-gradient(90deg,#062c1a40,#06323a40); color:#7df1c1; border:1px solid rgba(125,241,193,0.08)}
.divider{border:0; border-top:1px solid rgba(255,255,255,0.03); margin:12px 0}

/* parties */
.parties{display:flex; gap:20px; flex-wrap:wrap}
.party{flex:1}

/* table */
.tx-table-wrap{overflow:auto; margin:12px 0}
.tx-table{width:100%; border-collapse:collapse; font-size:14px}
.tx-table th, .tx-table td{padding:10px 8px; text-align:left; border-bottom:1px dashed rgba(255,255,255,0.03)}
.tx-table th{color:var(--muted); font-weight:600; font-size:13px}
.tx-table td.mono{font-family:ui-monospace, monospace; color:var(--text)}

/* fees */
.fees{margin-top:8px; gap:18px}

/* raw json */
.raw-json summary{cursor:pointer; padding:8px 10px; background:rgba(255,255,255,0.02); border-radius:8px}
.json{background:rgba(0,0,0,0.25); padding:12px; border-radius:8px; max-height:220px; overflow:auto; color:#bfefff}

/* footer */
.site-footer{padding:20px 0; margin-top:40px; border-top:1px solid rgba(255,255,255,0.02)}
.footer-inner{display:flex; justify-content:space-between; gap:12px; align-items:center}
.footer-nav a{color:var(--muted); margin-left:12px; text-decoration:none}

/* links */
.link{color:var(--accent); text-decoration:none}

/* small utilities */
.icon-btn{background:transparent; border:0; color:var(--muted); margin-left:8px; cursor:pointer; font-size:14px}
.error{animation:shake .28s}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}100%{transform:translateX(0)}}

/* responsiveness */
@media (max-width:900px){
  .hero-inner{flex-direction:column-reverse; align-items:flex-start}
  .feature-grid{grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .header-inner{flex-direction:column; align-items:stretch; gap:8px}
  .search{margin:0; order:3; width:100%}
  .nav{order:2; display:flex; justify-content:flex-end}
  .feature-grid{grid-template-columns:1fr}
  .hero-copy h1{font-size:24px}
  .hero-art{width:100%; height:160px}
  .tx-summary{flex-direction:column; align-items:flex-start}
}