/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/dm-sans-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/dm-sans-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/dm-sans-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/dm-sans-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/dm-sans-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/dm-sans-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/fraunces-italic-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/fraunces-italic-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/fraunces-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/fraunces-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/fraunces-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/fraunces-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/fraunces-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/fraunces-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/fraunces-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/fraunces-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/geist-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/geist-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/geist-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/geist-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 450;;
  font-display: swap;
  src: url('fonts/geist-normal-450-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 450;;
  font-display: swap;
  src: url('fonts/geist-normal-450-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/geist-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/geist-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;;
  font-display: swap;
  src: url('fonts/geist-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;;
  font-display: swap;
  src: url('fonts/geist-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/instrument-serif-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/instrument-serif-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/inter-tight-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;;
  font-display: swap;
  src: url('fonts/inter-tight-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/inter-tight-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/inter-tight-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/inter-tight-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/inter-tight-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;;
  font-display: swap;
  src: url('fonts/inter-tight-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;;
  font-display: swap;
  src: url('fonts/inter-tight-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/jetbrains-mono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;;
  font-display: swap;
  src: url('fonts/jetbrains-mono-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/jetbrains-mono-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;;
  font-display: swap;
  src: url('fonts/jetbrains-mono-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   LogicShift — Hybrid editorial · boutique
   Shared styles
   ============================================ */
:root {
  /* Paper / ink */
  --paper:        #F6F2EB;
  --paper-2:      #EFEAE0;
  --paper-3:      #FBF8F2;
  --paper-warm:   #F8F4EC;
  --ink:          #0E0E0E;
  --ink-soft:     #1A1A1A;
  --ink-mid:      #2A2A2A;
  --quill:        #4A4A4A;
  --ash:          #6B6459;
  --bone:         #8C8479;
  --vellum:       #BDB5A8;
  --rule:         #E5E0D8;
  --rule-strong:  #D8D2C8;

  /* Accent (gold default) */
  --accent:       #B08854;
  --accent-soft:  #C49B68;
  --accent-deep:  #8E6B3F;
  --accent-tint:  rgba(176,136,84,0.08);
  --accent-tint2: rgba(176,136,84,0.16);

  /* Fonts (overridden by typography tweak) */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --display-weight: 350;
}

[data-accent="indigo"]  { --accent: #4356C8; --accent-soft: #6577D9; --accent-deep: #2C3D9E; --accent-tint: rgba(67,86,200,0.08);  --accent-tint2: rgba(67,86,200,0.16); }
[data-accent="forest"]  { --accent: #2F7B5A; --accent-soft: #4A9A78; --accent-deep: #1F5A40; --accent-tint: rgba(47,123,90,0.08);   --accent-tint2: rgba(47,123,90,0.16); }
[data-accent="carmine"] { --accent: #B0464F; --accent-soft: #C76670; --accent-deep: #8B3038; --accent-tint: rgba(176,70,79,0.08);  --accent-tint2: rgba(176,70,79,0.16); }

[data-type="modern"] {
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --display-weight: 400;
}
[data-type="classic"] {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --display-weight: 300;
}
[data-type="sans"] {
  --font-display: 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;
  --display-weight: 500;
}

[data-theme="dark"] {
  --paper: #0E0E0E;
  --paper-2: #161614;
  --paper-3: #1B1B19;
  --paper-warm: #161614;
  --ink: #F6F2EB;
  --ink-soft: #EAE6DD;
  --ink-mid: #C8C2B6;
  --quill: #A9A398;
  --ash: #8C8479;
  --bone: #6B6459;
  --vellum: #4A453E;
  --rule: #25241F;
  --rule-strong: #2F2D27;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
section[id],
[id].section {
  scroll-margin-top: 104px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 999;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus-visible { top: 0; outline: 2px solid var(--accent); outline-offset: 2px; }
:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:where(a, button) {
  touch-action: manipulation;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-feature-settings: "ss01", "kern", "liga";
  font-size: 16px;
  line-height: 1.55;
  transition: background 0.4s ease, color 0.4s ease;
}
::selection { background: var(--ink); color: var(--paper); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Static fallback that makes React pages readable without JavaScript. */
.llm-fallback {
  max-width: 960px;
  margin: clamp(48px, 8vw, 96px) auto;
  padding: 0 24px clamp(48px, 8vw, 96px);
}
.llm-fallback section { margin-bottom: 32px; }
.llm-fallback h1,
.llm-fallback h2 {
  margin-bottom: 14px;
  line-height: 1.08;
}
.llm-fallback h1 { font-size: clamp(40px, 7vw, 84px); }
.llm-fallback h2 { font-size: clamp(28px, 4vw, 44px); }
.llm-fallback p,
.llm-fallback li,
.llm-fallback address {
  max-width: 760px;
  color: var(--quill);
  font-style: normal;
}
.llm-fallback p,
.llm-fallback ul,
.llm-fallback address { margin-bottom: 18px; }
.llm-fallback ul {
  padding-left: 22px;
  display: grid;
  gap: 8px;
}
.llm-fallback a {
  color: var(--accent-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Type primitives */
.display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: -0.022em;
  font-feature-settings: "kern", "liga", "dlig";
  color: var(--ink);
}
.tabular { font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ash);
}
.eyebrow-accent { color: var(--accent); }
.eyebrow-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: middle;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}

/* Paper grain (subtle) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
}
[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: 0.06; }

.shell { position: relative; z-index: 2; }
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.container-narrow {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================
   NAV — refined pill masthead
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 20px 24px;
  pointer-events: none;
  transition: padding 0.4s cubic-bezier(0.32,0.72,0,1);
}
.nav.scrolled { padding: 12px 24px; }
.nav-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 8px 8px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  pointer-events: all;
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid color-mix(in oklab, var(--rule-strong) 70%, transparent);
  border-radius: 100px;
  box-shadow:
    0 2px 20px rgba(10,10,10,0.06),
    inset 0 0.5px 0 rgba(255,255,255,0.45);
  transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
}
.nav.scrolled .nav-inner {
  background: color-mix(in oklab, var(--paper) 96%, transparent);
  box-shadow: 0 6px 30px rgba(10,10,10,0.10);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.022em;
  line-height: 1;
}
.brand-mark .logic { color: var(--ink); }
.brand-mark .shift { color: var(--accent); font-style: italic; font-weight: 400; }
.brand-mark .dot { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-links a {
  font-size: 13px;
  color: var(--quill);
  text-decoration: none;
  font-weight: 450;
  padding: 8px 14px;
  border-radius: 100px;
  transition: color 0.25s, background 0.25s;
}
.nav-links a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.nav-links a.active { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 9px 9px 9px 16px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: background 0.4s, transform 0.3s;
}
.nav-cta:hover { background: var(--accent); transform: scale(0.97); }
.nav-cta-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: grid; place-items: center;
  transition: transform 0.4s, background 0.4s;
}
.nav-cta:hover .nav-cta-icon { transform: translateX(2px) translateY(-1px); background: rgba(255,255,255,0.22); }

.mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  padding: 9px 14px;
  color: var(--ink);
  cursor: pointer;
}
.mobile-menu {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--paper) 97%, transparent);
  backdrop-filter: blur(32px);
  z-index: 49;
  padding: 120px 32px 60px;
  flex-direction: column;
  gap: 0;
  display: flex;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
}
.mobile-menu.open { opacity: 1; pointer-events: all; visibility: visible; transform: translateY(0); transition: opacity 0.35s, transform 0.35s, visibility 0s; }
.mobile-menu a {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 40px;
  color: var(--ink);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  letter-spacing: -0.02em;
}
.mobile-menu a:last-of-type { border: none; }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 22px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 100px;
  transition: background 0.4s, color 0.3s, border-color 0.3s, transform 0.25s, box-shadow 0.4s;
  position: relative;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 1px 3px rgba(10,10,10,0.15);
}
.btn-primary:hover {
  background: var(--accent);
  box-shadow: 0 6px 28px color-mix(in oklab, var(--accent) 40%, transparent);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 13px 13px 13px 21px;
}
.btn-ghost:hover { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 4%, transparent); }
.btn-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: grid; place-items: center;
  transition: transform 0.4s, background 0.4s;
  flex-shrink: 0;
}
.btn-ghost .btn-icon { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.btn:hover .btn-icon { transform: translateX(3px); }
.btn-primary:hover .btn-icon { background: rgba(255,255,255,0.22); }
.btn-link {
  background: transparent;
  color: var(--ink);
  padding: 14px 0;
  border-radius: 0;
}
.btn-link:hover { color: var(--accent); }
.btn-link::after {
  content: '→';
  margin-left: 8px;
  transition: transform 0.3s;
  display: inline-block;
}
.btn-link:hover::after { transform: translateX(4px); }

/* ============================================
   HERO — centered with floating chips
   ============================================ */
.hero {
  position: relative;
  padding: 160px 0 140px;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  min-height: 720px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: 0;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 70% 60%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%);
  filter: blur(30px);
  opacity: 0.7;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0 0;
  opacity: 0.025;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  backdrop-filter: blur(12px);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  margin-bottom: 28px;
}
.hero-eyebrow .avatars {
  display: inline-flex;
  margin-right: 4px;
}
.hero-eyebrow .av {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--accent);
  margin-left: -8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  color: var(--paper);
  display: grid; place-items: center;
  letter-spacing: 0;
  text-transform: none;
}
.hero-eyebrow .av:first-child { margin-left: 0; background: var(--ink); }
.hero-eyebrow .av:nth-child(2) { background: var(--accent-deep); }
.hero-eyebrow .rating { color: var(--accent); font-size: 11px; letter-spacing: 0.04em; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 1100px;
  margin: 0 auto;
  font-feature-settings: "kern", "liga", "dlig";
}
.hero h1 em { font-style: italic; font-weight: var(--display-weight); color: var(--accent); }

.hero-lede {
  margin: 28px auto 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--quill);
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.hero-trial {
  font-size: 13px;
  color: var(--ash);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-trial::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ============================================
   HERO REGION — hero + workflow card with shared floating chips
   ============================================ */
.hero-region {
  position: relative;
  overflow: visible;
}
.hero-region .hero {
  overflow: visible;
}

/* Workflow card sits right under the hero with shared chip overlap. */
.hero-workflow { position: relative; }
.hero-workflow-card {
  position: relative;
  background: var(--paper-3);
  border: 1px solid var(--rule-strong);
  border-radius: 22px;
  padding: 6px;
  box-shadow: 0 30px 80px -20px rgba(10,10,10,0.18), 0 6px 24px rgba(10,10,10,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  z-index: 1;
}
.hero-workflow-inner {
  background: var(--paper);
  border-radius: 18px;
  padding: 28px;
  border: 1px solid var(--rule);
}
.hero-workflow-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  gap: 18px;
}
.hero-workflow-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.022em;
}
.hero-workflow-title em {
  color: var(--accent);
  font-style: italic;
}

/* ============== Floating service chips ============== */
.hero-floats {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.hero-float {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in oklab, var(--paper-3) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  padding: 8px 16px 8px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 14px 36px rgba(10,10,10,0.12), 0 2px 6px rgba(10,10,10,0.04), inset 0 0.5px 0 rgba(255,255,255,0.6);
  white-space: nowrap;
  animation: floatChip 7s ease-in-out infinite;
  pointer-events: auto;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s, border-color 0.3s, padding 0.35s;
}
.hero-float .hero-float-arr {
  display: inline-grid;
  place-items: center;
  width: 0;
  height: 14px;
  overflow: hidden;
  opacity: 0;
  margin-left: 0;
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s, margin-left 0.35s;
  color: var(--accent);
}
.hero-float .hero-float-arr svg { width: 12px; height: 12px; }
.hero-float:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--accent);
  box-shadow: 0 22px 48px rgba(10,10,10,0.18), 0 4px 10px rgba(10,10,10,0.06), inset 0 0.5px 0 rgba(255,255,255,0.6);
  padding-right: 10px;
  z-index: 7;
}
.hero-float:hover .hero-float-arr {
  width: 14px;
  opacity: 1;
  margin-left: 4px;
}
.hero-float .ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-tint2);
  color: var(--accent-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hero-float .ic svg { width: 14px; height: 14px; }
.hero-float.solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.hero-float.solid .ic { background: rgba(255,255,255,0.13); color: var(--paper); }
.hero-float.solid:hover { border-color: var(--accent); }
.hero-float.solid .hero-float-arr { color: var(--accent-soft); }

/* Positions span the hero/workflow seam — each chip labels a discipline
   that the workflow diagram below actually contains. f4 and f5 deliberately
   overlap the workflow card's top edge to make the chips read as anchors
   pointing into the architecture beneath them. */
.hero-float.f1 { top: 220px; left:  3%;  animation-delay: -0s; }
.hero-float.f2 { top: 290px; right: 3%;  animation-delay: -1.4s; }
.hero-float.f3 { top: 540px; right: 4%;  animation-delay: -2.8s; }
.hero-float.f4 { top: 730px; left:  50%; animation-delay: -4.2s; }
.hero-float.f5 { top: 770px; left:  2.5%; animation-delay: -5.6s; }
.hero-float.f6 { top: 600px; left:  4%;  animation-delay: -3.5s; }

/* f4 is centered — preserve translateX(-50%) through hover and float anim */
.hero-float.f4 { animation-name: floatChipCentered; }
.hero-float.f4:hover { transform: translateX(-50%) translateY(-3px) scale(1.04); }

/* Below 1320px the title can't share the row with the chips → hide them rather than overlap. */
@media (max-width: 1320px) {
  .hero-float { display: none !important; }
}
@keyframes floatChip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes floatChipCentered {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-10px); }
}

/* Hero metric strip below */
.hero-strip {
  margin-top: 84px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hero-strip .cell {
  padding: 26px 24px;
  border-left: 1px solid var(--rule);
  text-align: left;
}
.hero-strip .cell:first-child { border-left: none; }
.hero-strip .v {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero-strip .v em { font-style: italic; color: var(--accent); font-weight: var(--display-weight); }
.hero-strip .l {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--quill);
  line-height: 1.5;
  max-width: 220px;
}

/* Variant: split hero (tweakable) */
[data-hero="split"] .hero-inner { text-align: left; max-width: 720px; }
[data-hero="split"] .hero h1 { margin-left: 0; }
[data-hero="split"] .hero-lede { margin-left: 0; }
[data-hero="split"] .hero-ctas { justify-content: flex-start; }
[data-hero="split"] .hero-float { display: none; }

[data-hero="ink"] .hero { background: var(--ink); }
[data-hero="ink"] .hero h1,
[data-hero="ink"] .hero h1 em { color: var(--paper); }
[data-hero="ink"] .hero h1 em { color: var(--accent-soft); }
[data-hero="ink"] .hero-lede { color: var(--vellum); }
[data-hero="ink"] .hero-bg::before { opacity: 0.4; }
[data-hero="ink"] .hero-bg::after { opacity: 0.08; background-image: linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px); }
[data-hero="ink"] .hero-eyebrow { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); color: var(--vellum); }
[data-hero="ink"] .hero-float { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--paper); backdrop-filter: blur(12px); }
[data-hero="ink"] .hero-float .ic { background: rgba(255,255,255,0.1); color: var(--paper); }
[data-hero="ink"] .hero-float.solid { background: var(--accent); border-color: var(--accent); color: var(--paper); }
[data-hero="ink"] .hero-strip { border-color: rgba(255,255,255,0.1); }
[data-hero="ink"] .hero-strip .cell { border-color: rgba(255,255,255,0.1); }
[data-hero="ink"] .hero-strip .v { color: var(--paper); }
[data-hero="ink"] .hero-strip .l { color: var(--vellum); }
[data-hero="ink"] .btn-primary { background: var(--paper); color: var(--ink); }
[data-hero="ink"] .btn-primary:hover { background: var(--accent); color: var(--paper); }
[data-hero="ink"] .btn-ghost { color: var(--paper); border-color: rgba(255,255,255,0.18); }
[data-hero="ink"] .btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--paper); }

/* ============================================
   Hero product visual (mockup pad)
   ============================================ */
.hero-visual {
  position: relative;
  z-index: 2;
  margin: 72px auto 0;
  max-width: 1100px;
  background: var(--paper-3);
  border: 1px solid var(--rule-strong);
  border-radius: 18px;
  padding: 6px;
  box-shadow:
    0 30px 80px -20px rgba(10,10,10,0.18),
    0 6px 24px rgba(10,10,10,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.hero-visual-inner {
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.mock-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); }
.mock-bar .url {
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--quill);
  letter-spacing: 0.01em;
}
.mock-bar .url-host { color: var(--ink); font-weight: 500; }

/* ============================================
   Generic Section
   ============================================ */
.section {
  padding: 120px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.section.alt { background: var(--paper-2); }
.section.ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink-soft);
}
.section.ink h2 { color: var(--paper); }
.section.ink .eyebrow { color: var(--accent-soft); }
.section.ink .section-lede { color: var(--vellum); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 72px;
}
.section-num {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.section-num .rule { display: inline-block; width: 36px; height: 1px; background: var(--accent); }
.section-num .muted { color: var(--ash); }
.section h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.section h2 em { font-style: italic; color: var(--accent); }
.section-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--quill);
  max-width: 460px;
  justify-self: end;
  text-wrap: pretty;
}
.section-lede em { font-style: italic; color: var(--accent); font-weight: 500; }

/* ============================================
   Service / capability cards
   ============================================ */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.lcard {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 32px;
  position: relative;
  transition: border-color 0.35s, transform 0.4s, box-shadow 0.4s;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.lcard:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 48px -20px rgba(10,10,10,0.12);
}
.lcard .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.lcard .ic-box {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
  transition: background 0.4s;
}
.lcard:hover .ic-box { background: var(--accent); color: var(--paper); }
.lcard .ic-box svg { width: 22px; height: 22px; }
.lcard .roman {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ash);
  font-weight: 400;
}
.lcard h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 12px;
}
.lcard h3 em { font-style: italic; color: var(--accent); }
.lcard p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--quill);
  flex: 1;
}
.lcard .more {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.01em;
}
.lcard .more::after {
  content: '→';
  transition: transform 0.3s;
}
.lcard:hover .more::after { transform: translateX(4px); color: var(--accent); }

/* Variant: outline (minimal) */
[data-cards="outline"] .lcard {
  background: transparent;
  border: 1px solid var(--rule);
}
[data-cards="outline"] .lcard:hover { background: var(--paper-3); }

/* Variant: ink (dark cards) */
[data-cards="ink"] .lcard {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink-soft);
}
[data-cards="ink"] .lcard h3 { color: var(--paper); }
[data-cards="ink"] .lcard p { color: var(--vellum); }
[data-cards="ink"] .lcard .more { color: var(--paper); border-color: rgba(255,255,255,0.1); }
[data-cards="ink"] .lcard .ic-box { background: rgba(255,255,255,0.08); color: var(--accent-soft); }
[data-cards="ink"] .lcard .roman { color: var(--vellum); }
[data-cards="ink"] .lcard:hover { transform: translateY(-3px); border-color: var(--accent); }

/* ============================================
   Pricing / Programme
   ============================================ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tier {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.35s, transform 0.3s, box-shadow 0.4s;
}
.tier:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 24px 60px -24px rgba(10,10,10,0.15); }
.tier.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tier.featured:hover { border-color: var(--accent); }
.tier .badge {
  position: absolute;
  top: -10px; right: 24px;
  background: var(--accent);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
}
.tier .meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.tier.featured .meta { color: var(--accent-soft); }
.tier .name {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 36px;
  letter-spacing: -0.026em;
  color: var(--ink);
  line-height: 1;
}
.tier.featured .name { color: var(--paper); }
.tier .promise {
  margin-top: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--quill);
  line-height: 1.35;
}
.tier.featured .promise { color: var(--vellum); }
.tier .dur {
  margin-top: 28px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}
.tier.featured .dur { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--paper); }
.tier .dur .k { color: var(--ash); }
.tier.featured .dur .k { color: var(--vellum); }
.tier ul {
  list-style: none;
  margin: 24px 0;
  display: grid;
  gap: 11px;
}
.tier ul li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-mid);
}
.tier.featured ul li { color: var(--paper); }
.tier ul li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; color: var(--accent); }
.tier .price {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.tier.featured .price { border-color: rgba(255,255,255,0.12); }
.tier .price .lab {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ash);
  font-weight: 500;
}
.tier.featured .price .lab { color: var(--vellum); }
.tier .price .row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
}
.tier .price .cur {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--accent);
}
.tier .price .val {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 46px;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.tier.featured .price .val { color: var(--paper); }
.tier .price .sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ash);
}
.tier.featured .price .sub { color: var(--vellum); }
.tier .cta {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 14px 22px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.35s, transform 0.3s;
}
.tier .cta:hover { background: var(--accent); }
.tier.featured .cta { background: var(--paper); color: var(--ink); }
.tier.featured .cta:hover { background: var(--accent); color: var(--paper); }
.tier .cta .ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  display: grid; place-items: center;
  transition: transform 0.3s;
}
.tier.featured .cta .ic { background: rgba(10,10,10,0.08); }
.tier .cta:hover .ic { transform: translateX(3px); }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 100px 0 40px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}
.footer h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 20px;
}
.footer ul { list-style: none; display: grid; gap: 12px; }
.footer ul li a {
  font-size: 14px;
  color: var(--vellum);
  text-decoration: none;
  transition: color 0.25s;
}
.footer ul li a:hover { color: var(--paper); }
.footer-brand .brand-mark { color: var(--paper); font-size: 28px; }
.footer-brand .brand-mark .logic { color: var(--paper); }
.footer-brand p {
  margin-top: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--vellum);
  max-width: 320px;
}
.footer-mark {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
  color: var(--bone);
}
.footer-mark .legal {
  display: flex;
  gap: 22px;
}
.footer-legal-stack {
  display: grid;
  gap: 6px;
  line-height: 1.45;
}
.footer-mark .legal a { color: var(--bone); text-decoration: none; transition: color 0.25s; }
.footer-mark .legal a:hover { color: var(--paper); }
.footer-giant {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(80px, 18vw, 240px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--paper);
  text-align: center;
  padding: 40px 0 60px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 80px;
  opacity: 0.92;
}
.footer-giant em { font-style: italic; color: var(--accent-soft); font-weight: var(--display-weight); }

/* ============================================
   SubHero (inner pages)
   ============================================ */
.subhero {
  position: relative;
  padding: 180px 0 80px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.subhero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.subhero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 80% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  filter: blur(20px);
}
.subhero-inner { position: relative; z-index: 2; }
.subhero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}
.subhero-meta .frame { color: var(--accent); }
.subhero-meta .rule { width: 24px; height: 1px; background: var(--rule-strong); }
.subhero h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 1100px;
}
.subhero h1 em { font-style: italic; color: var(--accent); font-weight: var(--display-weight); }
.subhero-aside {
  margin-top: 36px;
  max-width: 520px;
  font-size: 17px;
  color: var(--quill);
  line-height: 1.6;
}
.subhero-aside em { font-style: italic; color: var(--accent); font-weight: 500; }

/* ============================================
   AI FLOW diagram (Leistungen)
   ============================================ */
.flow-board {
  margin-top: 64px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 60px;
  align-items: stretch;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 40px;
  background-image:
    radial-gradient(circle, var(--rule-strong) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0;
}
.flow-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.flow-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(10,10,10,0.04);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.flow-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(10,10,10,0.10);
}
.flow-card .ctitle {
  padding: 10px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.flow-card .crow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--rule);
}
.flow-card .crow:last-child { border-bottom: none; }
.flow-card .crow .ic {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.flow-card .crow .ic svg { width: 16px; height: 16px; }
.flow-card .crow .nm {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.flow-card .ctags {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.flow-card .ctags .tg {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}
.flow-card .ctags .add {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--quill);
  padding: 5px 10px;
  border: 1px dashed var(--rule-strong);
  border-radius: 100px;
}

.flow-center {
  align-self: center;
  background: var(--ink);
  border-radius: 18px;
  padding: 22px;
  position: relative;
  z-index: 3;
  box-shadow: 0 24px 60px -16px rgba(10,10,10,0.5);
  color: var(--paper);
}
.flow-center .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.flow-center .head .ttl {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  color: var(--paper);
  letter-spacing: -0.02em;
}
.flow-center .head .btn-add {
  background: var(--accent);
  color: var(--paper);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.flow-center ul {
  list-style: none;
  display: grid;
  gap: 10px;
}
.flow-center ul li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--paper);
  transition: background 0.25s;
  cursor: default;
}
.flow-center ul li:hover { background: rgba(255,255,255,0.08); }
.flow-center ul li .ic {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.flow-center ul li .ic svg { width: 14px; height: 14px; }
.flow-center ul li .ok {
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
}
.flow-center ul li .ok svg { width: 11px; height: 11px; }
.flow-center ul li .step {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-soft);
  margin-right: 4px;
}

.flow-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ============================================
   Form / Contact
   ============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.contact-form {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 40px;
}
.contact-form .fgroup { margin-bottom: 20px; }
.contact-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  margin-bottom: 10px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.contact-form textarea {
  min-height: 110px;
  resize: vertical;
  font-family: var(--font-body);
}
.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form .submit {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}
.contact-form .ok {
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  padding: 16px;
  border-radius: 12px;
  font-size: 14px;
}

.contact-meta { display: grid; gap: 28px; }
.contact-meta .m {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.contact-meta .m:first-child { border-top: none; padding-top: 0; }
.contact-meta .m .lab {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 10px;
}
.contact-meta .m .v {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.contact-meta .m .v a { text-decoration: none; color: inherit; transition: color 0.25s; overflow-wrap: anywhere; }
.contact-meta .m .v a:hover { color: var(--accent); }
.contact-meta .m .d {
  margin-top: 8px;
  font-size: 14px;
  color: var(--quill);
  line-height: 1.55;
}

/* ============================================
   Contact — elevated components
   ============================================ */

/* Gold accent bar at top of form card — sticky on desktop */
.contact-form {
  border-top: 2px solid var(--accent);
  position: sticky;
  top: 88px;        /* clears the fixed nav (~80px) + 8px breathing room */
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
  transition: box-shadow 0.3s ease;
}
.contact-form:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent),
    0 8px 32px rgba(10,10,10,0.10);
}

/* Monospace eyebrow inside form */
.cf-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cf-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Character counter / helper below textarea */
.cf-helper {
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
  color: var(--bone);
  margin-top: 5px;
  font-family: var(--font-mono);
}

/* Process steps — editorial large number style */
.cstep {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.cstep-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 36px;
  font-style: italic;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.04em;
  padding-top: 1px;
  opacity: 0.7;
}
.cstep-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.cstep-desc {
  font-size: 13px;
  color: var(--quill);
  line-height: 1.55;
}

/* NDA card — dark ink treatment */
.cnda {
  background: var(--ink);
  border-radius: 18px;
  padding: 26px;
  display: grid;
  gap: 16px;
}
[data-theme="dark"] .cnda { background: var(--paper-2); border: 1px solid var(--rule-strong); }
.cnda-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cnda-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(176,136,84,0.18);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent-soft);
  margin-top: 1px;
}
.cnda-icon svg { width: 16px; height: 16px; }
.cnda-text {}
.cnda-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 600;
  margin-bottom: 5px;
}
.cnda-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1.15;
}
[data-theme="dark"] .cnda-title { color: var(--ink); }
.cnda-desc {
  font-size: 13px;
  color: var(--vellum);
  line-height: 1.6;
}
[data-theme="dark"] .cnda-desc { color: var(--quill); }
.cnda-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  white-space: nowrap;
  letter-spacing: 0.005em;
  align-self: start;
}
.cnda-btn:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent) 40%, transparent);
}
.cnda-btn svg { width: 14px; height: 14px; }

/* Success state */
.contact-ok-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact-ok-headline {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--ink);
}
.contact-ok-headline em { font-style: italic; color: var(--accent); }
.contact-ok-sub {
  font-size: 14px;
  color: var(--quill);
  line-height: 1.6;
  margin-top: 8px;
}
.contact-ok-steps { border-top: 1px solid var(--rule); }
.contact-ok-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: var(--accent-tint);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
  margin-bottom: 16px;
}
.contact-ok-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Validation error */
.cf-error {
  font-size: 12px;
  color: #B0464F;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -10px;
  margin-bottom: 4px;
}
.cf-error::before {
  content: '!';
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #B0464F;
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .cstep-num { font-size: 28px; }
  /* Sticky sinnlos im gestapelten Layout */
  .contact-form {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* ============================================
   Legal page
   ============================================ */
.legal-page {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  padding: 120px 0 80px;
}
.legal-page .brand {
  margin-bottom: 56px;
}
.legal-shell {
  max-width: 920px;
}
.legal-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(44px, 8vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: 34px;
}
.legal-page h1 em {
  font-style: italic;
  color: var(--accent);
}
.legal-card {
  border-top: 1px solid var(--rule);
  padding: 28px 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
}
.legal-card h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.legal-card p,
.legal-card li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--quill);
}
.legal-card strong {
  color: var(--ink);
  font-weight: 500;
}
.legal-card a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.legal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}
@media (max-width: 720px) {
  .legal-page { padding: 100px 0 64px; }
  .legal-card { grid-template-columns: 1fr; gap: 12px; }
  .legal-card a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 9px;
    margin-block: -9px;
    overflow-wrap: anywhere;
  }
  .legal-actions .btn {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }
}

/* ============================================
   Founders
   ============================================ */
.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.founder {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: center;
}
.founder .ph {
  width: 110px;
  height: 130px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--rule);
  position: relative;
}
.founder .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); }
.founder .role {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 6px;
}
.founder .nm {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 10px;
}
.founder .bio {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--quill);
}

/* ============================================
   CTA strip
   ============================================ */
.cta-strip {
  background: var(--ink);
  color: var(--paper);
  padding: 100px 0;
  border-radius: 24px;
  margin: 0 0 0 0;
  position: relative;
  overflow: hidden;
}
.cta-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 30%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.cta-strip .cta-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
}
.cta-strip h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--paper);
}
.cta-strip h2 em { font-style: italic; color: var(--accent-soft); }
.cta-strip p {
  margin-top: 22px;
  font-size: 16px;
  color: var(--vellum);
  max-width: 480px;
  line-height: 1.55;
}
.cta-strip .btn-primary { background: var(--paper); color: var(--ink); }
.cta-strip .btn-primary:hover { background: var(--accent); color: var(--paper); }
.cta-strip .btn-primary .btn-icon { background: rgba(10,10,10,0.08); }

/* ============================================
   Sticky CTA pill (bottom-right)
   ============================================ */
.sticky-cta {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 40;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px 12px 18px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(10,10,10,0.2);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s, background 0.4s;
}
.sticky-cta.show { opacity: 1; transform: translateY(0); pointer-events: all; }
.sticky-cta:hover { background: var(--accent); }
.sticky-cta .ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: grid; place-items: center;
}

/* ============================================
   Reveal animations
   ============================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .section-lede { justify-self: start; }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: 1fr; }
  .timeline-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .founders { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .flow-board { grid-template-columns: 1fr; gap: 24px; }
  .flow-svg { display: none; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-strip .cell:nth-child(3) { border-left: none; border-top: 1px solid var(--rule); }
  .hero-strip .cell:nth-child(4) { border-top: 1px solid var(--rule); }
  .cta-strip .cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-float { display: none; }
}
@media (max-width: 900px) {
  .nav-links,
  .nav-cta { display: none; }
  .nav-inner { gap: 12px; }
  .mobile-toggle { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
}
@media (max-width: 720px) {
  .container { padding: 0 24px; }
  .nav { padding: 16px 16px; }
  .nav.scrolled { padding: 10px 16px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-inner { gap: 12px; padding: 8px 8px 8px 18px; }
  .mobile-toggle { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .hero { padding: 130px 0 60px; }
  .hero h1 { font-size: clamp(36px, 9vw, 52px); }
  .section { padding: 80px 0; }
  .section h2 { font-size: clamp(32px, 8vw, 44px); }
  .subhero { padding: 130px 0 60px; }
  .subhero h1 { font-size: clamp(36px, 9vw, 56px); }
  .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; }
  .hero-strip { grid-template-columns: 1fr; }
  .hero-strip .cell { border-left: none !important; border-top: 1px solid var(--rule); }
  .hero-strip .cell:first-child { border-top: none; }
  .footer-top { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
  .tier { padding: 28px 22px; }
  .founder { grid-template-columns: 80px 1fr; gap: 16px; padding: 22px; }
  .founder .ph { width: 80px; height: 100px; }
  .flow-board { padding: 18px; }
  .sticky-cta { display: none; }
}

@media (max-width: 380px) {
  .container { padding: 0 20px; }
  .nav { padding-inline: 12px; }
  .nav.scrolled { padding-inline: 12px; }
  .nav-inner { padding-left: 16px; }
  .brand-mark { font-size: 20px; }
  .mobile-toggle { padding: 8px 12px; }
}


/* ============================================
   v2 — Premium visuals & UI enhancements
   ============================================ */

/* Scroll progress (top-of-page) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
  transition: width 0.08s linear;
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 50%, transparent);
}

/* Animated number — used for hero strip counters */
.anum {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ============================================
   AI ADOPTION STATS (home — donut + line + risks)
   ============================================ */
.adopt {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  overflow: hidden;
}
.adopt > div {
  padding: 36px 32px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.adopt > div:last-child { border-right: none; }
.adopt .col-head {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border-bottom: 1px solid var(--rule);
}
.adopt .col-head .dot {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
}
.adopt-donut-wrap {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 22px;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--rule);
}
.adopt-donut-wrap:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.adopt-donut {
  position: relative;
  width: 116px; height: 116px;
  flex-shrink: 0;
}
.adopt-donut svg { display: block; width: 100%; height: 100%; }
.adopt-donut .pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
  pointer-events: none;
}
.adopt-donut .pct em { color: var(--accent); font-style: italic; font-weight: 500; }
.adopt-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.adopt-legend {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--quill);
}
.adopt-legend .row { display: flex; align-items: center; gap: 8px; }
.adopt-legend .sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.adopt-line {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px;
  height: 200px;
  position: relative;
}
.adopt-line svg { width: 100%; height: 100%; display: block; }
.adopt-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-mid);
}
.adopt-note em { font-style: normal; color: var(--accent); font-weight: 500; }

.adopt-risks { display: grid; gap: 16px; }
.adopt-risk {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--rule);
}
.adopt-risk:last-child { border-bottom: none; padding-bottom: 0; }
.adopt-risk .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
}
.adopt-risk .ic svg { width: 18px; height: 18px; }
.adopt-risk .t {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}
.adopt-risk .d {
  font-size: 12.5px;
  color: var(--quill);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .adopt { grid-template-columns: 1fr; }
  .adopt > div { border-right: none; border-bottom: 1px solid var(--rule); }
  .adopt > div:last-child { border-bottom: none; }
}

/* ============================================
   QUALITY LAYERS (leistungen) — vertical stack
   ============================================ */
.qlayers {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.qlayers-stage {
  position: relative;
  display: grid;
  gap: 10px;
  padding-top: 12px;
}
.qlayers-stage .in {
  align-self: start;
  justify-self: center;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 2;
}
.qlayers-stage .in::after {
  content: '';
  position: absolute;
  bottom: -18px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 18px;
  background: var(--accent);
}
.qlayer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  position: relative;
  transition: transform 0.35s, border-color 0.35s, background 0.35s;
  cursor: pointer;
}
.qlayer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qlayer:hover { border-color: var(--accent); transform: translateX(-4px); background: var(--paper-warm); }
.qlayer.on {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateX(-4px);
  box-shadow: 0 6px 20px rgba(10,10,10,0.05);
}
.qlayer.on .num { color: var(--accent-deep); }
.qlayer.on .ic { background: var(--accent); color: var(--paper); }
.qlayer-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.qlayer-chev {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--ash);
  display: grid; place-items: center;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s, background 0.3s, color 0.3s;
}
.qlayer-chev svg { width: 11px; height: 11px; }
.qlayer:hover .qlayer-chev, .qlayer.on .qlayer-chev {
  opacity: 1;
  transform: translateX(0);
  background: var(--accent);
  color: var(--paper);
}
.qlayers-hint {
  position: absolute;
  top: -18px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  background: var(--paper);
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--rule);
}
.qlayers-hint-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: hintPulse 1.8s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.qlayers-copy {
  animation: qfade 0.35s cubic-bezier(0.16,1,0.3,1);
}
.qlayers-step {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
@keyframes qfade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.qlayers-pager {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 8px;
}
.qlayers-pager .qpg {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--paper);
  color: var(--ash);
  border: 1px solid var(--rule);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.qlayers-pager .qpg.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qlayer .lab {
  display: flex; align-items: center; gap: 14px;
}
.qlayer .num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  letter-spacing: 0.1em;
  font-weight: 500;
}
.qlayer .nm {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--display-weight);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.qlayer .ic {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
}
.qlayer .ic svg { width: 16px; height: 16px; }
.qlayers-stage .out {
  justify-self: center;
  align-self: end;
  margin-top: 10px;
  padding: 14px 22px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent) 40%, transparent);
}
.qlayers-stage .out::before {
  content: '';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 18px;
  background: var(--accent);
}
.qlayers-copy h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin-bottom: 16px;
}
.qlayers-copy h3 em { font-style: italic; color: var(--accent); }
.qlayers-copy p { font-size: 15px; line-height: 1.65; color: var(--quill); }

@media (max-width: 1024px) {
  .qlayers { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
}

/* ============================================
   QUALITY FRAMEWORK (Gates v2) — static, no hover
   ============================================ */
.qframe {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 36px;
}
.qframe-rail {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.qframe-rail-in,
.qframe-rail-out {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
  flex-shrink: 0;
}
.qframe-rail-in {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--quill);
}
.qframe-rail-out {
  background: var(--ink);
  color: var(--paper);
}
.qframe-rail-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vellum);
}
.qframe-rail-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
}
.qframe-rail-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rule-strong), var(--accent) 50%, var(--ink));
  position: relative;
}
.qframe-rail-line::after {
  content: '';
  position: absolute;
  inset: -2px 0 -2px 0;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 70%);
  pointer-events: none;
}
.qframe-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
}
.qframe-grid::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-tint2) 12%, var(--accent-tint2) 88%, transparent);
  z-index: 0;
}
.qframe-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  z-index: 1;
}
.qframe-card:hover {
  border-color: color-mix(in oklab, var(--accent) 60%, var(--rule));
  box-shadow: 0 14px 36px -16px rgba(10,10,10,0.12);
  transform: translateY(-2px);
}
.qframe-card-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
  position: relative;
  z-index: 1;
}
.qframe-card-ic::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  background: var(--paper);
  z-index: -1;
}
.qframe-card-ic svg { width: 18px; height: 18px; }
.qframe-card h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 4px 0 0;
}
.qframe-card-lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--quill);
  margin: 0;
}
.qframe-card-bullets {
  list-style: none;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 8px;
}
.qframe-card-bullets li {
  display: grid;
  gap: 2px;
  font-size: 12px;
  line-height: 1.45;
}
.qframe-card-bullets li .k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.qframe-card-bullets li .v {
  color: var(--ink);
}

@media (max-width: 1024px) {
  .qframe { padding: 24px; }
  .qframe-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .qframe-grid::before { display: none; }
  .qframe-rail { flex-wrap: wrap; }
  .qframe-rail-line { min-width: 60px; }
}
@media (max-width: 720px) {
  .qframe-grid { grid-template-columns: 1fr; }
}

/* ============================================
   AUTONOMY LEVELS (4 horizontal steps · HITL)
   ============================================ */
.autonomy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper-3);
}
.auto-step {
  padding: 32px 24px;
  border-right: 1px solid var(--rule);
  position: relative;
  background: var(--paper-3);
  transition: background 0.35s;
  display: flex;
  flex-direction: column;
}
.auto-step:last-child { border-right: none; }
.auto-step:hover { background: var(--paper-warm); }
.auto-step.gold { background: var(--ink); color: var(--paper); }
.auto-step.gold:hover { background: var(--ink-soft); }
.auto-step .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.auto-step .step-n {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}
.auto-step.gold .step-n { background: var(--accent-soft); color: var(--ink); }
.auto-step .step-lab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ash);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.auto-step.gold .step-lab { color: var(--vellum); }
.auto-step h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: 10px;
  color: var(--ink);
}
.auto-step.gold h4 { color: var(--paper); }
.auto-step h4 em { font-style: italic; color: var(--accent); }
.auto-step.gold h4 em { color: var(--accent-soft); }
.auto-step .who {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--rule);
}
.auto-step.gold .who {
  color: var(--accent-soft);
  border-color: rgba(255,255,255,0.12);
}
.auto-step .d { font-size: 13px; line-height: 1.55; color: var(--quill); margin-bottom: 20px; flex: 1; }
.auto-step.gold .d { color: var(--vellum); }

.auto-step .nodes {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 6px;
  align-items: center;
  margin-bottom: 18px;
}
.auto-step .np {
  padding: 9px 8px;
  border-radius: 9px;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-align: center;
  display: grid;
  gap: 2px;
}
.auto-step.gold .np {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.auto-step .np.ai {
  background: var(--accent-tint);
  border-color: var(--accent-tint2);
}
.auto-step.gold .np.ai {
  background: color-mix(in oklab, var(--accent) 28%, transparent);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}
.auto-step .np.human {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.auto-step.gold .np.human {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.auto-step .np.human-soft {
  background: var(--paper);
  border: 1px dashed var(--ink);
  color: var(--ink);
}
.auto-step.gold .np.human-soft {
  background: rgba(255,255,255,0.06);
  border: 1px dashed var(--paper);
  color: var(--paper);
}
.auto-step .np-l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}
.auto-step .np.ai .np-l { color: var(--accent-deep); opacity: 1; }
.auto-step.gold .np.ai .np-l { color: var(--paper); opacity: 0.9; }
.auto-step .np-t {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.auto-step .nodes .ar {
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}
.auto-step.gold .nodes .ar { color: var(--accent-soft); }

.auto-step .footrow {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auto-step.gold .footrow { border-color: rgba(255,255,255,0.1); }
.auto-step .footrow .frk {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  margin-bottom: 3px;
}
.auto-step.gold .footrow .frk { color: var(--vellum); }
.auto-step .footrow .frv {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.auto-step.gold .footrow .frv { color: var(--paper); }

.autonomy-axis {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ash);
  text-transform: uppercase;
  padding: 0 8px;
}
.autonomy-axis .l { display: flex; align-items: center; gap: 8px; }
.autonomy-axis .l::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
}
.autonomy-axis .r { display: flex; align-items: center; gap: 8px; }
.autonomy-axis .r::after {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
}

@media (max-width: 1024px) {
  .autonomy { grid-template-columns: repeat(2, 1fr); }
  .auto-step { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .auto-step:nth-child(2n) { border-right: none; }
}
@media (max-width: 720px) {
  .autonomy { grid-template-columns: 1fr; }
  .auto-step { border-right: none; }
  .auto-step .nodes { grid-template-columns: 1fr auto 1fr auto 1fr; }
}

/* ============================================
   S-CURVE MATURITY (kompetenz)
   ============================================ */
.scurve {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.scurve-grid {
  position: relative;
  height: 320px;
  margin: 32px 0 16px;
}
.scurve-svg { width: 100%; height: 100%; display: block; }
.scurve-label {
  position: absolute;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 18px;
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.2;
}
.scurve-label .sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ash);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 4px;
}
.scurve-label.l1 { top: 18%; left: 5%; }
.scurve-label.l2 { top: 14%; left: 38%; }
.scurve-label.l3 { top: 10%; left: 72%; color: var(--accent); }
.scurve-marker {
  position: absolute;
  width: 18px; height: 18px;
  background: var(--accent);
  transform: translate(-50%,-50%) rotate(45deg);
  box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 18%, transparent);
}
.scurve-marker.market {
  background: var(--vellum);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--vellum) 22%, transparent);
}
.scurve-marker .badge {
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.scurve-marker.market .badge { color: var(--ash); font-style: italic; }
.scurve-axis-y {
  position: absolute;
  /* Anchored to the y-axis arrow head (SVG tip at x=40 → 4% of grid width,
     y=15 → 15px below grid top). top:-7px puts the label's bottom edge
     ~22px above the arrow tip; translateX(-50%) centers the whole
     "↑ Autonomy" group horizontally on the arrow head's midpoint. */
  top: -7px; left: 4%;
  transform: translate(-50%, -100%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  line-height: 1;
  color: var(--ash);
  white-space: nowrap;
}
.scurve-axis-x {
  position: absolute;
  bottom: 8px; right: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--ash);
}

/* SCurve v2 — interactive stages */
.scurve-band {
  transition: opacity 0.35s ease;
}
.scurve-active-0 .scurve-band.b0 { opacity: 0.08; }
.scurve-active-1 .scurve-band.b1 { opacity: 0.10; }
.scurve-active-2 .scurve-band.b2 { opacity: 0.12; }
.scurve-stage {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 3;
}
.scurve-stage-dot {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 5px var(--paper-3), 0 4px 14px color-mix(in oklab, var(--accent) 25%, transparent);
  margin: 0 auto;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.scurve-stage.on .scurve-stage-dot {
  background: var(--accent);
  transform: scale(1.18);
  box-shadow: 0 0 0 6px var(--paper-3), 0 6px 22px color-mix(in oklab, var(--accent) 45%, transparent);
}
.scurve-stage.accent .scurve-stage-dot {
  background: var(--accent);
  border-color: var(--accent-deep);
}
.scurve-stage-pill {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  box-shadow: 0 6px 14px rgba(10,10,10,0.08);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.scurve-stage-pill .r {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}
.scurve-stage-pill .n {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: var(--display-weight);
}
.scurve-stage.on .scurve-stage-pill {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Markt heute marker — distinct from active stages */
.scurve-market {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.scurve-market-dot {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--vellum);
  border: 2px solid var(--ash);
  box-shadow: 0 0 0 5px var(--paper-3);
  margin: 0 auto;
}
.scurve-market-l {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
}
.scurve-market-l .r {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
}
.scurve-market-l .n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* LogicShift overlay on Stufe III stage */
.scurve-logicshift {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 100px;
  white-space: nowrap;
  box-shadow:
    0 12px 30px -10px color-mix(in oklab, var(--accent) 35%, rgba(10,10,10,0.25)),
    0 4px 10px rgba(10,10,10,0.12);
  z-index: 4;
}
.scurve-logicshift::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--ink);
}
.scurve-logicshift-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: 4px;
  flex-shrink: 0;
}
.scurve-logicshift-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.scurve-logicshift-l {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.scurve-logicshift-l .r {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 600;
}
.scurve-logicshift-l .n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--paper);
  letter-spacing: -0.005em;
}
.scurve-stage.has-logicshift .scurve-stage-pill { display: none; }

/* Stage cards below — clickable to focus a region */
.scurve-stages {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.scurve-stage-card {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px 22px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.scurve-stage-card:hover {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--rule));
  transform: translateY(-2px);
}
.scurve-stage-card.on {
  border-color: var(--accent);
  box-shadow: 0 16px 36px -20px color-mix(in oklab, var(--accent) 30%, rgba(10,10,10,0.12));
}
.scurve-stage-card.accent.on {
  background: var(--ink);
  color: var(--paper);
}
.scurve-stage-card header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.scurve-card-ic {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.scurve-card-ic svg { width: 18px; height: 18px; }
.scurve-stage-card.accent.on .scurve-card-ic {
  background: var(--accent);
  color: var(--paper);
}
.scurve-stage-card header .r {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 3px;
}
.scurve-stage-card.accent.on header .r { color: var(--accent-soft); }
.scurve-stage-card h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.scurve-stage-card.accent.on h4 { color: var(--paper); }
.scurve-card-hitl {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-tint);
  border-radius: 100px;
  font-weight: 600;
}
.scurve-stage-card.accent.on .scurve-card-hitl {
  background: color-mix(in oklab, var(--accent) 35%, transparent);
  color: var(--paper);
}
.scurve-stage-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--quill);
  margin: 0;
}
.scurve-stage-card.accent.on p { color: var(--vellum); }

@media (max-width: 1024px) {
  .scurve-stages { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .scurve {
    padding: 28px 20px 26px;
    border-radius: 18px;
  }
  .scurve-grid {
    height: 280px;
    margin: 28px 0 14px;
  }
  .scurve-axis-y,
  .scurve-axis-x {
    font-size: 11px;
  }
  .scurve-stage-pill {
    top: -38px;
    padding: 5px 10px;
  }
  .scurve-stage-pill .n {
    font-size: 12px;
  }
  .scurve-logicshift {
    left: auto;
    right: -10px;
    transform: none;
    gap: 7px;
    padding: 7px 10px 7px 7px;
  }
  .scurve-logicshift::after {
    left: auto;
    right: 14px;
    transform: rotate(45deg);
  }
  .scurve-logicshift-mark {
    width: 22px;
    height: 22px;
    padding: 3px;
  }
  .scurve-logicshift-l .r {
    font-size: 8px;
    letter-spacing: 0.12em;
  }
  .scurve-logicshift-l .n {
    font-size: 12px;
  }
  .scurve-market-l .r {
    font-size: 8px;
    letter-spacing: 0.1em;
  }
}

/* ============================================
   HALLUCINATION CAUSES grid (kompetenz)
   ============================================ */
.hallu {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
}
.hallu-example {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.hallu-msg {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 18px 18px 56px;
  margin-bottom: 12px;
  position: relative;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mid);
}
.hallu-msg::before {
  content: '';
  position: absolute;
  left: 16px; top: 18px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--vellum);
}
.hallu-msg.user::before { background: var(--ash); }
.hallu-msg.bot::before { background: var(--accent); }
.hallu-msg .ann {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--accent-deep);
  font-style: italic;
  padding: 4px 10px;
  background: var(--accent-tint);
  border-radius: 100px;
}
.hallu-msg .status {
  position: absolute;
  top: 14px; right: 14px;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.hallu-msg .status.x { background: #b54a3a; color: var(--paper); }
.hallu-msg .status.ok { background: #2f7b5a; color: var(--paper); }
.hallu-msg .status svg { width: 12px; height: 12px; }
.hallu-callout {
  margin-top: auto;
  padding: 18px;
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--accent-deep);
  letter-spacing: -0.005em;
}

.hallu-causes {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px;
}
.hallu-causes h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--display-weight);
  letter-spacing: -0.022em;
  margin-bottom: 20px;
  color: var(--ink);
}
.hallu-causes h4 em { font-style: italic; color: var(--accent); }
.hallu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.hallu-cell {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.hallu-cell:hover {
  border-color: var(--accent);
  background: var(--paper-warm);
  transform: translateY(-2px);
}
.hallu-cell .ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
}
.hallu-cell .ic svg { width: 16px; height: 16px; }
.hallu-cell .nm {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .hallu { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hallu-grid { grid-template-columns: 1fr; }
}

/* ============================================
   SUCCESS FACTORS — chevron chain (programme)
   ============================================ */
.chev-chain {
  display: grid;
  gap: 18px;
}
.chev {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: center;
  padding: 26px 32px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 14px;
  position: relative;
  transition: transform 0.35s, border-color 0.35s, background 0.35s;
}
.chev::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--accent);
  opacity: 0.6;
}
.chev:last-child::after { display: none; }
.chev:hover { transform: translateX(4px); border-color: var(--accent); background: var(--paper-warm); }
.chev .ic {
  width: 60px; height: 60px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
}
.chev .ic svg { width: 28px; height: 28px; }
.chev .body { display: grid; gap: 6px; }
.chev .n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.chev .t {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--display-weight);
  letter-spacing: -0.022em;
  color: var(--ink);
  line-height: 1.15;
}
.chev .t em { font-style: italic; color: var(--accent); }
.chev .d {
  font-size: 14px;
  color: var(--quill);
  line-height: 1.55;
}

@media (max-width: 560px) {
  .chev {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 18px;
  }
  .chev .ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .chev .ic svg {
    width: 22px;
    height: 22px;
  }
  .chev .body {
    min-width: 0;
  }
  .chev .t {
    font-size: 20px;
  }
}

/* ============================================
   CAPABILITY VENN (3 circles)
   ============================================ */
.venn-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 40px;
}
.venn {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
}
.venn-circle {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  transition: background 0.35s;
}
.venn-circle:hover { background: color-mix(in oklab, var(--accent) 14%, transparent); }
.venn-circle.c1 { top: 0;    left: 19%; }
.venn-circle.c2 { bottom: 0; left: 0;   }
.venn-circle.c3 { bottom: 0; right: 0;  }
.venn-circle .t {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--display-weight);
  letter-spacing: -0.018em;
  color: var(--accent);
  line-height: 1.15;
  margin-bottom: 6px;
}
.venn-circle .d {
  font-size: 11.5px;
  color: var(--quill);
  line-height: 1.45;
  max-width: 130px;
}
.venn-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 70px; height: 70px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-align: center;
  z-index: 2;
  box-shadow: 0 12px 32px color-mix(in oklab, var(--accent) 50%, transparent);
}
.venn-center-logo {
  background: var(--paper);
  color: var(--ink);
  width: 96px; height: 96px;
  padding: 18px;
  box-shadow:
    0 12px 32px rgba(10,10,10,0.10),
    0 0 0 1px var(--rule-strong);
}
.venn-center-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.venn-copy h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.026em;
  color: var(--ink);
  margin-bottom: 18px;
}
.venn-copy h3 em { font-style: italic; color: var(--accent); }
.venn-copy p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--quill);
}
.venn-copy p em { font-style: italic; color: var(--accent); font-weight: 500; }

@media (max-width: 1024px) {
  .venn-wrap { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   Counter / number reveal
   ============================================ */
@keyframes countFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.anum.in { animation: countFade 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }

/* Tier card subtle elevation refinement (premium feel) */
.tier { transition: transform 0.4s cubic-bezier(0.32,0.72,0,1), border-color 0.4s, box-shadow 0.4s; }
.tier:hover { box-shadow: 0 30px 70px -32px rgba(10,10,10,0.20), 0 8px 18px -10px rgba(10,10,10,0.08); }

/* lcard refinement */
.lcard { transition: transform 0.4s cubic-bezier(0.32,0.72,0,1), border-color 0.4s, box-shadow 0.4s; }


/* ============================================
   TEAM section (Founders + Network + Advisors)
   ============================================ */
.team-section .section-head { margin-bottom: 48px; }

.team-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 60px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.team-strip .ts-item {
  padding: 24px 20px;
  text-align: left;
  border-left: 1px solid var(--rule);
}
.team-strip .ts-item:first-child { border-left: none; }
.team-strip .ts-n {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.team-strip .ts-l {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}

.team-block-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.team-block-line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.team-founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tm-founder {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 28px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: center;
  transition: border-color 0.35s, transform 0.4s, box-shadow 0.4s;
}
.tm-founder:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -22px rgba(10,10,10,0.12);
}
.tm-photo {
  width: 120px;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--accent-tint);
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tm-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(10%);
}
.tm-photo-sm { width: 64px; height: 64px; aspect-ratio: 1 / 1; border-radius: 50%; }
.tm-photo-md { width: 96px; height: 96px; border-radius: 50%; }
.tm-init {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--accent-deep);
}
.tm-photo-sm .tm-init { font-size: 22px; }
.tm-photo-md .tm-init { font-size: 30px; }
.tm-body {}
.tm-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 6px;
}
.tm-org {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  margin-bottom: 4px;
}
.tm-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.1;
}
.tm-name-sm { font-size: 19px; margin-bottom: 0; }
.tm-name-md { font-size: 24px; margin-bottom: 6px; }
.tm-bio {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--quill);
}

.team-network {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tm-card {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 0.35s, transform 0.4s, box-shadow 0.4s;
}
.tm-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -20px rgba(10,10,10,0.10);
}
.tm-card-head {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
}
.tm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-tag {
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--quill);
}

.team-advisors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.tm-advisor {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 28px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
  transition: border-color 0.35s, transform 0.4s, box-shadow 0.4s;
  min-width: 0;
}
.tm-advisor:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 48px -22px rgba(10,10,10,0.12);
}
.tm-advisor > div { min-width: 0; }
.tm-advisor .tm-bio { word-break: break-word; }
.tm-advisor .tm-tags { margin-top: 14px; }

/* JMD bridge */
.jmd-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 56px;
  padding: 28px 32px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 22px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s, box-shadow 0.4s;
}
.jmd-bridge:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -24px color-mix(in oklab, var(--ink) 60%, transparent);
}
.jmd-bridge::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: radial-gradient(ellipse 60% 100% at 80% 50%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.jmd-bridge-l {
  display: flex;
  align-items: center;
  gap: 22px;
  position: relative;
  z-index: 1;
}
.jmd-bridge-mark {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--paper);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--accent) 40%, transparent);
  flex-shrink: 0;
}
.jmd-bridge-mark--logo {
  padding: 8px;
  background: rgba(255,255,255,0.94);
  overflow: hidden;
}
.jmd-bridge-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.jmd-bridge-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--paper);
}
.jmd-bridge-d {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--vellum);
  line-height: 1.45;
  max-width: 480px;
}
.jmd-bridge-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--paper);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.jmd-bridge-arr {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
  transition: transform 0.3s;
}
.jmd-bridge:hover .jmd-bridge-arr { transform: translateX(4px); }

@media (max-width: 1024px) {
  .team-founders, .team-network, .team-advisors { grid-template-columns: 1fr; }
  .team-strip { grid-template-columns: repeat(2, 1fr); }
  .team-strip .ts-item:nth-child(3) { border-left: none; border-top: 1px solid var(--rule); }
  .team-strip .ts-item:nth-child(4) { border-top: 1px solid var(--rule); }
  .jmd-bridge { flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media (max-width: 720px) {
  .tm-founder { grid-template-columns: 80px 1fr; gap: 16px; padding: 20px; }
  .tm-photo { width: 80px; height: 96px; }
  .team-network .tm-card { padding: 22px; gap: 16px; }
  .team-network .tm-card-head { grid-template-columns: 72px 1fr; gap: 16px; }
  .team-network .tm-photo-sm { width: 72px; height: 72px; }
  .tm-advisor { grid-template-columns: 72px 1fr; padding: 22px; gap: 16px; }
  .tm-photo-md { width: 72px; height: 72px; }
  .team-strip { grid-template-columns: 1fr; }
  .team-strip .ts-item { border-left: none; border-top: 1px solid var(--rule); }
  .team-strip .ts-item:first-child { border-top: none; }
  .jmd-bridge {
    gap: 18px;
    margin-top: 42px;
    padding: 24px 22px;
    border-radius: 18px;
  }
  .jmd-bridge-l {
    min-width: 0;
    gap: 16px;
  }
  .jmd-bridge-mark {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }
  .jmd-bridge-name {
    font-size: 22px;
    text-wrap: balance;
  }
  .jmd-bridge-d {
    max-width: none;
    overflow-wrap: anywhere;
  }
  .jmd-bridge-cta {
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
  }
}


/* ============================================
   TOOL STACK — circular categories around hub
   ============================================ */
.tstack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 18px;
  align-items: stretch;
}
.tstack-hub {
  grid-column: 2;
  grid-row: 2;
  background: var(--ink);
  color: var(--paper);
  border-radius: 22px;
  padding: 28px 24px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 60px -20px color-mix(in oklab, var(--ink) 60%, transparent);
  overflow: hidden;
  min-height: 280px;
}
.tstack-hub::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--accent) 30%, transparent), transparent 65%);
  filter: blur(28px);
  pointer-events: none;
}
.tstack-hub > * { position: relative; z-index: 1; }
.tstack-hub-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 16px;
}
.tstack-hub-pill em { color: var(--accent-soft); font-style: italic; font-weight: 400; }
.tstack-hub-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
.tstack-hub-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 24px;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--paper);
}
.tstack-hub-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vellum);
  max-width: 240px;
}
.tstack-hub-axis {
  margin-top: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vellum);
}
.tstack-hub-axis .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.tstack-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.tstack-card {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 22px;
  position: relative;
  z-index: 1;
  transition: border-color 0.35s, transform 0.4s, box-shadow 0.4s, background 0.35s;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.tstack-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -22px rgba(10,10,10,0.12);
  background: var(--paper-warm);
}
/* Place by grid position */
.tstack-card.pos-tl { grid-column: 1; grid-row: 1; }
.tstack-card.pos-tr { grid-column: 3; grid-row: 1; }
.tstack-card.pos-ml { grid-column: 1; grid-row: 2; }
.tstack-card.pos-mr { grid-column: 3; grid-row: 2; }
.tstack-card.pos-bl { grid-column: 1; grid-row: 3; }
.tstack-card.pos-br { grid-column: 3; grid-row: 3; }

.tstack-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tstack-card .ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
  transition: background 0.4s, color 0.4s;
}
.tstack-card:hover .ic { background: var(--accent); color: var(--paper); }
.tstack-card .ic svg { width: 18px; height: 18px; }
.tstack-card .rom {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  font-weight: 400;
}
.tstack-card h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 6px;
}
.tstack-card h4 em { font-style: italic; color: var(--accent); }
.tstack-card .tools {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-deep);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--rule);
}
.tstack-card .tools.tstack-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  min-height: 34px;
  font-size: 0;
  letter-spacing: 0;
}
.tstack-logo {
  min-width: 28px;
  max-width: 100px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  opacity: 0.94;
  transition: opacity 0.25s, transform 0.25s;
}
.tstack-logo.is-wide {
  min-width: 72px;
  max-width: 124px;
}
.tstack-logo img {
  display: block;
  width: auto;
  max-width: 82px;
  max-height: 28px;
  object-fit: contain;
}
.tstack-logo:not(.is-wide) img {
  height: 26px;
}
.tstack-logo.is-wide img {
  max-width: 118px;
  max-height: 25px;
}
.tstack-logo img[src$=".jpg"],
.tstack-logo img[src$=".jpeg"] {
  mix-blend-mode: multiply;
}
.tstack-card:hover .tstack-logo {
  opacity: 1;
  transform: translateY(-1px);
}
.tstack-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--quill);
  flex: 1;
}

@media (max-width: 1024px) {
  .tstack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; }
  .tstack-hub { grid-column: 1 / -1; grid-row: 1; min-height: 220px; }
  .tstack-svg { display: none; }
  .tstack-card.pos-tl,
  .tstack-card.pos-tr,
  .tstack-card.pos-ml,
  .tstack-card.pos-mr,
  .tstack-card.pos-bl,
  .tstack-card.pos-br { grid-column: auto; grid-row: auto; }
}
@media (max-width: 720px) {
  .tstack { grid-template-columns: 1fr; }
  .tstack-card .tools.tstack-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }
  .tstack-logo,
  .tstack-logo.is-wide {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 28px;
    justify-content: flex-start;
  }
  .tstack-logo img,
  .tstack-logo.is-wide img {
    max-width: 100%;
    max-height: 26px;
  }
  .tstack-logo:not(.is-wide) img { height: 25px; }
}

/* ============================================
   POSITIONING MATRIX (2x2)
   ============================================ */
.pmx {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px;
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}
.pmx-meta {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}
.pmx-meta-r { color: var(--accent); }
.pmx-head { margin-bottom: 36px; max-width: 720px; }
.pmx-head h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 14px;
}
.pmx-head h3 em { font-style: italic; color: var(--accent); }
.pmx-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--quill);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.pmx-sub em { font-style: normal; color: var(--accent); font-weight: 500; }

.pmx-board {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
}
.pmx-ylabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  text-align: center;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pmx-xlabel {
  grid-column: 2;
  text-align: right;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}
.pmx-grid {
  position: relative;
  aspect-ratio: 2.3 / 1;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  overflow: hidden;
}
.pmx-priority {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  background: var(--accent-tint);
  border-left: 1px dashed var(--accent);
  border-bottom: 1px dashed var(--accent);
}
.pmx-divv {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--rule-strong);
}
.pmx-divh {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--rule-strong);
}
.pmx-q {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  padding: 12px 14px;
}
.pmx-q.tl { top: 0; left: 0; }
.pmx-q.tr { top: 0; right: 0; color: var(--accent-deep); }
.pmx-q.bl { bottom: 0; left: 0; }
.pmx-q.br { bottom: 0; right: 0; }
.pmx-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.25s;
}
.pmx-dot:hover { transform: translate(-50%, -50%) scale(1.3); }
.pmx-dot.market { background: var(--ink); }
.pmx-dot.gold {
  background: var(--accent);
  width: 16px; height: 16px;
  box-shadow: 0 0 0 8px var(--accent-tint2);
}
.pmx-dot-l {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  color: var(--accent-deep);
  letter-spacing: -0.005em;
}
.pmx-dot.lbl-left .pmx-dot-l {
  left: auto;
  right: 22px;
}

.pmx-legend {
  margin-top: 18px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.pmx-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--quill);
}
.pmx-leg-sw {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
}
.pmx-leg-sw.gold {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint2);
}

.pmx-foot {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: start;
}
.pmx-foot-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding-top: 3px;
}
.pmx-foot-d {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-mid);
  letter-spacing: -0.005em;
}
.pmx-foot-d em { font-style: normal; color: var(--accent); font-weight: 500; }

@media (max-width: 720px) {
  .pmx { padding: 24px 22px; }
  .pmx-q { font-size: 9px; padding: 8px; }
  .pmx-dot.gold .pmx-dot-l { font-size: 11px; }
  .pmx-foot { grid-template-columns: 1fr; gap: 8px; }
}


/* ============================================
   v3 — Major overhaul styles
   ============================================ */

/* Make hero floating chips clickable (handled in main .hero-float rule above) */

/* ============================================
   VERTICAL PROGRAM LIST (Programme page)
   ============================================ */
.vplist {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.vplist-rows {
  list-style: none;
  border-top: 1px solid var(--rule);
}
.vplist-row {
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  gap: 14px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: padding-left 0.35s, background 0.3s;
  position: relative;
}
.vplist-row:hover { padding-left: 12px; }
.vplist-row.is-active { padding-left: 12px; }
.vplist-row.is-active::before {
  content: '';
  position: absolute;
  left: -2px; top: 18%; bottom: 18%;
  width: 2px;
  background: var(--accent);
}
.vplist-row .num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ash);
  font-weight: 500;
}
.vplist-row.is-active .num { color: var(--accent); }
.vplist-row .nm {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.2;
}
.vplist-row.is-active .nm { color: var(--accent-deep); }
.vplist-row .arr {
  color: var(--ash);
  width: 18px;
  display: grid;
  place-items: center;
  transition: transform 0.35s, color 0.3s;
}
.vplist-row .arr svg { width: 14px; height: 14px; }
.vplist-row:hover .arr,
.vplist-row.is-active .arr {
  color: var(--accent);
  transform: translateX(4px);
}
.vplist-detail {
  position: sticky;
  top: 24px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 22px;
  padding: 28px 36px 30px;
  overflow: hidden;
  min-height: 0;
  align-self: start;
}
.vplist-detail::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at top right, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%);
  filter: blur(36px);
  pointer-events: none;
}
.vplist-bgimg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.55;
  mix-blend-mode: lighten;
  z-index: 0;
  animation: vpBgFade 0.6s ease-out;
}
.vplist-bgimg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in oklab, var(--ink) 60%, transparent) 0%, transparent 50%, color-mix(in oklab, var(--accent) 20%, transparent) 100%);
}
@keyframes vpBgFade {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 0.55; transform: scale(1); }
}
.vplist-detail.has-img .vplist-bignum {
  color: color-mix(in oklab, var(--accent) 35%, transparent);
}
.vplist-detail > * { position: relative; z-index: 1; }
.vplist-bignum {
  position: absolute;
  top: 16px; right: 28px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 120px;
  color: rgba(255,255,255,0.05);
  letter-spacing: -0.04em;
  line-height: 1;
  z-index: 0;
}
.vplist-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 500;
  margin-bottom: 18px;
}
.vplist-detail h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin-bottom: 18px;
}
.vplist-detail p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--vellum);
  margin-bottom: 28px;
  max-width: 460px;
}
.vplist-viz {
  margin: 0 0 28px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  animation: vpVizFade 0.45s cubic-bezier(0.16,1,0.3,1);
}
.vplist-viz-svg {
  width: 100%;
  height: auto;
  max-height: 140px;
  display: block;
}
@keyframes vpVizFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.vplist-price-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 24px;
}
.vplist-price-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vellum);
}
.vplist-price-v {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 32px;
  letter-spacing: -0.025em;
  color: var(--paper);
}
.vplist-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 22px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.35s, transform 0.3s;
}
.vplist-cta:hover { background: var(--accent); color: var(--paper); transform: scale(0.97); }
.vplist-cta .ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(10,10,10,0.08);
  display: grid; place-items: center;
  transition: background 0.3s;
}
.vplist-cta:hover .ic { background: rgba(255,255,255,0.18); }
.vplist-cta .ic svg { width: 12px; height: 12px; }

.vplist-infolink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -14px 0 28px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-soft);
  text-decoration: none;
  transition: color 0.3s;
}
.vplist-infolink:hover { color: var(--paper); }
.vplist-infolink svg { width: 12px; height: 12px; }

.vplist-progress {
  display: flex;
  gap: 6px;
}
.vp-tick {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 100px;
  transition: background 0.5s;
}
.vp-tick.on { background: var(--accent); }

@media (max-width: 1024px) {
  .vplist { grid-template-columns: 1fr; gap: 32px; }
  .vplist-detail { position: relative; top: 0; }
}
@media (max-width: 560px) {
  .vplist-detail,
  .vplist-detail:not(.has-viz) {
    padding: 26px 22px 24px;
    border-radius: 18px;
  }
  .vplist-detail h3 {
    font-size: clamp(29px, 9vw, 36px);
  }
  .vplist-detail p {
    font-size: 14.5px;
  }
  .vplist-price-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .vplist-price-v {
    font-size: 28px;
  }
  .vplist-cta {
    max-width: 100%;
    white-space: normal;
  }
}

/* ============================================
   AUTONOMY SKETCH (sketch-based)
   ============================================ */
.autoskt {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px 32px 24px;
}
.autoskt-stage {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
.autoskt-svg {
  width: 100%;
  height: auto;
  max-height: 420px;
  display: block;
}
.autoskt-axis-pill {
  display: flex;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.autoskt-axis-pill .ap-l, .autoskt-axis-pill .ap-r {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ap-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.ap-dot.human { background: var(--ink); }
.ap-dot.ki { background: var(--accent); }

.autoskt-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.askt-tab {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.35s, box-shadow 0.35s;
  font-family: inherit;
}
.askt-tab.on {
  background: var(--ink);
  border-color: var(--ink);
}
.askt-tab.on .askt-n,
.askt-tab.on .askt-lab { color: var(--paper); }
.askt-tab .askt-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ash);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  transition: color 0.3s;
}
.askt-tab .askt-lab {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
  display: block;
  transition: color 0.3s;
}
.askt-tab.featured::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 14px 14px 0 0;
}
.askt-badge {
  position: absolute;
  top: -8px; right: 8px;
  background: var(--accent);
  color: var(--paper);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
}

@media (max-width: 720px) {
  .autoskt-tabs { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   BAUSTEINE TABS
   ============================================ */
.bsts {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  overflow: hidden;
}
.bsts-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.bst-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border: none;
  background: transparent;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  font-family: inherit;
  color: var(--quill);
  font-size: 13px;
  font-weight: 500;
  position: relative;
  transition: background 0.3s, color 0.3s;
  text-align: left;
}
.bst-tab:last-child { border-right: none; }
.bst-tab:hover { background: var(--paper-3); color: var(--ink); }
.bst-tab.on { background: var(--paper-3); color: var(--ink); }
.bst-tab.on::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}
.bst-tab .bst-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}
.bst-tab .bst-ic svg { width: 14px; height: 14px; }
.bst-tab.on .bst-ic { background: var(--accent); color: var(--paper); }
.bst-tab .bst-tt { line-height: 1.2; }

.bsts-panel {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  padding: 40px;
  animation: bstFade 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes bstFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bsts-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
}
.bsts-panel-l h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 16px;
}
.bsts-panel-l p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--quill);
  margin-bottom: 22px;
  max-width: 460px;
}
.bsts-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bsts-tag {
  padding: 5px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--quill);
}
.bsts-bullets-head { margin-bottom: 14px; }
.bsts-bullets {
  list-style: none;
  display: grid;
  gap: 12px;
}
.bsts-bullets li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--ink);
}
.bsts-bullets .check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
}
.bsts-bullets .check svg { width: 13px; height: 13px; }

@media (max-width: 1024px) {
  .bsts-tabs { grid-template-columns: repeat(3, 1fr); }
  .bst-tab:nth-child(3) { border-right: none; }
  .bst-tab:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .bsts-panel { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
}
@media (max-width: 720px) {
  .bsts-tabs { grid-template-columns: 1fr 1fr; }
  .bst-tab { border-right: 1px solid var(--rule); }
  .bst-tab:nth-child(2n) { border-right: none; }
  .bst-tab:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ============================================
   BRANCHEN INTERACTIVE
   ============================================ */
.brif-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.brif-f {
  padding: 9px 18px 9px 14px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--quill);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.brif-f:hover { border-color: var(--ink); color: var(--ink); }
.brif-f.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.brif-f-c {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  background: var(--paper);
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 600;
}
.brif-f.on .brif-f-c { background: var(--accent); color: var(--paper); }

.brif-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.brif-card {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 22px;
  position: relative;
  cursor: default;
  transition: background 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1);
  animation: brifIn 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes brifIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.brif-card:hover {
  border-color: var(--accent);
  background: var(--paper-warm);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -20px rgba(10,10,10,0.12);
}
.brif-card-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  margin-bottom: 14px;
  transition: background 0.3s, color 0.3s;
}
.brif-card:hover .brif-card-ic { background: var(--accent); color: var(--paper); }
.brif-card-ic svg { width: 18px; height: 18px; }
.brif-card-n {
  position: absolute;
  top: 16px; right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ash);
  font-weight: 500;
}
.brif-card-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 18px;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}
.brif-card-uc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--accent);
  line-height: 1.35;
}

@media (max-width: 1024px) { .brif-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .brif-grid { grid-template-columns: 1fr; } }

/* ============================================
   MENSCH-KI LOOP
   ============================================ */
.mkloop {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px;
}
.mkloop-stage {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 24px;
  overflow: hidden;
}
.mkloop-svg {
  width: 100%;
  height: auto;
  max-height: 480px;
  display: block;
}
.mkloop-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mkloop-key {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  align-items: center;
}
.mkloop-key .mkk-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
}
.mkloop-key .mkk-ic svg { width: 16px; height: 16px; }
.mkloop-key .mkk-l {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 15.5px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.mkloop-key .mkk-d {
  margin-top: 3px;
  font-size: 12px;
  color: var(--quill);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .mkloop-keys { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .mkloop-keys { grid-template-columns: 1fr; }
  .mkloop { padding: 20px; }
}

/* ============================================
   MANIFEST STACK
   ============================================ */
.mfs {
  display: grid;
  gap: 10px;
}
.mfs-card {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  gap: 32px;
  align-items: center;
  padding: 28px 32px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
  cursor: pointer;
  transition: background 0.45s cubic-bezier(0.16,1,0.3,1), border-color 0.45s cubic-bezier(0.16,1,0.3,1), color 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s cubic-bezier(0.16,1,0.3,1), padding 0.45s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}
.mfs-card.open {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  padding: 36px 36px;
}
.mfs-card-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.mfs-card.open .mfs-card-bar { transform: scaleY(1); }
.mfs-card-roman {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 48px;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  transition: color 0.3s;
}
.mfs-card.open .mfs-card-roman { color: var(--accent-soft); }
.mfs-card-content h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 28px;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 8px;
  transition: color 0.3s;
}
.mfs-card.open .mfs-card-content h3 { color: var(--paper); }
.mfs-card.open .mfs-card-content h3 em { color: var(--accent-soft); }
.mfs-card .mfs-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--quill);
  margin-bottom: 12px;
  transition: color 0.3s;
}
.mfs-card.open .mfs-lead { color: var(--vellum); }
.mfs-card .mfs-d {
  font-size: 14px;
  line-height: 1.55;
  color: var(--quill);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.3s, color 0.3s;
}
.mfs-card.open .mfs-d {
  max-height: 200px;
  opacity: 1;
  color: var(--vellum);
}
.mfs-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ash);
  text-align: right;
  font-weight: 500;
  transition: color 0.3s;
}
.mfs-card.open .mfs-card-num { color: var(--accent-soft); }

@media (max-width: 720px) {
  .mfs-card { grid-template-columns: 56px 1fr; gap: 16px; padding: 22px; }
  .mfs-card.open { padding: 26px; }
  .mfs-card-roman { font-size: 32px; }
  .mfs-card-num { display: none; }
}

/* ============================================
   MANIFEST v2 — compact 4-column principles
   ============================================ */
.mfsx {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.mfsx::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-tint2), var(--accent-tint2), transparent);
  z-index: 0;
}
.mfsx-card {
  position: relative;
  z-index: 1;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.mfsx-card:hover {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--rule));
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -18px rgba(10,10,10,0.12);
}
.mfsx-r {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--accent-tint2);
  border-radius: 50%;
  padding-bottom: 2px;
}
.mfsx-card h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 6px 0 0;
}
.mfsx-card h3 em {
  font-style: italic;
  color: var(--accent);
}
.mfsx-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--quill);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 1024px) {
  .mfsx { grid-template-columns: repeat(2, 1fr); }
  .mfsx::before { display: none; }
}
@media (max-width: 560px) {
  .mfsx { grid-template-columns: 1fr; }
}

/* ============================================
   PROGRAMME OVERVIEW (home) — compact 5-step strip
   ============================================ */
.pgvw {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 12px;
  position: relative;
}
.pgvw-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  position: relative;
}
.pgvw-list::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 4%; right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-tint2) 8%, var(--accent-tint2) 92%, transparent);
  z-index: 0;
  pointer-events: none;
}
.pgvw-step {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.pgvw-step:hover {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--rule));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(10,10,10,0.14);
}
.pgvw-step.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pgvw-step.featured:hover { border-color: var(--accent); }
.pgvw-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
}
.pgvw-step.featured .pgvw-n { color: var(--accent-soft); }
.pgvw-body { display: flex; flex-direction: column; gap: 4px; }
.pgvw-step h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.pgvw-step.featured h4 { color: var(--paper); }
.pgvw-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ash);
  letter-spacing: 0.04em;
}
.pgvw-step.featured .pgvw-meta { color: var(--vellum); }
.pgvw-price {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.pgvw-step.featured .pgvw-price {
  border-top-color: rgba(255,255,255,0.10);
  color: var(--accent-soft);
}
.pgvw-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px 14px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.pgvw-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.pgvw-cta .ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  display: grid; place-items: center;
  transition: background 0.3s, transform 0.3s;
}
.pgvw-cta:hover .ic { background: rgba(255,255,255,0.15); transform: translateX(3px); }
.pgvw-cta .ic svg { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .pgvw-list { grid-template-columns: repeat(2, 1fr); }
  .pgvw-list::before { display: none; }
}
@media (max-width: 560px) {
  .pgvw-list { grid-template-columns: 1fr; }
}

/* ============================================
   METHODIK TIMELINE v2 — less text, more rhythm
   ============================================ */
.mtd { display: flex; flex-direction: column; gap: 36px; }
.mtd-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0 8px;
}
.mtd-rail::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 66%, var(--rule-strong) 66%);
}
.mtd-tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.mtd-tick:first-child { align-items: flex-start; }
.mtd-tick:last-child  { align-items: flex-end; }
.mtd-tick:nth-child(2),
.mtd-tick:nth-child(3) { align-items: center; }
.mtd-tick-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--paper-3);
}
.mtd-tick.last .mtd-tick-dot {
  background: var(--accent);
}
.mtd-tick-l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink);
}
.mtd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mtd-phase {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s;
}
.mtd-phase:hover {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--rule));
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(10,10,10,0.14);
}
.mtd-phase.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.mtd-phase-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mtd-phase-ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
}
.mtd-phase-ic svg { width: 18px; height: 18px; }
.mtd-phase.featured .mtd-phase-ic {
  background: rgba(255,255,255,0.10);
  color: var(--accent-soft);
}
.mtd-phase-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mtd-phase-r {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.01em;
}
.mtd-phase.featured .mtd-phase-r { color: var(--accent-soft); }
.mtd-phase-range {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}
.mtd-phase.featured .mtd-phase-range { color: var(--vellum); }
.mtd-phase h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
.mtd-phase.featured h3 { color: var(--paper); }
.mtd-phase h3 em { font-style: italic; color: var(--accent); }
.mtd-phase.featured h3 em { color: var(--accent-soft); }
.mtd-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
}
.mtd-tags li {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-size: 11.5px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 100px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.mtd-tags li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
}
.mtd-phase.featured .mtd-tags li {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: var(--paper);
}
.mtd-out {
  margin-top: auto;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mtd-phase.featured .mtd-out {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
.mtd-out-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.mtd-out-v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.mtd-phase.featured .mtd-out-v { color: var(--paper); }

@media (max-width: 1024px) {
  .mtd-grid { grid-template-columns: 1fr; }
  .mtd-rail { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .mtd-phase { padding: 22px 20px 20px; }
  .mtd-phase h3 { font-size: 20px; }
}

/* ============================================
   BAUSTEINE — hub & spoke discipline framework
   ============================================ */
.bdiag {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 36px;
  position: relative;
}
.bdiag-board {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 14px 28px;
  position: relative;
  min-height: 520px;
}
.bdiag-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.bdiag-hub {
  grid-column: 2;
  grid-row: 1 / span 3;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  position: relative;
  box-shadow:
    0 30px 70px -22px rgba(10,10,10,0.4),
    0 6px 18px rgba(10,10,10,0.08);
}
.bdiag-hub::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  pointer-events: none;
}
.bdiag-hub-mark {
  width: 64px; height: 64px;
  background: var(--paper);
  border-radius: 50%;
  padding: 12px;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(10,10,10,0.25);
}
.bdiag-hub-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.bdiag-hub-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 600;
}
.bdiag-hub-l {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--paper);
}
.bdiag-hub-l em {
  font-style: italic;
  color: var(--accent-soft);
}
.bdiag-card {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.bdiag-card:hover {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--rule));
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(10,10,10,0.14);
}
.bdiag-pos-1 { grid-column: 1; grid-row: 1; }
.bdiag-pos-2 { grid-column: 3; grid-row: 1; }
.bdiag-pos-3 { grid-column: 1; grid-row: 2; }
.bdiag-pos-4 { grid-column: 3; grid-row: 2; }
.bdiag-pos-5 { grid-column: 1; grid-row: 3; }
.bdiag-pos-6 { grid-column: 3; grid-row: 3; }
.bdiag-card-ic {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid; place-items: center;
}
.bdiag-card-ic svg { width: 16px; height: 16px; }
.bdiag-card h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 4px 0 0;
}
.bdiag-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--quill);
  margin: 0;
}
.bdiag-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.bdiag-card-tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--accent-tint);
  color: var(--accent-deep);
}
.bdiag-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.bdiag-foot-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bdiag-foot-r {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--quill);
}
.bdiag-foot-r em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .bdiag { padding: 24px; }
  .bdiag-board {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 12px;
    min-height: 0;
  }
  .bdiag-lines { display: none; }
  .bdiag-hub {
    grid-column: 1 / span 2;
    grid-row: 1;
    padding: 22px;
    flex-direction: row;
    text-align: left;
  }
  .bdiag-hub-l { font-size: 22px; }
  .bdiag-pos-1 { grid-column: 1; grid-row: 2; }
  .bdiag-pos-2 { grid-column: 2; grid-row: 2; }
  .bdiag-pos-3 { grid-column: 1; grid-row: 3; }
  .bdiag-pos-4 { grid-column: 2; grid-row: 3; }
  .bdiag-pos-5 { grid-column: 1; grid-row: 4; }
  .bdiag-pos-6 { grid-column: 2; grid-row: 4; }
}
@media (max-width: 560px) {
  .bdiag-board { grid-template-columns: 1fr; }
  .bdiag-hub { grid-column: 1; flex-direction: column; text-align: center; }
  .bdiag-pos-1, .bdiag-pos-2, .bdiag-pos-3, .bdiag-pos-4, .bdiag-pos-5, .bdiag-pos-6 {
    grid-column: 1;
  }
  .bdiag-pos-1 { grid-row: 2; }
  .bdiag-pos-2 { grid-row: 3; }
  .bdiag-pos-3 { grid-row: 4; }
  .bdiag-pos-4 { grid-row: 5; }
  .bdiag-pos-5 { grid-row: 6; }
  .bdiag-pos-6 { grid-row: 7; }
}

/* ============================================
   PRAXIS CASES
   ============================================ */
.prxc {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}
.prxc-nav {
  display: grid;
  gap: 6px;
  align-content: start;
}
.prxc-tab {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 16px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.35s, box-shadow 0.35s;
}
.prxc-tab:hover { border-color: var(--accent); transform: translateX(2px); }
.prxc-tab.on {
  background: var(--ink);
  border-color: var(--ink);
}
.prxc-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
  padding-top: 3px;
}
.prxc-tab.on .prxc-n { color: var(--accent-soft); }
.prxc-nm {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 16px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 4px;
}
.prxc-tab.on .prxc-nm { color: var(--paper); }
.prxc-sec {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ash);
  text-transform: uppercase;
}
.prxc-tab.on .prxc-sec { color: var(--vellum); }

.prxc-case {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  animation: bstFade 0.45s cubic-bezier(0.16,1,0.3,1);
}

/* Hero panel — dossier-style */
.prxc-case-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.prxc-case-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 90% 20%, color-mix(in oklab, var(--accent) 32%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 110%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.prxc-case-hero-l,
.prxc-case-hero-r {
  position: relative;
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}
.prxc-case-hero-r {
  border-left: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
}
.prxc-stamp {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 600;
}
.prxc-case-hero .prxc-pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--accent-soft);
}
.prxc-case-hero h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--paper);
  margin: 4px 0 0;
}
.prxc-headline-metric {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prxc-headline-v {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: italic;
  font-size: clamp(40px, 5.8vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent-soft);
}
.prxc-headline-l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vellum);
  font-weight: 500;
}
.prxc-flow-frame {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  justify-content: center;
}
.prxc-flow-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 600;
}
.prxc-flow-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 26px;
}
.prxc-flow-rail::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), var(--accent) 30%, var(--accent) 70%, rgba(255,255,255,0.05));
}
.prxc-flow-rail .prxc-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
  align-items: center;
}
.prxc-step-dot {
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px var(--accent);
}
.prxc-flow-rail .prxc-step-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--accent-soft);
  font-weight: 700;
}
.prxc-flow-rail .prxc-step-l {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--paper);
  font-style: italic;
}

/* Body grid */
.prxc-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.prxc-quote-hero {
  position: relative;
  margin: 0;
  padding: 38px 48px 38px 92px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
.prxc-quote-hero-mark {
  position: absolute;
  top: 8px;
  left: 32px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 96px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.34;
}
.prxc-quote-hero blockquote {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.prxc-quote-hero blockquote em {
  font-style: italic;
  color: var(--accent);
}
.prxc-quote-hero figcaption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
}
.prxc-case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.prxc-quote,
.prxc-solution,
.prxc-metrics {
  padding: 32px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prxc-quote + .prxc-solution,
.prxc-solution + .prxc-metrics {
  border-left: 1px solid var(--rule);
}
.prxc-quote {
  background: var(--paper);
}
.prxc-quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  line-height: 0.7;
  color: var(--accent);
}
.prxc-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.prxc-quote-cite {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
}
.prxc-solution-l,
.prxc-metrics-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.prxc-solution p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--quill);
  margin: 0;
}
.prxc-metrics {
  background: var(--paper-2);
}
.prxc-metrics-grid { display: grid; gap: 8px; }
.prxc-metric {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.prxc-metric.gold { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.prxc-metric-v {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 24px;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--ink);
}
.prxc-metric.gold .prxc-metric-v { color: var(--accent-soft); }
.prxc-metric-l {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--quill);
}
.prxc-metric.gold .prxc-metric-l { color: var(--vellum); }

@media (max-width: 1024px) {
  .prxc { grid-template-columns: 1fr; }
  .prxc-nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .prxc-nav { grid-template-columns: 1fr; }
  .prxc-case-grid { grid-template-columns: 1fr; }
  .prxc-case-hero { grid-template-columns: 1fr; }
  .prxc-case-hero-r { border-left: none; border-top: 1px solid rgba(255,255,255,0.10); }
  .prxc-case-hero-l, .prxc-case-hero-r { padding: 28px 22px; }
  .prxc-quote, .prxc-solution, .prxc-metrics { padding: 24px 22px; }
  .prxc-solution, .prxc-metrics { border-left: none; border-top: 1px solid var(--rule); }
}

/* ============================================
   Adoption Stats — Risk pills + Takeaway (Index 02 Marktlage)
   ============================================ */
.adopt-risk-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.adopt-takeaway {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adopt-takeaway-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 700;
}
.adopt-takeaway p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: var(--paper);
  letter-spacing: -0.005em;
}
.adopt-takeaway p em {
  font-style: italic;
  color: var(--accent-soft);
}

/* ============================================
   Sectors — Use Cases banner
   ============================================ */
.smtx-cases-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.smtx-cases-banner-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.smtx-cases-banner-l::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
.smtx-cases-banner-r {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14.5px;
  color: var(--vellum);
  letter-spacing: -0.005em;
}

/* ============================================
   Leistungen — section-first (no SubHero)
   ============================================ */
.section-first {
  padding-top: 168px;
}

/* ============================================
   Venn circle — better text alignment
   ============================================ */
.venn-circle {
  display: grid;
  place-items: center;
  text-align: center;
}
.venn-circle .venn-circle-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  max-width: 200px;
}
.venn-circle .venn-circle-body .t {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-align: center;
}
.venn-circle .venn-circle-body .d {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--quill);
  margin: 0;
  text-align: center;
  max-width: 150px;
}

/* ============================================
   BAUSTEINE v2 — editorial poster grid
   ============================================ */
.bpost {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bpost-card {
  position: relative;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 320px;
  overflow: hidden;
  transition: border-color 0.35s, transform 0.4s, box-shadow 0.4s;
}
.bpost-card:hover {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--rule));
  transform: translateY(-3px);
  box-shadow: 0 24px 56px -28px rgba(10,10,10,0.18);
}
.bpost-card-ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.bpost-rule {
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.bpost-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bpost-r {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.bpost-card-ink .bpost-r {
  color: var(--accent-soft);
}
.bpost-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
}
.bpost-card-ink .bpost-meta { color: var(--vellum); }
.bpost-stage {
  position: relative;
  width: 100%;
  height: 152px;
  margin: 18px 0 8px;
  display: grid;
  place-items: center;
}
.bpost-glyph {
  position: relative;
  width: 96px;
  height: 96px;
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s;
}
.bpost-viz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s;
  pointer-events: none;
  color: var(--ink);
}
.bpost-card-ink .bpost-viz { color: var(--paper); }
.bpost-viz-svg {
  width: 100%;
  max-width: 220px;
  height: 100%;
  max-height: 152px;
}
.bpost-card:hover .bpost-glyph,
.bpost-card:focus-within .bpost-glyph {
  opacity: 0;
  transform: scale(0.94);
}
.bpost-card:hover .bpost-viz,
.bpost-card:focus-within .bpost-viz {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.bpost-glyph-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--accent-tint2), var(--accent-tint));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--rule-strong));
  transition: transform 0.4s, background 0.4s;
}
.bpost-card-ink .bpost-glyph-ring {
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent) 50%, transparent), color-mix(in oklab, var(--accent) 14%, transparent));
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.bpost-card:hover .bpost-glyph-ring {
  transform: scale(1.05);
}
.bpost-glyph-ic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent-deep);
  z-index: 1;
}
.bpost-card-ink .bpost-glyph-ic {
  color: var(--paper);
}
.bpost-glyph-ic svg {
  width: 36px; height: 36px;
}
.bpost-body {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bpost-t {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
.bpost-card-ink .bpost-t { color: var(--paper); }
.bpost-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--quill);
  margin: 0;
  letter-spacing: -0.003em;
}
.bpost-card-ink .bpost-lead { color: var(--vellum); }

.ena-bpost-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.ena-bpost-4 .bpost-card {
  min-height: 348px;
}
.ena-bpost-4 .bpost-stage {
  height: 150px;
  margin: 14px 0 6px;
}
/* Glyph by default, full graphic revealed on hover/focus — same as Leistungen 04 Bausteine.
   Glyph + viz inherit the base .bpost crossfade; we only keep the larger SVG sizing here. */
.ena-bpost-4 .bpost-viz-svg {
  width: min(100%, 220px);
  max-width: 220px;
  height: auto;
  aspect-ratio: 5 / 3;
  max-height: 150px;
  overflow: visible;
}

@media (max-width: 1180px) {
  .ena-bpost-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .bpost { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bpost { grid-template-columns: 1fr; }
  .bpost-card { min-height: 0; padding: 26px 24px; }
  .ena-bpost-4 { grid-template-columns: 1fr; }
  .ena-bpost-4 .bpost-card { min-height: 0; }
  .ena-bpost-4 .bpost-stage { height: 138px; margin: 10px 0 2px; }
}

/* ============================================
   MANIFEST v3 — IV Prinzipien with leaf+list
   ============================================ */
.mfst {
  display: grid;
  grid-template-columns: 0.95fr 1.2fr;
  gap: 14px;
  align-items: stretch;
}
.mfst-leaf {
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px;
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.mfst-leaf::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 50% at 90% 100%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%);
  pointer-events: none;
}
.mfst-leaf > * { position: relative; z-index: 1; }
.mfst-leaf-mark {
  display: inline-flex;
  align-items: center;
}
.mfst-leaf-logo {
  width: 130px;
  height: auto;
  display: block;
  opacity: 0.92;
}
.mfst-leaf-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mfst-leaf-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 700;
}
.mfst-leaf-y {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 23px;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.mfst-leaf-q {
  margin: auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--paper);
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.mfst-leaf-q em { font-style: italic; color: var(--accent-soft); }
.mfst-leaf-stamp {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mfst-stamp-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vellum);
  font-weight: 600;
}
.mfst-stamp-v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14.5px;
  color: var(--paper);
  letter-spacing: -0.005em;
}

.mfst-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mfst-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  align-items: center;
  padding: 18px 22px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s, background 0.35s;
}
.mfst-row:hover {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--rule));
  transform: translateX(3px);
  box-shadow: 0 10px 24px -16px rgba(10,10,10,0.12);
}
.mfst-r {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
  text-align: center;
}
.mfst-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mfst-body h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.mfst-body h3 em { font-style: italic; color: var(--accent); }
.mfst-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--quill);
  letter-spacing: -0.005em;
  margin: 0;
}
.mfst-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.mfst-tag::before {
  content: '';
  width: 12px; height: 1px;
  background: var(--accent);
}

@media (max-width: 1024px) {
  .mfst { grid-template-columns: 1fr; }
  .mfst-leaf-q { font-size: 19px; padding: 16px 0; margin: 0; }
}
@media (max-width: 600px) {
  .mfst-row { grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 16px; }
  .mfst-r { font-size: 34px; }
  .mfst-body h3 { font-size: 18px; }
}

/* Hide team-strip if still present (markup removed but legacy safety) */
.team-section .team-strip { display: none; }

/* Programme list — right card sticks at top of rows column.
   No image background — clean dark card aligned with first list item. */
.vplist { align-items: start !important; }
.vplist-detail { align-self: start !important; }

/* ============================================
   Adoption (Marktlage) refinements — bigger middle chart,
   balanced right risks column, chart caption replaces takeaway
   ============================================ */
.adopt { grid-template-columns: 0.85fr 1.6fr 0.95fr !important; }
.adopt-mid { display: flex; flex-direction: column; }
.adopt-line {
  flex: 1 1 auto;
  min-height: 260px;
  padding: 22px 22px 14px !important;
}
.adopt-line svg { height: 100%; min-height: 220px; }
.adopt-chart-legend {
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px !important;
  margin-top: 14px !important;
  padding: 0 4px;
  font-size: 11.5px !important;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--quill);
  text-transform: uppercase;
}
.adopt-chart-legend .row { display: inline-flex; align-items: center; gap: 8px; }
.adopt-chart-legend .sw { width: 12px; height: 10px; border-radius: 2px; }
.adopt-chart-legend .sw-line { height: 2px; width: 16px; border-radius: 0; }
.adopt-chart-caption {
  margin: 18px 4px 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.adopt-chart-caption em { font-style: italic; color: var(--accent); }
.adopt-risks { gap: 12px !important; }

/* Risiken column — vertical center, larger items, calmer rhythm */
.adopt > div:last-child { justify-content: center; }
.adopt-risks .adopt-risk {
  grid-template-columns: 48px 1fr !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  align-items: center !important;
}
.adopt-risks .adopt-risk .ic {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
}
.adopt-risks .adopt-risk .ic svg {
  width: 22px !important;
  height: 22px !important;
}
.adopt-risks .adopt-risk .t {
  font-size: 16.5px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}
@media (max-width: 1024px) {
  .adopt { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .adopt-line {
    min-height: 0;
    height: auto;
    padding: 16px !important;
  }
  .adopt-line svg {
    aspect-ratio: 400 / 160;
    height: auto;
    min-height: 0;
  }
}

/* ============================================
   Subhero — minimal variant (no big hero on Kontakt)
   ============================================ */
.subhero-mini {
  padding: 140px 0 0;
}
.subhero-mini .subhero-meta { margin-bottom: 14px; }

/* Fix S-curve marker positioning (LogicShift on curve) */
.scurve-marker {
  pointer-events: none;
}
.scurve-marker .badge {
  pointer-events: auto;
}


/* ============================================
   AUTONOMY PIPELINE (v2 — workflow-style)
   ============================================ */
.autoskt-pipe-frame {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 18px;
  padding: 28px 28px 16px;
  margin-bottom: 18px;
}
.autoskt-pipe-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.autoskt-pipe-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.autoskt-pipe-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 24px;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--ink);
}
.autoskt-pipe-meta {
  display: flex;
  gap: 32px;
}
.apm-l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ash);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.apm-v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.autoskt-pipe {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  animation: pipeFade 0.45s cubic-bezier(0.16,1,0.3,1);
}
@keyframes pipeFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.auto-node {
  flex: 1 1 0;
  min-width: 0;
  padding: 18px 16px 16px;
  background: var(--paper-3);
  border: 1.5px solid var(--rule-strong);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  transition: background 0.4s, border-color 0.4s;
  position: relative;
}
.auto-node.ki {
  background: var(--accent-tint);
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.auto-node.human {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.auto-node.monitor {
  background: var(--paper-3);
  border: 1.5px dashed var(--ink);
}
.auto-node .an-step {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ash);
  font-weight: 600;
}
.auto-node.ki .an-step { color: var(--accent-deep); }
.auto-node.human .an-step { color: var(--vellum); }
.auto-node .an-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.auto-node.human .an-name { color: var(--paper); }
.auto-node .an-role {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--quill);
}
.auto-node.human .an-role { color: var(--accent-soft); }
.auto-node.ki .an-role { color: var(--accent-deep); }
.auto-node .an-role::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.auto-node.human .an-role::before { background: var(--paper); }
.auto-node.monitor .an-role::before {
  background: transparent;
  border: 1.5px solid var(--ink);
}
.auto-arr {
  align-self: center;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.autoskt-loop {
  margin: -4px 0 16px;
  height: 36px;
}

.autoskt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.ase-l {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--quill);
}
.al-sw {
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.al-sw.human { background: var(--ink); }
.al-sw.ki { background: var(--accent); }
.al-sw.monitor {
  background: transparent;
  border: 1.5px dashed var(--ink);
}

/* Axis pill upgrade */
.autoskt-axis-pill .ap-spectrum {
  display: flex;
  gap: 4px;
  align-items: center;
}
.autoskt-axis-pill .ap-spec-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rule-strong);
  transition: background 0.4s;
}
.autoskt-axis-pill .ap-spec-dot.on { background: var(--accent); }

@media (max-width: 1024px) {
  .autoskt-pipe-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .autoskt-pipe {
    flex-wrap: wrap;
    gap: 8px;
  }
  .auto-node {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }
  .auto-arr { display: none; }
}
@media (max-width: 720px) {
  .autoskt-pipe-frame { padding: 18px; }
  .autoskt-pipe-meta { flex-direction: column; gap: 14px; }
  .auto-node { flex: 1 1 100%; }
}

/* ============================================
   HUMAN-IN-THE-LOOP — 4-column spectrum (Leistungen, hover-reveal)
   ============================================ */
.hitl {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 30px 28px 28px;
  position: relative;
}
.hitl-hint {
  position: absolute;
  top: -14px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  background: var(--paper);
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid var(--rule-strong);
  z-index: 3;
}
.hitl-hint-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: hintPulse 1.8s ease-in-out infinite;
}

.hitl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hitl-col {
  position: relative;
  padding: 8px 22px 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.3s;
  border-radius: 14px;
}
.hitl-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hitl-col + .hitl-col {
  border-left: 1px dashed var(--rule-strong);
}
.hitl-col.on {
  background: color-mix(in oklab, var(--paper) 80%, transparent);
}
.hitl-col.on.featured {
  background: linear-gradient(180deg, var(--accent-tint) 0%, color-mix(in oklab, var(--accent-tint) 50%, transparent) 70%, transparent 100%);
}
.hitl-col.on + .hitl-col,
.hitl-col + .hitl-col.on { border-left-color: transparent; }

.hitl-col-head {
  margin-bottom: 18px;
  padding-top: 6px;
}
.hitl-col-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
}
.hitl-col-t {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--display-weight);
  letter-spacing: -0.022em;
  color: var(--ink);
  line-height: 1.15;
  margin: 8px 0 12px;
  transition: color 0.3s;
}
.hitl-col.on .hitl-col-t { color: var(--ink); }
.hitl-col:not(.on) .hitl-col-t { color: color-mix(in oklab, var(--ink) 70%, var(--ash)); }
.hitl-col-d {
  font-size: 13px;
  line-height: 1.55;
  color: var(--quill);
  margin: 0 0 12px;
}
.hitl-col-ex {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ash);
  font-style: italic;
}

/* Sequence frame holds either the active sequence or a hover-tease. */
.hitl-seq-frame {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}
.hitl-seq-tease {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: color-mix(in oklab, var(--ash) 80%, var(--quill));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed var(--rule-strong);
  background: color-mix(in oklab, var(--paper-warm) 60%, transparent);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.hitl-col:hover .hitl-seq-tease {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.hitl-seq-tease-arr svg { color: currentColor; }

.hitl-seq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  flex: 1;
}
.hitl-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.hitl-row.in {
  opacity: 1;
  transform: translateY(0);
}

.hitl-node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--rule);
  max-width: 100%;
  white-space: nowrap;
}
.hitl-node.bot {
  border-color: color-mix(in oklab, var(--accent) 25%, var(--rule));
}
.hitl-node.human {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.g-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 36px;
  flex-shrink: 0;
}
.hitl-node .g {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hitl-node .g.bot {
  background: var(--accent);
  color: var(--paper);
}
.hitl-node .g.human {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.hitl-node.human .g.human {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.hitl-step {
  position: absolute;
  top: -3px; right: -4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--paper-3);
  z-index: 2;
}
.hitl-col.on.featured .hitl-step { border-color: var(--accent-tint); }
.hitl-col.on:not(.featured) .hitl-step { border-color: var(--paper); }

.hitl-node-l {
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.hitl-arr-v {
  display: inline-grid;
  place-items: center;
  padding: 3px 0;
  color: var(--ink);
}

/* Observer area (for on-loop and out-loop) */
.hitl-obs-arrows {
  position: absolute;
  left: 0; right: 0;
  bottom: 56px;
  height: 100px;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}
.hitl-obs-arr {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.hitl-obs-arr.on { opacity: 1; }

.hitl-obs {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--paper);
  border: 1px dashed var(--ash);
  border-radius: 100px;
  align-self: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s;
  position: relative;
  z-index: 1;
}
.hitl-obs.in { opacity: 1; transform: translateY(0); }
.hitl-obs.faded {
  border-style: dashed;
  border-color: var(--rule-strong);
  opacity: 0;
}
.hitl-obs.faded.in {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.hitl-obs .g.human {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.hitl-obs-l {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--quill);
}

/* Footer */
.hitl-col-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 10px;
}
.hitl-foot-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hitl-foot-row .k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.hitl-foot-row .v {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
}

/* Spectrum axis */
.hitl-axis {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
}
.hitl-axis-l, .hitl-axis-r {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--quill);
}
.hitl-axis-r { justify-content: flex-end; }
.hitl-axis-l .dot, .hitl-axis-r .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hitl-axis-l .dot.human {
  background: var(--paper);
  border: 2px solid var(--ink);
}
.hitl-axis-r .dot.bot { background: var(--accent); }
.hitl-axis-line {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hitl-axis-tick {
  width: 30px;
  height: 3px;
  background: var(--rule-strong);
  border-radius: 2px;
  transition: background 0.3s;
}
.hitl-axis-tick.on { background: var(--accent); }

/* Legend */
.hitl-legend {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
}
.hitl-leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--quill);
}
.hitl-leg .g {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hitl-leg .g.bot {
  background: var(--accent);
  color: var(--paper);
}
.hitl-leg .g.bot svg { width: 14px; height: 14px; }
.hitl-leg .g.human {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.hitl-leg .g.human svg { width: 14px; height: 14px; }
.hitl-leg-line {
  width: 28px;
  height: 0;
  border-top: 1.5px dashed var(--ash);
}

@media (max-width: 1100px) {
  .hitl-grid { grid-template-columns: repeat(2, 1fr); gap: 8px 0; }
  .hitl-col + .hitl-col { border-left: none; }
  .hitl-col:nth-child(odd) { border-right: 1px dashed var(--rule-strong); padding-right: 24px; }
  .hitl-col:nth-child(n+3) { border-top: 1px dashed var(--rule-strong); padding-top: 22px; margin-top: 12px; }
}
@media (max-width: 640px) {
  .hitl { padding: 22px 18px; }
  .hitl-grid { grid-template-columns: 1fr; }
  .hitl-col:nth-child(odd) { border-right: none; padding-right: 0; }
  .hitl-col:nth-child(n+2) { border-top: 1px dashed var(--rule-strong); padding-top: 22px; margin-top: 12px; }
  .hitl-axis { grid-template-columns: 1fr; gap: 10px; }
  .hitl-axis-r { justify-content: flex-start; }
  .hitl-seq-frame { min-height: 240px; }
}

/* ============================================
   SECTORS MATRIX — Leistungen "Anwendung" (Procurement-style)
   ============================================ */
.smtx {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px;
}
.smtx-tabs {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 28px;
  gap: 2px;
  flex-wrap: wrap;
}
.smtx-tab {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--quill);
  transition: background 0.25s, color 0.25s;
}
.smtx-tab:hover { color: var(--ink); }
.smtx-tab.on {
  background: var(--ink);
  color: var(--paper);
}

.smtx-panel {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  animation: smtxFade 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes smtxFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Matrix */
.smtx-matrix-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.smtx-matrix-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.smtx-matrix-l {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--display-weight);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.smtx-matrix-r {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--quill);
  text-align: right;
}

.smtx-matrix {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: 1fr 18px;
  gap: 6px;
  min-height: 380px;
  flex: 1;
}
.smtx-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  display: flex;
  align-items: center;
  justify-content: center;
}
.smtx-x {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  display: flex;
  align-items: center;
  justify-content: center;
}
.smtx-board {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, color-mix(in oklab, var(--rule) 50%, transparent) 24px 25px),
    repeating-linear-gradient(90deg, transparent 0 24px, color-mix(in oklab, var(--rule) 50%, transparent) 24px 25px),
    var(--paper-warm);
  overflow: hidden;
}
.smtx-priority {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.smtx-divv {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rule-strong);
}
.smtx-divh {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--rule-strong);
}

.smtx-dot {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--rule-strong) 85%, var(--ink));
  transform: translate(-50%, -50%);
  cursor: default;
  z-index: 1;
  display: grid;
  place-items: center;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  border: 2px solid var(--paper-warm);
}
.smtx-dot.hi {
  background: color-mix(in oklab, var(--accent) 70%, var(--paper));
  width: 22px; height: 22px;
  z-index: 3;
}
.smtx-dot.hi.primary {
  background: var(--accent);
  width: 26px; height: 26px;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 35%, transparent);
  z-index: 4;
}
.smtx-dot:hover, .smtx-dot.hover {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 5;
}
.smtx-dot-n {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: 0.04em;
  line-height: 1;
}
.smtx-dot-tip {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  padding: 5px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  letter-spacing: -0.003em;
  z-index: 6;
}
.smtx-dot-tip::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px;
  background: var(--ink);
}
.smtx-dot:hover .smtx-dot-tip, .smtx-dot.hover .smtx-dot-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Quadrant labels — sit in each corner of the board, away from dots */
.smtx-q {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  pointer-events: none;
  padding: 4px 8px;
  background: color-mix(in oklab, var(--paper-warm) 80%, transparent);
  border-radius: 4px;
  z-index: 1;
}
.smtx-q.tl { top: 8px;    left: 10px; }
.smtx-q.tr { top: 8px;    right: 10px; color: var(--accent-deep); font-weight: 600; }
.smtx-q.bl { bottom: 8px; left: 10px; }
.smtx-q.br { bottom: 8px; right: 10px; }

/* Cases */
.smtx-cases-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.smtx-cases-sub {
  font-size: 13px;
  color: var(--quill);
  line-height: 1.5;
}
.smtx-cases-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.smtx-case {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  transition: border-color 0.3s, transform 0.3s;
}
.smtx-case:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.smtx-case.primary {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--rule));
  background: var(--accent-tint);
}
.smtx-case-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-tint2);
  color: var(--accent-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.smtx-case-ic svg { width: 20px; height: 20px; }
.smtx-case.primary .smtx-case-ic {
  background: var(--accent);
  color: var(--paper);
}
.smtx-case .smtx-case-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
  padding: 0;
  border: none;
}
.smtx-case-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.smtx-case h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--display-weight);
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
.smtx-case p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--quill);
  margin: 6px 0 0;
}
.smtx-case-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.smtx-case-lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--quill);
  margin: 0;
}
.smtx-case-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.smtx-case-kpi {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: color-mix(in oklab, var(--paper-3) 80%, transparent);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.smtx-case-kpi::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
}
.smtx-case.primary .smtx-case-kpi {
  background: var(--paper);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--rule));
}
.smtx-case-head {
  flex-wrap: wrap;
  gap: 4px 10px !important;
}
.smtx-case-head .smtx-case-n {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .smtx-panel { grid-template-columns: 1fr; }
  .smtx-matrix { min-height: 320px; }
}
@media (max-width: 640px) {
  .smtx { padding: 20px; }
  .smtx-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .smtx-tab { white-space: nowrap; }
}


/* ============================================
   SCROLL HERO v2 — light · integrated · scroll-driven story
   Hero solo → fades out → Input chips → AI core → Output chips → KPIs.
   No eyebrow badge, no left-side phase labels.
   ============================================ */
.shero {
  position: relative;
  height: 460vh;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 50%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule);
}
.shero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 22% 22%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 35% at 78% 65%, color-mix(in oklab, var(--accent) 8%, transparent),  transparent 70%);
  opacity: 0.44;
}
.shero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  contain: layout paint style;
}
.shero-stage {
  position: relative;
  height: 100%;
}

/* ============================================
   Hero header — absolutely centered, fades to 0
   ============================================ */
.shero-head {
  position: absolute;
  /* Center within the area below the fixed nav (~80px) */
  top: calc(50% + 40px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, calc(100% - 80px));
  text-align: center;
  z-index: 5;
  will-change: transform, opacity;
}
.shero-head h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 70px;
  line-height: 1.0;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  font-feature-settings: "kern", "liga", "dlig";
}
.shero-head h1 em { font-style: italic; color: var(--accent); }
.shero-break-mobile { display: inline; }
.shero-head .shero-lede {
  margin: 28px auto 0;
  max-width: 580px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--quill);
}
.shero-head .shero-lede em { font-style: italic; color: var(--ink); }
.shero-head .shero-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* Subtle scroll teaser ------------------------------------- */
.shero-scroll {
  margin-top: 48px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  transition: opacity 0.35s ease;
}
.shero-scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, var(--rule-strong) 30%, var(--accent));
  position: relative;
  overflow: hidden;
}
.shero-scroll-line::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -40%;
  height: 40%;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: sheroScrollPulse 2.2s ease-in-out infinite;
}
@keyframes sheroScrollPulse {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}
.shero-scroll-l {
  color: var(--ash);
  font-weight: 500;
}
.shero-scroll-chev {
  width: 14px;
  height: 14px;
  color: var(--accent);
  animation: sheroChev 2.2s ease-in-out infinite;
}
@keyframes sheroChev {
  0%, 100% { transform: translateY(0);   opacity: 0.7; }
  50%      { transform: translateY(3px); opacity: 1;   }
}

/* ============================================
   PIPELINE — scrollytelling conveyor (v3)
   Sticky narration + a track that carries discrete
   stops through a fixed read-line. Replaces the old
   four-band canvas that overlapped on mobile.
   ============================================ */
.shero-pipe {
  position: absolute;
  inset: 92px 0 0;
  display: grid;
  grid-template-columns: minmax(248px, 30%) 1fr;
  align-items: stretch;
  gap: clamp(24px, 4vw, 64px);
  will-change: opacity;
}

/* ---- Narration (left) ---- */
.ppl-narrate {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.ppl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ppl-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: 0.5;
  transition: opacity 0.45s ease, color 0.45s ease;
}
.ppl-steps li:first-child { border-top: none; }
.ppl-steps li .num {
  font-weight: 600;
  color: var(--rule-strong);
  transition: color 0.45s ease;
}
.ppl-steps li.done { opacity: 0.82; }
.ppl-steps li.done .num { color: var(--accent-deep); }
.ppl-steps li.on { opacity: 1; color: var(--ink); }
.ppl-steps li.on .num { color: var(--accent); }
.ppl-steps li.on .lab { font-weight: 500; }

.ppl-narrate-body {
  position: relative;
  min-height: 232px;
}
.ppl-narr {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.22,1,0.36,1), transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.ppl-narr.on { opacity: 1; visibility: visible; transform: none; }
.ppl-narr h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.ppl-narr p {
  margin: 18px 0 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--quill);
}

/* ---- Track (right) — the moving conveyor ---- */
.ppl-track {
  position: relative;
  overflow: hidden;
  contain: layout paint;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
}
.ppl-flow {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(46px, 6.5vh, 86px);
  padding: 44vh 0;
  will-change: transform;
  backface-visibility: hidden;
}
/* faint conduit running through every stop */
.ppl-spine {
  position: absolute;
  top: 0; bottom: 0;
  left: 23px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in oklab, var(--accent) 26%, transparent) 6%,
    color-mix(in oklab, var(--accent) 26%, transparent) 94%,
    transparent);
}
/* accent "flow" that fills the conduit down to the read-line as you scroll */
.ppl-spine-fill {
  position: absolute;
  top: 0;
  left: 23px;
  width: 2px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 45%, transparent),
    var(--accent));
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 40%, transparent);
  z-index: 1;
  transform-origin: top;
  transform: scaleY(0);
  will-change: transform;
}
/* live packet travelling down the conduit (direction of flow) */
.ppl-spine::after {
  display: none;
}
@keyframes pplFlow {
  from { transform: translateY(-80px); }
  to   { transform: translateY(105vh); }
}

/* fixed read-line target ring */
.ppl-readline {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 0;
  z-index: 1;
  pointer-events: none;
}
.ppl-readline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}

/* ---- Stops ---- */
.ppl-stop {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  transform-origin: left center;
  will-change: transform, opacity;
  contain: layout paint;
}
/* short tick that hangs each element off the flow conduit */
.ppl-link {
  position: absolute;
  top: 50%;
  left: 24px;
  width: 22px;
  height: 1px;
  transform: translateY(-50%);
  background: var(--rule-strong);
  transition: background 0.4s ease;
  z-index: 1;
}
.ppl-stop.is-focus .ppl-link,
.ppl-stop.is-done .ppl-link { background: var(--accent); }
.ppl-node {
  grid-column: 1;
  justify-self: center;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rule-strong);
  box-shadow: 0 0 0 5px var(--paper);
  z-index: 3;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* nodes the flow has already passed stay filled — a visible trail */
.ppl-stop.is-done .ppl-node {
  background: var(--accent);
  border-color: var(--accent);
}
.ppl-stop.is-focus .ppl-node {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow:
    0 0 0 5px var(--paper),
    0 0 0 10px color-mix(in oklab, var(--accent) 14%, transparent),
    0 0 18px color-mix(in oklab, var(--accent) 55%, transparent);
}

/* input / output: no surrounding box — elements float on the flow */
.ppl-io { grid-column: 2; }

.ppl-card {
  grid-column: 2;
  background: var(--paper-3);
  border: 1px solid var(--rule-strong);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(10,10,10,0.03);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* organic flow connectors — converging funnel (inputs → engine) and
   diverging fan (engine → outputs), echoing the petal/chalice motif.
   Padded by the node column so the curves sit over the engine, not the spine. */
.ppl-conn {
  padding-left: 48px;
  margin: -14px 0;
  pointer-events: none;
}
.ppl-conn svg {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ppl-conn .ppl-rail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.7;
  stroke-opacity: 0.4;
  stroke-linecap: round;
  transition: stroke-opacity 0.5s ease;
}
.ppl-conn.on .ppl-rail { stroke-opacity: 0.66; }

/* traveling comet pulse — a short bright segment runs the length of each
   curve so energy visibly flows down the fan, in step with the conveyor.
   pathLength="100" normalises the dash maths across the differently-curved
   lines; per-line animationDelay (set inline) staggers them into a wave. */
.ppl-conn .ppl-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-opacity: 0.95;
  stroke-linecap: round;
  stroke-dasharray: 14 100;
  stroke-dashoffset: 114;
  opacity: 0;
  will-change: stroke-dashoffset, opacity;
}
.ppl-conn.on .ppl-pulse {
  animation: none;
  opacity: 0;
}
@keyframes pplPulse {
  0%   { stroke-dashoffset: 114; opacity: 0; }
  14%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: -14; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ppl-conn.on .ppl-pulse { animation: none; opacity: 0; }
}
.ppl-conn .ppl-ah {
  fill: var(--accent);
  fill-opacity: 0.5;
  stroke: none;
  transition: fill-opacity 0.5s ease;
}
.ppl-conn.on .ppl-ah { fill-opacity: 0.9; }
.ppl-stop.is-focus .ppl-card {
  border-color: color-mix(in oklab, var(--accent) 36%, var(--rule-strong));
  box-shadow:
    0 26px 60px -30px color-mix(in oklab, var(--accent) 28%, rgba(10,10,10,0.16)),
    0 2px 6px rgba(10,10,10,0.04);
}
.ppl-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* IO chips (inputs + outputs) */
.ppl-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.ppl-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 7px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  opacity: 0.5;
  transform: translateY(7px);
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.45s ease;
}
.ppl-chip.on { opacity: 1; transform: none; }
.ppl-chip .ic {
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.4s ease, color 0.4s ease;
}
.ppl-chip.on .ic { background: var(--accent); color: var(--paper); }
.ppl-chip .ic svg { width: 13px; height: 13px; }
.ppl-chip .lbl { display: flex; flex-direction: column; line-height: 1.15; }
.ppl-chip .lbl .t { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.ppl-chip .lbl .s { font-size: 10.5px; color: var(--ash); }

/* ---- The engine: four steps shown together as one unit ---- */
.ppl-engine-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ppl-engine-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}
.ppl-engine-sub .ar { color: var(--accent); padding: 0 3px; }

.ppl-engine-steps {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.ppl-estep {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: color-mix(in oklab, var(--paper) 55%, transparent);
  opacity: 0.5;
  overflow: hidden;
  transition: opacity 0.45s ease, border-color 0.45s ease, background 0.45s ease;
}
.ppl-estep.on {
  opacity: 1;
  border-color: color-mix(in oklab, var(--accent) 40%, var(--rule-strong));
  background: var(--paper-3);
}
.ppl-estep .ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  transition: background 0.45s ease, color 0.45s ease;
}
.ppl-estep.on .ic { background: var(--accent); color: var(--paper); }
.ppl-estep .ic svg { width: 15px; height: 15px; }
.ppl-estep .meta { display: flex; flex-direction: column; gap: 3px; }
.ppl-estep .n {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.ppl-estep .l {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ppl-estep .s { font-size: 11.5px; line-height: 1.4; color: var(--quill); }
.ppl-estep-bar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0.85;
}
/* connectors that thread the four steps into one continuous engine */
.ppl-estep-link {
  align-self: center;
  flex: 0 0 auto;
  position: relative;
  width: 16px; height: 1px;
  color: var(--rule-strong);
  background: currentColor;
  transition: color 0.45s ease;
}
.ppl-estep-link.on { color: var(--accent); }
.ppl-estep-link::after {
  content: '';
  position: absolute;
  right: -1px; top: 50%;
  width: 5px; height: 5px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
}

/* KPI impact card */
.ppl-impact .ppl-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 28px;
}
.ppl-kpi { display: flex; flex-direction: column; gap: 7px; }
.ppl-kpi .v {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ppl-kpi .v em { font-style: italic; color: var(--accent); }
.ppl-kpi .l { font-size: 12.5px; line-height: 1.4; color: var(--quill); }

/* ============================================
   Reduced motion + responsive
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .ppl-spine::after,
  .shero-scroll-line::after,
  .shero-scroll-chev { animation: none; }
}

@media (max-width: 920px) {
  .shero { height: 400vh; }
  .shero-head h1 { font-size: 48px; line-height: 1.03; }
  .shero-pipe {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    inset: 74px 0 0;
    gap: 0;
  }
  .ppl-narrate {
    align-self: start;
    gap: 12px;
    padding: 14px 20px 16px;
    border-bottom: 1px solid var(--rule);
    background: color-mix(in oklab, var(--paper) 96%, var(--paper-warm));
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 18px 42px -34px rgba(10,10,10,0.22);
    z-index: 3;
  }
  .ppl-steps { flex-direction: row; align-items: center; gap: 0; }
  .ppl-steps li {
    border-top: none;
    padding: 0;
    margin-right: 14px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    gap: 6px;
  }
  .ppl-steps li .lab { display: none; }
  .ppl-steps li.on .lab { display: inline; }
  .ppl-narrate-body { min-height: 128px; }
  .ppl-narr h2 { font-size: clamp(23px, 6vw, 30px); }
  .ppl-narr p { margin-top: 10px; max-width: 40ch; font-size: 13.5px; line-height: 1.55; }

  .ppl-track { padding: 0 20px; }
  .ppl-flow { gap: clamp(40px, 5.5vh, 64px); padding: 40vh 0; }
  .ppl-stop { grid-template-columns: 38px 1fr; }
  .ppl-spine, .ppl-spine-fill { left: 18px; }
  .ppl-readline::before { left: 19px; }
  .ppl-link { left: 19px; width: 16px; }
  .ppl-card { padding: 16px 17px; border-radius: 14px; }
  .ppl-conn { padding-left: 38px; margin: -8px 0; }
  .ppl-conn svg { max-width: 280px; }
  .ppl-impact .ppl-kpis { gap: 16px 20px; }
  .ppl-chip { padding: 6px 12px 6px 6px; gap: 8px; }
  .ppl-chip .ic { width: 25px; height: 25px; }

  /* engine: a clean vertical list of four steps. The fiddly connector
     dashes are dropped on mobile — the spine, the lit state and the
     per-step progress bar already carry the sequence. */
  .ppl-engine-steps { flex-direction: column; gap: 8px; }
  .ppl-estep {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 12px 14px;
    border-radius: 12px;
    overflow: visible;
  }
  .ppl-estep .ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; }
  .ppl-estep .ic svg { width: 17px; height: 17px; }
  .ppl-estep .meta { flex: 1; }
  .ppl-estep .l { font-size: 16.5px; }
  .ppl-estep .s { font-size: 12px; line-height: 1.45; }
  .ppl-estep-link { display: none; }

  .ppl-kpi .l { font-size: 13px; }

  /* calmer on mobile: stop the perpetual conduit packet + comet pulses */
  .ppl-spine::after { display: none; }
  .ppl-conn.on .ppl-pulse { animation: none; opacity: 0; }
}

@media (max-width: 560px) {
  .shero { height: 380vh; }
  .ppl-impact .ppl-kpis { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .ppl-chip .lbl .s { display: none; }
  .ppl-chip .lbl .t { font-size: 12px; }
  /* drop the cramped converging/diverging arrow fans on narrow phones —
     they read as clutter at this width; the spine carries the flow */
  .ppl-conn { display: none; }
}


/* ============================================
   CAPABILITY VENN — clean redesign
   Push each circle's label to its outer edge so they
   never overlap with the center logo or each other.
   ============================================ */
.venn {
  max-width: 520px !important;
  padding: 8px;
}
.venn-circle {
  width: 64% !important;
  background: color-mix(in oklab, var(--accent) 6%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent) !important;
  display: block !important;
  place-items: unset !important;
}
.venn-circle:hover { background: color-mix(in oklab, var(--accent) 11%, transparent) !important; }
.venn-circle.c1 { top: 0; left: 18%; }
.venn-circle.c2 { bottom: 0; left: 0; }
.venn-circle.c3 { bottom: 0; right: 0; }

/* Label container — absolutely positioned per circle, away from overlap */
.venn-circle .venn-circle-body {
  position: absolute;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px !important;
  padding: 0 8px !important;
  max-width: 160px !important;
  text-align: center;
  z-index: 3;
}
/* c1 (top circle) — label sits near top edge */
.venn-circle.c1 .venn-circle-body {
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
}
/* c2 (bottom-left) — label sits centered inside the left circle,
   safely away from the central overlap */
.venn-circle.c2 .venn-circle-body {
  top: 68%;
  left: 38%;
  transform: translate(-50%, -50%);
  max-width: 150px !important;
}
/* c3 (bottom-right) — label sits centered inside the right circle,
   on the same vertical line as c2 */
.venn-circle.c3 .venn-circle-body {
  top: 68%;
  right: 38%;
  transform: translate(50%, -50%);
  max-width: 150px !important;
}
.venn-circle .venn-circle-body .t {
  font-size: 17px !important;
  line-height: 1.1 !important;
}
.venn-circle .venn-circle-body .d {
  font-size: 11px !important;
  max-width: 160px !important;
  color: var(--quill);
}

/* Center logo — positioned at the visual centroid (triple-intersection),
   not the bounding-box center */
.venn-center-logo {
  top: 56% !important;
  width: 104px !important;
  height: 104px !important;
  padding: 20px !important;
  background: var(--paper) !important;
  border-radius: 50% !important;
  box-shadow:
    0 14px 36px rgba(10,10,10,0.12),
    0 0 0 1px var(--rule-strong),
    0 0 0 8px var(--paper) !important;
  z-index: 4 !important;
  mix-blend-mode: normal;
}
.venn-center-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

@media (max-width: 720px) {
  .venn { max-width: 380px !important; }
  .venn-circle .venn-circle-body .t { font-size: 15px !important; }
  .venn-circle .venn-circle-body .d { font-size: 10.5px !important; }
  .venn-center-logo { width: 84px !important; height: 84px !important; padding: 16px !important; }
}


/* ============================================
   HALLUCINATION STUDY — 3-column editorial block
   Beispiel · Ursachen · Gegenmaßnahmen
   ============================================ */
.hstudy {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,10,10,0.02);
}
.hstudy-col {
  padding: 32px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}
.hstudy,
.hstudy-col,
.hstudy-msg,
.hstudy-bubble,
.hstudy-takeaway,
.hstudy-remedy-min-body {
  min-width: 0;
}
.hstudy-col + .hstudy-col { border-left: 1px solid var(--rule); }

.hstudy-col-head { display: flex; flex-direction: column; gap: 6px; }
.hstudy-col-head .hstudy-col-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
}
.hstudy-col-head h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
.hstudy-col-head .hstudy-col-lede {
  font-size: 13px;
  color: var(--quill);
  line-height: 1.5;
  max-width: 280px;
}

/* ----- Column 1: chat ----- */
.hstudy-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Staggered build-up animation — each message reveals in sequence. */
.hstudy-chat-anim .hstudy-msg,
.hstudy-chat-anim .hstudy-takeaway {
  opacity: 0;
  transform: translateY(6px);
  animation: hstudyMsgIn 0.45s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay: var(--d, 0s);
}
.hstudy-stat-anim {
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
  animation: hstudyStampIn 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes hstudyMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hstudyStampIn {
  0%   { opacity: 0; transform: scale(0.5) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(1.18) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.hstudy-msg {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  align-items: start;
}
.hstudy-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--rule);
}
.hstudy-av.av-human { background: var(--paper-2, #f1ece4); color: var(--ink); }
.hstudy-av.av-bot   { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.hstudy-bubble {
  background: var(--paper-3, #f7f3ec);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 8px 12px 9px;
}
.hstudy-msg.bot .hstudy-bubble {
  background: color-mix(in oklab, var(--accent) 5%, var(--paper));
  border-color: color-mix(in oklab, var(--accent) 22%, var(--rule));
}
.hstudy-bubble p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
.hstudy-bubble p em { font-style: italic; color: var(--accent-deep); font-weight: 500; }
.hstudy-anns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed color-mix(in oklab, var(--accent) 30%, transparent);
}
.hstudy-ann {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  padding: 2.5px 7px;
  border-radius: 999px;
  font-weight: 600;
}
.hstudy-ann.ok {
  color: oklch(0.42 0.13 150);
  background: color-mix(in oklab, oklch(0.55 0.13 150) 14%, transparent);
}

.hstudy-stat {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  align-self: center;
  color: var(--paper);
}
.hstudy-stat.err { background: var(--accent-deep, #8c5a1d); }
.hstudy-stat.ok  { background: oklch(0.55 0.13 150); }

/* ----- Toggle (Ohne / Mit Grounding) ----- */
.hstudy-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--paper-3, #f7f3ec);
  border: 1px solid var(--rule);
  border-radius: 999px;
  margin: 4px 0 14px;
}
.hstudy-toggle-btn {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--quill);
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.hstudy-toggle-btn:hover { color: var(--ink); }
.hstudy-toggle-btn.is-on {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 4px 14px -8px rgba(10,10,10,0.4);
}
.hstudy-toggle-btn.is-on:hover { color: var(--paper); }
.hstudy-toggle-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hstudy-toggle-dot.err { background: var(--accent-deep, #8c5a1d); }
.hstudy-toggle-dot.ok  { background: oklch(0.55 0.13 150); }
.hstudy-toggle-btn.is-on .hstudy-toggle-dot {
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 18%, transparent);
}

.hstudy-chat-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vellum, #968b7a);
  margin: 4px 2px 0;
}
.hstudy-chat-divider::before,
.hstudy-chat-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.hstudy-takeaway {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  background: color-mix(in oklab, var(--accent) 7%, var(--paper-3));
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--rule));
  text-wrap: pretty;
}
.hstudy-takeaway p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.003em;
}
.hstudy-takeaway em {
  font-style: italic;
  color: var(--accent-deep);
  font-weight: 500;
}
.hstudy-takeaway-l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent-deep);
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  align-self: center;
  white-space: nowrap;
}
.hstudy-takeaway-ok {
  background: color-mix(in oklab, oklch(0.55 0.13 150) 8%, var(--paper-3));
  border-color: color-mix(in oklab, oklch(0.55 0.13 150) 25%, var(--rule));
  border-left-color: oklch(0.55 0.13 150);
}
.hstudy-takeaway-ok .hstudy-takeaway-l {
  background: oklch(0.45 0.13 150);
}
.hstudy-takeaway-ok em {
  color: oklch(0.45 0.13 150);
}

/* ----- Column 2: causes grid ----- */
.hstudy-causes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hstudy-cause {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  background: var(--paper-3, #f7f3ec);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.hstudy-cause:hover {
  background: var(--paper);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--rule));
  transform: translateY(-1px);
}
.hstudy-cause-ic {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--ink);
}
.hstudy-cause-ic svg { width: 22px; height: 22px; }
.hstudy-cause-t {
  font-size: 13px;
  line-height: 1.25;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ----- Column 3: remedies (numbered) ----- */
.hstudy-remedies-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.hstudy-remedy {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--rule);
  align-items: start;
}
.hstudy-remedy:first-child { padding-top: 0; }
.hstudy-remedy:last-child { border-bottom: none; padding-bottom: 0; }
.hstudy-remedy-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  padding-top: 3px;
}
.hstudy-remedy-t {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: 4px;
}
.hstudy-remedy-d {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--quill);
  text-wrap: pretty;
}
.hstudy-remedy-addr {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dotted var(--rule);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.hstudy-remedy-addr-l {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
}
.hstudy-remedy-addr-v {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent-deep);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .hstudy { grid-template-columns: 1fr 1fr; }
  .hstudy-col + .hstudy-col { border-left: 1px solid var(--rule); }
  .hstudy-remedies { grid-column: 1 / -1; border-left: none !important; border-top: 1px solid var(--rule); }
  .hstudy-remedies-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .hstudy-remedies-list .hstudy-remedy:nth-child(2) { padding-top: 0; }
  .hstudy-remedies-list .hstudy-remedy:nth-child(odd):last-child { border-bottom: 1px dashed var(--rule); }
}
@media (max-width: 720px) {
  .hstudy { grid-template-columns: 1fr; }
  .hstudy-col { padding: 26px 22px; }
  .hstudy-col + .hstudy-col { border-left: none; border-top: 1px solid var(--rule); }
  .hstudy-remedies { grid-column: auto; }
  .hstudy-remedies-list { grid-template-columns: 1fr; }
  .hstudy-causes-grid { grid-template-columns: 1fr 1fr; }
  .hstudy-col-head h3 { font-size: 22px; }
}

@media (max-width: 420px) {
  .hstudy-col { padding: 24px 18px; }
  .g-wrap {
    min-width: 44px;
    overflow: visible;
  }
  .hstudy-msg {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 6px;
  }
  .hstudy-av {
    width: 24px;
    height: 24px;
  }
  .hstudy-causes-grid { grid-template-columns: 1fr; }
}


/* Sub-block heading for the hallucination study inside Maturity section */
.hstudy-wrap { margin-top: 72px; }
.hstudy-subhead {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.hstudy-subhead h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0;
  max-width: 680px;
  text-wrap: pretty;
}
.hstudy-subhead h3 em { font-style: italic; color: var(--accent); }
.hstudy-subhead p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--quill);
  margin: 0;
  max-width: 600px;
}
.hstudy-subhead p em { font-style: italic; color: var(--ink); font-weight: 500; }

@media (max-width: 720px) {
  .hstudy-wrap { margin-top: 48px; }
  .hstudy-subhead h3 { font-size: 24px; }
}


/* ============================================
   VERTICAL PROGRAM LIST — compact (home overview)
   ============================================ */
.vplist-detail:not(.has-viz) {
  min-height: 0;
  padding: 32px 36px;
  align-self: start;
  top: 96px;
}
.vplist-detail:not(.has-viz) p {
  margin-bottom: 4px;
}
.vplist-detail:not(.has-viz) .vplist-price-row {
  margin-top: 18px;
  margin-bottom: 18px;
}
.vplist-detail:not(.has-viz) .vplist-bignum {
  top: 12px;
  right: 24px;
  font-size: 96px;
}
@media (max-width: 560px) {
  .vplist-detail:not(.has-viz) {
    top: 0;
    padding: 26px 22px 24px;
  }
  .vplist-detail:not(.has-viz) .vplist-bignum {
    top: 12px;
    right: 18px;
    font-size: 78px;
  }
}




/* ============================================
   METHODIK · 30 / 60 / 90 — editoriale Meilensteine
   ============================================ */
.m90 {
  display: flex;
  flex-direction: column;
}

/* Verbindende Linie: läuft von dezent ins Gold (Richtung Wirkung) */
.m90-track {
  position: relative;
  height: 11px;
  margin-bottom: 44px;
}
.m90-track-line {
  position: absolute;
  left: 0; right: 0; top: 5px;
  height: 1px;
  background: linear-gradient(90deg, var(--rule-strong), var(--accent));
  transform-origin: left center;
}
.m90-track-dot {
  position: absolute;
  top: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 2px solid var(--accent);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), background-color 0.4s cubic-bezier(0.16,1,0.3,1);
}
.m90-track-dot:nth-child(2) { left: 0; }
.m90-track-dot:nth-child(3) { left: 33.333%; transform: translateX(-50%); }
.m90-track-dot:nth-child(4) { left: 66.666%; transform: translateX(-50%); }
.m90-track-dot:last-child { background: var(--accent); }

/* Drei Spalten, getrennt durch Hairlines */
.m90-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.m90-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 36px;
  min-width: 0;
}
.m90-col + .m90-col {
  border-left: 1px solid var(--rule);
  padding-left: 36px;
}
.m90-col:last-child { padding-right: 0; }

/* Riesige Tag-Zahl: Crescendo von dezent zu Gold */
.m90-day {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.m90-day-l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ash);
  margin-top: 14px;
}
.m90-day-n {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(84px, 8.5vw, 124px);
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--vellum);
  font-variant-numeric: tabular-nums;
  min-width: 2.1ch;
  transition: color 0.6s cubic-bezier(0.16,1,0.3,1);
}
.m90-col-2 .m90-day-n { color: var(--ink); }
.m90-col-3 .m90-day-n { color: var(--accent); }
.m90-col:hover .m90-day-n { color: var(--accent-deep); }

.m90-lab {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.m90-lab::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent);
}

.m90-col h3 {
  margin: 14px 0 26px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(21px, 1.9vw, 25px);
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}
.m90-col h3 em { font-style: italic; color: var(--accent); }

/* Ergebnis-Zeile: das prüfbare Artefakt der Phase, am Spaltenboden ausgerichtet */
.m90-result {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.m90-result-ic {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.m90-result-ic svg { width: 11px; height: 11px; }
.m90-result-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.m90-result-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ash);
}
.m90-result-v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* Abschluss: nächster Schritt */
.m90-next {
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.m90-next-t {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.m90-next-t em { font-style: italic; color: var(--accent); }
.m90-next-meta {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
}
.m90-next-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px 13px 24px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.35s, transform 0.3s;
}
.m90-next-cta:hover { background: var(--accent); transform: translateY(-1px); }
.m90-next-cta .ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  display: grid; place-items: center;
  transition: transform 0.3s;
}
.m90-next-cta .ic svg { width: 13px; height: 13px; }
.m90-next-cta:hover .ic { transform: translateX(3px); }

/* Reveal-Choreografie: Linie wächst, Marker und Spalten folgen gestaffelt */
.reveal .m90-track-line {
  transform: scaleX(0);
  transition: transform 1.3s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
.reveal.in .m90-track-line { transform: scaleX(1); }
.reveal .m90-track-dot {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1), background-color 0.4s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in .m90-track-dot { opacity: 1; }
.reveal.in .m90-track-dot:nth-child(2) { transition-delay: 0.15s; }
.reveal.in .m90-track-dot:nth-child(3) { transition-delay: 0.5s; }
.reveal.in .m90-track-dot:nth-child(4) { transition-delay: 0.85s; }
.reveal .m90-col,
.reveal .m90-next {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1), filter 0.5s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in .m90-col,
.reveal.in .m90-next {
  opacity: 1;
  transform: translateY(0);
}
.reveal.in .m90-col-2 { transition-delay: 0.14s; }
.reveal.in .m90-col-3 { transition-delay: 0.28s; }
.reveal.in .m90-next { transition-delay: 0.45s; }

/* Gold-Glanz läuft einmalig über die 90, sobald der Count-up endet */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .reveal.in .m90-col-3 .m90-day-n {
    background-image: linear-gradient(105deg, var(--accent) 38%, #E9CA96 50%, var(--accent) 62%);
    background-size: 240% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: m90-shine 1.5s cubic-bezier(0.16,1,0.3,1) 1.5s 1 backwards;
  }
  .reveal.in .m90-col-3:hover .m90-day-n {
    background-image: linear-gradient(var(--accent-deep), var(--accent-deep));
  }
}
@keyframes m90-shine {
  from { background-position: 130% 0; }
  to { background-position: 0% 0; }
}

/* Hover-Fokus: berührte Phase bleibt scharf, Geschwister treten zurück,
   der zugehörige Meilenstein-Marker antwortet auf der Linie */
@media (hover: hover) {
  .m90-grid:has(.m90-col:hover) .m90-col:not(:hover) {
    filter: opacity(0.55) saturate(0.7);
  }
  .m90:has(.m90-col-1:hover) .m90-track-dot:nth-child(2) {
    transform: scale(1.4);
    background-color: var(--accent);
  }
  .m90:has(.m90-col-2:hover) .m90-track-dot:nth-child(3) {
    transform: translateX(-50%) scale(1.4);
    background-color: var(--accent);
  }
  .m90:has(.m90-col-3:hover) .m90-track-dot:nth-child(4) {
    transform: translateX(-50%) scale(1.4);
  }
}

/* Druck-Feedback; !important schlägt den Inline-Transform des magnetischen Effekts */
.m90-next-cta:active { transform: scale(0.97) !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal .m90-track-line,
  .reveal .m90-track-dot,
  .reveal .m90-col,
  .reveal .m90-next {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .reveal .m90-track-dot:nth-child(3),
  .reveal .m90-track-dot:nth-child(4) { transform: translateX(-50%); }
  .reveal.in .m90-col-3 .m90-day-n { animation: none; }
  .m90-grid:has(.m90-col:hover) .m90-col:not(:hover) { filter: none; }
}

@media (max-width: 1024px) {
  .m90-track { display: none; }
  /* Vertikale Rail ersetzt die horizontale Linie: roter Faden durch die Meilensteine */
  .m90-grid {
    grid-template-columns: 1fr;
    position: relative;
    padding-left: 28px;
  }
  .m90-grid::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 40px;
    bottom: 48px;
    width: 1px;
    background: linear-gradient(180deg, var(--rule-strong), var(--accent));
  }
  .m90-col {
    padding: 24px 0;
    position: relative;
  }
  .m90-col + .m90-col {
    border-left: 0;
    padding-left: 0;
  }
  .m90-col::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 38px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--paper-2);
    border: 2px solid var(--accent);
  }
  .m90-col-3::before { background: var(--accent); }
  .m90-col:last-child { padding-bottom: 0; }
  .m90-day-n { font-size: clamp(72px, 14vw, 96px); }
  .m90-next {
    margin-top: 44px;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   Hallucination Study — minimal remedies + inline mono
   ============================================ */
.hstudy-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hstudy-inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: var(--accent);
  text-decoration: none;
  padding: 11px 4px;
  margin: -11px -4px;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  transition: border-color 0.2s, color 0.2s;
}
.hstudy-inline-link:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}
.hstudy-remedies-min {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hstudy-remedy-min {
  display: grid;
  grid-template-columns: 32px 1fr 18px;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px dashed var(--rule);
  transition: padding-left 0.3s;
}
.hstudy-remedy-min:first-child { border-top: none; }
.hstudy-remedy-min:hover { padding-left: 6px; }
.hstudy-remedy-min:hover .hstudy-remedy-min-arr {
  color: var(--accent);
  transform: translateX(3px);
}
.hstudy-remedy-min-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
}
.hstudy-remedy-min-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}
.hstudy-remedy-min-t {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.2;
}
.hstudy-remedy-min-d {
  font-size: 12.5px;
  color: var(--quill);
  line-height: 1.45;
}
.hstudy-remedy-min-arr {
  color: var(--ash);
  display: grid;
  place-items: center;
  transition: color 0.25s, transform 0.25s;
}
.hstudy-jump {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s;
  align-self: flex-start;
}
.hstudy-jump:hover { background: var(--accent-deep); transform: translateY(-2px); }


/* ============================================
   PRAXIS · clean editorial (replaces .prxc on /leistungen)
   ============================================ */
.prxn {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper);
}
.prxn-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-3);
}
.prxn-tab {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 22px 24px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.25s;
}
.prxn-tab:last-child { border-right: none; }
.prxn-tab:hover { background: var(--paper); }
.prxn-tab.on { background: var(--paper); }
.prxn-tab.on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
}
.prxn-tab-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ash);
  font-weight: 600;
  padding-top: 2px;
}
.prxn-tab.on .prxn-tab-n { color: var(--accent); }
.prxn-tab-l { display: flex; flex-direction: column; gap: 4px; }
.prxn-tab-use {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.prxn-tab-sec {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ash);
  letter-spacing: 0.04em;
}

/* Case panel */
.prxn-case {
  padding: 44px 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: prxnFade 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes prxnFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.prxn-case-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
}
.prxn-case-n { color: var(--accent); }
.prxn-case-rule {
  flex: 0 0 32px;
  height: 1px;
  background: var(--rule-strong);
}
.prxn-case-sector { letter-spacing: 0.08em; }

.prxn-case-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
.prxn-case-l { display: flex; flex-direction: column; gap: 22px; }
.prxn-case-l h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.prxn-headline {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.prxn-headline-v {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: italic;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
}
.prxn-headline-l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 600;
}
.prxn-solution {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--quill);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

/* Right column — metrics */
.prxn-case-r {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 32px;
  border-left: 1px solid var(--rule);
}
.prxn-bilanz-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.prxn-metrics {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.prxn-metric {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--rule);
}
.prxn-metric:last-child { border-bottom: none; }
.prxn-metric-v {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  letter-spacing: -0.022em;
  color: var(--ink);
  line-height: 1;
  order: 2;
}
.prxn-metric-l {
  font-size: 12.5px;
  color: var(--quill);
  order: 1;
}

@media (max-width: 1024px) {
  .prxn-nav { grid-template-columns: repeat(2, 1fr); }
  .prxn-tab { border-bottom: 1px solid var(--rule); }
  .prxn-tab:nth-child(2n) { border-right: none; }
  .prxn-tab:nth-last-child(-n+2) { border-bottom: none; }
  .prxn-case { padding: 32px 28px 36px; }
  .prxn-case-grid { grid-template-columns: 1fr; gap: 32px; }
  .prxn-case-r { padding-left: 0; border-left: none; border-top: 1px solid var(--rule); padding-top: 24px; }
}
@media (max-width: 560px) {
  .prxn-nav { grid-template-columns: 1fr; }
  .prxn-tab:nth-child(2n) { border-right: none; }
  .prxn-tab { border-bottom: 1px solid var(--rule); }
  .prxn-tab:last-child { border-bottom: none; }
}

/* ── kompetenz.html — Capability visuals ─────────────────────────────── */
.cap-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cap { background: var(--paper-3); border: 1px solid var(--rule); border-radius: 18px; padding: 30px; display: flex; flex-direction: column; position: relative; transition: border-color 0.35s, transform 0.4s, box-shadow 0.4s; }
.cap:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 48px -20px rgba(10,10,10,0.12); }
.cap.span-3 { grid-column: span 3; }
.cap.span-2 { grid-column: span 2; }
.cap.span-4 { grid-column: span 4; }
.cap .head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cap .roman { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--accent); font-weight: 400; }
.cap .tag { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); font-weight: 500; }
.cap h4 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 26px; line-height: 1.12; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 12px; }
.cap h4 em { font-style: italic; color: var(--accent); }
.cap .desc { font-size: 14px; line-height: 1.6; color: var(--quill); flex: 1; }
.cap .viz { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule); }
.cv-pilot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; min-height: 130px; }
.cv-pilot .bar { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cv-pilot .bar i { display: block; width: 100%; background: var(--rule-strong); border-radius: 4px 4px 0 0; transition: height 1s cubic-bezier(0.16,1,0.3,1); }
.cv-pilot .bar.gold i { background: var(--accent); }
.cv-pilot .bar .v { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 17px; color: var(--ink); letter-spacing: -0.015em; }
.cv-pilot .bar.gold .v { color: var(--accent); }
.cv-pilot .bar .l { font-size: 10.5px; color: var(--ash); letter-spacing: 0.06em; }
.cv-stack { display: grid; gap: 6px; }
.cv-stack .layer { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink); transition: background 0.3s, color 0.3s; }
.cv-stack .layer.featured { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cv-stack .layer .l { font-family: var(--font-mono); font-size: 10.5px; color: var(--ash); letter-spacing: 0.08em; }
.cv-stack .layer.featured .l { color: var(--accent-soft); }
.cv-matrix { position: relative; aspect-ratio: 2 / 1; background: linear-gradient(var(--rule-strong), var(--rule-strong)) center / 1px 100% no-repeat, linear-gradient(var(--rule-strong), var(--rule-strong)) center / 100% 1px no-repeat, var(--paper); border: 1px solid var(--rule-strong); border-radius: 8px; }
.cv-matrix .pz { position: absolute; top: 0; right: 0; width: 50%; height: 50%; background: var(--accent-tint); }
.cv-matrix .dt { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: translate(-50%,-50%); }
.cv-matrix .dt.gold { background: var(--accent); width: 12px; height: 12px; box-shadow: 0 0 0 6px var(--accent-tint2); }
.cv-kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cv-kpi .t { padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
.cv-kpi .t .k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); font-weight: 500; }
.cv-kpi .t .v { margin-top: 4px; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -0.022em; color: var(--ink); }
.cv-kpi .t .v em { font-style: italic; color: var(--accent); }
.cv-team { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-team .seat { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); display: grid; place-items: center; color: var(--ash); }
.cv-team .seat.filled { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.cv-team .meta { margin-left: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); line-height: 1.3; }
.cv-flow { display: flex; align-items: center; gap: 8px; }
.cv-flow .b { flex: 1; padding: 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.cv-flow .b .n { display: block; font-size: 9.5px; color: var(--ash); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.cv-flow .ar { color: var(--accent); font-size: 18px; }
.cv-risk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
.cv-risk .c { aspect-ratio: 1; background: var(--paper-3); border: 1px solid var(--rule); border-radius: 4px; display: grid; place-items: center; color: var(--ash); font-size: 11px; }
.cv-risk .c.set { background: var(--accent); border-color: var(--accent); color: var(--paper); }
@media (max-width: 1024px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap.span-3, .cap.span-2, .cap.span-4 { grid-column: span 1; }
}
@media (max-width: 720px) {
  .cap-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Mobile refinement pass
   ============================================ */
@media (max-width: 720px) {
  html,
  body {
    min-width: 0;
  }

  .container,
  .container-narrow,
  .cta-wrap {
    padding-inline: 22px;
  }

  .section {
    padding: 72px 0;
  }

  .section-head {
    gap: 20px;
    margin-bottom: 42px;
  }

  .section-num {
    gap: 12px;
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .section h2 {
    line-height: 1.04;
    text-wrap: balance;
  }

  .section-lede {
    max-width: none;
    font-size: 15px;
  }

  .skip-link,
  .brand,
  .mobile-toggle,
  .btn,
  .tier .cta,
  .vplist-cta,
  .cnda-btn {
    min-height: 44px;
  }

  .brand {
    align-items: center;
  }

  .nav {
    padding:
      calc(12px + env(safe-area-inset-top, 0px))
      max(14px, env(safe-area-inset-right, 0px))
      12px
      max(14px, env(safe-area-inset-left, 0px));
  }

  .nav.scrolled {
    padding:
      calc(10px + env(safe-area-inset-top, 0px))
      max(14px, env(safe-area-inset-right, 0px))
      10px
      max(14px, env(safe-area-inset-left, 0px));
  }

  .nav-inner {
    max-width: none;
    min-height: 56px;
    padding: 6px 6px 6px 16px;
    border-radius: 28px;
  }

  .mobile-toggle {
    min-width: 78px;
    justify-content: center;
    padding: 0 15px;
  }

  .mobile-menu {
    padding: calc(96px + env(safe-area-inset-top, 0px)) 24px calc(32px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .mobile-menu a {
    min-height: 56px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    font-size: clamp(30px, 10vw, 40px);
  }

  .hero {
    min-height: auto;
    padding: 118px 0 56px;
  }

  .hero-eyebrow {
    max-width: 100%;
    white-space: normal;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.12em;
  }

  .hero h1 {
    font-size: clamp(36px, 9.2vw, 52px);
    text-wrap: balance;
  }

  .hero-lede {
    max-width: 32rem;
    font-size: 15px;
  }

  .hero-ctas {
    align-items: stretch;
    gap: 10px;
    margin-top: 28px;
  }

  .hero-ctas .btn {
    flex: 1 1 100%;
    justify-content: space-between;
    white-space: normal;
  }

  #faq button {
    align-items: flex-start !important;
    gap: 12px !important;
    padding-block: 22px !important;
    font-size: 20px !important;
    line-height: 1.22 !important;
  }

  #faq button > span:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #faq button > span:first-child > span:first-child {
    flex: 0 0 auto;
    padding-top: 0.18em;
  }

  #faq button > span:first-child > span:last-child {
    min-width: 0 !important;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    font-size: clamp(18px, 5.6vw, 20px) !important;
    line-height: 1.18 !important;
  }

  #faq button > span:last-child {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    margin-top: -3px;
    transform: none !important;
  }

  #faq button[aria-expanded="true"] > span:last-child svg,
  #faq button > span:last-child[style*="rotate(45deg)"] svg {
    transform: rotate(45deg);
  }

  .hero-trial {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .footer {
    padding: 72px 0 28px;
  }

  .footer-top {
    gap: 32px;
    margin-bottom: 50px;
  }

  .footer ul {
    gap: 4px;
  }

  .footer ul li a,
  .footer-mark .legal a,
  .contact-meta .m .v a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-mark .legal a {
    min-width: 44px;
  }

  .footer-mark .legal {
    gap: 12px;
    flex-wrap: wrap;
  }

  .footer-giant {
    padding: 26px 0 34px;
    margin-top: 52px;
  }

  .contact-form .row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    min-width: 0;
    /* 16px verhindert das automatische Hineinzoomen von iOS Safari beim Fokus */
    font-size: 16px;
  }

  .cnda-btn {
    justify-content: space-between;
  }

  .vplist {
    gap: 24px;
  }

  .vplist-row {
    min-height: 64px;
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    gap: 12px;
    padding: 18px 2px;
  }

  .vplist-row .nm {
    min-width: 0;
    font-size: 20px;
  }

  .vplist-detail {
    isolation: isolate;
  }

  .vplist-detail::before,
  .tstack-hub::before {
    inset: 0;
  }

  .vplist-bignum {
    top: 12px;
    right: 14px;
    font-size: clamp(70px, 22vw, 92px);
  }

  .vplist-viz {
    padding: 14px;
    overflow: hidden;
  }

  .vplist-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .vplist-cta {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }

  .tstack-hub {
    min-height: 0;
    padding: 24px 18px;
  }

  .tstack-hub-pill {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tstack-hub-axis {
    flex-wrap: wrap;
    justify-content: center;
  }

  .tstack-hub-axis .line {
    order: 2;
    flex-basis: 100%;
  }

  .scurve {
    overflow: hidden;
  }

  .scurve-grid {
    overflow: hidden;
  }

  .scurve-stage-pill,
  .scurve-market-l {
    display: none;
  }

  .scurve-logicshift {
    display: none;
  }

  .scurve-stages {
    margin-top: 22px;
    padding-top: 20px;
  }

  .scurve-stage-card {
    min-height: 44px;
    padding: 18px;
  }

  .smtx {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .smtx-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    flex-wrap: unset;
    border-radius: 18px;
  }

  .smtx-tab {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    line-height: 1.15;
    white-space: normal;
  }

  .smtx-panel {
    gap: 22px;
  }

  .smtx-matrix-wrap {
    padding: 16px;
  }

  .smtx-matrix-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .smtx-matrix-r {
    text-align: left;
  }

  .smtx-matrix {
    grid-template-columns: 14px 1fr;
    min-height: 300px;
  }

  .smtx-dot,
  .smtx-dot.hi,
  .smtx-dot.hi.primary {
    width: 22px;
    height: 22px;
  }

  .smtx-dot-n {
    font-size: 8px;
  }

  .smtx-dot-tip {
    display: none !important;
  }

  .smtx-q {
    padding: 3px 5px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .smtx-case {
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: 16px;
  }

  .smtx-case-ic {
    width: 38px;
    height: 38px;
  }

  .shero-stage,
  .shero-canvas {
    overflow: hidden;
  }

  .shero {
    height: 380vh;
  }

  .shero-head {
    top: calc(50% + 24px);
    width: min(560px, calc(100% - 44px));
  }

  .shero-head h1 {
    font-size: 38px;
    line-height: 1.04;
    letter-spacing: 0;
    text-wrap: balance;
  }

  .shero-break-mobile {
    display: block;
  }

  .shero-break-mobile + br {
    display: none;
  }

  .shero-head .shero-lede {
    margin-top: 22px;
    max-width: 320px;
    font-size: 15px;
    line-height: 1.52;
  }

  .shero-head .shero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: min(100%, 292px);
    margin: 30px auto 0;
  }

  .shero-head .shero-ctas .btn {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }

  .shero-scroll {
    margin-top: 38px;
  }

  .shero-canvas {
    inset: 76px 10px 18px;
  }

  .shero-row {
    left: 10px;
    right: 10px;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .shero-row-src {
    top: 2%;
  }

  .shero-row-tgt {
    bottom: 24%;
  }

  .shero-chip {
    flex: 1 1 calc(50% - 6px);
    max-width: calc(50% - 6px);
    min-width: 0;
    justify-content: flex-start;
    padding: 5px 8px 5px 5px;
  }

  .shero-chip .lbl {
    min-width: 0;
  }

  .shero-chip .lbl .t {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shero-core {
    left: 10px;
    right: 10px;
    top: 30%;
    gap: 10px;
  }

  .shero-core-head {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }

  .shero-core-stages {
    gap: 8px;
  }

  .shero-stg {
    grid-template-columns: 24px 1fr;
    gap: 3px 8px;
    padding: 10px;
  }

  .shero-metrics {
    left: 10px;
    right: 10px;
    bottom: 3%;
    padding: 14px;
    border-radius: 14px;
  }

  .shero-metrics-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    letter-spacing: 0.14em;
  }

  .shero-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .shero-mtc .v {
    font-size: clamp(26px, 9vw, 34px);
  }

  .hstudy-toggle-btn,
  .hstudy-remedy-min-body {
    min-height: 44px;
  }

  .hstudy-remedy-min {
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    gap: 10px;
  }

  .hstudy-remedy-min-body {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .m90-next-cta {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 380px) {
  .container,
  .container-narrow,
  .cta-wrap {
    padding-inline: 18px;
  }

  .shero-head h1 {
    font-size: 36px;
  }

  .smtx-tabs {
    grid-template-columns: 1fr;
  }

  .footer-mark .legal {
    flex-direction: column;
    gap: 4px;
  }
}