* { box-sizing: border-box; }
  body { margin: 0; background: var(--page-bg); color: var(--fg-1); font-family: var(--font-sans); }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 768px) { .container { padding: 0 20px; } }
  .section { padding: 88px 0; }
  .section-tight { padding: 64px 0; }
  @media (max-width: 768px) { .section { padding: 64px 0; } .section-tight { padding: 48px 0; } }
  .alt-bg { background: var(--page-bg-surface); }
  .center { text-align: center; }
  .max-3xl { max-width: 720px; margin-left: auto; margin-right: auto; }
  .max-4xl { max-width: 900px; margin-left: auto; margin-right: auto; }
  .h-display { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--fg-1); margin: 0; text-wrap: balance; }
  .h-hero { font-size: clamp(48px, 7vw, 84px); }
  .h-section { font-size: clamp(36px, 4.5vw, 56px); }
  .h-sub { font-size: clamp(22px, 2.4vw, 30px); }
  .lead { font-size: 19px; line-height: 1.55; color: var(--fg-2); margin: 24px 0 0; text-wrap: pretty; }
  .lead-sm { font-size: 17px; line-height: 1.6; color: var(--fg-2); margin: 0; }
  .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin: 0 0 20px; }
  .eyebrow.muted { color: var(--fg-2); }
  .grid { display: grid; gap: 24px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }
  a { color: inherit; }
  button { font-family: var(--font-sans); }
  .period { color: var(--primary); }
  .gradient-word { background: linear-gradient(135deg, #00D4FF 0%, #7729FF 45%, #FF6B9C 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* Sticky nav */
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: hsl(var(--h-background) / 0.85); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border-1); transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; max-width: 1280px; margin: 0 auto; }
  .nav-links { display: flex; gap: 32px; align-items: center; }
  .nav-link { font-size: 14px; font-weight: 500; color: var(--fg-2); text-decoration: none; transition: color .25s ease; }
  .nav-link:hover { color: var(--fg-1); }
  .nav.over-hero { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
  .nav.over-hero .nav-logo { filter: brightness(0) invert(1); }
  .nav.over-hero .nav-link { color: rgba(255,255,255,.78); }
  .nav.over-hero .nav-link:hover { color: #fff; }
  .nav.over-hero .nav-cta { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); box-shadow: none; }
  .nav.over-hero .nav-cta:hover { background: rgba(255,255,255,.18); }
  @media (max-width: 860px) { .nav-links { display: none; } }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .15s var(--ease); text-decoration: none; white-space: nowrap; }
  .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-md); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: hsl(var(--h-primary)/.92); }
  .btn-outline { background: transparent; color: var(--fg-1); border-color: var(--border-1); }
  .btn-outline:hover { border-color: var(--fg-1); }
  .btn-ghost { background: transparent; color: var(--fg-1); }
  .btn-ghost:hover { color: var(--primary); }
  .btn-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
  .btn-light:hover { background: rgba(255,255,255,.14); }

  /* Cards */
  .card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 24px; padding: 32px; box-shadow: var(--shadow-xs); transition: all .2s var(--ease); }
  .card:hover { border-color: hsl(var(--h-primary)/.3); box-shadow: var(--shadow-md); }
  .card-link { cursor: pointer; text-decoration: none; color: inherit; display: block; }
  .card-link:hover .arrow { transform: translateX(4px); }
  .arrow { display: inline-block; transition: transform .15s; color: var(--primary); font-weight: 600; }

  /* Pill chips */
  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-1); background: var(--paper); color: var(--fg-1); }
  .chip-soft { background: var(--accent); color: var(--accent-fg); border-color: hsl(var(--h-primary)/.18); }

  /* Hero */
  .hero { position: relative; background: var(--hero-ink); color: #fff; overflow: hidden; padding: 96px 0 120px; }
  .hero-pattern { position: absolute; inset: 0; background-image: url('hero-pattern.jpg'); background-size: cover; background-position: center; opacity: 0.55; }
  .hero-scrim { position: absolute; inset: 0; background:
    radial-gradient(ellipse 80% 60% at 0% 50%, rgba(17,8,34,.95) 0%, rgba(17,8,34,.6) 40%, transparent 70%),
    linear-gradient(to bottom, rgba(17,8,34,.6) 0%, transparent 30%, transparent 70%, var(--hero-ink) 100%); }
  .hero-inner { position: relative; }
  .hero h1 { color: #fff; font-size: clamp(44px, 6.4vw, 76px); }
  .hero .lead { color: rgba(255,255,255,.78); font-size: 20px; max-width: 660px; }
  .hero-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 36px; font-size: 13px; color: rgba(255,255,255,.65); }
  .hero-trust-item { display: inline-flex; align-items: center; gap: 8px; }
  .hero-trust-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-cyan); }
  .hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
  @media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

  /* Audience qualifier */
  .qual-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .qual-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--border-1); }
  .qual-item:first-child { border-top: 0; padding-top: 4px; }
  .qual-bullet { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
  .qual-text { font-size: 16px; line-height: 1.55; color: var(--fg-1); }
  .qual-text strong { font-weight: 600; }

  /* Solution card */
  .sol-card { display: flex; flex-direction: column; gap: 16px; height: 100%; }
  .sol-icon-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
  .sol-num { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.1em; }
  .sol-result { font-family: var(--font-serif); font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--fg-1); letter-spacing: -0.02em; }
  .sol-title { font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: 0.04em; }
  .sol-body { font-size: 15px; line-height: 1.55; color: var(--fg-2); }
  .sol-link { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }

  /* Diff cards */
  .diff-card { display: flex; flex-direction: column; gap: 14px; }
  .diff-card h3 { font-family: var(--font-serif); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
  .diff-card p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; }

  /* Trust pills */
  .trust-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
  .trust-pill { padding: 10px 18px; border-radius: 999px; background: var(--paper); border: 1px solid var(--border-1); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
  .trust-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

  /* Final CTA dark */
  .final-cta { background: var(--hero-ink); color: #fff; border-radius: 32px; padding: 80px 64px; position: relative; overflow: hidden; isolation: isolate; }
  .final-cta::before { content: ''; position: absolute; inset: 0; background-image: url('hero-pattern.jpg'); background-size: cover; opacity: 0.4; pointer-events: none; z-index: 0; }
  .final-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,8,34,.55) 0%, rgba(17,8,34,.7) 100%); pointer-events: none; z-index: 0; }
  .final-cta-inner { position: relative; text-align: center; z-index: 1; }
  .final-cta h2 { color: #fff; font-size: clamp(32px, 4vw, 48px); }
  .final-cta p { color: #fff; margin-top: 16px; }
  @media (max-width: 720px) { .final-cta { padding: 56px 28px; border-radius: 24px; } }

  /* Footer */
  footer { background: var(--page-bg); border-top: 1px solid var(--border-1); padding: 64px 0 32px; }
  .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 48px; }
  @media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
  .footer-col h4 { font-size: 13px; font-weight: 700; color: var(--fg-1); margin: 0 0 16px; }
  .footer-col a { display: block; color: var(--fg-2); font-size: 14px; margin-bottom: 10px; text-decoration: none; }
  .footer-col a:hover { color: var(--fg-1); }
  .footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border-1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--fg-2); }

  /* BPMN diagram */
  .bpmn { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 28px; backdrop-filter: blur(12px); }
  .bpmn-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .bpmn-title { font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
  .bpmn-flow { display: flex; flex-direction: column; gap: 10px; }
  .bpmn-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: all .25s; position: relative; }
  .bpmn-row.active { background: rgba(124,58,237,.18); border-color: rgba(124,58,237,.45); box-shadow: 0 0 0 1px rgba(124,58,237,.3), 0 8px 24px -8px rgba(124,58,237,.4); }
  .bpmn-row.done { opacity: 0.55; }
  .bpmn-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 14px; }
  .bpmn-icon.event { background: linear-gradient(135deg, #00D4FF, #7729FF); color: #fff; }
  .bpmn-icon.task { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
  .bpmn-icon.gateway { background: rgba(255,107,156,.15); color: #FF6B9C; transform: rotate(45deg); }
  .bpmn-icon.gateway > span { transform: rotate(-45deg); }
  .bpmn-label { font-size: 13px; color: rgba(255,255,255,.92); font-weight: 500; flex: 1; }
  .bpmn-meta { font-size: 11px; color: rgba(255,255,255,.45); font-family: var(--font-mono); }
  .bpmn-conn { position: absolute; left: 30px; top: 100%; width: 2px; height: 10px; background: rgba(255,255,255,.15); }
  .bpmn-row:last-child .bpmn-conn { display: none; }
  .bpmn-status { font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; }
  .bpmn-status.ok { background: rgba(16,185,129,.15); color: #6EE7B7; }
  .bpmn-status.run { background: rgba(124,58,237,.18); color: #C4B5FD; }
  .bpmn-status.idle { background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); }

  /* AI section */
  .ai-section { background: var(--hero-ink); color: #fff; position: relative; overflow: hidden; padding: 120px 0; }
  .ai-section::before { content: ''; position: absolute; inset: 0; background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(0,212,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(255,107,156,.06) 0%, transparent 60%); }
  .ai-section .container { position: relative; }
  .ai-section h2 { color: #fff; }
  .ai-section .lead { color: rgba(255,255,255,.7); }
  .ai-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 28px; }
  .ai-card h4 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: #fff; margin: 0 0 12px; letter-spacing: -0.01em; }
  .ai-card p { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.6; margin: 0; }
  .ai-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(124,58,237,.2); color: #C4B5FD; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
  .ai-quote { margin-top: 56px; padding: 32px; border-left: 3px solid var(--primary); background: rgba(255,255,255,.03); border-radius: 0 16px 16px 0; }
  .ai-quote p { font-family: var(--font-serif); font-size: 22px; font-style: italic; color: rgba(255,255,255,.9); margin: 0; line-height: 1.4; font-weight: 400; }
  .ai-quote cite { display: block; margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.55); font-style: normal; }

  /* Platform tease */
  .pillar { padding: 32px; border-radius: 24px; border: 1px solid var(--border-1); background: var(--paper); display: flex; flex-direction: column; gap: 14px; transition: all .2s; }
  .pillar:hover { border-color: hsl(var(--h-primary)/.3); box-shadow: var(--shadow-md); }
  .pillar.featured { border-color: hsl(var(--h-primary)/.4); background: linear-gradient(180deg, hsl(var(--h-accent)) 0%, var(--paper) 60%); position: relative; }
  .pillar.featured::before { content: 'Kern'; position: absolute; top: 16px; right: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
  .pillar-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
  .pillar.featured .pillar-tag { color: var(--primary); }
  .pillar h3 { font-family: var(--font-serif); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
  .pillar p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; }
  .pillar a { font-size: 14px; font-weight: 600; color: var(--primary); margin-top: auto; padding-top: 8px; }

  /* Tab/section anchor offset */
  section[id] { scroll-margin-top: 80px; }

  /* Floating tweaks-trigger handled by panel */
  .lucide { display: inline-block; vertical-align: middle; }

  /* Hover micro */
  .hover-lift { transition: transform .15s; }
  .hover-lift:hover { transform: translateY(-3px); }


  /* Nav active state */
  .nav-link.active { color: var(--fg-1); position: relative; }
  .nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--primary); border-radius: 2px; }
  .nav.over-hero .nav-link.active { color: #fff; }
  .nav.over-hero .nav-link.active::after { background: #fff; }

  /* Sub-page hero (light, restrained) */
  .sub-hero { background: var(--page-bg); padding: 200px 0 96px; position: relative; }
  .sub-hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin-bottom: 24px; }
  .sub-hero h1 { font-size: clamp(40px, 5.5vw, 68px); margin: 0; }
  .sub-hero h1 .period { background: linear-gradient(135deg, #00D4FF 0%, #7729FF 45%, #FF6B9C 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* Hero trustline (used on /loesungen and detail/sub-hero pages) */
  .loesungen-trustline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-2); }
  .loesungen-trustline span { display: inline-flex; align-items: center; gap: 7px; }
  .loesungen-trustline span svg { color: var(--state-collab); }
  .loesungen-trustline .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-3); opacity: 0.55; display: inline-block; }
  .sub-hero .lead { font-size: 20px; max-width: 680px; }
  .sub-hero-rule { height: 1px; background: var(--border-1); margin-top: 96px; max-width: 1200px; margin-left: auto; margin-right: auto; }

  /* Pricing-specific */
  .price-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  @media (max-width: 880px) { .price-blocks { grid-template-columns: 1fr; } }
  .price-block { padding: 36px; border-radius: 24px; border: 1px solid var(--border-1); background: var(--paper); }
  .price-block .ix { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--fg-3); margin-bottom: 18px; }
  .price-block .ix-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
  .price-block h3 { font-family: var(--font-serif); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--fg-1); }
  .price-block p { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0 0 12px; }
  .price-range { font-family: var(--font-serif); font-weight: 700; font-size: 32px; color: var(--fg-1); margin-top: 12px; letter-spacing: -0.02em; }
  .price-range-meta { font-size: 13px; color: var(--fg-3); margin-top: 4px; }

  /* Tables */
  .price-table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 15px; }
  .price-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); padding: 12px 16px; border-bottom: 1px solid var(--border-1); }
  .price-table td { padding: 18px 16px; border-bottom: 1px solid var(--border-1); vertical-align: top; color: var(--fg-1); }
  .price-table tr:last-child td { border-bottom: 0; }
  .price-table .tier-name { font-weight: 600; font-family: var(--font-serif); font-size: 17px; letter-spacing: -0.01em; }
  .price-table .tier-meta { font-size: 13px; color: var(--fg-3); margin-top: 4px; }
  .price-table-card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 20px; overflow: hidden; }
  .price-table-card .price-table th { padding: 18px 24px; background: var(--page-bg-surface); }
  .price-table-card .price-table td { padding: 22px 24px; }
  .price-table .num { font-family: var(--font-mono); font-weight: 600; font-size: 16px; }

  /* Note banner */
  .note { background: var(--accent); border: 1px solid hsl(var(--h-primary)/.15); border-radius: 16px; padding: 18px 22px; display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; }
  .note-icon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
  .note p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-1); }

  /* Not-paying-for grid */
  .not-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  @media (max-width: 880px) { .not-grid { grid-template-columns: 1fr; } }
  .not-item { padding: 28px; border-radius: 20px; background: var(--paper); border: 1px solid var(--border-1); }
  .not-item .check { width: 36px; height: 36px; border-radius: 10px; background: hsl(150 60% 94%); color: hsl(150 60% 30%); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
  .not-item h4 { font-family: var(--font-serif); font-weight: 700; font-size: 20px; margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.2; color: var(--fg-1); }
  .not-item p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }

  /* FAQ */
  .faq { max-width: 880px; margin: 0 auto; }
  .faq-item { border-bottom: 1px solid var(--border-1); padding: 24px 0; cursor: pointer; }
  .faq-item:first-child { border-top: 1px solid var(--border-1); }
  .faq-q { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .faq-q h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; margin: 0; color: var(--fg-1); }
  .faq-toggle { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-1); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-2); transition: all .2s; }
  .faq-item.open .faq-toggle { background: var(--primary); border-color: var(--primary); color: #fff; transform: rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding-top .3s ease; }
  .faq-item.open .faq-a { max-height: 400px; padding-top: 16px; }
  .faq-a p { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 760px; }


  /* === SUB-PAGE: ÜBERSICHT (Lösungen / Plattform) === */
  .sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
  @media (max-width: 1000px) { .sol-grid { grid-template-columns: 1fr; } }
  .sol-card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 24px; padding: 36px; position: relative; transition: all .25s ease; display: flex; flex-direction: column; min-height: 460px; overflow: hidden; }
  .sol-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent-color, var(--primary)); opacity: 0.85; }
  .sol-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -24px hsl(var(--h-fg-1) / .12); border-color: hsl(var(--h-primary) / .25); }
  .sol-card .sol-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-bg, var(--accent)); color: var(--accent-color, var(--primary)); margin-bottom: 24px; }
  .sol-card h3 { font-family: var(--font-serif); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fg-1); }
  .sol-card .sol-for { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 24px; }
  .sol-card .sol-row { padding: 18px 0; border-top: 1px solid var(--border-1); }
  .sol-card .sol-row:last-of-type { padding-bottom: 24px; }
  .sol-card .sol-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
  .sol-card .sol-text { font-size: 15px; line-height: 1.55; color: var(--fg-1); margin: 0; }
  .sol-card .sol-link { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; transition: gap .2s; }
  .sol-card:hover .sol-link { gap: 12px; }

  /* Accent variants, sobered down */
  .sol-card.accent-collab { --accent-color: hsl(150 60% 30%); --accent-bg: hsl(150 60% 94%); }
  .sol-card.accent-automate { --accent-color: hsl(220 80% 45%); --accent-bg: hsl(220 80% 96%); }
  .sol-card.accent-intel { --accent-color: var(--primary); --accent-bg: var(--accent); }

  /* === ROADMAP BLOCK === */
  .roadmap { background: var(--page-bg-surface); border-radius: 28px; padding: 56px; border: 1px solid var(--border-1); }
  @media (max-width: 760px) { .roadmap { padding: 36px 28px; border-radius: 20px; } }
  .roadmap-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 32px; }
  @media (max-width: 880px) { .roadmap-head { grid-template-columns: 1fr; gap: 16px; } }
  .roadmap-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(28 80% 38%); padding: 6px 12px; border-radius: 999px; background: hsl(28 100% 95%); border: 1px solid hsl(28 80% 85%); margin-bottom: 16px; }
  .roadmap-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--border-1); }
  @media (max-width: 760px) { .roadmap-list { grid-template-columns: 1fr; } }
  .roadmap-item { padding: 24px 0; border-bottom: 1px solid var(--border-1); display: flex; gap: 16px; align-items: flex-start; }
  .roadmap-item:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--border-1); }
  .roadmap-item:nth-child(even) { padding-left: 24px; }
  @media (max-width: 760px) { .roadmap-item:nth-child(odd) { padding-right: 0; border-right: 0; } .roadmap-item:nth-child(even) { padding-left: 0; } }
  .roadmap-item .ri-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 1px solid var(--border-1); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--fg-2); }
  .roadmap-item h4 { font-family: var(--font-serif); font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; margin: 4px 0 4px; color: var(--fg-1); }
  .roadmap-item p { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; }
  .roadmap-foot { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border-1); margin-top: 0; }
  .roadmap-foot p { font-size: 15px; color: var(--fg-1); margin: 0; }

  /* Gray callout (eyebrow with gray treatment) */
  .callout-gray { display: inline-flex; gap: 12px; padding: 14px 20px; border-radius: 14px; background: var(--page-bg-surface); border: 1px solid var(--border-1); font-size: 14px; line-height: 1.5; color: var(--fg-2); max-width: 720px; align-items: flex-start; }
  .callout-gray .ic { flex: 0 0 auto; color: var(--fg-3); margin-top: 2px; }


  /* === MEGA-MENU NAVIGATION === */
  .nav-links { position: relative; }
  .nav-item { position: relative; }
  .nav-link.has-caret { display: inline-flex; align-items: center; gap: 6px; }
  .nav-link .caret { transition: transform .25s ease; opacity: 0.7; }
  .nav-item.open .nav-link .caret { transform: rotate(180deg); }

  /* Mega-menu panel */
  .mega { position: absolute; top: calc(100% + 30px); left: 50%; transform: translateX(-50%) translateY(-6px); background: hsl(var(--h-background)); border: 1px solid var(--border-1); border-radius: 20px; box-shadow: 0 24px 64px -20px hsl(var(--h-fg-1) / .18); padding: 28px; min-width: 540px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 60; }
  /* Caret tail pointing up to the active nav item */
  .mega::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: hsl(var(--h-background)); border-top: 1px solid var(--border-1); border-left: 1px solid var(--border-1); border-top-left-radius: 3px; }
  /* Hover-bridge so the menu doesn't close in the gap between trigger and panel */
  .mega::after { content: ''; position: absolute; top: -34px; left: 0; right: 0; height: 34px; }
  .nav-item.open .mega { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .mega-grid-1 { display: grid; grid-template-columns: 1fr; gap: 4px; min-width: 280px; }
  .mega-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .mega-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; min-width: 720px; }
  .mega-col { }
  .mega-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin: 0 8px 14px; }
  .mega-link { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; transition: background .15s ease; align-items: flex-start; }
  .mega-link:hover { background: var(--page-bg-surface); }
  .mega-link .ml-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
  .mega-link.tone-collab .ml-icon { background: hsl(150 60% 94%); color: hsl(150 60% 30%); }
  .mega-link.tone-automate .ml-icon { background: hsl(220 80% 96%); color: hsl(220 80% 45%); }
  .mega-link.tone-intel .ml-icon { background: var(--accent); color: var(--primary); }
  .mega-link.featured .ml-icon { background: linear-gradient(135deg, var(--brand-cyan), var(--brand-violet) 60%, var(--brand-pink)); color: #fff; }
  .mega-link .ml-body { min-width: 0; }
  .mega-link .ml-title { font-weight: 600; font-size: 14px; color: var(--fg-1); margin: 2px 0 2px; line-height: 1.3; }
  .mega-link .ml-sub { font-size: 12.5px; color: var(--fg-2); line-height: 1.4; margin: 0; }

  /* Dark hero variant for mega menu */
  .nav.over-hero .mega { background: hsl(255 45% 16%); border-color: hsl(255 30% 28%); box-shadow: 0 32px 80px -20px rgba(0,0,0,.5); }
  .nav.over-hero .mega::before { background: hsl(255 45% 16%); border-top-color: hsl(255 30% 28%); border-left-color: hsl(255 30% 28%); }
  .nav.over-hero .mega-col-title { color: hsl(0 0% 70%); }
  .nav.over-hero .mega-link:hover { background: hsl(255 30% 22%); }
  .nav.over-hero .mega-link .ml-title { color: #fff; }
  .nav.over-hero .mega-link .ml-sub { color: hsl(0 0% 75%); }
  .nav.over-hero .mega-link .ml-icon { background: hsl(255 30% 26%); color: hsl(0 0% 90%); }
  .nav.over-hero .mega-link.featured .ml-icon { background: linear-gradient(135deg, var(--brand-cyan), var(--brand-violet) 60%, var(--brand-pink)); color: #fff; }

  /* Mobile burger */
  .nav-burger { display: none; background: transparent; border: 0; padding: 8px; color: var(--fg-1); cursor: pointer; }
  .nav.over-hero .nav-burger { color: #fff; }

  @media (max-width: 1080px) {
    .nav-links { display: none; }
    .nav-cta { display: none !important; }
    .nav-burger { display: inline-flex; }
  }

  /* Mobile drawer */
  .nav-drawer { position: fixed; inset: 0; background: var(--paper); z-index: 100; padding: 88px 24px 32px; overflow-y: auto; transform: translateY(-100%); transition: transform .3s ease; }
  .nav-drawer.open { transform: translateY(0); }
  .nav-drawer .nd-section { border-bottom: 1px solid var(--border-1); padding: 16px 0; }
  .nav-drawer .nd-section h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 12px; }
  .nav-drawer a { display: flex; align-items: center; gap: 12px; padding: 12px 8px; text-decoration: none; color: var(--fg-1); font-size: 16px; font-weight: 500; }
  .nav-drawer a:hover { background: var(--page-bg-surface); border-radius: 8px; }
  .nav-drawer .nd-cta { margin-top: 24px; }
  .nav-close { position: absolute; top: 24px; right: 24px; background: var(--page-bg-surface); border: 1px solid var(--border-1); border-radius: 999px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

  /* === ONBOARDING / SOLUTION-DETAIL PAGE === */
  .num-bold { color: var(--primary); font-style: normal; }

  /* Invoice hero visual */
  .ihv-source { display: flex; gap: 14px; align-items: center; padding: 14px 18px; background: var(--page-bg-surface); border: 1px solid var(--border-1); border-radius: 14px; }
  .ihv-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .ihv-label { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.3; }
  .ihv-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 2px; }
  .ihv-funnel { position: relative; height: 28px; margin: 4px 0; }
  .ihv-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: hsl(262 60% 80%); }
  .ihv-fork { position: absolute; left: calc(50% - 100px); right: calc(50% - 100px); bottom: 0; height: 2px; background: hsl(262 60% 80%); }
  .ihv-outcomes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .ihv-outcome { padding: 14px 12px; border-radius: 12px; border: 1px solid var(--border-1); background: var(--paper); transition: transform .15s; }
  .ihv-outcome:hover { transform: translateY(-2px); }
  .ihv-outcome.match { background: hsl(150 50% 96%); border-color: hsl(150 50% 75%); }
  .ihv-outcome.exception { background: hsl(40 90% 96%); border-color: hsl(40 90% 75%); }
  .ihv-outcome.clarify { background: hsl(0 70% 97%); border-color: hsl(0 60% 80%); }
  .ihv-outcome-pct { font-family: var(--font-serif); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
  .ihv-outcome.match .ihv-outcome-pct { color: hsl(150 60% 28%); }
  .ihv-outcome.exception .ihv-outcome-pct { color: hsl(40 80% 32%); }
  .ihv-outcome.clarify .ihv-outcome-pct { color: hsl(0 70% 38%); }
  .ihv-outcome-label { font-size: 12px; font-weight: 700; color: var(--fg-1); margin-top: 6px; }
  .ihv-outcome-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); margin-top: 4px; line-height: 1.35; }
  .ihv-foot { display: flex; gap: 18px; justify-content: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-1); font-size: 11px; color: var(--fg-3); }
  .ihv-foot span { display: inline-flex; gap: 6px; align-items: center; }

  .hero-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  @media (max-width: 980px) { .hero-2col { grid-template-columns: 1fr; gap: 48px; } }
  .sub-hero-eyebrow.tone-collab { color: hsl(262 70% 50%); }

  /* Hero process visual card */
  .hero-visual-card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 24px; padding: 24px; box-shadow: 0 24px 60px -30px hsl(262 60% 30% / .25); }
  .hvc-row { display: flex; align-items: center; gap: 16px; }
  .hvc-pill { flex: 1; padding: 14px 18px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: -0.005em; }
  .hvc-pill.old { background: hsl(0 0% 96%); color: var(--fg-2); border: 1px solid var(--border-1); }
  .hvc-pill.new { background: hsl(262 60% 96%); color: hsl(262 60% 35%); border: 1px solid hsl(262 60% 80%); }
  .hvc-pill .hvc-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; }
  .hvc-pill strong { font-family: var(--font-serif); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
  .hvc-pill.new strong { color: var(--primary); }
  .hvc-pill.old strong { color: var(--fg-1); }
  .hvc-arrow { color: var(--fg-3); }
  .hvc-divider { height: 1px; background: var(--border-1); margin: 20px 0; }
  .hvc-steps { display: flex; flex-direction: column; gap: 8px; }
  .hvc-step { display: flex; gap: 14px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; transition: background .15s; }
  .hvc-step:hover { background: var(--page-bg-surface); }
  .hvc-num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--primary); padding: 4px 8px; background: var(--accent); border-radius: 6px; flex: 0 0 auto; }
  .hvc-label { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.3; }
  .hvc-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 2px; }

  /* Problem grid */
  .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
  @media (max-width: 980px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .problem-grid { grid-template-columns: 1fr; } }
  .problem-card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; padding: 28px; transition: all .2s; }
  .problem-card:hover { border-color: hsl(262 60% 80%); transform: translateY(-2px); box-shadow: 0 16px 32px -20px hsl(var(--h-fg-1) / .15); }
  .problem-card .problem-icon { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; background: hsl(0 80% 96%); color: hsl(0 70% 45%); align-items: center; justify-content: center; margin-bottom: 18px; }
  .problem-card h4 { font-family: var(--font-serif); font-weight: 700; font-size: 18px; margin: 0 0 8px; color: var(--fg-1); letter-spacing: -0.01em; }
  .problem-card p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }

  /* Solution quote */
  .solution-quote { background: var(--page-bg-surface); border: 1px solid var(--border-1); border-radius: 24px; padding: 48px; margin: 0 auto; max-width: 820px; position: relative; text-align: center; }
  .solution-quote .quote-mark { color: hsl(262 60% 75%); display: block; margin: 0 auto 16px; }
  .solution-quote p { font-family: var(--font-serif); font-size: clamp(20px,2.4vw,26px); font-weight: 600; font-style: italic; line-height: 1.4; color: var(--fg-1); margin: 0 0 20px; letter-spacing: -0.015em; }
  .solution-quote cite { font-style: normal; font-size: 13px; font-weight: 600; color: var(--fg-3); letter-spacing: 0.02em; }

  /* Swimlane BPMN wrapper */
  .swimlane-wrap { background: var(--paper); border: 1px solid var(--border-1); border-radius: 20px; padding: 32px; margin-bottom: 48px; overflow-x: auto; }
  @media (max-width: 980px) { .swimlane-wrap { padding: 16px; } .swimlane-wrap .bpmn-svg { min-width: 800px; } }

  /* Step list (numbered process) */
  .step-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 880px) { .step-list { grid-template-columns: 1fr; } }
  .step-card { display: grid; grid-template-columns: auto auto 1fr; gap: 18px; align-items: flex-start; padding: 22px 26px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 14px; transition: all .18s; }
  .step-card:hover { border-color: hsl(262 60% 70%); transform: translateY(-1px); }
  .step-card .step-num { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--primary); letter-spacing: -0.02em; line-height: 1.1; min-width: 32px; }
  .step-card .step-icon { display: inline-flex; width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: var(--primary); align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 2px; }
  .step-card .step-body h4 { font-family: var(--font-serif); font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--fg-1); letter-spacing: -0.01em; line-height: 1.3; }
  .step-card .step-body p { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; }

  /* AI cell extra (icon) */
  .ai-three .ai-cell-icon { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, hsl(262 70% 96%), hsl(220 80% 96%)); color: var(--primary); align-items: center; justify-content: center; margin-bottom: 14px; }

  /* Trust strip below AI section */
  .trust-strip { display: flex; gap: 16px; align-items: flex-start; max-width: 900px; margin: 48px auto 0; padding: 22px 28px; border-radius: 16px; background: hsl(150 50% 96%); border: 1px solid hsl(150 50% 80%); }
  .trust-strip .ts-icon { width: 32px; height: 32px; border-radius: 8px; background: hsl(150 50% 88%); color: hsl(150 60% 28%); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .trust-strip p { font-size: 14px; line-height: 1.55; color: hsl(150 30% 22%); margin: 0; }
  .trust-strip strong { color: hsl(150 60% 25%); }

  /* Result stat grid */
  .bpo-callout.green { background: hsl(150 50% 95%); color: hsl(150 60% 28%); border-color: hsl(150 50% 75%); }
  .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 880px) { .stat-grid { grid-template-columns: 1fr; } }
  .stat-cell { background: var(--paper); border: 1px solid var(--border-1); border-radius: 24px; padding: 48px 32px; text-align: center; transition: all .2s; }
  .stat-cell:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -24px hsl(262 60% 30% / .15); border-color: hsl(262 60% 75%); }
  .stat-cell .stat-headline { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px,3vw,38px); line-height: 1.1; letter-spacing: -0.02em; color: var(--fg-2); margin-bottom: 12px; }
  .stat-cell .stat-headline em { font-style: normal; color: var(--primary); }
  .stat-cell .stat-label { font-size: 13px; font-weight: 600; color: var(--fg-3); letter-spacing: 0.02em; }

  /* Scope */
  .scope-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: stretch; }
  @media (max-width: 980px) { .scope-wrap { grid-template-columns: 1fr; } }
  .scope-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; overflow: hidden; }
  .scope-table th { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); text-align: left; padding: 16px 24px; background: var(--page-bg-surface); border-bottom: 1px solid var(--border-1); }
  .scope-table td { padding: 18px 24px; font-size: 14px; line-height: 1.5; vertical-align: top; border-bottom: 1px solid var(--border-1); }
  .scope-table td:first-child { font-weight: 600; color: var(--fg-1); width: 40%; }
  .scope-table td:last-child { color: var(--fg-2); }
  .scope-table tr:last-child td { border-bottom: 0; }

  .golive-card { display: flex; gap: 18px; align-items: flex-start; padding: 32px; background: linear-gradient(160deg, hsl(262 60% 96%), hsl(262 70% 92%)); border: 1px solid hsl(262 60% 80%); border-radius: 20px; }
  .golive-icon { width: 44px; height: 44px; border-radius: 12px; background: hsl(262 60% 88%); color: hsl(262 60% 30%); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .golive-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(262 60% 38%); margin-bottom: 10px; }
  .golive-headline { font-family: var(--font-serif); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: var(--fg-1); margin-bottom: 8px; }
  .golive-headline strong { color: hsl(262 60% 35%); }
  .golive-card p { font-size: 13px; line-height: 1.5; color: var(--fg-2); margin: 0; }

  /* Price range */
  .price-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 0 auto; }
  @media (max-width: 720px) { .price-range-grid { grid-template-columns: 1fr; } }
  .price-range-card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 20px; padding: 36px; transition: all .2s; }
  .price-range-card:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -28px hsl(var(--h-fg-1) / .12); }
  .prc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 18px; }
  .prc-amount { font-family: var(--font-serif); font-weight: 700; font-size: 38px; letter-spacing: -0.025em; line-height: 1.1; color: var(--primary); margin-bottom: 14px; }
  .prc-amount .prc-suffix { font-size: 18px; font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
  .price-range-card p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }
  .prc-note { text-align: center; font-size: 13px; color: var(--fg-3); margin-top: 24px; }
  .prc-note a { color: var(--primary); font-weight: 600; text-decoration: none; }
  .prc-note a:hover { text-decoration: underline; }

  .bpo-callout { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: var(--primary); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; border: 1px solid hsl(var(--h-primary) / .15); }
  .bpo-callout svg { flex: 0 0 auto; }

  .pillar-feature { background: var(--paper); border: 1px solid var(--border-1); border-radius: 28px; padding: 48px; position: relative; overflow: hidden; }
  .pillar-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--primary); }
  .pillar-feature .pf-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
  @media (max-width: 980px) { .pillar-feature { padding: 32px; } .pillar-feature .pf-grid { grid-template-columns: 1fr; gap: 32px; } }
  .pillar-feature .pf-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); padding: 6px 12px; border-radius: 999px; background: var(--accent); border: 1px solid hsl(var(--h-primary) / .15); margin-bottom: 20px; }
  .pillar-feature h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(34px,4vw,52px); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 20px; color: var(--fg-1); }
  .pillar-feature p.lead { margin: 0 0 28px; }
  .pillar-feature .pf-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; font-size: 15px; text-decoration: none; transition: gap .2s; }
  .pillar-feature .pf-link:hover { gap: 12px; }

  /* BPO illustrative diagram */
  .bpo-viz { background: var(--page-bg-surface); border: 1px solid var(--border-1); border-radius: 20px; padding: 28px; }
  .bpo-viz .bpo-row { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--border-1); margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); }
  .bpo-viz .bpo-row .badge { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 4px; background: var(--accent); color: var(--primary); text-transform: uppercase; flex: 0 0 auto; }
  .bpo-viz .bpo-row .arrow { color: var(--fg-3); margin: 0 6px; }
  .bpo-viz .bpo-row.flow { background: hsl(var(--h-primary) / .04); border-color: hsl(var(--h-primary) / .15); }
  .bpo-viz .bpo-row.cap { background: var(--page-bg); }
  .bpo-viz .bpo-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

  /* Two-pillar grid */
  .two-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
  @media (max-width: 880px) { .two-pillars { grid-template-columns: 1fr; } }
  .small-pillar { background: var(--paper); border: 1px solid var(--border-1); border-radius: 24px; padding: 36px; position: relative; overflow: hidden; transition: all .25s; }
  .small-pillar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-color, var(--primary)); }
  .small-pillar:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -24px hsl(var(--h-fg-1) / .12); border-color: hsl(var(--h-primary) / .25); }
  .small-pillar.tone-automate { --accent-color: hsl(220 80% 45%); }
  .small-pillar.tone-intel { --accent-color: var(--primary); }
  .small-pillar .sp-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-bg, var(--accent)); color: var(--accent-color, var(--primary)); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
  .small-pillar.tone-automate .sp-icon { background: hsl(220 80% 96%); }
  .small-pillar h3 { font-family: var(--font-serif); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 6px; color: var(--fg-1); }
  .small-pillar .sp-tagline { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 20px; }
  .small-pillar p { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0 0 12px; }
  .small-pillar .sp-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 16px; transition: gap .2s; }
  .small-pillar:hover .sp-link { gap: 12px; }

  /* AI three-column */
  .ai-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  @media (max-width: 880px) { .ai-three { grid-template-columns: 1fr; } }
  .ai-three .ai-cell { padding: 32px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 20px; }
  .ai-three .ai-cell .num { font-family: var(--font-serif); font-weight: 700; font-size: 14px; color: var(--primary); margin-bottom: 12px; letter-spacing: -0.01em; }
  .ai-three .ai-cell h4 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.2; margin: 0 0 12px; color: var(--fg-1); letter-spacing: -0.015em; }
  .ai-three .ai-cell p { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0; }

  /* Architecture diagram block */
  .arch-block { background: var(--page-bg-surface); border-radius: 28px; padding: 56px; border: 1px solid var(--border-1); display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
  @media (max-width: 980px) { .arch-block { grid-template-columns: 1fr; padding: 36px; gap: 32px; } }
  .arch-stack { list-style: none; padding: 0; margin: 0; }
  .arch-stack li { padding: 14px 0; border-bottom: 1px solid var(--border-1); display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--fg-1); }
  .arch-stack li:last-child { border-bottom: 0; }
  .arch-stack li .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-top: 9px; }

  /* Architecture image (full-bleed) + bullet row */
  .arch-image-wrap { margin: 0; border-radius: 24px; overflow: hidden; background: transparent; }
  .arch-image-wrap img { display: block; width: 100%; height: auto; }
  .arch-bullets { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
  @media (max-width: 1100px) { .arch-bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .arch-bullets { grid-template-columns: 1fr; } }
  .arch-bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--fg-1); padding: 14px 0; border-top: 1px solid var(--border-1); }
  .arch-bullets li .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-top: 8px; }

  /* PO architecture hub (deck-slide style) */
  .po-arch-hub { display: grid; grid-template-columns: 220px 1fr 220px; gap: 56px; align-items: stretch; }
  @media (max-width: 1100px) { .po-arch-hub { grid-template-columns: 1fr; gap: 28px; } }
  .po-arch-side { display: flex; flex-direction: column; gap: 12px; }
  .po-arch-side-label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 2px; }
  .po-arch-side-right .po-arch-side-label { text-align: right; }
  @media (max-width: 1100px) { .po-arch-side-right .po-arch-side-label { text-align: left; } }
  .po-arch-card { background: #fff; border: 1px solid var(--border-1); border-left: 3px solid var(--primary); border-radius: 12px; padding: 14px 16px; }
  .po-arch-card-title { font-size: 15px; font-weight: 500; color: var(--fg-1); line-height: 1.2; }
  .po-arch-card-meta { font-size: 12px; color: var(--fg-3); margin-top: 4px; letter-spacing: 0.04em; }
  .po-arch-card-muted { border-left-color: var(--border-1); }

  .po-arch-center { position: relative; display: flex; }
  .po-arch-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .po-arch-arrow-left { left: -50px; }
  .po-arch-arrow-right { right: -50px; }
  @media (max-width: 1100px) { .po-arch-arrow { display: none; } }

  .po-arch-hub-card { width: 100%; background: linear-gradient(160deg, #1A0E33 0%, #2A1654 100%); border-radius: 20px; padding: 28px 28px 22px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 80px -28px rgba(119,41,255,0.55); position: relative; overflow: hidden; }
  .po-arch-hub-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 280px at 50% 0%, rgba(168,134,255,0.22), transparent 70%); pointer-events: none; }
  .po-arch-hub-header { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; }
  .po-arch-hub-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: rgba(168,134,255,0.18); color: #E4D8FF; }
  .po-arch-hub-name { font-family: var(--font-serif, var(--font-display)); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }

  .po-arch-hero { position: relative; text-align: center; padding: 18px 16px; background: linear-gradient(180deg, rgba(168,134,255,0.22) 0%, rgba(168,134,255,0.08) 100%); border: 1.5px solid #7C3AED; border-radius: 14px; box-shadow: inset 0 0 40px rgba(168,134,255,0.08); }
  .po-arch-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #C9B4FF; margin-bottom: 6px; }
  .po-arch-hero-title { font-family: var(--font-serif, var(--font-display)); font-weight: 700; font-size: 28px; color: #fff; letter-spacing: -0.02em; line-height: 1.05; }
  .po-arch-hero-meta { font-size: 13px; color: rgba(237,232,245,0.9); margin-top: 6px; }

  .po-arch-divider { position: relative; height: 1px; background: linear-gradient(90deg, transparent, rgba(168,134,255,0.35), transparent); }
  .po-arch-section-label { position: relative; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237,232,245,0.78); text-align: center; }

  .po-arch-workers { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  @media (max-width: 600px) { .po-arch-workers { grid-template-columns: 1fr; } }
  .po-arch-worker { background: rgba(255,255,255,0.05); border: 1px solid rgba(168,134,255,0.22); border-radius: 10px; padding: 14px 10px; text-align: center; }
  .po-arch-worker-title { font-family: var(--font-serif, var(--font-display)); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -0.01em; line-height: 1.1; }
  .po-arch-worker-meta { font-size: 11.5px; color: rgba(237,232,245,0.78); margin-top: 6px; letter-spacing: 0.04em; }
  .po-arch-worker-primary { background: #fff; border-color: #fff; }
  .po-arch-worker-primary .po-arch-worker-title { color: #2A1654; }
  .po-arch-worker-primary .po-arch-worker-meta { color: #6A4FB6; }
  .po-arch-worker-pink { background: rgba(255,107,156,0.12); border-color: rgba(255,107,156,0.4); }

  .po-arch-bus { position: relative; background: rgba(0,0,0,0.28); border: 1px solid rgba(168,134,255,0.28); border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; }
  .po-arch-bus-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; background: rgba(168,134,255,0.18); }
  .po-arch-bus-text { flex: 1; min-width: 0; }
  .po-arch-bus-title { font-family: var(--font-serif, var(--font-display)); font-weight: 700; font-size: 16px; color: #fff; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .po-arch-bus-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #C9B4FF; padding: 3px 8px; border-radius: 5px; background: rgba(168,134,255,0.18); }
  .po-arch-bus-meta { font-size: 12.5px; line-height: 1.45; color: rgba(237,232,245,0.85); margin-top: 4px; }

  /* PO architecture, row-based stack */
  .po-stack { display: flex; flex-direction: column; gap: 14px; }
  .po-stack-row { display: block; }
  .po-stack-cells { display: grid; gap: 12px; }
  .po-stack-cells-1 { grid-template-columns: 1fr; }
  .po-stack-cells-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-stack-cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .po-stack-cells-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 720px) { .po-stack-cells-3, .po-stack-cells-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .po-stack-cell { background: var(--paper); border: 1px solid var(--border-1); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  .po-stack-cell-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-1); line-height: 1.2; letter-spacing: -0.005em; }
  .po-stack-cell-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); margin-top: 4px; letter-spacing: 0.04em; }

  .po-stack-cell-hero { background: linear-gradient(180deg, hsl(262 60% 97%) 0%, hsl(262 60% 94%) 100%); border-color: hsl(262 60% 75%); padding: 20px 20px; gap: 12px; min-height: 0; }
  .po-stack-cell-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(262 30% 45%); }
  .po-stack-cell-hero-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: hsl(262 60% 30%); letter-spacing: -0.02em; line-height: 1.05; }
  .po-stack-cell-hero-bus { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin-top: 4px; background: hsl(40 90% 96%); border: 1px solid hsl(40 80% 65%); border-radius: 10px; }
  .po-stack-cell-bus-tag { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: hsl(40 80% 28%); letter-spacing: -0.01em; }
  .po-stack-cell-bus-meta { font-family: var(--font-mono); font-size: 11.5px; color: hsl(40 50% 32%); letter-spacing: 0.04em; }

  /* Execution layer (box-in-box) */
  .po-stack-cell-exec { background: linear-gradient(180deg, hsl(220 70% 97%) 0%, hsl(220 70% 94%) 100%); border-color: hsl(220 60% 75%); padding: 20px 20px 18px; gap: 12px; }
  .po-stack-cell-eyebrow-exec { color: hsl(220 60% 38%); }
  .po-stack-cell-exec-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: hsl(220 60% 28%); letter-spacing: -0.02em; line-height: 1.05; }
  .po-stack-cells-nested { gap: 10px; }
  .po-stack-cell-worker { background: hsl(220 80% 99%); border-color: hsl(220 60% 80%); }
  .po-stack-cell-worker .po-stack-cell-title { color: hsl(220 60% 28%); }

  /* Storage cells colored per legend */
  .po-stack-cell-es { background: hsl(150 45% 96%); border-color: hsl(150 40% 70%); }
  .po-stack-cell-es .po-stack-cell-title { color: hsl(150 50% 28%); }
  .po-stack-cell-pg { background: hsl(330 55% 97%); border-color: hsl(330 50% 78%); }
  .po-stack-cell-pg .po-stack-cell-title { color: hsl(330 55% 35%); }

  /* Freigabe, hero visual (SAP ↔ chester architecture sketch) */
  .fwv-card { padding: 22px; }
  .fwv-ribbon { background: hsl(262 60% 96%); border: 1px solid hsl(262 60% 80%); border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; }
  .fwv-ribbon-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: hsl(262 60% 40%); margin-bottom: 10px; }
  .fwv-ribbon-flow { display: flex; align-items: center; gap: 6px; }
  .fwv-event { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid hsl(150 50% 35%); flex: 0 0 auto; }
  .fwv-event.end { border-color: hsl(0 0% 25%); border-width: 3px; }
  .fwv-line { flex: 1; height: 1.5px; background: hsl(262 60% 55%); min-width: 8px; }
  .fwv-task { background: var(--paper); border: 1px solid hsl(262 60% 70%); color: hsl(262 60% 35%); border-radius: 6px; padding: 5px 9px; font-size: 10px; font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
  .fwv-gw { width: 22px; height: 22px; transform: rotate(45deg); background: var(--paper); border: 1.5px solid hsl(262 60% 45%); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; }
  .fwv-gw::after { content: '×'; transform: rotate(-45deg); font-size: 14px; font-weight: 700; color: hsl(262 60% 45%); }
  .fwv-systems { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
  .fwv-system { background: var(--paper); border: 1px solid var(--border-1); border-radius: 12px; padding: 14px; }
  .fwv-system.chester { border-color: hsl(262 60% 75%); background: hsl(262 60% 98%); }
  .fwv-sys-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-1); }
  .fwv-sys-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 3px 6px; border-radius: 4px; background: hsl(220 25% 92%); color: hsl(220 30% 35%); }
  .fwv-sys-badge.purple { background: hsl(262 60% 90%); color: hsl(262 60% 35%); }
  .fwv-sys-name { font-family: var(--font-serif); font-weight: 700; font-size: 14px; color: var(--fg-1); letter-spacing: -0.01em; }
  .fwv-sys-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
  .fwv-sys-list li { display: flex; gap: 7px; align-items: center; font-size: 11px; color: var(--fg-2); line-height: 1.3; }
  .fwv-sys-list li svg { color: hsl(262 60% 50%); flex: 0 0 auto; }
  .fwv-bridge { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 4px; }
  .fwv-bridge-arrow { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: hsl(262 60% 40%); letter-spacing: 0.5px; }
  .fwv-bridge-arrow.reverse { flex-direction: row; }

  /* Architecture visual wrapper */
  .arch-visual { background: var(--paper); border: 1px solid var(--border-1); border-radius: 20px; padding: 24px; margin-bottom: 48px; overflow-x: auto; }
  @media (max-width: 980px) { .arch-visual { padding: 14px; } .arch-visual .arch-svg { min-width: 900px; } }

  /* Scenario grid (2x2) */
  .scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 880px) { .scenario-grid { grid-template-columns: 1fr; } }
  .scenario-card { position: relative; padding: 28px 28px 26px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; transition: all .2s; }
  .scenario-card:hover { border-color: hsl(262 60% 75%); transform: translateY(-2px); box-shadow: 0 16px 32px -20px hsl(262 60% 30% / .2); }
  .scenario-card .scenario-num { position: absolute; top: 22px; right: 26px; font-family: var(--font-serif); font-weight: 700; font-size: 14px; color: hsl(262 30% 70%); letter-spacing: 0.05em; }
  .scenario-card .scenario-icon { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; background: hsl(262 60% 96%); color: hsl(262 60% 40%); align-items: center; justify-content: center; margin-bottom: 16px; }
  .scenario-card h4 { font-family: var(--font-serif); font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -0.012em; color: var(--fg-1); margin: 0 0 10px; padding-right: 32px; }
  .scenario-card p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }

  /* Capability grid (Process Orchestration) */
  .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 980px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .cap-grid { grid-template-columns: 1fr; } }
  .cap-card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 16px; padding: 26px; transition: all .2s; }
  .cap-card:hover { border-color: hsl(262 60% 75%); transform: translateY(-2px); box-shadow: 0 16px 32px -20px hsl(262 60% 30% / .18); }
  .cap-card .cap-icon { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; background: hsl(262 60% 96%); color: hsl(262 60% 40%); align-items: center; justify-content: center; margin-bottom: 16px; }
  .cap-card h4 { font-family: var(--font-serif); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.012em; color: var(--fg-1); margin: 0 0 8px; }
  .cap-card p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }

  /* Compare grid */
  .compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 880px) { .compare-grid { grid-template-columns: 1fr; } }
  .compare-card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; padding: 30px 28px; }
  .compare-card .cmp-vs { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: hsl(262 30% 60%); margin-bottom: 6px; }
  .compare-card .cmp-name { font-family: var(--font-serif); font-weight: 700; font-size: 24px; letter-spacing: -0.015em; color: var(--fg-1); margin-bottom: 14px; }
  .compare-card p { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0; }

  /* System pills (scenario) */
  .sys-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; line-height: 1; }
  .sys-pill.lg { padding: 8px 16px; font-size: 12px; }
  .sys-pill.tone-blue { background: hsl(220 80% 96%); color: hsl(220 70% 35%); border: 1px solid hsl(220 70% 80%); }
  .sys-pill.tone-green { background: hsl(150 50% 95%); color: hsl(150 60% 28%); border: 1px solid hsl(150 50% 75%); }
  .sys-pill.tone-cyan { background: hsl(195 70% 95%); color: hsl(195 70% 30%); border: 1px solid hsl(195 60% 75%); }
  .sys-pill.tone-amber { background: hsl(40 90% 95%); color: hsl(40 80% 30%); border: 1px solid hsl(40 80% 70%); }
  .sys-pill.tone-purple { background: hsl(262 60% 96%); color: hsl(262 60% 35%); border: 1px solid hsl(262 60% 75%); }
  .sys-pill.tone-gray { background: hsl(220 15% 95%); color: hsl(220 15% 30%); border: 1px solid hsl(220 15% 80%); }

  .scenario-systems { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; padding: 22px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 16px; }

  .scenario-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1080px; margin: 0 auto; }
  @media (max-width: 880px) { .scenario-flow { grid-template-columns: 1fr; } }
  .scenario-step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: flex-start; padding: 22px 26px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 14px; transition: all .2s; }
  .scenario-step:hover { border-color: hsl(262 60% 75%); transform: translateY(-1px); }
  .scenario-step .ss-num { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: hsl(262 60% 50%); letter-spacing: -0.02em; line-height: 1.1; min-width: 32px; }
  .scenario-step .ss-body { font-size: 14.5px; line-height: 1.55; color: var(--fg-1); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

  /* Process Management, cyan accents */
  .sub-hero-eyebrow.tone-automate { color: hsl(195 80% 38%); }
  .eyebrow.tone-automate { color: hsl(195 80% 38%); }
  .cap-icon-cyan { background: hsl(195 70% 95%) !important; color: hsl(195 80% 35%) !important; }
  .cap-grid-cyan .cap-card:hover { border-color: hsl(195 60% 70%); box-shadow: 0 16px 32px -20px hsl(195 60% 30% / .2); }

  /* Designer mockup (BPM) */
  .designer-mockup { background: var(--paper); border: 1px solid var(--border-1); border-radius: 22px; overflow: hidden; box-shadow: 0 32px 80px -40px hsl(195 60% 25% / .25); max-width: 1140px; margin: 0 auto; }
  .dm-chrome { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: hsl(220 20% 97%); border-bottom: 1px solid var(--border-1); }
  .dm-tlights { display: flex; gap: 6px; flex: 0 0 auto; }
  .dm-tlights span { width: 11px; height: 11px; border-radius: 50%; background: hsl(220 15% 80%); }
  .dm-tlights span:nth-child(1) { background: hsl(0 70% 70%); }
  .dm-tlights span:nth-child(2) { background: hsl(40 90% 65%); }
  .dm-tlights span:nth-child(3) { background: hsl(150 50% 60%); }
  .dm-url { flex: 1; padding: 6px 12px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); display: flex; align-items: center; gap: 8px; }
  .dm-actions { display: flex; gap: 8px; }
  .dm-action { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 7px; background: var(--paper); border: 1px solid var(--border-1); color: var(--fg-2); cursor: default; }
  .dm-action.primary { background: hsl(195 80% 40%); border-color: hsl(195 80% 35%); color: #fff; }

  .dm-layout { display: grid; grid-template-columns: 200px 1fr 240px; min-height: 460px; }
  @media (max-width: 1020px) { .dm-layout { grid-template-columns: 160px 1fr 200px; } }
  @media (max-width: 820px) { .dm-layout { grid-template-columns: 1fr; } .dm-left, .dm-right { display: none; } }

  .dm-left, .dm-right { padding: 18px; background: hsl(220 20% 98%); border-right: 1px solid var(--border-1); }
  .dm-right { border-right: 0; border-left: 1px solid var(--border-1); }
  .dm-section-title { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; color: var(--fg-3); margin-bottom: 10px; }

  .dm-palette { display: flex; flex-direction: column; gap: 4px; }
  .dm-palette-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 7px; font-size: 11px; font-weight: 600; color: var(--fg-2); }
  .dm-palette-item svg { color: hsl(195 70% 45%); flex: 0 0 auto; }

  .dm-versions { display: flex; flex-direction: column; gap: 4px; }
  .dm-version { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 7px; font-size: 10.5px; }
  .dm-version.active { border-color: hsl(195 80% 50%); background: hsl(195 70% 97%); }
  .dm-v-tag { font-family: var(--font-mono); font-weight: 700; padding: 2px 5px; border-radius: 3px; background: hsl(220 15% 92%); color: hsl(220 30% 35%); font-size: 9.5px; }
  .dm-v-tag.prod { background: hsl(150 50% 88%); color: hsl(150 60% 25%); }
  .dm-v-meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-3); }

  .dm-canvas { position: relative; background: hsl(220 25% 99%); overflow: hidden; }
  .dm-canvas-grid { position: absolute; inset: 0; background-image:
    linear-gradient(hsl(220 25% 92%) 1px, transparent 1px),
    linear-gradient(90deg, hsl(220 25% 92%) 1px, transparent 1px);
    background-size: 24px 24px; opacity: 0.5; }
  .dm-canvas svg { position: relative; padding: 24px; box-sizing: border-box; }

  .dm-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-1); }
  .dm-tab { font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 5px; color: var(--fg-3); cursor: default; }
  .dm-tab.active { background: hsl(195 70% 95%); color: hsl(195 80% 30%); }

  .dm-prop { padding: 10px 0; border-bottom: 1px solid var(--border-1); }
  .dm-prop:last-child { border-bottom: 0; }
  .dm-prop label { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--fg-3); margin-bottom: 4px; }
  .dm-prop-value { font-size: 12px; color: var(--fg-1); font-weight: 600; line-height: 1.35; }
  .dm-prop-value.mono { font-family: var(--font-mono); font-size: 11px; color: hsl(195 70% 30%); }

  .dm-foot { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; padding: 14px 18px; background: hsl(220 20% 97%); border-top: 1px solid var(--border-1); font-size: 10.5px; color: var(--fg-3); }
  .dm-foot span { display: inline-flex; align-items: center; gap: 6px; }
  .dm-foot svg { color: hsl(195 70% 40%); flex: 0 0 auto; }

  /* Why block, calm prose */
  .why-block { position: relative; max-width: 720px; margin: 0 auto; padding: 56px 24px; text-align: center; }
  .why-block .why-mark { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 2px; background: linear-gradient(90deg, transparent, hsl(195 80% 50%), transparent); }
  .why-block .why-mark.right { top: auto; bottom: 0; }
  .why-prose { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; letter-spacing: -0.012em; color: var(--fg-1); margin: 0 0 22px; text-wrap: pretty; }
  .why-prose:last-of-type { margin-bottom: 0; }
  .why-prose em { font-style: italic; color: hsl(195 80% 35%); font-weight: 500; }

  /* Enterprise Architecture, violet-700 accents */
  .sub-hero-eyebrow.tone-intel { color: var(--violet-700); }
  .eyebrow.tone-intel { color: var(--violet-700); }
  .cap-icon-violet { background: var(--violet-50) !important; color: var(--violet-700) !important; }
  .cap-grid-violet .cap-card:hover { border-color: var(--violet-300); box-shadow: 0 16px 32px -20px hsl(262 70% 30% / .2); }

  .why-block-violet .why-mark { background: linear-gradient(90deg, transparent, var(--violet-500), transparent); }
  .why-block-violet .why-prose em { color: var(--violet-700); }
  .why-prose-small { font-family: var(--font-serif); font-weight: 400; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; color: var(--fg-3); margin: 12px 0 0; font-style: italic; text-wrap: pretty; }

  /* Company page */
  .co-hero { position: relative; padding: 100px 0 80px; background: linear-gradient(180deg, hsl(262 30% 99%) 0%, hsl(262 40% 98%) 100%); overflow: hidden; }
  .co-hero-grain { position: absolute; inset: 0; opacity: 0.4; pointer-events: none; background: radial-gradient(circle at 20% 30%, hsl(262 70% 85% / 0.18), transparent 50%), radial-gradient(circle at 80% 70%, hsl(40 80% 80% / 0.18), transparent 50%); }
  .co-hero-content { position: relative; max-width: 920px; }

  .co-story { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
  .co-story-block p { font-family: var(--font-serif); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--fg-1); margin: 12px 0 0; text-wrap: pretty; }
  .co-story-block p strong { color: var(--primary); font-weight: 700; }
  .co-story-num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--primary); text-transform: uppercase; }
  .co-story-divider { display: flex; justify-content: center; }
  .co-story-divider span { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: 0.5; }

  .co-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1100px; margin: 0 auto; }
  @media (max-width: 820px) { .co-founders { grid-template-columns: 1fr; } }
  .co-founder { background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
  .co-founder-header { display: flex; gap: 20px; align-items: center; }
  .co-portrait { width: 88px; height: 88px; flex: 0 0 auto; border-radius: 999px; overflow: hidden; background: hsl(220 20% 96%); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 12%, transparent); }
  .co-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .co-founder-id { flex: 1; min-width: 0; }
  .co-founder-id h3 { font-family: var(--font-serif); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--fg-1); }
  .co-founder-role { font-size: 13.5px; font-weight: 500; color: var(--primary); letter-spacing: 0.02em; margin-bottom: 4px; }
  .co-founder-tagline { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--fg-3); letter-spacing: -0.005em; }
  .co-founder-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .co-founder-bullets li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--fg-1); }
  .co-founder-bullets li::before { content: '•'; position: absolute; left: 2px; top: 0; color: var(--primary); font-weight: 700; }
  .co-founder-bullets li strong { font-weight: 600; color: var(--fg-1); }
  .co-founder-linkedin { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border-1); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg-1); font-size: 13.5px; font-weight: 500; align-self: flex-start; }
  .co-founder-linkedin:hover { color: #0A66C2; }

  .co-beliefs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: 1000px; margin: 0 auto; background: var(--border-1); border: 1px solid var(--border-1); border-radius: 18px; overflow: hidden; }
  @media (max-width: 720px) { .co-beliefs { grid-template-columns: 1fr; } }
  .co-belief { background: var(--paper); padding: 28px 30px; }
  .co-belief-num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: var(--fg-3); margin-bottom: 12px; }
  .co-belief-tag { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--fg-3); margin-bottom: 4px; }
  .co-belief-vs { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .co-belief-x { font-family: var(--font-serif); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.025em; color: var(--primary); line-height: 1; }
  .co-belief-arrow { font-size: 24px; color: var(--fg-3); line-height: 1; }
  .co-belief-y { font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; color: var(--fg-3); line-height: 1; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: hsl(20 30% 60% / 0.4); }
  .co-belief p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0; }

  .co-location { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1100px; margin: 0 auto; }
  @media (max-width: 760px) { .co-location { grid-template-columns: 1fr; } }
  .co-loc-meta { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
  .co-loc-row { display: flex; gap: 18px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--border-1); }
  .co-loc-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; color: var(--fg-3); text-transform: uppercase; min-width: 90px; }
  .co-loc-val { font-family: var(--font-serif); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--fg-1); }
  .co-loc-vision { margin: 36px 0 0; padding: 0 0 0 24px; border-left: 3px solid var(--primary); }
  .co-loc-vision p { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.4; letter-spacing: -0.012em; color: var(--fg-1); margin: 0; text-wrap: balance; }
  .co-loc-vision footer { margin-top: 16px; padding: 0; background: none; border: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: 10px; }
  .co-loc-vision footer::before { content: ''; width: 18px; height: 1px; background: var(--primary); flex: 0 0 auto; }
  .co-loc-vision-tag { color: var(--primary); }
  .co-loc-map { aspect-ratio: 1; max-width: 420px; margin-left: auto; background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; overflow: hidden; }
  @media (max-width: 760px) { .co-loc-map { margin: 0 auto; } }

  /* Integrations page */
  .int-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 980px; margin: 0 auto; }
  .int-chip { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.4px; padding: 10px 18px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 999px; color: var(--violet-700); transition: all 200ms; white-space: nowrap; }
  .int-chip:hover { border-color: var(--primary); background: var(--accent); transform: translateY(-1px); }

  .int-sap-block { max-width: 980px; margin: 0 auto 56px; padding: 24px 32px; background: var(--accent); border: 1px solid hsl(262 60% 88%); border-left: 3px solid var(--primary); border-radius: 14px; display: flex; gap: 24px; align-items: flex-start; }
  @media (max-width: 640px) { .int-sap-block { flex-direction: column; gap: 12px; } }
  .int-sap-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: #fff; background: var(--primary); padding: 6px 12px; border-radius: 6px; text-transform: uppercase; flex: 0 0 auto; white-space: nowrap; }
  .int-sap-copy { font-size: 15px; line-height: 1.6; color: var(--fg-1); margin: 0; }
  .int-sap-copy strong { color: var(--violet-700); }

  .int-groups { display: flex; flex-direction: column; gap: 40px; max-width: 1180px; margin: 0 auto; }
  .int-group-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border-1); }
  .int-group-title { font-family: var(--font-serif); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--fg-1); }
  .int-group-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--fg-3); text-transform: uppercase; }
  .int-group-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  @media (max-width: 920px) { .int-group-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px) { .int-group-grid { grid-template-columns: repeat(2, 1fr); } }

  .int-tile { background: var(--paper); border: 1px solid var(--border-1); border-radius: 12px; padding: 22px 18px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 110px; transition: all 200ms; }
  .int-tile:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 12px 24px -16px hsl(262 60% 30% / .2); }
  .int-tile-name { font-family: var(--font-serif); font-weight: 700; font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg-1); text-wrap: balance; }
  .int-tile-proto { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.4px; color: var(--violet-700); font-weight: 700; }

  .int-framework { max-width: 920px; margin: 0 auto; text-align: center; padding: 56px 32px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 22px; }
  .int-framework .lead { margin: 24px auto 0; max-width: 720px; }
  .int-auth-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 32px; }
  .int-auth { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; padding: 8px 14px; background: hsl(220 80% 96%); color: hsl(220 80% 40%); border: 1px solid hsl(220 80% 88%); border-radius: 7px; white-space: nowrap; }

  /* Security page, ink-trust */
  .sec-eyebrow { color: var(--ink-700) !important; display: inline-flex; align-items: center; gap: 8px; }
  .sec-eyebrow svg { color: hsl(150 50% 40%); }

  .sec-hero { position: relative; padding: 96px 0 80px; }
  .sec-hero h1 { max-width: 920px; }
  .sec-hero .lead { max-width: 760px; }
  .sec-hero::before { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, var(--border-1) 30%, var(--border-1) 70%, transparent); pointer-events: none; }

  .sec-pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: 1120px; margin: 0 auto; background: var(--border-1); border: 1px solid var(--border-1); border-radius: 18px; overflow: hidden; }
  @media (max-width: 720px) { .sec-pillar-grid { grid-template-columns: 1fr; } }
  .sec-pillar { background: var(--paper); padding: 36px 36px 32px; position: relative; }
  .sec-pillar-num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: var(--fg-3); position: absolute; top: 24px; right: 28px; }
  .sec-pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: hsl(220 25% 96%); color: var(--ink-700); margin-bottom: 18px; border: 1px solid var(--border-1); }
  .sec-pillar h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--fg-1); }
  .sec-pillar p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }

  .sec-compliance { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1080px; margin: 0 auto; }
  @media (max-width: 720px) { .sec-compliance { grid-template-columns: 1fr; } }
  .sec-compliance-col { background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; padding: 28px 28px 22px; }
  .sec-compliance-col.planned { background: hsl(220 20% 98%); border-style: dashed; }
  .sec-compliance-head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--border-1); margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--fg-2); text-transform: uppercase; }
  .sec-compliance-badge { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
  .sec-compliance-badge.done { background: hsl(150 50% 92%); color: hsl(150 50% 30%); }
  .sec-compliance-badge.planned { background: hsl(40 80% 92%); color: hsl(40 80% 30%); }
  .sec-compliance-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--border-2); }
  .sec-compliance-row:last-child { border-bottom: 0; }
  .sec-compliance-row.planned { opacity: 0.7; }
  .sec-compliance-mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
  .sec-compliance-mark.done { background: hsl(150 50% 92%); color: hsl(150 50% 30%); }
  .sec-compliance-mark.planned { background: hsl(40 80% 92%); color: hsl(40 80% 30%); }
  .sec-compliance-label { font-family: var(--font-serif); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--fg-1); margin-bottom: 2px; }
  .sec-compliance-row.planned .sec-compliance-label { font-style: italic; color: var(--fg-2); }
  .sec-compliance-note { font-size: 13px; color: var(--fg-3); line-height: 1.45; }

  .sec-docs { display: flex; flex-direction: column; gap: 12px; max-width: 920px; margin: 0 auto; }
  .sec-doc { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 22px 26px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 14px; text-decoration: none; transition: all 200ms; }
  .sec-doc:hover { border-color: var(--ink-700); transform: translateX(2px); box-shadow: 0 8px 24px -16px hsl(220 30% 20% / .2); }
  .sec-doc-icon { width: 44px; height: 44px; border-radius: 11px; background: hsl(220 25% 96%); color: var(--ink-700); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--border-1); }
  .sec-doc-body h3 { font-family: var(--font-serif); font-weight: 700; font-size: 18px; letter-spacing: -0.015em; margin: 0 0 4px; color: var(--fg-1); }
  .sec-doc-body p { font-size: 13.5px; line-height: 1.5; color: var(--fg-2); margin: 0; }
  .sec-doc-cta { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--ink-700); display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; text-transform: uppercase; }
  @media (max-width: 640px) { .sec-doc { grid-template-columns: auto 1fr; } .sec-doc-cta { grid-column: 2; justify-content: flex-start; } }
  .sec-docs-note { text-align: center; margin-top: 24px; font-size: 13px; color: var(--fg-3); }
  .sec-docs-note a { color: var(--ink-700); font-weight: 600; }

  /* AI Agents page */
  .ai-eyebrow { color: var(--brand-pink) !important; }

  .ai-hero { position: relative; padding: 200px 0 96px; overflow: hidden; }
  .ai-hero-bg { position: absolute; inset: 0; pointer-events: none; }
  .ai-hero-bg::before { content: ''; position: absolute; top: -200px; right: -100px; width: 700px; height: 700px; background: radial-gradient(circle, hsl(330 80% 70% / 0.18), transparent 60%); border-radius: 50%; }
  .ai-hero-bg::after { content: ''; position: absolute; bottom: -300px; left: -200px; width: 800px; height: 800px; background: radial-gradient(circle, hsl(195 80% 60% / 0.14), transparent 60%); border-radius: 50%; }
  .ai-hero-content { position: relative; }
  .ai-h1 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.04; }
  .ai-gradient-text { background: linear-gradient(110deg, var(--brand-cyan) 0%, var(--brand-violet) 50%, var(--brand-pink) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  .ai-lead { font-size: clamp(17px, 1.4vw, 20px); max-width: 760px; margin-top: 28px; }

  .ai-problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; max-width: 980px; margin: 0 auto; }
  @media (max-width: 760px) { .ai-problem-grid { grid-template-columns: 1fr; } }
  .ai-problem { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border-1); }
  .ai-problem-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: hsl(330 80% 96%); color: var(--brand-pink); display: inline-flex; align-items: center; justify-content: center; }
  .ai-problem h4 { font-family: var(--font-serif); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--fg-1); }
  .ai-problem p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }

  .ai-quote { max-width: 800px; margin: 64px auto 0; padding: 36px 48px; background: var(--paper); border-radius: 20px; border: 1px solid var(--border-1); position: relative; text-align: center; }
  .ai-quote svg { color: var(--brand-pink); opacity: 0.4; margin-bottom: 12px; }
  .ai-quote blockquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--fg-1); margin: 0 0 16px; letter-spacing: -0.01em; text-wrap: pretty; }
  .ai-quote blockquote::before { content: '„'; }
  .ai-quote blockquote::after { content: '"'; }
  .ai-quote figcaption { font-size: 13px; color: var(--fg-3); font-style: italic; }

  .ai-roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
  @media (max-width: 920px) { .ai-roles-grid { grid-template-columns: 1fr; } .ai-roles-flow { display: none; } }
  .ai-role-card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; padding: 32px 28px; position: relative; z-index: 1; }
  .ai-role-step { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--brand-pink); margin-bottom: 16px; }
  .ai-role-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, hsl(195 80% 95%), hsl(330 80% 95%)); color: var(--brand-violet); margin-bottom: 18px; }
  .ai-role-card h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--fg-1); }
  .ai-role-card p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }
  .ai-roles-flow { position: absolute; top: 60px; left: 0; right: 0; width: 100%; height: 60px; pointer-events: none; z-index: 0; }

  .ai-scenarios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 760px) { .ai-scenarios-grid { grid-template-columns: 1fr; } }
  .ai-scenario { background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; padding: 28px; transition: all 200ms; }
  .ai-scenario:hover { border-color: hsl(330 70% 80%); box-shadow: 0 16px 32px -20px hsl(330 70% 50% / .2); }
  .ai-scenario-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
  .ai-scenario-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: var(--brand-pink); padding: 5px 10px; background: hsl(330 80% 96%); border-radius: 6px; }
  .ai-scenario-stat { text-align: right; }
  .ai-scenario-stat-value { font-family: var(--font-serif); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--brand-violet); line-height: 1; }
  .ai-scenario-stat-label { font-size: 10.5px; color: var(--fg-3); margin-top: 3px; font-family: var(--font-mono); letter-spacing: 0.4px; }
  .ai-scenario h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--fg-1); }
  .ai-scenario p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }

  /* Diff layout */
  .arch-wrap + .ai-diff { margin-top: 80px; }
  .ai-diff { max-width: 1000px; margin: 0 auto; background: var(--paper); border: 1px solid var(--border-1); border-radius: 20px; overflow: hidden; }
  .ai-diff-head { display: grid; grid-template-columns: 1fr 1fr; background: hsl(220 20% 97%); border-bottom: 1px solid var(--border-1); }
  .ai-diff-head > div { padding: 18px 28px; display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
  .ai-diff-col-bad { color: hsl(0 60% 40%); border-right: 1px solid var(--border-1); }
  .ai-diff-col-good { color: var(--violet-700); }
  .ai-diff-mark { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
  .ai-diff-mark.bad { background: hsl(0 70% 95%); color: hsl(0 70% 50%); }
  .ai-diff-mark.good { background: linear-gradient(135deg, var(--brand-cyan), var(--brand-violet) 60%, var(--brand-pink)); color: #fff; }
  .ai-diff-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border-1); }
  .ai-diff-row:last-child { border-bottom: 0; }
  .ai-diff-bad, .ai-diff-good { padding: 22px 28px; display: flex; gap: 12px; align-items: flex-start; }
  .ai-diff-bad { background: hsl(0 50% 99%); color: hsl(0 0% 45%); border-right: 1px solid var(--border-1); text-decoration: line-through; text-decoration-color: hsl(0 50% 70% / 0.6); text-decoration-thickness: 1px; font-size: 15px; }
  .ai-diff-good { color: var(--fg-1); font-size: 15px; }
  .ai-diff-row-mark { font-family: var(--font-mono); font-weight: 700; font-size: 16px; flex: 0 0 auto; line-height: 1.4; }
  .ai-diff-row-mark.bad { color: hsl(0 60% 60%); }
  .ai-diff-row-mark.good { color: var(--violet-700); }
  .ai-diff-good-headline { font-weight: 700; line-height: 1.4; }
  .ai-diff-good-note { font-size: 13px; color: var(--fg-3); margin-top: 3px; font-style: italic; }
  @media (max-width: 720px) { .ai-diff-head, .ai-diff-row { grid-template-columns: 1fr; } .ai-diff-col-bad, .ai-diff-bad { border-right: 0; border-bottom: 1px solid var(--border-1); } }

  /* Pink cap variant */
  .cap-icon-pink { background: hsl(330 80% 96%) !important; color: var(--brand-pink) !important; }
  .cap-grid-pink .cap-card:hover { border-color: hsl(330 60% 80%); box-shadow: 0 16px 32px -20px hsl(330 70% 40% / .2); }

  .ai-roadmap { max-width: 980px; margin: 48px auto 0; padding: 18px 28px; background: var(--paper); border: 1px dashed hsl(330 60% 80%); border-radius: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; font-size: 13.5px; color: var(--fg-2); text-align: center; }
  .ai-roadmap-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: var(--brand-pink); padding: 4px 8px; background: hsl(330 80% 96%); border-radius: 5px; }
  .ai-roadmap-sep { color: var(--fg-3); }

  .ai-vs-card { padding: 28px; }
  .ai-vs-label { font-family: var(--font-serif); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--fg-1); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-1); }
  .ai-vs-card p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }

  /* Registry mockup */
  .registry-mockup { background: var(--paper); border: 1px solid var(--border-1); border-radius: 22px; overflow: hidden; box-shadow: 0 32px 80px -40px hsl(262 60% 25% / .25); max-width: 1180px; margin: 0 auto; }
  .rg-chrome { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: hsl(220 20% 97%); border-bottom: 1px solid var(--border-1); }
  .rg-tlights { display: flex; gap: 6px; flex: 0 0 auto; }
  .rg-tlights span { width: 11px; height: 11px; border-radius: 50%; background: hsl(220 15% 80%); }
  .rg-tlights span:nth-child(1) { background: hsl(0 70% 70%); }
  .rg-tlights span:nth-child(2) { background: hsl(40 90% 65%); }
  .rg-tlights span:nth-child(3) { background: hsl(150 50% 60%); }
  .rg-url { padding: 6px 12px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .rg-search { flex: 1; padding: 6px 12px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 7px; font-size: 11px; color: var(--fg-3); display: flex; align-items: center; gap: 8px; max-width: 280px; margin-left: auto; }

  .rg-layout { display: grid; grid-template-columns: 220px 1fr 260px; min-height: 480px; }
  @media (max-width: 1080px) { .rg-layout { grid-template-columns: 180px 1fr 220px; } }
  @media (max-width: 880px) { .rg-layout { grid-template-columns: 1fr; } .rg-left, .rg-right { display: none; } }

  .rg-left, .rg-right { padding: 18px; background: hsl(220 20% 98%); }
  .rg-left { border-right: 1px solid var(--border-1); }
  .rg-right { border-left: 1px solid var(--border-1); }

  .rg-section-title { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; color: var(--fg-3); margin-bottom: 10px; }

  .rg-filter { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 11.5px; color: var(--fg-2); border-radius: 6px; }
  .rg-filter:hover { background: var(--paper); }
  .rg-filter span:nth-child(2) { flex: 1; }
  .rg-checkbox { flex: 0 0 auto; width: 13px; height: 13px; border: 1.5px solid var(--border-1); border-radius: 3px; background: var(--paper); position: relative; }
  .rg-checkbox.checked { background: var(--primary); border-color: var(--primary); }
  .rg-checkbox.checked::after { content: '✓'; position: absolute; top: -2px; left: 1.5px; color: #fff; font-size: 10px; font-weight: 700; }
  .rg-count { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }

  .rg-legend { display: flex; flex-direction: column; gap: 6px; }
  .rg-legend-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 11.5px; color: var(--fg-2); }
  .rg-legend-row .rg-count { margin-left: auto; }
  .rg-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
  .rg-dot.ok { background: hsl(150 50% 45%); }
  .rg-dot.warn { background: hsl(40 80% 55%); }
  .rg-dot.err { background: hsl(0 70% 55%); }

  .rg-canvas { background: hsl(220 25% 99%); padding: 24px; position: relative; }
  .rg-canvas svg { display: block; max-height: 480px; }

  .rg-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .rg-pill { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; padding: 4px 8px; border-radius: 5px; }
  .rg-pill.purple { background: var(--violet-50); color: var(--violet-700); border: 1px solid var(--violet-100, hsl(262 60% 90%)); }
  .rg-detail-name { font-family: var(--font-serif); font-weight: 700; font-size: 16px; letter-spacing: -0.012em; color: var(--fg-1); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-1); }

  .rg-detail-row { padding: 8px 0; }
  .rg-detail-row label { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--fg-3); margin-bottom: 3px; }
  .rg-detail-row span { font-size: 12px; color: var(--fg-1); font-weight: 600; line-height: 1.35; }
  .rg-detail-row span.mono { font-family: var(--font-mono); font-size: 11px; color: var(--violet-700); font-weight: 700; }

  .rg-impact { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-1); }
  .rg-impact-title { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; color: var(--fg-3); margin-bottom: 10px; }
  .rg-impact-list { display: flex; flex-direction: column; gap: 5px; }
  .rg-impact-list span { font-size: 11.5px; color: var(--fg-2); padding: 4px 8px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 5px; line-height: 1.3; }
  .rg-impact-list span.more { color: var(--fg-3); font-style: italic; background: transparent; border: 0; padding: 4px 0 0; font-size: 11px; }

  .rg-foot { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; padding: 14px 18px; background: hsl(220 20% 97%); border-top: 1px solid var(--border-1); font-size: 10.5px; color: var(--fg-3); }
  .rg-foot span { display: inline-flex; align-items: center; gap: 6px; }
  .rg-foot svg { color: var(--violet-700); flex: 0 0 auto; }

/* ============================================================
   Scroll Reveal, globale Animation für alle Seiten.
   Aktiviert sich nur, wenn JS die Klasse `js-reveal` auf <html> setzt.
   Ohne JS / mit reduce-motion: Inhalte bleiben statisch sichtbar.
   ============================================================ */
.js-reveal [data-reveal],
.js-reveal .reveal-auto > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-visible,
.js-reveal .reveal-auto > .is-visible {
  opacity: 1;
  transform: none;
}
/* Variants */
.js-reveal [data-reveal="fade"]            { transform: none; }
.js-reveal [data-reveal="slide-left"]      { transform: translateX(-24px); }
.js-reveal [data-reveal="slide-right"]     { transform: translateX(24px); }
.js-reveal [data-reveal="scale"]           { transform: scale(0.96); }
.js-reveal [data-reveal="slide-left"].is-visible,
.js-reveal [data-reveal="slide-right"].is-visible,
.js-reveal [data-reveal="scale"].is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal .reveal-auto > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


  /* ===== Kontakt page ===== */
  .kn-hero .kn-preset { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 10px 18px 10px 14px; border: 1px solid hsl(var(--h-primary)/.25); background: hsl(var(--h-primary)/.06); border-radius: 999px; font-size: 14px; color: var(--fg-1); }
  .kn-hero .kn-preset-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px hsl(var(--h-primary)/.15); }
  .kn-hero .kn-preset-label strong { font-weight: 600; }
  .kn-hero .kn-preset-clear { font-size: 13px; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
  .kn-hero .kn-preset-clear:hover { color: var(--primary); }

  .kn-form-section { padding-top: 64px; padding-bottom: 96px; }
  .kn-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 64px; align-items: start; }
  @media (max-width: 980px) { .kn-grid { grid-template-columns: 1fr; gap: 48px; } }

  .kn-section-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: 24px; padding: 6px 14px 6px 12px; background: var(--accent); border-radius: 999px; }
  .kn-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

  .kn-form { display: flex; flex-direction: column; gap: 22px; }
  .kn-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  @media (max-width: 720px) { .kn-form-row { grid-template-columns: 1fr; } }

  .kn-field { display: flex; flex-direction: column; gap: 8px; }
  .kn-label { font-size: 13px; font-weight: 600; color: var(--fg-1); display: inline-flex; align-items: baseline; gap: 6px; }
  .kn-label em { font-style: normal; color: var(--primary); font-weight: 700; }
  .kn-label .kn-opt { font-style: normal; color: var(--fg-3); font-weight: 500; font-size: 12px; }

  .kn-form input[type="text"],
  .kn-form input[type="email"],
  .kn-form input[type="tel"],
  .kn-form select,
  .kn-form textarea {
    width: 100%;
    border: 1px solid var(--border-1);
    background: var(--paper);
    color: var(--fg-1);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
    -webkit-appearance: none;
  }
  .kn-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
  .kn-form input::placeholder, .kn-form textarea::placeholder { color: var(--fg-3); }
  .kn-form input:focus,
  .kn-form select:focus,
  .kn-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px hsl(var(--h-primary)/.12);
  }

  .kn-select-wrap { position: relative; }
  .kn-select-wrap select { padding-right: 44px; cursor: pointer; }
  .kn-select-wrap > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-2); pointer-events: none; }

  .kn-consent { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--page-bg-surface); border: 1px solid var(--border-1); border-radius: 14px; font-size: 14px; color: var(--fg-2); line-height: 1.5; }
  .kn-consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--primary); margin-top: 2px; cursor: pointer; }
  .kn-consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

  .kn-form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
  .kn-submit { padding: 14px 26px; font-size: 15px; }
  .kn-form-meta { font-size: 13px; color: var(--fg-3); }

  /* Aside */
  .kn-aside { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 96px; }
  @media (max-width: 980px) { .kn-aside { position: static; } }
  .kn-aside-block { padding: 28px 28px; background: var(--paper); border: 1px solid var(--border-1); border-radius: 20px; }
  .kn-aside-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
  .kn-aside-title { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: var(--fg-1); margin: 0 0 16px; }
  .kn-aside-body { font-size: 14px; line-height: 1.65; color: var(--fg-2); margin: 0; }
  .kn-muted { color: var(--fg-3); font-size: 13px; }

  .kn-direct { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .kn-direct li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: center; font-size: 14px; }
  .kn-direct li svg { color: var(--primary); }
  .kn-direct a { color: var(--fg-1); text-decoration: none; font-weight: 600; }
  .kn-direct a:hover { color: var(--primary); }
  .kn-direct-note { grid-column: 2; font-size: 12px; color: var(--fg-3); margin-top: -2px; }

  .kn-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: kn-step; }
  .kn-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
  .kn-step-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--primary); background: var(--accent); border-radius: 999px; padding: 4px 0; text-align: center; letter-spacing: 0.08em; }
  .kn-steps strong { color: var(--fg-1); font-weight: 600; }

  /* Success state */
  .kn-success { text-align: left; max-width: 720px; padding: 48px; }
  .kn-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; }
  .kn-success h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
  .kn-success-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; padding: 24px; background: var(--page-bg-surface); border-radius: 14px; }
  @media (max-width: 600px) { .kn-success-meta { grid-template-columns: 1fr; } }
  .kn-success-meta-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
  .kn-success-meta-value { font-size: 15px; font-weight: 600; color: var(--fg-1); }
  .kn-success-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

  /* FAQ */
  .kn-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
  .kn-faq-item { width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--border-1); border-radius: 14px; padding: 0; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; font-family: inherit; color: inherit; }
  .kn-faq-item:hover { border-color: hsl(var(--h-primary)/.3); }
  .kn-faq-item.open { border-color: hsl(var(--h-primary)/.4); box-shadow: var(--shadow-md); }
  .kn-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; font-size: 16px; font-weight: 600; color: var(--fg-1); }
  .kn-faq-item.open .kn-faq-q { color: var(--primary); }
  .kn-faq-a { padding: 0 26px 24px; font-size: 15px; line-height: 1.6; color: var(--fg-2); }