/* ---------- Home page ---------- */
.hero { position: relative; min-height: clamp(620px, 92vh, 900px); display: flex; align-items: center; overflow: hidden; padding-top: var(--header-h); }
.hero__bg { position: absolute; left: 0; right: 0; bottom: 0; top: var(--hero-bg-top, 30px); z-index: 0; pointer-events: none;
  background-image: url("../assets/hero-bg.png");
  background-size: cover; background-position: var(--hero-bg-x, 70%) center; background-repeat: no-repeat; }
@media (prefers-reduced-motion: no-preference){ .hero__bg { animation: nxBgIn 1.4s var(--ease-out) both, nxBgFloat 16s ease-in-out 1.4s infinite; } }
@keyframes nxBgIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes nxBgFloat { 0%, 100% { transform: scale(1.02) translateY(0); } 50% { transform: scale(1.02) translateY(-10px); } }
/* Ambient glow orbs behind the node network - adds depth to the hero */
.hero__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__glow::before, .hero__glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); }
.hero__glow::before { width: 460px; height: 460px; top: -120px; right: 6%; background: var(--nx-green); opacity: .22; }
.hero__glow::after { width: 420px; height: 420px; bottom: -160px; left: 4%; background: var(--nx-green-deep); opacity: .18; }
@media (prefers-reduced-motion: no-preference){ .hero__glow::before { animation: nxBgFloat 18s ease-in-out 1.4s infinite; } }

/* Subtle node network over the still image (image stays as fallback; can be swapped for video later) */
.hero__net { position: absolute; left: 0; right: 0; bottom: 0; top: var(--hero-bg-top, 30px); z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: .65; }
@media (prefers-reduced-motion: no-preference){ .hero__net { animation: nxBgIn 1.6s var(--ease-out) .2s both; } }
@media (max-width: 760px){ .hero__net { opacity: .4; } }
.hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--hero-fade, 1);
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 30%, color-mix(in srgb, var(--bg) 30%, transparent) 58%, transparent 80%),
    linear-gradient(0deg, var(--bg) 0%, transparent 30%, transparent 78%, color-mix(in srgb, var(--bg) 72%, transparent) 100%);
}
@media (max-width: 760px){ .hero__bg { background-position: 64% center; } .hero__fade { background: linear-gradient(0deg, var(--bg) 6%, color-mix(in srgb, var(--bg) 62%, transparent) 60%, color-mix(in srgb, var(--bg) 80%, transparent) 100%); } }
.hero .nx-container { position: relative; z-index: 2; }
.hero__inner { max-width: 760px; padding: 40px 0; }
.hero h1 { font-size: clamp(34px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -0.025em; margin: 20px 0 0; }
.hero h1 .l2 { color: var(--fg-muted); }
.hero__lead { margin-top: 22px; font-size: clamp(16px, 1.5vw, 20px); color: var(--fg-muted); max-width: 60ch; line-height: 1.62; }
.hero__models { display: flex; align-items: flex-start; gap: 11px; max-width: 680px; margin-top: 18px; padding: 13px 16px; border: 1px solid color-mix(in srgb, var(--nx-green) 32%, var(--border)); border-radius: var(--r-md); background: color-mix(in srgb, var(--nx-green) 8%, var(--surface)); }
.hero__models-icon { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; color: var(--nx-green); }
.hero__models-icon svg { width: 18px; height: 18px; }
.hero__models p { margin: 0; color: var(--fg-muted); font-size: 14px; line-height: 1.55; }
.hero__models strong { color: var(--fg); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--border); max-width: 660px; }
.hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hero__stat--link { text-decoration: none; color: inherit; transition: transform .18s var(--ease-out); }
.hero__stat--link:hover { transform: translateY(-2px); }
.hero__stat .n { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; background: var(--nx-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__stat .d { font-size: 13.5px; color: var(--fg-subtle); max-width: 22ch; }

/* Keep the image-led hero dark even when the surrounding UI uses the light theme. */
[data-theme="light"] .hero { background: var(--nx-navy-deep); color: #fff; }
[data-theme="light"] .hero__fade {
  background:
    linear-gradient(90deg, #001a3b 0%, rgba(0,26,59,.91) 30%, rgba(0,26,59,.38) 59%, transparent 81%),
    linear-gradient(0deg, #001a3b 0%, transparent 31%, transparent 78%, rgba(0,26,59,.72) 100%);
}
[data-theme="light"] .hero__glow::before { opacity: .2; }
[data-theme="light"] .hero__glow::after { opacity: .16; }
[data-theme="light"] .hero h1 { color: #fff; }
[data-theme="light"] .hero h1 .l2 { color: #a8b8cd; }
[data-theme="light"] .hero__lead { color: #b3c1d3; }
[data-theme="light"] .hero__models { border-color: rgba(91,208,104,.42); background: rgba(8,52,67,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
[data-theme="light"] .hero__models p { color: #b7c7d8; }
[data-theme="light"] .hero__models strong { color: #fff; }
[data-theme="light"] .hero__cta .btn-primary { background: #f5f6f7; color: #001a3b; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
[data-theme="light"] .hero__cta .btn-primary:hover { background: #dfe5ed; }
[data-theme="light"] .hero__cta .btn-outline { color: #f5f6f7; border-color: rgba(255,255,255,.3); background: rgba(2,24,52,.3); }
[data-theme="light"] .hero__cta .btn-outline:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
[data-theme="light"] .hero__stats { border-top-color: rgba(255,255,255,.14); }
[data-theme="light"] .hero__stat .n { background: linear-gradient(90deg, #fff, #77ec55); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .hero__stat .d { color: #91a5bd; }
@media (max-width: 760px){
  [data-theme="light"] .hero__fade { background: linear-gradient(0deg, #001a3b 7%, rgba(0,26,59,.74) 61%, rgba(0,26,59,.88) 100%); }
}

/* Business impact line */
.impact-band { position: relative; z-index: 3; padding: 34px 0 38px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), var(--surface-2)); border-top: 1px solid color-mix(in srgb, #39d8ff 18%, var(--border)); border-bottom: 1px solid color-mix(in srgb, var(--nx-green) 18%, var(--border)); }
.impact-line { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.impact-line::before { content: ""; position: absolute; left: 8%; right: 8%; top: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(47,190,255,.6) 12%, rgba(112,239,69,.72) 50%, rgba(47,190,255,.6) 88%, transparent); box-shadow: 0 0 12px rgba(49,201,255,.32); }
.impact-item { position: relative; min-width: 0; }
.impact-node { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #8af5ff; background: radial-gradient(circle at 38% 32%, #164d70, #07233f 70%); border: 1px solid rgba(79,218,255,.72); box-shadow: inset 1px 1px 0 rgba(255,255,255,.13), 0 0 0 5px rgba(5,31,57,.92), 0 0 22px rgba(44,205,255,.38); }
.impact-node::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(91,231,255,.08); }
.impact-node > span { position: relative; z-index: 1; display: grid; place-items: center; }
.impact-node svg { width: 20px; height: 20px; }
.impact-copy { padding-top: 17px; max-width: 25ch; }
.impact-copy h3 { font-size: 16px; color: var(--fg-strong); }
.impact-copy p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }

/* Hero entrance - staggered, plays once on load. Reduced-motion shows end-state. */
@media (prefers-reduced-motion: no-preference){
  .hero__inner > .nx-overline,
  .hero__inner > h1,
  .hero__inner > .hero__lead,
  .hero__inner > .hero__models,
  .hero__inner > .hero__cta,
  .hero__inner > .hero__stats { opacity: 0; will-change: opacity, transform; }
  body[data-page="home"] .hero__inner > .nx-overline { animation: nxHeroIn .7s var(--ease-out) .06s both; }
  body[data-page="home"] .hero__inner > h1 { animation: nxHeroIn .8s var(--ease-out) .16s both; }
  body[data-page="home"] .hero__inner > .hero__lead { animation: nxHeroIn .8s var(--ease-out) .30s both; }
  body[data-page="home"] .hero__inner > .hero__models { animation: nxHeroIn .8s var(--ease-out) .40s both; }
  body[data-page="home"] .hero__inner > .hero__cta { animation: nxHeroIn .8s var(--ease-out) .50s both; }
  body[data-page="home"] .hero__inner > .hero__stats { animation: nxHeroIn .8s var(--ease-out) .62s both; }
}
@keyframes nxHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sec-head { max-width: 720px; }
.sec-head .nx-h2 { margin-top: 14px; }
.sec-head .nx-lead { margin-top: 16px; }
.sec-head--center { margin: 0 auto; text-align: center; }
.sec-head--center .nx-overline { justify-content: center; }
.sec-head--center .nx-lead { margin-left: auto; margin-right: auto; }

/* Suite overview infographic */
.suite-overview-section { overflow: hidden; background: var(--surface-2); border-top: 1px solid var(--border); }
.suite-overview-section .sec-head { max-width: 860px; }
.suite-overview-section .nx-lead { max-width: 72ch; }
.suite-overview { margin: 38px 0 0; }
.suite-overview a { display: block; overflow: hidden; border: 1px solid rgba(66, 184, 255, .24); border-radius: clamp(14px, 2vw, 24px); background: #07336f; box-shadow: 0 28px 70px -38px rgba(0, 39, 91, .85); }
.suite-overview img { display: block; width: 100%; height: auto; transition: transform .35s var(--ease-out), filter .35s var(--ease-out); }
.suite-overview a:hover img { transform: scale(1.008); filter: saturate(1.05); }
.suite-overview figcaption { margin-top: 12px; color: var(--fg-subtle); font-size: 13px; text-align: center; }
html[lang="de"] .suite-overview--en,
html[lang="en"] .suite-overview--de { display: none; }
@media (max-width: 700px) {
  .suite-overview-section { padding-top: 64px; padding-bottom: 64px; }
  .suite-overview { margin-top: 26px; }
  .suite-overview a { border-radius: 12px; }
  .suite-overview figcaption { padding: 0 12px; line-height: 1.5; }
}

/* System integration map */
.integration-section { --int-bg:#061a31; --int-panel:#09233e; position: relative; overflow: hidden; color:#fff; background:
  radial-gradient(circle at 43% 58%, rgba(0,177,255,.13), transparent 28%),
  radial-gradient(circle at 57% 58%, rgba(119,239,76,.10), transparent 20%),
  linear-gradient(135deg, #04172c 0%, var(--int-bg) 48%, #071c34 100%);
  border-top:1px solid rgba(89,188,232,.16); border-bottom:1px solid rgba(89,188,232,.16); }
.integration-section::before { content:""; position:absolute; inset:0; opacity:.16; pointer-events:none; background-image:linear-gradient(rgba(44,153,211,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(44,153,211,.12) 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(ellipse at center,#000,transparent 80%); }
.integration-section > .nx-container { position:relative; z-index:1; }
.integration-section .sec-head { max-width:900px; }
.integration-section .nx-overline { color:#6eef46; }
.integration-section .nx-h2 { max-width:19ch; margin-left:auto; margin-right:auto; font-size:clamp(34px,4vw,52px); line-height:1.08; color:#fff; }
.integration-section .nx-lead { max-width:72ch; font-size:clamp(17px,1.55vw,21px); line-height:1.65; color:#b7c7da; }
.integration-stage { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(330px,.9fr); gap:54px; align-items:center; margin-top:38px; }
.integration-visual { position:relative; min-height:610px; }
.integration-systems { position:absolute; z-index:3; inset:0 auto 0 0; width:190px; display:flex; flex-direction:column; justify-content:space-between; padding:10px 0; }
.integration-system { position:relative; display:flex; align-items:center; gap:15px; width:174px; min-height:58px; padding:11px 16px; border:1px solid rgba(82,181,220,.38); border-radius:13px; background:linear-gradient(110deg,rgba(9,36,62,.94),rgba(5,27,50,.82)); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.integration-system::after { content:""; position:absolute; top:50%; right:-5px; width:9px; height:9px; border-radius:50%; background:#89f64f; box-shadow:0 0 7px #89f64f,0 0 18px #89f64f; transform:translateY(-50%); }
.integration-system > span { display:grid; place-items:center; flex:0 0 28px; color:#74ef43; }
.integration-system svg { width:27px; height:27px; stroke-width:1.8; }
.integration-system strong { font-size:17px; font-weight:600; color:#f5f8fc; }
.integration-streams { position:absolute; z-index:1; inset:0 0 0 98px; width:calc(100% - 98px); height:100%; overflow:visible; }
.integration-lines path,.integration-output-lines path { fill:none; stroke:url(#nxStream); stroke-width:1.25; opacity:.82; filter:url(#nxGlow); }
.integration-output-lines path { stroke-width:1; opacity:.62; }
.integration-rings circle { fill:none; stroke:#1687bd; stroke-width:1; stroke-dasharray:2 9; opacity:.32; }
.integration-orb { position:absolute; z-index:4; left:58%; top:50%; width:226px; height:226px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; transform:translate(-50%,-50%); background:
  radial-gradient(circle at 48% 42%,rgba(24,70,85,.98),rgba(4,27,50,.98) 68%),
  #071b30; border:2px solid transparent; background-clip:padding-box; box-shadow:0 0 0 2px #4fe3ff,0 0 0 4px rgba(137,246,79,.48),0 0 38px rgba(58,215,255,.66),22px 0 42px rgba(129,244,66,.34),inset 0 0 48px rgba(24,189,220,.17); }
.integration-orb::after { content:""; position:absolute; inset:-20px; border:1px solid rgba(43,164,216,.28); border-radius:50%; }
.integration-orb > span { color:#fff; filter:drop-shadow(0 0 8px #7ef2ff); }
.integration-orb svg { width:42px; height:42px; stroke-width:2; }
.integration-orb strong { margin-top:14px; font-size:42px; letter-spacing:-.04em; line-height:1; color:#fff; }
.integration-orb small { margin-top:10px; font-size:15px; color:#c9d5e3; }
.integration-copy { padding-top:12px; }
.integration-copy h3 { font-size:clamp(25px,2.2vw,34px); line-height:1.2; color:#fff; }
.integration-copy > p { margin-top:20px; font-size:17px; line-height:1.72; color:#b7c7da; }
.capability-panel { margin-top:28px; padding:20px; border:1px solid rgba(82,181,220,.32); border-radius:14px; background:linear-gradient(135deg,rgba(8,36,62,.98),rgba(4,24,45,.76)); box-shadow:0 22px 42px -28px rgba(0,0,0,.74), inset 0 1px 0 rgba(255,255,255,.06); }
.capability-panel__head { display:flex; align-items:center; gap:17px; padding-bottom:18px; border-bottom:1px solid rgba(82,181,220,.22); }
.capability-panel__head[href] { color:inherit; text-decoration:none; }
.capability-panel__number { flex:0 0 auto; font-size:56px; line-height:.9; font-weight:800; letter-spacing:-.05em; color:#7bf04a; text-shadow:0 0 24px rgba(123,240,74,.32); }
.capability-panel__head strong { display:block; font-size:19px; line-height:1.15; color:#fff; }
.capability-panel__head small { display:block; margin-top:5px; font-size:13px; color:#aebfd2; }
.capability-clusters { display:grid; gap:10px; margin-top:16px; }
.capability-cluster { display:grid; grid-template-columns:42px minmax(0,1fr); gap:13px; align-items:center; min-height:64px; padding:10px 12px; border:1px solid rgba(82,181,220,.22); border-radius:11px; color:#fff; text-decoration:none; background:rgba(5,25,47,.5); transition:border-color .2s var(--ease-out), background .2s var(--ease-out), transform .2s var(--ease-out); }
.capability-cluster:hover { transform:translateY(-2px); border-color:rgba(126,239,70,.56); background:rgba(12,45,64,.72); }
.capability-cluster__ic { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#7bf04a; background:rgba(96,219,81,.14); }
.capability-cluster__ic svg { width:22px; height:22px; }
.capability-cluster strong { display:block; font-size:14.5px; color:#fff; }
.capability-cluster small { display:block; margin-top:3px; font-size:12.5px; line-height:1.35; color:#b7c7da; }
.capability-link { display:inline-flex; align-items:center; gap:9px; margin-top:18px; color:#87f15b; font-size:14px; font-weight:700; text-decoration:none; }
.capability-link svg { width:17px; height:17px; }
.integration-outcomes { display:grid; gap:12px; margin-top:30px; }
.integration-outcome { position:relative; display:flex; align-items:center; gap:20px; min-height:76px; padding:11px 20px; border:1px solid rgba(82,181,220,.28); border-radius:12px; background:linear-gradient(100deg,rgba(8,36,62,.96),rgba(5,27,50,.72)); }
.integration-outcome::before { content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px; background:#76ee42; box-shadow:0 0 12px rgba(118,238,66,.65); }
.integration-outcome > span { display:grid; place-items:center; flex:0 0 50px; width:50px; height:50px; border-radius:50%; color:#79ef45; background:rgba(69,200,92,.14); }
.integration-outcome svg { width:26px; height:26px; stroke-width:1.8; }
.integration-outcome strong { font-size:17px; font-weight:600; color:#f5f8fc; }
.integration-note { display:flex; align-items:center; justify-content:center; gap:14px; max-width:920px; margin:28px auto 0; padding:17px 24px; border:1px solid rgba(82,181,220,.25); border-radius:11px; background:rgba(5,25,47,.72); font-size:14px; line-height:1.5; text-align:center; color:#b7c7da; }
.integration-note > span:first-child { flex:0 0 auto; display:grid; place-items:center; color:#78ef43; }
.integration-note svg { width:27px; height:27px; }
@media (prefers-reduced-motion:no-preference) {
  .integration-lines path { stroke-dasharray:5 5; animation:nxStreamMove 5s linear infinite; }
  .integration-output-lines path { stroke-dasharray:3 7; animation:nxStreamMove 4s linear infinite; }
  .integration-orb { animation:nxOrbPulse 4s ease-in-out infinite; }
}
@keyframes nxStreamMove { to { stroke-dashoffset:-80; } }
@keyframes nxOrbPulse { 50% { box-shadow:0 0 0 2px #4fe3ff,0 0 0 4px rgba(137,246,79,.65),0 0 50px rgba(58,215,255,.78),26px 0 52px rgba(129,244,66,.4),inset 0 0 48px rgba(24,189,220,.22); } }
@media (max-width:1060px) {
  .integration-stage { grid-template-columns:1fr; gap:24px; }
  .integration-visual { max-width:760px; width:100%; margin:0 auto; }
  .integration-copy { max-width:760px; width:100%; margin:0 auto; padding-top:0; }
  .capability-clusters { grid-template-columns:repeat(2,1fr); }
  .integration-outcomes { grid-template-columns:repeat(3,1fr); }
  .integration-outcome { align-items:flex-start; flex-direction:column; min-height:150px; gap:12px; }
}
@media (max-width:700px) {
  .integration-section .nx-h2 { font-size:clamp(30px,8vw,38px); }
  .integration-visual { min-height:auto; display:grid; gap:28px; }
  .integration-systems { position:relative; width:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0; }
  .integration-system { width:auto; min-height:58px; }
  .integration-system::after,.integration-streams { display:none; }
  .integration-orb { position:relative; left:auto; top:auto; width:210px; height:210px; margin:12px auto; transform:none; }
  .capability-clusters { grid-template-columns:1fr; }
  .integration-outcomes { grid-template-columns:1fr; }
  .integration-outcome { flex-direction:row; align-items:center; min-height:74px; }
}
@media (max-width:430px) {
  .integration-systems { grid-template-columns:1fr; }
}

/* Problem */
.prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.prob-card { position: relative; overflow: hidden; padding: 26px; transition: box-shadow .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out); }
.prob-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--nx-green) 40%, var(--border));
  box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--nx-green) 18%, transparent), 0 10px 34px -10px color-mix(in srgb, var(--nx-green) 32%, transparent);
}
.prob-card:hover .pn { opacity: .45; }
/* Large decorative background numeral - adds depth without competing with the text */
.prob-card .pn { position: absolute; top: -18px; right: 6px; z-index: 0; font-family: var(--font-mono); font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--border-strong); opacity: .35; pointer-events: none; transition: opacity .25s var(--ease-out); }
.prob-card h3 { position: relative; z-index: 1; font-size: 18px; margin: 14px 0 8px; }
.prob-card p { position: relative; z-index: 1; font-size: 14.5px; color: var(--fg-muted); line-height: 1.55; }
.prob-arrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 30px 0; }
.prob-arrow .ln { height: 1px; flex: 1; max-width: 160px; background: linear-gradient(90deg, transparent, var(--border-strong)); }
.prob-arrow .ln.r { background: linear-gradient(90deg, var(--border-strong), transparent); }
.prob-arrow .lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--nx-green); }
.prob-solution { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: stretch; }
.prob-answer { position: relative; overflow: hidden; padding: 40px; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
.prob-answer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--nx-gradient-x); }
.prob-answer p { font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; color: var(--fg-strong); line-height: 1.4; letter-spacing: -0.01em; }

/* Product-preview mockup - "question in, sourced answer out" */
.hp-mock { display: flex; flex-direction: column; height: 100%; }
.hp-mock .mock__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hp-chat { display: grid; gap: 18px; perspective: 900px; }
.hp-msg { display: grid; max-width: 88%; }
.hp-msg--user { justify-self: end; justify-items: end; }
.hp-msg--nexus { justify-self: start; justify-items: start; }
.hp-msg__sender { display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); }
.hp-msg__sender--nexus { color: #7ee9ff; text-transform: lowercase; letter-spacing: .05em; text-shadow: 0 0 12px rgba(54, 210, 255, .72); }
.hp-nexus-dot { width: 7px; height: 7px; border-radius: 50%; background: #62e8ff; box-shadow: 0 0 8px #62e8ff, 0 0 18px rgba(98,232,255,.8); }
.hp-bubble { position: relative; padding: 15px 18px; transform-style: preserve-3d; }
.hp-bubble p { font-size: 14px; line-height: 1.55; }
.hp-bubble--user { border: 1px solid color-mix(in srgb, var(--border-strong) 78%, transparent); border-radius: 18px 18px 5px 18px; color: var(--fg); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 92%, #274b68), var(--surface-inset)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.055), 0 10px 18px -13px rgba(0,0,0,.8); transform: rotateY(-2deg) rotateX(1deg); }
.hp-bubble--user::after { content: ""; position: absolute; right: -1px; bottom: -8px; width: 16px; height: 17px; background: var(--surface-inset); clip-path: polygon(25% 0,100% 0,100% 100%); border-radius: 0 0 4px 0; }
.hp-bubble--nexus { border: 1px solid rgba(85, 221, 255, .72); border-radius: 18px 18px 18px 5px; color: #d9f7ff; background: linear-gradient(145deg, rgba(13, 74, 119, .98), rgba(5, 35, 74, .98)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.16), inset -12px -16px 30px rgba(1,16,49,.28), 0 0 0 1px rgba(43,174,255,.14), 0 12px 28px -10px rgba(0,91,178,.78), 0 0 28px rgba(35,190,255,.22); transform: rotateY(2deg) rotateX(-1deg) translateZ(8px); }
.hp-bubble--nexus::before { content: ""; position: absolute; inset: 1px 12px auto; height: 42%; border-radius: 16px 16px 50% 50%; background: linear-gradient(180deg, rgba(144,235,255,.13), transparent); pointer-events: none; }
.hp-bubble--nexus::after { content: ""; position: absolute; left: -1px; bottom: -8px; width: 16px; height: 17px; background: #06274f; clip-path: polygon(0 0,75% 0,0 100%); filter: drop-shadow(-1px 1px 0 rgba(85,221,255,.6)); }
.hp-bubble--nexus p { position: relative; z-index: 1; font-size: 14.5px; }
.hp-bubble--nexus b { color: #83f7ff; font-weight: 750; text-shadow: 0 0 12px rgba(76,225,255,.58); }
.hp-a { margin-top: 16px; padding-left: 10px; }
.hp-cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hp-cite { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-family: var(--font-mono); color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 5px 10px; }
.hp-cite .ci { color: var(--nx-green); display: grid; place-items: center; flex-shrink: 0; }
.hp-cite .ci svg { width: 13px; height: 13px; }
@media (max-width: 880px){ .prob-solution { grid-template-columns: 1fr; } }
@media (max-width: 520px){ .hp-msg { max-width: 94%; } .hp-bubble { padding: 13px 15px; } .hp-bubble--user, .hp-bubble--nexus { transform: none; } }

/* Knowledge Continuity / whitepaper */
.kc-section { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.kc-copy .nx-h2 { margin-top: 14px; }
.kc-copy > .nx-lead { margin-top: 18px; }
.kc-stat { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 30px; padding: 20px 22px; border-left: 3px solid var(--nx-green); background: var(--surface); border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: var(--shadow-1); }
.kc-stat__n { font-size: clamp(28px, 3vw, 40px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; background: var(--nx-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kc-stat__copy { display: grid; gap: 4px; }
.kc-stat__text { font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }
.kc-stat__source { font-size: 10.5px; color: var(--fg-subtle); }
.kc-benefits { display: grid; gap: 10px; margin-top: 26px; }
.kc-benefits li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--fg); }
.kc-check { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 999px; color: var(--nx-green); background: color-mix(in srgb, var(--nx-green) 14%, transparent); }
.kc-check svg { width: 13px; height: 13px; }
.kc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.kc-note { margin-top: 10px; font-size: 12.5px; color: var(--fg-subtle); }
.kc-card { padding: 30px; }
.kc-card__head { display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.kc-cover { display: block; border-radius: 5px; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 14px 30px -12px rgba(0,0,0,.65), 0 0 0 1px color-mix(in srgb, #fff 18%, transparent); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.kc-cover:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 18px 36px -12px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--nx-green) 45%, transparent); }
.kc-cover img { width: 100%; height: auto; }
.kc-card__eyebrow { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--nx-green); }
.kc-card h3 { font-size: 20px; }
.kc-card__preview { margin-top: 9px; font-size: 12.5px; color: var(--fg-subtle); }
.kc-flow { display: grid; gap: 0; margin-top: 8px; }
.kc-step { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 15px; padding: 18px 0; }
.kc-step:not(:last-child) { border-bottom: 1px solid var(--border); }
.kc-step__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); color: var(--nx-green); background: var(--surface-inset); border: 1px solid var(--border); }
.kc-step__icon svg { width: 20px; height: 20px; }
.kc-step strong { display: block; font-size: 14.5px; color: var(--fg-strong); }
.kc-step p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--fg-subtle); }
.kc-result { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; padding: 16px 18px; border-radius: var(--r-lg); color: var(--nx-green); background: color-mix(in srgb, var(--nx-green) 10%, transparent); border: 1px solid color-mix(in srgb, var(--nx-green) 25%, transparent); }
.kc-result > span { flex: 0 0 21px; }
.kc-result svg { width: 21px; height: 21px; }
.kc-result p { font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }
@media (max-width: 960px){ .kc-grid { grid-template-columns: 1fr; gap: 42px; } }
@media (max-width: 560px){ .kc-stat { grid-template-columns: 1fr; gap: 10px; } .kc-card { padding: 22px; } .kc-card__head { grid-template-columns: 82px 1fr; gap: 16px; } }

/* Benefits */
.ben-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.ben-card { padding: 26px; }
.ben-ic { width: 48px; height: 48px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--icon-tile-bg); border: 1px solid var(--icon-tile-border); color: var(--nx-green); box-shadow: var(--icon-tile-shadow); margin-bottom: 18px; }
.ben-ic svg { width: 24px; height: 24px; }
.ben-card h3 { font-size: 17px; margin-bottom: 8px; }
.ben-card p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; }

/* Nexus Shield - uebergreifende Schutzebene */
.shield-section { overflow: hidden; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.shield-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; margin-top: 6px; }
.shield-ic-lg { width: 60px; height: 60px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--icon-tile-bg); border: 1px solid var(--icon-tile-border); color: var(--nx-green); box-shadow: var(--icon-tile-shadow); margin-bottom: 20px; }
.shield-ic-lg svg { width: 30px; height: 30px; }
.shield-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 26px; }
.shield-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--fg); line-height: 1.4; }
.shield-list .ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--nx-green) 16%, transparent); color: var(--nx-green); margin-top: 1px; }
.shield-list .ck svg { width: 13px; height: 13px; }
.shield-cta { margin-top: 30px; }
.shield-visual { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.shield-visual img { display: block; width: 112%; max-width: none; height: auto; flex: 0 0 auto; mix-blend-mode: lighten; filter: drop-shadow(0 24px 45px rgba(0, 15, 35, .18)); -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 51%, #000 62%, rgba(0,0,0,.92) 78%, transparent 100%); mask-image: radial-gradient(ellipse 72% 78% at 50% 51%, #000 62%, rgba(0,0,0,.92) 78%, transparent 100%); }
.shield-img { opacity: 0; transition: opacity .18s var(--ease-out); }
.shield-img.is-loaded { opacity: 1; }
[data-theme="light"] .shield-section { color: #fff; background: radial-gradient(circle at 74% 46%, rgba(24,134,210,.16), transparent 34%), linear-gradient(135deg, #03172c, #082a4c 62%, #041c35); border-color: rgba(77,199,255,.18); }
[data-theme="light"] .shield-section .nx-h2 { color: #fff; }
[data-theme="light"] .shield-section .nx-lead { color: #b5c5d8; }
[data-theme="light"] .shield-section .shield-list li { color: #eef4fa; }
[data-theme="light"] .shield-section .shield-list .ck { background: rgba(72,196,81,.18); color: #73ed55; }
[data-theme="light"] .shield-section .shield-ic-lg { background: rgba(66,184,83,.13); border-color: rgba(94,221,103,.3); color: #72ec53; box-shadow: 0 12px 28px -16px rgba(79,227,97,.6); }
[data-theme="light"] .shield-section .btn-primary { background: #f5f6f7; color: #001a3b; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
[data-theme="light"] .shield-section .btn-primary:hover { background: #dfe5ed; }
[data-theme="light"] .shield-visual img { width: 112%; max-width: none; mix-blend-mode: lighten; border-radius: 0; box-shadow: none; -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 51%, #000 62%, rgba(0,0,0,.92) 78%, transparent 100%); mask-image: radial-gradient(ellipse 72% 78% at 50% 51%, #000 62%, rgba(0,0,0,.92) 78%, transparent 100%); }
@media (max-width: 880px){ .shield-grid { grid-template-columns: 1fr; gap: 38px; } }
@media (max-width: 880px){ .shield-visual img { width: min(108%, 820px); } }
@media (max-width: 520px){ .shield-list { grid-template-columns: 1fr; } }

/* Use cases */
.use-section .sec-head { max-width: 900px; }
.use-section .nx-lead { max-width: 82ch; }
.use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.use-card { padding: 26px; }
.use-ic { width: 46px; height: 46px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--icon-tile-bg); border: 1px solid var(--icon-tile-border); color: var(--nx-green); box-shadow: var(--icon-tile-shadow); margin-bottom: 16px; }
.use-ic svg { width: 23px; height: 23px; }
.use-card h3 { font-size: 16px; margin-bottom: 8px; }
.use-card p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; }

/* Final CTA */
.final { position: relative; overflow: hidden; }
.final-card { position: relative; overflow: hidden; text-align: center; padding: 72px 32px; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-2); }
.final-card::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 72%); mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 72%); }
.final-card > * { position: relative; z-index: 1; }
.final-card .nx-rule { margin: 0 auto 22px; }
.final-card h2 { font-size: clamp(28px, 3.6vw, 42px); max-width: 18ch; margin: 0 auto; }
.final-card .nx-lead { margin: 18px auto 0; text-align: center; }
.final-card .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.final-card .note { margin-top: 22px; font-size: 13.5px; color: var(--fg-subtle); }

.nx-hide-mobile { display: inline-flex; }
@media (max-width: 1040px){ .ben-grid, .use-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px){ .impact-line { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } .impact-line::before { display: none; } .impact-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; } .impact-copy { padding-top: 2px; max-width: 34ch; } }
@media (max-width: 880px){ .prob-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px){ .nx-hide-mobile { display: none; } }
@media (max-width: 560px){ .impact-band { padding: 30px 0; } .impact-line { grid-template-columns: 1fr; gap: 0; } .impact-line::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: linear-gradient(180deg, rgba(62,205,255,.15), rgba(100,239,71,.7), rgba(62,205,255,.15)); box-shadow: 0 0 10px rgba(53,203,255,.28); } .impact-item { padding-bottom: 26px; } .impact-item:last-child { padding-bottom: 0; } .impact-node { z-index: 2; } }
@media (max-width: 520px){ .ben-grid, .use-grid { grid-template-columns: 1fr; } }