/* multipledger.com - Colors: #080C14, #0C1018, #E8ECF0, #90A0B0, #4080F0, #F0A040, #A060F0, #40E080 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #080C14; color: #90A0B0; font-family: 'Manrope', sans-serif; font-size: 0.95rem; line-height: 1.7; }

/* Ledger Header Bar */
.ledger-bar { position: fixed; top: 0; left: 0; right: 0; height: 48px; background: #0C1018; border-bottom: 1px solid rgba(64,224,128,0.1); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; z-index: 100; }
.bar-logo { font-weight: 800; font-size: 0.9rem; color: #E8ECF0; letter-spacing: -0.01em; }
.bar-status { display: flex; align-items: center; gap: 0.75rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s ease infinite; }
.dot-blue { background: #4080F0; box-shadow: 0 0 6px rgba(64,128,240,0.5); }
.dot-amber { background: #F0A040; box-shadow: 0 0 6px rgba(240,160,64,0.5); }
.dot-violet { background: #A060F0; box-shadow: 0 0 6px rgba(160,96,240,0.5); }
@keyframes pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.status-label { font-size: 0.7rem; color: #90A0B0; }

/* Hero Lanes */
.hero-lanes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; min-height: 70vh; margin-top: 48px; }
.lane { background: #0C1018; position: relative; overflow: hidden; padding: 2rem; }
.lane-blue { border-top: 2px solid rgba(64,128,240,0.3); }
.lane-amber { border-top: 2px solid rgba(240,160,64,0.3); }
.lane-violet { border-top: 2px solid rgba(160,96,240,0.3); }
.hero-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-title { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.c-blue { color: #4080F0; }
.c-amber { color: #F0A040; }
.c-violet { color: #A060F0; }
.hero-sub { color: #90A0B0; max-width: 320px; font-size: 0.9rem; }

/* Transaction Flow */
.tx-flow { position: absolute; top: 0; width: 1px; height: 100%; left: 50%; opacity: 0.2; }
.lane-blue .tx-flow { background: #4080F0; }
.lane-violet .tx-flow { background: #A060F0; }
.tx-dot { width: 3px; height: 3px; border-radius: 50%; position: absolute; left: -1px; animation: flowDown 8s linear infinite; }
.lane-blue .tx-dot { background: #4080F0; box-shadow: 0 0 4px #4080F0; }
.lane-violet .tx-dot { background: #A060F0; box-shadow: 0 0 4px #A060F0; }
@keyframes flowDown { 0% { top: -3px; } 100% { top: 100%; } }

/* Bridge */
.bridge { background: #0E1420; padding: 2rem; border-top: 1px solid rgba(64,224,128,0.1); border-bottom: 1px solid rgba(64,224,128,0.1); }
.bridge-arcs { width: 100%; max-width: 800px; height: 80px; margin: 0 auto 1.5rem; display: block; }
.arc { fill: none; stroke-width: 1.5; stroke-dasharray: 8 4; stroke-dashoffset: 0; animation: arcFlow 2s linear infinite; }
.arc-blue-amber { stroke: url(#grad1); stroke: #4080F0; }
.arc-amber-violet { stroke: #A060F0; }
.arc-blue-violet { stroke: #40E080; opacity: 0.4; }
@keyframes arcFlow { to { stroke-dashoffset: -24; } }
.bridge-content { max-width: 700px; margin: 0 auto; text-align: center; }
.bridge-title { font-weight: 800; font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: #E8ECF0; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.bridge-text { color: #90A0B0; }

/* Section fade-in */
.section { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.section.visible { opacity: 1; transform: translateY(0); }

/* Lane Cards */
.lanes-content { max-width: 1280px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.lane-card { background: #0C1018; padding: 2rem; }
.lane-indicator { width: 40px; height: 3px; border-radius: 2px; margin-bottom: 1rem; }
.lane-title { font-weight: 800; font-size: 1.2rem; color: #E8ECF0; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.lane-text { color: #90A0B0; margin-bottom: 1rem; }

/* Transaction Data */
.tx-data { border-top: 1px solid rgba(144,160,176,0.1); padding-top: 0.75rem; }
.data-row { display: flex; justify-content: space-between; padding: 0.3rem 0; }
.data-key { font-size: 0.8rem; color: #90A0B0; }
.data-val { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; letter-spacing: 0.02em; }
.data-val.blue { color: #4080F0; }
.data-val.amber { color: #F0A040; }
.data-val.violet { color: #A060F0; }

/* Node Graph */
.node-graph { display: flex; align-items: center; justify-content: center; gap: 0; padding: 2rem 0; }
.node { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.node-blue { background: rgba(64,128,240,0.2); border: 2px solid #4080F0; }
.node-amber { background: rgba(240,160,64,0.2); border: 2px solid #F0A040; }
.node-violet { background: rgba(160,96,240,0.2); border: 2px solid #A060F0; }
.node-label { font-size: 0.65rem; font-weight: 800; color: #E8ECF0; }
.node-connection { width: 60px; height: 2px; background: #40E080; }

/* Responsive */
@media (max-width: 768px) {
    .hero-lanes { grid-template-columns: 1fr; min-height: auto; }
    .lane { border-top: 4px solid; padding: 2rem; }
    .lanes-content { grid-template-columns: 1fr; }
    .lane-card[style] { grid-column: span 1 !important; }
    .bar-status { display: none; }
}