html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1 0 auto;
}

footer.footer {
    margin-top: auto;
}

:root {
    --copy-bg: #2a303c;
    --terminal-green: #23d160;
    --code-bg: #1e1f26;
    --code-border: #2f3441;
    --code-text: #e6ebf3;
    --code-dim: #7d8697;
    --code-accent: #82aaff;
    --code-keyword: #c792ea;
    --code-bg-inline: #2a303c;
}

@media (prefers-color-scheme: light) {
    :root {
        --copy-bg: #eef1f5;
        --terminal-green: #23d160;
        --code-bg: #f5f7fa;
        --code-border: #d9dde5;
        --code-text: #1f2430;
        --code-dim: #68707d;
        --code-accent: #255bc7;
        --code-keyword: #7d3fbf;
        --code-bg-inline: #eef1f5;
    }
}



.hero.is-primary {
    background: linear-gradient(135deg, #2563eb, #971eaf);
}

.command-box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: monospace;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    gap:10px;
}

.command-box code {
    white-space: nowrap;
}

.copy-btn {
    background: var(--copy-bg);
    border: none;
    border-radius: 6px;
    color: var(--code-text);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.copy-btn:hover {
    color: #00d1b2;
}

.copy-btn.copied {
    background: var(--terminal-green);
    color: #fff;
}

.copy-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Feature card adjustments */
.feature-card {
    transition: transform .3s ease, box-shadow .3s ease;
    border: none;
    height: 100%;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    border-radius: 12px;
}

@media (prefers-color-scheme: light) {
    .feature-card {
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    }
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
}

/* Code blocks */
.script-example {
    /* background: var(--code-bg); */
    border: 1px solid var(--code-border);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    /* font-size: .82rem; */
    /* line-height: 1.45; */
    /* color: var(--code-text); */
    position: relative;
    overflow: auto;
    padding: 0;
    /* margin-top: 1rem; */
    text-align: left;
}



.feature-card .script-example {
    width: 100%;
}

/* Improve contrast for dark theme */
@media (prefers-color-scheme: dark) {
    .script-example {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    }
}

/* Inline code */
code,
pre code {
    background: var(--code-bg-inline);
    color: var(--code-keyword);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
}

pre code {
    background: transparent;
    padding: 0;
    color: var(--code-text);
}

/* Simple token placeholders (manual markup optional) */
.script-example pre span.kw {
    color: var(--code-keyword);
}

.script-example pre span.cm {
    color: var(--code-dim);
    font-style: italic;
}

.script-example pre span.fn {
    color: var(--code-accent);
}