/* --- 0. LOCAL FONTS --- */
    @font-face {
      font-family: 'PP Neue Montreal';
      src: url('../assets/fonts/PPNeueMontreal-Book.otf') format('opentype');
      font-weight: 300;
      font-style: normal;
    }

    @font-face {
      font-family: 'PP Neue Montreal';
      src: url('../assets/fonts/PPNeueMontreal-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
    }

    @font-face {
      font-family: 'PP Neue Montreal';
      src: url('../assets/fonts/PPNeueMontreal-Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
    }

    @font-face {
      font-family: 'PP Neue Montreal';
      src: url('../assets/fonts/PPNeueMontreal-Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
    }

    /* --- 1. DESIGN SYSTEM VARIABLES --- */
    :root {
      /* Colors */
      --bg-gradient: radial-gradient(circle at 50% 50%, #ffffff 0%, #f0f2f5 60%, #e6e9ef 100%);
      --text-black: #050505;
      --text-grey: #555555;

      /* Aurora Accents */
      --acc-cyan: #00E5FF;
      --acc-purple: #9D00FF;
      --acc-blue: #2979FF;
      /* Engineering Accents & RGB for Opacity */
      --acc-orange: #F97316;
      --acc-orange-rgb: 249, 115, 22;
      --acc-reason: #10B981;
      --acc-reason-rgb: 16, 185, 129;
      --acc-memory: #F59E0B;
      --acc-memory-rgb: 245, 158, 11;
      --acc-code: #EF4444;
      --acc-code-rgb: 239, 68, 68;
      --acc-blue-rgb: 41, 121, 255;
      --acc-purple-rgb: 157, 0, 255;
      --acc-cyan-rgb: 0, 229, 255;

      --bg-body: #f4f6f9;

      /* Spacing */
      --padding-desktop: 60px;
      --padding-mobile: 24px;

      /* Fonts */
      --font-main: 'PP Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-code: 'JetBrains Mono', monospace;

      /* Design System V2.0 Additions */
      --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.03);
      --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.08);
      --glass: blur(16px) saturate(180%);
      --text-mute: #666666;
      --border-light: rgba(0, 0, 0, 0.08);

      /* Animation Defaults */
      --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

      /* Bento Grid Gradients */
      --grad-blue: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
      --grad-purple: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
      --grad-teal: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%);
      --grad-orange: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    }

    /* --- 2. GLOBAL RESET --- */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      overflow-x: hidden;
      background: var(--bg-body);
      background-image: radial-gradient(circle at 100% 0%, rgba(0, 229, 255, 0.1) 0%, transparent 20%);
    }

    body {
      font-family: var(--font-main);
      color: var(--text-black);
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
    }

    /* --- 3. NAVIGATION --- */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: var(--padding-desktop);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 100;
      /* Subtiler Glass Fade */
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
      pointer-events: none;
      /* Klicks gehen durch leere Bereiche */
    }

    .nav-content {
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      pointer-events: auto;
    }

    .logo {
      font-weight: 700;
      font-size: 1.4rem;
      letter-spacing: -0.03em;
      color: var(--text-black);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo img {
      height: 28px;
      width: auto;
    }

    .menu {
      display: flex;
      gap: 40px;
      list-style: none;
    }

    .menu-item {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--text-black);
      text-decoration: none;
      position: relative;
      transition: opacity 0.3s;
    }

    .menu-item:hover {
      opacity: 0.6;
    }

    /* --- 4. HERO --- */
    .hero-section {
      position: relative;
      height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 20;
      text-align: center;
      padding: 0 20px;
    }

    h1 {
      font-weight: 300;
      font-size: clamp(3.5rem, 8vw, 8.5rem);
      line-height: 0.95;
      letter-spacing: -0.04em;
      color: var(--text-black);
      margin-bottom: 40px;
    }

    /* Highlight specific words if needed */
    h1 span {
      font-weight: 500;
    }

    .subline {
      font-size: clamp(1.2rem, 3vw, 2rem);
      font-weight: 300;
      color: var(--text-grey);
      max-width: 800px;
      margin-bottom: 60px;
    }

    .hero-actions {
      display: flex;
      gap: 20px;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }

    /* --- 5. ANIMATIONS (Reveal & Pulse) --- */
    @keyframes reveal {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .reveal {
      opacity: 0;
      animation: reveal 1.2s var(--ease-out-expo) forwards;
    }

    .delay-1 {
      animation-delay: 0.1s;
    }

    .delay-2 {
      animation-delay: 0.2s;
    }

    .delay-3 {
      animation-delay: 0.3s;
    }

    .delay-4 {
      animation-delay: 0.4s;
    }

    @keyframes pulse-dot {
      0% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4);
      }

      70% {
        box-shadow: 0 0 0 6px rgba(0, 229, 255, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
      }
    }

    .tag.live .tag-dot {
      box-shadow: 0 0 0 rgba(0, 229, 255, 0.4);
      animation: pulse-dot 2s infinite;
    }

    /* --- 6. VALUE SECTION (Bento Grid) --- */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 24px;
      width: 100%;
      margin-top: 60px;
    }

    .ui-card {
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 24px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 280px;
      position: relative;
      transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
      box-shadow: var(--shadow-soft);
    }

    .ui-card:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.9);
      border-color: #fff;
      box-shadow: var(--shadow-hover);
    }

    /* Featured Card spans 2 columns on desktop */
    @media (min-width: 1024px) {
      .ui-card.featured {
        grid-column: span 2;
      }
    }

    /* --- CARD INTERNALS --- */
    .card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24px;
    }

    .icon-box {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.04);
    }

    /* Gradient assignments */
    .accent-blue .icon-box {
      background: var(--grad-blue);
    }

    .accent-purple .icon-box {
      background: var(--grad-purple);
    }

    .accent-teal .icon-box {
      background: var(--grad-teal);
    }

    .accent-orange .icon-box {
      background: var(--grad-orange);
    }

    .material-symbols-rounded {
      font-size: 24px;
      color: #333;
    }

    .tag-pill {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 8px;
      /* Default grey, overrides in cards if needed */
      background: rgba(0, 0, 0, 0.05);
      color: var(--text-mute);
      letter-spacing: 0.03em;
    }

    /* Colored Pills inside Engineering Cards */
    .eng-card .tag-pill {
      background: rgba(var(--accent-rgb, 0, 0, 0), 0.08);
      /* Fallback to black if var missing, but handled via inline style or scoped var */
      color: var(--accent-color);
      /* Since CSS vars like --accent-rgb aren't automatically derived from hex, we used the manual vars added to :root. 
         Wait, --accent-color is set inline on cards. We need to set --accent-rgb inline too or derive it. 
         For now, creating a specific rule or relying on the manual RGBs added. 
         Actually, let's use a trick: mix-blend-mode or just use the hex with opacity via relative-color-syntax (future) or just stick to the var.
         Better approach: Use specific card classes or just set the opacity on the hex if supported (not yet widely).
         Let's assume the user accepts the defined RGB vars or we just map them manually. */
    }

    /* Manual mapping for cards since we can't pass RGB easily in one var without redefining */
    .eng-card[style*="--acc-blue"] {
      --accent-rgb: var(--acc-blue-rgb);
    }

    .eng-card[style*="--acc-orange"] {
      --accent-rgb: var(--acc-orange-rgb);
    }

    .eng-card[style*="--acc-purple"] {
      --accent-rgb: var(--acc-purple-rgb);
    }

    .eng-card[style*="--acc-reason"] {
      --accent-rgb: var(--acc-reason-rgb);
    }

    .eng-card[style*="--acc-memory"] {
      --accent-rgb: var(--acc-memory-rgb);
    }

    .eng-card[style*="--acc-code"] {
      --accent-rgb: var(--acc-code-rgb);
    }

    .eng-card[style*="--acc-cyan"] {
      --accent-rgb: var(--acc-cyan-rgb);
    }

    .card-content h3 {
      font-size: 1.4rem;
      margin: 0 0 12px 0;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text-black);
    }

    .card-content p {
      font-size: 1rem;
      line-height: 1.5;
      color: var(--text-grey);
      margin: 0;
    }

    /* Subtle background number */
    .card-num {
      position: absolute;
      bottom: 24px;
      right: 24px;
      font-size: 60px;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.04);
      line-height: 1;
      pointer-events: none;
    }

    /* --- 6. GLOBAL COMPONENTS --- */
    .content-section {
      padding: 160px var(--padding-desktop);
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 20;
    }

    .content-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 350px 1fr;
      gap: 100px;
    }

    .section-label {
      font-family: var(--font-code);
      font-size: 0.9rem;
      color: var(--acc-blue);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      position: sticky;
      top: 140px;
      height: fit-content;
    }

    .text-editorial {
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 300;
      line-height: 1.2;
    }

    .text-mb {
      margin-bottom: 40px;
    }

    /* --- 7. UI COMPONENTS --- */

    .btn-particle {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 28px 16px 36px;

      background: #050505;
      color: #ffffff;
      border-radius: 100px;
      font-size: 1rem;
      font-weight: 500;
      text-decoration: none;
      overflow: hidden;
      white-space: nowrap;
      border: 1px solid rgba(255, 255, 255, 0.1);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      z-index: 5;
    }

    .btn-particle:hover {
      transform: scale(1.02);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .btn-particle canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .btn-particle span,
    .btn-particle svg {
      position: relative;
      z-index: 1;
    }

    .btn-particle svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    /* B. Ghost Button (Secondary) */
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      padding: 14px 32px;
      background: transparent;
      color: var(--text-black);
      border: 1px solid rgba(5, 5, 5, 0.2);
      border-radius: 100px;
      font-size: 1rem;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s;
    }

    .btn-ghost:hover {
      background: rgba(0, 0, 0, 0.05);
      border-color: var(--text-black);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 10px;
      font-family: var(--font-code);
      font-size: 0.8rem;
      font-weight: 500;
      background: rgba(0, 0, 0, 0.04);
      color: var(--text-mute);
      white-space: nowrap;
      position: relative;
      z-index: 25;
    }

    .tag.active {
      background: rgba(0, 0, 0, 0.08);
      color: var(--text-black);
      text-decoration: none;
    }

    .tag-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    }

    /* --- ISOLATED BEACON PULSE (Fix) --- */
    .beacon-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #00E5FF;
      box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7);
      animation: beacon-pulse 2s infinite;
      flex-shrink: 0;
    }

    @keyframes beacon-pulse {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7);
      }

      70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 229, 255, 0);
      }

      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
      }
    }

    .card-deco {
      position: absolute;
      top: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      opacity: 0.1;
      pointer-events: none;
    }

    .card-deco svg {
      width: 100%;
      height: 100%;
      stroke: var(--text-black);
      stroke-width: 1;
    }

    /* --- 8. BACKGROUND CANVAS (Fixed) --- */
    #canvas-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    /* --- MOBILE --- */
    @media (max-width: 1024px) {
      :root {
        --padding-desktop: 40px;
      }

      .content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .section-label {
        position: static;
        margin-bottom: 24px;
      }

      .eng-grid {
        grid-template-columns: 1fr;
        /* Stack cards */
      }

      .eng-card {
        flex-direction: column;
        /* Stack visual on top of content */
        min-height: auto;
      }

      .card-visual {
        flex: 0 0 200px;
        /* Fixed height for visual area on mobile */
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
      }
    }

    @media (max-width: 768px) {
      nav {
        padding: 24px;
      }

      .menu {
        display: none;
      }

      /* Burger Icon Placeholder */
      /* Burger Icon Removed (replaced by real .burger-menu) */

      h1 {
        font-size: 4.5rem;
      }

      .subline {
        font-size: 1.3rem;
      }

      .hero-actions {
        flex-direction: column;
        width: 100%;
      }

      .btn-particle,
      .btn-ghost {
        width: 100%;
        padding: 12px 20px;
      }

      .hero-section {
        padding-top: 140px;
        align-items: center;
        justify-content: flex-start;
      }

      .content-section {
        padding: 100px 24px;
      }

      .text-editorial {
        font-size: 1.6rem;
      }

      .bento-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .ui-card {
        min-height: auto;
      }
    }

    /* --- FORCE PULSE ANIMATION --- */
    @keyframes pulse-dot {
      0% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4);
      }

      70% {
        box-shadow: 0 0 0 6px rgba(0, 229, 255, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
      }
    }

    .tag.live .tag-dot {
      box-shadow: 0 0 0 rgba(0, 229, 255, 0.4);
      animation: pulse-dot 2s infinite !important;
    }

    /* --- 9. ENGINEERING SECTION (How We Build) --- */

    .eng-grid-wrapper {
      width: 100%;
    }

    .eng-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .span-full {
      grid-column: 1 / -1;
    }

    .eng-card {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: var(--shadow-soft);
      min-height: 260px;
      position: relative;
    }

    .eng-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
      border-color: #fff;
      background: rgba(255, 255, 255, 0.95);
    }

    .eng-card::before {
      /* Removed the hard side stripe, replaced with subtle border glow equivalent via shadow or internal gradient if needed */
      display: none;
    }

    .card-visual {
      flex: 0 0 35%;
      position: relative;
      overflow: hidden;
      border-right: 1px solid rgba(0, 0, 0, 0.03);
      display: flex;
      align-items: center;
      justify-content: center;

      /* SMOOTH AURORA DRIFT (Replaces random background) */
      background:
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.15) 0%, transparent 60%);
      background-size: 200% 200%;
      animation: aurora-drift 15s ease-in-out infinite alternate;
    }

    /* Hover Intensify */
    .eng-card:hover .card-visual {
      background:
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.25) 0%, transparent 70%);
      background-size: 150% 150%;
    }

    .grid-pattern {
      position: absolute;
      inset: 0;
      opacity: 0.2;
      /* Subtler */
      mix-blend-mode: multiply;
      background-size: 20px 20px;
      /* Dotted grid instead of lines for more 'space' feel */
      background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    }

    .card-content {
      flex: 1;
      padding: 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .tech-mono {
      font-family: var(--font-code);
      font-size: 0.8rem;
      color: var(--accent-color);
      margin-bottom: 12px;
      display: block;
      font-weight: 500;
    }

    .eng-card h3 {
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 12px 0;
      color: var(--text-black);
      letter-spacing: -0.01em;
    }

    .eng-card p {
      font-size: 1rem;
      line-height: 1.5;
      color: var(--text-grey);
      margin: 0;
    }

    /* --- ABSTRACT AURORA ANIMATIONS (CIRCULAR REDESIGN) --- */
    .anim-container {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      perspective: 500px;
      /* 3D context for orbits */
    }

    /* 1. ARCHITECTURE: Connected Nodes (Already Circularish, Refining) */
    .abs-arch-node {
      position: absolute;
      border-radius: 50%;
      background: white;
      box-shadow: 0 0 15px var(--accent-color);
    }

    .abs-arch-node.center {
      width: 14px;
      height: 14px;
      z-index: 2;
    }

    .abs-arch-node.sat-1 {
      width: 8px;
      height: 8px;
      left: 25%;
      top: 40%;
      animation: orbit-wobble 6s ease-in-out infinite;
    }

    .abs-arch-node.sat-2 {
      width: 6px;
      height: 6px;
      right: 25%;
      bottom: 35%;
      animation: orbit-wobble 8s ease-in-out infinite reverse;
    }

    .abs-arch-ring {
      width: 90px;
      height: 90px;
      border: 1px dashed var(--accent-color);
      border-radius: 50%;
      position: absolute;
      opacity: 0.6;
      animation: spin-slow 25s linear infinite;
    }

    /* 2. AGENTS: Nucleus (Already Circular) */
    .abs-agent-core {
      width: 24px;
      height: 24px;
      background: var(--accent-color);
      border-radius: 50%;
      box-shadow: 0 0 30px var(--accent-color);
      animation: pulse-glow 3s infinite alternate;
    }

    .abs-agent-orbit {
      position: absolute;
      border-radius: 50%;
      border: 1px solid var(--accent-color);
      opacity: 0.5;
    }

    .abs-agent-orbit.o1 {
      width: 70px;
      height: 70px;
      animation: orbit-spin 5s linear infinite;
    }

    .abs-agent-orbit.o2 {
      width: 110px;
      height: 40px;
      animation: orbit-spin 7s linear infinite reverse;
    }

    /* 3. MODELS: Concentric Rings (Replaces Squares) */
    .abs-model-ring {
      position: absolute;
      border-radius: 50%;
      border: 2px solid var(--accent-color);
      opacity: 0.8;
    }

    .abs-model-ring.r1 {
      width: 40px;
      height: 40px;
      border-width: 2px;
      animation: pulse-scale 3s infinite;
    }

    .abs-model-ring.r2 {
      width: 70px;
      height: 70px;
      border-width: 1px;
      opacity: 0.5;
      animation: pulse-scale 3s infinite 0.5s;
    }

    .abs-model-ring.r3 {
      width: 100px;
      height: 100px;
      border-width: 1px;
      border-style: dashed;
      opacity: 0.3;
      animation: spin-slow 20s linear infinite;
    }

    .abs-model-core {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent-color);
      box-shadow: 0 0 15px var(--accent-color);
    }

    /* 4. REASONING: Orbital Constellation (Replaces Dots) */
    .abs-reason-core {
      width: 10px;
      height: 10px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 0 10px var(--accent-color);
    }

    .abs-reason-orbit {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .abs-reason-orbit .dot {
      position: absolute;
      width: 6px;
      height: 6px;
      background: var(--accent-color);
      border-radius: 50%;
    }

    .rot-1 {
      width: 80px;
      height: 80px;
      animation: spin-slow 8s linear infinite;
    }

    .rot-1 .dot {
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .rot-2 {
      width: 60px;
      height: 60px;
      animation: spin-slow 6s linear infinite reverse;
    }

    .rot-2 .dot {
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
    }

    /* 5. MEMORY: Data Vortex (Replaces Stack) */
    .abs-mem-ring {
      position: absolute;
      border-radius: 50%;
      border: 2px solid var(--accent-color);
      border-top-color: transparent;
      border-left-color: transparent;
    }

    .v1 {
      width: 50px;
      height: 50px;
      animation: spin 2s linear infinite;
    }

    .v2 {
      width: 80px;
      height: 80px;
      opacity: 0.5;
      animation: spin 4s linear infinite reverse;
    }

    .abs-mem-particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: var(--accent-color);
      border-radius: 50%;
    }

    .p1 {
      top: 30%;
      right: 30%;
      animation: orbit-wobble 3s infinite;
    }

    .p2 {
      bottom: 30%;
      left: 30%;
      animation: orbit-wobble 4s infinite reverse;
    }

    /* 6. CODE: Syntax Radar (Replaces Glitch Bars) */
    .abs-code-radar {
      position: absolute;
      border-radius: 50%;
      border: 1px solid var(--accent-color);
      opacity: 0.4;
    }

    .ra1 {
      width: 40px;
      height: 40px;
      border-right-color: transparent;
      animation: spin 2s linear infinite;
    }

    .ra2 {
      width: 70px;
      height: 70px;
      border-bottom-color: transparent;
      animation: spin 4s linear infinite reverse;
    }

    .abs-code-tick {
      width: 60px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent-color));
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: left;
      animation: radar-sweep 3s linear infinite;
      opacity: 0.6;
    }

    /* 7. EFFICIENCY: Asymptote (Already Circularish) */
    .abs-eff-circle {
      width: 70px;
      height: 70px;
      border: 2px solid var(--accent-color);
      border-radius: 50%;
      border-right-color: transparent;
      border-bottom-color: transparent;
      transform: rotate(-45deg);
      animation: spin 4s linear infinite;
    }

    .abs-eff-line {
      position: absolute;
      width: 0;
      height: 0;
      /* Removing line to keep it pure circle/orbit */
    }


    /* Keyframes */
    @keyframes spin-slow {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes spin {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes orbit-spin {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes orbit-wobble {
      0% {
        transform: translate(0, 0);
      }

      33% {
        transform: translate(5px, -5px);
      }

      66% {
        transform: translate(-5px, 5px);
      }

      100% {
        transform: translate(0, 0);
      }
    }

    @keyframes pulse-glow {
      0% {
        box-shadow: 0 0 10px var(--accent-color);
      }

      100% {
        box-shadow: 0 0 25px var(--accent-color), 0 0 50px rgba(var(--accent-rgb), 0.4);
      }
    }

    @keyframes pulse-scale {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.8;
      }

      50% {
        transform: scale(1.1);
        opacity: 0.4;
      }
    }

    @keyframes radar-sweep {
      0% {
        transform: rotate(0deg);
        opacity: 0;
      }

      50% {
        opacity: 0.8;
      }

      100% {
        transform: rotate(360deg);
        opacity: 0;
      }
    }

    @keyframes aurora-drift {
      0% {
        background-position: 0% 0%;
      }

      100% {
        background-position: 100% 100%;
      }
    }

    .pulse-ring::after {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 1px dashed var(--accent-color);
      opacity: 0.5;
      animation: spin 10s linear infinite;
    }

    /* Code Bracket */
    .code-bracket {
      font-family: var(--font-code);
      font-size: 3rem;
      color: var(--accent-color);
      font-weight: 700;
      opacity: 0.8;
    }

    @keyframes pulse-scale {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      100% {
        transform: scale(1.2);
        opacity: 0;
      }
    }

    @keyframes spin {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    @media (max-width: 900px) {
      .eng-grid {
        grid-template-columns: 1fr;
      }

      .eng-card {
        flex-direction: column;
      }

      .card-visual {
        width: 100%;
        height: 200px;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }

      .card-content {
        padding: 24px;
      }

      .span-full {
        grid-column: auto;
      }
    }

    /* --- 10. TECH MARQUEE --- */
    .tech-marquee {
      padding: 80px 0;
      background: transparent;
      overflow: hidden;
      position: relative;
      mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
      z-index: 20;
    }

    .tech-label {
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-grey);
      margin-bottom: 40px;
      display: block;
      font-family: var(--font-code);
      opacity: 0.7;
    }

    .marquee-track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: scroll 40s linear infinite;
      will-change: transform;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .logo-item {
      padding-right: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    .logo-item img {
      height: 30px;
      width: auto;
      display: block;
      opacity: 0.55;
      filter: grayscale(100%);
      transition: opacity 0.3s ease, filter 0.3s ease;
    }

    .logo-item:hover {
      transform: scale(1.1);
    }

    .logo-item:hover img {
      opacity: 1;
      filter: grayscale(0%);
    }

    .logo-fallback {
      height: 30px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: rgba(0, 0, 0, 0.55);
      background: rgba(0, 0, 0, 0.06);
      white-space: nowrap;
      user-select: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .marquee-track {
        animation: none;
      }
    }

    /* --- 11. FOOTER --- */
    footer {
      padding: 120px var(--padding-desktop) 60px;
      position: relative;
      z-index: 20;
      color: var(--text-black);
      background: transparent;
    }

    .footer-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
    }

    .footer-headline {
      font-size: clamp(2rem, 4vw, 3.5rem);
      font-weight: 300;
      letter-spacing: -0.03em;
      line-height: 1.1;
      margin-bottom: 40px;
    }

    .footer-col h4 {
      font-size: 0.9rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-grey);
      margin-bottom: 20px;
      font-family: var(--font-code);
    }

    .footer-col p,
    .footer-col a {
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--text-black);
      text-decoration: none;
      display: block;
      margin-bottom: 4px;
    }

    .footer-col a:hover {
      text-decoration: underline;
    }

    @media (max-width: 768px) {
      footer {
        padding: 80px 24px 40px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 60px;
      }
    }

    /* --- 12. CADENCE DECOR --- */
    .footer-cadence {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
    }

    .cadence-line {
      display: flex;
      justify-content: space-between;
      gap: 2px;
      opacity: 0.15;
      font-family: var(--font-code);
      font-size: 10px;
      color: var(--text-black);
      padding: 0 var(--padding-desktop);
      margin-top: 10px;
      letter-spacing: 5px;
      overflow: hidden;
      white-space: nowrap;
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

    .cadence-line span {
      display: inline-block;
    }

    .cadence-line span.l {
      font-weight: 700;
      font-size: 14px;
      position: relative;
      top: 2px;
    }

    .cadence-text {
      position: absolute;
      bottom: -6%;
      left: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 0.85;
      z-index: -1;
    }

    .cadence-text span {
      font-size: 14vw;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: -0.05em;
      color: rgba(0, 0, 0, 0.03);
      white-space: nowrap;
    }

    .cadence-text span:nth-child(2) {
      opacity: 0.6;
    }

    .cadence-text span:nth-child(3) {
      opacity: 0.3;
    }

    /* --- 13. IMPRESSUM --- */
    .impressum-container {
      margin-top: 120px;
      padding: 0 var(--padding-desktop) 40px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 20;
    }

    .impressum-content {
      max-width: 800px;
      margin: 0 auto 0 0;
      /* Align left */
      padding-top: 40px;
      font-size: 0.75rem;
      line-height: 1.6;
      color: var(--text-grey);
    }

    .impressum-content p {
      margin-bottom: 4px;
    }

    .impressum-content strong {
      display: block;
      margin-bottom: 8px;
      color: var(--text-black);
    }

    .impressum-content a {
      color: var(--text-black);
      text-decoration: underline;
    }

    @media (max-width: 768px) {
      .impressum-container {
        padding: 0 24px 40px;
      }
    }

    /* --- 14. MOBILE MENU --- */

    /* Burger Icon */
    .burger-menu {
      display: none;
      width: 30px;
      height: 20px;
      position: relative;
      z-index: 2000;
      /* Boosted z-index */
      cursor: pointer;
    }

    .burger-menu span {
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      background: var(--text-black);
      border-radius: 2px;
      opacity: 1;
      left: 0;
      transform: rotate(0deg);
      transition: .25s ease-in-out;
    }

    .burger-menu span:nth-child(1) {
      top: 0px;
    }

    .burger-menu span:nth-child(2) {
      top: 9px;
    }

    .burger-menu span:nth-child(3) {
      top: 18px;
    }

    .burger-menu.active span:nth-child(1) {
      top: 9px;
      transform: rotate(135deg);
    }

    .burger-menu.active span:nth-child(2) {
      opacity: 0;
      left: -60px;
    }

    .burger-menu.active span:nth-child(3) {
      top: 9px;
      transform: rotate(-135deg);
    }

    /* Mobile Overlay */
    .mobile-nav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .mobile-nav-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    .mobile-nav-overlay ul {
      list-style: none;
      padding: 0;
      text-align: center;
    }

    .mobile-nav-overlay li {
      margin: 20px 0;
      overflow: hidden;
    }

    .mobile-nav-overlay a {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 2rem;
      font-weight: 500;
      color: var(--text-black);
      text-decoration: none;
      transform: translateY(20px);
      opacity: 0;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }

    /* Explicit Close X inside Overlay */
    .mobile-menu-close {
      position: absolute;
      top: 40px;
      right: 40px;
      width: 32px;
      height: 32px;
      cursor: pointer;
      z-index: 1002;
    }

    .mobile-menu-close::before,
    .mobile-menu-close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--text-black);
      transform: rotate(45deg);
    }

    .mobile-menu-close::after {
      transform: rotate(-45deg);
    }

    .mobile-nav-overlay.active a {
      transform: translateY(0);
      opacity: 1;
    }

    /* Staggered animation delay */
    .mobile-nav-overlay.active li:nth-child(1) a {
      transition-delay: 0.1s;
    }

    .mobile-nav-overlay.active li:nth-child(2) a {
      transition-delay: 0.2s;
    }

    .mobile-nav-overlay.active li:nth-child(3) a {
      transition-delay: 0.3s;
    }

    .mobile-nav-overlay.active li:nth-child(4) a {
      transition-delay: 0.4s;
    }

    body.no-scroll {
      overflow: hidden;
    }

    @media (max-width: 768px) {
      .burger-menu {
        display: block;
      }

      .nav-content .menu {
        display: none;
        /* Hide desktop menu */
      }
    }

    /* --- 10. AUDIT / READINESS CHECK PAGE (MODERN) --- */
    .audit-hero {
      padding-top: 180px;
      /* More breathing room */
      text-align: center;
      padding-bottom: 100px;
    }

    .audit-hero h1 {
      font-size: clamp(2.5rem, 6vw, 5.5rem);
      /* Reduced min size for mobile */
      line-height: 1.1;
      /* slightly looser on mobile */
      letter-spacing: -0.03em;
      margin-bottom: 32px;
      padding: 0 20px;
      /* Safety padding */
    }

    .audit-app-container {
      max-width: 1400px;
      /* Wider for focus mode */
      margin: 180px auto 140px auto;
      /* 180px to safely clear fixed nav */
      display: grid;
      grid-template-columns: 1fr 450px;
      gap: 120px;
      /* Big separation */
      padding: 0 40px;
      align-items: start;
    }

    .question-col {
      background: transparent;
      /* No card */
      border: none;
      box-shadow: none;
      padding: 0;
    }

    .viz-col {
      position: sticky;
      top: 180px;
      background: #f5f6f8;
      border-radius: 32px;
      padding: 40px;
      min-height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      transition: all 0.3s ease;
    }

    .q-tag {
      display: inline-block;
      font-family: var(--font-code);
      font-size: 0.95rem;
      /* Larger */
      font-weight: 600;
      /* Bolder */
      color: var(--acc-blue);
      margin-bottom: 24px;
      background: rgba(41, 121, 255, 0.08);
      /* Light bg for contrast */
      padding: 6px 12px;
      /* Add padding */
      border-radius: 8px;
      /* Rounded corners */
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .q-headline {
      font-size: clamp(2rem, 4vw, 3rem);
      /* Huge */
      font-weight: 500;
      margin-bottom: 16px;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .q-helper {
      font-size: 1.1rem;
      color: var(--text-grey);
      margin-bottom: 60px;
      padding-left: 0;
      border-left: none;
      opacity: 0.8;
      max-width: 600px;
    }

    .answers-grid {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .answer-btn {
      text-align: left;
      padding: 18px 24px;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      /* Subtle border */
      background: #fff;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;
      opacity: 0;
      /* For staggered animation */
      transform: translateY(10px);
      animation: stagger-in 0.4s forwards;
    }

    .answer-btn:hover {
      border-color: var(--acc-blue);
      background: rgba(41, 121, 255, 0.02);
      transform: translateX(4px);
    }

    .answer-btn.selected {
      border-color: var(--acc-blue);
      background: rgba(41, 121, 255, 0.08);
      /* Light bg instead of solid */
      color: var(--text-black);
      font-weight: 500;
      box-shadow: 0 0 0 1px var(--acc-blue);
      /* Double border effect */
    }

    .answer-btn .key-hint {
      font-family: var(--font-code);
      font-size: 0.8rem;
      color: var(--text-grey);
      opacity: 0.5;
      border: 1px solid rgba(0, 0, 0, 0.1);
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }

    /* Remove old radio circle if redundant */
    .answer-btn .radio-circle {
      display: none;
    }

    /* ... Results Panel ... */
    .results-panel {
      display: none;
      max-width: 900px;
      margin: 0 auto 100px auto;
      text-align: center;
      padding: 140px 20px 0 20px;
      /* Added top padding */
    }

    .score-big {
      font-size: clamp(4rem, 10vw, 6rem);
      font-weight: 700;
      line-height: 1;
      margin-bottom: 10px;
      color: var(--text-black);
    }

    .band-label {
      font-size: clamp(1.5rem, 4vw, 2rem);
      font-weight: 300;
      color: var(--acc-blue);
      margin-bottom: 40px;
    }

    .layer-breakdown {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-bottom: 60px;
      text-align: left;
    }

    .layer-item {
      background: #fff;
      padding: 24px;
      border-radius: 16px;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .rec-box {
      background: var(--text-black);
      color: #fff;
      padding: 40px;
      border-radius: 24px;
      text-align: left;
      margin-bottom: 60px;
    }

    .rec-label {
      font-family: var(--font-code);
      opacity: 0.7;
      font-size: 0.9rem;
      text-transform: uppercase;
      margin-bottom: 12px;
      display: block;
    }

    .rec-box h3 {
      margin-bottom: 12px;
      font-size: clamp(1.5rem, 3vw, 1.8rem);
    }

    .rec-box p {
      font-weight: 300;
      opacity: 0.9;
      line-height: 1.6;
      max-width: 700px;
    }

    .nav-actions {
      margin-top: 60px;
      display: flex;
      justify-content: flex-end;
      /* Align right */
      align-items: center;
      gap: 20px;
    }

    /* Stagger delays */
    .answer-btn:nth-child(1) {
      animation-delay: 0.05s;
    }

    .answer-btn:nth-child(2) {
      animation-delay: 0.1s;
    }

    .answer-btn:nth-child(3) {
      animation-delay: 0.15s;
    }

    .answer-btn:nth-child(4) {
      animation-delay: 0.2s;
    }

    .answer-btn:nth-child(5) {
      animation-delay: 0.25s;
    }

    @keyframes stagger-in {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* NAV FIX */
    nav {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* TABLET / INTERMEDIATE */
    @media (max-width: 1200px) {
      .audit-hero h1 {
        font-size: 3.5rem;
      }

      .audit-app-container {
        gap: 60px;
        grid-template-columns: 1fr 380px;
        /* Compress viz col */
      }
    }

    @media (max-width: 900px) {
      .audit-app-container {
        grid-template-columns: 1fr;
        margin-top: 40px;
        gap: 40px;
        padding: 0 20px;
      }

      .viz-col {
        display: none;
      }

      .q-headline {
        font-size: 2rem;
      }

      .nav-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 16px 20px;
        margin: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        justify-content: space-between;
      }

      .audit-hero #start-btn {
        width: auto !important;
        /* Force auto width */
        max-width: 90%;
        display: inline-flex;
        padding: 16px 32px;
      }
    }

    /* COMPLEX ORBIT VIZ STYLES (300px) */
    .orbit-container {
      position: relative;
      width: 360px;
      /* Bigger container */
      height: 360px;
      margin-bottom: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .orbit-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .orbit-track {
      fill: none;
      stroke: rgba(0, 0, 0, 0.03);
      stroke-width: 1;
    }

    .orbit-dashed-ring-1 {
      fill: none;
      stroke: rgba(0, 0, 0, 0.1);
      stroke-width: 1;
      stroke-dasharray: 4 8;
      transform-origin: center;
      animation: spin-slow 60s linear infinite;
    }

    .orbit-dashed-ring-2 {
      fill: none;
      stroke: var(--acc-blue);
      stroke-width: 1;
      stroke-dasharray: 2 10;
      opacity: 0.3;
      transform-origin: center;
      animation: spin-rev 40s linear infinite;
    }

    /* Planets Group */
    .orbit-planets-1 {
      transform-origin: center;
      animation: spin-slow 30s linear infinite;
      fill: var(--text-black);
    }

    .orbit-progress {
      fill: none;
      stroke: var(--acc-blue);
      stroke-width: 6;
      /* Thicker */
      stroke-linecap: round;
      stroke-dasharray: 879.64;
      /* 2 * PI * 140 */
      stroke-dashoffset: 879.64;
      transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 1, 0.5, 1);
      filter: drop-shadow(0 0 10px rgba(41, 121, 255, 0.4));
    }

    .orbit-core {
      fill: var(--text-black);
      filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
    }

    .orbit-core-pulse {
      fill: none;
      stroke: var(--acc-blue);
      stroke-width: 2;
      opacity: 0;
      transform-origin: center;
      animation: pulse-ring 2.5s infinite;
    }

    .viz-status-text {
      position: absolute;
      bottom: -80px;
      /* Pushed further down */
      text-align: center;
      width: 100%;
    }

    .viz-status-text h3 {
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 6px;
      letter-spacing: -0.01em;
    }

    .viz-status-text p {
      font-size: 1rem;
      color: var(--text-grey);
      font-family: var(--font-code);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    @keyframes spin-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes spin-rev {
      from {
        transform: rotate(360deg);
      }

      to {
        transform: rotate(0deg);
      }
    }

    @keyframes pulse-ring {
      0% {
        transform: scale(0.6);
        opacity: 0.5;
        stroke-width: 3;
      }

      100% {
        transform: scale(1.8);
        opacity: 0;
        stroke-width: 0;
      }
    }

    /* Transition Utils */
    .fade-out {
      opacity: 0;
      transform: translateY(-10px);
    }

    .fade-in {
      opacity: 1;
      transform: translateY(0);
    }