/* ============================================================
       CSS CUSTOM PROPERTIES
    ============================================================ */
    :root {
      --c-950: #020817;
      --c-900: #0f172a;
      --c-800: #1e3a8a;
      --c-700: #1d4ed8;
      --c-600: #2563eb;
      --c-500: #3b82f6;
      --c-400: #60a5fa;
      --c-300: #93c5fd;
      --c-200: #bfdbfe;
      --c-sky: #0ea5e9;
      --c-indigo: #6366f1;
      --c-violet: #8b5cf6;
      --c-green: #22c55e;
      --c-green-l: #4ade80;
      --c-amber: #f59e0b;
      --c-red: #ef4444;
      --c-teal: #14b8a6;
      --c-pink: #ec4899;
      --c-orange: #f97316;

      --surface: #ffffff;
      --surface-muted: #f8fafc;
      --border: #e2e8f0;
      --text: #0f172a;
      --text-muted: #64748b;
      --text-light: #94a3b8;

      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --radius-full: 9999px;

      --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
      --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
      --shadow-lg: 0 10px 40px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.08);
      --shadow-blue: 0 8px 32px rgba(59,130,246,.25);
      --shadow-blue-lg: 0 20px 60px rgba(59,130,246,.30);

      --nav-h: 72px;
      --container: 1280px;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
    body {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      font-size: 1rem;
      line-height: 1.6;
      color: var(--text);
      background: var(--surface);
      overflow-x: hidden;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* ============================================================
       LAYOUT
    ============================================================ */
    .container {
      width: 100%;
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 1.5rem;
    }
    @media (min-width: 768px) { .container { padding: 0 2rem; } }
    @media (min-width: 1024px) { .container { padding: 0 3rem; } }

    .section { padding: 5rem 0; }
    .section--dark { background: var(--c-900); }
    .section--muted { background: var(--surface-muted); }
    .section--gradient {
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #1e3a8a 80%, #0f172a 100%);
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .35rem 1rem;
      background: rgba(59,130,246,.1);
      border: 1px solid rgba(59,130,246,.2);
      border-radius: var(--radius-full);
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--c-500);
      margin-bottom: 1.25rem;
    }
    .section-label--white {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.15);
      color: rgba(255,255,255,.85);
    }
    .section-title {
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1.15;
      color: var(--text);
      margin-bottom: 1rem;
    }
    .section-title--white { color: #fff; }
    .section-subtitle {
      font-size: 1.0625rem;
      color: var(--text-muted);
      max-width: 580px;
      line-height: 1.7;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    .section-subtitle--white { color: rgba(255,255,255,.65); }
    .section-header { margin-bottom: 3.5rem; }
    .section-header--center { text-align: center; }
    .section-header--center .section-subtitle { margin: 0 auto; }

    /* ============================================================
       ANIMATIONS / KEYFRAMES
    ============================================================ */
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-18px); }
    }
    @keyframes float-slow {
      0%, 100% { transform: translateY(0px) translateX(0px); }
      33% { transform: translateY(-12px) translateX(8px); }
      66% { transform: translateY(6px) translateX(-6px); }
    }
    @keyframes orb-drift {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(40px, -30px) scale(1.05); }
      66% { transform: translate(-25px, 15px) scale(.95); }
    }
    @keyframes pulse-ring {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(2); opacity: 0; }
    }
    @keyframes gradient-shift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: .4; }
    }
    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Scroll reveal */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }

    /* Feature-Cards sind <a>-Links: Link selbst immer klickbar,
       nur der Inhalt bekommt die Einblend-Animation */
    a.feature-card.reveal {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    a.feature-card.reveal > * {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s ease, transform .6s ease;
    }
    a.feature-card.reveal.visible > * {
      opacity: 1;
      transform: translateY(0);
    }
    a.feature-card.reveal-delay-1 > * { transition-delay: .1s; }
    a.feature-card.reveal-delay-2 > * { transition-delay: .2s; }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .75rem 1.75rem;
      border-radius: var(--radius-md);
      font-size: .9375rem;
      font-weight: 600;
      line-height: 1.3;
      transition: all .2s ease;
      text-align: center;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--c-sky) 0%, var(--c-600) 100%);
      color: #fff;
      box-shadow: var(--shadow-blue);
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, #38bdf8 0%, var(--c-700) 100%);
      box-shadow: var(--shadow-blue-lg);
      transform: translateY(-2px);
    }
    .btn-ghost {
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.9);
      border: 1px solid rgba(255,255,255,.15);
    }
    .btn-ghost:hover {
      background: rgba(255,255,255,.14);
      transform: translateY(-2px);
    }
    .btn-outline {
      background: transparent;
      color: var(--c-600);
      border: 1.5px solid var(--c-600);
    }
    .btn-outline:hover {
      background: var(--c-600);
      color: #fff;
      transform: translateY(-2px);
    }
    .btn-lg { padding: .9rem 2.25rem; font-size: 1rem; border-radius: var(--radius-lg); }
    .btn-sm { padding: .65rem 1.4rem; font-size: .9rem; }

    /* ============================================================
       1. NAVIGATION
    ============================================================ */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--nav-h);
      z-index: 1000;
      border-radius: 0 0 var(--radius-xl) var(--radius-xl);
      background: rgba(15, 23, 42, .45);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,.08);
      border-top: none;
      transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease;
    }
    #navbar.scrolled {
      background: rgba(15, 23, 42, .92);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 8px 32px rgba(0,0,0,.35);
    }
    #navbar .container {
      height: 100%;
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: .75rem;
      flex-shrink: 0;
    }
    .nav-logo-mark {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: block;
      flex-shrink: 0;
      object-fit: contain;
    }
    .nav-logo-text {
      font-size: 1.25rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.03em;
    }
    .nav-links {
      display: none;
      align-items: center;
      gap: 2rem;
    }
    @media (min-width: 1024px) { .nav-links { display: flex; } }
    .nav-links a {
      color: rgba(255,255,255,.75);
      font-size: .9375rem;
      font-weight: 500;
      transition: color .2s;
    }
    .nav-links a:hover { color: #fff; }
    .nav-actions {
      display: none;
      align-items: center;
      gap: .75rem;
    }
    @media (min-width: 768px) { .nav-actions { display: flex; } }
    .nav-hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: .5rem;
      cursor: pointer;
    }
    @media (min-width: 768px) { .nav-hamburger { display: none; } }
    .nav-hamburger span {
      display: block;
      width: 22px; height: 2px;
      background: rgba(255,255,255,.85);
      border-radius: 2px;
      transition: all .3s;
    }
    /* ── Nav link accent hover ──────────────────────────── */
    .nav-links a:hover { color: var(--c-400) !important; }
    .nav-links a {
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0; right: 0;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--c-sky), var(--c-400));
      opacity: 0;
      transform: scaleX(0);
      transition: opacity .2s, transform .2s;
    }
    .nav-links a:hover::after { opacity: 1; transform: scaleX(1); }

    /* ── Dropdown nav item ──────────────────────────────── */
    .nav-item {
      position: relative;
    }
    .nav-link-btn {
      display: flex;
      align-items: center;
      gap: .35rem;
      color: rgba(255,255,255,.75);
      font-size: .9375rem;
      font-weight: 500;
      transition: color .2s;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      position: relative;
    }
    .nav-link-btn::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0; right: 0;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--c-sky), var(--c-400));
      opacity: 0;
      transform: scaleX(0);
      transition: opacity .2s, transform .2s;
    }
    .nav-item:hover .nav-link-btn { color: var(--c-400); }
    .nav-item:hover .nav-link-btn::after { opacity: 1; transform: scaleX(1); }
    .nav-link-btn .chev { transition: transform .22s ease; }
    .nav-item:hover .nav-link-btn .chev { transform: rotate(180deg); }

    /* ── Dropdown bridge (keeps dropdown open while moving mouse) */
    .nav-item::before {
      content: '';
      position: absolute;
      top: 100%;
      left: -24px; right: -24px;
      height: 20px;
    }

    /* ── Dropdown panel ─────────────────────────────────── */
    .nav-dropdown {
      position: absolute;
      top: calc(100% + 20px);
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
      width: 920px;
      max-height: 80vh;
      overflow-y: auto;
      background: #fff;
      border-radius: var(--radius-xl);
      box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.07);
      border: 1px solid rgba(0,0,0,.06);
      padding: 1.25rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      z-index: 998;
    }
    .nav-item:hover .nav-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .nav-dropdown-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: .2rem;
    }
    .nav-dd-item {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      padding: .5rem .6rem;
      border-radius: var(--radius-md);
      transition: background .15s;
      color: inherit;
      text-decoration: none;
    }
    .nav-dd-item:hover { background: var(--surface-muted); }
    .nav-dd-icon {
      width: 34px; height: 34px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .nav-dd-icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
    .nav-dd-icon.fi-blue   { background: rgba(59,130,246,.1);  color: #3b82f6; }
    .nav-dd-icon.fi-green  { background: rgba(34,197,94,.1);   color: #22c55e; }
    .nav-dd-icon.fi-violet { background: rgba(139,92,246,.1);  color: #8b5cf6; }
    .nav-dd-icon.fi-amber  { background: rgba(245,158,11,.1);  color: #f59e0b; }
    .nav-dd-icon.fi-red    { background: rgba(239,68,68,.1);   color: #ef4444; }
    .nav-dd-icon.fi-sky    { background: rgba(14,165,233,.1);  color: #0ea5e9; }
    .nav-dd-icon.fi-indigo { background: rgba(99,102,241,.1);  color: #6366f1; }
    .nav-dd-icon.fi-pink   { background: rgba(236,72,153,.1);  color: #ec4899; }
    .nav-dd-icon.fi-teal   { background: rgba(20,184,166,.1);  color: #14b8a6; }
    .nav-dd-icon.fi-yellow { background: rgba(234,179,8,.1);   color: #eab308; }
    .nav-dd-icon.fi-orange { background: rgba(249,115,22,.1);  color: #f97316; }
    .nav-dd-title {
      font-size: .8375rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
      margin-bottom: .15rem;
    }
    .nav-dd-desc {
      font-size: .75rem;
      color: var(--text-muted);
      line-height: 1.4;
    }
    .nav-dropdown-footer {
      margin-top: 1.125rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-dd-footer-link {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-size: .8375rem;
      font-weight: 600;
      color: var(--c-600);
      transition: gap .18s;
    }
    .nav-dd-footer-link:hover { gap: .65rem; }
    .nav-dd-badge {
      font-size: .72rem;
      font-weight: 600;
      padding: .2rem .65rem;
      border-radius: var(--radius-full);
      background: rgba(59,130,246,.1);
      color: var(--c-600);
    }

    body.mobile-menu-open { overflow: hidden; }

    /* Mobile menu */
    #mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(9,11,20,.97);
      padding: calc(var(--nav-h) + 1.5rem) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
      flex-direction: column;
      gap: 1rem;
    }
    #mobile-menu.open {
      display: flex;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    #mobile-menu a {
      color: rgba(255,255,255,.85);
      font-size: 1.25rem;
      font-weight: 600;
      padding: .75rem 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
      transition: color .2s;
    }
    #mobile-menu a:hover { color: var(--c-400); }
    #mobile-menu .mobile-cta { margin-top: 1rem; }

    /* ── Mobile Accordion (Funktionen) ─────────────────── */
    .mobile-accordion { border-bottom: 1px solid rgba(255,255,255,.08); }
    .mobile-accordion-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      color: rgba(255,255,255,.85);
      font-size: 1.25rem;
      font-weight: 600;
      padding: .75rem 0;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
    }
    .mobile-acc-chev { transition: transform .25s; flex-shrink: 0; }
    .mobile-accordion-btn.open .mobile-acc-chev { transform: rotate(180deg); }
    .mobile-accordion-body {
      display: flex;
      flex-direction: column;
      max-height: 0;
      overflow: hidden;
      padding-bottom: 0;
      gap: 0;
      transition: max-height .35s ease, padding-bottom .35s ease;
    }
    .mobile-accordion-body.open {
      max-height: min(50vh, 320px);
      overflow-y: auto;
      padding-bottom: .5rem;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    .mobile-accordion-body a {
      color: rgba(255,255,255,.70) !important;
      font-size: 1rem !important;
      font-weight: 500 !important;
      padding: .5rem .75rem !important;
      border-bottom: none !important;
      border-radius: 8px;
    }
    .mobile-accordion-body a:hover { color: var(--c-400) !important; background: rgba(255,255,255,.06); }

    /* ============================================================
       2. HERO
    ============================================================ */
    /* ============================================================
       2. REVOLUTION HERO SLIDER
    ============================================================ */
    #hero { position: relative; overflow: hidden; overflow-x: clip; min-height: 100vh; }
    .rev-track { position: relative; width: 100%; height: 100vh; min-height: 600px; }
    .rev-slide {
      position: absolute; inset: 0; display: flex; align-items: center;
      opacity: 0; pointer-events: none; transition: opacity 1.1s cubic-bezier(.4,0,.2,1);
    }
    .rev-slide.is-active { opacity: 1; pointer-events: auto; }
    /* Per-slide backgrounds */
    .rsl-bg { position: absolute; inset: 0; z-index: 0; }
    .rev-slide[data-slide="0"] .rsl-bg { background: linear-gradient(145deg,#020817 0%,#0f172a 30%,#1a1040 55%,#1e3a8a 85%,#0c1a50 100%); }
    .rev-slide[data-slide="0"] .rsl-orb-a { background: radial-gradient(circle,rgba(59,130,246,.42) 0%,transparent 70%); }
    .rev-slide[data-slide="0"] .rsl-orb-b { background: radial-gradient(circle,rgba(99,102,241,.30) 0%,transparent 70%); }
    .rev-slide[data-slide="0"] .rsl-orb-c { background: radial-gradient(circle,rgba(14,165,233,.16) 0%,transparent 70%); }
    .rev-slide[data-slide="1"] .rsl-bg { background: linear-gradient(145deg,#020c10 0%,#061a16 30%,#082e25 55%,#0a3d30 85%,#041812 100%); }
    .rev-slide[data-slide="1"] .rsl-orb-a { background: radial-gradient(circle,rgba(20,184,166,.42) 0%,transparent 70%); }
    .rev-slide[data-slide="1"] .rsl-orb-b { background: radial-gradient(circle,rgba(34,197,94,.30) 0%,transparent 70%); }
    .rev-slide[data-slide="1"] .rsl-orb-c { background: radial-gradient(circle,rgba(6,182,212,.18) 0%,transparent 70%); }
    .rev-slide[data-slide="2"] .rsl-bg { background: linear-gradient(145deg,#0c0219 0%,#18093a 30%,#2d116c 55%,#3b0f5e 85%,#1a073a 100%); }
    .rev-slide[data-slide="2"] .rsl-orb-a { background: radial-gradient(circle,rgba(139,92,246,.42) 0%,transparent 70%); }
    .rev-slide[data-slide="2"] .rsl-orb-b { background: radial-gradient(circle,rgba(236,72,153,.30) 0%,transparent 70%); }
    .rev-slide[data-slide="2"] .rsl-orb-c { background: radial-gradient(circle,rgba(167,139,250,.18) 0%,transparent 70%); }
    .rev-slide[data-slide="3"] .rsl-bg { background: linear-gradient(145deg,#100a02 0%,#1e1204 30%,#2e1d05 55%,#3a1e02 85%,#170d02 100%); }
    .rev-slide[data-slide="3"] .rsl-orb-a { background: radial-gradient(circle,rgba(245,158,11,.38) 0%,transparent 70%); }
    .rev-slide[data-slide="3"] .rsl-orb-b { background: radial-gradient(circle,rgba(249,115,22,.28) 0%,transparent 70%); }
    .rev-slide[data-slide="3"] .rsl-orb-c { background: radial-gradient(circle,rgba(234,179,8,.15) 0%,transparent 70%); }
    .rsl-orb-a,.rsl-orb-b,.rsl-orb-c { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
    .rsl-orb-a { width: 700px; height: 700px; top: -150px; right: -150px; animation: orb-drift 14s ease-in-out infinite; }
    .rsl-orb-b { width: 500px; height: 500px; bottom: -100px; left: -100px; animation: orb-drift 18s ease-in-out infinite reverse; }
    .rsl-orb-c { width: 350px; height: 350px; top: 42%; left: 38%; animation: orb-drift 23s ease-in-out infinite 5s; }
    .rsl-dot-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px); background-size: 40px 40px; pointer-events: none; }
    /* Content layout */
    .rsl-inner {
      position: relative; z-index: 1; width: 100%;
      display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center;
      padding: calc(var(--nav-h) + 3rem) 0 5rem;
    }
    @media (min-width: 1024px) { .rsl-inner { grid-template-columns: 1fr 1fr; gap: 3rem; padding: calc(var(--nav-h) + 2.5rem) 0 4.5rem; } }
    @media (min-width: 1024px) { .rsl-inner > * { min-width: 0; } }
    @media (min-width: 1024px) {
      #hero { min-height: min(84vh, 780px); }
      .rev-track { height: min(84vh, 780px); min-height: 680px; }
      .rsl-inner { padding: calc(var(--nav-h) + 1.25rem) 0 2.5rem; }
    }
    /* Entry animations */
    @keyframes rsl-up { from { opacity:0; transform:translateY(36px); } to { opacity:1; transform:translateY(0); } }
    @keyframes rsl-visual-in { from { opacity:0; transform:translateX(48px) scale(.95); } to { opacity:1; transform:translateX(0) scale(1); } }
    .rev-slide .rsl-badge,.rev-slide .rsl-title,.rev-slide .rsl-subtitle,
    .rev-slide .rsl-ctas,.rev-slide .rsl-stats { opacity: 0; }
    .rev-slide .rsl-visual { opacity: 0; }
    .rev-slide.is-active .rsl-visual { opacity: 1; }
    .rev-slide.animate .rsl-badge    { animation: rsl-up .65s ease .05s both; }
    .rev-slide.animate .rsl-title    { animation: rsl-up .70s ease .2s  both; }
    .rev-slide.animate .rsl-subtitle { animation: rsl-up .65s ease .38s both; }
    .rev-slide.animate .rsl-ctas     { animation: rsl-up .65s ease .55s both; }
    .rev-slide.animate .rsl-stats    { animation: rsl-up .65s ease .70s both; }
    .rev-slide.animate .rsl-visual   { animation: rsl-visual-in .9s cubic-bezier(.16,1,.3,1) .25s both; }
    /* Badge */
    .rsl-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem .4rem .65rem; border-radius: var(--radius-full); font-size: .8125rem; font-weight: 600; margin-bottom: 1.5rem; max-width: 100%; }
    .rsl-badge-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; }
    .rsl-badge-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse-ring 2s ease-out infinite; }
    .rev-slide[data-slide="0"] .rsl-badge { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.28); color: #4ade80; }
    .rev-slide[data-slide="0"] .rsl-badge-dot { background: #22c55e; }
    .rev-slide[data-slide="1"] .rsl-badge { background: rgba(20,184,166,.12); border: 1px solid rgba(20,184,166,.28); color: #2dd4bf; }
    .rev-slide[data-slide="1"] .rsl-badge-dot { background: #14b8a6; }
    .rev-slide[data-slide="2"] .rsl-badge { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.28); color: #c4b5fd; }
    .rev-slide[data-slide="2"] .rsl-badge-dot { background: #8b5cf6; }
    .rev-slide[data-slide="3"] .rsl-badge { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.28); color: #fcd34d; }
    .rev-slide[data-slide="3"] .rsl-badge-dot { background: #f59e0b; }
    .rev-slide[data-slide="4"] .rsl-bg { background: linear-gradient(145deg,#021a0a 0%,#042f15 30%,#064e24 55%,#0a3d1e 85%,#021208 100%); }
    .rev-slide[data-slide="4"] .rsl-orb-a { background: radial-gradient(circle,rgba(16,185,129,.38) 0%,transparent 70%); }
    .rev-slide[data-slide="4"] .rsl-orb-b { background: radial-gradient(circle,rgba(52,211,153,.28) 0%,transparent 70%); }
    .rev-slide[data-slide="4"] .rsl-orb-c { background: radial-gradient(circle,rgba(6,182,212,.18) 0%,transparent 70%); }
    .rev-slide[data-slide="4"] .rsl-badge { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.28); color: #6ee7b7; }
    .rev-slide[data-slide="4"] .rsl-badge-dot { background: #10b981; }
    /* Title & text */
    .rsl-title { font-size: clamp(2.1rem,4.2vw,3.1rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.12; color: #fff; margin-bottom: 1.5rem; }
    .rsl-grad        { background: linear-gradient(90deg,#60a5fa,#a78bfa,#34d399,#60a5fa); background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradient-shift 5s ease infinite; }
    .rsl-grad-teal   { background: linear-gradient(90deg,#2dd4bf,#34d399,#06b6d4,#2dd4bf);  background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradient-shift 5s ease infinite; }
    .rsl-grad-violet { background: linear-gradient(90deg,#c4b5fd,#f0abfc,#818cf8,#c4b5fd);  background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradient-shift 5s ease infinite; }
    .rsl-grad-amber  { background: linear-gradient(90deg,#fcd34d,#fb923c,#fbbf24,#fcd34d);  background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradient-shift 5s ease infinite; }
    .rsl-grad-emerald{ background: linear-gradient(90deg,#6ee7b7,#34d399,#2dd4bf,#6ee7b7);  background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradient-shift 5s ease infinite; }
    .rsl-subtitle { font-size: 1.125rem; color: rgba(255,255,255,.62); line-height: 1.75; max-width: 520px; margin-bottom: 2.5rem; overflow-wrap: break-word; }
    .rsl-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
    .rsl-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; }
    .rsl-stat { display: flex; flex-direction: column; }
    .rsl-stat-value { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
    .rsl-stat-label { font-size: .8125rem; color: rgba(255,255,255,.45); font-weight: 500; }
    .rsl-stat-sep { width: 1px; background: rgba(255,255,255,.12); align-self: stretch; }

    /* ── Visual panels ───────────────────────────────────────── */
    .rsl-visual {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin-top: 2rem;
      overflow: visible;
      padding: 20px 0;
    }
    @media (min-width: 1024px) {
      .rsl-visual { margin-top: 0; }
      .rsl-visual .mockup-card { animation: float 7s ease-in-out infinite; }
    }
    @media (max-width: 1023px) {
      #hero { overflow: visible; min-height: 100svh; height: auto; }
      .rev-track { height: auto; min-height: 100svh; }
      .rev-slide {
        position: relative;
        inset: auto;
        height: 0;
        min-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity .6s ease;
      }
      .rev-slide.is-active {
        height: auto;
        min-height: calc(100svh - var(--nav-h));
        overflow: visible;
        opacity: 1;
        pointer-events: auto;
      }
      .rsl-inner { gap: 2rem; padding-bottom: 5rem; }
      .rsl-visual .mockup-stats-row { grid-template-columns: repeat(2, 1fr); }
      .rsl-visual .mockup-grid-body { grid-template-columns: 1fr; }
      .rsl-visual .mockup-body { padding: 1rem; }
    }
    .rsl-visual .mockup-card {
      max-width: 100%;
      width: 100%;
    }
    @media (min-width: 1024px) and (max-width: 1280px) {
      .rsl-visual .mockup-stats-row { grid-template-columns: repeat(2, 1fr); }
      .rsl-visual .mockup-grid-body { grid-template-columns: 1fr; }
      .rsl-visual .mockup-body { padding: 1rem; }
    }

    /* GPS Tracking Mockup (slide 2) */
    .gps-card { background: #0a1f16; border-radius: var(--radius-xl); border: 1px solid rgba(20,184,166,.15); overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(20,184,166,.06); }
    .gps-hdr { background: linear-gradient(135deg,#0b3d2e,#0e5240); padding: .875rem 1.25rem; display: flex; align-items: center; gap: .75rem; }
    .gps-hdr-title { flex: 1; text-align: center; font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.8); }
    .gps-live { display: flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; color: #2dd4bf; }
    .gps-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #14b8a6; animation: blink 1.5s ease-in-out infinite; }
    .gps-body { padding: 1rem; display: grid; grid-template-columns: 1.15fr 1fr; gap: .75rem; }
    .gps-map { background: #071510; border-radius: 10px; position: relative; height: 180px; overflow: hidden; border: 1px solid rgba(20,184,166,.1); }
    .gps-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(20,184,166,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,.07) 1px,transparent 1px); background-size: 22px 22px; }
    .gps-pin { position: absolute; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; }
    .gps-pin-ring { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(20,184,166,.6); background: rgba(20,184,166,.12); animation: pulse-ring 2.5s ease-out infinite; }
    .gps-pin-dot { width: 8px; height: 8px; border-radius: 50%; background: #14b8a6; position: relative; z-index: 1; }
    .gps-pin--blue .gps-pin-ring { border-color: rgba(59,130,246,.6); background: rgba(59,130,246,.12); } .gps-pin--blue .gps-pin-dot { background: #3b82f6; }
    .gps-pin--amber .gps-pin-ring { border-color: rgba(245,158,11,.6); background: rgba(245,158,11,.12); } .gps-pin--amber .gps-pin-dot { background: #f59e0b; }
    .gps-pin--violet .gps-pin-ring { border-color: rgba(139,92,246,.6); background: rgba(139,92,246,.12); } .gps-pin--violet .gps-pin-dot { background: #8b5cf6; }
    .gps-route { position: absolute; inset: 0; width: 100%; height: 100%; }
    .gps-map-label { position: absolute; font-size: .52rem; font-weight: 700; color: rgba(255,255,255,.45); white-space: nowrap; pointer-events: none; }
    .gps-emp-list { display: flex; flex-direction: column; gap: .45rem; }
    .gps-emp-row { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border-radius: 8px; background: rgba(20,184,166,.06); border: 1px solid rgba(20,184,166,.1); }
    .gps-emp-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .58rem; font-weight: 700; flex-shrink: 0; }
    .gps-emp-av--teal  { background: rgba(20,184,166,.2); color: #5eead4; }
    .gps-emp-av--blue  { background: rgba(59,130,246,.2);  color: #93c5fd; }
    .gps-emp-av--amber { background: rgba(245,158,11,.2);  color: #fcd34d; }
    .gps-emp-av--violet { background: rgba(139,92,246,.2); color: #c4b5fd; }
    .gps-emp-name { font-size: .63rem; font-weight: 600; color: rgba(255,255,255,.8); }
    .gps-emp-loc  { font-size: .55rem; color: rgba(255,255,255,.35); }
    .gps-emp-status { margin-left: auto; font-size: .58rem; font-weight: 700; white-space: nowrap; }
    .gps-emp-status--on  { color: #4ade80; } .gps-emp-status--off { color: rgba(255,255,255,.22); }
    .gps-stats-row { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
    .gps-stat-box { background: rgba(20,184,166,.06); border: 1px solid rgba(20,184,166,.12); border-radius: 8px; padding: .5rem .65rem; }
    .gps-stat-val { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
    .gps-stat-lbl { font-size: .55rem; color: rgba(255,255,255,.35); }

    /* Invoice Mockup (slide 3) */
    .inv-card { background: #120930; border-radius: var(--radius-xl); border: 1px solid rgba(139,92,246,.15); overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(139,92,246,.06); }
    .inv-hdr { background: linear-gradient(135deg,#2d116c,#3b0f5e); padding: .875rem 1.25rem; display: flex; align-items: center; gap: .75rem; }
    .inv-hdr-title { flex: 1; text-align: center; font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.8); }
    .inv-status-paid { font-size: .65rem; font-weight: 700; padding: .22rem .65rem; border-radius: 4px; background: rgba(34,197,94,.2); color: #4ade80; }
    .inv-body { padding: 1.25rem; }
    .inv-meta { display: flex; justify-content: space-between; margin-bottom: 1rem; }
    .inv-meta-label { font-size: .58rem; color: rgba(255,255,255,.32); font-weight: 500; margin-bottom: .15rem; }
    .inv-meta-value { font-size: .73rem; color: rgba(255,255,255,.8); font-weight: 600; }
    .inv-divider { height: 1px; background: rgba(255,255,255,.06); margin-bottom: .7rem; }
    .inv-cols { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; margin-bottom: .35rem; }
    .inv-col-hdr { font-size: .55rem; color: rgba(255,255,255,.27); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    .inv-row { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; padding: .38rem 0; border-bottom: 1px solid rgba(255,255,255,.05); align-items: center; }
    .inv-row:last-child { border-bottom: none; }
    .inv-item-name { font-size: .67rem; color: rgba(255,255,255,.8); font-weight: 600; }
    .inv-item-sub  { font-size: .55rem; color: rgba(255,255,255,.28); }
    .inv-item-qty  { font-size: .63rem; color: rgba(255,255,255,.5); text-align: right; min-width: 2.2rem; }
    .inv-item-price { font-size: .67rem; color: rgba(255,255,255,.8); font-weight: 600; text-align: right; min-width: 4.5rem; }
    .inv-total { display: flex; justify-content: space-between; align-items: center; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgba(139,92,246,.25); }
    .inv-total-label { font-size: .73rem; font-weight: 700; color: rgba(255,255,255,.6); }
    .inv-total-note { font-size: .58rem; color: rgba(255,255,255,.28); }
    .inv-total-amount { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
    .inv-total-datev { font-size: .6rem; color: #c4b5fd; font-weight: 600; }
    .inv-actions { display: flex; gap: .5rem; margin-top: .75rem; }
    .inv-btn { flex: 1; padding: .42rem; border-radius: 7px; font-size: .6rem; font-weight: 700; text-align: center; }
    .inv-btn--primary { background: linear-gradient(135deg,#8b5cf6,#6366f1); color: #fff; }
    .inv-btn--ghost { background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.22); color: #c4b5fd; }

    /* Compliance Mockup (slide 4) */
    .comp-card { background: #150e02; border-radius: var(--radius-xl); border: 1px solid rgba(245,158,11,.15); overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(245,158,11,.06); }
    .comp-hdr { background: linear-gradient(135deg,#2e1d05,#3d2005); padding: .875rem 1.25rem; display: flex; align-items: center; gap: .75rem; }
    .comp-hdr-title { flex: 1; text-align: center; font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.8); }
    .comp-hdr-score { font-size: .75rem; font-weight: 800; color: #fcd34d; }
    .comp-body { padding: 1.25rem; }
    .comp-top { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.1rem; }
    .comp-ring-wrap { position: relative; width: 78px; height: 78px; flex-shrink: 0; }
    .comp-ring-svg { width: 78px; height: 78px; transform: rotate(-90deg); }
    .comp-ring-track { fill: none; stroke: rgba(245,158,11,.12); stroke-width: 5; }
    .comp-ring-fill  { fill: none; stroke: url(#compGrad); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 9; }
    .comp-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .comp-ring-pct { font-size: .95rem; font-weight: 800; color: #fcd34d; line-height: 1; }
    .comp-ring-sub  { font-size: .48rem; color: rgba(255,255,255,.32); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    .comp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; flex: 1; }
    .comp-chip { padding: .38rem .6rem; border-radius: 7px; display: flex; align-items: center; gap: .38rem; font-size: .6rem; font-weight: 700; }
    .comp-chip--green  { background: rgba(34,197,94,.1);   border: 1px solid rgba(34,197,94,.22);   color: #4ade80; }
    .comp-chip--amber  { background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.22);  color: #fcd34d; }
    .comp-chip--blue   { background: rgba(59,130,246,.1);  border: 1px solid rgba(59,130,246,.22);  color: #93c5fd; }
    .comp-chip--violet { background: rgba(139,92,246,.1);  border: 1px solid rgba(139,92,246,.22);  color: #c4b5fd; }
    .comp-list { display: flex; flex-direction: column; gap: .38rem; }
    .comp-item { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; background: rgba(245,158,11,.05); border: 1px solid rgba(245,158,11,.1); border-radius: 8px; }
    .comp-item-ico { font-size: .8rem; }
    .comp-item-txt { font-size: .63rem; color: rgba(255,255,255,.7); font-weight: 500; flex: 1; }
    .comp-item-ok   { font-size: .6rem; color: #4ade80; font-weight: 700; white-space: nowrap; }
    .comp-item-warn { font-size: .6rem; color: #fcd34d; font-weight: 700; white-space: nowrap; }

    /* AI Mockup (slide 5) */
    .ai-card { background: #021a0a; border-radius: var(--radius-xl); border: 1px solid rgba(16,185,129,.15); overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(16,185,129,.06); }
    .ai-hdr { background: linear-gradient(135deg,#042f15,#064e24); padding: .875rem 1.25rem; display: flex; align-items: center; gap: .75rem; }
    .ai-hdr-title { flex: 1; text-align: center; font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.8); }
    .ai-hdr-badge { font-size: .6rem; font-weight: 800; color: #6ee7b7; background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.25); padding: .2rem .5rem; border-radius: 6px; }
    .ai-body { padding: 1.25rem; }
    .ai-chat { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
    .ai-msg { max-width: 85%; padding: .55rem .8rem; border-radius: 10px; font-size: .65rem; line-height: 1.55; }
    .ai-msg--user { align-self: flex-end; background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.25); color: #a7f3d0; border-bottom-right-radius: 3px; }
    .ai-msg--bot { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.8); border-bottom-left-radius: 3px; }
    .ai-msg--bot strong { color: #6ee7b7; }
    .ai-suggestions { display: flex; flex-direction: column; gap: .38rem; }
    .ai-sug { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.12); border-radius: 8px; }
    .ai-sug-ico { font-size: .75rem; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,.12); border-radius: 6px; }
    .ai-sug-txt { font-size: .6rem; color: rgba(255,255,255,.7); font-weight: 500; flex: 1; }
    .ai-sug-val { font-size: .6rem; color: #6ee7b7; font-weight: 700; white-space: nowrap; }

    /* Revolution Slider Controls */
    .rev-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); color: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s ease; opacity: 0; }
    #hero:hover .rev-arrow { opacity: 1; }
    .rev-arrow:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); transform: translateY(-50%) scale(1.1); }
    .rev-prev { left: 1.25rem; } .rev-next { right: 1.25rem; }
    @media (min-width: 1280px) { .rev-prev { left: 2rem; } .rev-next { right: 2rem; } }
    .rev-dots { position: absolute; bottom: 2.25rem; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: .55rem; align-items: center; }
    .rev-dot-btn { height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); border: none; padding: 0; cursor: pointer; transition: all .4s cubic-bezier(.4,0,.2,1); width: 6px; }
    .rev-dot-btn.is-active { width: 30px; background: rgba(255,255,255,.9); }
    .rev-progress-bar { position: absolute; bottom: 0; left: 0; height: 3px; z-index: 20; background: linear-gradient(90deg,#60a5fa,#a78bfa,#34d399); border-radius: 0 2px 2px 0; width: 0%; }
    .rev-counter { position: absolute; right: 2rem; bottom: 2rem; z-index: 20; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.35); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
    @media (max-width: 767px) { .rev-counter { display: none; } }
    .mockup-card {
      background: #1e293b;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.08);
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
    }
    .mockup-header {
      background: linear-gradient(135deg, var(--c-800), var(--c-600));
      padding: .875rem 1.25rem;
      display: flex;
      align-items: center;
      gap: .75rem;
    }
    .mockup-dots { display: flex; gap: .35rem; }
    .mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mockup-dot-r { background: #ff5f57; }
    .mockup-dot-y { background: #ffbd2e; }
    .mockup-dot-g { background: #28ca41; }
    .mockup-title-bar {
      flex: 1;
      text-align: center;
      font-size: .75rem;
      font-weight: 600;
      color: rgba(255,255,255,.8);
    }
    .mockup-live {
      display: flex;
      align-items: center;
      gap: .35rem;
      font-size: .7rem;
      font-weight: 700;
      color: var(--c-green-l);
    }
    .mockup-live-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--c-green);
      animation: blink 1.5s ease-in-out infinite;
    }
    .mockup-body { padding: 1.25rem; }
    .mockup-stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .75rem;
      margin-bottom: 1rem;
      min-width: 0;
    }
    .mockup-stat-box {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px;
      padding: .75rem;
      min-width: 0;
    }
    .mockup-stat-icon { margin-bottom: .3rem; display: flex; align-items: center; }
    .mockup-stat-icon svg { width: 16px; height: 16px; }
    .mockup-stat-val {
      font-size: 1.125rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.02em;
    }
    .mockup-stat-lbl {
      font-size: .625rem;
      color: rgba(255,255,255,.4);
      font-weight: 500;
      margin-top: .1rem;
    }
    .mockup-stat-up {
      font-size: .625rem;
      color: var(--c-green-l);
      font-weight: 600;
    }
    .mockup-grid-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .75rem;
      min-width: 0;
    }
    /* Mini calendar */
    .mockup-cal { background: rgba(255,255,255,.03); border-radius: 10px; padding: .75rem; }
    .mockup-cal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .6rem;
    }
    .mockup-cal-title { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.75); }
    .mockup-cal-nav { font-size: .65rem; color: var(--c-400); cursor: pointer; }
    .mockup-cal-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      text-align: center;
    }
    .mockup-cal-day { font-size: .6rem; color: rgba(255,255,255,.25); padding: 2px 0; }
    .mockup-cal-num {
      font-size: .65rem;
      color: rgba(255,255,255,.55);
      padding: 3px;
      border-radius: 4px;
      text-align: center;
    }
    .mockup-cal-num.today {
      background: var(--c-600);
      color: #fff;
      font-weight: 700;
    }
    .mockup-cal-num.has-shift { background: rgba(59,130,246,.2); color: var(--c-300); }
    /* Shifts list */
    .mockup-shifts { background: rgba(255,255,255,.03); border-radius: 10px; padding: .75rem; }
    .mockup-shifts-header {
      font-size: .7rem;
      font-weight: 700;
      color: rgba(255,255,255,.75);
      margin-bottom: .6rem;
    }
    .mockup-shift-row {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .4rem 0;
      border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .mockup-shift-row:last-child { border-bottom: none; }
    .mockup-shift-time { font-size: .6rem; color: var(--c-400); font-weight: 600; min-width: 2.5rem; }
    .mockup-shift-info { flex: 1; }
    .mockup-shift-name { font-size: .65rem; color: rgba(255,255,255,.8); font-weight: 600; }
    .mockup-shift-role { font-size: .6rem; color: rgba(255,255,255,.35); }
    .mockup-shift-badge {
      font-size: .55rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .badge-green { background: rgba(34,197,94,.15); color: var(--c-green-l); }
    .badge-blue { background: rgba(59,130,246,.15); color: var(--c-300); }
    .badge-amber { background: rgba(245,158,11,.15); color: #fcd34d; }

    /* Hero dashboard mockup – light theme */
    .mockup-card--light {
      background: #f8fafc;
      border: 1px solid rgba(15, 23, 42, .08);
      box-shadow: 0 40px 100px rgba(15, 23, 42, .12), 0 0 0 1px rgba(255, 255, 255, .9);
    }
    /* Header keeps original blue gradient; only body is light */
    .mockup-card--light .mockup-body { background: #f8fafc; }
    .mockup-card--light .mockup-stat-box {
      background: #fff;
      border-color: #e2e8f0;
    }
    .mockup-card--light .mockup-stat-val { color: #0f172a; }
    .mockup-card--light .mockup-stat-lbl { color: #64748b; }
    .mockup-card--light .mockup-stat-up { color: #059669; }
    .mockup-card--light .mockup-cal,
    .mockup-card--light .mockup-shifts {
      background: #fff;
      border: 1px solid #e2e8f0;
    }
    .mockup-card--light .mockup-cal-title,
    .mockup-card--light .mockup-shifts-header { color: #334155; }
    .mockup-card--light .mockup-cal-nav { color: #64748b; }
    .mockup-card--light .mockup-cal-day { color: #94a3b8; }
    .mockup-card--light .mockup-cal-num { color: #475569; }
    .mockup-card--light .mockup-cal-num.today {
      background: #2563eb;
      color: #fff;
    }
    .mockup-card--light .mockup-cal-num.has-shift {
      background: rgba(37, 99, 235, .12);
      color: #2563eb;
    }
    .mockup-card--light .mockup-shift-row { border-bottom-color: #f1f5f9; }
    .mockup-card--light .mockup-shift-time { color: #64748b; }
    .mockup-card--light .mockup-shift-name { color: #0f172a; }
    .mockup-card--light .mockup-shift-role { color: #64748b; }
    .mockup-card--light .badge-green { background: rgba(34, 197, 94, .12); color: #059669; }
    .mockup-card--light .badge-blue { background: rgba(37, 99, 235, .12); color: #2563eb; }
    .mockup-card--light .badge-amber { background: rgba(245, 158, 11, .12); color: #d97706; }

    /* ============================================================
       3. TRUST BAR
    ============================================================ */
    #trust {
      padding: 2.5rem 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .trust-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
    }
    @media (min-width: 768px) {
      .trust-inner { flex-direction: row; gap: 3rem; }
    }
    .trust-label {
      font-size: .8125rem;
      font-weight: 600;
      color: var(--text-light);
      letter-spacing: .05em;
      text-transform: uppercase;
      text-align: center;
    }
    .trust-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      justify-content: center;
    }
    @media (min-width: 768px) { .trust-badges { justify-content: flex-start; } }
    .trust-badge {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .5rem 1.25rem;
      background: var(--surface-muted);
      border: 1px solid var(--border);
      border-radius: var(--radius-full);
      font-size: .875rem;
      font-weight: 600;
      color: var(--text-muted);
      transition: all .2s;
    }
    .trust-badge:hover {
      border-color: var(--c-500);
      color: var(--c-700);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    .trust-badge-icon { display: inline-flex; align-items: center; }
    .trust-badge-icon svg { width: 14px; height: 14px; }
    .trust-divider { width: 1px; height: 32px; background: var(--border); display: none; }
    @media (min-width: 768px) { .trust-divider { display: block; } }

    /* ============================================================
       4. FEATURES GRID
    ============================================================ */
    #features { background: var(--surface-muted); }
    .features-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }
    @media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }

    .feature-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
      transition: all .25s ease;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(59,130,246,.3);
    }
    .feature-card:hover .feature-link { color: var(--c-600); gap: .5rem; }
    .feature-icon-wrap {
      width: 52px; height: 52px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
    }
    .feature-icon-wrap svg { width: 26px; height: 26px; stroke-width: 1.75; }
    .feature-title {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: .5rem;
      letter-spacing: -.01em;
    }
    .feature-desc {
      font-size: .9rem;
      color: var(--text-muted);
      line-height: 1.65;
      flex: 1;
      overflow-wrap: break-word;
    }
    .feature-link {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      margin-top: 1.25rem;
      font-size: .875rem;
      font-weight: 600;
      color: var(--c-500);
      transition: gap .2s ease, color .2s ease;
    }

    /* Feature icon color variations */
    .fi-blue   { background: rgba(59,130,246,.1);  color: #3b82f6; }
    .fi-green  { background: rgba(34,197,94,.1);   color: #22c55e; }
    .fi-violet { background: rgba(139,92,246,.1);  color: #8b5cf6; }
    .fi-amber  { background: rgba(245,158,11,.1);  color: #f59e0b; }
    .fi-red    { background: rgba(239,68,68,.1);   color: #ef4444; }
    .fi-sky    { background: rgba(14,165,233,.1);  color: #0ea5e9; }
    .fi-indigo { background: rgba(99,102,241,.1);  color: #6366f1; }
    .fi-pink   { background: rgba(236,72,153,.1);  color: #ec4899; }
    .fi-teal   { background: rgba(20,184,166,.1);  color: #14b8a6; }
    .fi-yellow { background: rgba(234,179,8,.1);   color: #eab308; }
    .fi-orange { background: rgba(249,115,22,.1);  color: #f97316; }

    /* ============================================================
       4b. BRANCHEN PROBLEM/LÖSUNG
    ============================================================ */
    #branchen { background: linear-gradient(180deg, var(--surface-muted) 0%, var(--surface) 100%); }
    .branchen-pillars {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      margin-bottom: 4rem;
    }
    @media (min-width: 768px) { .branchen-pillars { grid-template-columns: repeat(3, 1fr); } }
    .pillar-card {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2.25rem 1.75rem 2rem;
      text-align: center;
      transition: all .3s ease;
      overflow: hidden;
    }
    .pillar-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--c-500), var(--c-indigo));
      opacity: 0;
      transition: opacity .3s;
    }
    .pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(59,130,246,.25); }
    .pillar-card:hover::before { opacity: 1; }
    .pillar-icon {
      width: 64px; height: 64px; border-radius: 16px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 1.25rem;
      position: relative;
    }
    .pillar-icon::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(99,102,241,.1));
      z-index: -1;
    }
    .pillar-icon svg { width: 30px; height: 30px; stroke-width: 1.75; }
    .pillar-title { font-size: 1.125rem; font-weight: 800; color: var(--text); margin-bottom: .6rem; letter-spacing: -.02em; }
    .pillar-desc { font-size: .9rem; color: var(--text-muted); line-height: 1.7; }

    .branchen-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }
    @media (min-width: 640px) { .branchen-cards { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .branchen-cards { grid-template-columns: repeat(4, 1fr); } }
    .branchen-card {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.75rem 1.5rem;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      transition: all .3s ease;
      overflow: hidden;
    }
    .branchen-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--c-500), transparent);
      opacity: 0;
      transition: opacity .3s;
    }
    .branchen-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(59,130,246,.12), 0 4px 12px rgba(0,0,0,.06);
      border-color: rgba(59,130,246,.3);
    }
    .branchen-card:hover::after { opacity: 1; }
    .branchen-card:hover .branchen-card-link { color: var(--c-600); gap: .55rem; }
    .branchen-card-icon {
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.1rem;
    }
    .branchen-card-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
    .branchen-card-name { font-size: 1.0625rem; font-weight: 800; color: var(--text); margin-bottom: .5rem; letter-spacing: -.01em; }
    .branchen-card-problem { font-size: .8125rem; color: var(--text-light); margin-bottom: .6rem; font-style: italic; line-height: 1.5; }
    .branchen-card-solution { font-size: .875rem; color: var(--text-muted); line-height: 1.65; flex: 1; }
    .branchen-card-link {
      display: inline-flex; align-items: center; gap: .35rem;
      margin-top: 1.1rem; font-size: .8125rem; font-weight: 700; color: var(--c-500);
      transition: gap .2s ease, color .2s ease;
    }

    /* ============================================================
       5. HOW IT WORKS
    ============================================================ */
    #how-it-works {
      position: relative;
      background: var(--surface);
    }
    .steps-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      position: relative;
    }
    @media (min-width: 768px) {
      .steps-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
      .steps-container::before {
        content: '';
        position: absolute;
        top: 2.25rem;
        left: calc(16.666% + 2.25rem);
        right: calc(16.666% + 2.25rem);
        height: 2px;
        background: rgba(59,130,246,.22);
        border-radius: 2px;
        z-index: 1;
        transform: translateY(-50%);
      }
      .steps-container::after {
        content: '';
        position: absolute;
        top: 2.25rem;
        left: calc(16.666% + 2.25rem);
        width: 0;
        height: 3px;
        background: var(--c-500);
        border-radius: 3px;
        z-index: 2;
        transform: translateY(-50%);
      }
      .steps-container.is-animating::after {
        animation: hiw-line-sequence 6s ease-in-out infinite;
      }
    }
    @keyframes hiw-line-sequence {
      0%, 2% { width: 0; }
      16% { width: calc(33.333% - 2.25rem); }
      22%, 26% { width: calc(33.333% - 2.25rem); }
      40% { width: calc(66.666% - 4.5rem); }
      46%, 72% { width: calc(66.666% - 4.5rem); }
      86%, 100% { width: 0; }
    }
    @keyframes hiw-num-fill-1 {
      0% { background: #fff; color: var(--c-500); border-color: rgba(59,130,246,.35); }
      4%, 80% { background: var(--c-500); color: #fff; border-color: var(--c-500); }
      88%, 100% { background: #fff; color: var(--c-500); border-color: rgba(59,130,246,.35); }
    }
    @keyframes hiw-num-fill-2 {
      0%, 22% { background: #fff; color: var(--c-500); border-color: rgba(59,130,246,.35); }
      28%, 80% { background: var(--c-500); color: #fff; border-color: var(--c-500); }
      88%, 100% { background: #fff; color: var(--c-500); border-color: rgba(59,130,246,.35); }
    }
    @keyframes hiw-num-fill-3 {
      0%, 46% { background: #fff; color: var(--c-500); border-color: rgba(59,130,246,.35); }
      52%, 80% { background: var(--c-500); color: #fff; border-color: var(--c-500); }
      88%, 100% { background: #fff; color: var(--c-500); border-color: rgba(59,130,246,.35); }
    }
    .step.reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
    }
    .step.reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .step.reveal-delay-1 { transition-delay: .12s, .12s, 0s, 0s; }
    .step.reveal-delay-2 { transition-delay: .24s, .24s, 0s, 0s; }
    .step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 6.5rem 1.5rem 1.75rem;
      position: relative;
      z-index: 3;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      transition: transform .35s cubic-bezier(.16,1,.3,1);
    }
    @media (min-width: 768px) {
      .step::before {
        content: '';
        position: absolute;
        top: 5.75rem;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 20px;
        box-shadow: var(--shadow-sm);
        z-index: 0;
        transition: box-shadow .35s ease, border-color .35s ease;
      }
      .steps-container.is-animating .step:nth-child(1) .step-number { animation: hiw-num-fill-1 6s ease-in-out infinite; }
      .steps-container.is-animating .step:nth-child(2) .step-number { animation: hiw-num-fill-2 6s ease-in-out infinite; }
      .steps-container.is-animating .step:nth-child(3) .step-number { animation: hiw-num-fill-3 6s ease-in-out infinite; }
    }
    @media (max-width: 767px) {
      .step {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 20px;
        box-shadow: var(--shadow-sm);
        padding: 2rem 1.5rem 1.75rem;
        transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
      }
      .step:hover {
        border-color: rgba(59,130,246,.25);
        box-shadow: var(--shadow-md);
      }
    }
    .step:hover { transform: translateY(-6px); }
    .step:hover::before {
      border-color: rgba(59,130,246,.25);
      box-shadow: var(--shadow-md);
    }
    .step.reveal.visible:hover { transform: translateY(-6px); }
    .step-number {
      width: 4.5rem; height: 4.5rem;
      border-radius: 50%;
      background: #fff;
      border: 3px solid rgba(59,130,246,.35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--c-500);
      margin-bottom: 0;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      box-shadow: 0 0 0 5px var(--surface);
      transition: background .4s ease, color .4s ease, border-color .4s ease;
    }
    @media (max-width: 767px) {
      .steps-container::before,
      .steps-container::after { display: none; }
      .step-number {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        box-shadow: none;
        background: var(--c-500);
        color: #fff;
        border-color: var(--c-500);
        animation: none !important;
        margin-bottom: 1.25rem;
      }
    }
    .step-icon,
    .step-title,
    .step-desc {
      position: relative;
      z-index: 1;
    }
    .step-icon {
      width: 3rem; height: 3rem;
      border-radius: 14px;
      background: rgba(59,130,246,.1);
      border: 1px solid rgba(59,130,246,.15);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: .25rem;
      margin-bottom: 1rem;
      color: var(--c-500);
      transition: transform .3s ease, background .3s ease;
    }
    .step-icon svg { width: 1.35rem; height: 1.35rem; }
    .step:hover .step-icon {
      transform: scale(1.06);
      background: rgba(59,130,246,.14);
    }
    .step-title {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: .625rem;
      letter-spacing: -.01em;
    }
    .step-desc {
      font-size: .9rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* ============================================================
       6. MARKETPLACE
    ============================================================ */
    #marketplace {
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1a3a7a 100%);
      padding: 5rem 0;
      overflow: hidden;
    }
    .marketplace-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
      align-items: center;
    }
    @media (min-width: 1024px) {
      .marketplace-grid { grid-template-columns: 1fr 1fr; }
    }
    .marketplace-bullets { margin: 2rem 0; }
    .marketplace-bullet {
      display: flex;
      align-items: flex-start;
      gap: .875rem;
      padding: .875rem 0;
      border-bottom: 1px solid rgba(255,255,255,.06);
      transition: transform .25s ease;
      cursor: default;
    }
    .marketplace-bullet:hover { transform: translateX(5px); }
    .marketplace-bullet:last-child { border-bottom: none; }
    .bullet-icon {
      width: 40px; height: 40px; flex-shrink: 0;
      border-radius: 10px;
      background: rgba(59,130,246,.18);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .3s, box-shadow .3s, transform .3s;
    }
    .marketplace-bullet:hover .bullet-icon {
      background: rgba(59,130,246,.32);
      box-shadow: 0 0 0 4px rgba(59,130,246,.12), 0 0 18px rgba(59,130,246,.35);
      transform: scale(1.13);
    }
    .bullet-icon svg { width: 20px; height: 20px; color: #60a5fa; stroke-width: 2; }
    .bullet-text { font-size: .9375rem; color: rgba(255,255,255,.7); line-height: 1.6; overflow-wrap: break-word; min-width: 0; }
    .bullet-text strong { color: rgba(255,255,255,.95); display: block; margin-bottom: .2rem; font-size: 1rem; }

    /* ── Network visual – enhanced ── */
    .network-visual {
      position: relative;
      width: 100%;
      max-width: 380px;
      aspect-ratio: 1;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Radial background glow */
    .nv-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, rgba(59,130,246,.2) 0%, rgba(99,102,241,.1) 42%, transparent 68%);
      border-radius: 50%;
      animation: nv-pulse 4s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes nv-pulse {
      0%,100% { transform: scale(1);    opacity: .65; }
      50%      { transform: scale(1.2);  opacity: 1; }
    }

    /* Rings – negative margins für Zentrierung, kein transform (würde spin-slow überschreiben) */
    .network-ring {
      position: absolute;
      border-radius: 50%;
      top: 50%; left: 50%;
    }
    .ring-1 {
      width: 330px; height: 330px;
      margin-top: -165px; margin-left: -165px;
      border: 1px dashed rgba(59,130,246,.3);
      box-shadow: 0 0 28px rgba(59,130,246,.07) inset, 0 0 28px rgba(59,130,246,.07);
      animation: spin-slow 48s linear infinite;
    }
    .ring-2 {
      width: 230px; height: 230px;
      margin-top: -115px; margin-left: -115px;
      border: 1px solid rgba(99,102,241,.4);
      animation: spin-slow 28s linear infinite reverse;
    }
    .ring-3 {
      width: 130px; height: 130px;
      margin-top: -65px; margin-left: -65px;
      border: 1px solid rgba(14,165,233,.45);
      animation: spin-slow 16s linear infinite;
    }

    /* SVG overlay – animated dashed connection lines */
    .nv-svg {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      overflow: visible;
      z-index: 1;
    }
    .nv-conn {
      fill: none;
      stroke-width: 1;
      stroke-dasharray: 5 6;
      animation: dash-flow 2.5s linear infinite;
    }
    .nv-conn-1 { stroke: rgba(96,165,250,.6);  animation-duration: 2.5s; }
    .nv-conn-2 { stroke: rgba(129,140,248,.6); animation-duration: 3s;   animation-delay: -.8s; }
    .nv-conn-3 { stroke: rgba(167,139,250,.6); animation-duration: 2.2s; animation-delay: -.4s; }
    .nv-conn-4 { stroke: rgba(56,189,248,.6);  animation-duration: 3.5s; animation-delay: -1.2s; }
    @keyframes dash-flow { to { stroke-dashoffset: -22; } }

    /* Nodes */
    .network-node {
      position: absolute;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,.15);
      z-index: 2;
    }

    /* Center hub */
    .node-center {
      width: 72px; height: 72px;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%);
      font-size: 1.5rem; font-weight: 800; color: #fff;
      border: none;
      z-index: 3;
      box-shadow: 0 0 0 8px rgba(59,130,246,.14), 0 0 40px rgba(59,130,246,.45);
      animation: hub-pulse 3s ease-in-out infinite;
    }
    .node-center::before, .node-center::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid rgba(59,130,246,.35);
      animation: hub-ring 3s ease-in-out infinite;
    }
    .node-center::before { width: 92px;  height: 92px; }
    .node-center::after  { width: 112px; height: 112px; animation-delay: .55s; border-color: rgba(99,102,241,.22); }
    @keyframes hub-pulse {
      0%,100% { box-shadow: 0 0 0 8px rgba(59,130,246,.12), 0 0 35px rgba(59,130,246,.4); }
      50%      { box-shadow: 0 0 0 14px rgba(59,130,246,.2), 0 0 60px rgba(59,130,246,.65); }
    }
    @keyframes hub-ring {
      0%,100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
      50%      { transform: translate(-50%, -50%) scale(1.08); opacity: .45; }
    }

    /* Satellite nodes */
    .node-1, .node-2, .node-3, .node-4 { width: 52px; height: 52px; }
    .node-1 svg { color: #60a5fa; }
    .node-2 svg { color: #818cf8; }
    .node-3 svg { color: #a78bfa; }
    .node-4 svg { color: #38bdf8; }
    .node-1 svg, .node-2 svg, .node-3 svg, .node-4 svg { width: 22px; height: 22px; stroke-width: 2; }

    .node-1 { top: 0; left: 50%; transform: translate(-50%, 0); background: rgba(59,130,246,.22); animation: glow-b 4s ease-in-out infinite; }
    .node-2 { top: 50%; right: 0; transform: translate(0, -50%); background: rgba(99,102,241,.22); animation: glow-i 5s ease-in-out infinite .8s; }
    .node-3 { bottom: 0; left: 50%; transform: translate(-50%, 0); background: rgba(139,92,246,.22); animation: glow-v 4.5s ease-in-out infinite 1.6s; }
    .node-4 { top: 50%; left: 0; transform: translate(0, -50%); background: rgba(14,165,233,.22); animation: glow-s 5.5s ease-in-out infinite 2.4s; }

    @keyframes glow-b { 0%,100% { box-shadow: 0 0 14px rgba(59,130,246,.3);  } 50% { box-shadow: 0 0 28px rgba(59,130,246,.65);  } }
    @keyframes glow-i { 0%,100% { box-shadow: 0 0 14px rgba(99,102,241,.3);  } 50% { box-shadow: 0 0 28px rgba(99,102,241,.65);  } }
    @keyframes glow-v { 0%,100% { box-shadow: 0 0 14px rgba(139,92,246,.3);  } 50% { box-shadow: 0 0 28px rgba(139,92,246,.65);  } }
    @keyframes glow-s { 0%,100% { box-shadow: 0 0 14px rgba(14,165,233,.3);  } 50% { box-shadow: 0 0 28px rgba(14,165,233,.65);  } }

    /* Orbiting glow-dots */
    .orbit-dot {
      position: absolute;
      border-radius: 50%;
      top: 50%; left: 50%;
      pointer-events: none;
      z-index: 2;
    }
    .od-1 { width: 8px; height: 8px; margin: -4px 0 0 -4px;    background: #60a5fa; box-shadow: 0 0 10px #60a5fa, 0 0 20px rgba(96,165,250,.5);  animation: orb-r1 9s  linear infinite; }
    .od-2 { width: 6px; height: 6px; margin: -3px 0 0 -3px;    background: #818cf8; box-shadow: 0 0 8px  #818cf8, 0 0 16px rgba(129,140,248,.5); animation: orb-r1 9s  linear infinite 4.5s; }
    .od-3 { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #38bdf8; box-shadow: 0 0 10px #38bdf8, 0 0 20px rgba(56,189,248,.5);  animation: orb-r2 6s  linear infinite 1s; }
    .od-4 { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: #a78bfa; box-shadow: 0 0 8px  #a78bfa, 0 0 16px rgba(167,139,250,.5); animation: orb-r2 6s  linear infinite 3.5s; }
    @keyframes orb-r1 { from { transform: rotate(0deg)  translateX(165px); } to { transform: rotate(360deg)  translateX(165px); } }
    @keyframes orb-r2 { from { transform: rotate(90deg) translateX(115px); } to { transform: rotate(450deg) translateX(115px); } }

    /* Floating micro-sparks */
    .nv-spark { position: absolute; border-radius: 50%; pointer-events: none; animation: spark-float 7s ease-in-out infinite; }
    .nv-spark-1 { width: 4px; height: 4px; top: 12%; left: 22%;  background: rgba(96,165,250,.85); }
    .nv-spark-2 { width: 3px; height: 3px; top: 73%; left: 13%;  background: rgba(129,140,248,.85); animation-delay: 2s;  animation-duration: 9s; }
    .nv-spark-3 { width: 4px; height: 4px; top: 17%; right: 17%; background: rgba(56,189,248,.85);  animation-delay: 1s;  animation-duration: 8s; }
    .nv-spark-4 { width: 3px; height: 3px; top: 79%; right: 21%; background: rgba(167,139,250,.85); animation-delay: 3s;  animation-duration: 6.5s; }
    .nv-spark-5 { width: 2px; height: 2px; top: 43%; left:  7%;  background: rgba(96,165,250,.6);   animation-delay: 4.5s;animation-duration: 10s; }
    @keyframes spark-float {
      0%,100% { transform: translate(0,0)       scale(1);   opacity: .6; }
      33%      { transform: translate(9px,-13px) scale(1.5); opacity: 1; }
      66%      { transform: translate(-7px,8px)  scale(.7);  opacity: .3; }
    }

    /* ============================================================
       7. DASHBOARD SHOWCASE
    ============================================================ */
    #dashboard-section { background: var(--surface-muted); }
    .dashboard-showcase {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      align-items: center;
    }
    @media (min-width: 1024px) {
      .dashboard-showcase { grid-template-columns: 1fr 1.4fr; }
    }
    .dashboard-mock-wrap {
      position: relative;
      overflow: visible;
      padding: 2.5rem 1.75rem;
      margin: -2.5rem -1.75rem;
    }
    .dashboard-mock-wrap .mockup-card {
      animation: float-slow 9s ease-in-out infinite;
    }
    .dashboard-floating-badge {
      position: absolute;
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .55rem 1.1rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-full);
      font-size: .8125rem;
      font-weight: 600;
      box-shadow: var(--shadow-md);
      animation: float 5s ease-in-out infinite;
      z-index: 5;
      white-space: nowrap;
    }
    .badge-ably {
      top: 0.75rem;
      right: 0.75rem;
      color: var(--c-600);
      animation-delay: .5s;
    }
    .badge-gps {
      bottom: 0.75rem;
      left: 0.75rem;
      color: var(--c-green);
      animation-delay: 1.2s;
    }
    .badge-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .dot-blue { background: var(--c-500); }
    .dot-green { background: var(--c-green); animation: blink 1.5s ease-in-out infinite; }

    /* ============================================================
       8. PRICING
    ============================================================ */
    #pricing { background: var(--surface); }
    .pricing-toggle-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 3rem;
    }
    .pricing-toggle-label {
      font-size: .9375rem;
      font-weight: 600;
      color: var(--text-muted);
      transition: color .2s;
    }
    .pricing-toggle-label.active { color: var(--text); }
    .toggle-switch {
      position: relative;
      width: 52px; height: 28px;
      background: var(--c-500);
      border-radius: var(--radius-full);
      cursor: pointer;
      transition: background .2s;
    }
    .toggle-switch::after {
      content: '';
      position: absolute;
      width: 22px; height: 22px;
      background: #fff;
      border-radius: 50%;
      top: 3px; left: 3px;
      transition: transform .2s;
      box-shadow: 0 2px 6px rgba(0,0,0,.2);
    }
    .toggle-switch.yearly::after { transform: translateX(24px); }
    .yearly-badge {
      background: rgba(34,197,94,.1);
      color: var(--c-green);
      border: 1px solid rgba(34,197,94,.2);
      border-radius: var(--radius-full);
      font-size: .75rem;
      font-weight: 700;
      padding: .2rem .6rem;
    }
    .pricing-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }
    @media (min-width: 640px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); } }

    .pricing-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      transition: all .25s ease;
      position: relative;
    }
    .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .pricing-card--featured {
      border-color: var(--c-500);
      box-shadow: 0 0 0 1px var(--c-500), var(--shadow-blue-lg);
      transform: scale(1.02);
    }
    .pricing-card--featured:hover { transform: scale(1.02) translateY(-4px); }
    @media (min-width: 1024px) {
      .pricing-card--featured { transform: scale(1.04); }
      .pricing-card--featured:hover { transform: scale(1.04) translateY(-4px); }
    }
    .plan-popular-badge {
      position: absolute;
      top: -14px; left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--c-sky), var(--c-600));
      color: #fff;
      font-size: .75rem;
      font-weight: 700;
      padding: .3rem 1rem;
      border-radius: var(--radius-full);
      white-space: nowrap;
      box-shadow: var(--shadow-blue);
      max-width: calc(100% - 2rem);
      text-align: center;
    }
    .plan-tier {
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: .75rem;
    }
    .plan-tier--starter { color: var(--text-light); }
    .plan-tier--pro { color: var(--c-500); }
    .plan-tier--business { color: var(--c-indigo); }
    .plan-tier--enterprise { color: var(--c-amber); }

    .plan-price {
      margin-bottom: .5rem;
    }
    .plan-price-value {
      font-size: 2.25rem;
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--text);
      line-height: 1;
    }
    .plan-price-suffix {
      font-size: .875rem;
      color: var(--text-muted);
      font-weight: 500;
      margin-left: .25rem;
    }
    .plan-price-yearly { display: none; }
    .yearly-mode .plan-price-monthly { display: none; }
    .yearly-mode .plan-price-yearly { display: inline; }

    .plan-seat-note {
      font-size: .8125rem;
      color: var(--text-light);
      margin-bottom: 1.25rem;
    }
    .plan-divider { height: 1px; background: var(--border); margin: 1.25rem 0; }
    .plan-features-list { flex: 1; margin-bottom: 1.5rem; }
    .plan-feature {
      display: flex;
      align-items: flex-start;
      gap: .625rem;
      padding: .4rem 0;
      font-size: .875rem;
      color: var(--text-muted);
    }
    .plan-feature-check {
      width: 18px; height: 18px; flex-shrink: 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: .1rem;
    }
    .check-green { background: rgba(34,197,94,.1); color: var(--c-green); }
    .check-blue  { background: rgba(59,130,246,.1); color: var(--c-500); }
    .check-indigo{ background: rgba(99,102,241,.1); color: var(--c-indigo); }
    .check-amber { background: rgba(245,158,11,.1); color: var(--c-amber); }
    .plan-feature-check svg { width: 11px; height: 11px; stroke-width: 3; }
    .plan-cta { margin-top: auto; }

    /* ============================================================
       9. COMPLIANCE
    ============================================================ */
    #compliance { background: var(--surface-muted); }
    .compliance-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    @media (min-width: 768px) { .compliance-grid { grid-template-columns: repeat(3, 1fr); } }
    .compliance-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: all .25s;
    }
    .compliance-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(59,130,246,.2); }
    .compliance-icon-wrap {
      width: 56px; height: 56px;
      border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
    }
    .compliance-icon-wrap svg { width: 28px; height: 28px; }
    .compliance-title { font-size: 1.0625rem; font-weight: 700; color: var(--text); }
    .compliance-desc { font-size: .9rem; color: var(--text-muted); line-height: 1.65; overflow-wrap: break-word; }

    /* ============================================================
       10. TESTIMONIALS
    ============================================================ */
    #testimonials { background: var(--surface); }
    .testimonials-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    @media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
    .testimonial-card {
      background: var(--surface-muted);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      transition: all .25s;
    }
    .testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .quote-mark {
      font-size: 4rem;
      line-height: .8;
      color: var(--c-300);
      font-family: Georgia, serif;
      margin-bottom: 1rem;
    }
    .quote-text { font-size: .9375rem; color: var(--text); line-height: 1.75; margin-bottom: 1.5rem; font-style: italic; }
    .quote-author { display: flex; align-items: center; gap: .875rem; }
    .author-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .875rem; font-weight: 700; color: #fff;
      flex-shrink: 0;
    }
    .av-blue   { background: linear-gradient(135deg, var(--c-sky), var(--c-700)); }
    .av-indigo { background: linear-gradient(135deg, var(--c-indigo), #4f46e5); }
    .av-teal   { background: linear-gradient(135deg, var(--c-teal), #0891b2); }
    .author-name { font-size: .9375rem; font-weight: 700; color: var(--text); }
    .author-role { font-size: .8125rem; color: var(--text-muted); }

    /* ============================================================
       11. FINAL CTA
    ============================================================ */
    #cta-section {
      background: linear-gradient(145deg, #020817 0%, #0f172a 30%, #1a1040 55%, #1e3a8a 85%, #0c1a50 100%);
      padding: 7rem 0;
      position: relative;
      overflow: hidden;
    }
    #cta-section .hero-orb-1 { opacity: .6; }
    #cta-section .hero-orb-2 { opacity: .5; }
    .cta-content {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 680px;
      margin: 0 auto;
    }
    .cta-title {
      font-size: clamp(2rem, 5vw, 3.25rem);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 1.25rem;
    }
    .cta-subtitle { font-size: 1.125rem; color: rgba(255,255,255,.6); margin-bottom: 2.5rem; line-height: 1.7; }
    .cta-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; }
    .cta-note { font-size: .875rem; color: rgba(255,255,255,.35); text-align: center; overflow-wrap: break-word; }

    /* ============================================================
       12. FOOTER
    ============================================================ */
    footer {
      background: var(--c-950);
      padding: 4rem 0 2rem;
      border-top: 1px solid rgba(255,255,255,.06);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      margin-bottom: 3rem;
    }
    @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; } }
    .footer-brand-desc { font-size: .875rem; color: rgba(255,255,255,.4); line-height: 1.7; margin: 1rem 0 1.5rem; max-width: 280px; }
    .footer-col-title { font-size: .8125rem; font-weight: 700; color: rgba(255,255,255,.6); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.25rem; }
    .footer-links { display: flex; flex-direction: column; gap: .625rem; }
    .footer-links a { font-size: .9rem; color: rgba(255,255,255,.45); transition: color .2s; }
    .footer-links a:hover { color: rgba(255,255,255,.85); }
    .footer-bottom {
      padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,.06);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      text-align: center;
    }
    @media (min-width: 768px) { .footer-bottom { justify-content: space-between; text-align: left; } }
    .footer-copy { font-size: .8125rem; color: rgba(255,255,255,.3); }
    .footer-legal { display: flex; gap: 1.5rem; }
    .footer-legal a { font-size: .8125rem; color: rgba(255,255,255,.3); transition: color .2s; }
    .footer-legal a:hover { color: rgba(255,255,255,.65); }
    .footer-made { font-size: .8125rem; color: rgba(255,255,255,.25); }

    /* ============================================================
       RESPONSIVE HELPERS
    ============================================================ */

    /* ── Tablet (640–1023px) ── */
    @media (max-width: 1023px) {
      .dashboard-mock-wrap .dashboard-floating-badge { font-size: .72rem; padding: .35rem .75rem; }
      .pricing-card--featured { transform: none; }
      .pricing-card--featured:hover { transform: translateY(-4px); }
    }

    /* ── Small tablet / large phone (max 767px) ── */
    @media (max-width: 767px) {
      .section-title { font-size: clamp(1.5rem, 5vw, 2rem); }
      .section-subtitle { font-size: .95rem; }
      .marketplace-grid { gap: 2.5rem; }
      .marketplace-bullets { margin: 1.5rem 0; }
      .dashboard-showcase { gap: 2rem; }
      .cta-btns { flex-direction: column; align-items: center; }
      .cta-btns .btn { width: 100%; max-width: 320px; }
      .footer-legal { flex-wrap: wrap; gap: 1rem; }
    }

    /* ── Phone (max 639px) ── */
    @media (max-width: 639px) {
      .section { padding: 3.5rem 0; }
      #hero { height: auto; min-height: auto; }
      .rev-track { height: auto; min-height: auto; }
      .rev-slide.is-active { min-height: 0; }
      #navbar { top: 0; left: 0; right: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
      .rsl-inner { gap: 1.5rem; padding: calc(var(--nav-h) + 2.25rem) 0 3.25rem; }
      .rsl-title { font-size: clamp(1.85rem, 9vw, 2.35rem); line-height: 1.08; }
      .rsl-subtitle { font-size: .95rem; line-height: 1.65; margin-bottom: 1.75rem; }
      .rsl-visual { margin-top: .25rem; padding: 8px 0 0; }
      .rsl-orb-a,
      .rsl-orb-b,
      .rsl-orb-c { opacity: .55; animation: none; }
      .rsl-grad,
      .rsl-grad-teal,
      .rsl-grad-violet,
      .rsl-grad-amber,
      .rsl-grad-emerald { background-size: 100%; animation: none; }
      .rsl-stats { gap: .75rem; }
      .rsl-stat-value { font-size: 1.2rem; }
      .rsl-stat-label { font-size: .72rem; }
      .rsl-ctas { flex-direction: column; }
      .rsl-ctas .btn { width: 100%; justify-content: center; }
      .rsl-badge { font-size: .72rem; padding: .35rem .75rem .35rem .55rem; }
      .mockup-stats-row { grid-template-columns: repeat(2, 1fr); }
      .mockup-grid-body { grid-template-columns: 1fr; }
      .trust-inner { gap: 1.25rem; }
      .trust-badges { gap: .625rem; }
      .trust-badge { padding: .4rem .875rem; font-size: .78rem; }
      .steps-container { gap: 1.5rem; }
      .step { padding: 0 .5rem; }
      .network-visual { max-width: 280px; }
      .pricing-toggle-wrap { gap: .625rem; flex-wrap: wrap; justify-content: center; }
      .pricing-toggle-label { font-size: .85rem; }
      .pricing-card { padding: 1.5rem; }
      .plan-price-value { font-size: 1.875rem; }
      .dashboard-mock-wrap .dashboard-floating-badge { display: none; }
      #cta-section { padding: 4.5rem 0; }
      .cta-title { font-size: clamp(1.5rem, 6vw, 2rem); }
      .cta-subtitle { font-size: 1rem; margin-bottom: 1.75rem; }
      .footer-grid { gap: 2rem; }
      .plan-popular-badge { font-size: .68rem; padding: .25rem .75rem; }
    }

    /* ── Very small phones (max 374px) ── */
    @media (max-width: 374px) {
      .container { padding: 0 1rem; }
      .rsl-title { font-size: 1.75rem; }
      .rsl-stats { flex-direction: column; gap: .5rem; }
      .rsl-stat-sep { display: none; }
      .trust-badge { font-size: .72rem; padding: .35rem .65rem; }
      .network-visual { max-width: 240px; }
      .pricing-card { padding: 1.25rem; }
      .plan-price-value { font-size: 1.625rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .rsl-orb-a,
      .rsl-orb-b,
      .rsl-orb-c,
      .rsl-grad,
      .rsl-grad-teal,
      .rsl-grad-violet,
      .rsl-grad-amber,
      .rsl-grad-emerald,
      .rsl-visual .mockup-card { animation: none !important; }
      .rev-slide { transition: none; }
    }