/* [AI:GPT-5.6 Sol | 2026-09-07 16:55:00 UTC] */

:root {
    --chain-bg: #151c26;
    --chain-bg-deep: #111821;
    --chain-surface: #1c2633;
    --chain-surface-alt: #243141;
    --chain-surface-high: #2b3a4c;

    --chain-text: #eef5f7;
    --chain-soft: #b4c1ca;
    --chain-muted: #738595;

    --chain-cyan: #36d9e7;
    --chain-cyan-soft: #8debf1;
    --chain-violet: #9a78ff;
    --chain-green: #55df9b;
    --chain-amber: #f0b95b;
    --chain-red: #ff6b78;

    --chain-border: rgba(133, 166, 188, 0.17);
    --chain-border-bright: rgba(54, 217, 231, 0.34);

    --chain-width: 84rem;
}

/*
 * Base
 */

html,
body {
    min-height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--chain-bg);

    color: var(--chain-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

.site {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

.container {
    max-width: var(--chain-width);
}

a {
    color: var(--chain-cyan);
}

/*
 * Header
 */

.site-header {
    position: relative;
    z-index: 50;

    background: rgba(17, 24, 33, 0.92);

    border-bottom: 1px solid var(--chain-border);

    backdrop-filter: blur(18px);
}

.site-header .navbar {
    min-height: 5.25rem;
}

.chain-brand {
    display: flex;

    align-items: center;

    gap: 0.85rem;

    color: var(--chain-text);

    font-size: 1rem;
    font-weight: 700;

    letter-spacing: 0.04em;

    text-decoration: none;
}

.chain-brand:hover,
.chain-brand:focus {
    color: var(--chain-text);
}

.chain-logo {
    width: 2rem;
    height: 2rem;

    position: relative;

    display: block;
}

.chain-logo span {
    width: 0.7rem;
    height: 0.7rem;

    position: absolute;

    border: 1px solid var(--chain-cyan);

    background: var(--chain-surface);
}

.chain-logo span:nth-child(1) {
    top: 0;
    left: 0;
}

.chain-logo span:nth-child(2) {
    top: 0.65rem;
    left: 0.65rem;

    border-color: var(--chain-violet);
}

.chain-logo span:nth-child(3) {
    right: 0;
    bottom: 0;

    border-color: var(--chain-green);
}

.navbar-nav {
    gap: 1.7rem;
}

.navbar .nav-link {
    padding-right: 0;
    padding-left: 0;

    color: var(--chain-soft);

    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--chain-cyan);
}

/*
 * Menu
 */

.navbar-toggler {
    border: 0;

    box-shadow: none !important;
}

.chain-menu {
    width: 1.6rem;
    height: 1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}

.chain-menu span {
    height: 2px;

    background: var(--chain-text);
}

/*
 * Hero
 */

.chain-hero {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(54, 217, 231, 0.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 60% 90%,
            rgba(154, 120, 255, 0.1),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--chain-bg-deep),
            var(--chain-bg)
        );
}

.chain-grid-bg {
    position: absolute;

    inset: 0;

    opacity: 0.4;

    background-image:
        linear-gradient(
            var(--chain-border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--chain-border) 1px,
            transparent 1px
        );

    background-size: 4rem 4rem;

    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.85),
        transparent
    );
}

.chain-hero-grid {
    position: relative;
    z-index: 2;

    min-height: 42rem;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(30rem, 1.1fr);

    gap: 5rem;

    align-items: center;

    padding-top: 6rem;
    padding-bottom: 6rem;
}

.chain-eyebrow {
    display: flex;

    align-items: center;

    gap: 0.7rem;

    margin-bottom: 1.5rem;

    color: var(--chain-cyan-soft);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.72rem;

    letter-spacing: 0.12em;
}

.chain-status-dot {
    width: 0.55rem;
    height: 0.55rem;

    display: inline-block;

    border-radius: 50%;

    /*background: var(--chain-green);*/
	background: var(--chain-red);

    box-shadow:
        0 0 1rem rgba(85, 223, 155, 0.75);
}

.chain-hero h1 {
    max-width: 44rem;

    margin: 0;

    color: var(--chain-text);

    font-size: clamp(3.8rem, 7vw, 7rem);

    font-weight: 700;

    line-height: 0.96;

    letter-spacing: -0.065em;
}

.chain-hero-text {
    max-width: 40rem;

    margin-top: 2rem;
    margin-bottom: 0;

    color: var(--chain-soft);

    font-size: 1.08rem;

    line-height: 1.8;
}

.chain-hero-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 1.8rem;

    margin-top: 2.5rem;
}

.chain-btn-primary {
    padding: 0.85rem 1.4rem;

    border: 1px solid var(--chain-cyan);
    border-radius: 0.35rem;

    background: var(--chain-cyan);

    color: #102027;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.chain-btn-primary:hover,
.chain-btn-primary:focus {
    border-color: var(--chain-cyan-soft);

    background: var(--chain-cyan-soft);

    color: #102027;
}

.chain-link {
    color: var(--chain-text);

    font-size: 0.82rem;
    font-weight: 700;

    letter-spacing: 0.04em;

    text-decoration: none;
}

.chain-link span {
    margin-left: 0.35rem;

    color: var(--chain-cyan);
}

/*
 * Chain visual
 */

.chain-visual {
    overflow: hidden;

    border: 1px solid var(--chain-border-bright);
    border-radius: 0.8rem;

    background:
        linear-gradient(
            145deg,
            rgba(36, 49, 65, 0.94),
            rgba(24, 34, 46, 0.96)
        );

    box-shadow:
        0 2rem 6rem rgba(0, 0, 0, 0.22),
        0 0 4rem rgba(54, 217, 231, 0.05);
}

.chain-visual-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 1rem 1.25rem;

    border-bottom: 1px solid var(--chain-border);

    color: var(--chain-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.67rem;

    letter-spacing: 0.09em;
}

.chain-live {
    display: flex;

    align-items: center;

    gap: 0.4rem;

    color: var(--chain-green);
}

.chain-live i {
    width: 0.4rem;
    height: 0.4rem;

    display: block;

    border-radius: 50%;

    background: currentColor;
}

.chain-blocks {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 3rem 1.5rem;
}

.chain-block {
    width: 7.5rem;

    padding: 1rem;

    border: 1px solid var(--chain-border);

    background: rgba(21, 28, 38, 0.8);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;
}

.chain-block span,
.chain-block small {
    display: block;
}

.chain-block span {
    color: var(--chain-muted);

    font-size: 0.6rem;

    letter-spacing: 0.08em;
}

.chain-block strong {
    display: block;

    margin: 0.35rem 0;

    color: var(--chain-text);

    font-size: 0.95rem;
}

.chain-block small {
    color: var(--chain-green);

    font-size: 0.58rem;

    letter-spacing: 0.06em;
}

.chain-block-active {
    border-color: var(--chain-cyan);

    box-shadow:
        0 0 1.5rem rgba(54, 217, 231, 0.1);
}

.chain-block-active small {
    color: var(--chain-cyan);
}

.chain-connector {
    width: 2rem;
    height: 1px;

    background: linear-gradient(
        90deg,
        var(--chain-border-bright),
        var(--chain-cyan)
    );
}

.chain-events {
    margin: 0 1.25rem;

    border-top: 1px solid var(--chain-border);
}

.chain-events > div {
    display: grid;

    grid-template-columns: 1.5rem 1fr auto;

    align-items: center;

    gap: 0.65rem;

    padding: 0.75rem 0;

    border-bottom: 1px solid var(--chain-border);

    color: var(--chain-soft);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.67rem;
}

.chain-events strong {
    font-size: 0.6rem;

    letter-spacing: 0.06em;
}

.chain-event-icon {
    font-size: 0.9rem;
}

.chain-event-icon.verified {
    color: var(--chain-green);
}

.chain-event-icon.contract {
    color: var(--chain-violet);
}

.chain-event-icon.pending {
    color: var(--chain-cyan);
}

.chain-hash {
    display: flex;

    justify-content: space-between;

    gap: 1rem;

    padding: 1.1rem 1.25rem;

    color: var(--chain-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.64rem;
}

.chain-hash code {
    color: var(--chain-cyan-soft);
}

/*
 * Network strip
 */

.chain-network-strip {
    position: relative;
    z-index: 3;

    border-top: 1px solid var(--chain-border);
    border-bottom: 1px solid var(--chain-border);

    background: var(--chain-surface);
}

.chain-network-stats {
    display: grid;

    grid-template-columns: repeat(5, 1fr);
}

.chain-network-stats > div {
    padding: 1.35rem 1.5rem;

    border-right: 1px solid var(--chain-border);
}

.chain-network-stats > div:first-child {
    border-left: 1px solid var(--chain-border);
}

.chain-network-stats span,
.chain-network-stats strong {
    display: block;
}

.chain-network-stats span {
    margin-bottom: 0.35rem;

    color: var(--chain-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.58rem;

    letter-spacing: 0.09em;
}

.chain-network-stats strong {
    color: var(--chain-text);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.82rem;
}

.chain-network-stats .chain-value-ready {
    color: var(--chain-cyan);
}

/*
 * Main content
 */

.site-main {
    flex: 1;

    background:
        linear-gradient(
            180deg,
            var(--chain-bg),
            var(--chain-bg-deep)
        );

    color: var(--chain-text);
}

.chain-content {
    padding-top: clamp(4rem, 7vw, 7rem);
    padding-bottom: clamp(5rem, 8vw, 8rem);
}

.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4 {
    color: var(--chain-text);

    font-weight: 700;

    letter-spacing: -0.035em;
}

.site-main h1 {
    margin-bottom: 2rem;

    font-size: clamp(2.8rem, 5vw, 4.8rem);
}

.site-main h2 {
    margin-top: 3rem;
    margin-bottom: 1.2rem;

    font-size: clamp(2rem, 4vw, 3.2rem);
}

.site-main p,
.site-main li {
    color: var(--chain-soft);

    line-height: 1.8;
}

/*
 * Feature vocabulary
 */

.chain-feature-grid,
.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1.25rem;

    margin: 3rem 0 5rem;
}

.chain-card,
.feature-card {
    position: relative;

    overflow: hidden;

    padding: 2rem;

    border: 1px solid var(--chain-border);
    border-radius: 0.65rem;

    background:
        linear-gradient(
            145deg,
            var(--chain-surface),
            rgba(28, 38, 51, 0.65)
        );
}

.chain-card::before,
.feature-card::before {
    content: "";

    width: 3rem;
    height: 2px;

    position: absolute;

    top: 0;
    left: 2rem;

    background: var(--chain-cyan);
}

.chain-card:nth-child(2)::before {
    background: var(--chain-violet);
}

.chain-card:nth-child(3)::before {
    background: var(--chain-green);
}

.chain-card-label {
    display: block;

    margin-bottom: 2rem;

    color: var(--chain-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.65rem;

    letter-spacing: 0.1em;
}

.chain-card h3,
.feature-card h3 {
    margin-bottom: 0.8rem;

    font-size: 1.3rem;
}

.chain-card p:last-child,
.feature-card p:last-child {
    margin-bottom: 0;
}

/*
 * Explorer / data panels
 */

.chain-panel {
    overflow: hidden;

    margin: 2rem 0;

    border: 1px solid var(--chain-border);
    border-radius: 0.65rem;

    background: var(--chain-surface);
}

.chain-panel-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1rem 1.25rem;

    border-bottom: 1px solid var(--chain-border);

    background: var(--chain-surface-alt);
}

.chain-panel-header h3 {
    margin: 0;

    font-size: 0.85rem;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.chain-panel-body {
    padding: 1.25rem;
}

/*
 * Statuses
 */

.chain-badge {
    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.35rem 0.55rem;

    border: 1px solid currentColor;
    border-radius: 999px;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.chain-verified {
    color: var(--chain-green);
}

.chain-pending,
.chain-mining {
    color: var(--chain-cyan);
}

.chain-contract {
    color: var(--chain-violet);
}

.chain-warning {
    color: var(--chain-amber);
}

.chain-threat {
    color: var(--chain-red);
}

/*
 * Connection strings
 */

.chain-connection {
    margin: 2rem 0;

    padding: 1.5rem;

    border: 1px solid var(--chain-border-bright);
    border-radius: 0.65rem;

    background: var(--chain-bg-deep);
}

.chain-connection-label {
    margin-bottom: 0.8rem;

    color: var(--chain-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.65rem;

    letter-spacing: 0.09em;
}

.chain-connection code {
    display: block;

    overflow-x: auto;

    color: var(--chain-cyan-soft);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: clamp(0.8rem, 2vw, 1rem);

    white-space: nowrap;
}

/*
 * Bootstrap components
 */

.card {
    border-color: var(--chain-border);

    background: var(--chain-surface);

    color: var(--chain-text);
}

.card-header,
.card-footer {
    border-color: var(--chain-border);

    background: var(--chain-surface-alt);
}

.form-label {
    color: var(--chain-soft);
}

.form-control,
.form-select {
    border-color: var(--chain-border);

    background: var(--chain-bg-deep);

    color: var(--chain-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--chain-cyan);

    background: var(--chain-bg-deep);

    color: var(--chain-text);

    box-shadow:
        0 0 0 0.15rem rgba(54, 217, 231, 0.1);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--chain-soft);
    --bs-table-border-color: var(--chain-border);
}

.table thead th {
    color: var(--chain-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.65rem;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

/*
 * Code
 */

code {
    color: var(--chain-cyan-soft);
}

pre {
    overflow-x: auto;

    padding: 1.5rem;

    border: 1px solid var(--chain-border);
    border-radius: 0.5rem;

    background: var(--chain-bg-deep);

    color: var(--chain-text);
}

/*
 * Footer
 */

.site-footer {
    margin-top: auto;

    border-top: 1px solid var(--chain-border);

    background: #111821;
}

.chain-footer {
    min-height: 12rem;

    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    gap: 4rem;
}

.chain-footer-brand {
    color: var(--chain-text);

    font-size: 1.15rem;
    font-weight: 700;

    text-decoration: none;
}

.chain-footer p {
    max-width: 30rem;

    margin: 0.6rem 0 0;

    color: var(--chain-muted);

    font-size: 0.78rem;
}

.chain-footer-system {
    display: flex;

    gap: 2rem;

    color: var(--chain-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.62rem;
}

.chain-footer-system span:first-child {
    color: var(--chain-green);
}

.chain-footer-system i {
    width: 0.4rem;
    height: 0.4rem;

    display: inline-block;

    margin-right: 0.3rem;

    border-radius: 50%;

    background: currentColor;
}

.chain-footer-system a {
    color: var(--chain-soft);

    text-decoration: none;
}

/*
 * Responsive
 */

@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        margin-top: 1rem;

        padding: 1rem 0;

        border-top: 1px solid var(--chain-border);
    }

    .navbar-nav {
        gap: 0;
    }

    .chain-hero-grid {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .chain-visual {
        max-width: 44rem;
    }

    .chain-network-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .chain-network-stats > div {
        border-bottom: 1px solid var(--chain-border);
    }

    .chain-footer {
        grid-template-columns: 1fr;

        gap: 2rem;

        padding: 3rem 0;
    }

    .chain-footer-system {
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    .chain-feature-grid,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .chain-network-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .chain-blocks {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .chain-block {
        width: auto;

        flex: 1;

        padding: 0.75rem;
    }

    .chain-connector {
        width: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .chain-hero-grid {
        gap: 3rem;

        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .chain-hero h1 {
        font-size: clamp(3.2rem, 16vw, 5rem);
    }

    .chain-network-stats {
        grid-template-columns: 1fr;
    }

    .chain-network-stats > div,
    .chain-network-stats > div:first-child {
        border-right: 1px solid var(--chain-border);
        border-left: 1px solid var(--chain-border);
    }

    .chain-blocks {
        align-items: stretch;

        flex-direction: column;

        gap: 0.5rem;
    }

    .chain-connector {
        width: 1px;
        height: 1rem;

        margin-left: 1.5rem;
    }

    .chain-footer-system {
        flex-direction: column;

        gap: 0.6rem;
    }
	
	.chain-logout-form {
    margin: 0;
    padding: 0;
}

.chain-logout-link {
    width: auto;

    border: 0;

    background: transparent;

    font-family: inherit;

    cursor: pointer;
}

/*
 * Latest announcement
 */

.chain-announcement {
    padding: 2rem 0;

    border-bottom: 1px solid var(--chain-border);

    background:
        linear-gradient(
            135deg,
            rgba(54, 217, 231, 0.04),
            transparent 45%
        ),
        var(--chain-bg-deep);
}

.chain-announcement-panel {
    position: relative;

    overflow: hidden;

    padding: 2rem 2.25rem;

    border: 1px solid var(--chain-border-bright);
    border-radius: 0.65rem;

    background:
        linear-gradient(
            145deg,
            var(--chain-surface),
            rgba(28, 38, 51, 0.72)
        );
}

.chain-announcement-panel::before {
    content: "";

    width: 4rem;
    height: 2px;

    position: absolute;

    top: 0;
    left: 2.25rem;

    background: var(--chain-cyan);
}

.chain-announcement-label {
    margin-bottom: 0.75rem;

    color: var(--chain-cyan);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.11em;
}

.chain-announcement-panel h2 {
    margin: 0 0 1rem;

    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.chain-announcement-body {
    max-width: 60rem;

    color: var(--chain-soft);

    line-height: 1.8;
}

.chain-announcement-body > :last-child {
    margin-bottom: 0;
}

.chain-announcement-footer {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 1.5rem;
    padding-top: 1rem;

    border-top: 1px solid var(--chain-border);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.62rem;

    letter-spacing: 0.07em;
}

.chain-announcement-footer span {
    color: var(--chain-muted);
}

.chain-announcement-footer a {
    color: var(--chain-cyan);

    font-weight: 700;

    text-decoration: none;
}

.chain-announcement-footer a:hover,
.chain-announcement-footer a:focus {
    color: var(--chain-cyan-soft);
}
}