/*
  OneRouter — Homepage Styles
  Only loaded on the homepage via <link>.
  Depends on global.css for reset, base typography, buttons, animations, and utilities.
*/

/* ===== PAGE WRAPPER ===== */
.page {
    background-color: #fff;
    color: #0a0a0a;
    position: relative;
    min-height: 100svh;
    overflow-x: clip;
}

.page-loader {
    position: fixed; top: 0; left: 0;
    height: 2px; background: transparent;
    z-index: 2147483647;
    width: 100%;
    pointer-events: none;
}
.page-loader__fill {
    height: 100%;
    background: #606060;
    width: 0%; opacity: 1;
    transition: width 0.4s ease;
}
.page-loader__glow {
    box-shadow: 0 0 10px #606060, 0 0 10px #606060;
    width: 5%; opacity: 1;
    position: absolute; height: 100%;
    transform: rotate(2deg) translate(0px, -2px);
    left: -5.5%;
}

/* ===== SECTIONS ===== */
/* ===== SECTION BACKGROUNDS — A/B 交替: A=#fbfbfd B=#fdfcfd ===== */
/* 节奏: Hero(A) Stats(A) Why(B) Uses(A) Model(B) Compliance(A) Trusted(B) Quick(A) CTA(B) FAQ(A) */
.section {
    position: relative; z-index: 10;
    padding: 6rem 1.5rem;
}
.section--why {
    background-color: #fdfcfd;
}
.section--uses {
    background-color: #fbfbfd;
    border-top: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
}
.section--compliance {
    background-color: #fbfbfd;
}
.section--quickstart {
    background-color: #fbfbfd;
}
.section--bordered {
    position: relative; z-index: 10;
    padding: 6rem 1.5rem;
    border-top: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    background-color: #fbfbfd;
}
.section--trusted {
    background-color: #fdfcfd;
}
.section--alt {
    position: relative; z-index: 10;
    padding: 6rem 1.5rem;
    border-top: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    border-bottom: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    background-color: #fdfcfd;
}
.section--muted {
    background-color: #fdfcfd;
}
.section--cta {
    position: relative; z-index: 10;
    overflow: hidden;
    padding: 6rem 1.5rem;
    background-color: #fdfcfd;
}
.container {
    margin-inline: auto;
    max-width: 72rem;
}
.container--narrow {
    max-width: 42rem;
    margin-inline: auto;
}

/* Section Header */
.section__header {
    margin-bottom: 4rem;
    text-align: center;
}
.section__label {
    margin: 0 0 0.75rem;
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #606060;
}
.section__title {
    margin: 0;
    font-size: 1.5rem; font-weight: 600;
    letter-spacing: -0.025em;
}
.section__desc {
    margin: 1rem auto 0;
    max-width: 36rem;
    font-size: 0.875rem; line-height: 1.625;
    color: color-mix(in oklab, #606060 80%, transparent);
}
.section__desc--narrow { max-width: 28rem; }
.section__action {
    margin-top: 3rem;
    text-align: center;
}

/* ===== HERO ===== */
.hero {
    position: relative; z-index: 10;
    overflow: hidden;
    padding: 6rem 1.5rem 4rem;
    background-color: #fbfbfd;
}
.hero__bg-grid {
    position: absolute; inset: 0; z-index: -10;
    opacity: 0.14;
    background-image:
        linear-gradient(to right, #d4d4d4 1px, transparent 1px),
        linear-gradient(to bottom, #d4d4d4 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 35%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 35%, transparent 100%);
}
.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 3rem;
    margin-inline: auto;
    max-width: 72rem;
}
.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.hero__demo {
    width: 100%;
}
.hero__demo-inner {
    margin-inline: auto;
    width: 100%;
    max-width: 42rem;
    margin-top: 2rem;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex; align-items: center;
    gap: 0.375rem;
    border-radius: 3.40282e38px;
    border: 1px solid color-mix(in oklab, #3b82f6 20%, transparent);
    background-color: color-mix(in oklab, #3b82f6 5%, transparent);
    padding: 0.375rem 0.75rem;
    font-size: 11px; font-weight: 500;
    color: #2563eb;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    margin-bottom: 1.25rem;
}
.hero-badge__dot-wrap {
    position: relative;
    display: flex;
    width: 0.375rem; height: 0.375rem;
}
.hero-badge__ping {
    position: absolute; display: inline-flex;
    width: 100%; height: 100%;
    border-radius: 3.40282e38px;
    background-color: #60a5fa;
    opacity: 0.75;
    animation: ping 1s cubic-bezier(0,0,0.2,1) infinite;
}
.hero-badge__dot {
    position: relative; display: inline-flex;
    width: 0.375rem; height: 0.375rem;
    border-radius: 3.40282e38px;
    background-color: #3b82f6;
}
.dark .hero-badge__dot { background-color: #60a5fa; }

.hero__title {
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    line-height: 1.15; font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0;
}
.hero__desc {
    color: color-mix(in oklab, #606060 80%, transparent);
    margin: 1.25rem 0 0; max-width: 36rem;
    font-size: 0.9rem; line-height: 1.625;
}
.hero__actions {
    margin-top: 2rem;
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 0.75rem;
}

/* Integrations */
.hero__integrations {
    margin-top: 2.5rem;
    width: 100%;
    max-width: 36rem;
}
.hero__integrations-label {
    display: flex; flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}
.hero__integrations-label-title {
    color: color-mix(in oklab, #606060 50%, transparent);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
}
.hero__integrations-label-desc {
    color: color-mix(in oklab, #606060 60%, transparent);
    font-size: 0.75rem; line-height: 1.625;
    margin: 0;
}
.hero__integrations-row {
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 0.75rem;
}

/* Provider Chips */
.provider-chip {
    display: flex; align-items: center; gap: .5rem;
    height: 2.25rem; padding: 0 .875rem;
    border-radius: 2rem;
    border: 1px solid #e5e5e0;
    font-size: .8125rem; font-weight: 500;
    background: #fff; color: #3a3a3a;
    text-decoration: none; cursor: default;
    transition: border-color .2s;
}
.provider-chip:hover { border-color: #c5c2b8; }
.provider-chip--link {
    cursor: pointer;
    color: #606060;
}
.provider-chip--link:hover { border-color: #c5c2b8; color: #0a0a0a; }
.provider-dot {
    width: .5rem; height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== DEMO CARD ===== */
.demo-card {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid color-mix(in oklab, #e8e8e8 60%, transparent);
    background-color: color-mix(in oklab, #fff 95%, transparent);
    backdrop-filter: blur(4px);
    box-shadow: 0 20px 50px -25px rgba(15,23,42,0.18);
}
.dark .demo-card {
    box-shadow: 0 20px 60px -25px rgba(0,0,0,0.7);
}

/* Tabs */
.demo-card__tabs {
    display: flex; align-items: center; gap: 0.25rem;
    border-bottom: 1px solid color-mix(in oklab, #e8e8e8 50%, transparent);
    padding-inline: 0.5rem;
}
.demo-card__tab {
    position: relative;
    display: flex; align-items: center; gap: 0.375rem;
    border: none;
    padding: 0.625rem;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.025em;
    background: transparent;
    color: color-mix(in oklab, #0a0a0a 40%, transparent);
    transition: color 0.15s ease;
    cursor: pointer;
}
.demo-card__tab:hover { color: color-mix(in oklab, #0a0a0a 70%, transparent); }
.demo-card__tab.is-active {
    border-bottom: 2px solid #10b981;
    color: #059669;
}
.dark .demo-card__tab.is-active { border-bottom-color: #34d399; color: #34d399; }

.demo-card__status {
    margin-left: auto;
    display: flex; align-items: center; gap: 0.5rem;
    padding-right: 0.5rem;
}
.demo-card__status-dot {
    display: inline-block;
    width: 0.375rem; height: 0.375rem;
    border-radius: 3.40282e38px;
    background-color: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.45);
}
.demo-card__status-text {
    color: color-mix(in oklab, #0a0a0a 40%, transparent);
    font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
}

/* Endpoint Bar */
.demo-card__endpoint {
    display: flex; align-items: center; gap: 0.625rem;
    border-bottom: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    padding: 0.75rem 1.25rem;
}
.demo-card__method {
    border-radius: calc(1rem - 2px);
    padding: 0.125rem 0.375rem;
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.05em;
    background-color: color-mix(in oklab, #10b981 10%, transparent);
    color: #059669;
}
.dark .demo-card__method {
    background-color: color-mix(in oklab, #34d399 10%, transparent);
    color: #34d399;
}
.demo-card__endpoint code {
    font-family: 'Inconsolata', 'Cascadia Code', Consolas, monospace;
    color: color-mix(in oklab, #0a0a0a 75%, transparent);
    font-size: 12.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: opacity 0.2s;
    opacity: 1;
}

/* Code Panel */
.demo-card__code-panel {
    display: grid;
    height: 400px;
    grid-template-rows: 235px minmax(0, 1fr);
    font-size: 12.5px; line-height: 1.55;
}
.demo-card__request {
    position: relative;
    padding: 1rem 1.25rem;
}
.demo-card__response {
    position: relative;
    border-top: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    background-color: color-mix(in oklab, #f5f5f5 20%, transparent);
    padding: 1rem 1.25rem;
}
.demo-card__section-label {
    color: color-mix(in oklab, #0a0a0a 30%, transparent);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
}
.demo-card__code-body { font-family: 'Inconsolata', 'Cascadia Code', Consolas, monospace; margin-top: 0.5rem; transition: opacity 0.2s; opacity: 1; }

/* Stats Footer */
.demo-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    background-color: color-mix(in oklab, #f5f5f5 30%, transparent);
    padding: 0.625rem 1.25rem;
}
.demo-card__stats {
    display: flex; align-items: center; gap: 0.75rem;
    color: color-mix(in oklab, #0a0a0a 40%, transparent);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.demo-card__stats-dot {
    background-color: color-mix(in oklab, #0a0a0a 15%, transparent);
    width: 0.25rem; height: 0.25rem;
    border-radius: 3.40282e38px;
}
.demo-card__stats-unit {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.demo-card__stats-method {
    color: color-mix(in oklab, #0a0a0a 30%, transparent);
    letter-spacing: 0.05em; text-transform: uppercase;font-size: 10px;
}

/* Tab panel visibility — all 4 panels pre-rendered server-side, toggled by JS */
.demo-card__tab-panel { display: none; }
.demo-card__tab-panel.is-active { display: contents; }
.demo-card__tab-stats { display: none; }
.demo-card__tab-stats.is-active { display: contents; }

/* Dark overrides for demo card */
.dark .demo-card__tabs { border-color: rgba(255,255,255,0.05); }
.dark .demo-card__endpoint { border-color: rgba(255,255,255,0.04); }
.dark .demo-card__footer { border-color: rgba(255,255,255,0.05); background-color: rgba(255,255,255,0.02); }
.dark .demo-card__response { border-color: rgba(255,255,255,0.05); background-color: rgba(255,255,255,0.015); }

/* ===== SYNTAX HIGHLIGHTING ===== */
.syn-kw    { font-weight: 500; color: #059669; }
.syn-flag  { color: #2563eb; }
.syn-str   { color: #b45309; }
.syn-key   { color: #0369a1; }
.syn-val   { color: #7c3aed; }
.syn-grey  { color: color-mix(in oklab, #0a0a0a 55%, transparent); }
.dark .syn-kw   { color: #34d399; }
.dark .syn-flag { color: #60a5fa; }
.dark .syn-str  { color: #fcd34d; }
.dark .syn-key  { color: #7dd3fc; }
.dark .syn-val  { color: #c4b5fd; }

.code-line {
    overflow-wrap: break-word; word-break: break-word;
    white-space: pre-wrap;
}
.code-indent { display: inline-block; }

/* ===== STATS BAR ===== */
.stats-bar {
    position: relative; z-index: 10;
    border-top: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    border-bottom: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    background-color: #fbfbfd;
}
.stats-bar__inner {
    margin-inline: auto; max-width: 72rem;
    padding: 2.5rem 1.5rem;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.stat {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
}
.stat__num {
    margin: 0;
    font-size: 1.5rem; font-weight: 600;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.stat__label {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #606060;
}

/* ===== CARDS ===== */
.card {
    border: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    border-radius: 0.75rem;
    background-color: #fff;
    padding: 1.75rem;
    transition: background-color 0.3s, border-color 0.3s;
}
.card:hover { background-color: color-mix(in oklab, #f5f5f5 20%, transparent); }
.card--soft {
    border: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    border-radius: 1rem;
    background-color: color-mix(in oklab, #f5f5f5 10%, transparent);
    padding: 2rem 1.75rem;
    transition: background-color 0.3s, border-color 0.3s;
}
.card--soft:hover { background-color: color-mix(in oklab, #f5f5f5 20%, transparent); }
/* Card elements */
.card__header {
    display: flex; align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.card__icon {
    display: flex;
    width: 3rem; height: 3rem;
    align-items: center; justify-content: center;
    border: 1px solid color-mix(in oklab, #e8e8e8 50%, transparent);
    border-radius: 0.75rem;
    background-color: color-mix(in oklab, #f5f5f5 30%, transparent);
    color: #606060;
    margin-bottom: 0.75rem;
    transition: color 0.15s ease;
}
.card__icon svg { width: 1.25rem; height: 1.25rem; }
.card__icon-sm {
    display: flex;
    width: 1.75rem; height: 1.75rem;
    align-items: center; justify-content: center;
    border-radius: 1rem;
    flex-shrink: 0;
}
.card__icon-sm svg { width: 1rem; height: 1rem; }
.card__icon-sm--blue    { background-color: color-mix(in oklab, #3b82f6 20%, transparent); color: #3b82f6; }
.card__icon-sm--emerald { background-color: color-mix(in oklab, #10b981 10%, transparent); color: #10b981; }
.card__icon-sm--violet  { background-color: color-mix(in oklab, #7c3aed 10%, transparent); color: #7c3aed; }
.card__icon-sm--amber   { background-color: color-mix(in oklab, #b45309 10%, transparent); color: #b45309; }

.card__title {
    margin: 0;
    font-size: 0.875rem; font-weight: 500;
}
.card__title--spaced { margin-bottom: 0.5rem; }
.card__desc {
    color: #606060;
    font-size: 0.85rem; line-height: 1.625;
    margin: 0;
}
.card__desc--spaced { margin-bottom: 1.25rem; }

/* Card body grids */
.card__chip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}

/* Card layouts */
.card--centered {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
}
.card--stat {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
}
.card--stat .card__icon { margin-bottom: 1rem; }
.card--stat .card__title { font-size: 1.25rem; }

/* ===== FEATURES GRID ===== */
.features-grid {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    background-color: color-mix(in oklab, #e8e8e8 40%, transparent);
}
.features-grid__cell {
    background-color: #fff;
    padding: 1.75rem;
    transition: background-color 0.3s;
}
.features-grid__cell:hover { background-color: color-mix(in oklab, #f5f5f5 20%, transparent); }
.features-grid__cell--span-2 { grid-column: span 2; }

.features-grid__header {
    display: flex; align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.features-grid__number {
    display: flex;
    width: 1.75rem; height: 1.75rem;
    align-items: center; justify-content: center;
    border-radius: calc(1rem - 2px);
    border: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    background-color: #f5f5f5;
    color: #606060;
    font-size: 10px; font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.features-grid__title { font-size: 0.875rem; font-weight: 500; margin: 0; }
.features-grid__desc { color: #606060; font-size: 0.8rem; line-height: 1.625; margin: 0; }
.features-grid__body { margin-top: 1rem; }

/* Feature internal layouts */
.features-grid__chip-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.features-grid__centered {
    display: flex; align-items: center;
    justify-content: center;
}
.features-grid__tools {
    display: flex; align-items: center;
    gap: 0.75rem;
}
.features-grid__tools-label {
    display: flex; align-items: center;
    gap: 0.375rem;
    color: #606060;
    font-size: 0.75rem;
}
.features-grid__tools-label svg {
    width: 0.875rem; height: 0.875rem;
    color: #3b82f6;
}

/* ===== SECURITY / COMPLIANCE ===== */
.security-icon {
    display: flex;
    width: 4rem; height: 4rem;
    align-items: center; justify-content: center;
    border-radius: 1rem;
    border: 1px solid color-mix(in oklab, #10b981 20%, transparent);
    background-color: color-mix(in oklab, #10b981 5%, transparent);
}
.security-icon svg {
    width: 1.75rem; height: 1.75rem;
    color: color-mix(in oklab, #10b981 70%, transparent);
}
.security-icon__check {
    position: absolute;
    top: -0.25rem; right: -0.25rem;
    display: flex;
    width: 1rem; height: 1rem;
    align-items: center; justify-content: center;
    border-radius: 3.40282e38px;
    background-color: #10b981;
}
.security-icon__check svg {
    width: 0.625rem; height: 0.625rem;
    color: #fff;
}

/* ===== FEATURE HIGHLIGHTS ===== */
.feature-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}
.feature-highlight {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
}
.feature-highlight__icon {
    display: flex;
    width: 3rem; height: 3rem;
    align-items: center; justify-content: center;
    border: 1px solid color-mix(in oklab, #e8e8e8 50%, transparent);
    border-radius: 0.75rem;
    background-color: color-mix(in oklab, #f5f5f5 30%, transparent);
    color: #606060;
    margin-bottom: 0.75rem;
    transition: color 0.15s ease;
}
.feature-highlight__icon svg { width: 1.25rem; height: 1.25rem; }
.feature-highlight__title { margin: 0 0 0.375rem; font-size: 0.875rem; font-weight: 500; }
.feature-highlight__desc {
    color: #606060;
    max-width: 200px;
    font-size: 0.8rem; line-height: 1.625;
    margin: 0;
}

/* ===== MODEL CHIP ===== */
.model-chip {
    display: flex;
    align-items: center; justify-content: center;
    border: 1px solid color-mix(in oklab, #e8e8e8 30%, transparent);
    border-radius: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    background-color: color-mix(in oklab, #f5f5f5 20%, transparent);
    color: #606060;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.model-chip:hover {
    border-color: color-mix(in oklab, #3b82f6 30%, transparent);
    background-color: color-mix(in oklab, #3b82f6 5%, transparent);
}

/* ===== STEPS ===== */
.step-icon {
    display: flex;
    width: 4rem; height: 4rem;
    align-items: center; justify-content: center;
    border: 1px solid color-mix(in oklab, #e8e8e8 50%, transparent);
    border-radius: 1rem;
    background-color: color-mix(in oklab, #f5f5f5 30%, transparent);
    color: #606060;
    transition: color 0.15s ease;
}
.step-icon svg { width: 1.5rem; height: 1.5rem; }
.step-badge {
    position: absolute;
    top: -0.5rem; right: -0.5rem;
    display: flex;
    width: 1.5rem; height: 1.5rem;
    align-items: center; justify-content: center;
    border-radius: 3.40282e38px;
    font-size: 0.75rem; font-weight: 600;
    background-color: #0a0a0a;
    color: #fff;
}
.step-marker {
    display: flex;
    width: 1.5rem; height: 1.5rem;
    align-items: center; justify-content: center;
    border-radius: 3.40282e38px;
    font-size: 10px; font-weight: 600;
    border: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    background-color: #f5f5f5;
    color: #606060;
}
.step-marker.is-active {
    border-color: color-mix(in oklab, #3b82f6 30%, transparent);
    background-color: color-mix(in oklab, #3b82f6 20%, transparent);
    color: #3b82f6;
}
.step-flow {
    display: flex; flex-direction: column;
    gap: 0.5rem;
}
.step-flow__row {
    display: flex; align-items: center;
    gap: 0.5rem;
}
.step-flow__connector {
    background-color: color-mix(in oklab, #e8e8e8 40%, transparent);
    height: 1px; flex: 1;
}
.step-flow__label {
    color: #606060;
    font-size: 0.75rem;
}

/* ===== AVATARS ===== */
.avatar {
    display: flex;
    width: 2rem; height: 2rem;
    align-items: center; justify-content: center;
    border-radius: 3.40282e38px;
    border: 2px solid #fff;
    background: linear-gradient(to bottom right, #f5f5f5, color-mix(in oklab, #f5f5f5 60%, transparent));
    color: #606060;
    font-size: 9px; font-weight: 600;
}
.avatar-stack { display: flex; }
.avatar-stack > * + * { margin-left: -0.5rem; }

/* ===== BADGES ===== */
.badge-tag {
    display: inline-flex;
    border-radius: calc(1rem - 2px);
    padding: 0.125rem 0.5rem;
    font-size: 10px; font-weight: 500;
}
.badge-tag--emerald { background-color: color-mix(in oklab, #10b981 10%, transparent); color: #10b981; }
.badge-tag--blue    { background-color: color-mix(in oklab, #3b82f6 10%, transparent); color: #3b82f6; }
.badge-tag--violet  { background-color: color-mix(in oklab, #7c3aed 10%, transparent); color: #7c3aed; }
.badge-row {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 0.5rem;
}

/* ===== COMPLIANCE ===== */
.compliance-badge {
    position: relative;
    display: flex;
    width: 4rem; height: 4rem;
    align-items: center; justify-content: center;
    border-radius: 1rem;
    margin-bottom: 1.25rem;
}
.compliance-badge svg { width: 1.75rem; height: 1.75rem; }
.compliance-badge--emerald {
    border: 1px solid color-mix(in oklab, #10b981 20%, transparent);
    background-color: color-mix(in oklab, #10b981 5%, transparent);
    color: color-mix(in oklab, #10b981 70%, transparent);
}
.compliance-badge--blue {
    border: 1px solid color-mix(in oklab, #3b82f6 20%, transparent);
    background-color: color-mix(in oklab, #3b82f6 5%, transparent);
    color: color-mix(in oklab, #3b82f6 70%, transparent);
}
.compliance-badge--violet {
    border: 1px solid color-mix(in oklab, #7c3aed 20%, transparent);
    background-color: color-mix(in oklab, #7c3aed 5%, transparent);
    color: color-mix(in oklab, #7c3aed 70%, transparent);
}
.compliance-badge__check {
    position: absolute;
    top: -0.25rem; right: -0.25rem;
    display: flex;
    width: 1rem; height: 1rem;
    align-items: center; justify-content: center;
    border-radius: 3.40282e38px;
}
.compliance-badge__check svg { width: 0.625rem; height: 0.625rem; color: #fff; }
.compliance-badge__check--emerald { background-color: #10b981; }
.compliance-badge__check--blue    { background-color: #3b82f6; }
.compliance-badge__check--violet  { background-color: #7c3aed; }

/* ===== CERTS BAR ===== */
.certs-bar {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 1rem 2rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    background-color: color-mix(in oklab, #f5f5f5 10%, transparent);
    padding: 2rem 2.5rem;
}
.certs-bar__label {
    color: color-mix(in oklab, #606060 60%, transparent);
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.certs-bar__divider {
    background-color: color-mix(in oklab, #e8e8e8 40%, transparent);
    height: 1rem; width: 1px;
}
.certs-bar__cert {
    color: color-mix(in oklab, #606060 50%, transparent);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
}

/* ===== TESTIMONIALS ===== */
.testimonial__quote {
    color: color-mix(in oklab, #606060 20%, transparent);
    width: 2rem; height: 2rem;
    margin-bottom: 1rem;
}
.testimonial__body {
    color: color-mix(in oklab, #0a0a0a 80%, transparent);
    font-size: 0.875rem; line-height: 1.625;
    margin: 0 0 2.25rem;
}
.testimonial__author {
    display: flex; align-items: center; gap: 0.75rem;
    border-top: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    padding-top: 1.5rem;
}
.testimonial__author-name { font-size: 0.75rem; font-weight: 500; margin: 0; }
.testimonial__author-role {
    color: color-mix(in oklab, #606060 60%, transparent);
    font-size: 10px; margin: 0;
}

/* ===== QUICKSTART ===== */
.quickstart-steps {
    display: grid;
    gap: 2rem;
}
.step-card {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
}
.step-card__icon-wrap {
    position: relative;
    margin-bottom: 1.5rem;
}
.step-card__title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 500; }
.step-card__desc {
    color: #606060;
    max-width: 260px;
    font-size: 0.85rem; line-height: 1.625;
    margin: 0;
}
.step-card__code {
    font-family: 'Inconsolata', 'Cascadia Code', Consolas, monospace;
    margin-top: 2rem;
    width: 100%;
    border-radius: 1rem;
    border: 1px solid color-mix(in oklab, #e8e8e8 30%, transparent);
    background-color: #fff;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 11px;
    color: color-mix(in oklab, #606060 80%, transparent);
}
.step-card__code-comment {
    color: color-mix(in oklab, #0a0a0a 55%, transparent);
}
.step-card__code-highlight {
    color: #059669;
}

/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
    border: 1px solid color-mix(in oklab, #e8e8e8 40%, transparent);
    border-radius: 0.75rem;
    background-color: #fff;
    transition: background-color 0.2s, border-color 0.2s;
}
.faq-item:hover { background-color: color-mix(in oklab, #f5f5f5 20%, transparent); }
.faq-item__trigger {
    display: flex; cursor: pointer;
    align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem;
    user-select: none;
    list-style: none;
}
.faq-item__trigger::-webkit-details-marker { display: none; }
.faq-item__question {
    font-size: 0.875rem; font-weight: 500;
    color: color-mix(in oklab, #0a0a0a 80%, transparent);
    margin: 0;
}
.faq-item__chevron {
    width: 1rem; height: 1rem; flex-shrink: 0;
    color: color-mix(in oklab, #606060 40%, transparent);
    transition: transform 0.2s;
}
details[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__answer {
    border-top: 1px solid color-mix(in oklab, #e8e8e8 30%, transparent);
    padding: 0 1.5rem 1rem;
}
.faq-item__answer p {
    color: color-mix(in oklab, #606060 80%, transparent);
    padding-top: 1rem;
    font-size: 0.875rem; line-height: 1.625;
    margin: 0;
}

/* ===== CTA SECTION ===== */
.cta-content {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
}
.cta-content__title {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0;
}
.cta-content__desc {
    color: color-mix(in oklab, #606060 80%, transparent);
    margin: 1.25rem auto 0;
    max-width: 28rem;
    font-size: 0.875rem;
    line-height: 1.625;
}
.cta-content__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* ===== GRID LAYOUTS ===== */
.grid-cards--2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.grid-cards--3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }

/* ===== DARK MODE ===== */
.dark .page { background-color: #1e1e1e; color: #f3f3f3; }
.dark .hero__title { color: #f3f3f3; }
.dark .hero__desc { color: #9b9b94; }
.dark .hero-badge { border-color: rgba(96,165,250,.25); background-color: rgba(96,165,250,.08); }
.dark .hero__bg-grid { opacity: .07; background-image: linear-gradient(to right, rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.1) 1px, transparent 1px); }
.dark .provider-chip { background: #222; border-color: rgba(255,255,255,.08); color: #9b9b94; }
.dark .provider-chip:hover { border-color: rgba(255,255,255,.12); }
.dark .provider-chip--link { color: #7a7a72; }
.dark .provider-chip--link:hover { color: #f3f3f3; }
.dark .demo-card { background-color: #222; border-color: rgba(255,255,255,.08); }
.dark .demo-card__tabs { border-color: rgba(255,255,255,.06); }
.dark .demo-card__tab { color: #7a7a72; }
.dark .demo-card__tab:hover { color: #f3f3f3; }
.dark .demo-card__status-text { color: #7a7a72; }
.dark .demo-card__endpoint { border-color: rgba(255,255,255,.06); }
.dark .demo-card__endpoint code { color: #e5e5e0; }
.dark .demo-card__code-panel { color: #e5e5e0; }
.dark .demo-card__section-label { color: #7a7a72; }
.dark .demo-card__stats { color: #7a7a72; }
.dark .demo-card__stats-method { color: #7a7a72; }
.dark .demo-card__stats-dot { background-color: rgba(255,255,255,.15); }
.dark .syn-grey { color: #7a7a72; }

.dark .hero { background-color: rgba(255,255,255,.018); }
.dark .stats-bar { border-color: rgba(255,255,255,.08); background-color: rgba(255,255,255,.018); }
.dark .stat__label { color: #7a7a72; }
.dark .stat__num { color: #f3f3f3; }

.dark .section--why,
.dark .section--trusted,
.dark .section--cta,
.dark .section--alt,
.dark .section--muted { background-color: rgba(255,255,255,.01); }
.dark .section--uses,
.dark .section--compliance,
.dark .section--quickstart,
.dark .section--bordered { background-color: rgba(255,255,255,.018); }
.dark .section--uses,
.dark .section--alt,
.dark .section--bordered { border-color: rgba(255,255,255,.08); }
.dark .section__label { color: #7a7a72; }
.dark .section__title { color: #f3f3f3; }
.dark .section__desc { color: #9b9b94; }

.dark .card,
.dark .card--soft { background-color: #222; border-color: rgba(255,255,255,.06); }
.dark .card:hover,
.dark .card--soft:hover { background-color: #282828; }
.dark .card__desc { color: #9b9b94; }
.dark .card__icon { border-color: rgba(255,255,255,.06); background-color: rgba(255,255,255,.03); }

.dark .features-grid { border-color: rgba(255,255,255,.08); background-color: rgba(255,255,255,.06); }
.dark .features-grid__cell { background-color: #222; }
.dark .features-grid__cell:hover { background-color: #282828; }
.dark .features-grid__number { border-color: rgba(255,255,255,.08); background-color: #333; color: #9b9b94; }
.dark .features-grid__desc { color: #9b9b94; }
.dark .features-grid__tools-label { color: #7a7a72; }

.dark .model-chip { border-color: rgba(255,255,255,.06); background-color: rgba(255,255,255,.03); color: #9b9b94; }
.dark .model-chip:hover { border-color: rgba(96,165,250,.3); background-color: rgba(96,165,250,.08); }

.dark .feature-highlight__icon { border-color: rgba(255,255,255,.06); background-color: rgba(255,255,255,.03); }
.dark .feature-highlight__desc { color: #9b9b94; }

.dark .step-icon { border-color: rgba(255,255,255,.06); background-color: rgba(255,255,255,.03); }
.dark .step-badge { background-color: #f3f3f3; color: #1a1a1a; }
.dark .step-marker { border-color: rgba(255,255,255,.08); background-color: #333; color: #9b9b94; }
.dark .step-marker.is-active { border-color: rgba(96,165,250,.3); background-color: rgba(96,165,250,.2); color: #60a5fa; }
.dark .step-flow__connector { background-color: rgba(255,255,255,.08); }
.dark .step-flow__label { color: #9b9b94; }
.dark .step-card__desc { color: #9b9b94; }
.dark .step-card__code { border-color: rgba(255,255,255,.08); background-color: #1a1a1a; color: #9b9b94; }
.dark .step-card__code-comment { color: #9b9b94; }
.dark .step-card__code-highlight { color: #34d399; }

.dark .avatar { border-color: #222; background: #333; color: #9b9b94; }

.dark .badge-tag--emerald { background-color: rgba(16,185,129,.1); }
.dark .badge-tag--blue { background-color: rgba(59,130,246,.1); }
.dark .badge-tag--violet { background-color: rgba(124,58,237,.1); }

.dark .compliance-badge--emerald { border-color: rgba(16,185,129,.2); background-color: rgba(16,185,129,.05); }
.dark .compliance-badge--blue { border-color: rgba(59,130,246,.2); background-color: rgba(59,130,246,.05); }
.dark .compliance-badge--violet { border-color: rgba(124,58,237,.2); background-color: rgba(124,58,237,.05); }

.dark .certs-bar { border-color: rgba(255,255,255,.08); background-color: rgba(255,255,255,.02); }
.dark .certs-bar__label { color: #7a7a72; }
.dark .certs-bar__divider { background-color: rgba(255,255,255,.08); }
.dark .certs-bar__cert { color: #9b9b94; }

.dark .faq-item { background-color: #222; border-color: rgba(255,255,255,.06); }
.dark .faq-item:hover { background-color: #282828; }
.dark .faq-item__question { color: #e5e5e0; }
.dark .faq-item__chevron { color: #7a7a72; }
.dark .faq-item__answer { border-color: rgba(255,255,255,.06); }
.dark .faq-item__answer p { color: #9b9b94; }

.dark .testimonial__body { color: #e5e5e0; }
.dark .testimonial__author { border-color: rgba(255,255,255,.08); }
.dark .testimonial__quote { color: #9b9b94; }

.dark .cta-content__desc { color: #9b9b94; }

.dark .icon--teal { background: #1a2a2a; }
.dark .icon--green { background: #1a2a1a; }
.dark .icon--blue { background: #1a1a2a; }
.dark .icon--amber { background: #2a2a1a; }
.dark .icon--purple { background: #2a1a2a; }
.dark .icon--rose { background: #2a1a1a; }

.dark .btn-primary { background-color: #f3f3f3; color: #1a1a1a; }
.dark .btn-secondary { border-color: rgba(255,255,255,.08); background-color: #222; color: #f3f3f3; }
.dark .btn-secondary:hover { border-color: rgba(255,255,255,.12); background-color: #333; }

.dark .page-loader__fill { background: #f3f3f3; }
.dark .page-loader__glow { box-shadow: 0 0 10px #f3f3f3, 0 0 10px #f3f3f3; }

/* ===== HOME MEDIA QUERIES ===== */
@media (min-width: 640px) {
    .demo-card__tabs { gap: 0.375rem; padding-inline: 0.75rem; }
    .demo-card__tab { padding-inline: 0.75rem; font-size: 0.75rem; }
    .demo-card__status { padding-right: 0.75rem; }
}

@media (min-width: 768px) {
    .section, .section--bordered, .section--alt { padding: 8rem 1.5rem; }
    .section--cta { padding: 8rem 1.5rem; }
    .section__header { margin-bottom: 5rem; }
    .section__title { font-size: 1.875rem; line-height: 1.2; }
    .hero { padding: 8rem 1.5rem 6rem; }
    .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
    .hero__content { grid-column: span 6 / span 6; }
    .hero__demo   { grid-column: span 6 / span 6; }
    .hero__demo-inner { margin-top: 0; }

    .card { padding: 2rem; }
    .card--soft { padding: 2rem; }
    .card--feature { padding: 2rem; }
    .card__icon { width: 3rem; height: 3rem; }
    .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .features-grid__cell { padding: 2rem; }
    .feature-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; }
    .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; }
    .stat__num { font-size: 1.875rem; line-height: 1.2; }

    .grid-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
    .grid-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }

    .quickstart-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }

    .cta-content__title { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
    .hero { padding: 9rem 1.5rem 7rem; }
}

/* ===== ICON COLOR VARIANTS (homepage feature/card icons) ===== */
.icon--teal   { background: #e5edf0; color: #4d7a8b; border-color: transparent; }
.icon--green  { background: #e8f0e8; color: #3d7a3d; border-color: transparent; }
.icon--blue   { background: #e8edf5; color: #4a6fa5; border-color: transparent; }
.icon--amber  { background: #f0ece5; color: #8b7355; border-color: transparent; }
.icon--purple { background: #f0e8f0; color: #7a4d8b; border-color: transparent; }
.icon--rose   { background: #f0e8e8; color: #8b4d4d; border-color: transparent; }