* {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    /* .tech-badge is shared via base.css (also used, unconverted, on
       pricing.html etc.), so its dark variant lives here instead — this file
       only loads on index.html. Lime, matching the brand accent used for
       buttons/highlights everywhere else on this page now. */
    .tech-badge {
      color: #C5F578;
      background: rgba(197, 245, 120, 0.12);
    }

    /* .text-gradient is also shared via base.css (still emerald there, for
       pricing.html etc.) — same reasoning, overridden here to lime for this
       page only. Kept as a (subtle) gradient rather than a flat colour, same
       visual language the shared version already used. */
    .text-gradient {
      background: linear-gradient(135deg, #A3E635 0%, #C5F578 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    body {
      background: #0D0F12;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* ===== NAVBAR ===== */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 16px 24px;
    }
    
    
    .navbar.classic .nav-inner {
      background: transparent;
      backdrop-filter: none;
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 0;
    }
    
    
    /* Dark glass now, not a light pill — the nav's own text/logo/links are
       white for the dark hero, and .floating triggers at just 50px of
       scroll (still well inside the 95vh hero), so a light pill would flash
       in over dark content and go low-contrast the moment it appeared. Dark
       glass reads fine both over the hero and, further down, over the
       lighter sections the rest of the page still uses. */
    .navbar.floating .nav-inner {
      background: rgba(10, 14, 12, 0.75);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
      border-radius: 100px;
      padding: 8px 24px;
    }
    
    
    /* ===== PHONE PAINT COST =====
       Measured live at 393px: three filtered layers — two 600x600 hero glows
       at blur(100px) plus one at blur(120px) — and six backdrop-filters.
       A blur that large over that area is one of the most expensive things a
       phone GPU can be asked to do, and these sit above the fold, so the
       cost lands before anything is on screen. The dashboard had the same
       problem and this is the same fix.

       The glows keep their soft edge through a radial mask instead: it
       reaches the same look by fading the layer out towards its rim, without
       asking for a blurred texture every frame. */
    /* Desktop too now: measured 23fps scrolling the landing page at 4x CPU
       throttle with the 100-120px blurs, 60fps with the mask. */
    .hero-glow,
    [class*="blur-["] {
      filter: none !important;
      -webkit-mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%);
      mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%);
    }
    @media (max-width: 1023px) {
      /* Same reasoning as the glows. The surfaces underneath these are
         near-opaque anyway, so the frosting was barely visible while still
         forcing its own layer and a readback of everything behind it. */
      *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
    }

    /* ===== NAV CALL TO ACTION =====
       nowrap so the label keeps its natural width and the flex row has to
       give it that space. Without it the button shrinks to whatever is left
       over and breaks the label one word per line, which is what made the
       bar three rows tall on a phone. Below 400px there is not enough room
       for the full-size button either, so it steps down rather than
       overlapping the logo. */
    .nav-inner .nav-cta {
      padding: 9px 20px;
      font-size: 14px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* On phones the label is allowed to wrap, but only at a width that puts
       a sensible break in it: "Start Your" / "Analysis" rather than a line
       per word, which is what happened when the button was simply squeezed.
       The cap is in em so it tracks the font size instead of being a pixel
       value that only holds for one of the two languages. Shorter labels
       (German's "Jetzt analysieren") still fit on one line and stay there. */
    @media (max-width: 400px) {
      .nav-inner .nav-cta {
        padding: 8px 13px;
        font-size: 12.5px;
        white-space: normal;
        max-width: 8.5em;
        text-align: center;
        line-height: 1.25;
      }
    }

    /* ===== LANGUAGE SWITCH ===== */
    .lang-switch {
      display: flex; align-items: center; gap: 2px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 100px; padding: 3px; flex-shrink: 0;
    }
    .lang-switch-btn {
      background: none; border: none; cursor: pointer;
      padding: 6px 12px; border-radius: 100px;
      font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
      /* The inactive language sits on the switch's own translucent pill over
         a hero that the glow layers lighten, which put 50% white under
         4.5:1. It still reads as the unselected option against the lime
         active pill beside it — that contrast is carried by the background,
         not by dimming the label. */
      color: rgba(255,255,255,0.8); transition: background 0.2s ease, color 0.2s ease;
    }
    .lang-switch-btn:hover { color: #fff; }
    .lang-switch-btn.active { background: #C5F578; color: #0D0F12; }
    /* Inside the mobile drawer the pill is full-width with room for the
       spelled-out language names, not the compact DE/EN nav version. */
    .mobile-nav-panel .lang-switch { width: 100%; }
    .mobile-nav-panel .lang-switch-btn { flex: 1; text-align: center; }

    /* ===== MOBILE NAV DRAWER ===== */
    .mobile-nav-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: 12px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      color: #fff; cursor: pointer; flex-shrink: 0;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .mobile-nav-toggle:hover { background: rgba(255,255,255,0.1); border-color: rgba(197,245,120,0.4); }

    /* Closed = visibility:hidden, not just opacity:0 - a transparent overlay
       with a live backdrop-filter still made the browser re-blur the whole
       page behind it on every scroll frame. Blur only while open. */
    .mobile-nav-overlay {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,0.6);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }
    .mobile-nav-overlay.active { opacity: 1; visibility: visible; pointer-events: all; transition-delay: 0s; backdrop-filter: blur(4px); }

    .mobile-nav-panel {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(320px, 85vw); background: #0D0F12;
      border-left: 1px solid rgba(255,255,255,0.1);
      padding: 20px 24px 32px; overflow-y: auto;
      transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .mobile-nav-overlay.active .mobile-nav-panel { transform: translateX(0); }

    .mobile-nav-link {
      display: block; padding: 14px 4px; font-size: 16px; font-weight: 500;
      color: rgba(255,255,255,0.75); border-bottom: 1px solid rgba(255,255,255,0.08);
      text-decoration: none; transition: color 0.2s ease;
    }
    .mobile-nav-link:hover { color: #fff; }

    /* ===== BUTTONS =====
       .btn-primary/.btn-outline (the old solid-emerald / emerald-outline
       pair) are gone — every button on this page now uses .btn-accent/
       .btn-glass (base.css) instead, and nothing here references the old
       classes any more, so they were dead weight rather than something to
       just recolour. */

    /* ===== HOW IT WORKS CARDS ===== */
    .how-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      padding: 32px;
      position: relative;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .how-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
      border-color: rgba(255, 255, 255, 0.2);
    }
    
    .how-card.featured {
      background: #0A1F1A;
      border: 1px solid rgba(8, 144, 108, 0.3);
      color: white;
      transform: scale(1.03);
    }
    
    .how-card.featured:hover {
      transform: scale(1.03) translateY(-4px);
      box-shadow: 0 24px 60px rgba(8, 144, 108, 0.2);
      border-color: rgba(8, 144, 108, 0.5);
    }
    
    /* Verbindungslinie zwischen Cards */
    .card-connector {
      position: absolute;
      top: 50%;
      right: -24px;
      width: 48px;
      height: 2px;
      background: linear-gradient(90deg, #C5F578 0%, #C5F578 50%, transparent 50%);
      background-size: 8px 2px;
      display: none;
    }
    
    @media (min-width: 768px) {
      .card-connector {
        display: block;
      }
    }
    
    /* .tech-badge above (this file's page-wide override) already covers the
       featured card too — no separate rule needed now that both are lime. */

    /* Scan Frame Visual */
    .scan-frame {
      width: 80px;
      height: 100px;
      border: 2px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      position: relative;
      background: rgba(255, 255, 255, 0.04);
      overflow: hidden;
    }

    .scan-frame::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 8px;
      right: 8px;
      bottom: 8px;
      border: 1px dashed rgba(255, 255, 255, 0.18);
      border-radius: 6px;
    }

    .scan-frame::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
    }
    
    .scan-corner {
      position: absolute;
      width: 12px;
      height: 12px;
      border-color: #C5F578;
      border-style: solid;
      z-index: 2;
    }
    
    .scan-corner.tl { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }
    .scan-corner.tr { top: 12px; right: 12px; border-width: 2px 2px 0 0; border-radius: 0 3px 0 0; }
    .scan-corner.bl { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; border-radius: 0 0 0 3px; }
    .scan-corner.br { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; }
    
    /* Dashboard Widget — base and .featured now converge on the same dark
       glass treatment, so this only needed setting once instead of twice. */
    .mini-dashboard {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 12px;
      width: 100%;
    }

    .metric-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 12px;
    }

    .metric-row:last-child {
      border-bottom: none;
    }

    .metric-label {
      color: #9CA3AF;
    }

    .metric-value {
      font-weight: 600;
      color: #C5F578;
    }

    .metric-bar {
      width: 100%;
      height: 3px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 100px;
      margin-top: 2px;
      overflow: hidden;
    }

    .metric-bar-fill {
      height: 100%;
      background: #C5F578;
      border-radius: 100px;
    }

    /* Mini Timeline */
    .mini-timeline {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .timeline-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
    }

    .timeline-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #C5F578;
      flex-shrink: 0;
    }

    .timeline-line {
      width: 1px;
      height: 16px;
      background: rgba(255, 255, 255, 0.15);
      margin-left: 3.5px;
    }
    
    .how-card.featured .timeline-dot {
      background: #C5F578;
    }
    
    .how-card.featured .timeline-line {
      background: rgba(255, 255, 255, 0.15);
    }
    
    /* ===== GLASS CARDS ===== */
    .glass-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }

    .glass-card:hover {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
      transform: translateY(-2px);
    }
    
    /* ===== ANIMATIONS ===== */
    .fade-in-up {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .fade-in-up.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* ===== TEXT GRADIENT ===== */
    
    /* ===== HERO GLOW ===== */
    .hero-glow {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      filter: blur(100px);
      opacity: 0.15;
      pointer-events: none;
    }

    /* ===== HERO DARK MODE =====
       Scoped to the hero section only, via its own id — near-black base
       (echoing the dashboard's --card-base) with two blurred .hero-glow
       circles above providing the emerald radial blooms, rather than a flat
       dark rectangle. The rest of the page is unchanged and stays light. */
    #hero-dark {
      background: #070B09;
    }

    /* ===== FEATURES PINNED STYLES ===== */
    
    
    
    
  /* 1. Ganz oben: Globales Box-Sizing & Standard-Styles */
  * {
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
  
  body {
    background: #0D0F12;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ... hier deine restlichen Navbar-, Card- & Button-Styles ... */

  /* 2. Allgemeine Features-Fixes (für alle Bildschirmgrößen) */
  #features {
    overflow-x: hidden;
    width: 100%;
  }

  #featuresStickyGrid {
    overflow-x: hidden;
    width: 100%;
  }

  /* This used to force every .max-w-7xl inside #features to max-width:100%
     with a flat 1rem padding, at EVERY screen size (it sat outside the
     @media (max-width: 1023px) block below, unlike everything else here) —
     it was cancelling the section's own centering and padding entirely,
     which is why its badge/heading sat flush against the viewport edge
     instead of lining up with every other section. Removed; the mobile
     layout adjustments below are unaffected, they're a separate ruleset. */

  /* 3. Phone layout for the pinned steps.
     This block used to do the opposite: collapse the pin container, unstick
     the grid and force every step visible, so below 1024px the section
     degraded into a plain list and phones never saw the effect it is built
     around. It now only resizes things to fit one screen, and the scroll
     logic in index.js runs at every width.

     The video is sized by height rather than width: its 3/4 ratio otherwise
     derives ~512px of height from a 384px-wide column, which alone would
     fill most of a phone screen. Capping the height lets the ratio work out
     the width instead. */
  @media (max-width: 1023px) {
    .feature-video-frame {
      height: 30vh;
      width: auto;
      max-width: 100%;
    }
    #stepsContainer {
      height: 46vh;
      min-height: 280px;
    }
    /* The steps are stacked absolutely, so anything taller than the box
       overlaps the next one instead of pushing it down — the type steps
       down a little to keep the longest step inside. */
    #stepsContainer .step-border { padding-left: 1rem; border-left-width: 3px; }
    #stepsContainer h3 { font-size: 1.375rem; line-height: 1.2; }
    #stepsContainer .step-body p { font-size: 0.9375rem; margin-bottom: 1rem; }
  }
      /* ===== AUTH MODAL ===== */

    .auth-modal {
      background: #12151A; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 24px; padding: 40px 32px;
      max-width: 420px; width: 100%; position: relative;
      box-shadow: 0 24px 80px rgba(0,0,0,0.5);
      animation: slideUp 0.3s ease-out;
    }
    @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    .auth-tab {
      flex: 1; text-align: center; padding: 13px 0; font-weight: 600;
      font-size: 14px; cursor: pointer; transition: all 0.2s ease;
      border-bottom: 2px solid transparent; color: #9CA3AF;
    }

    /* Used only by this modal (no definition existed anywhere index.html
       could reach before — the fields rendered as completely unstyled
       browser-default inputs). Needed now more than ever: a dark modal
       around an unstyled input would leave a jarring white rectangle. */
    .form-label {
      display: block; font-size: 12px; font-weight: 600;
      color: #9CA3AF; margin-bottom: 6px;
    }
    .form-input {
      width: 100%; padding: 12px 14px; border-radius: 12px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      color: #FFFFFF; font-size: 14px;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .form-input::placeholder { color: #6B7280; }
    .form-input:focus { outline: none; border-color: #C5F578; background: rgba(255,255,255,0.08); }