/* Contact data and reading scale stay consistent across the page and footer. */
body {
    
    font-size: 18px
;}

.footer-emails {
    display: grid;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere
}



.footer-grid h2 {
    
    font-size: 14px
;}

.footer-grid > div:not(.footer-brand) > p {
    
    font-size: 14px
;}

.footer-bottom {
    
    font-size: 13px
;}

.footer-brand > p {
    font-size: 14px
}

.field label {
    
    font-size: 14px
;}

.form-intro, .field-hint {
    
    font-size: 13px
;}

@media(max-width:700px) {
    .footer-emails {
        font-size: 13px
    }

    

    .footer-grid > div:not(.footer-brand) > p {
        font-size: 13px
    }

    .footer-bottom {
        
    font-size: 12px
;}
}

@media(min-width:701px) and (max-width:900px) {
    .footer-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 32px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-grid > div:last-child {
        display: block
    }
}

/* Reference-derived idea, constrained to verified AGON capabilities. */
.intelligence-section {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: center
}

.intelligence-copy h2 {
    margin: 24px 0
}

.intelligence-copy > p:not(.eyebrow) {
    max-width: 500px;
    font-size: 15px;
    line-height: 1.9
}

.intelligence-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin-top: 24px
}

.decision-flow {
    position: relative;
    border-block: 1px solid var(--line);
    padding: 16px 0 14px 54px
}

.decision-list {
    position: relative;
    display: grid;
    gap: 8px
}

.flow-rail {
    position: absolute;
    left: -38px;
    top: 39px;
    bottom: 39px;
    width: 1px;
    background: #354154
}

.decision-step {
    position: relative;
    display: grid;
    grid-template-columns: 28px 34px minmax(0,1fr);
    align-items: center;
    gap: 15px;
    width: 100%;
    min-height: 76px;
    padding: 13px 16px;
    color: var(--text);
    text-align: left;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    transition: background-color var(--transition),border-color var(--transition),transform var(--transition)
}

    .decision-step::before {
        content: "";
        position: absolute;
        left: -42px;
        top: 50%;
        width: 9px;
        height: 9px;
        border: 2px solid var(--gray-dim);
        border-radius: 50%;
        background: var(--bg);
        transform: translateY(-50%);
        transition: background-color var(--transition),border-color var(--transition),box-shadow var(--transition)
    }

    .decision-step.is-active {
        border-color: #39465a;
        background: var(--bg-alt)
    }

        .decision-step.is-active::before {
            border-color: var(--violet-light);
            background: var(--violet-light);
            box-shadow: 0 0 0 5px color-mix(in srgb,var(--violet) 14%,transparent)
        }

.flow-index {
    color: var(--gray-dim);
    
    font-variant-numeric: tabular-nums;
    font-size: 11px
;}

.flow-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--accent);
    border: 1px solid #344052;
    border-radius: 8px;
    background: var(--bg)
}

.decision-step:nth-of-type(even) .flow-icon {
    color: var(--data)
}

.flow-icon > .icon {
    width: 19px;
    height: 19px
}

.flow-copy {
    display: block;
    min-width: 0
}

    .flow-copy strong {
        display: block;
        
        font-weight: 600;
        letter-spacing: -.02em;
    font-size: 17px
;}

    .flow-copy small {
        display: block;
        margin-top: 3px;
        color: var(--text-muted);
        
        line-height: 1.55;
    font-size: 13px
;}

.decision-outcome {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid #2d3849;
    border-radius: var(--radius);
    background: color-mix(in srgb,var(--surface) 62%,var(--bg))
}

    .decision-outcome > span {
        display: block;
        color: var(--accent);
        
        font-weight: 600;
    font-size: 12px
;}

    .decision-outcome p {
        margin-top: 7px;
        color: var(--text-secondary);
        
        line-height: 1.7;
    font-size: 14px
;}

.concept-note {
    
    letter-spacing: .03em;
    padding: 14px 0 0;
    font-size: 11px
;}

.validation-summary {
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb,var(--danger) 55%,transparent);
    border-radius: 7px;
    background: color-mix(in srgb,var(--danger) 7%,var(--bg))
}

    .validation-summary h3 {
        font-size: 14px;
        color: var(--danger)
    }

    .validation-summary ul {
        margin: 8px 0 0;
        padding-left: 20px;
        color: var(--text-secondary);
        font-size: 12px
    }

@media(max-width:1150px) {
    .intelligence-section {
        gap: 56px
    }

    .desktop-nav {
        margin-right: 34px
    }
}

@media(max-width:900px) {
    .intelligence-section {
        gap: 48px
    }

    .intelligence-copy h2 {
        font-size: 36px
    }
}

@media(max-width:700px) {
    .intelligence-section {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .intelligence-copy h2 {
        font-size: 34px
    }

    .intelligence-copy > p:not(.eyebrow) {
        font-size: 14px
    }

    .intelligence-links {
        gap: 6px 24px
    }

    .concept-note {
        padding-left: 0
    }
}

/* Theme control: dark is the default; the explicit choice is persisted by theme.js. */
.desktop-nav {
    margin-right: 0
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap
}

.theme-toggle-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px
}

    .theme-toggle-icon > .icon {
        width: 18px;
        height: 18px
    }

.theme-toggle-moon, .theme-label-dark {
    display: none
}

:root[data-theme="light"] .theme-toggle-sun, :root[data-theme="light"] .theme-label-light {
    display: none
}

:root[data-theme="light"] .theme-toggle-moon, :root[data-theme="light"] .theme-label-dark {
    display: grid
}

.theme-toggle:active {
    transform: translateY(1px)
}

@media(hover:hover) and (pointer:fine) {
    .theme-toggle:hover {
        border-color: var(--accent);
        background: var(--surface);
        color: var(--text)
    }
}

@media(max-width:1150px) {
    .theme-toggle {
        width: 44px;
        padding: 0
    }

    .theme-toggle-label {
        display: none
    }
}

@media(max-width:820px) {
    .theme-toggle {
        margin-left: auto
    }
}

/* Intentional light palette: cool paper, graphite type and the same AGON violet/blue roles. */
:root[data-theme="light"] .brand img {
    filter: brightness(0) saturate(100%);
    opacity: .82
}

:root[data-theme="light"] .site-header {
    background: rgb(244 246 250 / .96);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 0 rgb(23 32 51 / .03)
}

:root[data-theme="light"] .capability-strip {
    background: var(--bg-alt);
    border-color: var(--line)
}

:root[data-theme="light"] .approach-section,
:root[data-theme="light"] .contact-cta {
    background: var(--bg-alt);
    border-color: var(--line)
}

:root[data-theme="light"] .product-panel {
    background: var(--surface);
    border-color: var(--line-strong);
    box-shadow: 0 18px 42px rgb(23 32 51 / .06),0 2px 6px rgb(23 32 51 / .04)
}

:root[data-theme="light"] .kiosku-panel {
    border-color: #C9BBDD
}

:root[data-theme="light"] .circle-arrow,
:root[data-theme="light"] .process-steps li,
:root[data-theme="light"] .feature-grid > article {
    border-color: var(--line-strong)
}

:root[data-theme="light"] .product-preview,
:root[data-theme="light"] .product-hero-preview .product-preview,
:root[data-theme="light"] .contact-form-panel {
    border-color: var(--line-strong);
    background: var(--surface)
}

:root[data-theme="light"] input:not([type=checkbox]),
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
    background: #FFFFFF;
    color: var(--text)
}

:root[data-theme="light"] .system-map::before,
:root[data-theme="light"] .kiosku-body,
:root[data-theme="light"] .automation-canvas {
    background-image: radial-gradient(#D4DBE6 1px,transparent 1px)
}

:root[data-theme="light"] .map-node,
:root[data-theme="light"] .automation-trigger,
:root[data-theme="light"] .automation-outcome {
    background: #FFFFFF;
    border-color: var(--line-strong);
    box-shadow: 0 14px 34px rgb(23 32 51 / .08),0 2px 6px rgb(23 32 51 / .04)
}

:root[data-theme="light"] .map-core {
    background: #FFFFFF;
    border-color: #9D87C5;
    box-shadow: 0 18px 44px rgb(109 40 217 / .10)
}

:root[data-theme="light"] .map-lines {
    stroke: #B8C3D2
}

:root[data-theme="light"] .map-heading,
:root[data-theme="light"] .map-index,
:root[data-theme="light"] .connection-label,
:root[data-theme="light"] .visual-heading,
:root[data-theme="light"] .visual-label,
:root[data-theme="light"] .blueprint-heading {
    color: #66758B
}

:root[data-theme="light"] .map-footer,
:root[data-theme="light"] .visual-footer {
    border-color: var(--line-strong);
    color: #526175
}

:root[data-theme="light"] .node-insight {
    border-color: #9FB5D3
}

:root[data-theme="light"] .node-software {
    border-color: #B5A1D1
}

:root[data-theme="light"] .map-integration .node-software {
    border-color: #8CAAD1
}

:root[data-theme="light"] .integration-canvas {
    background-image: radial-gradient(var(--line-strong) .8px,transparent .8px)
}

    :root[data-theme="light"] .integration-canvas > svg {
        stroke: #AEB9C8
    }

:root[data-theme="light"] .integration-node,
:root[data-theme="light"] .integration-core {
    background: #FFFFFF;
    border-color: var(--line-strong);
    box-shadow: 0 12px 28px rgb(23 32 51 / .06)
}

:root[data-theme="light"] .integration-core {
    border-color: #9D87C5
}

:root[data-theme="light"] .kiosku-terminal {
    border-color: #B5A1D1;
    background: #FFFFFF;
    box-shadow: 8px 8px 0 #DDE3EC
}

:root[data-theme="light"] .product-hero-preview .kiosku-terminal {
    box-shadow: 12px 12px 0 #DDE3EC
}

:root[data-theme="light"] .kiosku-terminal-top,
:root[data-theme="light"] .kiosku-catalog {
    border-color: var(--line);
    color: #526175
}

    :root[data-theme="light"] .kiosku-catalog > span {
        border-color: #CCD4DF;
        background: #F1F4F8
    }

    :root[data-theme="light"] .kiosku-catalog small,
    :root[data-theme="light"] .kiosku-order > span {
        color: #526175
    }

:root[data-theme="light"] .kiosku-order {
    background: #EDF1F6
}

:root[data-theme="light"] .kiosku-route > span {
    border-color: #C9BBDD;
    background: #F3EFFA;
    color: var(--text-secondary)
}

:root[data-theme="light"] .kiosku-route > i {
    background: #9D87C5
}

:root[data-theme="light"] .solution-blueprint {
    background: #FFFFFF;
    border-color: var(--line-strong);
    box-shadow: 0 20px 44px rgb(23 32 51 / .07),0 2px 6px rgb(23 32 51 / .04)
}

    :root[data-theme="light"] .solution-blueprint ol,
    :root[data-theme="light"] .solution-blueprint li {
        border-color: var(--line)
    }

        :root[data-theme="light"] .solution-blueprint li > span {
            color: #66758B
        }

        :root[data-theme="light"] .solution-blueprint li > p,
        :root[data-theme="light"] .context-note {
            color: #526175
        }

:root[data-theme="light"] .scenario > div:last-child {
    border-color: var(--line-strong)
}

:root[data-theme="light"] .automation-trigger::after,
:root[data-theme="light"] .automation-outcome::before,
:root[data-theme="light"] .automation-rail {
    background: #AEB9C8
}

:root[data-theme="light"] .automation-icon,
:root[data-theme="light"] .automation-check {
    background: #F3EFFA;
    border-color: #B5A1D1
}

:root[data-theme="light"] .automation-check {
    background: #EEF4FC;
    border-color: #9FB5D3
}

:root[data-theme="light"] .automation-trigger small,
:root[data-theme="light"] .automation-outcome small,
:root[data-theme="light"] .automation-step small,
:root[data-theme="light"] .automation-status {
    color: #526175
}

:root[data-theme="light"] .automation-step {
    border-color: #C8D0DB;
    background: #FFFFFF
}

    :root[data-theme="light"] .automation-step.is-active {
        border-color: #9D87C5;
        background: #F3EFFA
    }

:root[data-theme="light"] .step-pulse {
    border-color: #F3EFFA
}

:root[data-theme="light"] .analytics-dashboard {
    background: #FFFFFF;
    border-color: var(--line-strong);
    box-shadow: 0 18px 44px rgb(23 32 51 / .08),0 2px 6px rgb(23 32 51 / .04)
}

:root[data-theme="light"] .analytics-toolbar,
:root[data-theme="light"] .analytics-kpis,
:root[data-theme="light"] .analytics-kpis > div,
:root[data-theme="light"] .trend-chart,
:root[data-theme="light"] .analytics-sources {
    border-color: var(--line)
}

    :root[data-theme="light"] .analytics-toolbar,
    :root[data-theme="light"] .analytics-kpis span,
    :root[data-theme="light"] .trend-chart span,
    :root[data-theme="light"] .period-chart span,
    :root[data-theme="light"] .analytics-sources span,
    :root[data-theme="light"] .analytics-sources strong,
    :root[data-theme="light"] .analytics-kpis .trend-mark {
        color: #526175
    }

:root[data-theme="light"] .analytics-grid {
    stroke: #D8DEE8
}

:root[data-theme="light"] .trend-chart circle {
    fill: #FFFFFF
}

:root[data-theme="light"] .period-bars {
    border-color: #AEB9C8
}

    :root[data-theme="light"] .period-bars i {
        background: #9FB5D3
    }

        :root[data-theme="light"] .period-bars i:nth-child(4) {
            background: #6F91BE
        }

:root[data-theme="light"] .analytics-sources span {
    border-color: var(--line-strong)
}

@media(hover:hover) and (pointer:fine) {
    :root[data-theme="light"] .solution-blueprint li:hover {
        background: #F1F4F8
    }

    :root[data-theme="light"] .decision-step:hover {
        border-color: var(--line-strong);
        background: #FFFFFF
    }
}

:root[data-theme="light"] .flow-rail {
    background: var(--line-strong)
}

:root[data-theme="light"] .decision-step.is-active {
    border-color: var(--line-strong);
    background: #FFFFFF
}

:root[data-theme="light"] .flow-icon {
    border-color: var(--line-strong);
    background: #FFFFFF
}

:root[data-theme="light"] .decision-outcome {
    border-color: var(--line-strong);
    background: #FFFFFF
}

@media(max-width:820px) {
    :root[data-theme="light"] .mobile-navigation nav {
        background: rgb(244 246 250 / .98);
        box-shadow: 0 18px 32px rgb(23 32 51 / .12)
    }
}

@media(prefers-reduced-motion:reduce) {
    .theme-toggle {
        transform: none !important
    }
}

@media(max-width:380px) {
    .intelligence-copy h2 {
        font-size: 30px
    }

    .intelligence-links {
        display: block
    }

        .intelligence-links .text-link {
            display: flex;
            width: max-content
        }
}