:root{--primary:#0d6efd;--accent:#198754;--bg:#fff;--text:#212529;--muted:#6c757d}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:var(--text)}
.hero-section{background:linear-gradient(135deg,#0d6efd 0%,#6610f2 100%);color:#fff;padding:5rem 0;position:relative;overflow:hidden}
.hero-section .lead{font-size:1.5rem;opacity:.9}
.hero-description{opacity:.85;max-width:600px;margin-left:auto;margin-right:auto}
.hero-badges .badge{font-size:.8rem;padding:.4rem .75rem;border-radius:1rem}

/* ═══════════════════════════════════════════════════════ */
/* NETWORK ANIMATION — hero canvas overlay                 */
/* ═══════════════════════════════════════════════════════ */

#network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.35;
    z-index: 0;
}

.hero-section > .container {
    position: relative;
    z-index: 1;
}

.stats-bar{background-color:#f8f9fa;border-bottom:1px solid #dee2e6}
.stat-item{display:flex;flex-direction:column;align-items:center}
.stat-value{font-size:2rem;font-weight:700;color:var(--primary)}
.stat-label{font-size:.85rem;color:var(--muted)}
.model-card{background:#fff;border:1px solid #dee2e6;border-radius:.5rem;padding:1.25rem;margin-bottom:1rem;transition:all .2s ease}
.model-card:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-1px)}
.model-card .model-name{font-weight:600;font-size:1.1rem;color:var(--text)}
.model-card .model-stats{display:flex;gap:1rem;flex-wrap:wrap;margin:.5rem 0}
.model-card .model-stat{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.25rem}
.model-card .model-stat .value{font-weight:600;color:var(--text)}
.node-row{display:flex;align-items:center;padding:.5rem 0;border-top:1px solid #f0f0f0;font-size:.85rem}
.node-row .node-hash{font-family:'Courier New',monospace;font-size:.8rem;color:var(--primary)}
.node-row .node-model-metric{font-size:.75rem;padding:.15rem .4rem;border-radius:.75rem;background-color:#f8f9fa;border:1px solid #dee2e6;color:#495057}
.node-model-metric.tps{border-color:rgba(25,135,84,.3);color:#198754}
.node-model-metric.load-low{border-color:rgba(25,135,84,.3);color:#198754}
.node-model-metric.load-med{border-color:rgba(255,193,7,.4);color:#997404}
.node-model-metric.load-high{border-color:rgba(220,53,69,.3);color:#dc3545}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.5rem}
.status-dot.online{background-color:#198754;box-shadow:0 0 4px rgba(25,135,84,.4)}
.status-dot.busy{background-color:#ffc107}
.step-card{background:#fff;padding:2rem 1.5rem;border-radius:.5rem;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.step-number{width:48px;height:48px;border-radius:50%;background-color:var(--primary);color:#fff;font-size:1.5rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-bottom:1rem}
.code-block{border-radius:.5rem;overflow:hidden}
.code-header{background-color:#2d2d2d;color:#ccc;padding:.5rem 1rem;display:flex;justify-content:space-between;align-items:center;font-size:.85rem}
.code-block pre{background-color:#1e1e1e;color:#d4d4d4;padding:1rem;margin:0;overflow-x:auto;font-size:.85rem}
.code-block pre code{font-family:'Courier New',Consolas,Monaco,monospace}
.copy-btn{font-size:.75rem}
.feature-card{background:#fff;padding:2rem 1.5rem;border-radius:.5rem;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .2s ease;height:100%}
.feature-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.copy-api-btn{font-size:.75rem;padding:.2rem .5rem}
@media(max-width:768px){.hero-section{padding:3rem 0}.hero-section .display-4{font-size:2rem}.stat-value{font-size:1.5rem}.model-card .model-stats{gap:.5rem}}

/* ═══════════════════════════════════════════════════════ */
/* FAQ SECTION                                             */
/* ═══════════════════════════════════════════════════════ */

#faq details {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

#faq details:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#faq summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#faq summary::-webkit-details-marker {
    display: none;
}

#faq summary::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--muted);
    transition: transform 0.2s ease;
}

#faq details[open] summary::after {
    transform: rotate(180deg);
}

#faq details[open] summary {
    border-bottom: 1px solid #dee2e6;
    color: var(--primary);
}

#faq .faq-answer {
    padding: 1rem 1.25rem;
    line-height: 1.7;
    color: #495057;
}

#faq .faq-answer p:last-child {
    margin-bottom: 0;
}

#faq .faq-answer pre {
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.82rem;
    overflow-x: auto;
}

#faq .faq-answer code {
    font-family: 'Courier New', Consolas, Monaco, monospace;
}

#faq .faq-answer pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

/* ═══════════════════════════════════════════════════════ */
/* DOWNLOAD SECTION                                       */
/* ═══════════════════════════════════════════════════════ */

.download-section {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.download-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.download-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.download-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.download-card-body {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.download-command {
    flex-grow: 1;
    min-width: 0;
}

.download-command code {
    display: block;
    font-size: 0.78rem;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    overflow-x: auto;
    user-select: all;
}

.btn-copy-download {
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: var(--muted);
    transition: all 0.15s ease;
}

.btn-copy-download:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.download-footnote {
    font-size: 0.8rem;
}

.download-footnote code {
    font-size: 0.78rem;
    background-color: #f1f3f4;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

@media (max-width: 768px) {
    .download-card-body {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-copy-download {
        align-self: flex-end;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* TOKEN BUDGET STYLES                                    */
/* ═══════════════════════════════════════════════════════ */

.token-budget-bar {
    height: 4px;
    border-radius: 2px;
    background-color: #e9ecef;
    overflow: hidden;
    margin-top: 0.375rem;
}

.token-budget-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.token-budget-fill.safe {
    background-color: var(--success-color);
}

.token-budget-fill.warning {
    background-color: var(--warning-color);
}

.token-budget-fill.exceeded {
    background-color: var(--danger-color);
}

.token-usage-text {
    font-size: 0.75rem;
    color: var(--secondary-color);
    margin-top: 0.25rem;
}

.token-usage-text.exceeded {
    color: var(--danger-color);
    font-weight: 600;
}

.token-usage-text.warning {
    color: #997404;
}

.budget-warning-badge {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.75rem;
    animation: livePulse 2s infinite;
}