/* Homepage sections. Built on the tokens, buttons and shared surfaces in app.css. */

/* Section scaffolding */
.section-head { margin-bottom: 2.5rem; max-width: 46rem; }
.section-head h2 { margin-bottom: .6rem; }
.section-head p { color: var(--muted); line-height: 1.65; margin: 0; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-lead { color: var(--muted); font-size: 1.06rem; line-height: 1.7; margin: 0; margin-bottom: 1rem; }
.section-lead--center { margin: .9rem auto 0; max-width: 44rem; }
.split-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.5rem 4.5rem; align-items: end; margin-bottom: 3.5rem; }
.split-head .section-head { margin-bottom: 0; }
.split-head .section-lead { padding-bottom: .4rem; }
.section-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.5rem; align-items: center; }
.text-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-strong); text-decoration: none; font-weight: 550; font-size: .94rem; }
.text-link:hover { color: var(--accent); }
.text-link .bi { font-size: .85em; color: var(--muted); transition: transform .2s var(--ease-out), color .2s ease; }
.text-link:hover .bi { transform: translateX(3px); color: var(--accent); }
.link-row { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.5rem 0 0; }
.check-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.check-list li { position: relative; padding-left: 1.6rem; color: var(--text); line-height: 1.55; font-size: .96rem; }
.check-list li::before { content: ""; position: absolute; left: .2rem; top: .62rem; width: .45rem; height: .45rem; border-radius: 2px; background: var(--accent); opacity: .8; }
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.chip-list li { padding: .28rem .55rem; border-radius: 6px; background: var(--surface-3); color: var(--text); font-size: .8rem; line-height: 1.35; }

/* Status badges (also used by the docs) */
.status-badge {
    display: inline-flex; align-items: center; gap: .38rem;
    padding: .18rem .55rem; border-radius: 6px;
    font-family: var(--font-body); font-size: .74rem; font-weight: 550; letter-spacing: 0; line-height: 1.45;
    white-space: nowrap; vertical-align: middle;
    margin-left: 0.5rem;
    background: var(--surface-3); color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.status-badge-glyph { font-size: .62rem; }
.status-badge--available .status-badge-glyph { color: var(--ok); }
.status-badge--development .status-badge-glyph { color: var(--warn); }
.status-badge--planned .status-badge-glyph { color: var(--violet); }
.status-badge--unpublished .status-badge-glyph { color: var(--muted); }
.status-badge--community .status-badge-glyph { color: var(--ok); }
.status-badge--enterprise .status-badge-glyph { color: var(--brand); }
.badge-row { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; }
.badge-row .status-badge { margin-left: 0; }

/* Hero */
.hero { position: relative; padding: 5.5rem 0 6rem; overflow: hidden; isolation: isolate; }
.hero-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-lockup { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-bottom: 3.25rem; }
.hero-wordmark { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: clamp(2.6rem, 5.6vw, 4.4rem); letter-spacing: -0.045em; line-height: 1; color: var(--text-strong); }
.hero h1 { max-width: 23ch; margin: 0 auto; font-size: clamp(2.4rem, 4.6vw, 3.9rem); font-weight: 620; }
.hero-lead { color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.65; max-width: 54rem; margin: 1.5rem auto 0; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.25rem; }
.hero-points { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 0; color: var(--muted); font-size: .88rem; }
.hero-points li { display: inline-flex; align-items: center; }
.hero-points li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--faint); margin: 0 .9rem; }
.hero-points a { color: var(--text); text-decoration: none; }
.hero-points a:hover { color: var(--accent); }

/* The stage: the real console behind, the code that produced it in front. */
.hero-stage { position: relative; margin-top: 5rem; }
.hero-console {
    margin: 0 0 0 auto; width: 84%; border-radius: 14px; overflow: hidden; background: var(--surface);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-strong);
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 98%);
}
.hero-console img { display: block; width: 100%; height: auto; }

.hero-window {
    position: absolute; left: 0; top: 16%; width: min(470px, 41%); margin: 0;
    border-radius: 14px; overflow: hidden; background: rgba(27, 27, 31, 0.94);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 1px var(--line-strong), 0 2px 6px rgba(0, 0, 0, 0.5), 0 50px 90px -20px rgba(0, 0, 0, 0.9);
}
.window-bar { display: flex; align-items: center; padding: 0 .6rem; height: 2.5rem; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.window-tab { display: inline-flex; align-items: center; gap: .45rem; height: 1.8rem; padding: 0 .7rem; border-radius: 7px; background: var(--surface-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); font-family: var(--font-mono); font-size: .74rem; color: var(--text-strong); }
.window-tab .bi { color: var(--violet); font-size: .9rem; }
.window-code { padding: 1.15rem 1.3rem; font-size: .8rem; line-height: 1.7; color: #d6d6dc; }
.window-code code { color: inherit; font-size: inherit; }
.window-code .code-shell { color: var(--faint); user-select: none; }
.hl-1 { color: var(--code-highlight-color-1); }
.hl-2 { color: var(--code-highlight-color-2); }
.hl-6 { color: var(--code-highlight-color-6); }
.window-foot { display: grid; gap: .3rem; padding: .8rem 1.3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.window-foot span { display: inline-flex; align-items: center; gap: .5rem; }
.window-foot .bi { color: var(--accent); }

.hero-facts { list-style: none; margin: .5rem 0 0; padding: 1.6rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; line-height: 1.5; }
.hero-facts li { padding-left: 1rem; position: relative; }
.hero-facts li::before { content: ""; position: absolute; left: 0; top: .2rem; bottom: .2rem; width: 1px; background: var(--accent-line); }
.hero-facts strong { color: var(--text-strong); font-weight: 600; }
.hero-facts code { font-size: .84em; }

/* Who it's for */
.audience-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem 4rem; align-items: start; }
.scenario-list { list-style: none; margin: 0; padding: 0; display: grid; }
.scenario-row { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.scenario-row:last-child { border-bottom: 1px solid var(--line); }
.scenario-row h3 { margin: 0 0 .3rem; font-size: 1.12rem; }
.scenario-row p { margin: 0; color: var(--muted); line-height: 1.6; }
.scenario-icon { font-size: 1.2rem; color: var(--text-strong); line-height: 1.5; }
.fit-panel { display: grid; gap: 1rem; position: sticky; top: 5.5rem; }
.fit-card { padding: 1.5rem 1.6rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--panel-shadow), 0 0 0 1px var(--line); }
.fit-card h3 { margin: 0 0 1rem; font-size: 1rem; }
.fit-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.fit-card li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .5rem; color: var(--text); line-height: 1.5; font-size: .93rem; align-items: start; }
.fit-card .mark { font-size: .95rem; line-height: 1.5; }
.fit-card--yes .mark { color: var(--ok); }
.fit-card--other { background: transparent; box-shadow: 0 0 0 1px var(--line); }
.fit-card--other li { color: var(--muted); }
.fit-card--other .mark { color: var(--warn); }

/* Why NetlyDB */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4.5rem; }
.reason { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.reason > div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .4rem 2rem; align-items: baseline; }
.reason h3 { margin: 0; font-size: 1.08rem; }
.reason:last-child:nth-child(odd) { grid-column: 1 / -1; }
.reason:last-child:nth-child(odd) > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); max-width: calc(50% - 2.25rem); }
.reason p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .95rem; }

/* How it works */
.model-compare { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.25rem; align-items: start; }
.model-compare--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.model-card { padding: 2rem; margin: 0; display: flex; flex-direction: column; }
.model-card--server { background: transparent; box-shadow: 0 0 0 1px var(--line); }
.model-caption { margin: 0 0 1.75rem; }
.model-caption h3 { margin: .4rem 0 .45rem; font-size: 1.3rem; font-stretch: var(--display-stretch); letter-spacing: -0.02em; }
.model-caption p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .95rem; }
.model-card--netlydb { background: var(--surface-2); box-shadow: var(--shadow-md), 0 0 0 1px var(--line-strong); }
.model-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; }
.model-flow > li { display: flex; flex-direction: column; align-items: center; }
.model-flow > li + li::before { content: ""; width: 1px; height: 1.5rem; background: var(--line-strong); }
.model-node { width: 100%; text-align: center; padding: .8rem .9rem; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px var(--line); font-weight: 550; font-size: .94rem; color: var(--text); }
.model-node--app { color: var(--violet); }
.model-node--network { background: transparent; box-shadow: 0 0 0 1px rgba(240, 180, 94, .5); color: var(--warn); }
.model-node--disk { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .9rem; color: var(--text); }
.model-node--disk .bi { color: var(--warn); }
.storage-link { text-align: center; color: var(--faint); padding: .4rem 0; }

.box-label { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 550; color: var(--muted); margin-bottom: .75rem; }
.box-label--db { color: var(--accent); }
.app-box { border-radius: 14px; padding: 1.1rem; background: var(--bg-raised); box-shadow: inset 0 0 0 1px rgba(185, 168, 255, .22); }
.app-code { text-align: center; padding: .65rem; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(185, 168, 255, .3); font-weight: 600; font-size: .9rem; color: var(--violet); }
.app-call { text-align: center; color: var(--muted); font-size: .78rem; padding: .5rem 0; }
.app-call::before, .app-call::after { content: ""; display: inline-block; vertical-align: middle; width: 1.5rem; height: 1px; margin: 0 .6rem; background: var(--line-strong); }
.db-box { border-radius: 11px; padding: 1.1rem; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px var(--accent-line); }
.core-chips { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.core-chips li { flex: 1 1 auto; text-align: center; padding: .45rem .6rem; border-radius: 6px; background: var(--surface-3); color: var(--text-strong); font-weight: 550; font-size: .8rem; }
.modules-label { margin: 0 0 .5rem; font-size: .82rem; font-weight: 550; color: var(--muted); }
.module-toggles { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.module-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: .5rem .75rem; border-radius: 9px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line);
    transition: background .35s ease, box-shadow .35s ease;
}
.module-toggle.on { background: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px var(--accent-line); }
.switch { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 2.25rem; height: 1.3rem; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); transition: background .35s var(--ease-out); }
.switch-thumb { position: absolute; top: 50%; left: .17rem; width: .96rem; height: .96rem; border-radius: 50%; background: #a6a6b0; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); transform: translateY(-50%); transition: left .35s var(--ease-out), background .35s ease; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { left: 1.12rem; background: #ffffff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.module-name { font-weight: 550; font-size: .92rem; color: var(--muted); transition: color .35s ease; }
.module-toggle.on .module-name { color: var(--text-strong); }
.module-reach { display: inline-block; font-size: .8rem; color: var(--faint); transform: translateX(-6px); transition: color .35s ease, transform .45s var(--ease-out); }
.module-toggle.on .module-reach { color: var(--accent); transform: none; }
.module-edition { margin-left: .5rem; font-size: .7rem; color: var(--muted); background: var(--surface-3); border-radius: 5px; padding: .08rem .38rem; }
.module-status-line { margin: 1.1rem 0 0; text-align: center; color: var(--muted); font-size: .9rem; }
.module-status { color: var(--text-strong); font-weight: 550; }

.model-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; margin: 3.5rem 0 0; }
.model-facts > div { padding-top: 1.1rem; border-top: 1px solid var(--line-strong); }
.model-facts dt { font-weight: 600; color: var(--text-strong); margin-bottom: .4rem; }
.model-facts dd { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }

/* What it handles */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.pillar:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; padding-bottom: 0; }
.pillar:first-child .pillar-art { grid-row: 1 / span 6; height: auto; min-height: 100%; margin: 0; border-bottom: 0; border-right: 1px solid var(--line); }
.pillar:first-child .pillar-art .il { height: 160px; }
.pillar:first-child > :not(.pillar-art) { grid-column: 2; margin-left: 2.25rem; margin-right: 2.25rem; }
.pillar:first-child h3 { margin-top: 2.25rem; font-size: 1.7rem; }
.pillar:first-child .text-link { margin-bottom: 2.25rem; }
.pillar { display: flex; flex-direction: column; gap: .6rem; padding: 0 0 1.75rem; border-radius: 18px; background: var(--surface); box-shadow: var(--panel-shadow), 0 0 0 1px var(--line); overflow: hidden; }
.pillar > :not(.pillar-art) { margin-left: 1.75rem; margin-right: 1.75rem; }
.pillar h3 { margin: 0; font-size: 1.35rem; font-stretch: var(--display-stretch); letter-spacing: -0.02em; }
.pillar p { margin: 0 0 .5rem; color: var(--muted); line-height: 1.6; }
.pillar .chip-list { margin-bottom: 1.25rem; }
.pillar .text-link { margin-top: auto; align-self: flex-start; }

/* Growth path */
.growth-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; position: relative; }
.growth-step { position: relative; display: flex; flex-direction: column; gap: .65rem; padding: 1.6rem; border-radius: 16px; background: var(--surface); box-shadow: var(--panel-shadow), 0 0 0 1px var(--line); }
.growth-step-head { display: flex; align-items: center; gap: .75rem; }
.growth-step-index { width: 1.9rem; height: 1.9rem; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); color: var(--text-strong); font-weight: 600; font-size: .86rem; flex: none; }
.growth-step h3 { margin: 0; font-size: 1.15rem; }
.growth-step p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }
.growth-step .step-code { margin-top: auto; display: block; padding: .6rem .75rem; border-radius: 8px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); font-size: .78rem; color: var(--code-highlight-color-1); overflow-x: auto; }
.growth-step-foot { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.growth-step-foot .status-badge { margin-left: 0; }

/* AI */
.ai-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; padding: 3.5rem 0; }
.ai-feature + .ai-feature { border-top: 1px solid var(--line); }
.ai-feature--reverse .ai-feature-copy { order: 2; }
.ai-feature-copy h3 { font-size: 1.7rem; font-stretch: var(--display-stretch); letter-spacing: -0.025em; margin: 0 0 .85rem; }
.ai-feature-copy > p { color: var(--muted); line-height: 1.7; margin: 0; }
.ai-feature-copy em { color: var(--text-strong); font-style: normal; }
.ai-figure { margin: 0; padding: 1.5rem; border-radius: 18px; background: var(--surface); box-shadow: var(--panel-shadow), 0 0 0 1px var(--line); }
.ai-search-box { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: 10px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); font-size: .95rem; }
.ai-search-box .bi { color: var(--accent); }
.ai-results { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ai-results li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: 10px; background: var(--surface-2); }
.ai-result-text { font-weight: 600; color: var(--text-strong); }
.ai-result-tag { font-size: .76rem; font-weight: 550; color: var(--accent); }
.ai-result-sub { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; margin-top: .15rem; }
.ai-figure-note { margin: .9rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.ai-tool-list { font-family: var(--font-mono); font-size: .82rem; }
.ai-tool-title { display: block; font-family: var(--font-body); font-size: .86rem; font-weight: 550; color: var(--muted); margin-bottom: .85rem; }
.ai-tool-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ai-tool-list li { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: 8px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); color: #dcdce2; }
.ai-tool-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.ai-tool-list .ai-tool-more { grid-column: 1 / -1; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-family: var(--font-body); }
.ai-tool-list .ai-tool-more::before { content: none; }
.ai-extra { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; padding: 1.6rem 1.8rem; margin-top: 1.5rem; }
.ai-extra .badge-row { margin: .2rem 0 0; flex-direction: column; }
.ai-extra h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.ai-extra p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .95rem; }

/* Reliability */
.guarantees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; }
.guarantee { display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem 0; border-top: 1px solid var(--line); }
.guarantee h3 { margin: 0; font-size: 1.1rem; }
.guarantee p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.6; flex: 1; }
.guarantee .mechanism { font-size: .84rem; color: var(--muted); margin-top: .5rem; }
.evidence { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; margin-top: 2.5rem; padding: 1.6rem 1.8rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--panel-shadow), 0 0 0 1px var(--line); }
.evidence-text { color: var(--muted); line-height: 1.65; font-size: .95rem; }
.evidence-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }

/* Management UI console */
.console-frame { overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-strong); border-radius: 18px; }
.console-titlebar { display: flex; align-items: center; gap: .45rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.console-titlebar .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--surface-3); }
.console-titlebar .console-title { margin-left: .6rem; font-weight: 550; }
.console-body { display: grid; grid-template-columns: 1fr; }
.console-nav { padding: .6rem; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .2rem; background: var(--bg-raised); }
.console-nav .arch-card { padding: .45rem .75rem; font-size: .86rem; }
.console-panel { padding: 1.75rem; }
.console-panel h3 { margin: 0 0 .35rem; font-size: 1.3rem; font-stretch: var(--display-stretch); letter-spacing: -0.02em; }
.console-panel p { color: var(--muted); line-height: 1.6; margin: 0; }
.console-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.shot-switch { display: inline-flex; gap: .15rem; padding: .2rem; border-radius: 10px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.shot-switch button { border: 0; border-radius: 7px; background: transparent; color: var(--muted); padding: .4rem .85rem; font: inherit; font-weight: 550; font-size: .84rem; cursor: pointer; transition: color .2s ease, background .2s ease; }
.shot-switch button:hover { color: var(--text-strong); }
.shot-switch button.active { color: var(--text-strong); background: var(--surface-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5); }
.shot-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.console-shot { margin: 0; }
.console-shot a { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-strong), 0 24px 50px -20px rgba(0, 0, 0, 0.8); }
.console-shot img { display: block; width: 100%; height: auto; }
.console-shot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.console-shot figcaption { margin-top: .8rem; color: var(--muted); font-size: .88rem; }

/* Developer section */
.dev-intro { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: end; margin-bottom: 2rem; }
.dev-intro .section-head { margin-bottom: 0; }
.dev-intro .section-actions { margin-top: 0; }
.code-steps { display: flex; flex-wrap: wrap; gap: .2rem; margin-bottom: 1rem; padding: .3rem; border-radius: 12px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.code-steps .arch-card { padding: .45rem .8rem; font-size: .86rem; }
.code-caption { color: var(--muted); margin: 0 0 .7rem; font-size: .93rem; }
.code-caption a { color: var(--accent); }
.dev-subsection { margin-top: 5rem; }
.dev-subsection > h3 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-stretch: var(--display-stretch); letter-spacing: -0.025em; margin: 0 0 .5rem; }
.dev-subsection > p { color: var(--muted); max-width: 70ch; line-height: 1.65; margin: 0 0 1.75rem; }
.engine-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.engine-nav { display: flex; flex-direction: column; gap: .15rem; padding: .3rem; border-radius: 12px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); align-self: start; }
.engine-nav .arch-card { padding: .5rem .75rem; font-size: .88rem; }
.engine-panel { display: flex; }
.engine-panel .architecture-detail { margin-top: 0; flex: 1; }
.engine-swap { display: flex; flex: 1; min-width: 0; }
.engine-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 1.1rem 0 0; }
.engine-features > div { padding: .75rem .9rem; border-radius: 9px; background: var(--surface-2); }
.engine-features dt { color: var(--text-strong); font-weight: 600; font-size: .9rem; }
.engine-features dd { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.engine-note { margin: 1.1rem 0 0; font-size: .9rem; color: var(--muted); padding: .7rem .9rem; border-radius: 9px; background: rgba(240, 180, 94, .07); box-shadow: inset 0 0 0 1px rgba(240, 180, 94, .2); }
.engine-docs-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.2rem; color: var(--accent); font-weight: 550; text-decoration: none; font-size: .93rem; }
.engine-docs-link:hover { text-decoration: underline; }

/* Progressive disclosure */
.disclosure { border-top: 1px solid var(--line); padding-top: 1rem; }
.disclosure summary { cursor: pointer; color: var(--text-strong); font-weight: 550; font-size: .94rem; list-style: none; display: inline-flex; align-items: center; gap: .55rem; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .25s var(--ease-out); margin-right: .15rem; }
.disclosure[open] summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.disclosure summary:hover { color: var(--accent); }
.disclosure summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.disclosure-body { margin-top: 1rem; color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* Project status */
.status-board { padding: 0; overflow: hidden; border-radius: 18px; }
.status-summary { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; padding: 1.6rem 1.8rem; border-bottom: 1px solid var(--line); }
.status-summary-mark { font-size: .78rem; font-weight: 600; color: var(--bg); background: var(--text-strong); border-radius: 7px; padding: .35rem .7rem; white-space: nowrap; }
.status-summary h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.status-summary p { margin: 0; color: var(--muted); line-height: 1.6; }
.status-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status-columns--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.status-column { padding: 1.4rem 1.8rem 1.6rem; }
.status-column + .status-column { border-left: 1px solid var(--line); }
.status-column h3 { margin: 0 0 .9rem; font-size: 1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.status-column h3 .status-badge { margin-left: 0; }
.status-column ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.status-column li::marker { color: var(--faint); }
.status-column li + li { margin-top: .35rem; }
.history-disclosure { margin-top: 2.5rem; }
.history-disclosure > summary { font-size: 1rem; }

/* Final call to action */
.final-cta { text-align: center; padding-bottom: 8rem; }
.final-cta-panel { padding: 1rem 0 0; }
.final-cta h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); max-width: 20ch; margin-left: auto; margin-right: auto; }
.final-cta-copy { color: var(--muted); max-width: 40rem; margin: 1rem auto 0; line-height: 1.65; font-size: 1.06rem; }
.final-cta .section-actions { justify-content: center; }

/* Responsive */
@media (max-width: 1100px) {
    .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .growth-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .model-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .status-columns--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .status-column:nth-child(odd) { border-left: none; }
    .status-column:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .hero-window { width: min(440px, 46%); }
    .window-code { font-size: .74rem; }
}

@media (max-width: 940px) {
    .hero { padding-top: 3.5rem; }
    .hero-lockup { margin-bottom: 2.25rem; }
    .hero-stage { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .hero-window { position: static; width: 100%; order: -1; }
    .hero-console { width: 100%; }
    .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split-head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem; }
    .audience-layout { grid-template-columns: 1fr; }
    .fit-panel { position: static; grid-template-columns: 1fr 1fr; }
    .model-compare { grid-template-columns: 1fr; }
    .pillars { grid-template-columns: 1fr; }
    .ai-feature { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem 0; }
    .ai-feature--reverse .ai-feature-copy { order: 0; }
    .dev-intro { grid-template-columns: 1fr; }
    .evidence { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .engine-layout { grid-template-columns: 1fr; }
    .engine-nav { flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
    .engine-nav .arch-card { flex: none; white-space: nowrap; scroll-snap-align: start; }
    .engine-features { grid-template-columns: 1fr; }
    .fit-panel { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .hero-lockup { gap: .6rem; }
    .hero-points { flex-direction: column; align-items: center; gap: .35rem; }
    .hero-points li + li::before { content: none; }
    .hero-lockup .db-logo { --size: 76 !important; }
    .hero-facts { grid-template-columns: 1fr; }
    .window-code { font-size: .72rem; padding: 1rem; }
    .reasons, .guarantees, .growth-steps, .model-facts, .status-columns--four { grid-template-columns: 1fr; }
    .status-column + .status-column { border-left: none; border-top: 1px solid var(--line); }
    .status-summary { grid-template-columns: 1fr; }
    .ai-extra { grid-template-columns: 1fr; }
    .ai-tool-list ul { grid-template-columns: 1fr; }
    .model-card { padding: 1.25rem; }
    .pillar > :not(.pillar-art) { margin-left: 1.25rem; margin-right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .module-toggle, .switch-track, .switch-thumb, .module-name, .module-reach, .text-link .bi, .disclosure summary::before { transition: none; }
}

/* Full deployment picture (SingleAppDiagram.razor), shown on request under the model comparison */
.full-picture { margin-top: 2.75rem; }
.full-picture-figure { margin: 0; padding: 1.5rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--panel-shadow), 0 0 0 1px var(--line); }
.full-picture-figure figcaption { color: var(--muted); font-size: .9rem; line-height: 1.55; margin-top: 1rem; text-align: center; }
.diagram-scroll { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.sad-svg { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }
.sad-svg text { font-family: var(--font-body); }
.sad-container { fill: rgba(255, 255, 255, 0.02); stroke: var(--line-strong); stroke-width: 1; }
.sad-band { fill: rgba(126, 166, 255, .1); stroke: rgba(126, 166, 255, .35); stroke-width: 1; }
.sad-bi-band { fill: var(--brand); }
.sad-band-text { fill: var(--text-strong); font-size: 13px; font-weight: 650; }
.sad-tile { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.sad-tile-code { stroke: rgba(185, 168, 255, .45); }
.sad-bi-module { fill: var(--accent); }
.sad-bi-code { fill: var(--violet); }
.sad-label-code { fill: var(--violet); font-size: 12px; font-weight: 650; text-anchor: middle; }
.sad-engine-ring { fill: rgba(92, 212, 232, .07); stroke: var(--accent); stroke-width: 2.5; }
.sad-bi-engine { fill: var(--accent); }
.sad-engine-text { fill: var(--text-strong); font-size: 13px; font-weight: 650; text-anchor: middle; }
.sad-bi-disk { fill: var(--warn); }
.sad-edge-code { fill: none; stroke: var(--violet); stroke-width: 1.6; }
.sad-fill-code { fill: var(--violet); }
.sad-edge-disk { fill: none; stroke: var(--warn); stroke-width: 1.6; }
.sad-fill-disk { fill: var(--warn); }
.sad-edge-text { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.sad-edge-soft { fill: none; stroke: rgba(141, 141, 151, .45); stroke-width: 1.2; stroke-dasharray: 4 4; }
.sad-fill-soft { fill: rgba(141, 141, 151, .6); }
.sad-optional { fill: rgba(255, 255, 255, 0.015); stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 5 4; }
.sad-optional-text { fill: var(--muted); font-size: 11px; }
.sad-title-text { fill: var(--text-strong); font-size: 12px; font-weight: 600; text-anchor: middle; }
.sad-sub-text { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.sad-hex-text { fill: var(--accent); font-size: 11px; font-weight: 650; text-anchor: middle; }
.sad-bi-ext { fill: var(--brand); }
.sad-ext-text { fill: var(--muted); font-size: 10.5px; text-anchor: middle; }
@media (max-width: 820px) { .diagram-scroll .sad-svg { width: 700px; max-width: none; } }

/* Illustrations (Illustration.razor): every drawing is built from the colour tokens */
.il { display: block; width: 100%; height: auto; overflow: visible; }
.il text { font-family: var(--font-body); }
.il-card { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.5; }
.il-card--mid { opacity: .7; }
.il-card--back { opacity: .4; }
.il-bar { fill: rgba(141, 141, 151, .4); }
.il-bar--accent { fill: var(--accent); }
.il-bar--brand { fill: var(--brand); opacity: .8; }
.il-mono { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--muted); }
.il-mono--accent { fill: var(--accent); }
.il-thumb { fill: rgba(255, 255, 255, 0.04); stroke: var(--line); stroke-width: 1; }
.il-tag { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1; }
.il-dot { fill: rgba(141, 141, 151, .6); }
.il-dot--accent { fill: var(--accent); }
.il-dot--warn { fill: var(--warn); }
.il-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .8; }
.il-lens { fill: rgba(126, 166, 255, .06); stroke: var(--line-strong); stroke-width: 2; }
.il-handle { stroke: var(--line-strong); stroke-width: 6; stroke-linecap: round; }
.il-fill-accent { fill: var(--accent); }
.il-fill-brand { fill: var(--brand); opacity: .85; }
.il-app { fill: rgba(185, 168, 255, .04); stroke: rgba(185, 168, 255, .4); stroke-width: 1.5; stroke-dasharray: 5 4; }
.il-app-bar { fill: rgba(185, 168, 255, .08); }
.il-hex { fill: rgba(92, 212, 232, .08); stroke: var(--accent); stroke-width: 2; }
.il-disk { fill: var(--surface-2); stroke: var(--warn); stroke-width: 1.5; }
.il-link { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.il-link--arrow { stroke: var(--accent); }
.il-link--dashed { stroke: var(--accent); stroke-dasharray: 4 4; opacity: .8; }
.il-window { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.5; }
.il-window-bar { fill: rgba(255, 255, 255, 0.05); }
.il-label { font-size: 10px; fill: var(--muted); }
.il-label--accent { fill: var(--accent); }
.il-label--ok { fill: var(--ok); }
.il-grid path { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.il-cloud circle { fill: rgba(141, 141, 151, .45); }
.il-neighbourhood { fill: rgba(92, 212, 232, .05); stroke: var(--accent-line); stroke-width: 1; stroke-dasharray: 4 4; }
.il-match-line { stroke: var(--accent); stroke-width: 1.5; }
.il-star { fill: #fff; stroke: var(--accent); stroke-width: 1.5; }
.il-callout { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.il-callout--query { stroke: rgba(255, 255, 255, .3); }
.il-callout--match { stroke: var(--accent); }
.il-callout-text { font-size: 11px; fill: var(--text); font-style: italic; }
.il-callout-text--match { fill: var(--accent); font-style: normal; font-weight: 600; }
.il-node { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.5; }
.il-node--accent { stroke: var(--accent); fill: rgba(92, 212, 232, .06); }
.il-node--ok { stroke: var(--ok); fill: rgba(95, 217, 159, .06); }
.il-node--warn { stroke: var(--warn); fill: rgba(240, 180, 94, .06); }
.il-node-title { font-size: 13px; font-weight: 600; fill: var(--text-strong); }
.il-node-sub { font-size: 10.5px; fill: var(--muted); }
.il-flow { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.il-flow--soft { stroke: var(--line-strong); }
.il-flow--recovery { stroke: var(--warn); stroke-dasharray: 5 4; }
.il-arrowhead { fill: var(--accent); }
.il-arrowhead--soft { fill: var(--line-strong); }
.il-arrowhead--warn { fill: var(--warn); }

/* Where the drawings sit */
.pillar-art { height: 168px; margin: 0 0 1.25rem; padding: 1.75rem; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-raised); border-bottom: 1px solid var(--line); }
.pillar-art .il { height: 112px; width: auto; max-width: 100%; }
.growth-art { height: 120px; margin: .25rem 0 .5rem; }
.growth-art .il { height: 100%; width: auto; max-width: 100%; margin: 0 auto; }
.write-path { margin: 0 0 3rem; padding: 1.75rem 1.75rem 1.1rem; border-radius: 18px; background: var(--surface); box-shadow: var(--panel-shadow), 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: thin; }
.write-path .il { min-width: 640px; }
.write-path figcaption { color: var(--muted); font-size: .86rem; margin-top: .4rem; text-align: center; }
.ai-figure--space { padding: 1.1rem 1.1rem .6rem; }
.ai-figure--space .ai-figure-note { padding: 0 .5rem .5rem; }
.edition-head h3 { display: inline-flex; align-items: center; gap: .7rem; }
.edition-glyph { font-size: 1.15rem; color: var(--muted); }
.edition-card--enterprise .edition-glyph { color: var(--accent); }

@media (max-width: 940px) {
    .pillar-art { height: 148px; }
    .pillar-art .il { height: 96px; }
}

/* Section openings that break the split-head rhythm */
.split-head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1rem; }
.split-head--center .section-lead { max-width: 46rem; }

/* The one authored moment: the code window settles onto the console it produced. */
@media (prefers-reduced-motion: no-preference) and (min-width: 941px) {
    .hero-window { animation: window-settle 1.1s var(--ease-out) .15s both; }
    .hero-console { animation: console-rise 1.3s var(--ease-out) both; }
}
@keyframes window-settle {
    from { transform: translate(-18px, 34px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 1px var(--line-strong), 0 2px 6px rgba(0, 0, 0, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.9); }
}
@keyframes console-rise {
    from { transform: translateY(14px); filter: brightness(.75); }
}

@media (max-width: 1100px) {
    .reasons { grid-template-columns: 1fr; }
    /* One column: the last item no longer needs to line up with a half-width column. */
    .reason:last-child:nth-child(odd) > div { max-width: none; }
}
@media (max-width: 940px) {
    .pillars { grid-template-columns: 1fr; }
    .pillar:first-child { display: flex; padding-bottom: 1.75rem; }
    .pillar:first-child .pillar-art { min-height: 0; height: 148px; border-right: 0; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
    .pillar:first-child .pillar-art .il { height: 96px; }
    .pillar:first-child > :not(.pillar-art) { margin-left: 1.75rem; margin-right: 1.75rem; }
    .pillar:first-child h3 { margin-top: 0; font-size: 1.35rem; }
    .pillar:first-child .text-link { margin-bottom: 0; }
}
@media (max-width: 620px) {
    .reason > div, .reason:last-child:nth-child(odd) > div { grid-template-columns: 1fr; }
    .pillar:first-child > :not(.pillar-art) { margin-left: 1.25rem; margin-right: 1.25rem; }
}

/* Hexagon field behind the hero lockup. It is centred on the logo and drawn with the logo's own
   hexagon as its cell, so the mark reads as one cell of the grid. */
.hero-mark { position: relative; display: flex; --hex-scale: 1; }
.hero-hexfield {
    position: absolute; left: 50%; top: 50%; z-index: -1; width: 2400px; height: 1400px; max-width: none;
    transform: translate(-50%, -50%) scale(var(--hex-scale)); pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 42% 46% at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 42% 46% at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
.hero-hexfield-lines-path { fill: none; stroke: var(--hex-line); stroke-opacity: .2; stroke-width: 1; }
.hero-hexfield-light-core { stop-color: var(--accent); stop-opacity: .11; }
.hero-hexfield-light-mid { stop-color: var(--brand); stop-opacity: .045; }
.hero-hexfield-light-edge { stop-color: var(--brand); stop-opacity: 0; }

/* Restrained colour: each capability band carries a faint wash of its own hue. */
.pillar:nth-child(1) .pillar-art { background: radial-gradient(90% 120% at 30% 0%, rgba(92, 212, 232, .09), transparent 70%), var(--bg-raised); }
.pillar:nth-child(2) .pillar-art { background: radial-gradient(90% 120% at 50% 0%, rgba(185, 168, 255, .09), transparent 70%), var(--bg-raised); }
.pillar:nth-child(3) .pillar-art { background: radial-gradient(90% 120% at 50% 0%, rgba(126, 166, 255, .09), transparent 70%), var(--bg-raised); }
.final-cta { background: radial-gradient(60% 55% at 50% 100%, rgba(92, 212, 232, .07), transparent 70%); }

@media (max-width: 620px) {
    .hero-mark { --hex-scale: .59375; }
}

/* ---------------------------------------------------------------------------------------------
   Motion. One authored moment (the hexagon field lighting up around the logo) plus motion that
   explains order or change: the write path plays in sequence, the growth steps arrive as a list,
   swapped tab panels settle in, and a module switch moves its destination label into place.
   home-motion.js adds .is-ready/.is-in; without it everything renders in its final state.
   --------------------------------------------------------------------------------------------- */

/* Hero: after the load ripple the field stays unlit, apart from single cells that glow now and then. */
.hero-hexfield-pulse use { opacity: 0; fill: var(--accent); fill-opacity: .06; stroke: var(--accent); stroke-opacity: .3; stroke-width: 1; transition: opacity 1.6s ease; }
.hero-hexfield-pulse use.on { opacity: 1; transition-duration: .9s; }

/* Load ripple: a wave leaves the logo and crosses the field ring by ring (delay per cell is set
   in HomeHero.razor), followed by a fainter echo. Every ripple cell ends dark, so the settled
   state is the plain grid. */
.hero-hexfield-wave use { opacity: 0; fill: var(--accent); fill-opacity: .12; stroke: var(--accent); stroke-opacity: .5; stroke-width: 1; animation: hex-ripple 1.5s cubic-bezier(.3, 0, .2, 1) var(--ripple-delay, 0s) both; }
@keyframes hex-ripple {
    0% { opacity: 0; }
    16% { opacity: var(--ripple-peak, 1); }
    42% { opacity: calc(var(--ripple-peak, 1) * .12); }
    58% { opacity: calc(var(--ripple-peak, 1) * .38); }
    100% { opacity: 0; }
}

/* The hero logo is a button that replays the ripple (home-motion.js). */
.hero-logo-button { display: flex; padding: 0; border: 0; border-radius: 22%; background: none; color: inherit; cursor: pointer; transition: transform .2s var(--ease-out); }
.hero-logo-button:active { transform: scale(.96); }
.hero-logo-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Write path: each stage lights after the one before it, then the recovery loop closes. */
.write-path.is-ready svg > g,
.write-path.is-ready svg > text,
.write-path.is-ready svg > path { opacity: 0; }
.write-path.is-ready svg > path:not(.il-flow--recovery) { stroke-dasharray: 40; stroke-dashoffset: 40; }
.write-path.is-ready.is-in svg > g,
.write-path.is-ready.is-in svg > text,
.write-path.is-ready.is-in svg > path { opacity: 1; stroke-dashoffset: 0; transition: opacity .5s var(--ease-out), stroke-dashoffset .4s var(--ease-out); }
.write-path.is-in svg > g:nth-of-type(2), .write-path.is-in svg > text:nth-of-type(1) { transition-delay: .35s; }
.write-path.is-in svg > g:nth-of-type(3), .write-path.is-in svg > text:nth-of-type(2) { transition-delay: .65s; }
.write-path.is-in svg > g:nth-of-type(4), .write-path.is-in svg > text:nth-of-type(3) { transition-delay: .95s; }
.write-path.is-in svg > path:nth-of-type(1) { transition-delay: .15s; }
.write-path.is-in svg > path:nth-of-type(2) { transition-delay: .45s; }
.write-path.is-in svg > path:nth-of-type(3) { transition-delay: .75s; }
.write-path.is-in svg > path:nth-of-type(4) { transition-delay: 1.25s; transition-duration: .7s; }
.write-path.is-in svg > g:nth-of-type(5), .write-path.is-in svg > text:nth-of-type(4) { transition-delay: 1.45s; }

/* Growth path: four steps arrive as one list. */
.growth-steps.is-ready .growth-step { opacity: 0; transform: translateY(14px); }
.growth-steps.is-ready.is-in .growth-step { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.growth-steps.is-in .growth-step:nth-child(2) { transition-delay: .07s; }
.growth-steps.is-in .growth-step:nth-child(3) { transition-delay: .14s; }
.growth-steps.is-in .growth-step:nth-child(4) { transition-delay: .21s; }

/* Tab panels (Management UI, code examples, engine explorer) settle in when they change. */
.panel-swap { animation: panel-settle .32s var(--ease-out) both; }
@keyframes panel-settle { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
    .hero-hexfield-wave { display: none; }
    .panel-swap { animation-name: panel-fade; animation-duration: .2s; }
    .module-reach, .module-toggle.on .module-reach { transform: none; }
}
@keyframes panel-fade { from { opacity: 0; } }