:root {
    /* LUCI brand palette. The brand uses these together as gradients rather than as single flat
       colors. Pages use the cool and warm halves of the spectrum, each paired with the other
       somewhere on the page, rather than the full rainbow. */
    --luci-violet: #7000ff;
    --luci-blue: #0000ff;
    --luci-cyan: #00e8ff;
    --luci-mint: #00ffc2;
    --luci-lime: #a6ff99;
    --luci-yellow: #ffd100;
    --luci-pink: #ff7096;
    --luci-magenta: #ff007d;
    --luci-orange: #ff3600;
    --spectrum-cool: linear-gradient(90deg, var(--luci-lime), var(--luci-mint), var(--luci-cyan),
        var(--luci-blue), var(--luci-violet));
    --spectrum-warm: linear-gradient(90deg, var(--luci-yellow), var(--luci-pink), var(--luci-magenta),
        var(--luci-orange));

    --bg: #f7f7f9;
    --surface: #ffffff;
    --text: #111114;
    --muted: #55565f;
    --border: #e2e2e8;
    --accent: var(--luci-violet);
    --accent-text: #ffffff;
    --code-bg: #16181d;
    --code-text: #e8eaed;
    --radius: 12px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0a0a0c;
        --surface: #16161a;
        --text: #f0f0f3;
        --muted: #a6a7b0;
        --border: #2a2a31;
        --accent: var(--luci-cyan);
        --accent-text: #0a0a0c;
        --code-bg: #000000;
        color-scheme: dark;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

a {
    color: var(--accent);
}

.wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 16px;
}

header {
    background: var(--surface);
    border-bottom: 3px solid;
    border-image: var(--spectrum-cool) 1;
}

header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* 60px tall keeps the logo at the brand guide's 125px minimum width. */
header picture,
header img {
    height: 60px;
    width: auto;
    display: block;
}

header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

header nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

header nav a:hover {
    color: var(--accent);
}

.hero {
    padding-top: 72px;
    padding-bottom: 48px;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.15;
    margin: 0 0 16px;
    max-width: 18ch;
}

.hero p {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 60ch;
    margin: 0 0 28px;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 2px solid var(--accent);
}

.button.primary {
    background: var(--accent);
    color: var(--accent-text);
}

.button.secondary {
    color: var(--text);
    border-color: transparent;
    background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--spectrum-warm) border-box;
}

section {
    padding: 32px 0;
}

section > .wrap > h2 {
    font-size: 1.6rem;
    margin: 0 0 20px;
}

/* The brand's keyline: a short gradient underline under section headings. */
section > .wrap > h2::after,
.contact h2::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background: var(--spectrum-warm);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.card h3 {
    margin: 0 0 8px;
    font-size: 1.3rem;
}

.card p {
    color: var(--muted);
    margin: 0 0 16px;
}

.card ul {
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.card li a {
    font-weight: 600;
    text-decoration: none;
}

.card li a:hover {
    text-decoration: underline;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.features li {
    border-left: 3px solid var(--accent);
    padding-left: 14px;
    color: var(--muted);
}

.features strong {
    display: block;
    color: var(--text);
}

.features a {
    display: block;
    margin-top: 6px;
    font-weight: 600;
    text-decoration: none;
}

.features a:hover {
    text-decoration: underline;
}

pre {
    background: var(--code-bg);
    color: var(--code-text);
    border-radius: var(--radius);
    padding: 16px 20px;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.note {
    color: var(--muted);
    margin: 0 0 16px;
}

.contact {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
}

.contact h2 {
    margin: 0 0 8px;
}

.contact p {
    margin: 0;
    color: var(--muted);
}

.contact .buttons {
    margin-top: 20px;
}

.stack {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin: 24px 0 12px;
    padding: 0;
    list-style: none;
}

.stack li {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    color: var(--muted);
    font-size: 0.95rem;
}

.stack li strong {
    display: block;
    color: var(--text);
    font-size: 1.05rem;
}

.stack li.core {
    border: 2px solid transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum-cool) border-box;
}

.stack li + li::before {
    content: '→';
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-weight: 700;
}

.tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tiers span,
.tag {
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0 8px;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

.stack-caption {
    font-weight: 600;
    margin: 0;
}

.table-scroll {
    overflow-x: auto;
    margin-bottom: 24px;
}

.api-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.api-table th,
.api-table td {
    text-align: left;
    vertical-align: top;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.api-table tbody tr:last-child > * {
    border-bottom: none;
}

.api-table thead th {
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.api-table td {
    color: var(--muted);
}





.platforms {
    margin-top: 16px;
}

.faq h3 {
    margin: 20px 0 4px;
    font-size: 1.1rem;
}

.faq p {
    color: var(--muted);
    margin: 0;
    max-width: 75ch;
}

footer {
    padding: 32px 0 48px;
    color: var(--muted);
    font-size: 0.9rem;
}

.not-found {
    padding-top: 96px;
    padding-bottom: 96px;
    text-align: center;
}

.not-found h1 {
    font-size: 2.5rem;
    margin: 0 0 12px;
}

.not-found p {
    color: var(--muted);
    margin: 0 0 28px;
}

.not-found .buttons {
    justify-content: center;
}

@media (max-width: 800px) {
    .stack {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .stack li + li::before {
        content: '↓';
        left: 50%;
        top: -26px;
        transform: translateX(-50%);
    }
}

@media (max-width: 560px) {
    header .wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero {
        padding-top: 48px;
        padding-bottom: 32px;
    }

    /* Each API row becomes its own block; three columns don't fit at phone width. */
    .api-table thead {
        display: none;
    }

    .api-table,
    .api-table tbody,
    .api-table tr,
    .api-table th,
    .api-table td {
        display: block;
    }

    .api-table tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
    }

    .api-table tbody tr:last-child {
        border-bottom: none;
    }

    .api-table th,
    .api-table td {
        padding: 2px 0;
        border-bottom: none;
    }
}