/* ==========================================================================
   NORTHCORE — Premium Stylesheet
   Self-contained. Only loaded by northcore.html. Other pages untouched.
   ========================================================================== */

:root {
  /* base */
  --bg:          #05060c;
  --bg-2:        #080a14;
  --bg-3:        #0b0e1b;
  --ink:         #f4f6fc;
  --muted:       #a3abc2;
  --muted-dim:   #6c7592;

  /* gold (brand) */
  --gold:        #d8b45a;
  --gold-bright: #f6e2a6;
  --gold-deep:   #b08a35;

  /* tech accent */
  --blue:        #4f8dff;
  --cyan:        #7fe3ff;
  --blue-deep:   #16356f;

  /* lines & glass */
  --line:        rgba(216, 180, 90, 0.16);
  --line-soft:   rgba(216, 180, 90, 0.09);
  --line-blue:   rgba(96, 150, 255, 0.18);
  --glass:       rgba(255, 255, 255, 0.026);
  --glass-2:     rgba(255, 255, 255, 0.05);

  /* effects */
  --shadow:      0 32px 90px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.4);
  --glow-gold:   0 0 60px rgba(216, 180, 90, 0.22);

  /* metrics */
  --container:   min(1280px, calc(100% - 64px));
  --r-lg:        28px;
  --r-md:        20px;
  --r-sm:        14px;

  /* Apple-style easing — smoother decel, more natural arc */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;            /* safety net against any sideways overflow */
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.62;
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- ambient background ------------------------------------------------- */
.nc-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 78% 8%,  rgba(79, 141, 255, 0.14), transparent 70%),
    radial-gradient(55% 45% at 12% 18%, rgba(216, 180, 90, 0.12), transparent 72%),
    radial-gradient(70% 60% at 50% 110%, rgba(79, 141, 255, 0.10), transparent 70%),
    linear-gradient(180deg, #05060c 0%, #070912 45%, #05060c 100%);
}
.nc-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(120, 150, 220, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 150, 220, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
}
/* fine film grain for the matte premium feel */
.nc-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  mix-blend-mode: overlay;
}

/* ---- typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-feature-settings: "ss01", "cv11";
}
h1 { letter-spacing: -0.045em; line-height: 1.02; }
h2 { letter-spacing: -0.038em; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
ul { list-style: none; }

.nc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nc-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.nc-eyebrow.is-center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.nc-grad {
  background: linear-gradient(105deg, var(--gold-bright) 8%, var(--gold) 42%, #e0c887 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- layout shell ------------------------------------------------------- */
.nc-shell {
  width: var(--container);
  margin-inline: auto;
}

.nc-section {
  padding-block: clamp(96px, 12vw, 180px);
}
.nc-section-head {
  max-width: 720px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.nc-section-head.is-center {
  margin-inline: auto;
  text-align: center;
}
.nc-section-head h2 {
  font-size: clamp(2.05rem, 4.2vw, 3.6rem);
  margin-top: 20px;
}
.nc-section-head p {
  margin-top: 20px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.62;
  max-width: 60ch;
}
.nc-section-head.is-center p { margin-inline: auto; }

/* ---- header ------------------------------------------------------------- */
.nc-header {
  position: sticky;
  top: 18px;
  z-index: 50;
  width: var(--container);
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 12px 12px 22px;
  border: 1px solid rgba(244, 246, 252, 0.07);
  border-radius: 999px;
  background: rgba(8, 10, 18, 0.62);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.nc-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.nc-brand__mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(216, 180, 90, 0.22);
  background: radial-gradient(circle at 30% 25%, rgba(216, 180, 90, 0.36), rgba(8, 10, 18, 0.9));
  color: var(--gold-bright);
  font-size: 0.95rem;
  box-shadow: inset 0 0 14px rgba(216, 180, 90, 0.18);
}
.nc-brand__name { font-size: 0.98rem; letter-spacing: -0.01em; }
.nc-brand__name b { color: var(--ink); font-weight: 600; }
.nc-brand__name span { color: var(--muted-dim); font-weight: 400; }

.nc-nav {
  display: flex;
  justify-content: center;
  gap: 2px;
}
.nc-nav a {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--muted);
  transition: color 0.4s var(--ease), background 0.4s var(--ease);
}
.nc-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.nc-nav a.is-active { color: var(--ink); background: rgba(216, 180, 90, 0.1); }

.nc-header__cta { display: flex; align-items: center; gap: 8px; }

.nc-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nc-burger span {
  width: 18px;
  height: 1.6px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
}

/* ---- buttons ------------------------------------------------------------ */
.nc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform 0.6s var(--ease),
    box-shadow 0.6s var(--ease),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}
.nc-btn svg { width: 17px; height: 17px; transition: transform 0.6s var(--ease); }
.nc-btn:hover svg { transform: translateX(2px); }
.nc-btn--gold {
  color: #1a1407;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:
    0 14px 36px rgba(216, 180, 90, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.nc-btn--gold:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 50px rgba(216, 180, 90, 0.34),
    0 4px 10px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.nc-btn--ghost {
  color: var(--ink);
  border-color: rgba(244, 246, 252, 0.16);
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(8px);
}
.nc-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 246, 252, 0.32);
  background: rgba(255, 255, 255, 0.06);
}
.nc-btn--sm { min-height: 42px; padding: 0 20px; font-size: 0.86rem; border-radius: 999px; }
.nc-btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.nc-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--gold-bright);
  transition: gap 0.25s;
}
.nc-link svg { width: 15px; height: 15px; transition: transform 0.25s; }
.nc-link:hover { gap: 11px; }
.nc-link:hover svg { transform: translateX(2px); }

/* ---- side menu ---------------------------------------------------------- */
.nc-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(360px, 86vw);
  z-index: 90;
  transform: translateX(-102%);
  transition: transform 0.42s var(--ease);
  background: rgba(7, 9, 16, 0.97);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.nc-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nc-menu__close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--gold-bright);
  font-size: 1.2rem;
  cursor: pointer;
}
.nc-menu nav { display: grid; gap: 6px; }
.nc-menu nav a {
  padding: 14px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  border: 1px solid transparent;
  transition: 0.25s;
}
.nc-menu nav a:hover { background: var(--glass-2); border-color: var(--line); color: var(--gold-bright); }
.nc-menu__foot {
  margin-top: auto;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--muted);
  font-size: 0.9rem;
}
.nc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
body.menu-open .nc-menu { transform: translateX(0); }
body.menu-open .nc-backdrop { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.nc-hero {
  position: relative;
  padding-top: clamp(48px, 8vw, 92px);
  padding-bottom: clamp(40px, 7vw, 80px);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.nc-hero__copy { position: relative; z-index: 2; }

.nc-hero h1 {
  font-size: clamp(2.4rem, 4.35vw, 3.85rem);
  margin: 22px 0 0;
}
.nc-hero__lead {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--muted);
}
.nc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 32px;
}
.nc-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.nc-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--muted);
}
.nc-trust-item svg { width: 16px; height: 16px; color: var(--gold); }
.nc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #46e09a;
  box-shadow: 0 0 0 4px rgba(70, 224, 154, 0.16);
  animation: nc-pulse 2.4s ease-in-out infinite;
}
@keyframes nc-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(70, 224, 154, 0.16); }
  50%      { box-shadow: 0 0 0 7px rgba(70, 224, 154, 0.04); }
}

/* ---- hero 3D stage ------------------------------------------------------ */
.nc-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(79, 141, 255, 0.12), transparent 75%),
    linear-gradient(170deg, rgba(18, 22, 38, 0.85), rgba(6, 8, 14, 0.92));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  isolation: isolate;
}
.nc-stage__glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 120deg,
    transparent, rgba(216, 180, 90, 0.55), transparent 35%,
    rgba(127, 227, 255, 0.5), transparent 70%, rgba(216, 180, 90, 0.4), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: nc-spin 14s linear infinite;
  pointer-events: none;
}
@keyframes nc-spin { to { transform: rotate(360deg); } }

#nc-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* fallback shown when WebGL unavailable */
.nc-stage__fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  text-align: center;
  padding: 40px;
  color: var(--muted);
}
.nc-stage.is-fallback .nc-stage__fallback { display: grid; }
.nc-stage.is-fallback #nc-canvas { display: none; }
.nc-stage__fallback img { width: 64%; opacity: 0.9; filter: drop-shadow(0 10px 30px rgba(216,180,90,0.3)); }

.nc-stage__bar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.nc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(6, 8, 14, 0.8);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.nc-chip__live {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff5d5d;
  box-shadow: 0 0 8px #ff5d5d;
  animation: nc-blink 1.6s steps(1) infinite;
}
@keyframes nc-blink { 50% { opacity: 0.25; } }
.nc-chip--cyan { color: var(--cyan); border-color: var(--line-blue); }

/* corner brackets — compass nod */
.nc-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--gold);
  opacity: 0.5;
  z-index: 3;
}
.nc-corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.nc-corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.nc-corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.nc-corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.nc-stage__hint {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  white-space: nowrap;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dim);
  pointer-events: none;
}

/* ==========================================================================
   STATEMENT MARQUEE
   ========================================================================== */
.nc-marquee {
  border-block: 1px solid var(--line-soft);
  padding-block: 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.nc-marquee__track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: nc-scroll 38s linear infinite;
}
.nc-marquee:hover .nc-marquee__track { animation-play-state: paused; }
@keyframes nc-scroll { to { transform: translateX(-50%); } }
.nc-marquee__item {
  display: flex;
  align-items: center;
  gap: 48px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 500;
  color: var(--muted-dim);
  white-space: nowrap;
}
.nc-marquee__item b { color: var(--ink); font-weight: 600; }
.nc-marquee__item::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ==========================================================================
   CONNECTED SYSTEM — flow
   ========================================================================== */
.nc-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.nc-flow::before {
  content: "";
  position: absolute;
  top: 33px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-blue) 15%, var(--line) 85%, transparent);
}
.nc-flow-step { position: relative; }
.nc-flow-step__num {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 35% 30%, rgba(216, 180, 90, 0.2), var(--bg-3));
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-bright);
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px rgba(5, 6, 12, 1), var(--glow-gold);
}
.nc-flow-step__num svg { width: 26px; height: 26px; }
.nc-flow-step h3 { font-size: 1.18rem; margin-bottom: 8px; }
.nc-flow-step p { color: var(--muted); font-size: 0.95rem; }

/* ==========================================================================
   MODULES
   ========================================================================== */
.nc-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.nc-card {
  position: relative;
  padding: 34px 30px;
  border-radius: var(--r-md);
  border: 1px solid rgba(244, 246, 252, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  transition:
    transform 0.7s var(--ease),
    border-color 0.6s var(--ease),
    box-shadow 0.7s var(--ease);
}
.nc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 0%),
    rgba(216, 180, 90, 0.09), transparent 60%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.nc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 180, 90, 0.28);
  box-shadow: var(--shadow-soft);
}
.nc-card:hover::before { opacity: 1; }
.nc-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  border: 1px solid rgba(216, 180, 90, 0.18);
  background: linear-gradient(150deg, rgba(216, 180, 90, 0.14), rgba(216, 180, 90, 0.03));
  color: var(--gold-bright);
  margin-bottom: 22px;
}
.nc-card__icon svg { width: 25px; height: 25px; }
.nc-card h3 { font-size: 1.26rem; margin-bottom: 10px; position: relative; letter-spacing: -0.025em; }
.nc-card p { color: var(--muted); font-size: 0.98rem; position: relative; line-height: 1.6; }
.nc-card__tag {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  position: relative;
}

/* ==========================================================================
   DASHBOARD SHOWCASE
   ========================================================================== */
.nc-showcase {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}
.nc-showcase__copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin: 14px 0 18px;
}
.nc-showcase__copy p { color: var(--muted); }
.nc-feat-list { margin-top: 24px; display: grid; gap: 14px; }
.nc-feat-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.nc-feat-list svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 1px;
}
.nc-feat-list b { font-family: var(--font-display); font-weight: 600; }
.nc-feat-list span { color: var(--muted); }

/* browser-framed dashboard mock */
.nc-window {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-3);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nc-window__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}
.nc-window__dot { width: 10px; height: 10px; border-radius: 50%; background: #2c3145; }
.nc-window__dot:nth-child(1) { background: #f0696b; }
.nc-window__dot:nth-child(2) { background: #f0b95b; }
.nc-window__dot:nth-child(3) { background: #5bd089; }
.nc-window__url {
  margin-left: 12px;
  flex: 1;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.75rem;
  color: var(--muted-dim);
  letter-spacing: 0.04em;
}
.nc-dash {
  display: grid;
  grid-template-columns: 138px 1fr;
  min-height: 340px;
}
.nc-dash__side {
  border-right: 1px solid var(--line-soft);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.22);
}
.nc-dash__side i {
  display: block;
  height: 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
}
.nc-dash__navitem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  color: var(--muted-dim);
}
.nc-dash__navitem.is-active {
  background: rgba(216, 180, 90, 0.1);
  color: var(--gold-bright);
}
.nc-dash__navitem b { width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.nc-dash__main { padding: 18px; display: grid; gap: 14px; align-content: start; }
.nc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nc-kpi {
  padding: 13px;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}
.nc-kpi span { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dim); }
.nc-kpi strong { display: block; margin-top: 5px; font-family: var(--font-display); font-size: 1.3rem; }
.nc-kpi--gold strong { color: var(--gold-bright); }
.nc-kpi--cyan strong { color: var(--cyan); }
.nc-kpi--green strong { color: #5bd089; }
.nc-chart {
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  padding: 16px;
}
.nc-chart__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.nc-chart__head i { display: block; height: 8px; width: 90px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.nc-chart__head b {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan); font-weight: 500;
}
.nc-bars { display: flex; align-items: flex-end; gap: 9px; height: 92px; }
.nc-bars span {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  opacity: 0.85;
  transform-origin: bottom;
  animation: nc-bar-rise 1.1s var(--ease) backwards;
}
.nc-bars span:nth-child(odd) {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
}
@keyframes nc-bar-rise { from { transform: scaleY(0); } }

/* ==========================================================================
   WHY / VALUE
   ========================================================================== */
.nc-why {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}
.nc-timeline { display: grid; gap: 6px; margin-top: 8px; }
.nc-tl-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}
.nc-tl-item:last-child { border-bottom: 0; }
.nc-tl-item__no {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px rgba(216, 180, 90, 0.55);
}
.nc-tl-item h3 { font-size: 1.2rem; margin-bottom: 6px; }
.nc-tl-item p { color: var(--muted); font-size: 0.96rem; }

.nc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 80% 0%, rgba(79, 141, 255, 0.12), transparent 70%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
  box-shadow: var(--shadow-soft);
}
.nc-stat {
  padding: 22px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.25);
}
.nc-stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
}
.nc-stat__num small { font-size: 0.5em; font-weight: 600; }
.nc-stat__label {
  margin-top: 9px;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ==========================================================================
   USE CASES
   ========================================================================== */
.nc-uses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nc-use {
  position: relative;
  padding: 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.nc-use:hover { transform: translateY(-5px); border-color: rgba(216, 180, 90, 0.35); }
.nc-use__k {
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.nc-use h3 { font-size: 1.3rem; margin: 12px 0 9px; }
.nc-use p { color: var(--muted); font-size: 0.96rem; }

/* ==========================================================================
   CTA
   ========================================================================== */
.nc-cta {
  position: relative;
  text-align: center;
  padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 72px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(216, 180, 90, 0.16), transparent 70%),
    radial-gradient(70% 80% at 50% 120%, rgba(79, 141, 255, 0.16), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: var(--shadow);
}
.nc-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(216, 180, 90, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 180, 90, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 75%);
}
.nc-cta > * { position: relative; }
.nc-cta h2 {
  font-size: clamp(2rem, 4vw, 3.3rem);
  margin: 16px auto 14px;
  max-width: 16ch;
}
.nc-cta p {
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
}
.nc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: center;
  margin-top: 32px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.nc-footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(60px, 8vw, 110px);
  padding-block: 48px 30px;
}
.nc-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
.nc-footer__brand { max-width: 34ch; }
.nc-footer__brand p { color: var(--muted); font-size: 0.92rem; margin-top: 12px; }
.nc-footer__col h4 {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 14px;
}
.nc-footer__col a {
  display: block;
  padding: 5px 0;
  color: var(--muted);
  font-size: 0.94rem;
  transition: color 0.25s;
}
.nc-footer__col a:hover { color: var(--gold-bright); }
.nc-footer__base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.84rem;
  color: var(--muted-dim);
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.nc-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease);
}
.nc-reveal.is-visible { opacity: 1; transform: none; }
.nc-reveal[data-d="1"] { transition-delay: 0.10s; }
.nc-reveal[data-d="2"] { transition-delay: 0.20s; }
.nc-reveal[data-d="3"] { transition-delay: 0.30s; }
.nc-reveal[data-d="4"] { transition-delay: 0.40s; }
.nc-reveal[data-d="5"] { transition-delay: 0.50s; }
@media (prefers-reduced-motion: reduce) {
  .nc-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .nc-nav { display: none; }
  .nc-burger { display: flex; }
  .nc-header { grid-template-columns: auto 1fr auto; }
  .nc-hero { grid-template-columns: 1fr; }
  .nc-hero__copy { order: 1; }
  .nc-stage { order: 2; max-width: 540px; margin-inline: auto; width: 100%; }
  .nc-showcase,
  .nc-why { grid-template-columns: 1fr; }
  .nc-modules,
  .nc-uses { grid-template-columns: repeat(2, 1fr); }
  .nc-flow { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .nc-flow::before { display: none; }
  .nc-footer__grid { grid-template-columns: 1fr 1fr; }
  .nc-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  :root { --container: calc(100% - 32px); }
  .nc-header { padding: 9px 9px 9px 14px; }
  .nc-brand__name span { display: none; }
  .nc-header__cta .nc-btn--ghost { display: none; }
  .nc-hero__actions .nc-btn { flex: 1; }
  .nc-modules,
  .nc-uses,
  .nc-flow,
  .nc-kpis { grid-template-columns: 1fr; }
  .nc-stats { grid-template-columns: 1fr 1fr; }
  .nc-dash { grid-template-columns: 1fr; }
  .nc-dash__side { display: none; }
  .nc-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .nc-cta__actions .nc-btn { width: 100%; }
}

/* ==========================================================================
   MOTION PREFERENCE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .nc-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   ADDITIONS — App+Portal duo · card lists · founder
   ========================================================================== */
.nc-modules--2 { grid-template-columns: repeat(2, 1fr); }

.nc-card--tall { padding: 34px 30px; }

.nc-card__list {
  position: relative;
  margin-top: 18px;
  display: grid;
  gap: 11px;
}
.nc-card__list li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 0.95rem;
}
.nc-card__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
}

/* founder / "wer dahintersteht" */
.nc-founder {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(30px, 4.5vw, 64px);
  align-items: center;
}
.nc-portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.nc-portrait img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
}
.nc-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(216,180,90,0.06), transparent 30%,
              transparent 62%, rgba(5,6,12,0.66));
  pointer-events: none;
}
.nc-portrait__tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(6, 8, 14, 0.78);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}
.nc-founder__copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin: 14px 0 18px;
}
.nc-founder__copy p { color: var(--muted); }
.nc-founder__quote {
  margin-top: 20px;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
}
.nc-founder__sig {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--muted-dim);
  letter-spacing: 0.04em;
}

@media (max-width: 1080px) {
  .nc-modules--2 { grid-template-columns: 1fr; }
  .nc-founder { grid-template-columns: 1fr; }
  .nc-portrait { max-width: 460px; }
}

/* ==========================================================================
   FILM SECTIONS · pure-CSS device showcase (App · Backend · Portal)
   ========================================================================== */
.nc-films {
  position: relative;
  padding-top: clamp(84px, 10vw, 150px);
}
.nc-films__intro {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.nc-films__intro h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.nc-films__intro p {
  font-size: 1.08rem;
}
.nc-film {
  position: relative;
  height: auto;
}
.nc-film__stage {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #05060c;
  perspective: 1400px;
}

/* soft aura behind the device — gives the dark stage warmth */
.nc-film__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 50% 50%, rgba(216, 180, 90, 0.18), transparent 70%),
    radial-gradient(80% 100% at 50% 100%, rgba(216, 180, 90, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.nc-film__aura--cool {
  background:
    radial-gradient(45% 55% at 50% 50%, rgba(120, 200, 255, 0.12), transparent 70%),
    radial-gradient(80% 100% at 50% 100%, rgba(216, 180, 90, 0.05), transparent 70%);
}
.nc-film.is-in .nc-film__aura { opacity: 1; }

/* Blender video — the device reveal film */
.nc-film__video {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition:
    opacity 1.1s var(--ease),
    transform 1.2s var(--ease);
}
.nc-film.is-in .nc-film__video {
  opacity: 1;
  transform: none;
}

/* device wrapper — handles the cinematic entrance */
.nc-film__device {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition:
    opacity 1.05s var(--ease),
    transform 1.2s var(--ease);
  will-change: opacity, transform;
}
.nc-film.is-in .nc-film__device {
  opacity: 1;
  transform: none;
}

/* edge fades */
.nc-film__stage::before,
.nc-film__stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 130px;
  z-index: 4;
  pointer-events: none;
}
.nc-film__stage::before { top: 0;    background: linear-gradient(180deg, #05060c, transparent); }
.nc-film__stage::after  { bottom: 0; background: linear-gradient(0deg,   #05060c, transparent); }

.nc-film__hint {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-dim);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.nc-film.is-in .nc-film__hint { opacity: 0.72; }
.nc-film__hint svg { width: 14px; height: 14px; animation: nc-scrollnudge 2s ease-in-out infinite; }
@keyframes nc-scrollnudge { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* shared device base */
.nc-device { position: relative; }

/* ===== PHONE =============================================================
   Realistic iPhone-style mockup with mini app UI inside the screen */
.nc-device--phone { width: clamp(220px, 22vw, 300px); }
.nc-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19;
  border-radius: clamp(28px, 3.4vw, 44px);
  padding: clamp(7px, 0.8vw, 10px);
  background:
    linear-gradient(160deg, #1d2233 0%, #0a0c16 55%, #14182a 100%);
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,0.7),
    0 0 0 1px rgba(216,180,90,0.18),
    inset 0 0 0 1.5px rgba(255,255,255,0.06);
  transform: rotate(-3deg);
  animation: nc-phone-float 7s ease-in-out infinite;
}
@keyframes nc-phone-float {
  0%,100% { transform: rotate(-3deg) translateY(0); }
  50%     { transform: rotate(-3deg) translateY(-8px); }
}
.nc-phone__notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 22px;
  background: #06070d;
  border-radius: 100px;
  z-index: 3;
}
.nc-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(22px, 2.8vw, 36px);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(216,180,90,0.16), transparent 60%),
    linear-gradient(180deg, #0c0f1c 0%, #06080f 100%);
  overflow: hidden;
  padding: 36px 14px 12px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 12px;
}
.nc-phone__status {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  position: absolute;
  top: 18px; right: 18px;
}
.nc-phone__status i {
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
}
.nc-phone__hero { display: grid; gap: 6px; padding: 4px 4px 0; }
.nc-phone__hero-bar {
  height: 9px; border-radius: 6px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold) 60%, transparent);
  width: 60%;
}
.nc-phone__hero-bar--sm {
  height: 5px; width: 40%;
  background: linear-gradient(90deg, rgba(255,255,255,0.32), transparent);
}
.nc-phone__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7px;
}
.nc-phone__kpi {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 9px 7px 8px;
  display: grid; gap: 5px;
}
.nc-phone__kpi span {
  display: block; height: 4px; width: 60%;
  border-radius: 3px; background: rgba(255,255,255,0.18);
}
.nc-phone__kpi b {
  display: block; height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
}
.nc-phone__list { display: grid; gap: 7px; align-content: start; padding: 4px 0 0; }
.nc-phone__row {
  display: grid;
  grid-template-columns: 18px 1fr 22px;
  gap: 9px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.05);
}
.nc-phone__row i {
  width: 18px; height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  box-shadow: 0 0 12px rgba(216,180,90,0.35);
}
.nc-phone__row span {
  display: block; height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.25);
}
.nc-phone__row b {
  display: block; height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.14);
}
.nc-phone__row:nth-child(odd) span { width: 80%; }
.nc-phone__row:nth-child(even) span { width: 65%; }
.nc-phone__dock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 6px 12px 4px;
  margin-top: 4px;
}
.nc-phone__dock i {
  height: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
}
.nc-phone__dock i:first-child {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 14px rgba(216,180,90,0.45);
  border-color: transparent;
}

/* ===== SERVER RACK =======================================================
   Stack of rack-mount units with blinking LEDs and data streams */
.nc-device--server { width: clamp(280px, 30vw, 420px); }
.nc-rack {
  position: relative;
  width: 100%;
  display: grid;
  gap: 9px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    linear-gradient(180deg, #14172a, #07080f);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation: nc-rack-float 9s ease-in-out infinite;
}
@keyframes nc-rack-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.nc-rack__unit {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #1c2138, #0d1020);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.nc-rack__unit--core {
  padding: 16px 18px;
  border-color: rgba(216,180,90,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 30px rgba(216,180,90,0.12);
}
.nc-rack__lights {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}
.nc-rack__lights i {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(120,200,140,0.85);
  box-shadow: 0 0 8px rgba(120,200,140,0.8);
}
.nc-rack__lights i:nth-child(2) {
  background: rgba(216,180,90,0.9);
  box-shadow: 0 0 8px rgba(216,180,90,0.7);
  animation: nc-led-blink 2.2s ease-in-out infinite;
}
.nc-rack__lights i:nth-child(3) {
  background: rgba(150,180,255,0.85);
  box-shadow: 0 0 8px rgba(150,180,255,0.7);
  animation: nc-led-blink 3.4s ease-in-out infinite 0.6s;
}
@keyframes nc-led-blink {
  0%,100% { opacity: 1; }
  45%     { opacity: 0.35; }
}
.nc-rack__vents {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.nc-rack__vents span {
  display: block;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0a0c18, #050610);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.7);
}
.nc-rack__core {
  display: flex; align-items: center; justify-content: center;
}
.nc-rack__core-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}
.nc-rack__core-grid span {
  display: block;
  height: 10px;
  border-radius: 3px;
  background: rgba(216,180,90,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.nc-rack__core-grid span:nth-child(1) { animation: nc-core-pulse 2.6s ease-in-out infinite; }
.nc-rack__core-grid span:nth-child(3) { animation: nc-core-pulse 2.6s ease-in-out infinite 0.4s; }
.nc-rack__core-grid span:nth-child(5) { animation: nc-core-pulse 2.6s ease-in-out infinite 0.8s; }
.nc-rack__core-grid span:nth-child(7) { animation: nc-core-pulse 2.6s ease-in-out infinite 1.2s; }
@keyframes nc-core-pulse {
  0%,100% { background: rgba(216,180,90,0.18); }
  50%     { background: rgba(216,180,90,0.55); box-shadow: 0 0 8px rgba(216,180,90,0.45); }
}
.nc-rack__disks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.nc-rack__disks div {
  height: 22px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #1c1f2e, #0a0c14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.4);
  position: relative;
}
.nc-rack__disks div::after {
  content: "";
  position: absolute;
  top: 50%; left: 4px;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(120,200,140,0.8);
  box-shadow: 0 0 6px rgba(120,200,140,0.7);
}
.nc-rack__disks div:nth-child(3)::after { animation: nc-led-blink 1.8s ease-in-out infinite; }
.nc-rack__pulse {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, transparent, rgba(216,180,90,0.0), transparent) border-box;
}
.nc-rack__base {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  width: 70%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(216,180,90,0.22), transparent 70%);
  filter: blur(8px);
}
.nc-rack__streams {
  position: absolute;
  left: 0; right: 0;
  top: -12%; bottom: -12%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease) 0.4s;
}
.nc-film.is-in .nc-rack__streams { opacity: 1; }
.nc-rack__streams span {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,180,90,0.6), transparent);
  box-shadow: 0 0 10px rgba(216,180,90,0.4);
  animation: nc-stream 5.4s linear infinite;
  opacity: 0.6;
}
.nc-rack__streams span:nth-child(1) { top: 22%; animation-delay: 0s;   transform: rotate(-3deg); }
.nc-rack__streams span:nth-child(2) { top: 52%; animation-delay: 1.6s; transform: rotate(2deg); }
.nc-rack__streams span:nth-child(3) { top: 78%; animation-delay: 3.1s; transform: rotate(-1deg); }
@keyframes nc-stream {
  0%   { transform: translateX(-30%) rotate(-3deg); opacity: 0; }
  20%  { opacity: 0.5; }
  80%  { opacity: 0.5; }
  100% { transform: translateX(30%) rotate(-3deg); opacity: 0; }
}

/* ===== LAPTOP / PORTAL ===================================================
   Macbook-style chassis with portal dashboard preview */
.nc-device--laptop { width: clamp(360px, 44vw, 620px); }
.nc-laptop {
  position: relative;
  width: 100%;
  animation: nc-laptop-float 8s ease-in-out infinite;
}
@keyframes nc-laptop-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.nc-laptop__lid {
  width: 100%;
  border-radius: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) 6px 6px;
  padding: clamp(10px, 1.1vw, 16px);
  background:
    linear-gradient(180deg, #1d2236, #0c0e1a);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.nc-laptop__screen {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: clamp(8px, 0.9vw, 12px);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(216,180,90,0.1), transparent 60%),
    linear-gradient(180deg, #0a0d18 0%, #050810 100%);
  overflow: hidden;
  display: grid;
  grid-template-rows: 22px 1fr;
}
.nc-laptop__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nc-laptop__chrome span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.nc-laptop__chrome span:nth-child(1) { background: rgba(255,90,90,0.65); }
.nc-laptop__chrome span:nth-child(2) { background: rgba(255,180,90,0.65); }
.nc-laptop__chrome span:nth-child(3) { background: rgba(120,200,140,0.65); }
.nc-laptop__app {
  display: grid;
  grid-template-columns: 44px 1fr;
  min-height: 0;
}
.nc-laptop__side {
  display: grid;
  grid-auto-rows: 28px;
  gap: 8px;
  padding: 14px 8px;
  background: rgba(255,255,255,0.025);
  border-right: 1px solid rgba(255,255,255,0.04);
  align-content: start;
}
.nc-laptop__side i {
  display: block;
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.04);
}
.nc-laptop__side i.is-active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: transparent;
  box-shadow: 0 0 14px rgba(216,180,90,0.5);
}
.nc-laptop__main {
  padding: 14px 16px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
}
.nc-laptop__head { display: grid; gap: 7px; }
.nc-laptop__head-bar {
  height: 10px; width: 38%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold) 60%, transparent);
}
.nc-laptop__head-bar--sm {
  height: 6px; width: 22%;
  background: rgba(255,255,255,0.22);
}
.nc-laptop__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.nc-laptop__kpi {
  padding: 10px 10px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  display: grid; gap: 5px;
}
.nc-laptop__kpi b {
  display: block; height: 9px; width: 55%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
}
.nc-laptop__kpi span {
  display: block; height: 4px; width: 80%;
  border-radius: 3px; background: rgba(255,255,255,0.18);
}
.nc-laptop__kpi em {
  display: block; height: 3px; width: 40%;
  border-radius: 3px; background: rgba(255,255,255,0.1);
}
.nc-laptop__chart {
  height: 50px;
  border-radius: 8px;
  padding: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.nc-laptop__chart svg { width: 100%; height: 100%; display: block; }
.nc-laptop__rows { display: grid; gap: 5px; }
.nc-laptop__row {
  display: grid;
  grid-template-columns: 14px 1fr 26px;
  gap: 10px;
  align-items: center;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,0.025);
}
.nc-laptop__row i {
  width: 14px; height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
}
.nc-laptop__row span {
  display: block; height: 4px;
  border-radius: 3px; background: rgba(255,255,255,0.22);
  width: 70%;
}
.nc-laptop__row b {
  display: block; height: 4px;
  border-radius: 3px; background: rgba(255,255,255,0.12);
}
.nc-laptop__row:nth-child(2) span { width: 55%; }
.nc-laptop__row:nth-child(3) span { width: 80%; }
.nc-laptop__base {
  width: 110%;
  height: clamp(8px, 1vw, 14px);
  margin: 0 auto;
  margin-left: -5%;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #14182a, #0a0c18);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 0;
  box-shadow: 0 30px 40px -10px rgba(0,0,0,0.6);
  position: relative;
}
.nc-laptop__base::before {
  content: "";
  position: absolute;
  left: 50%; top: 30%;
  transform: translateX(-50%);
  width: 14%; height: 4px;
  border-radius: 3px;
  background: #050810;
}

/* mobile film card — readable DOM copy in place of the device callouts */
.nc-film__m { display: none; }

@media (max-width: 820px) {
  .nc-film__hint { display: none !important; }
  .nc-films { padding-top: clamp(40px, 9vw, 78px); }
  .nc-film { height: auto; margin-bottom: 46px; padding-inline: clamp(16px, 4vw, 24px); }
  .nc-film__stage {
    position: relative;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
    padding: clamp(18px, 5vw, 28px);
  }
  .nc-film__stage::before, .nc-film__stage::after { display: none; }
  .nc-film__device { transform: none; }
  .nc-device--phone { width: clamp(150px, 38vw, 220px); }
  .nc-device--server { width: clamp(220px, 60vw, 320px); }
  .nc-device--laptop { width: clamp(260px, 80vw, 420px); }

  .nc-film__m { display: block; padding: 19px 2px 0; }
  .nc-film__m-tag {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .nc-film__m-head {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 6.2vw, 1.62rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 9px 0 16px;
    color: var(--ink);
  }
  .nc-film__m-list { list-style: none; display: grid; gap: 11px; }
  .nc-film__m-list li {
    position: relative;
    padding-left: 28px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .nc-film__m-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.12em;
    width: 7px;
    height: 12px;
    border: solid var(--gold);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
}

/* ==========================================================================
   LIFECYCLE OF A DEFECT — horizontal cinematic journey
   ========================================================================== */
.nc-lifecycle {
  position: relative;
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 60px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(216, 180, 90, 0.14), transparent 70%),
    radial-gradient(50% 80% at 100% 110%, rgba(79, 141, 255, 0.16), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nc-lifecycle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(216,180,90,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,180,90,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000, transparent 78%);
  pointer-events: none;
}
.nc-lifecycle > * { position: relative; z-index: 1; }

.nc-lifecycle__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 26px;
}
.nc-lifecycle__tab {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  padding: 11px 18px;
  font: 500 0.85rem var(--font-display);
  letter-spacing: 0.01em;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.nc-lifecycle__tab .nc-lc-num {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  background: rgba(216, 180, 90, 0.12);
  border: 1px solid rgba(216, 180, 90, 0.25);
  padding: 3px 8px;
  border-radius: 999px;
}
.nc-lifecycle__tab:hover { color: var(--ink); border-color: rgba(216, 180, 90, 0.35); }
.nc-lifecycle__tab.is-active {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(216, 180, 90, 0.18), rgba(216, 180, 90, 0.06));
  border-color: rgba(216, 180, 90, 0.55);
  box-shadow: 0 0 0 1px rgba(216, 180, 90, 0.18), 0 14px 28px rgba(216, 180, 90, 0.14);
}
.nc-lifecycle__tab.is-active .nc-lc-num {
  background: var(--gold-bright);
  color: #1a1407;
  border-color: var(--gold-bright);
}

.nc-lifecycle__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 38px;
  padding: 20px 0 14px;
}
.nc-lifecycle__rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4%;
  right: 4%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(216,180,90,0.25) 8%, rgba(127,227,255,0.22) 92%, transparent);
  transform: translateY(-1px);
  pointer-events: none;
}
.nc-lifecycle__dot {
  position: relative;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nc-lifecycle__dot::before {
  content: "";
  display: block;
  margin: 0 auto 11px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid rgba(216, 180, 90, 0.3);
  box-shadow: 0 0 0 6px rgba(5, 6, 12, 1);
  transition: 0.3s;
}
.nc-lifecycle__dot.is-on {
  color: var(--gold-bright);
}
.nc-lifecycle__dot.is-on::before {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 6px rgba(5, 6, 12, 1), 0 0 22px rgba(216, 180, 90, 0.6);
}

.nc-lifecycle__stage {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  min-height: 460px;
}
.nc-lifecycle__pane { display: none; }
.nc-lifecycle__pane.is-active {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  animation: nc-lc-in 0.55s var(--ease);
}
@keyframes nc-lc-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.nc-lifecycle__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.nc-lifecycle__role {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--muted);
}
.nc-lifecycle__role-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  font-weight: 700;
  font-size: 0.8rem;
}
.nc-lifecycle__role-avatar.is-cyan {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #051022;
}
.nc-lifecycle__role-avatar.is-green {
  background: linear-gradient(135deg, #88e6b2, #2eaa6e);
  color: #052517;
}
.nc-lifecycle__role-avatar.is-orange {
  background: linear-gradient(135deg, #ffb27a, #d96d18);
  color: #2a1308;
}
.nc-lifecycle__copy h3 {
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
}
.nc-lifecycle__copy p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 44ch;
}
.nc-lifecycle__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 4px;
  font-size: 0.84rem;
  color: var(--muted-dim);
}
.nc-lifecycle__meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nc-lifecycle__meta svg { width: 14px; height: 14px; color: var(--gold); }

/* lifecycle visual area (each pane gets its own scene) */
.nc-lifecycle__visual {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(18, 22, 38, 0.85), rgba(6, 8, 14, 0.92));
  overflow: hidden;
  isolation: isolate;
  min-height: 420px;
  padding: 26px;
}
.nc-lifecycle__visual::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 200deg, transparent, rgba(216,180,90,0.4), transparent 40%, rgba(127,227,255,0.4), transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
}

/* phone shell for visual */
.nc-lc-phone {
  position: relative;
  width: min(280px, 80%);
  margin: 0 auto;
  border-radius: 32px;
  border: 1px solid rgba(216,180,90,0.25);
  background: linear-gradient(170deg, #0b0e18, #050709);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.04);
  padding: 14px 12px;
  aspect-ratio: 9 / 18;
  overflow: hidden;
}
.nc-lc-phone::before {
  content: "";
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 16px;
  border-radius: 999px;
  background: #050709;
  border: 1px solid rgba(255,255,255,0.05);
}
.nc-lc-phone__screen {
  margin-top: 18px;
  height: calc(100% - 22px);
  border-radius: 22px;
  background: linear-gradient(180deg, #0e1320 0%, #060814 100%);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.nc-lc-phone__title {
  font: 600 0.85rem var(--font-display);
  color: var(--gold-bright);
}
.nc-lc-phone__sub { font-size: 0.7rem; color: var(--muted-dim); }
.nc-lc-phone__photo {
  position: relative;
  border-radius: 12px;
  height: 110px;
  background:
    radial-gradient(circle at 30% 30%, rgba(216,180,90,0.4), transparent 60%),
    linear-gradient(135deg, #2a2218, #0a0c14);
  overflow: hidden;
}
.nc-lc-phone__photo::after {
  content: "MANGEL #A-2480";
  position: absolute;
  bottom: 8px;
  left: 9px;
  font: 600 0.65rem var(--font-display);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.nc-lc-phone__photo i {
  position: absolute;
  border-radius: 4px;
  background: rgba(255, 95, 95, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 95, 95, 0.2);
  width: 16px; height: 16px;
  top: 28%; left: 58%;
  animation: nc-lc-blink 1.4s ease-in-out infinite;
}
@keyframes nc-lc-blink {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.1); }
}
.nc-lc-phone__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(216,180,90,0.1);
  font-size: 0.72rem;
}
.nc-lc-phone__row b { color: var(--gold-bright); font-weight: 600; }
.nc-lc-phone__row span { color: var(--muted-dim); }
.nc-lc-phone__btn {
  margin-top: auto;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  text-align: center;
  padding: 11px;
  border-radius: 10px;
  font: 700 0.78rem var(--font-display);
  letter-spacing: 0.04em;
}

/* portal mini scene for lifecycle */
.nc-lc-portal {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  height: 100%;
}
.nc-lc-portal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.nc-lc-portal__title {
  font: 600 0.95rem var(--font-display);
  color: var(--ink);
}
.nc-lc-portal__pill {
  font: 600 0.65rem var(--font-display);
  letter-spacing: 0.12em;
  color: var(--cyan);
  border: 1px solid var(--line-blue);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(79, 141, 255, 0.08);
}
.nc-lc-portal__ticket {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
}
.nc-lc-portal__ticket.is-new {
  border-color: rgba(255,95,95,0.4);
  box-shadow: 0 0 0 1px rgba(255,95,95,0.18), 0 0 30px rgba(255,95,95,0.1);
  animation: nc-lc-fresh 2.2s ease-in-out infinite;
}
@keyframes nc-lc-fresh {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,95,95,0.18), 0 0 30px rgba(255,95,95,0.1); }
  50%      { box-shadow: 0 0 0 1px rgba(255,95,95,0.35), 0 0 38px rgba(255,95,95,0.22); }
}
.nc-lc-portal__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffb27a, #d96d18);
  color: #2a1308;
  font: 700 0.85rem var(--font-display);
}
.nc-lc-portal__avatar.is-cyan { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #051022; }
.nc-lc-portal__avatar.is-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1407; }
.nc-lc-portal__name { font-weight: 600; font-size: 0.88rem; }
.nc-lc-portal__role { font-size: 0.72rem; color: var(--muted-dim); margin-top: 2px; }
.nc-lc-portal__status {
  font: 600 0.66rem var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.is-status--new { background: rgba(255,95,95,0.16); color: #ff8a8a; }
.is-status--prio { background: rgba(216,180,90,0.16); color: var(--gold-bright); }
.is-status--prog { background: rgba(127,227,255,0.16); color: var(--cyan); }
.is-status--done { background: rgba(91,208,137,0.16); color: #5bd089; }

/* sms / feedback star row */
.nc-lc-feedback {
  display: grid;
  gap: 10px;
}
.nc-lc-feedback__stars {
  display: flex;
  gap: 3px;
  font-size: 1.2rem;
  color: var(--gold-bright);
  filter: drop-shadow(0 2px 8px rgba(216,180,90,0.4));
}
.nc-lc-feedback__quote {
  font-style: italic;
  color: var(--muted);
  font-size: 0.9rem;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
}

/* KPI chart small */
.nc-lc-chart {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.nc-lc-chart__row {
  display: grid;
  grid-template-columns: 88px 1fr 48px;
  gap: 12px;
  align-items: center;
  font: 500 0.76rem var(--font-display);
  color: var(--muted);
}
.nc-lc-chart__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  position: relative;
}
.nc-lc-chart__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 3px;
  transform-origin: left center;
  animation: nc-lc-fill 1.4s var(--ease) forwards;
}
.nc-lc-chart__fill.is-cyan { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.nc-lc-chart__fill.is-green { background: linear-gradient(90deg, #2eaa6e, #88e6b2); }
@keyframes nc-lc-fill {
  from { transform: scaleX(0); }
}
.nc-lc-chart__val {
  font: 700 0.82rem var(--font-display);
  color: var(--ink);
  text-align: right;
}

@media (max-width: 980px) {
  .nc-lifecycle__rail { grid-template-columns: repeat(5, 1fr); font-size: 0.6rem; }
  .nc-lifecycle__stage { grid-template-columns: 1fr; min-height: auto; }
  .nc-lifecycle__visual { min-height: 320px; }
}
@media (max-width: 680px) {
  .nc-lifecycle__rail { display: none; }
  .nc-lifecycle { padding: 26px 18px; }
}

/* ==========================================================================
   PORTAL DEEP DIVE — tabbed multi-screen UI replica
   ========================================================================== */
.nc-portal-deep {
  position: relative;
}
.nc-portal-deep__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 30px;
}
.nc-portal-deep__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(8, 10, 18, 0.6);
  backdrop-filter: blur(10px);
}
.nc-pd-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 16px;
  border-radius: 10px;
  font: 600 0.82rem var(--font-display);
  cursor: pointer;
  transition: 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nc-pd-tab svg { width: 15px; height: 15px; }
.nc-pd-tab:hover { color: var(--ink); }
.nc-pd-tab.is-active {
  color: #1a1407;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 8px 22px rgba(216,180,90,0.32);
}

.nc-portal-window {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  box-shadow: 0 40px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  isolation: isolate;
}
.nc-portal-window__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.022);
}
.nc-portal-window__bar i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.nc-portal-window__bar i:nth-child(1) { background: #f0696b; }
.nc-portal-window__bar i:nth-child(2) { background: #f0b95b; }
.nc-portal-window__bar i:nth-child(3) { background: #5bd089; }
.nc-portal-window__bar span {
  margin-left: 16px;
  flex: 1;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  font: 500 0.78rem var(--font-display);
  color: var(--muted-dim);
  display: flex;
  align-items: center;
  gap: 9px;
}
.nc-portal-window__bar span::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(91,208,137,0.5);
  box-shadow: 0 0 8px rgba(91,208,137,0.45);
}
.nc-portal-window__live {
  font: 600 0.68rem var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5bd089;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nc-portal-window__live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5bd089;
  box-shadow: 0 0 8px #5bd089;
  animation: nc-pulse 2s ease-in-out infinite;
}

.nc-portal-window__body {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 540px;
}

/* sidebar */
.nc-pd-side {
  border-right: 1px solid var(--line-soft);
  padding: 22px 14px;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nc-pd-side__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.nc-pd-side__brand b {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(216, 180, 90, 0.4), rgba(8, 10, 18, 0.9));
  border: 1px solid var(--line);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
}
.nc-pd-side__brand span {
  font: 600 0.92rem var(--font-display);
  color: var(--ink);
}
.nc-pd-side__hd {
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
  padding: 12px 10px 6px;
}
.nc-pd-side__item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 9px;
  font: 500 0.84rem var(--font-display);
  color: var(--muted);
  cursor: default;
  transition: 0.25s;
}
.nc-pd-side__item:hover { color: var(--ink); background: rgba(255,255,255,0.025); }
.nc-pd-side__item.is-active {
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(216, 180, 90, 0.18), rgba(216, 180, 90, 0.04));
  border-left: 2px solid var(--gold-bright);
  padding-left: 8px;
}
.nc-pd-side__item svg { width: 16px; height: 16px; }
.nc-pd-side__count {
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 95, 95, 0.16);
  color: #ff8a8a;
  font-weight: 600;
}
.nc-pd-side__count.is-gold {
  background: rgba(216,180,90,0.16);
  color: var(--gold-bright);
}

.nc-pd-side__profile {
  margin-top: auto;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;
  align-items: center;
}
.nc-pd-side__profile b {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  font: 700 0.85rem var(--font-display);
}
.nc-pd-side__profile span { display: block; font: 600 0.82rem var(--font-display); }
.nc-pd-side__profile em { font-style: normal; font-size: 0.7rem; color: var(--muted-dim); }

/* main area */
.nc-pd-main {
  padding: 24px 26px 26px;
  display: none;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.nc-pd-main.is-active { display: flex; }
.nc-pd-main__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.nc-pd-main__head h4 {
  font: 600 1.35rem var(--font-display);
  letter-spacing: -0.01em;
}
.nc-pd-main__head p { color: var(--muted); font-size: 0.86rem; }
.nc-pd-main__filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.nc-pd-filter {
  padding: 7px 12px;
  border-radius: 999px;
  font: 500 0.72rem var(--font-display);
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,0.02);
}
.nc-pd-filter.is-on {
  color: var(--gold-bright);
  background: rgba(216,180,90,0.1);
  border-color: rgba(216,180,90,0.4);
}

/* KPI tiles inside portal */
.nc-pd-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.nc-pd-kpi {
  position: relative;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  overflow: hidden;
}
.nc-pd-kpi__lbl {
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nc-pd-kpi__val {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font: 700 1.85rem var(--font-display);
  margin-top: 6px;
}
.nc-pd-kpi__val small { font-size: 0.45em; color: var(--muted); }
.nc-pd-kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font: 600 0.74rem var(--font-display);
  color: #5bd089;
}
.nc-pd-kpi__trend.is-down { color: #ff8a8a; }
.nc-pd-kpi__trend svg { width: 11px; height: 11px; }
.nc-pd-kpi__spark {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 90px;
  height: 32px;
  opacity: 0.85;
}
.nc-pd-kpi.is-gold .nc-pd-kpi__val { color: var(--gold-bright); }
.nc-pd-kpi.is-cyan .nc-pd-kpi__val { color: var(--cyan); }
.nc-pd-kpi.is-green .nc-pd-kpi__val { color: #6ad596; }
.nc-pd-kpi.is-red .nc-pd-kpi__val { color: #ff8a8a; }

/* table rows */
.nc-pd-table {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.nc-pd-table__head,
.nc-pd-table__row {
  display: grid;
  grid-template-columns: 64px 1fr 1.1fr 96px 88px 96px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  font-size: 0.82rem;
}
.nc-pd-table__head {
  background: rgba(255,255,255,0.025);
  font: 600 0.65rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nc-pd-table__row {
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
}
.nc-pd-table__row b { font-family: var(--font-display); }
.nc-pd-table__id {
  font: 600 0.78rem var(--font-display);
  color: var(--muted);
}
.nc-pd-table__title { font-weight: 600; }
.nc-pd-table__loc { color: var(--muted); font-size: 0.78rem; }
.nc-pd-table__prio {
  font: 700 0.7rem var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
  width: max-content;
}
.is-prio--high { background: rgba(255,95,95,0.18); color: #ff8a8a; }
.is-prio--mid  { background: rgba(216,180,90,0.18); color: var(--gold-bright); }
.is-prio--low  { background: rgba(127,227,255,0.16); color: var(--cyan); }
.nc-pd-table__time { color: var(--muted-dim); font-size: 0.78rem; }
.nc-pd-table__owner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nc-pd-table__avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 0.7rem var(--font-display);
}

/* operative priorities widget — real Portal feature replica */
.nc-pd-priorities {
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(255, 95, 95, 0.08), transparent 70%),
    rgba(255,255,255,0.022);
  padding: 14px 16px;
  display: grid;
  gap: 9px;
}
.nc-pd-priorities__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.nc-pd-priorities__head span {
  font: 600 0.88rem var(--font-display);
  color: var(--ink);
}
.nc-pd-priorities__head em {
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nc-pd-prio {
  display: grid;
  grid-template-columns: 12px auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line-soft);
  font-size: 0.82rem;
}
.nc-pd-prio__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f5f;
  box-shadow: 0 0 0 4px rgba(255, 95, 95, 0.16);
  animation: nc-pulse 2.4s ease-in-out infinite;
}
.nc-pd-prio__pulse.is-mid {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 180, 90, 0.16);
}
.nc-pd-prio__pulse.is-low {
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(127, 227, 255, 0.16);
}
.nc-pd-prio__type {
  font: 700 0.62rem var(--font-display);
  letter-spacing: 0.14em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 95, 95, 0.16);
  color: #ff8a8a;
}
.nc-pd-prio__type.is-mid { background: rgba(216, 180, 90, 0.18); color: var(--gold-bright); }
.nc-pd-prio__type.is-low { background: rgba(127, 227, 255, 0.16); color: var(--cyan); }
.nc-pd-prio__txt b {
  display: block;
  font: 600 0.84rem var(--font-display);
  color: var(--ink);
}
.nc-pd-prio__txt span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted-dim);
  margin-top: 2px;
}
.nc-pd-prio__action {
  font: 600 0.78rem var(--font-display);
  color: var(--gold-bright);
  white-space: nowrap;
}

/* chart panel */
.nc-pd-chart {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.022);
  padding: 18px;
  display: grid;
  gap: 14px;
}
.nc-pd-chart__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nc-pd-chart__title {
  font: 600 0.95rem var(--font-display);
}
.nc-pd-chart__legend {
  display: flex;
  gap: 14px;
  font: 500 0.74rem var(--font-display);
  color: var(--muted);
}
.nc-pd-chart__legend i {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--gold);
}
.nc-pd-chart__legend i.is-cyan { background: var(--cyan); }
.nc-pd-chart__svg {
  width: 100%;
  height: 180px;
  display: block;
}

/* portal "Mängel" board variant */
.nc-pd-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.nc-pd-col {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.018);
  padding: 12px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nc-pd-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}
.nc-pd-col__title {
  font: 600 0.72rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nc-pd-col__title::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--gold);
}
.nc-pd-col__title.is-new::before { background: #ff5f5f; }
.nc-pd-col__title.is-prog::before { background: var(--cyan); }
.nc-pd-col__title.is-rev::before { background: var(--gold); }
.nc-pd-col__title.is-done::before { background: #5bd089; }
.nc-pd-col__count {
  font: 600 0.68rem var(--font-display);
  color: var(--muted-dim);
}
.nc-pd-ticket {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  padding: 11px;
  display: grid;
  gap: 7px;
  font-size: 0.78rem;
  position: relative;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.nc-pd-ticket:hover { transform: translateY(-2px); border-color: rgba(216,180,90,0.3); }
.nc-pd-ticket__id {
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.08em;
  color: var(--muted-dim);
}
.nc-pd-ticket__title { font-weight: 600; line-height: 1.32; color: var(--ink); }
.nc-pd-ticket__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3px;
  color: var(--muted-dim);
  font-size: 0.7rem;
}
.nc-pd-ticket__owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nc-pd-ticket__owner b {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 0.6rem var(--font-display);
}

/* feedback / SMS variant */
.nc-pd-feedback {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.nc-pd-feed-list {
  display: grid;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.022);
  padding: 14px;
  max-height: 380px;
  overflow: hidden;
}
.nc-pd-feed-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  padding: 11px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line-soft);
}
.nc-pd-feed-item__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #051022;
  font: 700 0.78rem var(--font-display);
}
.nc-pd-feed-item__avatar.is-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1407; }
.nc-pd-feed-item__avatar.is-green { background: linear-gradient(135deg, #88e6b2, #2eaa6e); color: #052517; }
.nc-pd-feed-item__name { font: 600 0.82rem var(--font-display); }
.nc-pd-feed-item__text { color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.nc-pd-feed-item__stars { color: var(--gold-bright); font-size: 0.92rem; letter-spacing: 1px; }
.nc-pd-feed-stat {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.022);
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.nc-pd-feed-stat__ring {
  position: relative;
  width: 140px; height: 140px;
  margin: 0 auto;
}
.nc-pd-feed-stat__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nc-pd-feed-stat__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.nc-pd-feed-stat__center b {
  display: block;
  font: 700 1.55rem var(--font-display);
  color: var(--gold-bright);
}
.nc-pd-feed-stat__center span {
  font-size: 0.65rem;
  color: var(--muted-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nc-pd-feed-stat__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}
.nc-pd-feed-stat__row b { color: var(--ink); font: 600 0.88rem var(--font-display); }

/* material / inventory variant */
.nc-pd-material {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.nc-pd-material__cell {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.022);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.nc-pd-material__name { font: 600 0.92rem var(--font-display); }
.nc-pd-material__sub { font-size: 0.72rem; color: var(--muted-dim); }
.nc-pd-material__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.nc-pd-material__row b { color: var(--ink); font-family: var(--font-display); }
.nc-pd-material__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  position: relative;
}
.nc-pd-material__bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 3px;
  transform-origin: left center;
}
.nc-pd-material__bar.is-low i { background: linear-gradient(90deg, #ff5f5f, #ffa3a3); }
.nc-pd-material__pill {
  font: 700 0.62rem var(--font-display);
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.is-stock--ok { background: rgba(91,208,137,0.16); color: #5bd089; }
.is-stock--low { background: rgba(255,95,95,0.16); color: #ff8a8a; }
.is-stock--mid { background: rgba(216,180,90,0.16); color: var(--gold-bright); }

@media (max-width: 1080px) {
  .nc-portal-window__body { grid-template-columns: 1fr; }
  .nc-pd-side { display: none; }
  .nc-pd-kpis { grid-template-columns: repeat(2, 1fr); }
  .nc-pd-board { grid-template-columns: repeat(2, 1fr); }
  .nc-pd-feedback { grid-template-columns: 1fr; }
  .nc-pd-material { grid-template-columns: 1fr; }
  .nc-pd-table__head, .nc-pd-table__row {
    grid-template-columns: 56px 1fr 1fr 80px;
  }
  .nc-pd-table__head > :nth-child(5),
  .nc-pd-table__head > :nth-child(6),
  .nc-pd-table__row > :nth-child(5),
  .nc-pd-table__row > :nth-child(6) { display: none; }
}
@media (max-width: 680px) {
  .nc-portal-deep__head { grid-template-columns: 1fr; }
  .nc-pd-kpis { grid-template-columns: 1fr; }
  .nc-pd-board { grid-template-columns: 1fr; }
  .nc-portal-window__bar span { display: none; }
}

/* ==========================================================================
   APP DEEP DIVE — phone screens carousel
   ========================================================================== */
.nc-app-deep {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
.nc-app-deep__copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin: 14px 0 18px;
}
.nc-app-deep__copy p { color: var(--muted); }
.nc-app-deep__tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 26px;
}
.nc-app-tab {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.022);
  color: var(--muted);
  text-align: left;
  padding: 16px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: 0.3s var(--ease);
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 14px;
  align-items: center;
}
.nc-app-tab__icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.035);
  color: var(--gold-bright);
}
.nc-app-tab__icon svg { width: 18px; height: 18px; }
.nc-app-tab__body b {
  display: block;
  font: 600 0.95rem var(--font-display);
  color: var(--ink);
}
.nc-app-tab__body span {
  font-size: 0.8rem;
  color: var(--muted-dim);
}
.nc-app-tab__arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  color: var(--muted-dim);
  opacity: 0.6;
  transition: 0.3s;
}
.nc-app-tab:hover { border-color: rgba(216,180,90,0.35); color: var(--ink); }
.nc-app-tab.is-active {
  background: linear-gradient(180deg, rgba(216,180,90,0.15), rgba(216,180,90,0.04));
  border-color: rgba(216,180,90,0.6);
  box-shadow: 0 14px 32px rgba(216,180,90,0.12);
}
.nc-app-tab.is-active .nc-app-tab__icon {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  border-color: transparent;
}
.nc-app-tab.is-active .nc-app-tab__arrow {
  background: var(--gold-bright);
  color: #1a1407;
  opacity: 1;
}

.nc-app-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 600px;
}
.nc-app-stage::before {
  content: "";
  position: absolute;
  inset: 8% 12%;
  background:
    radial-gradient(50% 70% at 50% 50%, rgba(216,180,90,0.2), transparent 70%),
    radial-gradient(60% 80% at 50% 100%, rgba(79,141,255,0.15), transparent 75%);
  filter: blur(40px);
  z-index: 0;
}

.nc-app-phone {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 9 / 19;
  border-radius: 42px;
  background: linear-gradient(170deg, #15192a, #060810);
  border: 1px solid rgba(216,180,90,0.18);
  padding: 14px;
  box-shadow:
    0 60px 120px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 60px rgba(216,180,90,0.15);
  z-index: 1;
}
.nc-app-phone::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 22px;
  background: #060810;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.05);
  z-index: 2;
}
.nc-app-phone::after {
  content: "";
  position: absolute;
  top: 19px;
  right: 38%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1d2740;
  z-index: 3;
}
.nc-app-phone__screen {
  position: relative;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(180deg, #0e1320 0%, #060814 100%);
  overflow: hidden;
}
.nc-app-screen {
  position: absolute;
  inset: 0;
  padding: 44px 18px 22px;
  display: none;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
}
.nc-app-screen.is-active {
  display: flex;
  animation: nc-app-in 0.5s var(--ease) forwards;
}
@keyframes nc-app-in {
  to { opacity: 1; transform: none; }
}
.nc-app-screen__time {
  position: absolute;
  top: 18px;
  left: 22px;
  font: 600 0.78rem var(--font-display);
  color: rgba(255,255,255,0.85);
  z-index: 3;
}
.nc-app-screen__statusicons {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 3;
  display: flex;
  gap: 5px;
  align-items: center;
}
.nc-app-screen__statusicons i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
}
.nc-app-screen__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.nc-app-screen__head h5 {
  font: 700 1.05rem var(--font-display);
  color: var(--gold-bright);
}
.nc-app-screen__head em {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* generic app card */
.nc-app-card {
  border-radius: 14px;
  padding: 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(216,180,90,0.1);
  display: grid;
  gap: 6px;
}
.nc-app-card__hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 0.66rem var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nc-app-card__hd b { color: var(--gold-bright); }
.nc-app-card__big {
  font: 700 1.7rem var(--font-display);
  color: var(--ink);
}
.nc-app-card__big small { font-size: 0.55em; color: var(--muted); }
.nc-app-card__sub {
  font-size: 0.72rem;
  color: var(--muted);
}

/* feed screen list rows */
.nc-app-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(216,180,90,0.07);
}
.nc-app-row__dot {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(216,180,90,0.4), rgba(216,180,90,0.1));
  color: var(--gold-bright);
}
.nc-app-row__dot svg { width: 18px; height: 18px; }
.nc-app-row__dot.is-cyan { background: linear-gradient(135deg, rgba(127,227,255,0.4), rgba(127,227,255,0.1)); color: var(--cyan); }
.nc-app-row__dot.is-red { background: linear-gradient(135deg, rgba(255,95,95,0.4), rgba(255,95,95,0.1)); color: #ff8a8a; }
.nc-app-row__dot.is-green { background: linear-gradient(135deg, rgba(91,208,137,0.4), rgba(91,208,137,0.1)); color: #5bd089; }
.nc-app-row__body b { display: block; font: 600 0.78rem var(--font-display); }
.nc-app-row__body span { font-size: 0.66rem; color: var(--muted-dim); }
.nc-app-row__time { font-size: 0.66rem; color: var(--muted-dim); }

.nc-app-screen__cta {
  margin-top: auto;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  text-align: center;
  padding: 13px;
  border-radius: 13px;
  font: 700 0.82rem var(--font-display);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.nc-app-screen__cta svg { width: 14px; height: 14px; }

.nc-app-screen__navbar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8,10,18,0.7), rgba(8,10,18,0.95));
  border: 1px solid rgba(216,180,90,0.1);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  backdrop-filter: blur(10px);
}
.nc-app-screen__navbar i {
  display: grid;
  place-items: center;
  color: var(--muted-dim);
}
.nc-app-screen__navbar i svg { width: 18px; height: 18px; }
.nc-app-screen__navbar i.is-active { color: var(--gold-bright); }

@media (max-width: 1080px) {
  .nc-app-deep { grid-template-columns: 1fr; }
  .nc-app-stage { min-height: auto; padding: 30px 0; }
}

/* ==========================================================================
   API & INTEGRATION
   ========================================================================== */
.nc-api {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.nc-api__copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  margin: 14px 0 18px;
}
.nc-api__copy p { color: var(--muted); }
.nc-api__features {
  margin-top: 26px;
  display: grid;
  gap: 14px;
}
.nc-api-feat {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}
.nc-api-feat__icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(216, 180, 90, 0.16), rgba(79, 141, 255, 0.08));
  color: var(--gold-bright);
}
.nc-api-feat__icon svg { width: 17px; height: 17px; }
.nc-api-feat b {
  font: 600 1rem var(--font-display);
  display: block;
  margin-bottom: 2px;
}
.nc-api-feat span { color: var(--muted); font-size: 0.9rem; }

.nc-api__code {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0a0d18, #06080f);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
  position: relative;
}
.nc-api__code-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.022);
}
.nc-api__code-bar i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2c3145;
}
.nc-api__code-bar i:nth-child(1) { background: #f0696b; }
.nc-api__code-bar i:nth-child(2) { background: #f0b95b; }
.nc-api__code-bar i:nth-child(3) { background: #5bd089; }
.nc-api__code-bar span {
  margin-left: 12px;
  font: 600 0.74rem var(--font-display);
  color: var(--muted-dim);
  letter-spacing: 0.04em;
}
.nc-api__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  padding: 6px 12px;
  background: rgba(255,255,255,0.018);
}
.nc-api__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-dim);
  padding: 8px 12px;
  font: 500 0.78rem var(--font-display);
  cursor: pointer;
  border-radius: 8px;
}
.nc-api__tab.is-active {
  color: var(--gold-bright);
  background: rgba(216,180,90,0.1);
}
.nc-api__body {
  padding: 22px 24px;
  font: 500 0.86rem ui-monospace, "JetBrains Mono", Consolas, monospace;
  line-height: 1.7;
  color: #c9d1e0;
  overflow-x: auto;
  white-space: pre;
  max-height: 360px;
  min-height: 280px;
}
.nc-api__body .nc-c-comment { color: #5e6b86; font-style: italic; }
.nc-api__body .nc-c-key { color: #9be8c0; }
.nc-api__body .nc-c-str { color: #f6e2a6; }
.nc-api__body .nc-c-fn { color: #7fe3ff; }
.nc-api__body .nc-c-num { color: #ffb27a; }
.nc-api__body .nc-c-kw { color: #ff8a8a; }
.nc-api__pane { display: none; }
.nc-api__pane.is-active { display: block; }

/* data flow diagram */
.nc-flow-diagram {
  position: relative;
  margin-top: 56px;
  padding: 38px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(79, 141, 255, 0.1), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
}
.nc-flow-diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(216,180,90,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,180,90,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 75%);
}
.nc-flow-diagram__svg {
  position: relative;
  width: 100%;
  height: 320px;
  display: block;
}
.nc-flow-diagram__caption {
  position: relative;
  text-align: center;
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.86rem;
}

@media (max-width: 1080px) {
  .nc-api { grid-template-columns: 1fr; }
  .nc-flow-diagram__svg { height: 380px; }
}

/* ==========================================================================
   SECURITY / COMPLIANCE
   ========================================================================== */
.nc-sec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.nc-sec-card {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(216,180,90,0.08), transparent 70%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.nc-sec-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 180, 90, 0.4);
}
.nc-sec-card__seal {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 30% 25%, rgba(216, 180, 90, 0.35), transparent 60%),
    linear-gradient(150deg, rgba(216, 180, 90, 0.1), rgba(79, 141, 255, 0.06));
  color: var(--gold-bright);
  margin-bottom: 22px;
  position: relative;
}
.nc-sec-card__seal svg { width: 26px; height: 26px; }
.nc-sec-card__seal::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid var(--line);
  opacity: 0.7;
}
.nc-sec-card h3 {
  font-size: 1.25rem;
  margin-bottom: 9px;
}
.nc-sec-card p { color: var(--muted); font-size: 0.94rem; }
.nc-sec-card__bullets {
  margin-top: 18px;
  display: grid;
  gap: 9px;
}
.nc-sec-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--muted);
}
.nc-sec-card__bullets svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 4px;
}

.nc-sec-strip {
  margin-top: 36px;
  padding: 26px 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(216,180,90,0.06), transparent);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 26px;
  align-items: center;
}
.nc-sec-strip__seal {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 0.92rem var(--font-display);
  color: var(--ink);
}
.nc-sec-strip__seal i {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
}
.nc-sec-strip__seal i svg { width: 22px; height: 22px; }
.nc-sec-strip__copy { color: var(--muted); font-size: 0.92rem; }
.nc-sec-strip__copy b { color: var(--gold-bright); font-family: var(--font-display); }

@media (max-width: 980px) {
  .nc-sec-grid { grid-template-columns: 1fr; }
  .nc-sec-strip { grid-template-columns: 1fr; text-align: left; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.nc-faq {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 64px);
}
.nc-faq__copy h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  margin: 14px 0 14px;
}
.nc-faq__copy p { color: var(--muted); }
.nc-faq__hint {
  margin-top: 30px;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--glass);
}
.nc-faq__hint b {
  display: block;
  font: 600 0.95rem var(--font-display);
  margin-bottom: 6px;
  color: var(--ink);
}
.nc-faq__hint span { color: var(--muted); font-size: 0.86rem; }

.nc-faq__list {
  display: grid;
  gap: 12px;
  align-content: start;
}
.nc-faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  overflow: hidden;
  transition: border-color 0.3s;
}
.nc-faq-item[open] { border-color: rgba(216, 180, 90, 0.5); }
.nc-faq-q {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 20px 22px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.3s;
}
.nc-faq-q:hover { color: var(--gold-bright); }
.nc-faq-q__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: 0.4s var(--ease);
  color: var(--gold-bright);
}
.nc-faq-q__icon svg { width: 13px; height: 13px; transition: 0.4s var(--ease); }
.nc-faq-item[open] .nc-faq-q__icon {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  border-color: transparent;
}
.nc-faq-item[open] .nc-faq-q__icon svg { transform: rotate(45deg); }
.nc-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease), padding 0.45s var(--ease);
  padding: 0 22px;
  color: var(--muted);
  font-size: 0.96rem;
}
.nc-faq-item[open] .nc-faq-a {
  max-height: 280px;
  padding: 0 22px 22px;
}
.nc-faq-a strong { color: var(--gold-bright); font-weight: 600; }

@media (max-width: 980px) {
  .nc-faq { grid-template-columns: 1fr; }
}

/* ==========================================================================
   COCKPIT v2 PREVIEW — slightly richer (kept compatible with existing markup)
   no override of existing classes; only utility helpers
   ========================================================================== */
.nc-dash__navitem--gold b { background: var(--gold-bright); }
.nc-dash__navitem--cyan b { background: var(--cyan); }

/* Improved dashboard chip animation */
@keyframes nc-bar-shimmer {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* ==========================================================================
   THEME · FRAME — Northlightframe warm/copper variant
   Overrides gold tokens to copper/sepia so all .nc-* sections render warm.
   ========================================================================== */
body.theme-frame {
  --gold:        #c8853a;
  --gold-bright: #f5cb88;
  --gold-deep:   #6a3f12;
  --cyan:        #f1a55a;
  --blue:        #c8853a;
  --blue-deep:   #4a2a0a;
  --line:        rgba(232, 165, 60, 0.18);
  --line-soft:   rgba(232, 165, 60, 0.1);
  --line-blue:   rgba(241, 165, 90, 0.2);
  --glow-gold:   0 0 60px rgba(232, 165, 60, 0.24);
}
body.theme-frame .nc-bg {
  background:
    radial-gradient(60% 50% at 78% 8%,  rgba(232, 165, 60, 0.14), transparent 70%),
    radial-gradient(55% 45% at 12% 18%, rgba(176, 99, 32, 0.14), transparent 72%),
    radial-gradient(70% 60% at 50% 110%, rgba(176, 99, 32, 0.10), transparent 70%),
    linear-gradient(180deg, #08060a 0%, #110a0a 45%, #08060a 100%);
}
body.theme-frame .nc-bg::before {
  background-image:
    linear-gradient(rgba(232, 165, 60, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 165, 60, 0.04) 1px, transparent 1px);
}

/* ==========================================================================
   HOME · SPLIT CINEMA — landing/start page
   Two cinematic brand halves: Northlightframe (warm copper) and Northcore (cool gold).
   ========================================================================== */
.nch-bg-warm {
  --warm: #c8853a;
  --warm-bright: #e8c084;
  --warm-deep: #6a3f12;
}
.nch-bg-cool {
  --cool: var(--gold);
  --cool-bright: var(--gold-bright);
  --cool-deep: var(--gold-deep);
}

.nch-split {
  position: relative;
  min-height: clamp(680px, 92vh, 960px);
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  isolation: isolate;
  overflow: hidden;
}

.nch-side {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(40px, 6vh, 80px) clamp(28px, 4vw, 64px);
  overflow: hidden;
  transition: flex-grow 0.6s var(--ease);
  cursor: pointer;
}
.nch-side__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.nch-side--warm {
  background:
    radial-gradient(70% 60% at 0% 100%, rgba(232, 165, 60, 0.18), transparent 65%),
    radial-gradient(80% 80% at 100% 0%, rgba(120, 65, 18, 0.4), transparent 70%),
    linear-gradient(135deg, #0a0807 0%, #1a100a 55%, #0a0807 100%);
}
.nch-side--cool {
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(216, 180, 90, 0.18), transparent 65%),
    radial-gradient(80% 80% at 0% 0%, rgba(20, 30, 60, 0.5), transparent 70%),
    linear-gradient(225deg, #050810 0%, #0a0e1f 55%, #02030a 100%);
}
.nch-side__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.nch-side--warm .nch-side__grid {
  background-image:
    linear-gradient(rgba(232,165,60,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,165,60,0.05) 1px, transparent 1px);
}

.nch-side__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.55;
  filter: contrast(1.04);
  transition: opacity 0.6s var(--ease), filter 0.6s var(--ease);
  pointer-events: none;
}
.nch-side--warm .nch-side__video {
  filter: contrast(1.04) sepia(0.4) saturate(1.2) hue-rotate(-8deg);
}

.nch-side__rays {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      transparent 0%,
      rgba(255, 200, 120, 0.06) 12%,
      transparent 24%,
      rgba(255, 200, 120, 0.04) 36%,
      transparent 48%);
  mask-image: radial-gradient(circle at 50% 60%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 60%, #000 20%, transparent 70%);
  animation: nc-hero2-spin 90s linear infinite;
}
.nch-side--cool .nch-side__rays {
  background:
    conic-gradient(from 90deg,
      transparent 0%,
      rgba(216, 180, 90, 0.08) 12%,
      transparent 24%,
      rgba(127, 227, 255, 0.05) 36%,
      transparent 48%);
}

.nch-side__sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nch-side__sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px rgba(246, 226, 166, 0.6);
  opacity: 0.65;
  animation: nc-hero2-spark 9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.nch-side--warm .nch-side__sparks i {
  background: #f5cb88;
  box-shadow: 0 0 12px rgba(245, 203, 136, 0.6);
}

/* corner brackets framing the panel */
.nch-side__corner {
  position: absolute;
  width: 36px;
  height: 36px;
  z-index: 4;
  border: 2px solid var(--gold-bright);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.nch-side--warm .nch-side__corner { border-color: #f5cb88; }
.nch-side__corner--tl { top: 26px; left: 26px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.nch-side__corner--tr { top: 26px; right: 26px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.nch-side__corner--bl { bottom: 26px; left: 26px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.nch-side__corner--br { bottom: 26px; right: 26px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

.nch-side:hover .nch-side__corner { opacity: 0.9; }
.nch-side:hover .nch-side__video { opacity: 0.7; }

/* content card */
.nch-side__content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 460px;
  text-align: center;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.nch-side__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nch-side--warm .nch-side__chip { color: #f5cb88; }
.nch-side__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}

.nch-side__logo {
  width: clamp(120px, 18vw, 200px);
  height: clamp(120px, 18vw, 200px);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  display: grid;
  place-items: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.nch-side__logo::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg, transparent, rgba(216, 180, 90, 0.5), transparent 30%, rgba(255, 220, 150, 0.4), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: nc-hero2-rim 14s linear infinite;
  opacity: 0.65;
}
.nch-side--warm .nch-side__logo::before {
  background: conic-gradient(from 0deg, transparent, rgba(232, 165, 60, 0.55), transparent 30%, rgba(255, 200, 120, 0.4), transparent 70%);
}
.nch-side__logo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 30px rgba(216, 180, 90, 0.4));
}

.nch-side__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: var(--ink);
  margin: 6px 0 4px;
}
.nch-side__title .nch-side__title-half {
  font-weight: 700;
  background: linear-gradient(120deg, var(--gold-bright) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nch-side--warm .nch-side__title .nch-side__title-half {
  background: linear-gradient(120deg, #f5cb88 0%, #c8853a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.nch-side__sub {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 500;
  margin-top: -2px;
}
.nch-side--warm .nch-side__sub { color: #f5cb88; }

.nch-side__lead {
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--muted);
  max-width: 38ch;
  margin: 0;
}

.nch-side__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.nch-side__tags span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.nch-side__cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: 14px;
  font: 600 0.95rem var(--font-display);
  letter-spacing: 0.01em;
  color: #1a1407;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 18px 44px rgba(216, 180, 90, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nch-side--warm .nch-side__cta {
  color: #2a1308;
  background: linear-gradient(135deg, #f5cb88, #c8853a);
  box-shadow: 0 18px 44px rgba(200, 133, 58, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.nch-side:hover .nch-side__cta { transform: translateY(-3px); }
.nch-side__cta svg { width: 16px; height: 16px; transition: transform 0.3s; }
.nch-side:hover .nch-side__cta svg { transform: translateX(4px); }

.nch-side__hint {
  position: absolute;
  bottom: clamp(22px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-dim);
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.4s;
}
.nch-side:hover .nch-side__hint { opacity: 1; }

/* DIVIDER (center) */
.nch-divider {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 6;
  background: linear-gradient(180deg, transparent 0%, rgba(216, 180, 90, 0.6) 25%, rgba(216, 180, 90, 0.6) 75%, transparent 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.nch-divider__core {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1407, #0a0e1f);
  border: 2px solid rgba(216, 180, 90, 0.7);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px rgba(5, 6, 12, 1), 0 0 40px rgba(216, 180, 90, 0.4);
  position: relative;
}
.nch-divider__core::before, .nch-divider__core::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(216, 180, 90, 0.3);
  animation: nch-divider-pulse 3s ease-out infinite;
}
.nch-divider__core::after { animation-delay: 1.5s; }
@keyframes nch-divider-pulse {
  0%   { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.nch-divider__icon {
  width: 26px; height: 26px;
  color: var(--gold-bright);
}
.nch-divider__label {
  position: absolute;
  top: calc(50% + 60px);
  left: 50%;
  transform: translateX(-50%);
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-dim);
  text-align: center;
  line-height: 1.6;
  white-space: nowrap;
}
.nch-divider__label b { display: block; color: var(--gold-bright); font-weight: 600; }

/* ============== MANIFEST STATEMENT ============== */
.nch-manifest {
  position: relative;
  padding: clamp(60px, 9vw, 120px) clamp(28px, 4vw, 60px);
  text-align: center;
}
.nch-manifest__text {
  max-width: 920px;
  margin: 24px auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nch-manifest__text b {
  font-weight: 600;
  background: linear-gradient(120deg, var(--gold-bright), var(--gold) 60%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============== "ZWEI MARKEN" VALUE STRIP ============== */
.nch-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nch-value {
  padding: 30px 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(216, 180, 90, 0.08), transparent 70%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.nch-value:hover {
  transform: translateY(-5px);
  border-color: rgba(216, 180, 90, 0.4);
}
.nch-value__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(216, 180, 90, 0.2), rgba(127, 227, 255, 0.08));
  border: 1px solid var(--line);
  color: var(--gold-bright);
  margin-bottom: 22px;
}
.nch-value__icon svg { width: 26px; height: 26px; }
.nch-value h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.nch-value p { color: var(--muted); font-size: 0.96rem; line-height: 1.55; }

/* ============== COMPARISON TABLE ============== */
.nch-compare-table {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nch-compare-table__head {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  background: rgba(255, 255, 255, 0.02);
}
.nch-compare-table__head > div {
  padding: 22px 26px;
  font: 600 0.72rem var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nch-compare-table__head > div:nth-child(2) {
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  color: #f5cb88;
}
.nch-compare-table__head > div:nth-child(3) {
  color: var(--gold-bright);
}
.nch-compare-table__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-top: 1px solid var(--line-soft);
  transition: background 0.3s;
}
.nch-compare-table__row:hover { background: rgba(255, 255, 255, 0.012); }
.nch-compare-table__row > div {
  padding: 18px 26px;
  font-size: 0.92rem;
  color: var(--muted);
}
.nch-compare-table__row > div:nth-child(1) {
  color: var(--ink);
  font: 500 0.94rem var(--font-display);
}
.nch-compare-table__row > div:nth-child(2) {
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
.nch-compare-table__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nch-compare-table__check svg { width: 16px; height: 16px; flex-shrink: 0; }
.nch-compare-table__check.is-warm svg { color: #f5cb88; }
.nch-compare-table__check.is-cool svg { color: var(--gold-bright); }
.nch-compare-table__check.is-none { color: var(--muted-dim); font-style: italic; }

/* ============== FOUNDER STRIP (light version) ============== */
.nch-founder-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
  padding: clamp(26px, 4vw, 42px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(50% 80% at 0% 50%, rgba(216, 180, 90, 0.1), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: var(--shadow);
}
.nch-founder-strip__portrait {
  width: clamp(120px, 16vw, 180px);
  height: clamp(150px, 20vw, 220px);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}
.nch-founder-strip__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
.nch-founder-strip__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(5,6,12,0.7) 100%);
}
.nch-founder-strip__copy {
  display: grid;
  gap: 6px;
}
.nch-founder-strip__copy span {
  font: 600 0.7rem var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nch-founder-strip__copy h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 6px 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.nch-founder-strip__copy p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 980px) {
  .nch-split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    min-height: auto;
  }
  .nch-divider {
    height: 80px;
    background: linear-gradient(90deg, transparent 0%, rgba(216, 180, 90, 0.6) 25%, rgba(216, 180, 90, 0.6) 75%, transparent 100%);
    background-size: 100% 1px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .nch-divider__label {
    top: calc(50% + 50px);
    font-size: 0.55rem;
  }
  .nch-values { grid-template-columns: 1fr; }
  .nch-compare-table__head, .nch-compare-table__row { grid-template-columns: 1fr; }
  .nch-compare-table__head > div, .nch-compare-table__row > div { border: 0 !important; }
  .nch-founder-strip { grid-template-columns: 1fr; text-align: center; }
  .nch-founder-strip__portrait { width: 180px; height: 220px; margin: 0 auto; }
}

/* ==========================================================================
   BRIDGE / DATA FLOW SCENE (replaces code panel in API section)
   Plain-language visualization of data flows
   ========================================================================== */
.nc-bridge {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(216, 180, 90, 0.1), transparent 70%),
    linear-gradient(180deg, #0a0d18, #060810);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 22px 22px 26px;
  display: grid;
  gap: 18px;
}
.nc-bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(216, 180, 90, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 180, 90, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
}
.nc-bridge > * { position: relative; z-index: 1; }
.nc-bridge__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.nc-bridge__head span {
  font: 600 0.7rem var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nc-bridge__head em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted-dim);
}
.nc-bridge__flow {
  display: grid;
  grid-template-columns: 1fr auto 1.3fr auto 1.4fr;
  align-items: center;
  gap: 14px;
}
.nc-bridge__node, .nc-bridge__out {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  padding: 14px 12px;
  display: grid;
  gap: 5px;
  justify-items: center;
  text-align: center;
}
.nc-bridge__node-icon, .nc-bridge__out-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(216, 180, 90, 0.4), rgba(216, 180, 90, 0.1));
  color: var(--gold-bright);
}
.nc-bridge__node-icon svg, .nc-bridge__out-icon svg { width: 18px; height: 18px; }
.nc-bridge__node b, .nc-bridge__out b {
  font: 600 0.84rem var(--font-display);
  color: var(--ink);
}
.nc-bridge__node span, .nc-bridge__out span {
  font-size: 0.72rem;
  color: var(--muted);
}

.nc-bridge__arrow {
  position: relative;
  width: 100px;
  height: 32px;
  display: grid;
  place-items: center;
}
.nc-bridge__arrow-line {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 180, 90, 0.1), rgba(216, 180, 90, 0.55), rgba(216, 180, 90, 0.1));
}
.nc-bridge__arrow-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f6e2a6;
  box-shadow: 0 0 10px rgba(216, 180, 90, 0.7);
  top: 50%;
  margin-top: -3.5px;
  animation: nc-bridge-fly 2.4s linear infinite;
}
@keyframes nc-bridge-fly {
  0%   { left: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.nc-bridge__arrow--out .nc-bridge__arrow-dot { background: var(--cyan); box-shadow: 0 0 10px rgba(127, 227, 255, 0.7); }
.nc-bridge__arrow-label {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  white-space: nowrap;
}

.nc-bridge__hub {
  position: relative;
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.nc-bridge__hub-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(216, 180, 90, 0.35);
  animation: nc-bridge-ring 6s linear infinite;
}
.nc-bridge__hub-ring--2 {
  inset: 16px;
  border-color: rgba(127, 227, 255, 0.3);
  animation-duration: 9s;
  animation-direction: reverse;
}
@keyframes nc-bridge-ring { to { transform: rotate(360deg); } }
.nc-bridge__hub-core {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(216, 180, 90, 0.6), rgba(8, 10, 18, 0.92));
  border: 1px solid rgba(216, 180, 90, 0.5);
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 0 24px rgba(216, 180, 90, 0.4);
}
.nc-bridge__hub-core b {
  font: 700 1.4rem var(--font-display);
  color: var(--gold-bright);
  line-height: 1;
}
.nc-bridge__hub-core span {
  font: 600 0.5rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.nc-bridge__hub-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(216, 180, 90, 0.6);
  animation: nc-bridge-pulse 2.4s ease-out infinite;
}
@keyframes nc-bridge-pulse {
  0%   { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

.nc-bridge__outs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.nc-bridge__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(216, 180, 90, 0.06);
  font-size: 0.86rem;
  color: var(--muted);
}
.nc-bridge__foot svg { width: 18px; height: 18px; color: var(--gold-bright); flex-shrink: 0; }
.nc-bridge__foot b { color: var(--gold-bright); font-family: var(--font-display); }

@media (max-width: 980px) {
  .nc-bridge__flow {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .nc-bridge__arrow { width: 100%; height: 40px; transform: rotate(90deg); }
  .nc-bridge__outs { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   VORHER / NACHHER COMPARISON
   ========================================================================== */
.nc-compare {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(50% 70% at 0% 0%, rgba(255, 95, 95, 0.06), transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgba(216, 180, 90, 0.1), transparent 60%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 50px);
  overflow: hidden;
}

.nc-compare__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 28px;
}
.nc-compare__role {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  padding: 14px 22px;
  border-radius: 999px;
  font: 600 0.9rem var(--font-display);
  cursor: pointer;
  transition: 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.nc-compare__role svg { width: 18px; height: 18px; }
.nc-compare__role:hover { color: var(--ink); border-color: rgba(216, 180, 90, 0.4); }
.nc-compare__role.is-active {
  color: #1a1407;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(216, 180, 90, 0.32);
}

.nc-compare__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  position: relative;
  min-height: 380px;
}
.nc-compare__pair::after {
  content: "VS";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(8, 10, 18, 0.95);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font: 700 0.82rem var(--font-display);
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.nc-compare__side {
  border-radius: var(--r-md);
  padding: 24px 26px;
  display: none;
  flex-direction: column;
  gap: 16px;
}
.nc-compare__side.is-active { display: flex; }
.nc-compare__side--before {
  background: linear-gradient(180deg, rgba(255, 95, 95, 0.06), rgba(255, 95, 95, 0.015));
  border: 1px solid rgba(255, 95, 95, 0.2);
}
.nc-compare__side--after {
  background: linear-gradient(180deg, rgba(216, 180, 90, 0.08), rgba(216, 180, 90, 0.02));
  border: 1px solid rgba(216, 180, 90, 0.3);
}
.nc-compare__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font: 700 0.65rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nc-compare__side--before .nc-compare__label {
  background: rgba(255, 95, 95, 0.16);
  color: #ff8a8a;
}
.nc-compare__side--after .nc-compare__label {
  background: rgba(216, 180, 90, 0.2);
  color: var(--gold-bright);
}
.nc-compare__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.nc-compare__head {
  font: 600 1.35rem var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.nc-compare__list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.nc-compare__list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}
.nc-compare__list li > svg { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.nc-compare__side--before .nc-compare__list svg { color: #ff8a8a; }
.nc-compare__side--after .nc-compare__list svg { color: #5bd089; }

.nc-compare__metric {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.nc-compare__metric span {
  font: 600 0.72rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nc-compare__metric b {
  font: 700 1.45rem var(--font-display);
  letter-spacing: -0.01em;
}
.nc-compare__side--before .nc-compare__metric b { color: #ff8a8a; }
.nc-compare__side--after .nc-compare__metric b { color: #5bd089; }

@media (max-width: 820px) {
  .nc-compare__pair { grid-template-columns: 1fr; }
  .nc-compare__pair::after { display: none; }
}

/* ==========================================================================
   ZEITERSPARNIS-RECHNER (savings calculator)
   ========================================================================== */
.nc-saver {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(36px, 5vw, 56px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(216, 180, 90, 0.12), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.nc-saver::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(216, 180, 90, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 180, 90, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
}
.nc-saver > * { position: relative; z-index: 1; }

.nc-saver__copy h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  margin: 14px 0 14px;
}
.nc-saver__copy p {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 22px;
}
.nc-saver__field {
  margin-bottom: 22px;
}
.nc-saver__field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}
.nc-saver__label {
  font: 600 0.86rem var(--font-display);
  color: var(--ink);
}
.nc-saver__value {
  font: 700 1.05rem var(--font-display);
  color: var(--gold-bright);
}
.nc-saver__range {
  width: 100%;
  appearance: none;
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.nc-saver__range::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(to right, var(--gold-bright) 0% var(--fill, 30%), rgba(255,255,255,0.07) var(--fill, 30%) 100%);
  border-radius: 3px;
}
.nc-saver__range::-moz-range-track {
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
}
.nc-saver__range::-moz-range-progress {
  height: 6px;
  background: var(--gold-bright);
  border-radius: 3px;
}
.nc-saver__range::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border: 2px solid #1a1407;
  margin-top: -8px;
  cursor: grab;
  box-shadow: 0 6px 20px rgba(216, 180, 90, 0.5);
  transition: transform 0.15s;
}
.nc-saver__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border: 2px solid #1a1407;
  cursor: grab;
  box-shadow: 0 6px 20px rgba(216, 180, 90, 0.5);
}
.nc-saver__range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.nc-saver__hint {
  margin-top: 7px;
  font-size: 0.76rem;
  color: var(--muted-dim);
}

.nc-saver__result {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid rgba(216, 180, 90, 0.4);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(216, 180, 90, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(8, 10, 18, 0.9), rgba(6, 8, 14, 0.95));
  padding: 32px 30px;
  box-shadow: 0 30px 80px rgba(216, 180, 90, 0.16);
  display: grid;
  gap: 18px;
  overflow: hidden;
}
.nc-saver__result::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 200deg, transparent, rgba(216, 180, 90, 0.5), transparent 50%, rgba(127, 227, 255, 0.4), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
  animation: nc-saver-rim 18s linear infinite;
}
@keyframes nc-saver-rim { to { transform: rotate(360deg); } }
.nc-saver__result-head {
  font: 600 0.72rem var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nc-saver__big {
  font: 700 clamp(2.8rem, 6vw, 4.4rem) var(--font-display);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-bright);
  text-shadow: 0 0 60px rgba(216, 180, 90, 0.3);
}
.nc-saver__big small {
  font-size: 0.42em;
  color: var(--muted);
  font-weight: 600;
  margin-left: 8px;
}
.nc-saver__big-sub {
  font: 500 0.92rem var(--font-display);
  color: var(--muted);
  margin-top: -8px;
}
.nc-saver__breakdown {
  display: grid;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.nc-saver__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--muted);
}
.nc-saver__row b {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
}
.nc-saver__assumption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(216, 180, 90, 0.2);
  font-size: 0.72rem;
  color: var(--muted-dim);
  line-height: 1.5;
}

@media (max-width: 880px) {
  .nc-saver { grid-template-columns: 1fr; }
}

/* ==========================================================================
   KUNDEN-STIMMEN (testimonials)
   ========================================================================== */
.nc-voices {
  position: relative;
}
.nc-voices__rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nc-voice {
  position: relative;
  padding: 30px 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(216, 180, 90, 0.08), transparent 70%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.nc-voice:hover {
  transform: translateY(-5px);
  border-color: rgba(216, 180, 90, 0.4);
  box-shadow: var(--shadow-soft);
}
.nc-voice__quote-icon {
  font-family: Georgia, serif;
  font-size: 3.4rem;
  line-height: 0.7;
  color: var(--gold);
  opacity: 0.7;
  font-weight: 700;
}
.nc-voice__text {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.55;
  font-family: var(--font-display);
  font-weight: 500;
}
.nc-voice__text strong { color: var(--gold-bright); font-weight: 600; }
.nc-voice__rating {
  display: flex;
  gap: 3px;
  color: var(--gold-bright);
  font-size: 0.92rem;
  letter-spacing: 1px;
  filter: drop-shadow(0 0 8px rgba(216, 180, 90, 0.4));
}
.nc-voice__author {
  margin-top: auto;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  align-items: center;
}
.nc-voice__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.95rem var(--font-display);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
}
.nc-voice__avatar.is-cyan { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #051022; }
.nc-voice__avatar.is-green { background: linear-gradient(135deg, #88e6b2, #2eaa6e); color: #052517; }
.nc-voice__author-name {
  font: 600 0.96rem var(--font-display);
  color: var(--ink);
}
.nc-voice__author-role {
  font-size: 0.78rem;
  color: var(--muted-dim);
  margin-top: 2px;
}

@media (max-width: 1080px) {
  .nc-voices__rail { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WAS SIE BEKOMMEN — concrete inclusions
   ========================================================================== */
.nc-package {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.nc-package__copy h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  margin: 14px 0 14px;
}
.nc-package__copy p { color: var(--muted); }
.nc-package__price {
  margin-top: 24px;
  padding: 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(216, 180, 90, 0.06);
  display: grid;
  gap: 10px;
}
.nc-package__price small {
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.nc-package__price h3 {
  font: 600 1.1rem var(--font-display);
}
.nc-package__price p {
  font-size: 0.88rem;
  margin: 0;
}

.nc-package__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.nc-package-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  transition: 0.3s var(--ease);
}
.nc-package-item:hover {
  border-color: rgba(216, 180, 90, 0.4);
  transform: translateY(-2px);
}
.nc-package-item__check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  margin-top: 2px;
}
.nc-package-item__check svg { width: 13px; height: 13px; }
.nc-package-item b {
  display: block;
  font: 600 0.96rem var(--font-display);
  color: var(--ink);
  margin-bottom: 3px;
}
.nc-package-item span {
  display: block;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 880px) {
  .nc-package { grid-template-columns: 1fr; }
  .nc-package__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOUNDER v2 — bigger portrait, three reason cards, contact block
   ========================================================================== */
.nc-founder2 {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: start;
}
.nc-founder2__portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.nc-founder2__portrait img {
  width: 100%;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 28%;
}
.nc-founder2__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(216, 180, 90, 0.05) 0%, transparent 28%, transparent 55%, rgba(5, 6, 12, 0.78) 100%);
  pointer-events: none;
}
.nc-founder2__overlay {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  display: grid;
  gap: 6px;
}
.nc-founder2__overlay-name {
  font: 600 1.4rem var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nc-founder2__overlay-role {
  font: 500 0.86rem var(--font-display);
  color: var(--gold-bright);
}
.nc-founder2__overlay-badges {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.nc-founder2__overlay-badge {
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 10, 18, 0.7);
  border: 1px solid var(--line);
  color: var(--muted);
  backdrop-filter: blur(8px);
}
.nc-founder2__overlay-badge.is-gold {
  color: var(--gold-bright);
  border-color: rgba(216, 180, 90, 0.4);
}

.nc-founder2__copy h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  margin: 14px 0 18px;
}
.nc-founder2__lead {
  color: var(--muted);
  font-size: 1.02rem;
  margin-bottom: 26px;
}
.nc-founder2__lead strong { color: var(--ink); font-weight: 600; }

.nc-founder2__reasons {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}
.nc-f-reason {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  transition: 0.3s var(--ease);
}
.nc-f-reason:hover {
  border-color: rgba(216, 180, 90, 0.4);
  transform: translateX(4px);
}
.nc-f-reason__num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(216, 180, 90, 0.4), rgba(8, 10, 18, 0.92));
  border: 1px solid rgba(216, 180, 90, 0.4);
  font: 700 1.05rem var(--font-display);
  color: var(--gold-bright);
}
.nc-f-reason b {
  display: block;
  font: 600 1.05rem var(--font-display);
  margin-bottom: 5px;
  color: var(--ink);
}
.nc-f-reason span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.nc-founder2__quote {
  padding: 22px 26px;
  border-radius: 14px;
  border: 1px solid rgba(216, 180, 90, 0.25);
  background: linear-gradient(180deg, rgba(216, 180, 90, 0.08), rgba(216, 180, 90, 0.02));
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
  position: relative;
  margin-bottom: 22px;
}
.nc-founder2__quote::before {
  content: "\201E";
  font-family: Georgia, serif;
  font-size: 4rem;
  position: absolute;
  top: -6px;
  left: 8px;
  color: var(--gold);
  opacity: 0.4;
}
.nc-founder2__quote p { padding-left: 30px; margin: 0; font-style: italic; }
.nc-founder2__quote em {
  display: block;
  margin-top: 14px;
  padding-left: 30px;
  font-style: normal;
  font-size: 0.86rem;
  color: var(--muted);
}

.nc-founder2__contact {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}
.nc-founder2__contact-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  display: grid;
  place-items: center;
  font: 700 0.95rem var(--font-display);
}
.nc-founder2__contact-body b {
  display: block;
  font: 600 0.92rem var(--font-display);
}
.nc-founder2__contact-body span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 1080px) {
  .nc-founder2 { grid-template-columns: 1fr; }
  .nc-founder2__portrait { max-width: 480px; }
}

/* ==========================================================================
   PORTAL HOTSPOTS (interactive education)
   ========================================================================== */
.nc-hotspot {
  position: absolute;
  z-index: 4;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
}
.nc-hotspot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 5px rgba(216, 180, 90, 0.16);
  animation: nc-hotspot-pulse 2s ease-in-out infinite;
  transition: 0.3s;
}
.nc-hotspot::after {
  content: "?";
  position: absolute;
  font: 700 0.7rem var(--font-display);
  color: #1a1407;
}
@keyframes nc-hotspot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(216, 180, 90, 0.16); }
  50%      { box-shadow: 0 0 0 10px rgba(216, 180, 90, 0.04); }
}
.nc-hotspot:hover::before { transform: scale(1.18); }
.nc-hotspot__tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 240px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(216, 180, 90, 0.5);
  background: linear-gradient(180deg, rgba(8, 10, 18, 0.96), rgba(6, 8, 14, 0.96));
  backdrop-filter: blur(10px);
  color: var(--ink);
  font: 500 0.84rem var(--font-display);
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s var(--ease);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  z-index: 5;
}
.nc-hotspot__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(216, 180, 90, 0.5);
}
.nc-hotspot:hover .nc-hotspot__tip,
.nc-hotspot:focus .nc-hotspot__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nc-hotspot__tip b {
  display: block;
  color: var(--gold-bright);
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   HERO v2 — CINEMATIC (replaces .nc-hero with split 3D scene)
   Fullscreen presence, logo-reveal video centerpiece, ambient gold/cyan beams.
   ========================================================================== */
.nc-hero2 {
  position: relative;
  min-height: clamp(720px, 100vh, 980px);
  padding: clamp(36px, 5vh, 80px) 0 clamp(50px, 6vh, 90px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.nc-hero2__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(48% 60% at 50% 50%, rgba(216, 180, 90, 0.10), transparent 70%),
    radial-gradient(60% 50% at 18% 12%, rgba(127, 227, 255, 0.07), transparent 75%),
    radial-gradient(60% 50% at 82% 90%, rgba(216, 180, 90, 0.08), transparent 75%),
    linear-gradient(180deg, #02030a 0%, #05060f 50%, #02030a 100%);
}
.nc-hero2__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(120, 150, 220, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 150, 220, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 30%, transparent 80%);
}

/* spinning compass rays in background, very subtle */
.nc-hero2__rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(560px, 70vh, 900px);
  height: clamp(560px, 70vh, 900px);
  transform: translate(-50%, -50%);
  opacity: 0.65;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      transparent 0%,
      rgba(216, 180, 90, 0.05) 12%,
      transparent 24%,
      rgba(127, 227, 255, 0.04) 36%,
      transparent 48%,
      rgba(216, 180, 90, 0.05) 60%,
      transparent 72%,
      rgba(127, 227, 255, 0.04) 84%,
      transparent 96%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  animation: nc-hero2-spin 80s linear infinite;
}
@keyframes nc-hero2-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.nc-hero2__beam {
  position: absolute;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  border-radius: 50%;
  animation: nc-hero2-beam 14s ease-in-out infinite alternate;
}
.nc-hero2__beam--gold {
  width: 480px; height: 480px;
  left: -120px; top: -80px;
  background: radial-gradient(circle, rgba(216,180,90,0.55), transparent 65%);
}
.nc-hero2__beam--cyan {
  width: 520px; height: 520px;
  right: -160px; bottom: -120px;
  background: radial-gradient(circle, rgba(79,141,255,0.5), transparent 65%);
  animation-delay: -7s;
}
@keyframes nc-hero2-beam {
  0%   { transform: translate(0,0) scale(1);     opacity: 0.45; }
  100% { transform: translate(40px,40px) scale(1.1); opacity: 0.65; }
}

/* floating ambient gold sparks */
.nc-hero2__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nc-hero2__sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(246, 226, 166, 0.85);
  box-shadow: 0 0 12px rgba(246, 226, 166, 0.5);
  opacity: var(--o, 0.6);
  animation: nc-hero2-spark 8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.nc-hero2__sparks i:nth-child(odd) {
  background: rgba(127, 227, 255, 0.85);
  box-shadow: 0 0 12px rgba(127, 227, 255, 0.5);
}
@keyframes nc-hero2-spark {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: var(--o, 0.6); }
  50%      { transform: translate(0, -18px) scale(1.6); opacity: 1; }
}

/* inner layout */
.nc-hero2__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(20px, 2.6vh, 30px);
  justify-items: center;
  text-align: center;
  width: var(--container);
}

/* eyebrow with live status dot */
.nc-hero2__top { margin-top: 6px; }
.nc-hero2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 10, 18, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nc-hero2__eyebrow em {
  font-style: normal;
  color: var(--muted-dim);
}
.nc-hero2__eyebrow span:last-child { color: var(--muted); }
.nc-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5bd089;
  box-shadow: 0 0 0 4px rgba(91, 208, 137, 0.18), 0 0 14px rgba(91, 208, 137, 0.7);
  animation: nc-status-pulse 2.4s ease-in-out infinite;
}
@keyframes nc-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(91, 208, 137, 0.15), 0 0 12px rgba(91, 208, 137, 0.6); }
  50%      { box-shadow: 0 0 0 7px rgba(91, 208, 137, 0.04), 0 0 22px rgba(91, 208, 137, 0.9); }
}

/* logo-reveal stage */
.nc-hero2__stage {
  position: relative;
  width: min(640px, 92%);
  aspect-ratio: 1 / 1;
  border-radius: clamp(20px, 2vw, 32px);
  background: radial-gradient(60% 60% at 50% 50%, rgba(216, 180, 90, 0.08), transparent 75%),
              linear-gradient(180deg, #07080f 0%, #03040a 100%);
  border: 1px solid rgba(216, 180, 90, 0.16);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 120px rgba(216, 180, 90, 0.12);
  overflow: hidden;
  isolation: isolate;
}
.nc-hero2__stage::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg,
    transparent, rgba(216, 180, 90, 0.55), transparent 30%,
    rgba(127, 227, 255, 0.5), transparent 60%,
    rgba(216, 180, 90, 0.4), transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: nc-hero2-rim 18s linear infinite;
  pointer-events: none;
}
@keyframes nc-hero2-rim { to { transform: rotate(360deg); } }

.nc-hero2__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
}

.nc-hero2__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay;
  opacity: 0.7;
}

/* corner brackets, like camera viewfinder */
.nc-hero2__corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(216, 180, 90, 0.75);
  z-index: 3;
  opacity: 0.75;
}
.nc-hero2__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.nc-hero2__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.nc-hero2__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.nc-hero2__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.nc-hero2__stage-bar {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.nc-hero2__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(6, 8, 14, 0.85);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.nc-hero2__chip--cyan { color: var(--cyan); border-color: var(--line-blue); }
.nc-hero2__chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5d5d;
  box-shadow: 0 0 8px #ff5d5d;
  animation: nc-blink 1.6s steps(1) infinite;
}
.nc-hero2__stage-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dim);
  pointer-events: none;
}

/* headline */
.nc-hero2__head {
  max-width: 16ch;
  font-size: clamp(2.6rem, 6.2vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-top: clamp(4px, 1vh, 14px);
}
.nc-hero2__head .nc-grad { font-weight: 600; }

.nc-hero2__lead {
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1.04rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.nc-hero2__lead strong { color: var(--ink); font-weight: 600; }

.nc-hero2__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
}
.nc-hero2__cta .nc-btn {
  min-height: 58px;
  padding: 0 32px;
  font-size: 1.0rem;
}

/* trust strip */
.nc-hero2__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 26px;
  margin-top: clamp(16px, 2vh, 26px);
  padding: 18px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8, 10, 18, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: 100%;
}
.nc-hero2__trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.nc-hero2__trust-item b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}
.nc-hero2__trust-item span {
  display: block;
  font-size: 0.74rem;
  color: var(--muted-dim);
  margin-top: 2px;
}
.nc-hero2__trust-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(216, 180, 90, 0.18), rgba(79, 141, 255, 0.08));
  color: var(--gold-bright);
  flex-shrink: 0;
}
.nc-hero2__trust-icon svg { width: 17px; height: 17px; }
.nc-hero2__trust-divider {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(216, 180, 90, 0.22), transparent);
}

/* scroll indicator */
.nc-hero2__scroll {
  margin-top: clamp(14px, 2vh, 22px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted-dim);
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: color 0.25s;
}
.nc-hero2__scroll:hover { color: var(--gold-bright); }
.nc-hero2__scroll svg {
  width: 18px; height: 18px;
  animation: nc-hero2-nudge 2s ease-in-out infinite;
}
@keyframes nc-hero2-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* responsive */
@media (max-width: 820px) {
  .nc-hero2 { min-height: auto; padding: 36px 0 50px; }
  .nc-hero2__head { font-size: clamp(2rem, 7vw, 2.8rem); max-width: 22ch; }
  .nc-hero2__lead { font-size: 0.96rem; }
  .nc-hero2__stage { width: min(440px, 92%); }
  .nc-hero2__trust { flex-direction: column; gap: 14px; align-items: stretch; }
  .nc-hero2__trust-divider { width: 80%; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(216, 180, 90, 0.22), transparent); }
  .nc-hero2__cta .nc-btn { flex: 1; }
}

/* reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .nc-hero2__rays, .nc-hero2__beam, .nc-hero2__sparks i, .nc-hero2__stage::before,
  .nc-status-dot, .nc-hero2__chip-dot, .nc-hero2__scroll svg {
    animation: none !important;
  }
  .nc-hero2__video { display: none; }
  .nc-hero2__stage { background-image: url('../images/northcore-hero-poster.jpg'); background-size: cover; background-position: center; }
}

/* ==========================================================================
   FIRSTMOVER · "Wir sind in der Frühphase" Pitch (replaces fake testimonials)
   ========================================================================== */
.nc-firstmover {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}
.nc-firstmover__card {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(216, 180, 90, 0.4);
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(216, 180, 90, 0.14), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}
.nc-firstmover__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 180deg,
    transparent, rgba(216, 180, 90, 0.6), transparent 30%,
    rgba(127, 227, 255, 0.5), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: nc-saver-rim 22s linear infinite;
  opacity: 0.55;
  pointer-events: none;
}
.nc-firstmover__card > * { position: relative; z-index: 1; }
.nc-firstmover__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  font: 700 0.66rem var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.nc-firstmover__card h3 {
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.nc-firstmover__card > p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 26px;
}
.nc-firstmover__card strong { color: var(--ink); }
.nc-firstmover__list {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}
.nc-firstmover__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.5;
}
.nc-firstmover__list b { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.nc-firstmover__check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.nc-firstmover__check svg { width: 14px; height: 14px; }
.nc-firstmover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.nc-firstmover__limit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--muted);
}
.nc-firstmover__limit strong { color: var(--gold-bright); }

.nc-firstmover__placeholder {
  position: relative;
  padding: clamp(28px, 4vw, 38px);
  border-radius: var(--r-lg);
  border: 1px dashed rgba(216, 180, 90, 0.4);
  background: rgba(255, 255, 255, 0.018);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.nc-firstmover__placeholder-quote {
  font-family: Georgia, serif;
  font-size: 4.5rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.4;
  text-align: left;
}
.nc-firstmover__placeholder-text em {
  display: block;
  font: 600 1.25rem var(--font-display);
  font-style: italic;
  color: var(--gold-bright);
  margin-bottom: 12px;
}
.nc-firstmover__placeholder-text p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0;
}
.nc-firstmover__placeholder-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.92rem var(--font-display);
  color: var(--gold-bright);
  border-bottom: 1px dashed currentColor;
  padding-bottom: 2px;
}
.nc-firstmover__placeholder-cta a:hover { color: var(--ink); }

@media (max-width: 980px) {
  .nc-firstmover { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TRY · interactive Mängel-Board (real drag &amp; drop)
   ========================================================================== */
.nc-try {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.nc-try__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.022);
}
.nc-try__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 0.86rem var(--font-display);
}
.nc-try__title em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.84rem;
  margin-left: 6px;
}
.nc-try__reset {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
  font: 600 0.76rem var(--font-display);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.25s var(--ease);
}
.nc-try__reset:hover { color: var(--gold-bright); border-color: rgba(216, 180, 90, 0.4); }
.nc-try__reset svg { width: 13px; height: 13px; }

.nc-try__board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding: 18px;
  min-height: 380px;
}
.nc-try__col {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.018);
  display: flex;
  flex-direction: column;
  transition: background 0.3s var(--ease), border-color 0.3s;
}
.nc-try__col.is-target {
  background: rgba(216, 180, 90, 0.06);
  border-color: rgba(216, 180, 90, 0.5);
  box-shadow: 0 0 0 1px rgba(216, 180, 90, 0.2) inset;
}
.nc-try__col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.nc-try__col-title {
  font: 600 0.72rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nc-try__col-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
}
.nc-try__col-title.is-new { color: #ff8a8a; }
.nc-try__col-title.is-prog { color: var(--cyan); }
.nc-try__col-title.is-done { color: #6ad596; }
.nc-try__col-count {
  font: 600 0.7rem var(--font-display);
  color: var(--muted-dim);
}
.nc-try__col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  min-height: 280px;
}
.nc-try__col-placeholder {
  flex: 1;
  min-height: 60px;
  display: grid;
  place-items: center;
  border: 1px dashed transparent;
  border-radius: 11px;
  font: 600 0.74rem var(--font-display);
  color: transparent;
  transition: 0.3s var(--ease);
  pointer-events: none;
}
.nc-try__col.is-target .nc-try__col-placeholder {
  border-color: rgba(216, 180, 90, 0.4);
  color: rgba(216, 180, 90, 0.7);
}

.nc-try__card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  padding: 12px;
  display: grid;
  gap: 7px;
  font-size: 0.82rem;
  cursor: grab;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s, opacity 0.3s;
  user-select: none;
}
.nc-try__card:hover {
  transform: translateY(-2px) scale(1.015);
  border-color: rgba(216, 180, 90, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.nc-try__card:active, .nc-try__card.is-dragging {
  cursor: grabbing;
  opacity: 0.65;
  transform: rotate(2deg);
  box-shadow: 0 20px 40px rgba(216, 180, 90, 0.2);
}
.nc-try__card.is-dropped {
  animation: nc-try-pop 0.5s var(--ease);
}
@keyframes nc-try-pop {
  0%   { transform: scale(0.92); }
  60%  { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(216, 180, 90, 0.3); }
  100% { transform: scale(1); }
}
.nc-try__card-id {
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.08em;
  color: var(--muted-dim);
}
.nc-try__card-title { font-weight: 600; line-height: 1.32; color: var(--ink); }
.nc-try__card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3px;
  color: var(--muted-dim);
  font-size: 0.7rem;
}
.nc-try__owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nc-try__owner b {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 0.6rem var(--font-display);
}
.nc-try__card.is-done {
  opacity: 0.75;
}
.nc-try__card.is-done .nc-try__card-title {
  text-decoration: line-through;
  text-decoration-color: rgba(106, 213, 150, 0.4);
}

.nc-try__hint {
  position: absolute;
  bottom: -22px;
  right: 0;
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
  animation: nc-try-hint-bob 2s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.85;
}
@keyframes nc-try-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.nc-try__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid var(--line-soft);
  background: rgba(216, 180, 90, 0.04);
  font-size: 0.86rem;
  color: var(--muted);
}
.nc-try__foot svg { width: 18px; height: 18px; color: var(--gold-bright); flex-shrink: 0; }
.nc-try__foot b { color: var(--gold-bright); font-family: var(--font-display); }

@media (max-width: 880px) {
  .nc-try__board { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SELF-ASSESSMENT QUIZ — "Wie reif ist Ihr Betrieb?"
   ========================================================================== */
.nc-quiz {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(127, 227, 255, 0.08), transparent 70%),
    radial-gradient(70% 80% at 100% 100%, rgba(216, 180, 90, 0.12), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nc-quiz__head {
  padding: 28px 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}
.nc-quiz__progress {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nc-quiz__progress-bar {
  width: 200px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.nc-quiz__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.5s var(--ease);
}
.nc-quiz__progress-label {
  font: 600 0.74rem var(--font-display);
  color: var(--muted);
  letter-spacing: 0.06em;
}

.nc-quiz__step {
  padding: 32px clamp(24px, 4vw, 48px) 36px;
  display: none;
  flex-direction: column;
  gap: 22px;
  animation: nc-quiz-in 0.45s var(--ease);
}
.nc-quiz__step.is-active { display: flex; }
@keyframes nc-quiz-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.nc-quiz__q {
  font: 600 clamp(1.4rem, 2.4vw, 1.85rem) var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.nc-quiz__answers {
  display: grid;
  gap: 12px;
}
.nc-quiz__answer {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.022);
  color: var(--ink);
  text-align: left;
  padding: 18px 20px;
  border-radius: 14px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: 0.3s var(--ease);
}
.nc-quiz__answer:hover {
  border-color: rgba(216, 180, 90, 0.45);
  background: rgba(216, 180, 90, 0.05);
  transform: translateX(4px);
}
.nc-quiz__answer-letter {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font: 600 0.82rem var(--font-display);
  color: var(--gold-bright);
}
.nc-quiz__answer-arrow {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--muted-dim);
  opacity: 0.5;
  transition: 0.25s;
}
.nc-quiz__answer:hover .nc-quiz__answer-arrow { opacity: 1; color: var(--gold-bright); transform: translateX(3px); }
.nc-quiz__answer svg { width: 14px; height: 14px; }

.nc-quiz__back {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 0.84rem var(--font-display);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 6px;
}
.nc-quiz__back:hover { color: var(--gold-bright); }
.nc-quiz__back svg { width: 13px; height: 13px; }

/* Result */
.nc-quiz__result {
  padding: 36px clamp(24px, 4vw, 48px);
  display: none;
  flex-direction: column;
  gap: 22px;
  text-align: center;
  align-items: center;
}
.nc-quiz__result.is-active { display: flex; }
.nc-quiz__result-meter {
  position: relative;
  width: 180px;
  height: 180px;
}
.nc-quiz__result-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nc-quiz__result-meter-bg { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 10; }
.nc-quiz__result-meter-fg { fill: none; stroke: url(#ncQuizGrad); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--ease); }
.nc-quiz__result-meter-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.nc-quiz__result-meter-center b {
  display: block;
  font: 700 2.4rem var(--font-display);
  color: var(--gold-bright);
  line-height: 1;
}
.nc-quiz__result-meter-center span {
  font: 600 0.66rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-top: 6px;
}
.nc-quiz__result-tier {
  font: 700 0.72rem var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(216, 180, 90, 0.12);
  border: 1px solid rgba(216, 180, 90, 0.3);
}
.nc-quiz__result h3 {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.25;
}
.nc-quiz__result p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 50ch;
}
.nc-quiz__result strong { color: var(--ink); }
.nc-quiz__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 680px) {
  .nc-quiz__progress-bar { width: 140px; }
}

/* ==========================================================================
   DEMO REQUEST FORM (7 days trial access)
   ========================================================================== */
.nc-demo-form {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(36px, 5vw, 56px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(216, 180, 90, 0.12), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nc-demo-form__copy h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin: 14px 0 14px;
}
.nc-demo-form__copy p {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 18px;
}
.nc-demo-form__copy strong { color: var(--gold-bright); }
.nc-demo-form__perks {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.nc-demo-form__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}
.nc-demo-form__perks svg { width: 16px; height: 16px; color: #5bd089; flex-shrink: 0; }

.nc-demo-form__form {
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(8, 10, 18, 0.65);
}
.nc-demo-form__field {
  display: grid;
  gap: 6px;
}
.nc-demo-form__field label {
  font: 600 0.78rem var(--font-display);
  color: var(--ink);
}
.nc-demo-form__field input,
.nc-demo-form__field textarea {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 11px;
  font: 500 0.94rem var(--font-body);
  outline: none;
  transition: border-color 0.25s;
}
.nc-demo-form__field input::placeholder,
.nc-demo-form__field textarea::placeholder { color: var(--muted-dim); }
.nc-demo-form__field input:focus,
.nc-demo-form__field textarea:focus {
  border-color: rgba(216, 180, 90, 0.6);
  background: rgba(216, 180, 90, 0.04);
}
.nc-demo-form__field textarea { resize: vertical; min-height: 80px; }
.nc-demo-form__submit {
  margin-top: 4px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  border: 0;
  padding: 15px;
  border-radius: 12px;
  font: 700 0.96rem var(--font-display);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.3s var(--ease);
}
.nc-demo-form__submit:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(216, 180, 90, 0.4); }
.nc-demo-form__submit svg { width: 16px; height: 16px; }
.nc-demo-form__note {
  font-size: 0.78rem;
  color: var(--muted-dim);
  text-align: center;
}
.nc-demo-form__note b { color: var(--gold-bright); font-weight: 600; }

/* time-slot picker */
.nc-demo-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.nc-demo-slot {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.nc-demo-slot input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nc-demo-slot span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  font: 500 0.86rem var(--font-display);
  transition: 0.25s var(--ease);
}
.nc-demo-slot span b {
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}
.nc-demo-slot:hover span {
  color: var(--ink);
  border-color: rgba(216, 180, 90, 0.35);
}
.nc-demo-slot input:checked + span {
  color: #1a1407;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(216, 180, 90, 0.25);
}
.nc-demo-slot input:checked + span b {
  color: #1a1407;
}
.nc-demo-slot input:focus-visible + span {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

@media (max-width: 880px) {
  .nc-demo-form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MATERIAL & FUHRPARK Showcase · authentic resource management
   ========================================================================== */
.nc-resources {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

/* Material side */
.nc-material {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nc-material__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.nc-material__title {
  font: 600 0.7rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nc-material__title b {
  display: block;
  font: 600 1.05rem var(--font-display);
  color: var(--ink);
  margin-top: 4px;
  text-transform: none;
  letter-spacing: -0.01em;
}
.nc-material__stats {
  display: flex;
  gap: 16px;
}
.nc-material__stat {
  text-align: right;
}
.nc-material__stat b {
  display: block;
  font: 700 1.35rem var(--font-display);
  color: var(--gold-bright);
  line-height: 1;
}
.nc-material__stat span {
  font: 600 0.58rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-top: 4px;
  display: block;
}

.nc-material__list {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.nc-material__item {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold-bright);
  display: grid;
  gap: 10px;
}
.nc-material__item.is-low { border-left-color: #ff5f5f; }
.nc-material__item.is-okay { border-left-color: #6ad596; }
.nc-material__item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.nc-material__item-name {
  font: 600 0.96rem var(--font-display);
  color: var(--ink);
}
.nc-material__item-status {
  font: 700 0.62rem var(--font-display);
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.nc-material__item-status.is-offen { background: rgba(216, 180, 90, 0.16); color: var(--gold-bright); }
.nc-material__item-status.is-low { background: rgba(255, 95, 95, 0.16); color: #ff8a8a; }
.nc-material__item-status.is-okay { background: rgba(91, 208, 137, 0.16); color: #6ad596; }
.nc-material__item-sub {
  font-size: 0.78rem;
  color: var(--muted-dim);
}
.nc-material__item-balance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nc-material__bal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 0.74rem var(--font-display);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(91, 208, 137, 0.14);
  color: #6ad596;
}
.nc-material__bal.is-mid { background: rgba(216, 180, 90, 0.14); color: var(--gold-bright); }
.nc-material__bal.is-need { background: rgba(255, 95, 95, 0.14); color: #ff8a8a; }
.nc-material__bal.is-low { background: rgba(255, 95, 95, 0.2); color: #ff8a8a; font-weight: 700; }
.nc-material__item-actions {
  display: flex;
  gap: 8px;
}
.nc-material__action {
  font: 600 0.72rem var(--font-display);
  padding: 6px 12px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
}
.nc-material__action.is-warn {
  background: rgba(255, 95, 95, 0.16);
  color: #ff8a8a;
  border: 1px solid rgba(255, 95, 95, 0.4);
}
.nc-material__action.is-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* Fuhrpark side */
.nc-fuhrpark {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nc-fuhrpark__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.nc-fuhrpark__title {
  font: 600 0.7rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nc-fuhrpark__title b {
  display: block;
  font: 600 1.05rem var(--font-display);
  color: var(--ink);
  margin-top: 4px;
  text-transform: none;
}
.nc-fuhrpark__title em {
  display: block;
  font: 500 0.78rem var(--font-display);
  color: var(--muted-dim);
  margin-top: 4px;
  font-style: normal;
}

.nc-fuhrpark__list {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.nc-vehicle {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-soft);
  display: grid;
  gap: 8px;
}
.nc-vehicle__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.nc-vehicle__model {
  font: 600 0.92rem var(--font-display);
  color: var(--ink);
}
.nc-vehicle__plate {
  font: 700 0.7rem var(--font-display);
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(216, 180, 90, 0.12);
  color: var(--gold-bright);
}
.nc-vehicle__km {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.nc-vehicle__km b {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}
.nc-vehicle__bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.nc-vehicle__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6ad596, var(--gold-bright));
  border-radius: 2px;
}
.nc-vehicle__bar.is-high i { background: linear-gradient(90deg, var(--gold-bright), #ff8a8a); }
.nc-vehicle__bar.is-warn i { background: linear-gradient(90deg, #ff8a8a, #ff5f5f); }
.nc-vehicle__driver {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}
.nc-vehicle__driver-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.6rem var(--font-display);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
}
.nc-vehicle__driver-avatar.is-cyan { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #051022; }
.nc-vehicle__driver-name { color: var(--ink); font-weight: 500; font-family: var(--font-display); }
.nc-vehicle__alert {
  font: 600 0.68rem var(--font-display);
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 95, 95, 0.16);
  color: #ff8a8a;
  align-self: flex-start;
}

@media (max-width: 980px) {
  .nc-resources { grid-template-columns: 1fr; }
}

/* ==========================================================================
   STICKY IN-PAGE NAV
   ========================================================================== */
.nc-nav-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(5, 6, 12, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-soft);
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
  pointer-events: none;
}
.nc-nav-strip.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.nc-nav-strip__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px clamp(20px, 4vw, 56px);
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nc-nav-strip__inner::-webkit-scrollbar { display: none; }
.nc-nav-strip__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font: 600 0.88rem var(--font-display);
  color: var(--ink);
}
.nc-nav-strip__brand b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: radial-gradient(circle at 30% 25%, rgba(216, 180, 90, 0.4), rgba(8, 10, 18, 0.9));
  border: 1px solid var(--line);
  color: var(--gold-bright);
  font: 700 0.74rem var(--font-display);
}
.nc-nav-strip__divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  flex-shrink: 0;
}
.nc-nav-strip__items {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.nc-nav-strip__item {
  padding: 7px 12px;
  border-radius: 999px;
  font: 500 0.78rem var(--font-display);
  color: var(--muted);
  white-space: nowrap;
  transition: 0.25s var(--ease);
}
.nc-nav-strip__item:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.nc-nav-strip__item.is-active {
  color: var(--gold-bright);
  background: rgba(216, 180, 90, 0.12);
}
.nc-nav-strip__cta {
  margin-left: auto;
  flex-shrink: 0;
  font: 600 0.78rem var(--font-display);
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  transition: 0.25s;
}
.nc-nav-strip__cta:hover { transform: translateY(-1px); }

@media (max-width: 760px) {
  .nc-nav-strip__inner { padding: 10px 14px; gap: 10px; }
  .nc-nav-strip__brand { font-size: 0.8rem; }
  .nc-nav-strip__brand b { width: 20px; height: 20px; font-size: 0.66rem; }
  .nc-nav-strip__item { font-size: 0.72rem; padding: 6px 10px; }
  .nc-nav-strip__cta { padding: 6px 12px; font-size: 0.7rem; }
}

/* ==========================================================================
   COUNT-UP animation helper (count-up class triggered via JS IO)
   ========================================================================== */
.nc-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SMS-WALL · Authentic feedback cards (matches real Portal SMS-Feedback view)
   ========================================================================== */
.nc-smswall {
  position: relative;
}
.nc-smswall__head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.nc-smswall__stat {
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--gold-bright);
}
.nc-smswall__stat.is-cyan { border-left-color: var(--cyan); }
.nc-smswall__stat.is-green { border-left-color: #5bd089; }
.nc-smswall__stat-label {
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.nc-smswall__stat-value {
  font: 700 1.85rem var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.nc-smswall__stat-value.is-gold { color: var(--gold-bright); }
.nc-smswall__stat-value.is-cyan { color: var(--cyan); }
.nc-smswall__stat-value.is-green { color: #6ad596; }
.nc-smswall__stat-sub {
  font-size: 0.74rem;
  color: var(--muted-dim);
  margin-top: 4px;
}
.nc-smswall__stat-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 0.94rem;
  color: var(--gold-bright);
  margin-top: 4px;
  filter: drop-shadow(0 0 6px rgba(216, 180, 90, 0.5));
}

.nc-smswall__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.nc-smscard {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 3px solid var(--gold-bright);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.nc-smscard.is-cyan { border-left-color: var(--cyan); }
.nc-smscard.is-green { border-left-color: #6ad596; }
.nc-smscard:hover {
  transform: translateY(-3px);
  border-color: rgba(216, 180, 90, 0.4);
}
.nc-smscard.is-just-in {
  border-color: rgba(216, 180, 90, 0.7);
  box-shadow: 0 0 0 1px rgba(216, 180, 90, 0.25), 0 20px 44px rgba(216, 180, 90, 0.18);
  transform: translateY(-2px);
  transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.nc-smscard.is-just-in::after {
  content: "JUST IN";
  position: absolute;
  top: 14px;
  right: 14px;
  font: 700 0.55rem var(--font-display);
  letter-spacing: 0.16em;
  padding: 4px 9px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  animation: nc-justin-pulse 1.6s ease-out infinite;
}
@keyframes nc-justin-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.nc-smscard__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px;
}
.nc-smscard__technician {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nc-smscard__technician-label {
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nc-smscard__technician-name {
  font: 600 1.05rem var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nc-smscard__technician-kw {
  font: 500 0.78rem var(--font-display);
  color: var(--muted-dim);
  margin-top: 2px;
}
.nc-smscard__nps {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.nc-smscard__nps b {
  font: 700 1.8rem var(--font-display);
  color: var(--gold-bright);
  line-height: 1;
}
.nc-smscard__nps span {
  font: 600 0.6rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nc-smscard__quote {
  position: relative;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(216, 180, 90, 0.05);
  border-left: 3px solid var(--gold-bright);
}
.nc-smscard__quote-label {
  display: inline-block;
  font: 700 0.55rem var(--font-display);
  letter-spacing: 0.14em;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border-radius: 4px;
  margin-bottom: 8px;
}
.nc-smscard__quote-label.is-open { background: rgba(91, 208, 137, 0.16); color: #6ad596; }
.nc-smscard__quote-label.is-tech { background: rgba(127, 227, 255, 0.16); color: var(--cyan); }
.nc-smscard__quote p {
  margin: 0;
  font: 500 0.94rem var(--font-display);
  color: var(--ink);
  line-height: 1.45;
}
.nc-smscard__quote + .nc-smscard__quote { margin-top: 0; }

.nc-smscard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.nc-smscard__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.7rem var(--font-display);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(91, 208, 137, 0.14);
  color: #6ad596;
}
.nc-smscard__chip.is-bad { background: rgba(255, 95, 95, 0.14); color: #ff8a8a; }
.nc-smscard__chip.is-stars { background: rgba(216, 180, 90, 0.14); color: var(--gold-bright); }
.nc-smscard__chip.is-stars::after { content: "★"; margin-left: 2px; }

.nc-smswall__foot {
  margin-top: 18px;
  padding: 14px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.86rem;
  color: var(--muted);
}
.nc-smswall__foot svg { width: 18px; height: 18px; color: var(--gold-bright); flex-shrink: 0; }
.nc-smswall__foot b { color: var(--gold-bright); font-family: var(--font-display); }

@media (max-width: 980px) {
  .nc-smswall__head { grid-template-columns: repeat(2, 1fr); }
  .nc-smswall__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HILFE-TICKER · live dispatch widget
   ========================================================================== */
.nc-hilfe {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.nc-hilfe__col {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 360px;
}
.nc-hilfe__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.nc-hilfe__col-title {
  font: 600 0.92rem var(--font-display);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nc-hilfe__col-title i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}
.nc-hilfe__col-title.is-now i { background: #ff5f5f; color: #ff5f5f; animation: nc-pulse 1.4s ease-in-out infinite; }
.nc-hilfe__col-title.is-today i { background: var(--gold-bright); color: var(--gold-bright); }
.nc-hilfe__col-title.is-tomorrow i { background: var(--cyan); color: var(--cyan); }

.nc-hilfe__time {
  font: 600 0.7rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.nc-hilfe__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-soft);
  position: relative;
}
.nc-hilfe__item.is-urgent { border-color: rgba(255, 95, 95, 0.4); background: rgba(255, 95, 95, 0.05); }
.nc-hilfe__item-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.78rem var(--font-display);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
}
.nc-hilfe__item-avatar.is-cyan { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #051022; }
.nc-hilfe__item-avatar.is-orange { background: linear-gradient(135deg, #ffb27a, #d96d18); color: #2a1308; }
.nc-hilfe__item-body { display: grid; gap: 4px; }
.nc-hilfe__item-name {
  font: 600 0.86rem var(--font-display);
  color: var(--ink);
}
.nc-hilfe__item-issue {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}
.nc-hilfe__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.nc-hilfe__item-tag {
  font: 600 0.6rem var(--font-display);
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
.nc-hilfe__item-tag.is-urgent { background: rgba(255, 95, 95, 0.18); color: #ff8a8a; }
.nc-hilfe__item-tag.is-phone { background: rgba(91, 208, 137, 0.14); color: #6ad596; }

.nc-hilfe__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.nc-hilfe__action {
  flex: 1;
  text-align: center;
  font: 600 0.68rem var(--font-display);
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(216, 180, 90, 0.12);
  color: var(--gold-bright);
  border: 1px solid rgba(216, 180, 90, 0.25);
}
.nc-hilfe__action.is-call { background: rgba(91, 208, 137, 0.12); color: #6ad596; border-color: rgba(91, 208, 137, 0.25); }

@media (max-width: 980px) {
  .nc-hilfe { grid-template-columns: 1fr; }
}

/* ==========================================================================
   KALENDER · mini month view inspired by real Portal calendar
   ========================================================================== */
.nc-kalender {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  overflow: hidden;
}
.nc-kalender__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
  gap: 14px;
}
.nc-kalender__title {
  font: 600 1.1rem var(--font-display);
  color: var(--ink);
}
.nc-kalender__title span { color: var(--gold-bright); font-weight: 500; }
.nc-kalender__nav {
  display: flex;
  gap: 6px;
}
.nc-kalender__nav button {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 8px;
  font: 600 0.74rem var(--font-display);
  cursor: pointer;
}
.nc-kalender__nav button.is-active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
  border-color: transparent;
}
.nc-kalender__legend {
  display: flex;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted);
}
.nc-kalender__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nc-kalender__legend i {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.nc-kalender__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line-soft);
  padding: 1px;
}
.nc-kalender__weekday {
  font: 600 0.66rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 6px;
  color: var(--muted-dim);
  background: rgba(8, 10, 18, 0.6);
}
.nc-kalender__cell {
  background: rgba(8, 10, 18, 0.9);
  padding: 10px 8px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nc-kalender__cell.is-other { opacity: 0.4; }
.nc-kalender__cell.is-today { background: linear-gradient(180deg, rgba(216, 180, 90, 0.08), rgba(8, 10, 18, 0.9)); }
.nc-kalender__day {
  font: 600 0.82rem var(--font-display);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.nc-kalender__cell.is-today .nc-kalender__day {
  background: var(--gold-bright);
  color: #1a1407;
  font-weight: 700;
}
.nc-kalender__events { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.nc-kalender__event {
  font: 500 0.62rem var(--font-display);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid;
}
.nc-kalender__event.is-krank { background: rgba(168, 127, 255, 0.12); color: #c4a5ff; border-left-color: #a87fff; }
.nc-kalender__event.is-schulung { background: rgba(216, 180, 90, 0.12); color: var(--gold-bright); border-left-color: var(--gold-bright); }
.nc-kalender__event.is-urlaub { background: rgba(91, 208, 137, 0.12); color: #6ad596; border-left-color: #6ad596; }
.nc-kalender__event.is-dienst { background: rgba(127, 227, 255, 0.12); color: var(--cyan); border-left-color: var(--cyan); }
.nc-kalender__event.is-at { background: rgba(255, 178, 122, 0.14); color: #ffb27a; border-left-color: #ffb27a; }
.nc-kalender__more {
  font: 600 0.6rem var(--font-display);
  color: var(--muted-dim);
  padding-left: 6px;
}

@media (max-width: 880px) {
  .nc-kalender__cell { min-height: 70px; padding: 6px; }
  .nc-kalender__event { display: none; }
  .nc-kalender__cell .nc-kalender__events::after {
    content: "•";
    color: var(--gold-bright);
    font-size: 1.2rem;
  }
  .nc-kalender__cell:not(:has(.nc-kalender__event)) .nc-kalender__events::after { display: none; }
}

/* ==========================================================================
   LEITSTAND · authentic Portal widgets (inspired by real-world Service-Portals)
   - Welcome-Card with today-stats
   - 6-KPI-Tile-Strip with sparkline trends + comparison
   - Events-Timeline with badges
   - Operations Lanes-View (3 columns SOFORT/HEUTE/IM BLICK)
   - Mail-Cockpit with category counters
   ========================================================================== */
.nc-leitstand {
  position: relative;
}

.nc-leitstand__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.nc-leitstand__sublabel {
  font: 600 0.72rem var(--font-display);
  letter-spacing: 0.16em;
  color: var(--muted-dim);
}

.nc-leitstand__strip {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  margin-bottom: 18px;
}

/* Welcome card (left side) */
.nc-welcome {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(216, 180, 90, 0.16), transparent 70%),
    linear-gradient(180deg, #0b0e18, #06080f);
  padding: clamp(22px, 3vw, 36px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  min-height: 340px;
}
.nc-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 90% 110%, rgba(216, 180, 90, 0.22), transparent 50%),
    radial-gradient(circle at 0% 110%, rgba(127, 227, 255, 0.1), transparent 50%);
  pointer-events: none;
}
.nc-welcome > * { position: relative; z-index: 1; }
.nc-welcome__date {
  font: 600 0.72rem var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.nc-welcome__greeting {
  font: 600 clamp(1.7rem, 3vw, 2.4rem) var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}
.nc-welcome__greeting span {
  background: linear-gradient(120deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nc-welcome__sub {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: -10px;
}
.nc-welcome__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nc-welcome__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  font: 500 0.82rem var(--font-display);
  color: var(--muted);
}
.nc-welcome__pill b { color: var(--ink); font-weight: 700; }
.nc-welcome__pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5bd089;
  box-shadow: 0 0 8px #5bd089;
}
.nc-welcome__pill.is-gold i { background: var(--gold-bright); box-shadow: 0 0 8px var(--gold-bright); }
.nc-welcome__pill.is-red i { background: #ff5f5f; box-shadow: 0 0 8px #ff5f5f; }
.nc-welcome__pill.is-cyan i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.nc-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nc-welcome__actions .nc-btn {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.84rem;
}

/* Events Timeline (right side) */
.nc-events {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 340px;
  overflow: hidden;
}
.nc-events__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.nc-events__title {
  font: 600 0.7rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nc-events__title b {
  display: block;
  font: 600 1rem var(--font-display);
  color: var(--ink);
  margin-top: 4px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.nc-events__counter {
  text-align: center;
  border-radius: 12px;
  padding: 8px 14px;
  background: rgba(216, 180, 90, 0.1);
  border: 1px solid rgba(216, 180, 90, 0.25);
}
.nc-events__counter b {
  display: block;
  font: 700 1.4rem var(--font-display);
  color: var(--gold-bright);
  line-height: 1;
}
.nc-events__counter span {
  display: block;
  font: 600 0.6rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-top: 3px;
}
.nc-events__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
}
.nc-events__list::-webkit-scrollbar { width: 5px; }
.nc-events__list::-webkit-scrollbar-thumb { background: rgba(216, 180, 90, 0.2); border-radius: 3px; }
.nc-event {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-radius: 9px;
  transition: background 0.25s;
}
.nc-event:hover { background: rgba(255, 255, 255, 0.025); }
.nc-event__date {
  text-align: center;
  font-family: var(--font-display);
}
.nc-event__date b {
  display: block;
  font: 700 0.95rem var(--font-display);
  color: var(--gold-bright);
  line-height: 1;
}
.nc-event__date span {
  display: block;
  font: 600 0.58rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-top: 3px;
}
.nc-event__body b {
  display: block;
  font: 600 0.86rem var(--font-display);
  color: var(--ink);
}
.nc-event__body span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted-dim);
  margin-top: 1px;
}
.nc-event__badge {
  font: 700 0.6rem var(--font-display);
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.nc-event__badge.is-schulung { background: rgba(127, 227, 255, 0.14); color: var(--cyan); }
.nc-event__badge.is-krank { background: rgba(255, 95, 95, 0.16); color: #ff8a8a; }
.nc-event__badge.is-dienst { background: rgba(91, 208, 137, 0.14); color: #6ad596; }
.nc-event__badge.is-urlaub { background: rgba(216, 180, 90, 0.16); color: var(--gold-bright); }

/* Authentic KPI strip with sparklines + comparison */
.nc-kpistrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.nc-kpitile {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  padding: 16px 14px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nc-kpitile__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.nc-kpitile__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 0.6rem var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nc-kpitile__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5bd089;
  box-shadow: 0 0 6px #5bd089;
}
.nc-kpitile.is-red .nc-kpitile__label::before { background: #ff5f5f; box-shadow: 0 0 6px #ff5f5f; }
.nc-kpitile.is-gold .nc-kpitile__label::before { background: var(--gold-bright); box-shadow: 0 0 6px var(--gold-bright); }
.nc-kpitile__icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  font-size: 0.74rem;
}
.nc-kpitile__icon svg { width: 11px; height: 11px; }
.nc-kpitile__value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font: 700 clamp(1.6rem, 2.6vw, 2.1rem) var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.nc-kpitile__value small { font-size: 0.5em; color: var(--muted); font-weight: 600; }
.nc-kpitile__spark {
  margin: 6px 0 8px;
  width: 100%;
  height: 36px;
  display: block;
}
.nc-kpitile__delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font: 600 0.7rem var(--font-display);
  align-self: flex-start;
}
.nc-kpitile__delta.is-up { background: rgba(91, 208, 137, 0.12); color: #6ad596; }
.nc-kpitile__delta.is-down { background: rgba(255, 95, 95, 0.12); color: #ff8a8a; }
.nc-kpitile__delta.is-flat { background: rgba(255, 255, 255, 0.04); color: var(--muted); }
.nc-kpitile__delta svg { width: 10px; height: 10px; }
.nc-kpitile__compare {
  font-size: 0.72rem;
  color: var(--muted-dim);
  margin-top: 5px;
}
.nc-kpitile__compare b { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.nc-kpitile__sub {
  font: 600 0.58rem var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

/* Operations Lanes (3-column "Sofort handeln / Heute klären / Im Blick") */
.nc-ops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.nc-ops__lane {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  border-left: 3px solid;
}
.nc-ops__lane.is-critical { border-left-color: #ff5f5f; }
.nc-ops__lane.is-warning { border-left-color: var(--gold-bright); }
.nc-ops__lane.is-watch { border-left-color: var(--cyan); }
.nc-ops__lane-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.nc-ops__lane-title {
  font: 600 0.62rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nc-ops__lane-title b {
  display: block;
  font: 600 0.92rem var(--font-display);
  color: var(--ink);
  margin-top: 4px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.nc-ops__lane-count {
  font: 700 0.74rem var(--font-display);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}
.nc-ops__lane.is-critical .nc-ops__lane-count { background: rgba(255, 95, 95, 0.16); color: #ff8a8a; }
.nc-ops__lane.is-warning .nc-ops__lane-count { background: rgba(216, 180, 90, 0.16); color: var(--gold-bright); }
.nc-ops__lane.is-watch .nc-ops__lane-count { background: rgba(127, 227, 255, 0.14); color: var(--cyan); }

.nc-ops__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-soft);
  font-size: 0.78rem;
  transition: background 0.25s, transform 0.25s;
}
.nc-ops__item:hover { background: rgba(255, 255, 255, 0.04); transform: translateX(2px); }
.nc-ops__item-type {
  font: 700 0.55rem var(--font-display);
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.nc-ops__item-type.is-material { background: rgba(127, 227, 255, 0.14); color: var(--cyan); }
.nc-ops__item-type.is-urlaub { background: rgba(216, 180, 90, 0.16); color: var(--gold-bright); }
.nc-ops__item-type.is-mangel { background: rgba(255, 95, 95, 0.16); color: #ff8a8a; }
.nc-ops__item-type.is-krank { background: rgba(255, 138, 138, 0.14); color: #ff8a8a; }
.nc-ops__item-type.is-fahrzeug { background: rgba(127, 227, 255, 0.1); color: var(--cyan); }
.nc-ops__item-type.is-push { background: rgba(91, 208, 137, 0.12); color: #6ad596; }
.nc-ops__item-text {
  color: var(--ink);
  font-weight: 500;
  font-family: var(--font-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-ops__item-owner {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font: 700 0.62rem var(--font-display);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1407;
}
.nc-ops__item-owner.is-cyan { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #051022; }
.nc-ops__item-owner.is-orange { background: linear-gradient(135deg, #ffb27a, #d96d18); color: #2a1308; }
.nc-ops__item-owner.is-green { background: linear-gradient(135deg, #88e6b2, #2eaa6e); color: #052517; }

/* Mail Cockpit */
.nc-mailcock {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0e18, #06080f);
  padding: 22px;
  display: grid;
  gap: 14px;
}
.nc-mailcock__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.nc-mailcock__title {
  font: 600 0.7rem var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.nc-mailcock__title b {
  display: block;
  font: 600 1.05rem var(--font-display);
  color: var(--ink);
  margin-top: 4px;
  text-transform: none;
  letter-spacing: -0.01em;
}
.nc-mailcock__title p {
  font-size: 0.78rem;
  color: var(--muted-dim);
  margin: 4px 0 0;
  font-weight: 400;
}
.nc-mailcock__counters {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.nc-mailcock__counter {
  position: relative;
  padding: 14px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-soft);
  text-align: center;
  border-top: 3px solid;
}
.nc-mailcock__counter.is-critical { border-top-color: #ff5f5f; }
.nc-mailcock__counter.is-overdue { border-top-color: #ff8a8a; }
.nc-mailcock__counter.is-today { border-top-color: var(--gold-bright); }
.nc-mailcock__counter.is-week { border-top-color: var(--cyan); }
.nc-mailcock__counter.is-pending { border-top-color: #ffb27a; }
.nc-mailcock__counter.is-new { border-top-color: #6ad596; }
.nc-mailcock__counter b {
  display: block;
  font: 700 1.55rem var(--font-display);
  color: var(--ink);
  line-height: 1;
}
.nc-mailcock__counter span {
  display: block;
  font: 600 0.55rem var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
}

.nc-mailcock__threads { display: grid; gap: 8px; margin-top: 4px; }
.nc-mailcock__thread {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-soft);
}
.nc-mailcock__thread-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 95, 95, 0.16);
  color: #ff8a8a;
  font: 700 0.78rem var(--font-display);
}
.nc-mailcock__thread-icon.is-yellow { background: rgba(216, 180, 90, 0.18); color: var(--gold-bright); }
.nc-mailcock__thread-icon.is-blue { background: rgba(127, 227, 255, 0.16); color: var(--cyan); }
.nc-mailcock__thread-body b {
  display: block;
  font: 600 0.88rem var(--font-display);
  color: var(--ink);
}
.nc-mailcock__thread-body span {
  display: block;
  font-size: 0.74rem;
  color: var(--muted-dim);
  margin-top: 2px;
}
.nc-mailcock__thread-tags {
  display: flex;
  gap: 5px;
}
.nc-mailcock__thread-tag {
  font: 700 0.55rem var(--font-display);
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.nc-mailcock__thread-tag.is-critical { background: rgba(255, 95, 95, 0.16); color: #ff8a8a; }
.nc-mailcock__thread-tag.is-hoch { background: rgba(216, 180, 90, 0.16); color: var(--gold-bright); }
.nc-mailcock__thread-tag.is-cat { background: rgba(255, 255, 255, 0.04); color: var(--muted); }

@media (max-width: 980px) {
  .nc-leitstand__strip { grid-template-columns: 1fr; }
  .nc-kpistrip { grid-template-columns: repeat(2, 1fr); }
  .nc-kpistrip .nc-kpitile:nth-child(n+5) { display: none; }
  .nc-ops { grid-template-columns: 1fr; }
  .nc-mailcock__counters { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .nc-kpistrip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .nc-mailcock__counters { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   MOBILE POLISH — comprehensive touch + small viewport fixes (≤ 760 px)
   ========================================================================== */
@media (max-width: 760px) {

  /* ===== HEADER · sticky pill stays compact, hide secondary CTA ===== */
  .nc-header {
    padding: 8px 8px 8px 14px;
    gap: 10px;
  }
  .nc-brand__mark { width: 26px; height: 26px; font-size: 0.85rem; }
  .nc-brand__name { font-size: 0.85rem; }
  .nc-brand__name span { display: none; }
  .nc-header__cta .nc-btn--ghost { display: none; }
  .nc-header__cta .nc-btn--sm { padding: 0 14px; min-height: 38px; font-size: 0.8rem; }

  /* ===== HERO ===== */
  .nc-hero2 { min-height: auto; padding: 24px 0 36px; }
  .nc-hero2__eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    padding: 7px 12px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 92vw;
  }
  .nc-hero2__eyebrow em, .nc-hero2__eyebrow span:last-child { font-size: 0.55rem; }
  .nc-hero2__stage { width: min(380px, 88%); border-radius: 18px; }
  .nc-hero2__stage-bar { top: 12px; gap: 7px; }
  .nc-hero2__chip { font-size: 0.55rem; padding: 5px 9px; gap: 5px; }
  .nc-hero2__corner { width: 22px; height: 22px; border-width: 1.5px; }
  .nc-hero2__corner--tl, .nc-hero2__corner--tr { top: 10px; }
  .nc-hero2__corner--bl, .nc-hero2__corner--br { bottom: 10px; }
  .nc-hero2__corner--tl, .nc-hero2__corner--bl { left: 10px; }
  .nc-hero2__corner--tr, .nc-hero2__corner--br { right: 10px; }
  .nc-hero2__head { font-size: clamp(1.85rem, 8vw, 2.4rem); max-width: 18ch; line-height: 1.1; }
  .nc-hero2__lead { font-size: 0.95rem; line-height: 1.55; max-width: 92%; }
  .nc-hero2__cta { width: 100%; flex-direction: column; gap: 10px; }
  .nc-hero2__cta .nc-btn { width: 100%; min-height: 52px; }
  .nc-hero2__trust { padding: 14px 18px; gap: 14px; }
  .nc-hero2__trust-divider { width: 70%; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(216, 180, 90, 0.22), transparent); }
  .nc-hero2__trust-item { width: 100%; }
  .nc-hero2__trust-item b { font-size: 0.82rem; }
  .nc-hero2__trust-item span { font-size: 0.7rem; }
  .nc-hero2__scroll { font-size: 0.55rem; }
  .nc-hero2__beam--gold, .nc-hero2__beam--cyan { width: 280px; height: 280px; }

  /* ===== FILMS · don't take full 100vh on mobile (too long to scroll) ===== */
  .nc-films { padding-top: 40px; }
  .nc-films__intro { margin-bottom: 18px; padding-inline: 22px; }
  .nc-films__intro h2 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); line-height: 1.04; letter-spacing: -0.038em; }
  .nc-films__intro p { font-size: 0.94rem; }
  .nc-film { padding-inline: 18px; }
  .nc-film__stage {
    height: auto !important;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    margin: 0 16px;
    padding: clamp(18px, 5vw, 28px);
  }
  .nc-film__stage::before, .nc-film__stage::after { display: none; }
  .nc-film__hint { display: none !important; }
  .nc-device--phone { width: clamp(150px, 38vw, 220px); }
  .nc-device--server { width: clamp(220px, 60vw, 320px); }
  .nc-device--laptop { width: clamp(260px, 80vw, 420px); }

  /* ===== SECTION HEADS ===== */
  .nc-section { padding-block: 72px; }
  .nc-section-head { margin-bottom: 36px; }
  .nc-section-head h2 { font-size: clamp(1.75rem, 6.4vw, 2.25rem); line-height: 1.04; letter-spacing: -0.038em; }
  .nc-section-head p { font-size: 0.96rem; line-height: 1.6; }

  /* ===== LIFECYCLE · horizontal scroll for tabs ===== */
  .nc-lifecycle { padding: 22px 14px; border-radius: 18px; }
  .nc-lifecycle__rail { display: none; }
  .nc-lifecycle__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 16px -6px 22px;
    padding: 4px 6px;
    scroll-snap-type: x mandatory;
  }
  .nc-lifecycle__tabs::-webkit-scrollbar { display: none; }
  .nc-lifecycle__tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    font-size: 0.8rem;
    padding: 9px 14px;
  }
  .nc-lifecycle__stage { gap: 22px; }
  .nc-lifecycle__visual { min-height: 280px; padding: 18px; }
  .nc-lifecycle__copy h3 { font-size: 1.25rem; line-height: 1.3; }
  .nc-lifecycle__copy p { font-size: 0.92rem; }
  .nc-lifecycle__meta { gap: 6px 12px; font-size: 0.78rem; }
  .nc-lc-phone { width: min(220px, 80%); }
  .nc-lc-phone__screen { padding: 12px 10px; gap: 9px; }

  /* ===== FLOW STEPS ===== */
  .nc-flow { grid-template-columns: 1fr; row-gap: 26px; }
  .nc-flow::before { display: none; }
  .nc-flow-step__num { width: 54px; height: 54px; margin-bottom: 14px; }

  /* ===== MODULES ===== */
  .nc-modules { grid-template-columns: 1fr; gap: 14px; }
  .nc-card { padding: 22px 20px; }
  .nc-card h3 { font-size: 1.1rem; }
  .nc-card p { font-size: 0.9rem; }

  /* ===== PORTAL DEEP DIVE ===== */
  .nc-portal-deep__head { gap: 16px; }
  .nc-portal-deep__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .nc-portal-deep__tabs::-webkit-scrollbar { display: none; }
  .nc-pd-tab { flex-shrink: 0; font-size: 0.74rem; padding: 9px 13px; }
  .nc-portal-window__body { grid-template-columns: 1fr; min-height: auto; }
  .nc-pd-main { padding: 18px 16px; }
  .nc-pd-main__head { gap: 12px; flex-direction: column; align-items: flex-start; }
  .nc-pd-main__head h4 { font-size: 1.1rem; }
  .nc-pd-main__filters { flex-wrap: wrap; }
  .nc-pd-kpis { grid-template-columns: 1fr 1fr; gap: 9px; }
  .nc-pd-kpi { padding: 13px; }
  .nc-pd-kpi__val { font-size: 1.5rem; }
  .nc-pd-kpi__spark { width: 60px; height: 24px; bottom: 10px; right: 10px; }
  .nc-pd-priorities { padding: 12px; }
  .nc-pd-prio { grid-template-columns: 10px auto 1fr; gap: 9px; padding: 9px; font-size: 0.76rem; }
  .nc-pd-prio__action { display: none; }
  .nc-pd-chart__svg { height: 130px; }
  .nc-pd-board { grid-template-columns: 1fr; }
  .nc-pd-feedback { grid-template-columns: 1fr; }
  .nc-pd-material { grid-template-columns: 1fr; }

  /* ===== APP DEEP DIVE ===== */
  .nc-app-deep { grid-template-columns: 1fr; gap: 30px; }
  .nc-app-stage { min-height: auto; padding: 14px 0; }
  .nc-app-phone { width: min(260px, 78%); }
  .nc-app-deep__tabs { margin-top: 18px; }
  .nc-app-tab { padding: 12px 14px; grid-template-columns: 32px 1fr 18px; gap: 10px; }
  .nc-app-tab__icon { width: 32px; height: 32px; }
  .nc-app-tab__body b { font-size: 0.86rem; }
  .nc-app-tab__body span { font-size: 0.72rem; }

  /* ===== VORHER/NACHHER ===== */
  .nc-compare { padding: 22px 16px; border-radius: 18px; }
  .nc-compare__roles {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 14px -6px 22px;
    padding: 4px 6px;
  }
  .nc-compare__roles::-webkit-scrollbar { display: none; }
  .nc-compare__role { flex-shrink: 0; padding: 11px 16px; font-size: 0.8rem; }
  .nc-compare__pair { grid-template-columns: 1fr; min-height: auto; gap: 14px; }
  .nc-compare__pair::after { display: none; }
  .nc-compare__side { padding: 18px 18px; gap: 12px; }
  .nc-compare__head { font-size: 1.05rem; line-height: 1.3; }
  .nc-compare__list li { font-size: 0.88rem; }
  .nc-compare__metric { padding: 11px 13px; gap: 10px; }
  .nc-compare__metric b { font-size: 1.2rem; }

  /* ===== ZEITERSPARNIS-RECHNER ===== */
  .nc-saver { grid-template-columns: 1fr; padding: 24px 18px; gap: 22px; }
  .nc-saver__copy h2 { font-size: 1.45rem; }
  .nc-saver__copy p { font-size: 0.92rem; }
  .nc-saver__field-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nc-saver__label { font-size: 0.8rem; }
  .nc-saver__value { font-size: 1rem; }
  .nc-saver__hint { font-size: 0.7rem; }
  .nc-saver__result { padding: 24px 20px; }
  .nc-saver__big { font-size: 2.6rem; }
  .nc-saver__big-sub { font-size: 0.84rem; }
  .nc-saver__row { font-size: 0.82rem; }

  /* ===== ERSTKUNDEN ===== */
  .nc-firstmover { grid-template-columns: 1fr; gap: 14px; }
  .nc-firstmover__card { padding: 24px 20px; }
  .nc-firstmover__card h3 { font-size: 1.4rem; line-height: 1.25; }
  .nc-firstmover__list li { font-size: 0.9rem; gap: 11px; }
  .nc-firstmover__actions { flex-direction: column; align-items: stretch; }
  .nc-firstmover__actions .nc-btn { width: 100%; }
  .nc-firstmover__limit { font-size: 0.8rem; justify-content: center; }
  .nc-firstmover__placeholder { padding: 24px 20px; }

  /* ===== TRIAL · drag board horizontal scroll ===== */
  .nc-try__head { flex-direction: column; gap: 10px; align-items: flex-start; padding: 14px 16px; }
  .nc-try__title { flex-wrap: wrap; font-size: 0.78rem; }
  .nc-try__title em { margin-left: 0; font-size: 0.74rem; }
  .nc-try__board {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    min-height: auto;
  }
  .nc-try__col { min-height: auto; }
  .nc-try__col-body { min-height: 100px; }
  .nc-try__foot { padding: 14px 18px; font-size: 0.8rem; gap: 10px; }

  /* ===== QUIZ ===== */
  .nc-quiz__head {
    padding: 22px 22px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .nc-quiz__progress-bar { width: 100%; }
  .nc-quiz__progress { width: 100%; }
  .nc-quiz__step { padding: 24px 22px 28px; gap: 18px; }
  .nc-quiz__q { font-size: 1.1rem; line-height: 1.35; }
  .nc-quiz__answer { padding: 14px 16px; grid-template-columns: 26px 1fr 18px; gap: 10px; font-size: 0.92rem; }
  .nc-quiz__answer-letter { width: 26px; height: 26px; font-size: 0.78rem; }
  .nc-quiz__result { padding: 28px 22px; gap: 18px; }
  .nc-quiz__result-meter { width: 140px; height: 140px; }
  .nc-quiz__result-meter-center b { font-size: 1.9rem; }
  .nc-quiz__result h3 { font-size: 1.25rem; }
  .nc-quiz__result p { font-size: 0.92rem; }
  .nc-quiz__result-actions { flex-direction: column; width: 100%; }
  .nc-quiz__result-actions .nc-btn { width: 100%; }

  /* ===== VERBINDET SICH (Bridge) ===== */
  .nc-api { grid-template-columns: 1fr; gap: 28px; }
  .nc-api__copy h2 { font-size: 1.55rem; line-height: 1.25; }
  .nc-api-feat { grid-template-columns: 34px 1fr; gap: 12px; }
  .nc-api-feat__icon { width: 34px; height: 34px; }
  .nc-api-feat b { font-size: 0.95rem; }
  .nc-api-feat span { font-size: 0.86rem; }
  .nc-bridge { padding: 18px 16px; }
  .nc-bridge__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nc-bridge__flow { grid-template-columns: 1fr; gap: 12px; }
  .nc-bridge__arrow {
    width: 100%;
    height: 28px;
    transform: rotate(0);
  }
  .nc-bridge__arrow-line {
    inset: auto 50% 0 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(216, 180, 90, 0.1), rgba(216, 180, 90, 0.55), rgba(216, 180, 90, 0.1));
  }
  .nc-bridge__arrow-dot {
    left: 50% !important;
    margin-left: -3.5px;
    top: 0;
    animation: nc-bridge-fly-v 2.4s linear infinite;
  }
  @keyframes nc-bridge-fly-v {
    0%   { top: 0%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
  .nc-bridge__arrow-label { top: -2px; left: calc(50% + 12px); transform: none; }
  .nc-bridge__hub { width: 100px; height: 100px; }
  .nc-bridge__hub-core { width: 56px; height: 56px; }
  .nc-bridge__hub-core b { font-size: 1.15rem; }
  .nc-bridge__outs { grid-template-columns: 1fr; gap: 10px; }
  .nc-bridge__foot { padding: 11px 14px; font-size: 0.82rem; }
  .nc-flow-diagram { padding: 24px 14px; margin-top: 36px; }
  .nc-flow-diagram__svg { height: 420px; }

  /* ===== SICHERHEIT ===== */
  .nc-sec-grid { grid-template-columns: 1fr; gap: 14px; }
  .nc-sec-card { padding: 24px 22px; }
  .nc-sec-card h3 { font-size: 1.15rem; line-height: 1.3; }
  .nc-sec-card__seal { width: 52px; height: 52px; margin-bottom: 16px; }
  .nc-sec-strip {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 14px;
    padding: 22px 20px;
  }
  .nc-sec-strip__seal { gap: 12px; }
  .nc-sec-strip__copy { font-size: 0.88rem; }

  /* ===== PAKET ===== */
  .nc-package { grid-template-columns: 1fr; gap: 24px; }
  .nc-package__grid { grid-template-columns: 1fr; gap: 10px; }
  .nc-package-item { padding: 13px 14px; grid-template-columns: 22px 1fr; gap: 11px; }
  .nc-package-item b { font-size: 0.92rem; }
  .nc-package-item span { font-size: 0.82rem; }
  .nc-package__price { padding: 18px; }
  .nc-package__price h3 { font-size: 1rem; }

  /* ===== FAQ ===== */
  .nc-faq { grid-template-columns: 1fr; gap: 22px; }
  .nc-faq__copy h2 { font-size: 1.45rem; }
  .nc-faq-q { padding: 16px 18px; font-size: 0.94rem; gap: 12px; }
  .nc-faq-q__icon { width: 26px; height: 26px; }
  .nc-faq-item[open] .nc-faq-a { padding: 0 18px 18px; max-height: 360px; }
  .nc-faq-a { font-size: 0.9rem; }

  /* ===== FOUNDER ===== */
  .nc-founder2 { grid-template-columns: 1fr; gap: 28px; }
  .nc-founder2__portrait { max-width: 100%; }
  .nc-founder2__overlay-name { font-size: 1.15rem; }
  .nc-founder2__overlay-role { font-size: 0.78rem; }
  .nc-founder2__overlay-badge { font-size: 0.55rem; padding: 4px 8px; }
  .nc-founder2__copy h2 { font-size: 1.55rem; line-height: 1.25; }
  .nc-founder2__lead { font-size: 0.95rem; }
  .nc-f-reason { padding: 16px; grid-template-columns: 38px 1fr; gap: 13px; }
  .nc-f-reason__num { width: 38px; height: 38px; font-size: 0.9rem; }
  .nc-f-reason b { font-size: 0.96rem; }
  .nc-f-reason span { font-size: 0.86rem; }
  .nc-founder2__quote { padding: 18px 22px; font-size: 0.95rem; }
  .nc-founder2__quote::before { font-size: 3rem; top: -4px; left: 4px; }
  .nc-founder2__quote p, .nc-founder2__quote em { padding-left: 22px; }
  .nc-founder2__contact { grid-template-columns: 40px 1fr 20px; gap: 12px; padding: 14px 16px; }
  .nc-founder2__contact-avatar { width: 40px; height: 40px; font-size: 0.82rem; }
  .nc-founder2__contact-body b { font-size: 0.85rem; }
  .nc-founder2__contact-body span { font-size: 0.72rem; }

  /* ===== DEMO FORM ===== */
  .nc-demo-form { grid-template-columns: 1fr; gap: 24px; padding: 26px 20px; }
  .nc-demo-form__copy h2 { font-size: 1.45rem; line-height: 1.25; }
  .nc-demo-form__copy p { font-size: 0.92rem; }
  .nc-demo-form__perks li { font-size: 0.88rem; }
  .nc-demo-form__form { padding: 20px 18px; gap: 12px; }
  .nc-demo-form__field input, .nc-demo-form__field textarea { font-size: 0.92rem; }
  .nc-demo-slots { grid-template-columns: 1fr 1fr; gap: 7px; }
  .nc-demo-slot span { padding: 9px 11px; font-size: 0.8rem; gap: 6px; }
  .nc-demo-form__submit { padding: 13px; font-size: 0.9rem; }

  /* ===== CTA ===== */
  .nc-cta { padding: 38px 22px; }
  .nc-cta h2 { font-size: 1.55rem; line-height: 1.25; }
  .nc-cta p { font-size: 0.92rem; }
  .nc-cta__actions { flex-direction: column; }
  .nc-cta__actions .nc-btn { width: 100%; }

  /* ===== FOOTER ===== */
  .nc-footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .nc-footer__col { padding-top: 14px; border-top: 1px solid var(--line-soft); }
  .nc-footer__col:first-of-type { border-top: 0; padding-top: 0; }
  .nc-footer__base { flex-direction: column; gap: 6px; font-size: 0.78rem; text-align: center; }

  /* ===== SIDE MENU ===== */
  .nc-menu { width: 88vw; padding: 22px; }
  .nc-menu nav a { font-size: 0.98rem; padding: 12px 14px; }

  /* ===== INDEX · SPLIT CINEMA stack vertically ===== */
  .nch-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }
  .nch-side { padding: 38px 22px; }
  .nch-side__corner { width: 22px; height: 22px; border-width: 1.5px; }
  .nch-side__corner--tl, .nch-side__corner--tr { top: 14px; }
  .nch-side__corner--bl, .nch-side__corner--br { bottom: 14px; }
  .nch-side__corner--tl, .nch-side__corner--bl { left: 14px; }
  .nch-side__corner--tr, .nch-side__corner--br { right: 14px; }
  .nch-side__chip { font-size: 0.58rem; padding: 6px 12px; }
  .nch-side__logo { width: 120px; height: 120px; padding: 16px; border-radius: 18px; }
  .nch-side__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .nch-side__sub { font-size: 0.65rem; }
  .nch-side__lead { font-size: 0.92rem; max-width: 95%; }
  .nch-side__tags span { font-size: 0.66rem; padding: 5px 10px; }
  .nch-side__cta { padding: 12px 22px; font-size: 0.88rem; width: 100%; justify-content: center; }
  .nch-side__hint { font-size: 0.55rem; bottom: 18px; }
  .nch-divider {
    height: 70px;
    background: linear-gradient(90deg, transparent 0%, rgba(216, 180, 90, 0.6) 25%, rgba(216, 180, 90, 0.6) 75%, transparent 100%);
    background-size: 100% 1px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .nch-divider__core { width: 50px; height: 50px; }
  .nch-divider__icon { width: 20px; height: 20px; }
  .nch-divider__label {
    top: calc(50% + 38px);
    font-size: 0.54rem;
    letter-spacing: 0.2em;
  }
  .nch-divider__label b { letter-spacing: 0.18em; }

  /* INDEX manifest · values · comparison-table · founder-strip */
  .nch-manifest { padding: 50px 18px 30px; }
  .nch-manifest__text { font-size: 1.2rem; line-height: 1.4; }
  .nch-values { grid-template-columns: 1fr; gap: 12px; }
  .nch-value { padding: 22px 20px; }
  .nch-value h3 { font-size: 1.1rem; }
  .nch-value p { font-size: 0.92rem; }
  .nch-compare-table__head, .nch-compare-table__row {
    grid-template-columns: 1fr;
  }
  .nch-compare-table__head { display: none; }
  .nch-compare-table__row { padding: 0; }
  .nch-compare-table__row > div { padding: 12px 18px; border: 0 !important; }
  .nch-compare-table__row > div:nth-child(1) {
    background: rgba(255, 255, 255, 0.025);
    border-top: 1px solid var(--line-soft) !important;
    font-weight: 600;
  }
  .nch-compare-table__row > div:nth-child(2)::before {
    content: 'Northlightframe: ';
    color: #f5cb88;
    font-weight: 600;
    margin-right: 6px;
    font-size: 0.78rem;
  }
  .nch-compare-table__row > div:nth-child(3)::before {
    content: 'Northcore: ';
    color: var(--gold-bright);
    font-weight: 600;
    margin-right: 6px;
    font-size: 0.78rem;
  }
  .nch-founder-strip {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 18px;
    padding: 24px 22px;
  }
  .nch-founder-strip__portrait {
    width: 160px;
    height: 200px;
    margin: 0 auto;
  }
  .nch-founder-strip__copy h3 { font-size: 1.3rem; }
  .nch-founder-strip__copy p { font-size: 0.92rem; }

  /* Demo-Form fieldset stack */
  .nc-demo-form__field label { font-size: 0.82rem; }
}

/* ==========================================================================
   EXTRA SMALL · ≤ 380 px (older / smaller phones)
   ========================================================================== */
@media (max-width: 380px) {
  :root { --container: calc(100% - 24px); }
  .nc-header { padding: 7px 7px 7px 12px; }
  .nc-header__cta .nc-btn--gold { font-size: 0.74rem; padding: 0 12px; }
  .nc-hero2__head { font-size: clamp(1.65rem, 8vw, 2.1rem); }
  .nc-hero2__lead { font-size: 0.9rem; }
  .nc-section { padding-block: 46px; }
  .nc-section-head h2 { font-size: 1.5rem; }
  .nc-modules .nc-card,
  .nc-firstmover__card { padding: 20px 16px; }
  .nc-saver__result, .nc-quiz__step, .nc-quiz__result { padding-inline: 18px; }
  .nc-demo-slots { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECTION DIVIDERS (subtle compass marks between sections)
   ========================================================================== */
.nc-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 0;
  opacity: 0.35;
}
.nc-divider i {
  display: block;
  width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.nc-divider svg {
  width: 12px; height: 12px;
  color: var(--gold);
}

/* ==========================================================================
   APPLE-LEVEL SYSTEM POLISH (selection, focus, scrollbar, smoothing)
   ========================================================================== */
::selection {
  background: rgba(216, 180, 90, 0.32);
  color: var(--ink);
}
::-moz-selection {
  background: rgba(216, 180, 90, 0.32);
  color: var(--ink);
}

/* refined custom scrollbar — only visible on hover, mac-like */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: rgba(216, 180, 90, 0.28) transparent; }
}
::-webkit-scrollbar {
  width: 10px; height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(216, 180, 90, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(216, 180, 90, 0.42);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* universal focus-visible — restrained gold, generous offset */
:focus-visible {
  outline: 2px solid rgba(216, 180, 90, 0.72);
  outline-offset: 3px;
  border-radius: 6px;
}

/* details/summary base — used by FAQ accordions */
details summary { cursor: pointer; transition: background 0.4s var(--ease); }
details summary::-webkit-details-marker { display: none; }
details[open] summary { color: var(--ink); }

/* gentle text rendering refinement */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}



/* ==========================================================================
   WAS NORTHCORE KANN · Iso-Architektur + Capability-Grid
   ========================================================================== */
.nc-arch{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(24px,4vw,56px);
  align-items:center; margin-top:clamp(20px,4vw,44px);
}
.nc-arch__scene{ position:relative; max-width:480px; margin-inline:auto; width:100%; }
.nc-arch__scene svg{ filter:drop-shadow(0 24px 60px rgba(0,0,0,.55)); }
.nc-arch__layers{ display:grid; gap:14px; }
.nc-arch__layer{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding:18px 20px; border-radius:var(--r-md);
  border:1px solid var(--line); background:linear-gradient(180deg,var(--glass-2),var(--glass));
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.nc-arch__layer:hover{ border-color:rgba(216,180,90,.4); transform:translateX(3px); }
.nc-arch__dot{
  width:13px; height:13px; border-radius:50%; margin-top:5px;
  background:var(--c); box-shadow:0 0 14px var(--c); flex-shrink:0;
}
.nc-arch__tag{ font:700 .64rem var(--font-display); letter-spacing:.2em; text-transform:uppercase; }
.nc-arch__layer h3{ font-size:1.12rem; margin:6px 0 5px; letter-spacing:-.01em; }
.nc-arch__layer p{ color:var(--muted); font-size:.92rem; line-height:1.55; }

.nc-caps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-top:clamp(36px,5vw,64px);
}
.nc-cap{
  position:relative; padding:20px 18px; border-radius:var(--r-md);
  border:1px solid var(--line-soft); background:var(--glass);
  overflow:hidden; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.nc-cap::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  background:radial-gradient(340px circle at 50% 0%, rgba(216,180,90,.1), transparent 60%);
  transition:opacity .4s;
}
.nc-cap:hover{ transform:translateY(-4px); border-color:rgba(216,180,90,.4); box-shadow:var(--shadow-soft); }
.nc-cap:hover::before{ opacity:1; }
.nc-cap__ic{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); color:var(--gold-bright);
  background:linear-gradient(150deg,rgba(216,180,90,.16),rgba(79,141,255,.07));
  margin-bottom:14px; position:relative;
}
.nc-cap__ic svg{ width:21px; height:21px; }
.nc-cap h4{ font-size:1rem; margin-bottom:6px; position:relative; letter-spacing:-.01em; }
.nc-cap p{ color:var(--muted); font-size:.86rem; line-height:1.5; position:relative; }

@media (max-width:1080px){ .nc-caps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .nc-arch{ grid-template-columns:1fr; gap:30px; }
  .nc-arch__scene{ max-width:420px; }
}
@media (max-width:560px){ .nc-caps{ grid-template-columns:1fr; } }

/* ==========================================================================
   STUFEN-SPINE · fließender Übergang durch die 3 Ebenen
   ========================================================================== */
.nc-arch__layers{ position:relative; }
.nc-arch__layers::before{
  content:""; position:absolute; left:34px; top:26px; bottom:26px; width:2px;
  background:linear-gradient(180deg,#7fe3ff 0%, #d8b45a 50%, #f6e2a6 100%);
  opacity:.30; border-radius:2px; z-index:0;
}
.nc-arch__layers::after{           /* fließender Highlight, wandert runter */
  content:""; position:absolute; left:32.5px; top:26px; width:5px; height:46px;
  border-radius:6px; z-index:1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(246,226,166,.95), rgba(246,226,166,0) 70%);
  animation:nc-spine 3.4s var(--ease) infinite;
}
@keyframes nc-spine{
  0%   { transform:translateY(0);    opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { transform:translateY(calc(100% + 60px)); opacity:0; }
}
.nc-arch__layer{ position:relative; z-index:2; }   /* Cards über dem Spine */
@media (prefers-reduced-motion:reduce){ .nc-arch__layers::after{ animation:none; opacity:0; } }

/* ==========================================================================
   MODUL-GRUPPEN · echte Portal-Struktur
   ========================================================================== */
.nc-modgroups{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:clamp(40px,5vw,68px);
}
.nc-mg{
  position:relative; padding:22px 22px 20px; border-radius:var(--r-md);
  border:1px solid var(--line-soft); background:var(--glass);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.nc-mg:hover{ transform:translateY(-4px); border-color:rgba(216,180,90,.4); box-shadow:var(--shadow-soft); }
.nc-mg__head{ display:flex; align-items:flex-start; gap:13px; margin-bottom:15px; }
.nc-mg__ic{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px; flex-shrink:0;
  border:1px solid var(--line); color:var(--gold-bright);
  background:linear-gradient(150deg,rgba(216,180,90,.16),rgba(79,141,255,.07));
}
.nc-mg__ic svg{ width:20px; height:20px; }
.nc-mg__head h4{ font-size:1.04rem; letter-spacing:-.01em; margin:2px 0 3px; }
.nc-mg__head span{ display:block; font-size:.78rem; color:var(--muted-dim); line-height:1.35; }
.nc-mg__list{ display:flex; flex-wrap:wrap; gap:7px; }
.nc-mg__list li{
  font:500 .78rem var(--font-body); color:var(--muted);
  padding:5px 11px; border-radius:999px;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.025);
  white-space:nowrap; transition:color .3s, border-color .3s;
}
.nc-mg:hover .nc-mg__list li{ color:var(--ink); }

/* Glasfaser-Feature-Card */
.nc-mg--feature{
  border-color:rgba(216,180,90,.45);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(216,180,90,.12), transparent 60%),
    var(--glass);
  box-shadow:0 0 0 1px rgba(216,180,90,.12), var(--glow-gold);
}
.nc-mg--feature .nc-mg__list li{ border-color:rgba(216,180,90,.25); }
.nc-mg__badge{
  position:absolute; top:-10px; right:16px;
  font:700 .62rem var(--font-display); letter-spacing:.12em; text-transform:uppercase;
  color:#1a1407; padding:5px 11px; border-radius:999px;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  box-shadow:0 6px 18px rgba(216,180,90,.4);
}
.nc-modgroups__foot{
  text-align:center; margin-top:26px; color:var(--muted);
  font-size:.98rem; line-height:1.6; max-width:60ch; margin-inline:auto;
}
.nc-modgroups__foot b{ color:var(--gold-bright); }

@media (max-width:1080px){ .nc-modgroups{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .nc-modgroups{ grid-template-columns:1fr; } .nc-arch__layers::before,.nc-arch__layers::after{ display:none; } }

/* ==========================================================================
   DER FADEN · vertikaler Glasfaser-Strang (Story-Fortschritt) + Interludes
   ========================================================================== */
.nc-fiber{
  position:fixed; left:18px; top:0; bottom:0; width:3px; z-index:55; pointer-events:none;
}
.nc-fiber__track{ position:absolute; inset:0; border-radius:3px;
  background:rgba(216,180,90,.10); }
.nc-fiber__fill{ position:absolute; left:0; top:0; width:100%; height:var(--fp,0%);
  border-radius:3px; background:linear-gradient(180deg,#7fe3ff 0%, #d8b45a 55%, #f6e2a6 100%);
  box-shadow:0 0 12px rgba(216,180,90,.55); transition:height .12s linear; }
.nc-fiber__pulse{ position:absolute; left:50%; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; background:#f6e2a6; box-shadow:0 0 16px 4px rgba(246,226,166,.7);
  animation:nc-fiberpulse 3.6s linear infinite; }
@keyframes nc-fiberpulse{ 0%{ top:-2%; opacity:0 } 8%{opacity:1} 92%{opacity:1} 100%{ top:102%; opacity:0 } }
@media (max-width:1080px){ .nc-fiber{ display:none; } }
@media (prefers-reduced-motion:reduce){ .nc-fiber__pulse{ animation:none; opacity:0; } }

/* ── Narrative Interlude (Story-Beat zwischen Sektionen) ── */
.nc-interlude{
  position:relative; text-align:center;
  padding:clamp(64px,11vw,150px) 20px;
}
.nc-interlude__line{                      /* kurzer Faden-Stub mit Node oben */
  width:1px; height:clamp(34px,6vw,64px); margin:0 auto clamp(20px,3vw,34px);
  background:linear-gradient(180deg, transparent, var(--gold)); position:relative;
}
.nc-interlude__line::after{ content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--gold-bright);
  box-shadow:0 0 16px 3px rgba(246,226,166,.6); }
.nc-interlude__ey{ font:600 .72rem var(--font-display); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:14px; }
.nc-interlude h2{
  font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.04; letter-spacing:-.035em;
  max-width:18ch; margin:0 auto;
}
.nc-interlude h2 .dim{ color:var(--muted-dim); }
.nc-interlude p{ color:var(--muted); font-size:1.05rem; line-height:1.6; max-width:54ch;
  margin:18px auto 0; }
.nc-interlude__cue{ margin-top:clamp(22px,3vw,38px); display:inline-flex; flex-direction:column;
  align-items:center; gap:7px; color:var(--muted-dim);
  font:600 .64rem var(--font-display); letter-spacing:.22em; text-transform:uppercase; }
.nc-interlude__cue svg{ width:18px; height:18px; color:var(--gold);
  animation:nc-cuebounce 1.9s ease-in-out infinite; }
@keyframes nc-cuebounce{ 0%,100%{ transform:translateY(-2px); opacity:.7 } 50%{ transform:translateY(4px); opacity:1 } }

/* ==========================================================================
   DER KERN · cinematische 3D-Core-Sektion (Blender-Render)
   ========================================================================== */
.nc-core__inner{
  display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(28px,5vw,64px); align-items:center;
}
.nc-core__stage{ position:relative; aspect-ratio:1/1; max-width:480px; margin-inline:auto; width:100%; }
.nc-core__stage::before{                  /* Gold-Glow hinter dem Core */
  content:""; position:absolute; inset:-12%; border-radius:50%; z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(216,180,90,.30), rgba(216,180,90,0) 70%);
  filter:blur(8px);
}
.nc-core__video{
  position:relative; z-index:1; width:100%; height:100%; border-radius:50%;
  object-fit:cover; background:#05060c;
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(216,180,90,.18);
}
.nc-core__ring{                            /* Trägerring + rotierender Scanner-Sweep */
  position:absolute; inset:-3%; z-index:2; border-radius:50%; pointer-events:none;
  border:1px solid rgba(216,180,90,.16);
}
.nc-core__ring::after{                     /* heller Lichtbogen, der den Kern umkreist */
  content:""; position:absolute; inset:-1px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 68%, rgba(246,226,166,.85) 84%, transparent 92%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation:nc-coreorbit 6.5s linear infinite;
}
@keyframes nc-coreorbit{ to{ transform:rotate(360deg); } }
/* Zoom-Reveal für die Core-Bühne (data-fx="zoom") — Kern „kommt auf dich zu" */
.nc-reveal[data-fx="zoom"]{ transform:translateY(26px) scale(.9); }
.nc-reveal[data-fx="zoom"].is-visible{ transform:none; }
@media (prefers-reduced-motion: reduce){ .nc-core__ring::after{ animation:none; } }
.nc-core__copy h2{ font-size:clamp(1.9rem,3.6vw,3rem); margin:14px 0 16px; letter-spacing:-.03em; }
.nc-core__copy p{ color:var(--muted); font-size:1.05rem; line-height:1.62; max-width:54ch; }
.nc-core__pts{ list-style:none; display:grid; gap:12px; margin-top:22px; }
.nc-core__pts li{ display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start;
  color:var(--ink); font-size:.98rem; }
.nc-core__pts svg{ width:20px; height:20px; color:var(--gold-bright); margin-top:2px; }
.nc-core__pts b{ font-weight:600; }
.nc-core__pts span{ color:var(--muted); }
@media (max-width:900px){
  .nc-core__inner{ grid-template-columns:1fr; gap:30px; }
  .nc-core__stage{ max-width:380px; }
}

/* ==========================================================================
   EURE MARKE · White-Label Skin-Switcher (Portal-Mockup morpht pro Marke)
   ========================================================================== */
.nc-skin__stage{ max-width:1000px; margin:6px auto 0; }
.nc-skin__app{
  --sk-a:#f5a524; --sk-b:#f7c965;            /* Default Aurum; per JS überschrieben */
  position:relative; border-radius:20px; overflow:hidden;
  background:#0e1218; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 40px 100px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
}
.nc-skin__app, .nc-skin__app *{
  transition:color .55s var(--ease), background-color .55s var(--ease),
             border-color .55s var(--ease), stroke .55s var(--ease),
             fill .55s var(--ease), box-shadow .55s var(--ease);
}
/* Topbar */
.nc-skin__topbar{ display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0)); }
.nc-skin__brand{ display:flex; align-items:center; gap:12px; }
.nc-skin__logo{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-weight:800; font-size:18px; color:#0b0d12;
  background:linear-gradient(135deg, var(--sk-a), var(--sk-b));
  box-shadow:0 8px 22px color-mix(in srgb, var(--sk-a) 45%, transparent); }
.nc-skin__wordmark{ display:flex; flex-direction:column; line-height:1.16; }
.nc-skin__wordmark b{ font-size:15px; font-weight:700; color:#eef2f8; letter-spacing:-.01em; }
.nc-skin__wordmark i{ font-size:11px; font-style:normal; color:#8b95a6; }
.nc-skin__top-actions{ display:flex; align-items:center; gap:12px; }
.nc-skin__chip-mini{ font-size:11px; color:#aeb8c7; padding:5px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); }
.nc-skin__bell{ color:#8b95a6; display:grid; place-items:center; }
.nc-skin__bell svg{ width:18px; height:18px; }
.nc-skin__avatar{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#0b0d12;
  background:linear-gradient(135deg, var(--sk-a), var(--sk-b)); }
/* Body */
.nc-skin__body{ display:grid; grid-template-columns:182px 1fr; min-height:336px; }
.nc-skin__side{ padding:16px 12px; border-right:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; gap:4px; background:rgba(255,255,255,.014); }
.nc-skin__nav{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  font-size:13px; color:#9aa4b4; }
.nc-skin__nav i{ width:7px; height:7px; border-radius:50%; background:#3a424f; flex:none; }
.nc-skin__nav.is-active{ color:#fff; font-weight:600;
  background:color-mix(in srgb, var(--sk-a) 16%, transparent);
  box-shadow:inset 2px 0 0 var(--sk-a); }
.nc-skin__nav.is-active i{ background:var(--sk-a); box-shadow:0 0 10px var(--sk-a); }
.nc-skin__main{ padding:18px 20px; min-width:0; }
.nc-skin__hello{ display:flex; align-items:baseline; gap:12px; margin-bottom:15px; flex-wrap:wrap; }
.nc-skin__hello b{ font-size:18px; font-weight:700; color:#eef2f8; }
.nc-skin__hello span{ font-size:12px; color:#8b95a6; }
.nc-skin__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:15px; }
.nc-skin__kpi{ border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:13px 14px;
  background:rgba(255,255,255,.025); position:relative; overflow:hidden; min-width:0; }
.nc-skin__kpi-l{ display:block; font-size:11px; color:#8b95a6; margin-bottom:6px; }
.nc-skin__kpi-v{ display:block; font-size:24px; font-weight:800; color:#f1f5fa; letter-spacing:-.02em; }
.nc-skin__spark{ position:absolute; right:11px; bottom:11px; width:62px; height:19px;
  fill:none; stroke:var(--sk-a); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--sk-a) 60%, transparent)); }
.nc-skin__list{ display:grid; gap:8px; }
.nc-skin__li{ display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:11px;
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); font-size:13px; color:#c4ccd8;
  min-width:0; white-space:nowrap; }
.nc-skin__li b{ flex:none; }
.nc-skin__li .d{ width:8px; height:8px; border-radius:50%; background:var(--sk-a); flex:none;
  box-shadow:0 0 8px color-mix(in srgb, var(--sk-a) 70%, transparent); }
.nc-skin__li b{ color:#e7ecf3; font-weight:600; }
.nc-skin__li .pill{ margin-left:auto; font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px;
  color:var(--sk-a); background:color-mix(in srgb, var(--sk-a) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--sk-a) 30%, transparent); }
.nc-skin__li .pill.ok{ color:#34d98a; background:rgba(52,217,138,.12); border-color:rgba(52,217,138,.28); }
/* Switcher */
.nc-skin__switch{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px auto 0; }
.nc-skin__opt{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:#c4ccd8;
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .25s var(--ease); }
.nc-skin__opt:hover{ border-color:rgba(255,255,255,.26); transform:translateY(-1px); }
.nc-skin__opt .nc-skin__dot{ width:12px; height:12px; border-radius:50%; flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.05); }
.nc-skin__opt.is-active{ color:#fff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.3); }
.nc-skin__opt.is-active .nc-skin__dot{ box-shadow:0 0 12px currentColor, 0 0 0 3px rgba(255,255,255,.06); }
.nc-skin__hint{ text-align:center; font-size:12.5px; color:var(--muted); margin:14px auto 0; }
/* Value-Points */
.nc-skin__pts{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  max-width:1000px; margin:34px auto 0; padding:0; }
.nc-skin__pts li{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
  font-size:.96rem; color:var(--muted); }
.nc-skin__pts svg{ width:20px; height:20px; color:var(--gold-bright); margin-top:1px; }
.nc-skin__pts b{ color:var(--ink); font-weight:600; }
@media (max-width:760px){
  .nc-skin__body{ grid-template-columns:1fr; min-height:0; }
  .nc-skin__side{ display:none; }
  .nc-skin__kpis{ grid-template-columns:1fr 1fr; }
  .nc-skin__pts{ grid-template-columns:1fr; gap:14px; max-width:440px; }
}
@media (max-width:430px){ .nc-skin__kpis{ grid-template-columns:1fr; } }

/* gemeinsame Feature-Bullets (A/B/C) */
.nc-featpts{ list-style:none; display:grid; gap:13px; margin:22px 0 0; padding:0; }
.nc-featpts li{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; font-size:.97rem; color:var(--muted); }
.nc-featpts svg{ width:20px; height:20px; color:var(--gold-bright); margin-top:1px; flex:none; }
.nc-featpts b{ color:var(--ink); font-weight:600; }

/* =========================================================================
   TELEFON-ASSISTENT (A) · automatische Anrufannahme
   ========================================================================= */
.nc-voice__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,60px);
  align-items:center; max-width:1040px; margin-inline:auto; }
.nc-voice__console{ position:relative; border-radius:20px; overflow:hidden; background:#0d1119;
  border:1px solid rgba(255,255,255,.09); box-shadow:0 40px 100px rgba(0,0,0,.55); padding:18px 18px 20px; }
.nc-voice__bar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.nc-voice__live{ width:9px; height:9px; border-radius:50%; background:#34d98a; flex:none;
  animation:nc-vpulse 1.9s ease-out infinite; }
@keyframes nc-vpulse{ 0%{ box-shadow:0 0 0 0 rgba(52,217,138,.5) } 100%{ box-shadow:0 0 0 13px rgba(52,217,138,0) } }
.nc-voice__bar b{ font-size:13px; color:#e7ecf3; font-weight:600; }
.nc-voice__bar span{ margin-left:auto; font-size:11px; color:#8b95a6; }
.nc-voice__wave{ display:flex; align-items:center; gap:3px; height:36px; margin-bottom:16px; padding:0 2px; }
.nc-voice__wave i{ flex:1; min-width:0; border-radius:2px; background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  height:30%; animation:nc-wave 1.1s ease-in-out infinite; }
@keyframes nc-wave{ 0%,100%{ height:18% } 50%{ height:95% } }
.nc-voice__chat{ display:flex; flex-direction:column; gap:9px; }
.nc-voice__b{ max-width:84%; padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.45; }
.nc-voice__b small{ display:block; font-size:9.5px; opacity:.65; margin-bottom:3px; text-transform:uppercase; letter-spacing:.1em; }
.nc-voice__b--in{ align-self:flex-start; background:rgba(255,255,255,.05); color:#d7dee8;
  border:1px solid rgba(255,255,255,.07); border-bottom-left-radius:5px; }
.nc-voice__b--out{ align-self:flex-end; color:#1a1305; border-bottom-right-radius:5px; font-weight:500;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)); }
.nc-voice__status{ margin-top:15px; display:inline-flex; align-items:center; gap:8px; font-size:12px;
  color:var(--gold-bright); background:rgba(216,180,90,.12); border:1px solid rgba(216,180,90,.28);
  padding:7px 13px; border-radius:999px; }
.nc-voice__status i{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:nc-blink 1.3s steps(1) infinite; }
@keyframes nc-blink{ 50%{ opacity:.25 } }
.nc-voice__copy h2{ font-size:clamp(1.9rem,3.6vw,3rem); letter-spacing:-.03em; margin:12px 0 14px; }
.nc-voice__copy > p{ color:var(--muted); line-height:1.62; font-size:1.05rem; max-width:52ch; }

/* =========================================================================
   MAIL-COCKPIT & BRIEFWIRTSCHAFT (B)
   ========================================================================= */
.nc-mail__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,26px); max-width:1040px; margin:6px auto 0; }
.nc-mail__card{ border-radius:18px; background:#0d1119; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 80px rgba(0,0,0,.5); padding:16px 16px 18px; }
.nc-mail__ch{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700;
  letter-spacing:.02em; color:#aeb8c7; margin-bottom:13px; }
.nc-mail__ch svg{ width:16px; height:16px; color:var(--gold); flex:none; }
.nc-mail__inbox{ display:flex; flex-direction:column; gap:8px; }
.nc-mail__row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; min-width:0;
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); font-size:12.5px; color:#c4ccd8; }
.nc-mail__row .who{ font-weight:600; color:#e7ecf3; flex:none; }
.nc-mail__row .sub{ color:#8b95a6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nc-mail__tag{ margin-left:auto; flex:none; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; }
.nc-mail__tag.t-inv{ color:#62a8ff; background:rgba(98,168,255,.14); }
.nc-mail__tag.t-job{ color:#34d98a; background:rgba(52,217,138,.14); }
.nc-mail__tag.t-cmpl{ color:#ff7a7a; background:rgba(255,122,122,.14); }
.nc-mail__tag.t-appt{ color:#f5c451; background:rgba(245,196,81,.14); }
.nc-mail__letter{ position:relative; border-radius:12px; color:#2a2620; padding:15px 16px; min-height:148px;
  background:linear-gradient(180deg,#fbfaf6,#efece2); box-shadow:0 18px 40px rgba(0,0,0,.4); overflow:hidden; }
.nc-mail__letter .hd{ font-weight:700; font-size:12.5px; }
.nc-mail__letter .lines{ display:grid; gap:7px; margin-top:11px; }
.nc-mail__letter .lines i{ height:7px; border-radius:4px; background:rgba(42,38,32,.14); }
.nc-mail__stamp{ position:absolute; top:13px; right:14px; width:40px; height:46px; border-radius:5px;
  border:2px dashed rgba(42,38,32,.32); display:grid; place-items:center; font-size:8.5px; font-weight:700;
  color:rgba(42,38,32,.5); transform:rotate(6deg); letter-spacing:.05em; }
.nc-mail__sent{ display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-size:11.5px; color:#7fe3b0;
  background:rgba(24,195,126,.13); border:1px solid rgba(24,195,126,.3); padding:6px 11px; border-radius:999px; }
.nc-mail__sent svg{ width:14px; height:14px; }
.nc-mail .nc-featpts{ grid-template-columns:repeat(3,1fr); gap:18px; max-width:1040px; margin:30px auto 0; }
@media (max-width:860px){ .nc-voice__grid{ grid-template-columns:1fr; gap:30px; } }
@media (max-width:760px){
  .nc-mail__grid{ grid-template-columns:1fr; }
  .nc-mail .nc-featpts{ grid-template-columns:1fr; gap:14px; max-width:440px; }
}

/* =========================================================================
   GLASFASER-SUITE (C) · Wide 3D-Stage (Blender-Render)
   ========================================================================= */
.nc-fl__stage{ position:relative; max-width:1000px; margin:6px auto 0; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.09); box-shadow:0 40px 100px rgba(0,0,0,.55); background:#05060c; aspect-ratio:16/9; }
.nc-fl__stage video{ width:100%; height:100%; object-fit:cover; display:block; }
.nc-fl__badge{ position:absolute; left:16px; top:14px; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--gold-bright); background:rgba(216,180,90,.16); border:1px solid rgba(216,180,90,.32);
  padding:5px 12px; border-radius:999px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.nc-fl .nc-featpts{ grid-template-columns:repeat(3,1fr); gap:18px; max-width:1000px; margin:30px auto 0; }
@media (max-width:760px){ .nc-fl .nc-featpts{ grid-template-columns:1fr; gap:14px; max-width:440px; } }

/* =========================================================================
   MEHR IM SYSTEM (D) · Bento (KPI-Ampel · Bestenliste · Material · Fuhrpark)
   ========================================================================= */
.nc-more__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.5vw,22px); max-width:1040px; margin:6px auto 0; }
.nc-more__card{ border-radius:18px; background:#0d1119; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.45); padding:20px 20px 22px; }
.nc-more__h{ font-size:1.15rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.nc-more__d{ font-size:.9rem; color:var(--muted); margin:5px 0 16px; }
.nc-more__viz{ display:grid; gap:9px; }
/* Ampel */
.nc-more__arow{ display:flex; align-items:center; gap:11px; font-size:13px; color:#c4ccd8; }
.nc-more__dot{ width:11px; height:11px; border-radius:50%; flex:none; }
.nc-more__dot.g{ background:#18c37e; box-shadow:0 0 9px rgba(24,195,126,.7); }
.nc-more__dot.y{ background:#f2bf4d; box-shadow:0 0 9px rgba(242,191,77,.7); }
.nc-more__dot.r{ background:#ff5c57; box-shadow:0 0 9px rgba(255,92,87,.7); }
.nc-more__arow .v{ margin-left:auto; font-weight:700; color:#eef2f8; font-variant-numeric:tabular-nums; }
/* Bestenliste */
.nc-more__brow{ display:flex; align-items:center; gap:11px; font-size:13px; color:#c4ccd8; }
.nc-more__rank{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:11px;
  font-weight:800; color:#0b0d12; background:#3a424f; flex:none; }
.nc-more__rank.m1{ background:linear-gradient(135deg,#f6e2a6,#d8b45a); }
.nc-more__rank.m2{ background:linear-gradient(135deg,#dfe6ee,#aab4c2); }
.nc-more__rank.m3{ background:linear-gradient(135deg,#e6b98a,#c8853a); }
.nc-more__brow .nm{ flex:none; }
.nc-more__pbar{ flex:1; height:7px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; }
.nc-more__pbar i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); }
.nc-more__brow .pts{ font-size:11.5px; color:#8b95a6; flex:none; width:50px; text-align:right; }
/* Material */
.nc-more__srow .sl{ display:flex; justify-content:space-between; font-size:12.5px; color:#c4ccd8; margin-bottom:5px; }
.nc-more__srow .sl b{ color:#eef2f8; font-weight:600; }
.nc-more__srow .sl .warn{ color:#ff8a86; }
.nc-more__sbar{ height:7px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; }
.nc-more__sbar i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#18c37e,#34d98a); }
.nc-more__sbar i.low{ background:linear-gradient(90deg,#ff5c57,#ff8a86); }
/* Fuhrpark */
.nc-more__frow{ display:flex; align-items:center; gap:11px; font-size:13px; color:#c4ccd8; padding:8px 11px;
  border-radius:10px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); }
.nc-more__frow .pl{ font-weight:700; color:#eef2f8; }
.nc-more__fpill{ margin-left:auto; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; }
.nc-more__fpill.ok{ color:#34d98a; background:rgba(24,195,126,.13); }
.nc-more__fpill.busy{ color:#62a8ff; background:rgba(98,168,255,.13); }
.nc-more__fpill.svc{ color:#f5c451; background:rgba(245,196,81,.13); }
@media (max-width:760px){ .nc-more__grid{ grid-template-columns:1fr; } }