@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap');

:root {
    --page-bg: #050812;
    --surface: rgba(10, 16, 28, 0.74);
    --surface-strong: #0d1626;
    --surface-soft: rgba(14, 22, 38, 0.88);
    --surface-muted: rgba(12, 18, 30, 0.82);
    --ink: #dce6f3;
    --ink-strong: #f7fbff;
    --muted: #93a6bc;
    --muted-strong: #c8d4e0;
    --line: rgba(173, 194, 221, 0.12);
    --line-strong: rgba(173, 194, 221, 0.24);
    --accent: #67d7ff;
    --accent-strong: #2fb4e8;
    --accent-soft: rgba(103, 215, 255, 0.14);
    --accent-warm: #ff6c5c;
    --accent-warm-strong: #e45243;
    --accent-sun: #ffb86a;
    --accent-sun-strong: #db8a2c;
    --accent-violet: #8f72ff;
    --success: #5bd6a0;
    --success-soft: rgba(91, 214, 160, 0.14);
    --warning: #ffb86a;
    --warning-soft: rgba(255, 184, 106, 0.14);
    --future: #8aa0b8;
    --future-soft: rgba(138, 160, 184, 0.14);
    --priority: #ff9078;
    --priority-soft: rgba(255, 144, 120, 0.14);
    --hero-deep: #02050c;
    --hero-mid: #111a2d;
    --hero-soft: rgba(244, 248, 255, 0.92);
    --paper: #f8fbff;
    --shadow-soft: 0 24px 64px rgba(0, 0, 0, 0.34);
    --shadow-strong: 0 30px 70px rgba(0, 0, 0, 0.42);
}

html {
    background: var(--page-bg);
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at 18% 14%, rgba(143, 114, 255, 0.18), transparent 24%),
        radial-gradient(circle at 84% 12%, rgba(255, 108, 92, 0.16), transparent 26%),
        radial-gradient(circle at 72% 78%, rgba(103, 215, 255, 0.13), transparent 24%),
        linear-gradient(180deg, #050812 0%, #0a0f18 36%, #0c1320 100%) !important;
}

body::before {
    background-image:
        linear-gradient(rgba(248, 251, 255, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(248, 251, 255, 0.024) 1px, transparent 1px) !important;
    background-size: 38px 38px !important;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 82%) !important;
    opacity: 0.14 !important;
}

.bg-diamond {
    background: radial-gradient(circle, rgba(143, 114, 255, 0.26) 0%, rgba(103, 215, 255, 0.1) 42%, transparent 72%) !important;
    filter: blur(18px) !important;
}

.site-header.is-scrolled {
    background: rgba(5, 9, 16, 0.78) !important;
    color: var(--paper) !important;
    border-bottom: 1px solid rgba(173, 194, 221, 0.1) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

.brand-mark {
    background: linear-gradient(135deg, var(--accent-warm) 0%, var(--accent-violet) 54%, var(--accent) 100%) !important;
    box-shadow: 0 0 0 7px rgba(143, 114, 255, 0.18) !important;
}

.hero {
    color: var(--paper);
    background:
        radial-gradient(circle at 14% 72%, rgba(255, 108, 92, 0.2), transparent 22%),
        radial-gradient(circle at 22% 52%, rgba(143, 114, 255, 0.22), transparent 26%),
        radial-gradient(circle at 74% 14%, rgba(255, 108, 92, 0.24), transparent 22%),
        radial-gradient(circle at 82% 16%, rgba(143, 114, 255, 0.34), transparent 28%),
        radial-gradient(circle at 68% 44%, rgba(103, 215, 255, 0.18), transparent 30%),
        linear-gradient(125deg, #02050c 0%, #08101a 28%, #10142a 64%, #1b0f27 100%) !important;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 36%, rgba(103, 215, 255, 0.08), transparent 18%),
        radial-gradient(circle at 34% 48%, rgba(255, 108, 92, 0.14), transparent 22%),
        radial-gradient(circle at 74% 24%, rgba(255, 108, 92, 0.14), transparent 16%),
        radial-gradient(circle at 68% 32%, rgba(143, 114, 255, 0.2), transparent 20%),
        radial-gradient(circle at 60% 50%, rgba(103, 215, 255, 0.14), transparent 24%);
}

.hero-media {
    z-index: 0;
    filter: saturate(1.1) contrast(1.02);
    background:
        radial-gradient(circle at 66% 32%, rgba(255, 108, 92, 0.1), transparent 16%),
        radial-gradient(circle at 72% 46%, rgba(143, 114, 255, 0.14), transparent 22%),
        radial-gradient(circle at 82% 54%, rgba(103, 215, 255, 0.12), transparent 24%) !important;
}

.hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 62% 32%, rgba(255, 108, 92, 0.16), transparent 14%),
        radial-gradient(circle at 74% 50%, rgba(103, 215, 255, 0.14), transparent 18%),
        radial-gradient(circle at 56% 52%, rgba(143, 114, 255, 0.16), transparent 22%),
        linear-gradient(rgba(248, 251, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(248, 251, 255, 0.05) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, 64px 64px, 64px 64px !important;
    mask-image: radial-gradient(circle at 72% 36%, rgba(0, 0, 0, 0.9), transparent 74%) !important;
    opacity: 0.66 !important;
}

.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 60% 46%, rgba(255, 108, 92, 0.14) 0%, rgba(143, 114, 255, 0.22) 24%, rgba(103, 215, 255, 0.14) 44%, rgba(103, 215, 255, 0) 70%),
        radial-gradient(circle at 84% 56%, rgba(103, 215, 255, 0.08), transparent 28%);
    opacity: 0.92;
}

.hero-visual {
    opacity: 0.72;
    filter: saturate(1.08) contrast(1.03);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 46%, rgba(0, 0, 0, 0.88) 68%, rgba(0, 0, 0, 0.38) 88%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 46%, rgba(0, 0, 0, 0.88) 68%, rgba(0, 0, 0, 0.38) 88%, rgba(0, 0, 0, 0) 100%);
}

.hero-scrim {
    background:
        linear-gradient(92deg, rgba(1, 4, 10, 0.98) 0%, rgba(1, 4, 10, 0.92) 24%, rgba(1, 4, 10, 0.46) 48%, rgba(1, 4, 10, 0.08) 74%, rgba(1, 4, 10, 0) 100%),
        linear-gradient(180deg, rgba(1, 4, 10, 0.06) 0%, rgba(1, 4, 10, 0) 42%, rgba(1, 4, 10, 0.46) 100%) !important;
}

.hero::after,
.hero--compact::after {
    background: linear-gradient(180deg, rgba(5, 8, 18, 0) 0%, rgba(5, 8, 18, 0.74) 100%) !important;
}

.hero-copy {
    position: relative;
}

.hero-copy::before {
    content: '';
    position: absolute;
    left: -4.5rem;
    top: -4rem;
    width: 22rem;
    height: 22rem;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 108, 92, 0.3) 0%, rgba(143, 114, 255, 0.22) 34%, rgba(103, 215, 255, 0.1) 58%, rgba(103, 215, 255, 0) 76%);
    filter: blur(34px);
    opacity: 0.76;
    z-index: -1;
    pointer-events: none;
}

.hero-kicker {
    color: rgba(255, 184, 106, 0.86) !important;
}

.hero-brand,
.hero-title,
.download-heading,
.stack-title {
    color: var(--ink-strong) !important;
    text-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
}

.hero-headline {
    color: var(--ink-strong) !important;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}

.hero-support,
.section-intro,
.flow-copy,
.provider-models,
.use-case-copy,
.panel-copy,
.signal-copy,
.release-date,
.download-meta,
.detail-copy,
.note-copy,
.footer-copy,
.product-description,
.product-proof-copy,
.product-subtitle {
    color: var(--muted-strong) !important;
}

.section-label,
.status-badge,
.meta-label,
.detail-label,
.footer-note,
.version-chip,
.aux-label,
.product-overline {
    color: var(--accent-sun) !important;
}

.button--primary,
.button--row-primary {
    background: linear-gradient(135deg, var(--accent-warm) 0%, var(--accent-violet) 52%, var(--accent) 100%) !important;
    color: #07111b !important;
    border-color: transparent !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.button--primary:hover,
.button--primary:focus-visible,
.button--row-primary:hover,
.button--row-primary:focus-visible {
    box-shadow: 0 26px 54px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.button--secondary,
.button--row-secondary {
    border-color: rgba(248, 251, 255, 0.24) !important;
    background: rgba(10, 16, 28, 0.34) !important;
    color: var(--paper) !important;
}

.button--secondary:hover,
.button--secondary:focus-visible,
.button--row-secondary:hover,
.button--row-secondary:focus-visible {
    background: rgba(248, 251, 255, 0.08) !important;
    border-color: rgba(248, 251, 255, 0.42) !important;
}

.button--cta-secondary {
    border-color: rgba(248, 251, 255, 0.24) !important;
    background: rgba(10, 16, 28, 0.34) !important;
    color: var(--paper) !important;
    box-shadow: none !important;
}

.button--cta-secondary:hover,
.button--cta-secondary:focus-visible {
    background: rgba(248, 251, 255, 0.08) !important;
    border-color: rgba(248, 251, 255, 0.42) !important;
}

.section-alt,
.cta-section,
.overview-band,
.site-footer {
    background: linear-gradient(180deg, rgba(10, 16, 28, 0) 0%, rgba(10, 16, 28, 0.42) 18%, rgba(10, 16, 28, 0.74) 100%) !important;
}

.section--soft,
.section--paper,
.section--surface,
.section--tint {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 108, 92, 0.12), transparent 24%),
        radial-gradient(circle at 82% 24%, rgba(103, 215, 255, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(10, 16, 28, 0.02) 0%, rgba(10, 16, 28, 0.32) 16%, rgba(10, 16, 28, 0.78) 100%) !important;
}

.site-footer {
    border-top: 1px solid rgba(173, 194, 221, 0.12) !important;
}

main article,
main aside,
main details,
main .product-row,
main .principle,
main .flow-item,
main .provider-item,
main .stack-item,
main .metric-panel,
main .overview-card,
main .architecture-item,
main .use-case-item,
main .planned-item,
main .download-panel,
main .info-panel,
main .signal-box,
main .release-entry,
main .detail-panel,
main .note,
main .filter-chip,
main .product-inline-proof,
main .overview-grid > *,
main .detail-grid > *,
main .metric-grid > *,
main .architecture-grid > *,
main .planned-grid > *,
main .use-case-grid > *,
main .requirements-grid > *,
main .release-list > *,
main .notes-grid > * {
    background: rgba(10, 16, 28, 0.56) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px);
}

.proof-viewer,
.plan-sheet,
.container,
main pre,
.panel-pre,
.docs-sync-banner,
.toc-card,
.proof-frame,
.plan-trial,
.back-to-top,
details,
summary,
.docs-table th,
.docs-table td {
    border-color: var(--line) !important;
    box-shadow: none !important;
}

.proof-viewer,
.plan-sheet,
.container,
main pre,
.panel-pre {
    background: rgba(10, 16, 28, 0.72) !important;
    backdrop-filter: blur(18px) !important;
}

main pre,
.panel-pre {
    color: var(--muted-strong) !important;
}

.docs-sync-banner,
.toc-card,
.plan-trial,
details,
.back-to-top {
    background: rgba(248, 251, 255, 0.04) !important;
    color: var(--muted-strong) !important;
}

.proof-frame,
.proof-shot {
    background: linear-gradient(180deg, #0b1321 0%, #151d31 100%) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

.arch-visual {
    background: linear-gradient(180deg, rgba(10, 16, 28, 0.78) 0%, rgba(21, 29, 49, 0.92) 100%) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

.arch-visual::after {
    background: radial-gradient(circle, rgba(255, 108, 92, 0.16) 0%, rgba(143, 114, 255, 0.14) 34%, rgba(103, 215, 255, 0) 70%) !important;
}

.proof-title,
.plan-name,
.plan-amount,
.plan-price,
.section-title,
.docs-section h2,
.docs-table th,
summary,
.toc-label,
.docs-sync-banner strong {
    color: var(--ink-strong) !important;
}

.proof-desc,
.proof-hint,
.plan-period,
.plan-list li,
.plan-note,
.docs-section p,
.docs-section ul,
.docs-section ol,
.docs-table td,
details > div,
.tip,
.note,
.tip-callout,
.docs-sync-banner {
    color: var(--muted-strong) !important;
}

.proof-chip-row,
.toc-section,
.docs-section,
.faq-item,
.plan-list,
.term-item,
.feature-item,
.resource-panel {
    border-color: var(--line) !important;
}

.proof-chip {
    border-color: var(--line) !important;
    background: rgba(248, 251, 255, 0.04) !important;
    color: var(--muted-strong) !important;
}

.proof-chip:hover,
.proof-chip:focus-visible {
    border-color: rgba(248, 251, 255, 0.34) !important;
    color: var(--ink-strong) !important;
}

.proof-chip.is-active {
    background: linear-gradient(135deg, var(--accent-warm) 0%, var(--accent-violet) 52%, var(--accent) 100%) !important;
    border-color: transparent !important;
    color: #07111b !important;
}

.plan-label,
.plan-trial,
.docs-section h3,
.toc-icon,
.item-label,
.faq-item summary::after,
summary::before,
.coming-badge {
    color: var(--accent-sun) !important;
}

.plan-trial,
.coming-badge {
    border-color: rgba(255, 184, 106, 0.24) !important;
    background: rgba(255, 184, 106, 0.1) !important;
}

.docs-table th {
    background: rgba(255, 184, 106, 0.08) !important;
}

.docs-table td {
    background: rgba(248, 251, 255, 0.03) !important;
}

.docs-table tr:hover td {
    background: rgba(103, 215, 255, 0.06) !important;
}

.tip,
.note,
.tip-callout {
    background: rgba(248, 251, 255, 0.04) !important;
    border-color: var(--line) !important;
}

.tip {
    border-left-color: var(--success) !important;
    background: linear-gradient(90deg, rgba(91, 214, 160, 0.08), rgba(10, 16, 28, 0.72)) !important;
}

.note {
    border-left-color: var(--accent) !important;
    background: linear-gradient(90deg, rgba(103, 215, 255, 0.08), rgba(10, 16, 28, 0.72)) !important;
}

.tip-callout {
    border-left-color: var(--accent-violet) !important;
    background: linear-gradient(90deg, rgba(143, 114, 255, 0.08), rgba(10, 16, 28, 0.72)) !important;
}

.tip strong {
    color: var(--success) !important;
}

.note strong,
.tip-callout strong {
    color: var(--accent-sun) !important;
}

details {
    background: rgba(248, 251, 255, 0.04) !important;
}

summary {
    background: rgba(248, 251, 255, 0.03) !important;
}

.back-to-top {
    background: rgba(10, 16, 28, 0.88) !important;
    color: var(--ink-strong) !important;
    box-shadow: var(--shadow-soft) !important;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    border-color: rgba(103, 215, 255, 0.36) !important;
    color: var(--accent) !important;
}

.page-valence.page-guides .hero-links,
.page-valence.page-guides .providers-section,
.page-valence.page-guides .guide-section,
.page-valence.page-guides .provider-card,
.page-valence.page-guides .provider-card--local,
.page-valence.page-guides .ollama-steps,
.overview-band .overview-card {
    background: rgba(10, 16, 28, 0.72) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

.page-valence.page-guides .hero-links {
    background: rgba(10, 16, 28, 0.62) !important;
    backdrop-filter: blur(18px) !important;
}

.page-valence.page-guides .hero-links a {
    color: var(--muted-strong) !important;
}

.page-valence.page-guides .hero-links a:hover,
.page-valence.page-guides .hero-links a:focus-visible {
    color: var(--ink-strong) !important;
}

.page-valence.page-guides .provider-link {
    border-color: rgba(248, 251, 255, 0.24) !important;
    background: rgba(248, 251, 255, 0.04) !important;
    color: var(--ink-strong) !important;
    box-shadow: none !important;
}

.page-valence.page-guides .provider-link:hover,
.page-valence.page-guides .provider-link:focus-visible {
    border-color: rgba(103, 215, 255, 0.36) !important;
    color: var(--accent) !important;
}

.page-valence.page-guides .provider-name,
.page-valence.page-guides .section-title,
.page-valence.page-guides .provider-link {
    color: var(--ink-strong) !important;
}

.page-valence.page-guides .provider-desc,
.page-valence.page-guides .detail-item,
.page-valence.page-guides .ollama-steps ol,
.overview-band .meta-label {
    color: var(--muted-strong) !important;
}

.page-valence.page-guides .provider-icon,
.page-valence.page-guides .detail-label {
    color: var(--accent-sun) !important;
}

main .flow-icon,
main .step-number {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(248, 251, 255, 0.14) !important;
    color: var(--accent) !important;
}

main code,
main kbd,
.release-tag,
.version-chip {
    border: 1px solid rgba(103, 215, 255, 0.18) !important;
    background: rgba(103, 215, 255, 0.08) !important;
    color: var(--ink-strong) !important;
}

main img,
main video,
main iframe {
    border-color: var(--line) !important;
    box-shadow: var(--shadow-soft);
}

.footer-links a,
.site-nav a {
    color: inherit;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active,
.site-nav a[aria-current='page'] {
    color: var(--ink-strong) !important;
}

body.page-valence {
    --accent: #67d7ff;
}

body.page-hive {
    --accent: #7ce3d9;
    --accent-strong: #38bfb6;
    --accent-soft: rgba(124, 227, 217, 0.14);
}

body.page-echo {
    --accent: #9c8cff;
    --accent-strong: #7c69ff;
    --accent-soft: rgba(156, 140, 255, 0.16);
}

body.page-aon {
    --accent: #78f0c1;
    --accent-strong: #35cc93;
    --accent-soft: rgba(120, 240, 193, 0.16);
}

body.page-arc {
    --accent: #ffb86a;
    --accent-strong: #ff9b2d;
    --accent-soft: rgba(255, 184, 106, 0.16);
}

@media (max-width: 960px) {
    .hero-scrim {
        background:
            linear-gradient(180deg, rgba(4, 12, 24, 0.22) 0%, rgba(4, 12, 24, 0.48) 24%, rgba(4, 12, 24, 0.78) 68%, rgba(4, 12, 24, 0.9) 100%),
            linear-gradient(90deg, rgba(4, 12, 24, 0.3) 0%, rgba(4, 12, 24, 0) 100%) !important;
    }

    .hero-copy::before {
        left: -3rem;
        top: -3rem;
        width: 16rem;
        height: 16rem;
        opacity: 0.66;
    }
}