/* ═══════════════════════════════════════════
   NODUS NEXUS — EXTREME LAYER
   boundary-test extravagance on top of style.css
═══════════════════════════════════════════ */

/* ── Intro overlay ── */
.intro {
  position: fixed; inset: 0; z-index: 10010;
  background: var(--ink-deep);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
}
.intro-brand {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 4.4vw, 54px);
  font-weight: 800; letter-spacing: 0.14em;
  color: var(--txt);
}
.intro-pct {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--aqua); letter-spacing: 0.3em;
}

/* ── Comet cursor canvas + shockwave ── */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9997; mix-blend-mode: screen; }
.shock {
  position: fixed; border-radius: 50%;
  border: 2px solid var(--aqua);
  pointer-events: none; z-index: 9996;
  transform: translate(-50%,-50%);
}

/* hide base ring cursor in extreme mode (comet replaces it) */
.xt .cursor-ring { display: none; }

/* ── Hero: particle canvas reuses .hero-wave slot ── */
.xt .hero-wave { opacity: 0.95; }

/* per-char spans */
.ch { display: inline-block; will-change: transform; }
.hero-title .line { perspective: 900px; }
.cta-title .line { perspective: 900px; }

/* ── Kicker scramble ── */
.kicker { font-variant-ligatures: none; }

/* ── Caption glitch ── */
@keyframes xt-glitch {
  0%   { text-shadow: 2px 0 rgba(52,192,206,0.8), -2px 0 rgba(200,169,81,0.8); transform: translateX(0); }
  20%  { text-shadow: -3px 0 rgba(52,192,206,0.8), 3px 0 rgba(232,80,120,0.6); transform: translateX(2px) skewX(2deg); }
  40%  { text-shadow: 3px 0 rgba(52,192,206,0.9), -3px 0 rgba(200,169,81,0.7); transform: translateX(-2px); }
  60%  { text-shadow: -2px 0 rgba(111,210,220,0.8), 2px 0 rgba(232,80,120,0.5); transform: translateX(1px) skewX(-1.5deg); }
  100% { text-shadow: none; transform: none; }
}
.cap--glitch { animation: xt-glitch 0.38s steps(5) both; }

/* ── Marquee straight (tilt removed per Sam) ── */
.xt .marquee[data-dir="1"],
.xt .marquee[data-dir="-1"] { transform: none; }
.xt .scene-branchen { padding: 150px 0; }
.xt .marquee-track span { border-color: rgba(52,192,206,0.22); }

/* ── Holographic pakete ── */
.xt .paket { transform-style: preserve-3d; overflow: hidden; }
.holo {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  transition: opacity 0.35s ease;
  background:
    radial-gradient(380px circle at var(--hx,50%) var(--hy,50%), rgba(52,192,206,0.16), transparent 60%),
    linear-gradient(var(--ha,115deg),
      transparent 30%,
      rgba(255,255,255,0.35) 44%,
      rgba(52,192,206,0.28) 50%,
      rgba(200,169,81,0.25) 56%,
      transparent 70%);
  mix-blend-mode: overlay;
}
.xt .paket:hover .holo { opacity: 1; }
.xt .paket:hover { box-shadow: 0 36px 90px rgba(14,132,146,0.3); }

/* ── Stat punch blur ── */
.stat-num { transition: filter 0.18s ease, transform 0.18s ease; }
.stat--punch .stat-num { filter: blur(2.2px) brightness(1.4); transform: scaleY(1.12); }

/* ── CTA orbiters ── */
.cta-btn { position: relative; }
.orbit {
  position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 10px rgba(232,200,120,0.9);
  pointer-events: none;
  opacity: 0;
}
.cta-btn:hover .orbit { opacity: 1; }

/* ── Scene zoom-wipe targets get GPU hint ── */
.scene-flow, .scene-pakete, .scene-usecases, .scene-faq { will-change: clip-path; }

/* ════════════════════════════════════════════
   PORTED SECTIONS — Use-Cases / Tools / Vergleich / FAQ
════════════════════════════════════════════ */

/* ── USE-CASES (light) ── */
.scene-usecases { background: var(--paper); color: var(--ink); padding: 130px 7vw 140px; }
.scene-usecases .kicker { color: var(--petrol); }
.uc-title { text-align: center; font-size: clamp(32px, 4.2vw, 56px); margin: 16px 0 14px; color: var(--ink); letter-spacing: -0.015em; }
.uc-sub { text-align: center; color: rgba(7,37,48,0.6); font-size: 16px; margin-bottom: 58px; }
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1180px; margin: 0 auto; }
.uc-card {
  position: relative; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(7,37,48,0.1);
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 16px 44px rgba(7,37,48,0.06);
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow 0.3s ease;
}
.uc-card:hover { box-shadow: 0 26px 60px rgba(14,132,146,0.16); }
.uc-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--petrol), var(--aqua));
  color: #fff; box-shadow: 0 6px 18px rgba(14,132,146,0.35);
  margin-bottom: 18px;
}
.uc-card h3 { font-size: 18.5px; color: var(--ink); margin-bottom: 10px; }
.uc-card p { font-size: 14px; color: rgba(7,37,48,0.66); margin-bottom: 16px; }
.uc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.uc-tags span {
  font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 20px;
  background: rgba(14,132,146,0.08); color: var(--petrol);
  border: 1px solid rgba(14,132,146,0.18);
}

/* ── TOOLS / INTEGRATIONEN (dark glass) ── */
.scene-tools { background: var(--ink-deep); padding: 130px 7vw 130px; }
.tools-title { text-align: center; font-size: clamp(32px, 4.2vw, 56px); margin: 16px 0 14px; letter-spacing: -0.015em; }
.tools-sub { text-align: center; color: var(--txt-dim); font-size: 16px; max-width: 62ch; margin: 0 auto 58px; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto; }
.tool-cat {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 18px;
  padding: 26px 24px;
  backdrop-filter: blur(10px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.tool-cat:hover { border-color: var(--aqua-soft); box-shadow: 0 0 50px rgba(14,132,146,0.22); }
.tool-cat header { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.tool-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52,192,206,0.12); color: var(--aqua);
  border: 1px solid rgba(52,192,206,0.25);
}
.tool-cat h3 { font-size: 17px; }
.tool-cat ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.tool-cat li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--txt-dim); }
.b {
  flex-shrink: 0; font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 12px;
}
.b-ess { background: rgba(52,192,206,0.12); color: var(--aqua); border: 1px solid rgba(52,192,206,0.3); }
.b-pro { background: rgba(200,169,81,0.12); color: var(--gold-light); border: 1px solid rgba(200,169,81,0.32); }
.b-20  { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.28); }
.tools-note { text-align: center; margin-top: 36px; font-size: 12.5px; color: var(--txt-faint); }

/* ── VERGLEICH (dark table) ── */
.scene-compare { background: var(--ink); padding: 130px 4vw 150px; }
.cmp-title { text-align: center; font-size: clamp(32px, 4.2vw, 56px); margin: 16px 0 14px; letter-spacing: -0.015em; }
.cmp-sub { text-align: center; color: var(--txt-dim); font-size: 15px; max-width: 84ch; margin: 0 auto 54px; }
.cmp-wrap { max-width: 1280px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); }
.cmp { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13px; }
.cmp thead th {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14.5px; font-weight: 700; text-align: left;
  padding: 18px 16px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  white-space: nowrap;
}
.cmp tbody th {
  text-align: left; font-weight: 600; font-size: 13px;
  color: var(--txt-dim); padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cmp td {
  padding: 13px 16px; color: var(--txt-dim);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }
.cmp .col-n1 { background: rgba(14,132,146,0.14); }
.cmp thead .col-n1 { color: var(--aqua); box-shadow: inset 0 2px 0 var(--aqua); }
.cmp .col-n2 { background: rgba(200,169,81,0.09); }
.cmp thead .col-n2 { color: var(--gold-light); box-shadow: inset 0 2px 0 var(--gold); }
.cmp .c-yes  { color: #7ce8b8; }
.cmp .c-no   { color: #ff8080; }
.cmp .c-part { color: #f0c46a; }

/* ── FAQ (light accordion) ── */
.scene-faq { background: var(--paper); color: var(--ink); padding: 130px 24px 150px; }
.scene-faq .kicker { color: var(--petrol); }
.faq-title { text-align: center; font-size: clamp(32px, 4.2vw, 56px); margin: 16px 0 54px; color: var(--ink); letter-spacing: -0.015em; }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff;
  border: 1px solid rgba(7,37,48,0.1);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(7,37,48,0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.faq-item[open] { border-color: rgba(14,132,146,0.4); box-shadow: 0 18px 44px rgba(14,132,146,0.12); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 24px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16.5px; font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-x {
  position: relative; flex-shrink: 0; width: 22px; height: 22px;
  transition: transform 0.4s var(--eo);
}
.faq-x::before, .faq-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--petrol);
  transform: translate(-50%,-50%);
}
.faq-x::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-x { transform: rotate(135deg); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 24px 22px; font-size: 14.5px; color: rgba(7,37,48,0.68); }

/* ── Responsive for ported sections ── */
@media (max-width: 1080px) {
  .uc-grid, .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .uc-grid, .tools-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .uc-card, .tool-cat { padding: 22px 20px; }
  .scene-usecases, .scene-tools { padding: 70px 5vw 80px; }
  .scene-branchen { padding: 60px 0; }
  .tools-title, .uc-title { font-size: clamp(26px, 7vw, 40px); }
  .tools-sub, .uc-sub { font-size: 14px; }
  .cmp-wrap { border-radius: 12px; }
}

/* ── Reduced motion: kill the circus ── */
@media (prefers-reduced-motion: reduce) {
  .intro, .fx-canvas, .shock, .orbit { display: none !important; }
  .xt .marquee { transform: none !important; }
  .cap--glitch { animation: none !important; }
}